/* Fighter chests in the Shop (chest-shop.js) and the chest opening screen (chest-open.js). */
.ck-C{--rc:#6f7d8f}.ck-R{--rc:#2f86e0}.ck-E{--rc:#9a4be0}.ck-L{--rc:linear-gradient(#ffd84a,#f39b0d)}
.chest-shop{padding:9px 8px 8px;container-type:inline-size}
.ck-head{padding:2px 4px 8px}
.ck-head h2{margin:0}
.ck-head p{font-size:12px;line-height:1.35;margin:4px 0 0;color:#a8ceff;font-weight:700}
.ck-coin{width:22px;height:22px;flex:none}
/* Wood strip */
.ck-wood{display:grid;grid-template-columns:54px 1fr auto;gap:8px;align-items:center;border:2px solid #c98a4e;border-radius:12px;padding:5px 12px 5px 5px;margin-bottom:9px;
  background:linear-gradient(120deg,#5a3618f0,#2e1a0cf0);box-shadow:0 0 0 2px #2a1405,inset 0 2px #ffd9a055}
.ck-wood .ck-chest{width:52px;justify-self:center}
.ck-wood strong{font:400 clamp(14px,4.2cqw,18px)/1 'Lilita One';color:#fff;-webkit-text-stroke:1.5px #2a1405;paint-order:stroke fill}
.ck-wood strong em{font-style:normal;font-size:.72em;background:#38c45a;border:1.5px solid #0d4d22;border-radius:5px;padding:1px 5px 0;margin-left:3px;vertical-align:2px;-webkit-text-stroke:0;text-shadow:0 1px #0d4d22}
.ck-wood p{margin:3px 0 0;font-size:12px;font-weight:700;color:#f5d6b0;line-height:1.25}
.ck-pips{display:grid;grid-template-columns:repeat(3,14px);gap:4px;justify-items:center}
.ck-pips i{position:relative;width:14px;height:14px;border-radius:4px;border:2px solid #2a1405;background:linear-gradient(#ffcf6a,#e08a1c)}
.ck-pips i.is-used{background:#2b1a0a;border-color:#6b4a22}
.ck-pips i.is-used::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font:900 11px/1 sans-serif;color:#8a6a3a}
.ck-pips small{grid-column:1/-1;font:400 11px/1.05 'Lilita One';color:#ffe0b0;letter-spacing:.03em;white-space:nowrap;margin-top:2px;text-align:center}
/* shared bits */
.ck-count{margin:0;font-size:12px;line-height:1.25;font-weight:800;letter-spacing:.04em;color:#a8ceff}
.ck-odds{display:flex;gap:3px;flex-wrap:wrap}
.ck-odds span{flex:1 1 auto;min-width:0;white-space:nowrap;border-radius:5px;padding:3px 5px 2px;text-align:center;border:1.5px solid #0a1430;background:var(--rc);font:400 12px/1.1 'Lilita One';color:#fff;text-shadow:0 1px #0008}
.ck-odds .ck-L{color:#4a2600;text-shadow:none}
.ck-hfoot .ck-odds span{flex:1 1 40%}
.ck-buy{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;border:1.5px solid #a7f7a6;border-radius:8px;background:linear-gradient(#63d77d,#28a55b 52%,#18864d);box-shadow:inset 0 1px #c4ffd1,inset 0 -2px #106a40,0 2px #063727;color:#fff;font:400 clamp(17px,5cqw,22px)/1 'Lilita One';text-shadow:0 2px #165438;cursor:pointer}
.ck-buy[aria-disabled="true"]{filter:saturate(.45) brightness(.85)}
.ck-buy:active{transform:translateY(2px)}
.ck-i{position:absolute;right:8px;top:7px;width:26px;height:26px;border-radius:50%;border:2px solid #0a1430;background:linear-gradient(#5fc8ff,#1f7fd0);color:#fff;font:400 16px/1 'Lilita One';padding:0;z-index:4;cursor:pointer}
.ck-i::before{content:"";position:absolute;inset:-11px}
.ck-ribbon{position:absolute;left:8px;top:8px;z-index:3;background:linear-gradient(#ff5f9e,#d81f68);border:2px solid #3b0018;border-radius:6px;padding:3px 8px 2px;font:400 12px/1 'Lilita One';letter-spacing:.04em;transform:rotate(-4deg);box-shadow:0 2px #0006;color:#fff}
/* Legendary hero */
.ck-hero{position:relative;display:grid;grid-template-columns:50% 1fr;gap:4px 6px;margin:9px 0 8px;padding:10px 12px 11px 6px;border:2px solid #ffcf3a;border-radius:16px;
  background:radial-gradient(120% 90% at 26% 55%,#6b3bc0 0,#2c1466 48%,#170a3e 100%);box-shadow:0 0 0 2px #3b1a00,inset 0 2px #fff3a088,0 0 22px #ffbf2a66,0 6px 8px #050c2099;overflow:hidden}
.ck-stage{position:relative;display:grid;place-items:center;min-height:140px}
.ck-stage .ck-chest{z-index:2;width:100%;max-width:180px;margin-bottom:24px}
.ck-rays{position:absolute;inset:-30% -20%;z-index:0;background:repeating-conic-gradient(from 0deg at 50% 52%,#ffe17a2e 0 9deg,transparent 9deg 22deg);-webkit-mask:radial-gradient(circle at 50% 52%,#000 0,#000 30%,transparent 62%);mask:radial-gradient(circle at 50% 52%,#000 0,#000 30%,transparent 62%)}
.ck-pedestal{position:absolute;z-index:1;bottom:6px;left:12%;right:12%;height:30px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#fff4b0 0,#ffc93a 30%,#a8620a 62%,#4a2400 100%);box-shadow:0 0 18px #ffcf3acc,0 5px 0 #2a1200}
.ck-hinfo{display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:0}
.ck-hinfo h3{margin:0;padding-right:24px;font:400 clamp(20px,6cqw,26px)/.95 'Lilita One';color:#ffe47a;text-shadow:0 2px 0 #3b1a00,0 0 8px #ffbf2a88;letter-spacing:.3px}
.ck-hinfo .ck-buy{margin-top:3px}
.ck-hfoot{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;padding:7px 2px 0 6px;border-top:1.5px solid #ffffff22}
/* Blue and Red */
.ck-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-small{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 8px 9px;border:2px solid #50a8e0;border-radius:14px;text-align:center;
  background:linear-gradient(170deg,#1d4f9aee,#0d2a66ee 60%,#0a1f4ff5);box-shadow:0 0 0 2px #061433,inset 0 2px #a8d8ff55,0 5px 6px #050c2099}
.ck-small.is-red{border-color:#ff7a6a;background:linear-gradient(170deg,#7a1e2cee,#3a0f1fee 60%,#2a0b19f5);box-shadow:0 0 0 2px #2a0508,inset 0 2px #ffb0a055,0 5px 6px #050c2099}
.ck-art{height:84px;display:grid;place-items:center;border-radius:10px;border:2px solid #0a1d3f;background:radial-gradient(circle at 50% 58%,#5aa8ff,#0d2a66 74%)}
.ck-small.is-red .ck-art{background:radial-gradient(circle at 50% 58%,#ff6a5a,#5a0d18 74%)}
.ck-art .ck-chest{width:72px}
.ck-small h3{margin:0;font:400 15px/1 'Lilita One';color:#fff;text-shadow:0 2px 0 #0008}
.ck-small .ck-buy{margin-top:auto}
/* odds popup */
.ck-oddsheet{text-align:center;color:#fff}
.ck-oddsheet img{width:110px;height:110px;object-fit:contain;margin:-4px auto 0;display:block}
.ck-oddsheet h2{margin:2px 0 0;font:400 24px/1 'Lilita One'}
.ck-sub{margin:4px 0 8px;font-size:13px;font-weight:700;color:#c9d6ff}
.ck-oddsheet table{width:100%;border-collapse:collapse;font-size:14px;font-weight:800}
.ck-oddsheet th{font-size:11px;color:#9fb3e0;font-weight:800;text-align:left;padding:3px 4px}
.ck-oddsheet td{padding:6px 4px;border-top:1px solid #ffffff1c;text-align:left}
.ck-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--rc);margin-right:6px;vertical-align:-1px;border:1.5px solid #0a1430}
.ck-note{margin:6px 0 0;font-size:12px;font-weight:700;color:#c9d6ff;line-height:1.3}

.ck-ok{margin-top:12px;min-width:140px;min-height:44px;border:3px solid #160d26;border-radius:14px;font:400 22px/1 'Lilita One';color:#4a2600;background:linear-gradient(180deg,#ffe46a,#f2b31c);box-shadow:inset 0 -4px 0 #c98a0c,0 3px 0 #160d26;cursor:pointer}

/* ---------- the opening screen ---------- */
.co-screen{position:fixed;inset:0;z-index:44;overflow:hidden;color:#fff;font-family:'DM Sans',sans-serif;--line:#160d26;--glow:255,226,140;
  background:radial-gradient(120% 70% at 50% 62%,#162a5c 0%,#0b1636 60%,#060d24 100%);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.co-top{position:absolute;top:0;left:0;right:0;padding:calc(18px + env(safe-area-inset-top)) 16px 0;text-align:center;z-index:30}
.co-top h2{margin:0;font:400 30px/1.1 'Lilita One';letter-spacing:.5px;text-shadow:0 3px 0 var(--line),0 0 18px rgba(var(--glow),.35)}
.co-top p{margin:2px 0 0;font-size:13px;color:#aab6d8;min-height:18px;font-weight:700}
.co-stage{position:absolute;inset:0}
.co-rays{position:absolute;left:50%;top:54%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(var(--glow),.22) 0deg 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 0%,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 0%,#000 18%,transparent 62%)}
.co-halo{position:absolute;left:50%;top:54%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,rgba(var(--glow),.75) 0%,rgba(var(--glow),.25) 35%,transparent 68%)}
/* The light beam and the shockwave ring when the lid bursts open. */
.co-beam{position:absolute;left:50%;bottom:50%;width:min(50vw,210px);height:52%;transform:translateX(-50%) scaleY(0);transform-origin:50% 100%;opacity:0;pointer-events:none;mix-blend-mode:screen;filter:blur(5px);
  background:linear-gradient(to top,rgba(var(--glow),.95),rgba(var(--glow),.3) 45%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
.co-ring{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;border:7px solid rgba(var(--glow),.9);opacity:0;pointer-events:none;z-index:17}
.co-chest{position:absolute;left:50%;top:51%;width:min(68vw,280px);aspect-ratio:480/539;transform:translate(-50%,-50%);cursor:pointer;outline:none}
.co-wrap{position:absolute;inset:0;transform-origin:50% 93%;opacity:0}
.co-frame{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none}
.co-mouth{position:absolute;z-index:3;width:70%;height:22%;margin:-16.5% 0 0 -35%;border-radius:50%;opacity:0;mix-blend-mode:screen;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,#fff 0%,rgba(var(--glow),1) 30%,rgba(var(--glow),0) 70%);filter:blur(4px)}
.co-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,#fff 0,rgba(255,255,255,.7) 18%,transparent 48%);opacity:0;pointer-events:none;z-index:18}
.co-spark{position:absolute;pointer-events:none;z-index:25;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,rgba(var(--glow),1) 40%,transparent 70%)}
.co-spark.is-star{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);border-radius:0;background:#fff8d6}
.co-hint{position:absolute;left:0;right:0;top:calc(86px + env(safe-area-inset-top));text-align:center;font:400 18px 'Lilita One';letter-spacing:1px;text-shadow:0 2px 0 var(--line);z-index:12;animation:co-pulse 1.1s ease-in-out infinite;opacity:0;pointer-events:none}
@keyframes co-pulse{50%{transform:scale(1.08)}}
.co-card{position:absolute;left:50%;top:50%;width:112px;height:199px;margin:-100px 0 0 -56px;z-index:20;perspective:700px;pointer-events:none}
.co-in{position:absolute;inset:0;transform-style:preserve-3d}
.co-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid var(--line);overflow:hidden}
.co-back{background:linear-gradient(160deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center}
.co-back::after{content:"";width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 6px rgba(0,0,0,.12)}
.co-front{transform:rotateY(180deg);border-color:var(--rk);
  background:radial-gradient(ellipse 80% 45% at 50% 30%,color-mix(in srgb,var(--fc) 55%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--rk) 45%,transparent),transparent 42%),linear-gradient(180deg,color-mix(in srgb,var(--fc) 30%,#1b2a5e),#101c44 70%)}
/* The owner's card picture fills the card; the name and the cards bar sit on its floor. */
.co-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* The card's top strip (owner's pick C, 2026-11-03): the fighter's level on the left, the rarity in its colour, and how
   many cards came out as a big gold ×N on the right. The cards bar gets a thicker ink outline. */
.co-strip{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:2px;padding:4px 3px 12px;background:linear-gradient(#0a1430e6 55%,transparent)}
.co-lvl{font:400 9px/1 'Lilita One';color:#cfe0ff;padding:2px 3px 1px;border-radius:6px;background:#0a1430;border:2px solid var(--rk);white-space:nowrap}.co-lvl b{font-size:13px;color:#fff}
.co-rname{font:400 7.5px/1 'Lilita One';color:var(--rk);text-shadow:0 1px 0 var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* LV 5 and up shows silver, max level gold, as on the Fighters tab (app.js cardFrame). */
.co-front.frame-silver .co-lvl{background:linear-gradient(#f2f6fb,#9aaecb);color:#1b2b4a}.co-front.frame-silver .co-lvl b{color:#1b2b4a}.co-front.frame-gold .co-lvl{background:linear-gradient(#ffd84a,#e08a00);color:#5a2a00}.co-front.frame-gold .co-lvl b{color:#fff;-webkit-text-stroke:2px #5a2a00;paint-order:stroke fill}
.co-num{font:400 18px/1 'Lilita One';color:#ffd54a;-webkit-text-stroke:3px var(--line);paint-order:stroke fill;white-space:nowrap}
.co-front .fc-bar-ico{border:2px solid var(--line)}.co-front .fc-bar-track{border:2px solid var(--line);height:15px}.co-front .fc-bar-track b{-webkit-text-stroke:2px var(--line);paint-order:stroke fill;text-shadow:none;line-height:12px}
.co-foot{position:absolute;left:0;right:0;bottom:0;padding:18px 6px 7px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(transparent,#0a1430e0 40%)}
.co-nm{margin-top:3px;font:400 16px/1 'Lilita One';text-shadow:0 2px 0 var(--line);white-space:nowrap}
.co-front .fc-bar{width:100%;margin-top:6px}
.co-front .fc-bar-ico{width:20px;height:20px}.co-front .fc-bar-ico svg{width:15px;height:15px}.co-front .fc-bar-track b{font-size:11px}
.co-cnt{position:absolute;right:3px;top:3px;padding:2px 6px 1px;border-radius:8px;border:2px solid var(--line);background:#ff8a1f;font:400 16px/1 'Lilita One';color:#fff;text-shadow:0 1px 0 var(--line)}
.co-melt{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#7a4a10f0,#2a1a08f0 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:400 26px/1 'Lilita One';color:#ffe46a;-webkit-text-stroke:2px var(--line);paint-order:stroke fill}
.co-melt i{font:400 12px/1.1 'Lilita One';font-style:normal;color:#fff;-webkit-text-stroke:0;text-shadow:0 1px 0 var(--line);text-align:center;padding:0 8px}
.co-melt svg{width:62px;height:66px;filter:drop-shadow(0 3px 0 var(--line)) drop-shadow(0 0 12px #ffd54a)}
/* The chest's coins come out as the game coin itself, no card (owner's pick B, 2026-11-02): a big glowing coin with
   the amount under it. Doubled class to outrank .co-card .co-front below. */
.co-card.co-coins .co-front{transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;box-shadow:none;overflow:visible;background:radial-gradient(circle at 50% 42%,#ffd54a88,transparent 55%)}
.co-coins .co-front svg{width:110px;height:116px;filter:drop-shadow(0 4px 0 var(--line)) drop-shadow(0 0 18px #ffd54a)}
.co-coins .co-front b{font:400 36px/1 'Lilita One';color:#ffe46a;-webkit-text-stroke:2px var(--line);paint-order:stroke fill}
.co-coins .co-front span{font:400 16px/1 'Lilita One';letter-spacing:1px;text-shadow:0 1px 0 var(--line)}
.co-screen .is-C{--rk:#8a98ad}.co-screen .is-R{--rk:#2f8ff0}.co-screen .is-E{--rk:#a24df2}.co-screen .is-L{--rk:#ffc22a}
.co-card .co-front{box-shadow:0 0 16px color-mix(in srgb,var(--rk) 55%,transparent)}.co-card.is-E .co-front{box-shadow:inset 0 0 22px #a24df2aa,0 0 22px #b56bff}.co-card.is-L .co-front{box-shadow:inset 0 0 26px #ffd54acc,0 0 30px #ffd54a}
.co-row{position:absolute;left:12px;right:12px;bottom:calc(40px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:center;gap:6px;z-index:15;min-height:84px}
.co-mini{overflow:hidden;width:min(60px,calc((100vw - 54px) / 6));height:84px;border-radius:9px;border:2.5px solid var(--rk,var(--line));box-shadow:0 0 0 1.5px var(--line);background:radial-gradient(ellipse 80% 45% at 50% 40%,color-mix(in srgb,var(--fc,#26345f) 55%,transparent),transparent 72%),linear-gradient(180deg,#22407e,#101c44);position:relative;opacity:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.co-mini .co-nm{position:relative;width:100%;text-align:center;padding:8px 0 4px;font-size:11px;margin-top:0;text-shadow:0 1px 0 var(--line);background:linear-gradient(transparent,#0a1430e6 55%)}
.co-mini .co-cnt{right:2px;top:1px;font-size:15px;padding:0;border:0;background:none;color:#ffd54a;-webkit-text-stroke:2.5px var(--line);paint-order:stroke fill;text-shadow:none}
.co-mini.is-new::after{content:'NEW';position:absolute;left:0;top:0;height:14px;font:400 8.5px/14px 'Lilita One';background:#ff4d6d;color:#fff;padding:0 3px;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);border-radius:0 0 6px 0}
.co-mini.co-coins{justify-content:center;gap:4px;overflow:visible;border:0;box-shadow:none;background:radial-gradient(circle at 50% 40%,#ffd54a55,transparent 65%)}
.co-mini.co-coins svg{width:44px;height:46px;filter:drop-shadow(0 2px 0 var(--line))}
.co-mini.co-coins .co-cnt{position:static;border:0;background:none;padding:0;font-size:15px;color:#ffe46a;-webkit-text-stroke:1.5px var(--line);paint-order:stroke fill}
/* A level chest's other items (gems, ticket, picture, ring, trail, title, crown) come out like the coins. */
.co-item .co-front>:is(img,svg,.rw-face){width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 4px 0 var(--line)) drop-shadow(0 0 18px #ffd54a)}
.co-item .rw-face img{position:absolute;inset:0;width:100%;height:100%}
.co-item .co-front>.rw-title-art{width:150px;height:110px;font-size:28px}
.co-mini.co-item>:is(img,svg,.rw-face){width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 0 var(--line))}
.co-mini.co-item>.rw-title-art{width:100%;height:46px;font-size:10px;overflow-wrap:normal;-webkit-text-stroke:.6px #4a2a00}
/* A Champion chest can fill nine spots: past six the row's spots shrink to fit one line, without the names. */
.co-row:has(>:nth-child(7))>.co-mini{width:calc((100vw - 72px) / 9);height:64px}.co-row:has(>:nth-child(7))>.co-mini .co-nm{display:none}
.co-row:has(>:nth-child(7))>.co-mini>:is(img,svg,.rw-face):not(.co-pic){width:30px;height:30px}
.co-collect{position:absolute;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:26;border:3px solid var(--line);border-radius:16px;padding:10px 34px 12px;min-height:48px;
  font:400 22px/1 'Lilita One';letter-spacing:1px;color:#fff;text-shadow:0 2px 0 var(--line);cursor:pointer;opacity:0;pointer-events:none;background:linear-gradient(180deg,#5fd36a,#2f9a3e);box-shadow:inset 0 -5px 0 #1f7a2e,0 4px 0 var(--line)}
.co-collect.is-on{pointer-events:auto}
.co-left{position:absolute;right:-2%;top:60%;z-index:21;min-width:38px;height:38px;padding:0 8px;border-radius:19px;border:3px solid var(--line);background:#ff4d6d;font:400 20px/32px 'Lilita One';text-align:center;color:#fff;text-shadow:0 2px 0 var(--line);opacity:0;pointer-events:none}
/* The rarer cards' reveal (chest-open.js reveal): a glow, a ring and spinning rays behind the card in its rarity's colour
   (--rg), the screen dimmed for a Legendary, and EPIC! / LEGENDARY! over it. */
.co-cardglow{position:absolute;inset:-35% -45%;z-index:-1;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(var(--rg),.85),rgba(var(--rg),.3) 55%,transparent)}
.co-cardring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:-1;border-radius:50%;border:6px solid rgba(var(--rg),.95);opacity:0;pointer-events:none}
.co-cardrays{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;z-index:-2;border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(rgba(var(--rg),.4) 0 8deg,transparent 8deg 20deg);-webkit-mask:radial-gradient(circle,#000 0 22%,transparent 64%);mask:radial-gradient(circle,#000 0 22%,transparent 64%)}
/* .co-dim and .co-flash sit inside .co-stage, so a screen shake (a transform on the stage) keeps them under the card. */
.co-dim{position:absolute;inset:0;z-index:19;background:#05070f;opacity:0;pointer-events:none}
.co-rbanner{position:absolute;left:0;right:0;top:calc(15% + env(safe-area-inset-top));text-align:center;z-index:24;font:400 38px/1 'Lilita One';letter-spacing:1px;color:rgb(var(--rg,255,255,255));-webkit-text-stroke:2.5px var(--line);paint-order:stroke fill;text-shadow:0 4px 0 var(--line),0 0 22px rgba(var(--rg,255,255,255),.85);opacity:0;pointer-events:none}
.co-newf{position:absolute;left:0;right:0;top:15%;text-align:center;z-index:24;font:400 30px/1 'Lilita One';color:#ffe46a;letter-spacing:1px;text-shadow:0 3px 0 var(--line),0 0 18px rgba(255,214,90,.7);-webkit-text-stroke:2px var(--line);paint-order:stroke fill;opacity:0;pointer-events:none}
/* After the last item the row moves up under YOU GOT and OK sits at the bottom. */
.co-screen.is-done .co-row{bottom:calc(112px + env(safe-area-inset-bottom))}.co-screen.is-done .co-collect{bottom:calc(28px + env(safe-area-inset-bottom))}
.co-row,.co-collect{transition:bottom .3s ease-out}
.co-got{position:absolute;left:0;right:0;bottom:calc(204px + env(safe-area-inset-bottom));text-align:center;z-index:15;font:400 20px/1 'Lilita One';letter-spacing:1px;color:#ffe46a;text-shadow:0 2px 0 var(--line);opacity:0;pointer-events:none}
.co-collect:focus-visible{outline:3px solid #ffd54a;outline-offset:3px}
/* CLAIM ALL under COLLECT (Eddy's ask, 2026-11-07): from the first card on; a quieter blue so COLLECT stays the main button */
.co-all{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(8px + env(safe-area-inset-bottom));z-index:26;border:3px solid var(--line);border-radius:14px;padding:8px 24px 10px;min-height:44px;font:400 18px/1 'Lilita One';letter-spacing:1px;color:#fff;text-shadow:0 2px 0 var(--line);cursor:pointer;background:linear-gradient(180deg,#5aa8ff,#2a62c9);box-shadow:inset 0 -5px 0 #1d4590,0 4px 0 var(--line);opacity:0;pointer-events:none;transition:opacity .2s}
.co-all.is-on{opacity:1;pointer-events:auto}
/* While CLAIM ALL shows, the row of collected cards moves up out of its way. */
.co-screen.has-all .co-row{bottom:calc(60px + env(safe-area-inset-bottom))}
.co-all:focus-visible{outline:3px solid #ffd54a;outline-offset:3px}
@media (max-height:700px){
  .co-chest{top:46%;width:min(54vw,196px)}.co-rays,.co-halo{top:52%}.co-beam{bottom:55%}.co-ring{top:45%}.co-hint{top:calc(78px + env(safe-area-inset-top))}
  .co-row{bottom:calc(24px + env(safe-area-inset-bottom))}.co-got{bottom:calc(176px + env(safe-area-inset-bottom));font-size:17px}.co-screen.is-done .co-row{bottom:calc(88px + env(safe-area-inset-bottom))}.co-screen.is-done .co-collect{bottom:calc(20px + env(safe-area-inset-bottom))}.co-collect{bottom:calc(128px + env(safe-area-inset-bottom));padding:8px 28px 10px;font-size:20px}
}
@media (max-height:700px){.co-screen.has-all .co-row{bottom:calc(54px + env(safe-area-inset-bottom))}.co-screen.has-all .co-collect{bottom:calc(140px + env(safe-area-inset-bottom))}}
@media (max-width:370px){.co-top h2{font-size:26px}}
@media (prefers-reduced-motion:reduce){.co-row,.co-collect{transition:none}.co-hint,.co-front .fc-bar.is-full .fc-bar-ico{animation:none}}

/* ---------- fighter cards in the Fighters tab and the fighter sheet ---------- */
.fc-rar{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;padding:2px 7px 1px;border-radius:5px;border:1.5px solid #0a1430;background:var(--rc);font:400 10px/1.1 'Lilita One';letter-spacing:.06em;color:#fff;text-shadow:0 1px #0008;white-space:nowrap;pointer-events:none}
.fc-rar.ck-L{color:#4a2600;text-shadow:none}
.fc-rar.is-inline{position:static;transform:none;display:inline-block;margin:0 0 3px;font-size:11px}
/* Rarity shows as the card's frame colour, no word on top (owner's pick A, 2026-11-01): grey, blue, purple, gold.
   The frame now belongs to rarity, so it wins over the in-squad border and the level 5/10 silver and gold frames
   (roster.css .frame-*): those become a thin inner ring, and level also shows in the LV badge
   colour and the level-10 crown. The doubled class is only
   there to outrank those rules. */
.collection-card.fc-r-C{--rk:#8a98ad}.collection-card.fc-r-R{--rk:#2f8ff0}.collection-card.fc-r-E{--rk:#a24df2}.collection-card.fc-r-L{--rk:#ffc22a}
#collection-view .collection-card.collection-card[class*="fc-r-"]{border-color:var(--rk);box-shadow:0 0 0 3px var(--rk),0 0 16px color-mix(in srgb,var(--rk) 55%,transparent);background-image:linear-gradient(180deg,color-mix(in srgb,var(--rk) 45%,transparent),transparent 42%)}
#collection-view .collection-card.collection-card.fc-r-L{box-shadow:0 0 0 3px var(--rk),0 0 22px #ffc22aaa}
/* The level 5 and 10 frames stay as a thin inner ring inside the rarity frame. */
#collection-view .collection-card.collection-card.frame-silver{box-shadow:inset 0 0 0 2px #dfe7f3,0 0 0 3px var(--rk),0 0 16px color-mix(in srgb,var(--rk) 55%,transparent)}
#collection-view .collection-card.collection-card.frame-gold{box-shadow:inset 0 0 0 2px #ffd84a,0 0 0 3px var(--rk),0 0 18px color-mix(in srgb,var(--rk) 60%,transparent)}
#collection-view .collection-card.collection-card.fc-r-L.frame-silver{box-shadow:inset 0 0 0 2px #dfe7f3,0 0 0 3px var(--rk),0 0 22px #ffc22aaa}
#collection-view .collection-card.collection-card.fc-r-L.frame-gold{box-shadow:inset 0 0 0 2px #fff6c8,0 0 0 3px var(--rk),0 0 22px #ffc22aaa}
.fc-under{position:relative;margin:4px 8px 0;z-index:2}
.fc-bar{display:flex;align-items:center}
.fc-bar-ico{width:22px;height:22px;flex-shrink:0;margin-right:-8px;z-index:1;display:grid;place-items:center;border-radius:6px;background:#1f5fae;border:1.5px solid #0a1430}
.fc-bar-ico svg{width:17px;height:17px}
.fc-bar-track{position:relative;flex:1;height:16px;border-radius:6px;background:#0a1430;border:1.5px solid #0a1430;overflow:hidden}
.fc-bar-track i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#5fc0ff,#2a7fe0)}
.fc-bar-track b{position:relative;display:block;text-align:center;font:400 11.5px/14px 'Lilita One';color:#fff;text-shadow:0 1px #000a;padding-left:6px;white-space:nowrap}
.fc-bar.is-full .fc-bar-track i,.fc-bar.is-max .fc-bar-track i{background:linear-gradient(#7ff09a,#28a55b)}
.fc-bar.is-full .fc-bar-ico{background:#28a55b;animation:fc-bob 1s ease-in-out infinite}
@keyframes fc-bob{50%{transform:translateY(-2px)}}
.fc-bar.is-big .fc-bar-track{height:22px;border-radius:8px}.fc-bar.is-big .fc-bar-track b{font-size:14px;line-height:20px}.fc-bar.is-big .fc-bar-ico{width:28px;height:28px}.fc-bar.is-big .fc-bar-ico svg{width:21px;height:21px}
.fc-dot{position:absolute;right:7px;top:7px;z-index:5;width:24px;height:24px;border-radius:50%;background:#ff3b4e;border:2px solid #fff;box-shadow:0 2px 0 #0a1430;font:400 16px/20px 'Lilita One';color:#fff;text-align:center;animation:fc-bob 1s ease-in-out infinite;pointer-events:none}
.fc-nav-ready{position:relative}
.fc-nav-ready::after{content:"!";position:absolute;right:14%;top:-2px;width:20px;height:20px;border-radius:50%;background:#ff3b4e;border:2px solid #fff;box-shadow:0 2px 0 #0a1430;font:400 14px/16px 'Lilita One';color:#fff;text-align:center;pointer-events:none}
.fc-find{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;font:400 30px/1 'Lilita One';color:#fff;-webkit-text-stroke:2px #0a1430;paint-order:stroke fill;pointer-events:none}
.collection-card.fc-unfound .collection-art>svg{filter:brightness(.12) saturate(0) drop-shadow(0 0 1px #9fb4dd) !important}
.squad-toggle.fc-findbtn{background:linear-gradient(#55617a,#363f55)!important;border-color:#7e8aa6!important;color:#dfe7f5!important;font-size:clamp(10px,2.8cqw,12px)!important}
.fc-sheet-cards{margin:2px 0 8px}
.fc-label{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 4px}
.fc-label span{font:400 14px 'Lilita One';color:#ffe46a;letter-spacing:.04em}
.fc-label em{font-style:normal;font-size:12px;font-weight:800;color:#a8ceff}
.fc-sheet-cards:has(.is-full) .fc-label em{color:#7ff09a}
.lv-action.fc-need{display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;filter:grayscale(.85) brightness(.8)}
.lv-action.fc-need svg{width:18px;height:18px}
.fc-rule{margin:6px 0 0;text-align:center;font:400 13px 'Lilita One';color:#7ff09a;letter-spacing:.03em}
/* The cards bar sits right under the portrait (roster.css lays the card out by grid areas). */
#collection-view .collection-card:has(.fc-under){grid-template-areas:"art" "cards" "info" "stats" "action"}
#collection-view .fc-under{grid-area:cards;margin:-2px 4px 0}

/* Shop chests: float all the time; once every 6 s they squash, hop, and the lid peeks open with a twinkle. */
.ck-chest{position:relative;display:block;transform-origin:50% 92%;animation:ck-float 3.2s var(--ck-delay) ease-in-out infinite;--ck-delay:0s}
.ck-chest>img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 4px #0009);animation:ck-hop 6s var(--ck-delay) infinite}
.ck-chest>.ck-peek{position:absolute;left:0;top:0;opacity:0;animation:ck-hop 6s var(--ck-delay) infinite,ck-peek 6s var(--ck-delay) infinite}
.ck-chest::after{content:"";position:absolute;left:62%;top:18%;width:22%;aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:ck-twinkle 6s var(--ck-delay) infinite;pointer-events:none}
@keyframes ck-float{50%{translate:0 -6%}}
@keyframes ck-hop{0%,70%,100%{transform:none}74%{transform:scale(1.08,.9)}79%{transform:translateY(-14%) scale(.95,1.06)}84%{transform:translateY(-14%) rotate(-3deg)}88%{transform:translateY(0) scale(1.05,.95)}92%{transform:none}}
@keyframes ck-peek{0%,78%,90%,100%{opacity:0}80%,88%{opacity:1}}
@keyframes ck-twinkle{0%,80%,100%{opacity:0;transform:scale(.2) rotate(0)}86%{opacity:1;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.ck-chest,.ck-chest>img,.ck-chest::after{animation:none}.ck-chest>.ck-peek{display:none}}
/* The game's Animations switch (app.js .reduce-motion): nothing bobs or pulses. */
.reduce-motion :is(.ck-chest,.ck-chest>img),.reduce-motion .ck-chest::after{animation:none!important}.reduce-motion .ck-chest>.ck-peek{display:none}
.reduce-motion :is(.fc-dot,.fc-bar-ico,.co-hint){animation:none!important}
.reduce-motion :is(.co-row,.co-collect){transition:none}
.ck-unlock{margin:0;font-size:12px;font-weight:800;color:#c9d6ff}
/* Champion's Road: the stone where a new rarity starts dropping (LV 3, 7, 13). */
.pf-road-rarity{position:relative}.pf-road-rarity .ball-art,.pf-road-rarity svg,.pf-road-rarity img{filter:brightness(0) drop-shadow(0 0 4px #fff8)}
.pf-road-rarity .fc-rar{top:auto;bottom:-2px;font-size:9px;padding:1px 5px;box-shadow:0 0 0 1.5px #fff,0 2px 4px #0008}
/* The coin counter that slides in for a chest's coin pop (chest-open.js; this screen covers the top bar), drawn like the top bar's,
   under the chest's name and subtitle so a long name (SILVER LEVEL CHEST) never runs into it. */
.co-wallet{position:absolute;z-index:31;top:calc(80px + env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));opacity:0;pointer-events:none;min-width:70px;height:30px;padding:4px 10px 4px 26px;border:2px solid #06122d;border-radius:8px;background:linear-gradient(#284676,#101e40);box-shadow:inset 0 1px #7a9bc7,0 2px #02091b;color:#fff9df;font:400 17px 'Lilita One',sans-serif;text-shadow:0 2px #060d24;display:flex;align-items:center;justify-content:flex-end;font-variant-numeric:tabular-nums}
.co-wallet>svg{position:absolute;left:-10px;top:-6px;width:31px;height:36px;filter:drop-shadow(0 2px 0 #733609)}
.co-wallet b{font-weight:400}