/* Realmbreak shell: left navigation rail, hub, play (deck select), collection, packs.
   Shares tokens (--frame, --cond, gold ramp) with styles/arena.css. */
:root{--rail:clamp(92px,10.5vw,196px);--ink:#f3ead6;--muted:#b3a88f;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0f12;color:var(--ink);font:15px/1.45 "Segoe UI",system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold1);outline-offset:2px}
main{margin-left:var(--rail);min-height:100vh;position:relative}
body[data-screen="battle"] main{margin-left:0}
body[data-screen="battle"] .railnav{display:none}

/* ---------- left rail: lantern-marked road of icons ---------- */
.railnav{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:100;display:flex;flex-direction:column;padding:10px 0;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#131c20,#0c1316 55%,#0a0f12);box-shadow:8px 0 30px rgba(0,0,0,.55)}
.railnav::after{content:"";position:absolute;top:0;bottom:0;right:0;width:3px;background:linear-gradient(180deg,transparent,var(--gold2) 12%,var(--gold1) 50%,var(--gold2) 88%,transparent)}
.railnav button{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border:0;background:none;cursor:pointer;color:#bfb49a}
/* Painted icons (assets/ui/rail/*.webp, AI placeholders; mock/rail-icons.html has the old SVG set for comparison). */
.railnav img{display:block;width:52%;max-width:84px;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.7));transition:transform .2s,filter .2s;-webkit-user-drag:none;user-select:none}
.railnav b{padding:3px 10px;border-radius:999px;background:#0c1316;font:700 clamp(12px,1vw,17px)/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 3px #000}
.railnav button:hover img{transform:translateY(-2px) scale(1.05)}
.railnav button:hover b,.railnav button.active b{color:#fff}
.railnav button.active img{filter:drop-shadow(0 0 16px rgba(255,200,110,.75)) drop-shadow(0 6px 8px rgba(0,0,0,.7))}
.railnav button.active b{background:linear-gradient(180deg,#e2b25a,#9a6a25);color:#1a1106;text-shadow:none}
.railnav button.active::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--gold1);box-shadow:0 0 14px var(--gold2)}

/* ---------- top bar: avatar + counters + icons ---------- */
.topbar{position:absolute;left:0;right:0;top:0;z-index:5;height:clamp(120px,15vh,170px);pointer-events:none}
.topbar>*{pointer-events:auto}
.avatar{position:absolute;left:clamp(12px,1.3vw,24px);top:clamp(10px,1.3vh,18px);width:clamp(96px,8.2vw,156px);aspect-ratio:1;border-radius:50%;padding:0;cursor:pointer;
  border:5px solid transparent;background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box;box-shadow:0 0 0 3px rgba(0,0,0,.6),0 10px 26px rgba(0,0,0,.7);overflow:hidden}
.avatar{transition:box-shadow .2s,filter .2s}
.avatar:hover{filter:brightness(1.12);box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 26px rgba(255,200,110,.45),0 10px 26px rgba(0,0,0,.7)}
/* .face: a 2:3 portrait zoomed onto the face (--fx/--fy) inside a round, overflow-hidden box (screens/profile.mjs) */
.face{position:absolute;max-width:none;width:calc(var(--z,3.2) * 100%);height:auto;left:calc(50% - var(--fx,.5) * var(--z,3.2) * 100%);top:calc(50% - var(--fy,.2) * var(--z,3.2) * 150%)}
.icon-sheet{width:min(640px,92vw);padding:26px 28px;border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.icon-sheet h3{margin:0;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.icon-sheet p{margin:8px 0 6px;text-align:center;font-size:13px;color:var(--muted)}
.icon-sheet h4{margin:16px 0 10px;font:700 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--gold1)}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px}
.icon-opt{position:relative;aspect-ratio:1;padding:0;border-radius:50%;overflow:hidden;cursor:pointer;border:3px solid transparent;
  background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box;box-shadow:0 6px 14px rgba(0,0,0,.6);transition:transform .15s,box-shadow .15s}
.icon-opt:hover{transform:scale(1.07)}
.icon-opt.is-on{box-shadow:0 0 0 3px var(--gold1),0 0 22px rgba(255,200,110,.6)}
.who{position:absolute;left:calc(clamp(12px,1.3vw,24px) + clamp(96px,8.2vw,156px) + 14px);top:clamp(14px,1.8vh,24px);line-height:1}
.who b{display:block;font:700 clamp(20px,1.7vw,30px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 6px #000}
.who small{font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#d8cdb2;text-shadow:0 1px 4px #000}
.pills{position:absolute;left:calc(clamp(12px,1.3vw,24px) + clamp(96px,8.2vw,156px) + 6px);top:clamp(62px,7.4vh,86px);display:flex;align-items:center;gap:clamp(10px,1vw,18px);padding-right:44px}
.pills::before{content:"";position:absolute;left:-10px;right:0;top:50%;height:2px;background:linear-gradient(90deg,var(--gold3),var(--gold2) 20%,var(--gold2) 90%,transparent);z-index:-1}
.pills::after{content:"";position:absolute;right:30px;top:50%;width:10px;height:10px;translate:0 -50%;rotate:45deg;background:var(--gold2)}
.pill{display:flex;align-items:center;gap:10px;min-width:clamp(110px,7.6vw,146px);padding:7px 18px 7px 8px;border-radius:12px;font:700 clamp(18px,1.5vw,26px)/1 var(--cond);
  border:2px solid transparent;background:linear-gradient(180deg,#1b1714,#0b0908) padding-box,var(--frame) border-box;box-shadow:0 6px 14px rgba(0,0,0,.6)}
.pill small{font:600 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.pill-ico{width:30px;height:30px;border-radius:50%;flex:none}
.pill-coin{background:url(../assets/ui/icons/coin.svg) center/contain no-repeat;border-radius:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.pill-win{background:url(../assets/ui/icons/wins.svg) center/contain no-repeat;border-radius:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
.pill-play{background:radial-gradient(circle at 35% 30%,#b7f5e2,#2fb391 45%,#0d4d3c);clip-path:polygon(50% 0,100% 45%,50% 100%,0 45%);border-radius:0}
.pill-card{background:url(../assets/ui/icons/cards.svg) center/contain no-repeat;border-radius:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));scale:1.1}
.top-icons{position:absolute;right:clamp(14px,1.6vw,30px);top:clamp(14px,1.8vh,26px);display:flex;gap:clamp(10px,1.4vw,26px)}
.top-ico{position:relative;width:clamp(48px,3.6vw,70px);aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 6px rgba(0,0,0,.8));transition:transform .15s}
.top-ico:hover{transform:scale(1.08)}
.top-ico svg{width:100%;height:100%}
.badge{position:absolute;right:-8px;top:-8px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font:700 16px/1 var(--cond);font-style:normal;
  border:2px solid var(--gold1);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.badge--teal{background:radial-gradient(circle at 35% 30%,#bff6ff,#1aa6c4 50%,#0b5264)}

/* ---------- framed buttons (reference bottom bar) ---------- */
.fbtn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 22px 0 26px;cursor:pointer;
  border:3px solid transparent;border-radius:4px;background:linear-gradient(180deg,rgba(18,20,22,.9),rgba(6,7,8,.92)) padding-box,var(--frame) border-box;
  box-shadow:0 0 0 2px rgba(0,0,0,.7),0 12px 30px rgba(0,0,0,.6);transition:filter .15s,transform .15s}
.fbtn::before{content:"";position:absolute;inset:5px;border:1px solid rgba(215,166,83,.55);border-radius:1px;pointer-events:none}
/* labels are trimmed to cap height so centering lines the caps up with the icon */
.fbtn span{font:600 clamp(18px,1.8vw,32px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 4px #000;white-space:nowrap;text-box:trim-both cap alphabetic}
.fbtn i{display:grid;place-items:center;flex:none;width:clamp(34px,2.7vw,48px);height:clamp(34px,2.7vw,48px);color:var(--gold1);filter:drop-shadow(0 2px 3px #000)}
.fbtn i svg{width:100%;height:100%}
.fbtn:hover{filter:brightness(1.18);transform:translateY(-2px)}
.fbtn:disabled{filter:grayscale(1) brightness(.55);cursor:default;transform:none}
.fbtn .badge{right:-12px;top:-14px}
.fbtn--hero{background:linear-gradient(180deg,#1f5d99,#0e2f55) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.7),0 0 34px rgba(63,168,255,.45),0 12px 30px rgba(0,0,0,.6)}

/* ---------- hub (home) ---------- */
.hub{position:relative;height:100vh;min-height:560px;overflow:hidden}
/* the menu art leans toward the pointer (eased per frame by skyLeanTo in screens/ambience.mjs, so no
   transition); it never drifts on its own (the light over it does) */
.hub .sky-frame{transform:scale(1.06) translate(calc(var(--px,0) * -2.2%),calc(var(--py,0) * -2.2%))}
body.no-motion .hub .sky-frame{transform:scale(1.06)}
.hub-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%,transparent 70%,rgba(0,0,0,.55) 100%)}
.hub-brand{position:absolute;left:clamp(24px,3vw,56px);bottom:clamp(28px,5vh,60px);display:flex;align-items:center;gap:14px;text-shadow:0 3px 14px rgba(0,0,0,.8)}
.hub-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid var(--gold1);color:var(--gold1);font-size:24px;background:rgba(0,0,0,.45);box-shadow:0 0 24px rgba(255,200,110,.35)}
.hub-brand b{display:block;font:700 clamp(30px,3vw,52px)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(180deg,#fff6de,#e9bb6a 60%,#a47232);-webkit-background-clip:text;background-clip:text;color:transparent}
.hub-brand small{font:600 13px/1 var(--cond);letter-spacing:.4em;text-transform:uppercase;color:#e4d6b6}
.hub-actions{position:absolute;right:clamp(20px,2.4vw,46px);bottom:clamp(24px,5vh,56px);display:flex;align-items:stretch;gap:14px}
.hub-sub{display:flex;flex-direction:column;gap:12px;min-width:min(300px,24vw)}
.hub-sub .fbtn{min-height:58px;padding-right:clamp(20px,1.8vw,32px)}
/* side buttons: icons sized to sit inside the inner rim; the shield fills its box so it runs smaller */
.hub-sub .fbtn i{width:clamp(26px,2vw,38px);height:clamp(26px,2vw,38px)}
.hub-sub .fbtn[data-go="private"] i svg{scale:.8}
@media (max-width:1280px){.hub-brand b{font-size:26px}} /* keeps the logo clear of the buttons before it hides at 1100px */
/* the featured character (screens/living.mjs): over the painting and its shade, under the menu.
   She leans with the painting when the pointer moves, plus a little since she's nearer.
   The canvas has a 4% margin round her image (.hero-plain is the no-WebGL fallback). */
.hero-char{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-spot{position:absolute;translate:calc(var(--px,0) * var(--pax,0px)) calc(var(--py,0) * var(--pay,0px))}
.hero-spot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-plain{position:absolute;left:3.7%;top:3.7%;width:92.6%;height:92.6%}
body.no-motion .hero-spot{translate:none}
@media (max-width:700px) and (orientation:portrait){.hero-char{display:none}} /* no room beside the buttons */

/* ---------- sky: Home/Login painting with ethereal light (screens/ambience.mjs) ----------
   .sky-frame keeps the painting's 1672×941 ratio while covering the screen, so the light
   layers are placed in image percentages: sun at 54.5% 23.4%, rift along x 59.5% above it. */
.sky{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none}
.sky-frame{position:absolute;inset:0;width:max(100cqw,177.68cqh);height:max(100cqh,56.28cqw);
  left:calc((100cqw - max(100cqw,177.68cqh)) * var(--fx,.5));top:calc((100cqh - max(100cqh,56.28cqw)) * var(--fy,.5));
  transform-origin:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%)}
.sky-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%)}
.sky-frame>div{position:absolute}
/* sun: hot core, warm halo and a long horizon glow, breathing slowly */
.sky-sun{left:54.5%;top:23.4%;width:44%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;opacity:.7;
  background:radial-gradient(closest-side,rgba(255,246,220,.9),rgba(255,216,146,.5) 11%,rgba(255,176,96,.2) 32%,rgba(255,150,80,.06) 60%,transparent);
  animation:skyBreathe 9s ease-in-out infinite}
.sky-sun::after{content:"";position:absolute;left:-40%;right:-40%;top:38%;bottom:38%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,130,.35),transparent)}
@keyframes skyBreathe{0%,100%{opacity:.55;scale:.95}50%{opacity:.85;scale:1.04}}
/* god rays: two irregular beam fans that sway past each other so the light shimmers */
.sky-rays{left:54.5%;top:23.4%;width:120%;aspect-ratio:1;translate:-50% -50%;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(closest-side,rgba(0,0,0,.35) 2%,#000 9%,rgba(0,0,0,.5) 30%,transparent 62%);mask:radial-gradient(closest-side,rgba(0,0,0,.35) 2%,#000 9%,rgba(0,0,0,.5) 30%,transparent 62%)}
.sky-rays i{position:absolute;inset:0;border-radius:50%;opacity:.8;animation:skySway 34s ease-in-out infinite alternate}
.sky-rays i+i{animation-duration:26s;animation-direction:alternate-reverse}
@keyframes skySway{from{rotate:-4deg;opacity:.55}50%{opacity:1}to{rotate:4deg;opacity:.65}}
/* the rift: a cold halo around the painted lightning that surges now and then */
.sky-rift{left:59.4%;top:-3%;width:12%;height:30%;translate:-50% 0;mix-blend-mode:screen;opacity:.4;
  background:radial-gradient(22% 50% at 50% 48%,rgba(226,240,255,.7),rgba(160,190,255,.22) 55%,transparent),radial-gradient(50% 36% at 50% 30%,rgba(170,160,255,.22),transparent);
  animation:skyRift 11s ease-in-out infinite}
@keyframes skyRift{0%,100%{opacity:.35}40%{opacity:.5}72%{opacity:.38}76%{opacity:.85}78%{opacity:.5}81%{opacity:1}88%{opacity:.42}}
/* warm light: the castle gate and the wet road catching the sun */
.sky-glint{inset:0;mix-blend-mode:screen;opacity:.8;
  background:radial-gradient(2.2% 5% at 61.3% 35.5%,rgba(255,200,120,.55),transparent),radial-gradient(9% 5% at 60% 30%,rgba(255,190,110,.18),transparent),radial-gradient(5% 16% at 44.5% 70%,rgba(255,214,160,.22),transparent);
  animation:skyGlint 5.5s ease-in-out infinite}
@keyframes skyGlint{0%,100%{opacity:.7}30%{opacity:1}55%{opacity:.8}70%{opacity:.95}}
/* valley mist: two banks drifting at different speeds; each tile is one frame wide and
   its puffs stay inside the tile, so the loop has no seam */
.sky-mist{left:0;width:200%;background-repeat:repeat-x;background-size:50% 100%;mix-blend-mode:screen;animation:skyDrift 140s linear infinite}
.sky-mist--far{top:27%;height:16%;opacity:.3;
  background-image:radial-gradient(20% 40% at 24% 55%,rgba(196,210,238,.8),transparent),radial-gradient(14% 30% at 52% 60%,rgba(196,210,238,.6),transparent),radial-gradient(18% 36% at 78% 50%,rgba(196,210,238,.7),transparent)}
.sky-mist--near{top:44%;height:22%;opacity:.28;animation-duration:95s;
  background-image:radial-gradient(17% 34% at 20% 50%,rgba(210,222,245,.85),transparent),radial-gradient(22% 40% at 48% 58%,rgba(210,222,245,.7),transparent),radial-gradient(18% 32% at 80% 46%,rgba(210,222,245,.8),transparent)}
@keyframes skyDrift{to{translate:-50% 0}}
/* motes ride a little ahead of the painting when it leans, for depth */
realm-motes{position:absolute;inset:0;display:block;translate:calc(var(--px,0) * -1.2%) calc(var(--py,0) * -1.2%);transition:translate 1.1s cubic-bezier(.2,.8,.2,1)}
realm-motes canvas{display:block;width:100%;height:100%}
body.no-motion .sky *,body.no-motion .sky *::after{animation:none!important;transition:none!important}
/* the icon shares the title's row, so it sits on the title line rather than the button's middle */
.fbtn--big{display:grid;grid-template-columns:1fr auto;align-content:center;align-items:center;justify-items:start;column-gap:16px;row-gap:18px;min-width:min(360px,28vw);min-height:132px;padding:18px 24px 18px 30px}
.fbtn--big span{font-size:clamp(28px,2.4vw,44px)} /* capped so "Play ranked" and the icon fit .hub-play */
.fbtn--big small{position:relative;grid-column:1;font:600 14px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#cfe3ff;text-box:trim-both cap alphabetic}
.fbtn--big i{grid-area:1/2;width:56px;height:56px;margin-block:-28px} /* zero-height margin box: the title alone sets the row */

/* ---------- play: mode + deck select ---------- */
.play{position:relative;height:100vh;min-height:600px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  padding:clamp(150px,19vh,200px) clamp(24px,3.4vw,64px) clamp(18px,3.4vh,36px)}
/* --fc is registered as a colour so the faction tint can glide between decks */
@property --fc{syntax:'<color>';inherits:true;initial-value:#d7a653}
.play{transition:--fc .6s ease}
.play-arts{position:absolute;inset:0;z-index:-1;pointer-events:none}
.play-art{position:absolute;right:0;top:0;width:66%;height:100%;object-fit:cover;object-position:50% 20%;opacity:.5;
  -webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%);
  transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.play-art.is-entering{opacity:0;transform:translateX(40px) scale(1.03)}
.play-art.is-leaving{opacity:0;transform:translateX(-24px)}
.play-shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(90% 90% at 15% 40%,color-mix(in srgb,var(--fc) 26%,#0b0f12) 0%,#0b0f12 70%)}
.play-body{flex:1;min-height:0;display:grid;grid-template-columns:clamp(220px,17vw,300px) minmax(0,1fr);gap:clamp(20px,2.6vw,48px)}
.play-h{margin:0 0 14px;font:700 13px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--gold1);text-shadow:0 1px 4px #000}
.play-h small{margin-left:8px;font:inherit;color:var(--muted)}
.play-modes{display:flex;flex-direction:column;gap:10px;min-height:0}
.play-mode{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:16px 18px;border-radius:6px;cursor:pointer;text-align:left;
  border:2px solid transparent;background:linear-gradient(rgba(10,12,14,.85),rgba(10,12,14,.85)) padding-box,linear-gradient(rgba(215,166,83,.3),rgba(215,166,83,.3)) border-box;transition:filter .15s}
.play-mode b{font:700 clamp(18px,1.4vw,24px)/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#e9dfc8}
.play-mode small{font:500 13px/1.3 "Segoe UI",system-ui;color:var(--muted)}
.play-mode:hover{filter:brightness(1.2)}
.play-mode.is-on{background:linear-gradient(180deg,#2d6aa6,#123a66) padding-box,var(--frame) border-box;box-shadow:0 0 26px rgba(63,168,255,.3)}
.play-mode.is-on b{color:#fff}
.play-mode.is-on small{color:#cfe3ff}
.play-modes .opp{flex-direction:column;align-items:stretch;gap:8px;margin-top:10px}
.play-decks{display:flex;flex-direction:column;min-height:0}
.play-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 8px 16px;margin:-10px -8px 0;scrollbar-width:thin;scrollbar-color:var(--gold2) transparent}
.play-scroll .deck-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(130px,8.4vw,176px),1fr));gap:clamp(12px,1.2vw,20px)}
.play-scroll .deck-tile{aspect-ratio:4/5}
.play-scroll .deck-tile b{font-size:clamp(13px,.95vw,17px);letter-spacing:.03em;-webkit-line-clamp:unset;overflow:visible;overflow-wrap:anywhere}
.play-scroll .deck-tile-legend{width:40px;height:40px;left:10px;top:10px}
.play-foot{display:flex;align-items:center;gap:24px;margin-top:clamp(12px,2vh,22px)}
.play-sel-wrap{flex:1;min-width:0;display:grid}
.play-sel{grid-area:1/1;min-width:0;display:flex;align-items:center;gap:16px;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.play-sel.is-entering{opacity:0;transform:translateY(14px)}
.play-sel.is-leaving{opacity:0;transform:translateY(-10px)}
.play-sel>div{min-width:0}
.play-sel-face{position:relative;flex:none;width:clamp(60px,4.6vw,80px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid transparent;
  background:radial-gradient(circle,#111,#111) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 20px color-mix(in srgb,var(--fc) 60%,transparent)}
.play-sel b{display:block;font:700 clamp(20px,1.7vw,28px)/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 6px #000}
.play-sel small{display:block;margin-top:6px;font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#d8cdb2}
.play-sel p{margin:6px 0 0;max-width:680px;font:500 14px/1.35 "Segoe UI",system-ui;color:#eee4cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Legend portraits (Collection: new-deck picker) */
.champ{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;min-width:0;text-align:center}
.champ-art{width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:3px solid transparent;
  background:linear-gradient(#111,#111) padding-box,var(--frame) border-box;box-shadow:0 10px 20px rgba(0,0,0,.6);filter:saturate(.6) brightness(.7);transition:all .2s}
.champ-art img{display:block;width:100%;height:100%;object-fit:cover}
.champ b{margin-top:4px;max-width:100%;font:700 15px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#e9dfc8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.champ small{font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--fc) 70%,#fff)}
.champ:hover .champ-art{filter:none;transform:translateY(-4px)}
.champ.is-on .champ-art{filter:none;transform:translateY(-8px) scale(1.06);box-shadow:0 0 0 2px var(--gold1),0 0 30px color-mix(in srgb,var(--fc) 80%,transparent),0 12px 24px rgba(0,0,0,.6)}
.champ.is-on b{color:#fff}
.opp{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.opp select,.col-filters input{padding:11px 14px;border-radius:6px;border:1px solid rgba(215,166,83,.5);background:rgba(8,9,10,.85);font:600 15px/1 var(--cond);letter-spacing:.04em}
.fbtn--go{margin-left:auto;min-width:min(340px,30vw)}

/* ---------- pages (collection, dev; packs live in styles/packs.css) ---------- */
.page{min-height:100vh;padding:28px clamp(18px,2.4vw,40px) 40px;background:radial-gradient(90% 70% at 50% 0%,#1d2a2c,#0b0f12 70%)}
.collection{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,360px);gap:28px;align-items:start}
.col-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.col-filters input{flex:0 1 280px}
.seg{display:flex;border-radius:6px;overflow:hidden;border:1px solid rgba(215,166,83,.45);background:rgba(8,9,10,.7)}
.seg button{border:0;background:none;padding:10px 14px;cursor:pointer;font:700 14px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seg button.is-on{background:linear-gradient(180deg,#2d6aa6,#123a66);color:#fff}
.col-regions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.rchip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,9,10,.6);cursor:pointer;font:700 13px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rchip i{width:10px;height:10px;border-radius:50%;background:var(--fc)}
.rchip.is-on{border-color:var(--gold1);color:#fff;background:rgba(215,166,83,.16)}
.rchip em{font:700 10px/1 var(--cond);font-style:normal;letter-spacing:.12em;padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--fc) 30%,transparent);color:#fff}
.rchip-sep{width:1px;align-self:stretch;margin:4px 6px;background:rgba(255,255,255,.14)}
/* A Legend's two card types (Legend picker, deck header): a glowing dot and the type name. */
.tdot{display:inline-flex;align-items:center;gap:5px;color:color-mix(in srgb,var(--tc) 55%,#fff)}
.tdot+.tdot{margin-left:10px}
.tdot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc);box-shadow:0 0 6px var(--tc)}
.champ-types{display:flex;flex-direction:column;align-items:center;gap:4px}
.champ-types .tdot+.tdot{margin-left:0}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,11vw,190px),1fr));gap:26px 20px}
.col-card{position:relative}
.col-face{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;transition:transform .2s}
.col-card.is-addable .col-face:hover{transform:translateY(-6px) scale(1.03)}
.col-card.is-locked .col-face{filter:brightness(.55) saturate(.4)}
.col-card.is-unowned .col-face{filter:brightness(.5) saturate(.3)}
.col-owned{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);z-index:3;padding:3px 8px;border-radius:999px;font:700 12px/1 var(--cond);letter-spacing:.06em;background:rgba(8,9,10,.9);border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.col-card.is-unowned .col-owned{color:#e59b8a}
.col-count{position:absolute;right:-8px;top:-8px;z-index:3;min-width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font:700 16px/1 var(--cond);
  background:radial-gradient(circle at 35% 30%,#c9ecff,#3fa8ff 40%,#154f9c) padding-box,var(--frame) border-box;border:2px solid transparent;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.deck{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 40px);padding:16px;border-radius:8px;
  border:2px solid transparent;background:linear-gradient(180deg,#141a1d,#08090b) padding-box,var(--frame) border-box;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.deck-head{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;border-radius:5px;overflow:hidden}
.deck-head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.deck-head::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 70%)}
.deck-head div{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;flex:1;min-width:0;padding:10px 12px}
.deck-head b{font:700 26px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.deck-head small{font:600 12px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#d8cdb2}
.deck-count{position:relative;z-index:1;align-self:flex-end;padding:0 12px 10px 0;font:700 28px/1 var(--cond);color:#fff;text-shadow:0 2px 4px #000}
.deck-count small{font-size:15px;color:var(--muted)}.deck-count.is-full{color:#9fe3a0}
.deck-champs{display:flex;gap:6px;justify-content:space-between}
.mini-champ{width:40px;height:40px;border-radius:50%;padding:0;overflow:hidden;cursor:pointer;border:2px solid transparent;background:linear-gradient(#111,#111) padding-box,var(--frame) border-box;opacity:.5}
.mini-champ.is-on{opacity:1;box-shadow:0 0 14px color-mix(in srgb,var(--fc) 80%,transparent)}
.mini-champ img{width:100%;height:100%;object-fit:cover;scale:1.35}
.curve{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;height:60px;align-items:end}
.curve div{display:flex;flex-direction:column;align-items:center;gap:3px;height:100%}
.curve span{flex:1;width:100%;display:flex;align-items:flex-end}
.curve span i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#7fd0ff,#1c5aa0)}
.curve small{font:700 11px/1 var(--cond);color:var(--muted)}
.deck-list{flex:1;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:3px;padding-right:4px}
.deck-row{display:grid;grid-template-columns:28px 1fr auto 24px;align-items:center;gap:6px;height:34px}
.deck-cost{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9ecff,#3fa8ff 40%,#154f9c);border:1.5px solid var(--gold2);font:700 13px/1 var(--cond)}
.deck-name{height:100%;padding:0 10px;border:1px solid rgba(215,166,83,.35);border-radius:3px;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font:700 14px/1 var(--cond);letter-spacing:.03em;text-shadow:0 1px 2px #000;background:linear-gradient(90deg,rgba(10,12,14,.95) 40%,rgba(10,12,14,.3)),var(--img) right 30%/60% auto no-repeat}
.deck-n{font:700 14px/1 var(--cond);color:var(--gold1)}
.deck-minus{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);cursor:pointer}
.deck-warn{margin:0;font-size:12.5px;color:#ffb3a3}
.deck-tools{display:flex;justify-content:center;gap:14px}
.deck-tools button{border:0;background:none;cursor:pointer;font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deck-tools button:hover{color:#fff}
.muted{color:var(--muted)}

.hint{font:600 14px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- dialogs ---------- */
dialog#inspector,dialog.settings{padding:0;border:0;background:none;color:var(--ink);max-width:94vw;overflow:visible}
dialog::backdrop{background:rgba(2,4,6,.8);backdrop-filter:blur(4px)}
dialog[open]{animation:inspectIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes inspectIn{from{opacity:0;transform:scale(.92)}}
.close{position:absolute;right:-16px;top:-16px;color:#fff;line-height:1;width:44px;height:44px;border-radius:50%;border:2px solid transparent;background:radial-gradient(#1b1b1b,#0a0a0a) padding-box,var(--frame) border-box;font-size:22px;cursor:pointer;z-index:2}
.inspection{display:flex;flex-direction:column;align-items:center;gap:18px;user-select:none;-webkit-user-select:none}
.tilt{width:min(340px,70vw);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .12s ease-out;position:relative}
.tilt .cf{box-shadow:0 30px 70px rgba(0,0,0,.8)}
.tilt-glare{position:absolute;inset:0;border-radius:11px;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.3),transparent 45%);mix-blend-mode:soft-light}
.flavor{max-width:380px;margin:0;text-align:center;font:italic 16px/1.5 Georgia,serif;color:#d7ccb4}
.rules-sheet,dialog.settings[open]{width:min(560px,92vw);padding:28px 30px;border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.rules-sheet h3,.settings h3{margin:0 0 6px;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.rules-sheet h4{margin:16px 0 4px;font:700 16px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold1)}
.rules-sheet p{margin:0;color:#ddd4c2}
dialog.settings[open]{display:flex;flex-direction:column;gap:14px;width:min(420px,92vw)}
.settings-note{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.menu-toggle input{width:18px;height:18px;accent-color:var(--gold2)}
.vol{display:grid;grid-template-columns:10.5em 1fr 2.4em;white-space:nowrap;align-items:center;gap:12px;font:600 14px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#c8c0ad}
.vol input{width:100%;margin:0;accent-color:var(--gold2)}
.vol output{text-align:right;color:var(--gold1);font-variant-numeric:tabular-nums}
body.no-motion .tilt{transform:none}

/* ---------- hot-seat curtain + toast ---------- */
.handoff{position:fixed;inset:0;z-index:9900;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#15222a,#040709 70%)}
.handoff h2{margin:0 0 10px;font:700 56px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.handoff p{color:var(--muted);margin:0 0 26px}
/* Toasts drop in at the top centre, clear of the hand, the orb and the Open/Buy buttons along the bottom. */
#status{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + clamp(96px,14vh,140px));translate:-50% 0;z-index:9800;max-width:min(560px,90vw);padding:11px 20px;border-radius:6px;border:1.5px solid transparent;
  background:linear-gradient(#0d1013,#0d1013) padding-box,var(--frame) border-box;box-shadow:0 12px 30px rgba(0,0,0,.6);font:600 15px/1.3 var(--cond);letter-spacing:.04em;transition:opacity .3s,translate .3s;pointer-events:none}
#status[data-visible="false"]{opacity:0;translate:-50% -12px}

/* ---------- developer simulator (kept plain on purpose) ---------- */
.page--dev{font-family:"Segoe UI",system-ui,sans-serif}
.lab{max-width:1480px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.lab .kicker{font:700 11px/1 var(--cond);letter-spacing:.2em;color:var(--gold1);text-transform:uppercase}
.lab-head{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:end}
.lab-head h1{font:700 40px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;margin:8px 0}
.lab-head p{color:#c7d2cf;max-width:720px;margin:0}
.lab-caveat{padding:14px 16px;border-radius:8px;background:rgba(255,122,92,.08);border:1px solid rgba(255,122,92,.3);font-size:13px;color:#e8d4cc}
.lab-caveat b{display:block;color:#ffb7a4;margin-bottom:4px}
.lab-card{padding:18px;border-radius:8px;background:rgba(16,22,26,.9);border:1px solid rgba(255,255,255,.08);margin:0}
.lab-card figcaption,.lab-card-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.lab-card-head{flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
.lab-card figcaption b,.lab-card-head b{font:700 18px/1.2 var(--cond);letter-spacing:.04em}
.lab-card small{color:var(--muted);font-size:12px}
.lab-card-head .btn{margin-left:auto}
.lab-config{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end}
.lab-field{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lab-field--wide{flex-basis:100%}
.lab-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:7px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);padding:6px 12px;font-size:12.5px;cursor:pointer}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--fc,var(--gold2))}
.chip.is-on{border-color:var(--gold2);background:rgba(215,166,83,.16)}
.lab-field input{width:130px;padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.3)}
.lab-check{display:flex;gap:8px;align-items:center;font-size:13px;padding-bottom:8px}
.lab-run{display:flex;gap:10px;align-items:center;margin-left:auto}
.lab-total{font-size:13px;color:var(--muted)}.lab-total b{color:var(--ink);font-size:18px}
.btn{padding:9px 18px;border-radius:6px;border:1px solid rgba(215,166,83,.5);background:rgba(255,255,255,.05);cursor:pointer;font:600 13px/1 system-ui}
.btn:hover{background:rgba(215,166,83,.15)}
.btn:disabled{opacity:.4;cursor:default}
.btn--gold{background:linear-gradient(180deg,#f3cb7c,#c8913f);color:#241706;border-color:#f3cb7c}
.btn.btn--small{padding:5px 10px;font-size:12px}
.lab-progress{flex-basis:100%;position:relative;height:22px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.lab-progress i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#3fb8a6,#8ff0d4);transition:width .2s}
.lab-progress span{position:relative;display:block;text-align:center;font:700 11px/22px system-ui;color:#08201c}
.lab-error{color:#ffb7a4}
.lab-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{padding:14px 16px;border-radius:8px;background:rgba(16,22,26,.9);border:1px solid rgba(255,255,255,.08)}
.kpi b{display:block;font:700 26px/1.1 var(--cond)}
.kpi:last-child b{font:600 13px/1.4 system-ui}
.kpi span{font-size:11.5px;color:var(--muted)}
.lab-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.heat{display:grid;grid-template-columns:auto repeat(var(--cols),1fr);gap:2px;font-size:11.5px}
.heat-col,.heat-row{color:var(--muted);padding:4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat-row{text-align:right;padding-right:8px}
.heat-cell{display:grid;place-items:center;height:40px;border-radius:4px;font-weight:700;color:#f3efe6;background:var(--bg)}
.heat-cell.is-empty{color:#56696a;background:rgba(255,255,255,.03)}
.heat-scale{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:10.5px;color:var(--muted)}
.heat-scale i{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#d9683f,#3a4448)}
.heat-scale i:last-of-type{background:linear-gradient(90deg,#3a4448,#3fb8a6)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar-row{display:grid;grid-template-columns:70px 1fr 42px;gap:10px;align-items:center;font-size:12.5px}
.bar-track{position:relative;height:14px;border-radius:0 4px 4px 0;background:rgba(255,255,255,.05)}
.bar-track i{position:absolute;inset:0 auto 0 0;background:#c99a4c;border-radius:0 4px 4px 0}
.bar-track em{position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1px dashed rgba(255,255,255,.4)}
.bar-row b{text-align:right}
.hist{display:flex;align-items:flex-end;gap:2px;height:170px}
.hist-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:4px}
.hist-bar i{display:block;width:100%;background:#c99a4c;border-radius:4px 4px 0 0;min-height:2px}
.hist-bar:hover i{background:#f3cb7c}
.hist-bar span{font-size:10px;color:var(--muted)}
.hist-axis{text-align:right;font-size:10.5px;color:var(--muted);margin-top:4px}
.lab-table-wrap{overflow:auto}
.lab-matches{max-height:420px}
.lab-table{width:100%;border-collapse:collapse;font-size:12.5px}
.lab-table th,.lab-table td{padding:7px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.lab-table thead th{position:sticky;top:0;background:#10161a;font:700 10px/1.2 system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--fc);margin-right:8px}
.lab-row-actions{display:flex;gap:6px}
.lab-empty{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:50px}
.lab-empty span{color:var(--muted);max-width:520px}
.linkish{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.lab-foot{max-width:1480px;margin:18px auto 0}

body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

@media (max-width:1100px){
  .collection{grid-template-columns:1fr}.deck{position:static;max-height:none}
  .lab-grid,.lab-head{grid-template-columns:1fr}.lab-kpis{grid-template-columns:repeat(3,1fr)}
  .hub-actions{flex-direction:column;left:24px;right:24px}.hub-brand{display:none}
  .pill small{display:none}.pill{min-width:0}
}
@media (max-width:700px){
  :root{--rail:0px}
  .railnav{top:auto;bottom:0;left:0;right:0;width:auto;height:74px;flex-direction:row;padding:0}
  .railnav::after,.railnav .rail-crest{display:none}
  .railnav button{padding:4px;gap:3px}.railnav img{width:40px;flex-shrink:0}.railnav b{font-size:11px}
  .railnav button+button::before{display:none}
  main{padding-bottom:74px}
  .pills{display:none}
  .who{display:none}
  .play{height:auto;min-height:100vh;padding:130px 16px 96px}.play-art{width:100%}
  .play-body{grid-template-columns:1fr}
  .play-modes{flex-direction:row;flex-wrap:wrap}.play-modes .play-h,.play-modes .opp{width:100%}
  .play-mode{width:auto;flex:1;padding:12px}.play-mode small,.play-sel p{display:none}
  .play-scroll{overflow:visible}.play-scroll .deck-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .play-foot{flex-wrap:wrap}.play-foot .fbtn--go{width:100%;margin-left:0}
  .hub-actions{bottom:96px}
}

/* ---------- collection: deck tiles ---------- */
.page-tabs{display:flex;align-items:center;gap:6px;margin-bottom:22px}
.page-tabs button{padding:10px 22px;border-radius:999px;border:1px solid rgba(215,166,83,.35);background:rgba(8,9,10,.6);cursor:pointer;font:700 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-tabs button.is-on{background:linear-gradient(180deg,#e2b25a,#9a6a25);color:#1a1106;border-color:var(--gold1)}
.page-tabs-title{margin-left:10px;font:700 18px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(180px,14vw,240px),1fr));gap:22px}
.deck-tile{position:relative;aspect-ratio:3/4;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;border:3px solid transparent;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;
  background:linear-gradient(#0c0f12,#0c0f12) padding-box,var(--frame) border-box;box-shadow:0 14px 30px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.deck-tile:hover{transform:translateY(-6px)}
.deck-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.deck-tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--fc) 35%,rgba(0,0,0,.8)) 70%,rgba(0,0,0,.95))}
.deck-tile-legend{position:absolute;left:12px;top:12px;width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--gold1);box-shadow:0 4px 10px #000}
.deck-tile b,.deck-tile small{position:relative;padding:0 14px}
.deck-tile b{font:700 20px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 4px #000;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.deck-tile--new b{display:block}
.deck-tile small{padding-bottom:14px;margin-top:4px;font:600 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#d8cdb2}
.deck-tile--new{justify-content:center;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(20,26,30,.8),rgba(8,10,12,.8)) padding-box,var(--frame) border-box}
.deck-tile--new .plus{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:3px dashed var(--gold2);font:300 56px/1 var(--cond);color:var(--gold1)}
.deck-tile--new b{padding:0}
.deck-tile.is-on{box-shadow:0 0 0 3px var(--gold1),0 0 28px color-mix(in srgb,var(--fc) 70%,transparent),0 14px 30px rgba(0,0,0,.6);transform:translateY(-4px)}
.deck-tile:disabled{cursor:default;filter:grayscale(.85) brightness(.55);transform:none}
/* Collection: the deck used for matches (Select deck) */
.deck-picked{position:absolute;right:8px;top:8px;z-index:2;display:flex;align-items:center;gap:5px;padding:5px 10px 5px 7px;border-radius:99px;background:linear-gradient(180deg,#2f7fcf,#123e74);border:1px solid rgba(207,227,255,.55);
  font:700 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.deck-picked svg{width:13px;height:13px}
.deck-picked em{font-style:normal;white-space:nowrap}
.fbtn.is-picked{background:linear-gradient(180deg,#1b3f5e,#0b1f33) padding-box,var(--frame) border-box;box-shadow:0 0 0 2px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.5)}
.fbtn.is-picked span{color:#cfe3ff}
.picker-veil{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(2,4,6,.8);backdrop-filter:blur(4px)}
.picker-card{display:flex;flex-direction:column;align-items:center;gap:20px;padding:30px;border-radius:10px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.picker-card h3{margin:0;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
.picker-card{width:min(1560px,96vw);box-sizing:border-box}
.picker-legends{display:flex;flex-wrap:wrap;justify-content:center;gap:22px clamp(10px,1vw,18px);width:100%}
.picker-legends .champ{flex:0 0 clamp(92px,7vw,120px)}
.picker-legends .champ-art{filter:none}
.deck-title{width:100%;padding:0;border:0;background:none;font:700 24px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 2px 4px #000}
.deck-title:focus{outline:1px dashed var(--gold2)}
.deck-head div{flex-direction:column;align-items:flex-start;gap:4px}
.deck-row.is-champ .deck-name{border-color:var(--gold1);box-shadow:inset 0 0 12px rgba(255,210,120,.3)}
.deck-tools .danger{color:#ff9f92}
.tilt--lvl{transform:none;width:min(260px,40vw)}
.inspection{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.inspection .flavor{flex-basis:100%}

/* ---------- collection: graded cards (slab look shared with styles/grading.css) ---------- */
.page-tabs em{margin-left:8px;padding:2px 7px;border-radius:999px;font:700 12px/1.2 var(--cond);font-style:normal;letter-spacing:.04em;background:rgba(63,168,255,.22);color:#bfe4ff}
.page-tabs button.is-on em{background:rgba(26,17,6,.22);color:#1a1106}
.gc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.gc-stats{display:flex;flex-wrap:wrap;gap:10px}
.gc-stat{display:flex;flex-direction:column;gap:6px;min-width:110px;padding:10px 16px;border-radius:8px;border:1px solid rgba(215,166,83,.3);background:rgba(8,9,10,.6)}
.gc-stat b{font:700 26px/1 var(--cond)}
.gc-stat small{font:600 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gc-stat.is-gem b{color:#ffd27a;text-shadow:0 0 14px rgba(255,210,120,.5)}
.gc-by{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.gc-group{margin-bottom:22px}
.gc-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:100%;padding:8px 16px 8px 8px;margin-bottom:18px;border:0;border-bottom:1px solid color-mix(in srgb,var(--gcc) 40%,transparent);border-radius:8px 8px 0 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gcc) 16%,transparent),transparent 65%);cursor:pointer;text-align:left;color:var(--ink)}
.gc-head[aria-expanded="false"]{margin-bottom:0}
.gc-head:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--gcc) 26%,transparent),transparent 70%)}
.gc-head>b{font:700 22px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.gc-head>small{font:600 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gc-num{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;font:700 28px/1 var(--cond);color:#1a1106;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gcc) 30%,#fff),var(--gcc));box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 16px color-mix(in srgb,var(--gcc) 35%,transparent)}
.gc-num--rarity{background:rgba(8,9,10,.7);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gcc) 60%,transparent)}
.gc-num--rarity i{width:18px;height:18px;rotate:45deg;border-radius:3px;background:linear-gradient(135deg,#fff,var(--gcc) 55%);box-shadow:0 0 12px var(--gcc)}
.gc-num--rarity .gem{width:26px;height:26px;filter:drop-shadow(0 0 6px currentColor)}
.gc-num--rarity .gc-foil--secret{background:conic-gradient(#ff8ad8,#ffe27a,#8cffb5,#6fd6ff,#b98cff,#ff8ad8)}
.gc-stat.is-art b{color:#8fe6ff;text-shadow:0 0 14px rgba(127,230,255,.5)}
.gc-slab.is-alt,.gc-slab.is-secret{border-color:var(--rc);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),inset 0 0 0 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--rc) 45%,transparent)}
.gc-cert-chips{display:flex;flex-wrap:wrap;gap:6px}
.gc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:auto}
.gc-meta-text{font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#d8cdb2}
.gc-caret{flex:none;width:10px;height:10px;margin-left:6px;border-right:2px solid var(--gold1);border-bottom:2px solid var(--gold1);rotate:45deg;translate:0 -3px;transition:rotate .2s}
.gc-head[aria-expanded="false"] .gc-caret{rotate:-45deg;translate:0}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,11vw,190px),1fr));gap:24px 18px}
.gc-more{display:block;margin:20px auto 0;padding:10px 24px;border-radius:999px;border:1px solid rgba(215,166,83,.45);background:rgba(8,9,10,.6);cursor:pointer;font:700 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold1)}
.gc-more:hover{background:rgba(215,166,83,.16);color:#fff}
.gc-slab{container-type:inline-size;position:relative;display:flex;flex-direction:column;gap:7px;width:100%;padding:7px;border-radius:10px;cursor:pointer;color:inherit;text-align:left;font:inherit;transition:transform .2s,box-shadow .2s;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.03) 38%,rgba(255,255,255,.1) 62%,rgba(255,255,255,.02)),rgba(14,18,22,.6);border:2px solid rgba(220,236,250,.7);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.06),inset 0 0 0 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.55)}
.gc-slab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 58%)}
.gc-slab:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.06),inset 0 0 0 4px rgba(0,0,0,.35),0 20px 36px rgba(0,0,0,.6),0 0 18px color-mix(in srgb,var(--rc) 40%,transparent)}
.gc-slab.is-gem{border-color:#ffe3a0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.08),inset 0 0 0 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(255,210,120,.35)}
.gc-label{display:flex;align-items:stretch;gap:3cqw;padding:2.6cqw 3.4cqw;border-radius:2.4cqw;background:linear-gradient(180deg,#fbf5e6,#e6dcc4);color:#1b1408;border-top:1.6cqw solid var(--rc);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 6px rgba(0,0,0,.45)}
.gc-label-id{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1.8cqw}
.gc-label-id b{font:700 8.4cqw/1 var(--cond);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-label-id i{font:600 5cqw/1 var(--cond);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#5a4a33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-label-grade{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;min-width:22cqw;max-width:30cqw;padding-left:3cqw;border-left:1px solid rgba(60,40,10,.25)}
.gc-label-grade b{font:700 15cqw/.85 var(--cond)}
.gc-label-grade small{font:700 4.2cqw/1.05 var(--cond);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#6b5330}
.gc-slab.is-gem .gc-label{background:linear-gradient(180deg,#fff6d8,#f0cf82)}
.gc-slab.is-gem .gc-label-grade b{background:linear-gradient(180deg,#8a5f22,#3a2408);-webkit-background-clip:text;background-clip:text;color:transparent}
.gc-well{display:block;pointer-events:none}
.gc-empty{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:460px;margin:8vh auto 0;text-align:center}
.gc-empty h2{margin:6px 0 0;font:700 30px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.gc-empty p{margin:0 0 12px;color:var(--muted)}
.gc-empty-slab{display:grid;place-items:center;width:96px;height:132px;border-radius:10px;font:700 54px/1 var(--cond);color:rgba(220,236,250,.7);
  border:2px solid rgba(220,236,250,.6);background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 45%,rgba(255,255,255,.08)),rgba(14,18,22,.6)}
.gc-cert{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:min(300px,84vw);padding:20px 22px;border-radius:8px;border:2px solid transparent;
  background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.gc-cert-grade{display:flex;align-items:center;gap:14px}
.gc-cert-grade b{font:700 68px/.85 var(--cond);color:var(--gcc);text-shadow:0 0 22px color-mix(in srgb,var(--gcc) 45%,transparent)}
.gc-cert-grade small{display:block;margin-bottom:6px;font:600 11px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.gc-cert-grade em{font:700 24px/1.05 var(--cond);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.gc-cert-subs{display:grid;gap:10px;width:100%}
.gc-cert-subs div{display:grid;grid-template-columns:84px 1fr 32px;align-items:center;gap:10px}
.gc-cert-subs small{font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#d8cdb2}
.gc-cert-subs i{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--gold2),var(--gold1)) 0 0/var(--v) 100% no-repeat,rgba(255,255,255,.12)}
.gc-cert-subs b{font:700 16px/1 var(--cond);text-align:right}
.gc-cert p{margin:0;font:600 12px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#b8c4ce}
@media (max-width:700px){
  .page-tabs{flex-wrap:wrap}.page-tabs button{padding:10px 14px;white-space:nowrap}
  .gc-stat{min-width:0;flex:1 1 40%}
  .gc-meta{order:1;flex-basis:100%;margin-left:0}.gc-caret{margin-left:auto}
}

/* ---------- announcements (menu book) ---------- */
.news-sheet{width:min(600px,92vw);max-height:80vh;overflow:auto;padding:26px 28px;border-radius:8px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box;color:#ece4d2}
.news-sheet h3{margin:0 0 16px;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.news-item{padding:14px 0;border-top:1px solid rgba(215,166,83,.25)}
.news-item header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.news-item em{font:700 11px/1 var(--cond);font-style:normal;letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(63,168,255,.18);color:#9fd4ff;border:1px solid rgba(63,168,255,.45)}
.news-item b{font:700 18px/1.1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.news-item small{margin-left:auto;font:600 12px/1 var(--cond);letter-spacing:.14em;color:var(--gold2)}
.news-item p{margin:0;color:#d6cdb9;line-height:1.45}
.acct-name{margin:0 0 6px;text-align:center;color:#d6cdb9}.acct-name b{color:var(--gold1)}

/* ---------- login ---------- */
body[data-screen="login"] .railnav{display:none}
body[data-screen="login"] main{margin-left:0}
.login{position:relative;min-height:100vh;overflow:hidden;display:grid;place-items:center end;padding:24px clamp(20px,7vw,120px)}
.login .sky-frame{transform:scale(1.04) translate(calc(var(--px,0) * -1.4%),calc(var(--py,0) * -1.4%))}
body.no-motion .login .sky-frame{transform:scale(1.04)}
.login .sky-art{filter:saturate(.9)}
.login-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.22) 45%,rgba(4,6,8,.5) 64%,rgba(4,6,8,.86) 82%)}
.login-brand{position:absolute;left:clamp(24px,4vw,64px);top:clamp(24px,5vh,56px);display:flex;align-items:center;gap:14px;text-shadow:0 3px 14px rgba(0,0,0,.8)}
.login-brand b{display:block;font:700 clamp(34px,3.6vw,60px)/1 var(--cond);letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(180deg,#fff6de,#e9bb6a 60%,#a47232);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-brand small{font:600 13px/1 var(--cond);letter-spacing:.4em;text-transform:uppercase;color:#e4d6b6}
.login-card{position:relative;width:min(400px,100%);display:flex;flex-direction:column;gap:14px;padding:26px 28px 22px;border-radius:10px;border:2px solid transparent;
  background:linear-gradient(180deg,rgba(20,27,33,.96),rgba(8,11,14,.97)) padding-box,var(--frame) border-box;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(215,166,83,.3);margin-bottom:4px}
.login-tabs button{padding:10px 6px 12px;border:0;background:none;cursor:pointer;font:700 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#9d937e;border-bottom:3px solid transparent;margin-bottom:-1px}
.login-tabs button.is-on{color:#fff;border-bottom-color:var(--gold1)}
.login-card label{display:flex;flex-direction:column;gap:6px;font:600 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#cfc4ac}
.login-card input{padding:11px 12px;border-radius:6px;border:1px solid rgba(215,166,83,.45);background:#0b0f12;color:#fff;font:500 16px/1.2 "Segoe UI",system-ui,sans-serif}
.login-card input:focus{outline:2px solid var(--gold1);outline-offset:1px}
.login-error{min-height:1.2em;margin:0;color:#ff9a8a;font:600 14px/1.2 "Segoe UI",system-ui,sans-serif}
.login-go{justify-content:center}
.login-note{margin:0;text-align:center;color:#b8ae98;font:500 13px/1.45 "Segoe UI",system-ui,sans-serif}.login-note small{color:#8a8270}
.login-note small .login-link{padding:0;font-size:inherit}
.login-card--wide{width:min(460px,100%)}
.login-h{margin:0;font:700 22px/1.1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.login-copy{margin:0;color:#d8cfbb;font:500 14px/1.5 "Segoe UI",system-ui,sans-serif}.login-copy b{color:#fff;word-break:break-all}
.login-hint{font:500 12px/1.35 "Segoe UI",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#8f8672}
.login-card label.login-check{flex-direction:row;align-items:center;gap:10px;font:500 14px/1.3 "Segoe UI",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#e4dccb}
.login-card .login-check input{width:18px;height:18px;padding:0;accent-color:var(--gold1)}
.login-card input[name=code]{font:600 24px/1 ui-monospace,Consolas,monospace;letter-spacing:.3em;text-align:center}
.login-link{border:0;background:none;padding:2px;cursor:pointer;color:#e9c57f;font:600 13px/1.4 "Segoe UI",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}
.login-link:hover{color:#fff}.login-link:disabled{opacity:.5;cursor:wait}
.login-info{margin:0;color:#9fe0a8;font:600 14px/1.3 "Segoe UI",system-ui,sans-serif}
.login-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:#d8cfbb;font:500 14px/1.45 "Segoe UI",system-ui,sans-serif}
.login-steps small{display:block;margin-top:8px;color:#a59c87}
.login-qr{width:180px;height:180px;margin:10px auto 0;padding:6px;border-radius:8px;background:#fff;display:grid;place-items:center;color:#333}
.login-qr svg{width:100%;height:100%;display:block}
.login-key{display:block;margin-top:4px;padding:8px 10px;border-radius:6px;background:#0b0f12;border:1px solid rgba(215,166,83,.3);color:#fff;font:600 14px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.06em;word-break:break-all;user-select:all}
/* Continue with Google: Google's own light button (white, grey edge, the four-colour G), then "or" before the email. */
.login-google{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 16px;border-radius:8px;border:1px solid #747775;background:#fff;
  color:#1f1f1f;font:600 15px/1.2 Roboto,"Segoe UI",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.login-google svg{flex:none;width:20px;height:20px}
.login-google:hover{background:#f2f2f2}
.login-google:focus-visible{outline:2px solid var(--gold1);outline-offset:2px}
.login-or{display:flex;align-items:center;gap:12px;margin:0;color:#8f8672;font:600 12px/1 var(--cond);letter-spacing:.2em;text-transform:uppercase}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:rgba(215,166,83,.3)}
@media (max-width:760px){.login{place-items:end center;padding:96px 16px 24px}.login-brand{left:16px;top:16px}}

/* ---------- online: search, private match, friends ---------- */
.online-page{display:flex;flex-direction:column;align-items:center;gap:22px}
.ol-head{width:min(100%,760px);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ol-head h1{margin:0;font:700 clamp(34px,4vw,52px)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.ol-deck{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;border-radius:14px;background:rgba(8,9,10,.6);border:1px solid color-mix(in srgb,var(--fc) 55%,transparent);text-align:left}
.ol-deck img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid var(--fc)}
.ol-deck small{display:block;font:700 11px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ol-deck b{display:block;font:700 18px/1.2 var(--cond)}
.ol-deck span{font-size:13px;color:var(--muted)}
.ol-panel{width:min(100%,760px);display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:18px;background:linear-gradient(180deg,rgba(30,40,44,.85),rgba(10,13,16,.9));border:1px solid rgba(215,166,83,.35);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ol-panel h3{margin:0;font:700 22px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#fbe7b0}
.ol-panel p{margin:0;color:var(--muted)}
.ol-error{width:min(100%,760px);margin:0;padding:12px 16px;border-radius:12px;background:rgba(120,30,20,.6);border:1px solid #ff8a7a;color:var(--ink)}
.fr-addbtn{align-self:flex-start}

/* searching */
.search-page{justify-content:center}
.search-core{min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.search-core h1{margin:8px 0 0;font:700 clamp(30px,3.6vw,46px)/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.search-time{margin:0;font:700 26px/1 var(--cond);letter-spacing:.14em;color:#fbe7b0;font-variant-numeric:tabular-nums}
.search-ring{position:relative;width:clamp(170px,22vw,240px);aspect-ratio:1;display:grid;place-items:center}
.search-ring i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#fbe7b0;border-bottom-color:rgba(215,166,83,.45);animation:srSpin 1.6s linear infinite;filter:drop-shadow(0 0 8px rgba(215,166,83,.6))}
.search-ring i:nth-child(2){inset:12%;border-top-color:#48b6ff;border-bottom-color:rgba(72,182,255,.35);animation-duration:2.3s;animation-direction:reverse}
.search-ring i:nth-child(3){inset:-9%;border-width:1px;border-top-color:rgba(251,231,176,.5);border-bottom-color:rgba(251,231,176,.5);animation-duration:4s}
.search-crest{width:62%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #d7a653;box-shadow:0 0 30px rgba(72,182,255,.35);animation:srPulse 2s ease-in-out infinite}
.search-crest img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.search-ring.is-stopped i,.search-ring.is-stopped .search-crest{animation:none;filter:grayscale(.7)}
@keyframes srSpin{to{transform:rotate(360deg)}}
@keyframes srPulse{50%{box-shadow:0 0 50px rgba(72,182,255,.7)}}
body.no-motion .search-ring i,body.no-motion .search-crest,body.no-motion .fr-wait span{animation:none}

/* friend rows (private match, friends panel, invite toast) */
.fr-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.06)}
.fr-row.is-waiting{border-color:rgba(215,166,83,.55)}
.fr-row .gbtn,.invite-toast .gbtn{flex:none;min-width:0;padding:9px 14px;min-height:0;width:auto;font-size:14px}
.fr-av{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 30%,#2a3a44,#0c1216);border:2px solid #d7a653;font:700 18px/1 var(--cond);color:#fbe7b0}
.fr-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.fr-who b{font:700 17px/1.1 var(--cond);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-who small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.fr-dot{width:9px;height:9px;border-radius:50%;background:#5b6166}
.fr-dot--online{background:#4be08a;box-shadow:0 0 8px #4be08a}
.fr-dot--searching{background:#48b6ff;box-shadow:0 0 8px #48b6ff}
.fr-dot--in-match{background:#ffb04a;box-shadow:0 0 8px #ffb04a}
.fr-wait{font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#fbe7b0}
.fr-wait span{animation:olDot 1.2s infinite}.fr-wait span:nth-child(2){animation-delay:.2s}.fr-wait span:nth-child(3){animation-delay:.4s}
@keyframes olDot{0%,100%{opacity:.2}50%{opacity:1}}
.fr-x{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:none;color:var(--muted);cursor:pointer}
.fr-x svg{display:block;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.fr-x:hover{color:#ff8a7a;border-color:#ff8a7a}
/* friends drawer: pinned to the right edge, full height */
dialog.friends{padding:0;border:0;background:none;color:var(--ink);overflow:visible}
dialog.friends[open]{position:fixed;inset:0 0 0 auto;margin:0;width:min(400px,100vw);max-width:100vw;height:100%;max-height:100%;animation:frIn .32s cubic-bezier(.2,.8,.2,1)}
dialog.friends::backdrop{background:rgba(2,4,6,.5);backdrop-filter:blur(2px)}
@keyframes frIn{from{transform:translateX(100%)}}
dialog.friends[open]::backdrop{animation:frFade .32s ease}
dialog.friends.is-closing{animation:frOut .26s cubic-bezier(.5,0,.8,.4) forwards}
dialog.friends.is-closing::backdrop{animation:frFade .26s ease reverse forwards}
@keyframes frOut{to{transform:translateX(100%)}}
@keyframes frFade{from{opacity:0}}
.fr-drawer{height:100%;display:flex;flex-direction:column;gap:14px;padding:22px 20px 18px;border-left:2px solid transparent;
  background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box;box-shadow:-24px 0 50px rgba(0,0,0,.6)}
.fr-head{display:flex;align-items:center;gap:10px}
.fr-head h3{flex:1;margin:0;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
.fr-hbtn{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:2px solid transparent;background:radial-gradient(#1b1b1b,#0a0a0a) padding-box,var(--frame) border-box;color:#fbe7b0;cursor:pointer;transition:transform .15s,filter .15s}
.fr-hbtn svg{width:20px;height:20px}
.fr-hbtn:hover{transform:scale(1.08);filter:brightness(1.2)}
.fr-plus[aria-expanded="true"]{background:var(--frame);color:#16110d}
.fr-me{margin:0;padding-top:12px;border-top:1px solid rgba(215,166,83,.2);text-align:center;font-size:13px;color:var(--muted)}
.fr-me b{color:var(--ink)}
.fr-note{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.fr-note b{color:var(--ink)}
.fr-add{display:flex;gap:8px;animation:frAddIn .2s ease}
@keyframes frAddIn{from{opacity:0;transform:translateY(-6px)}}
.fr-add input{flex:1;min-width:0;padding:11px 14px;border-radius:10px;border:1.5px solid rgba(215,166,83,.5);background:#070a0c;color:var(--ink);font:600 16px/1 var(--cond)}
.fr-add input:focus{outline:none;border-color:#fbe7b0}
.fr-add .gbtn{flex:none;min-width:0;width:auto}
.fr-scroll{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow-x:hidden;overflow-y:auto;padding-right:2px}
.fr-sec{display:flex;flex-direction:column;gap:8px}
.fr-sec h4{margin:0;font:700 12px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
dialog.friends .ol-error{width:auto}
.invite-toast{position:fixed;left:50%;top:clamp(110px,16vh,160px);translate:-50% 0;z-index:9700;width:min(440px,calc(100vw - 32px));display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,#18232a,#0a0e11) padding-box,var(--frame) border-box;border:2px solid transparent;box-shadow:0 20px 40px rgba(0,0,0,.6);animation:inspectIn .3s ease}


/* ---------- deck editor: Legend kit, visual deck, share ---------- */
.collection{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,380px)}
.deck-trio{display:flex;gap:8px;align-items:center}
.deck-trio-item{position:relative;flex:0 0 58px;height:58px;padding:0;border-radius:50%;overflow:visible;cursor:pointer;border:2px solid transparent;background:linear-gradient(#111,#111) padding-box,var(--frame) border-box}
.deck-trio-item img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.deck-trio-item small{position:absolute;left:50%;bottom:-7px;translate:-50% 0;padding:2px 6px;border-radius:999px;background:#0b0e10;border:1px solid color-mix(in srgb,var(--fc) 70%,transparent);font:700 9px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#e9dfc8}
.deck-trio-item:hover{box-shadow:0 0 14px color-mix(in srgb,var(--fc) 80%,transparent)}
.deck-trio-more{margin-left:auto;padding:9px 14px;border-radius:999px;border:1px solid rgba(215,166,83,.45);background:rgba(8,9,10,.6);cursor:pointer;font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold1)}
.deck-trio-more:hover{color:#fff;border-color:var(--gold1)}
.dk-view{display:flex;flex-direction:column;gap:22px}
.dk-kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,28px);padding:clamp(14px,1.4vw,22px);border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--fc) 22%,transparent),transparent 70%),rgba(8,9,10,.55);border:1px solid color-mix(in srgb,var(--fc) 45%,transparent)}
.dk-kit-card{display:grid;grid-template-columns:clamp(96px,7.5vw,140px) minmax(0,1fr);gap:14px;align-items:center;margin:0}
.dk-kit-card figcaption{display:flex;flex-direction:column;gap:6px}
.dk-kit-card figcaption b{font:700 16px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold1)}
.dk-kit-card figcaption span{font:500 13.5px/1.4 "Segoe UI",system-ui;color:#d9d0bd}
.dk-kit-card .col-face:hover{transform:translateY(-4px)}
.dk-fill{display:flex;align-items:center;gap:14px}
.dk-fill b{font:700 30px/1 var(--cond)}.dk-fill b small{font-size:16px;color:var(--muted)}
.dk-fill span{flex:1;display:grid;grid-template-columns:repeat(40,1fr);gap:3px}
.dk-fill i{height:12px;border-radius:2px;background:rgba(255,255,255,.08)}
.dk-fill i.is-on{background:linear-gradient(180deg,#7fd0ff,#1c5aa0)}
.dk-group{margin:4px 0 -8px;font:700 16px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dk-group small{margin-left:6px;color:var(--gold1)}
.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(130px,9vw,170px),1fr));gap:26px 20px}
/* copies fan out behind the card */
.dk-card .col-face{position:relative}
.dk-card[style*="--n:2"] .col-face,.dk-card[style*="--n:3"] .col-face{filter:drop-shadow(5px -5px 0 rgba(20,26,30,.95)) drop-shadow(1px -1px 0 rgba(215,166,83,.5))}
.dk-card[style*="--n:3"] .col-face{filter:drop-shadow(5px -5px 0 rgba(20,26,30,.95)) drop-shadow(1px -1px 0 rgba(215,166,83,.5)) drop-shadow(5px -5px 0 rgba(20,26,30,.95)) drop-shadow(1px -1px 0 rgba(215,166,83,.5))}
.dk-minus{position:absolute;left:-8px;top:-8px;z-index:3;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,12,14,.9);cursor:pointer;font-size:16px;opacity:0;transition:opacity .15s}
.dk-card:hover .dk-minus,.dk-minus:focus-visible{opacity:1}
.dk-empty{font-size:15px}
.linkbtn{padding:0;border:0;background:none;color:var(--gold1);font:inherit;text-decoration:underline;cursor:pointer}
.deck-share{display:flex;flex-direction:column;gap:14px;width:min(520px,90vw);padding:26px;border-radius:10px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.deck-share h3{margin:0;font:700 22px/1.1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.deck-share p{margin:0;font-size:14px;line-height:1.45;color:#d9d0bd}
.deck-share textarea{width:100%;padding:12px;border-radius:6px;border:1px solid rgba(215,166,83,.5);background:rgba(4,5,6,.9);color:#fff;font:500 13px/1.4 ui-monospace,Consolas,monospace;word-break:break-all;resize:none}
.deck-share-btns{display:flex;flex-wrap:wrap;gap:10px}
.deck-share-btns .gbtn{min-width:0;flex:1;padding:12px 14px;font-size:14px;white-space:nowrap}
.deck-share{max-height:calc(100dvh - 24px);overflow-y:auto}
/* Two buttons a row (Share…, Copy code, Copy link, Save file); an odd last one takes the whole row. */
.deck-share-btns{display:grid;grid-template-columns:1fr 1fr}
.deck-share-btns .gbtn:last-child:nth-child(odd){grid-column:1/-1}
/* The deck's QR code (it holds the share link), on white so any camera reads it. */
.deck-qr{align-self:center;width:min(220px,62vw);padding:10px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px var(--gold2),0 0 30px color-mix(in srgb,var(--fc,#d7a653) 45%,transparent),0 12px 30px rgba(0,0,0,.6)}
.deck-qr svg{display:block;width:100%;height:auto}
.deck-share p.deck-share-tip{margin-top:-6px;text-align:center;font-size:13px;color:var(--muted)}
/* Scanning a QR code with the camera (browsers that can read them). */
.deck-scan{position:relative;align-self:center;width:min(320px,80vw);aspect-ratio:1;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 2px var(--gold2)}
.deck-scan video{display:block;width:100%;height:100%;object-fit:cover}
.deck-scan i{position:absolute;inset:16%;border:3px solid var(--gold1);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.deck-scan .gbtn{position:absolute;left:50%;bottom:10px;translate:-50% 0;min-width:0;padding:8px 18px}
/* Decks page: Import sits beside New deck. */
.deck-tile--import .plus svg{width:46%;height:46%}
.deck-tile--import small{padding:4px 0 0;color:var(--muted)}
@media (max-width:1400px){.dk-kit{grid-template-columns:1fr}.dk-kit-card{grid-template-columns:120px 1fr}}
@media (max-width:640px){.picker-legends .champ{flex-basis:calc((100% - 40px) / 3)}.dk-kit-card{grid-template-columns:96px 1fr}}

/* Buying coins (screens/coinshop.mjs): the "+" beside coin balances and the bundle window. */
.coin-plus{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-left:auto;padding:0;border-radius:50%;cursor:pointer;
  border:1.5px solid #6b4a14;background:radial-gradient(circle at 35% 30%,#fff3c4,#f0c258 45%,#b07a22);color:#2a1a04;
  box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s,filter .15s}
.coin-plus svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.coin-plus:hover{transform:scale(1.12);filter:brightness(1.1)}
.coin-plus:focus-visible{outline:2px solid #fff;outline-offset:2px}
dialog.coin-shop{padding:0;border:0;background:none;color:var(--ink);max-width:94vw;overflow:visible}
dialog.coin-shop[open]{width:min(640px,94vw)}
.cs-body{display:flex;flex-direction:column;gap:16px;padding:24px 26px 22px;border-radius:10px;border:2px solid transparent;background:linear-gradient(180deg,#141b21,#080b0e) padding-box,var(--frame) border-box}
.cs-head{display:flex;align-items:center;justify-content:space-between}
.cs-body h3{margin:0;font:700 26px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
.cs-x{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(215,166,83,.5);background:#0b0f12;color:#fff;cursor:pointer}
.cs-x svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.cs-bundle{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px 12px;border-radius:10px;cursor:pointer;color:#fff;
  border:2px solid rgba(215,166,83,.4);background:radial-gradient(circle at 50% 20%,rgba(240,194,88,.18),transparent 60%),#0c1115;transition:transform .15s,border-color .15s}
.cs-bundle:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold1)}
.cs-bundle:disabled{opacity:.55;cursor:default}
.cs-bundle.is-busy{opacity:1;border-color:var(--gold1)}
.cs-bundle b{font:700 28px/1 var(--cond);color:#ffe7a8}
.cs-bundle small{font:600 12px/1.2 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:#cfc4ac}
.cs-coin{width:46px;height:46px;background:url(../assets/ui/icons/coin.svg) center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}
.cs-bonus{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:999px;background:#2f7d3a;color:#fff;font:700 11px/1.2 var(--cond);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cs-price{margin-top:4px;width:100%;padding:8px 0;border-radius:6px;background:linear-gradient(180deg,#2f6fb5,#1c4a80);font:700 17px/1 var(--cond);letter-spacing:.06em}
.cs-note{margin:0;color:#a59c87;font:500 13px/1.5 "Segoe UI",system-ui,sans-serif;text-align:center}.cs-note b{display:block;color:#e4dccb;margin-top:4px}
.cs-error{margin:0;color:#ff9a8a;font:600 14px/1.3 "Segoe UI",system-ui,sans-serif;text-align:center}
.cs-note a,.cs-links a,.settings-note a{color:#e9c57f;text-underline-offset:3px}.cs-note a:hover,.cs-links a:hover,.settings-note a:hover{color:#fff}
.cs-test{margin:0;padding:10px 14px;border-radius:8px;border:1px dashed #d9a441;background:rgba(217,164,65,.1);color:#f3e2bd;font:500 13px/1.45 "Segoe UI",system-ui,sans-serif;text-align:center}
.cs-test b{color:#ffd780}
.cs-links{margin:-6px 0 0;color:#a59c87;font:500 13px/1.5 "Segoe UI",system-ui,sans-serif;text-align:center}
.cs-back{margin-right:auto;margin-left:0;padding:6px 12px;border-radius:999px;border:1px solid rgba(215,166,83,.5);background:#0b0f12;color:#e9c57f;font:700 12px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.cs-back+h3{margin-right:auto!important}
.cs-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(52vh,420px);overflow:auto}
.cs-history li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;border:1px solid rgba(215,166,83,.28);background:#0c1115}
.cs-history .cs-coin{width:30px;height:30px;flex:none}
.cs-history span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-history b{font:700 18px/1.1 var(--cond);color:#ffe7a8}
.cs-history small{font:500 12px/1.3 "Segoe UI",system-ui,sans-serif;color:#a59c87}
.cs-h-price{margin-left:auto;align-items:flex-end;font:700 17px/1.1 var(--cond);color:#fff}
.cs-history .is-refunded,.cs-history .is-disputed{opacity:.6}
.cs-h-price em{font-style:normal}.cs-history .is-refunded em,.cs-history .is-disputed em{text-decoration:line-through}
/* Checkout: Stripe's form inside the shop window, which widens so the form gets its two-column layout */
dialog.coin-shop.is-checkout[open]{width:min(980px,96vw)}
.is-checkout>.cs-body{max-height:94vh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(215,166,83,.5) transparent}
.cs-order{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;border:1px solid rgba(215,166,83,.35);background:#0c1115}
.cs-order .cs-coin{width:34px;height:34px;flex:none}
.cs-order span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-order b{font:700 20px/1.1 var(--cond);color:#ffe7a8}
.cs-order small{font:500 12px/1.3 "Segoe UI",system-ui,sans-serif;color:#a59c87}
.cs-order em{margin-left:auto;font:700 20px/1 var(--cond);font-style:normal;color:#fff}
.cs-stripe{min-height:380px;border-radius:8px;overflow:hidden}
.cs-stripe>.cs-note{padding-top:160px}
/* Purchase complete: a little stack of coins drops in over the amount */
.cs-thanks{align-items:center}
.cs-thanks .cs-head{align-self:stretch}
.cs-haul{position:relative;width:170px;height:104px;margin-top:4px}
.cs-haul .cs-coin{position:absolute;bottom:0;width:78px;height:78px}
.cs-haul .cs-coin:nth-child(1){left:4px;rotate:-16deg;scale:.82}
.cs-haul .cs-coin:nth-child(2){left:46px;bottom:16px;z-index:1}
.cs-haul .cs-coin:nth-child(3){right:4px;rotate:14deg;scale:.82}
body:not(.no-motion) .cs-haul .cs-coin{animation:csDrop .55s cubic-bezier(.2,1.5,.45,1) backwards}
body:not(.no-motion) .cs-haul .cs-coin:nth-child(2){animation-delay:.1s}
body:not(.no-motion) .cs-haul .cs-coin:nth-child(3){animation-delay:.2s}
@keyframes csDrop{from{opacity:0;translate:0 -46px}}
@media (prefers-reduced-motion:reduce){.cs-haul .cs-coin{animation:none!important}}
.cs-gain{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 16px/1 var(--cond);letter-spacing:.18em;text-transform:uppercase;color:#cfc4ac}
.cs-gain b{font:700 64px/1 var(--cond);letter-spacing:.02em;color:#ffe7a8;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #6b4a12,0 0 26px rgba(255,200,90,.35)}
.cs-balance{margin:0;font:600 14px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:#a59c87}
.cs-balance b{margin-left:6px;color:#fff;letter-spacing:.04em}
.cs-continue{min-width:220px;margin-top:4px;padding:13px 26px;border:0;border-radius:6px;background:linear-gradient(180deg,#2f6fb5,#1c4a80);color:#fff;font:700 18px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.cs-continue:hover{filter:brightness(1.12)}
.cs-continue:focus-visible{outline:2px solid #fff;outline-offset:3px}