:root{
  /* the app's zoom (5% on desktop, .desk #app): lengths in vw and vh inside it are zoomed too, so they're divided by it */
  --zv:1;
  --ink:#1f1c1d; --drop:#1f1c1d; --paper:#fbfaf6; --stock:#f6f1e4; --accent:#c04a2c; --accent-ink:#c04a2c; --neg:#a93926; --gold:#d0a23e;
  --hp:#7f9b6e; --shield:#8e9ba3; --burn:#e08a3c; --poison:#8c78a8; --ice:#afd4e3;
  --page:#f4efe3; --text:#1f1c1d; --sub:#5d564f; --line:#1f1c1d; --raise:#fbfaf6;
  --foe:#cbd6da; --you:#ede1c6; --band:#1f1c1d; --bandText:#fbfaf6;
  --display:'Oswald','Arial Narrow','Roboto Condensed',sans-serif;
  --hand:'Patrick Hand','Comic Neue','Segoe Print',cursive;
  --lw:1.5px;
  color-scheme:light;
  box-sizing:border-box;
  /* the notch / status bar and the home indicator. The page itself runs edge to edge (the title's sky goes right up
     behind the clock); each screen keeps its content clear of them */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --ink:#a99f8f; --drop:#0b0a09; --page:#23211e; --text:#f3ede0; --sub:#b2a998; --line:#d9d1c2; --raise:#2e2b27; --foe:#2c363b; --you:#3a3229; --band:#0f0e0e; --accent-ink:#f08a6a; --neg:#f08b74; color-scheme:dark; }
}
:root[data-theme="dark"]{ --ink:#a99f8f; --drop:#0b0a09; --page:#23211e; --text:#f3ede0; --sub:#b2a998; --line:#d9d1c2; --raise:#2e2b27; --foe:#2c363b; --you:#3a3229; --band:#0f0e0e; --accent-ink:#f08a6a; --neg:#f08b74; color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:var(--sat);-webkit-text-size-adjust:100%}
body{height:100%;margin:0;background:var(--page);color:var(--text);font-family:var(--display);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
/* a game, not a page: clicks, taps and drags never highlight text (or open the phone's copy menu); typing fields still can */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,.tile:focus-visible,.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#app{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden;overflow:clip;background:var(--page)}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;display:none;-webkit-overflow-scrolling:touch;padding-top:var(--sat);padding-bottom:var(--sab)}
/* behind the clock: the title screen shows its sky there; every other screen gets a dark band, so the status bar's
   white text can always be read (the app runs with the status bar over the page) */
#app::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--sat);background:#1f1c1d;z-index:35;pointer-events:none}
#app:has(#title.on)::before{display:none}
.screen.on{display:block}
.pad{padding:18px 16px 28px}
#title .pad{padding-top:28px}

/* ---------- art ---------- */
.art{display:block;width:100%;height:100%;overflow:visible}
.art .o,.art .d,.art .h{stroke:#1f1c1d;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.art .o{stroke-width:var(--lw)}.art .d{stroke-width:calc(var(--lw)*.62)}.art .h{stroke-width:calc(var(--lw)*.42)}
.art .n{stroke:none}
.glyph{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}
.glyph .o{stroke:#1f1c1d;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.glyph .n{stroke:none}

/* ---------- buttons ---------- */
.btn{border:2px solid var(--ink);background:var(--raise);color:var(--text);border-radius:8px;padding:10px 14px;font-weight:600;font-size:16px;line-height:1.1;box-shadow:0 3px 0 var(--drop);transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--drop)}
.btn.primary{background:var(--accent);color:#fffaf0;font-size:21px;padding:14px 18px;width:100%}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 3px 0 var(--drop)}
.btn.small{font-size:14px;padding:7px 10px;box-shadow:0 2px 0 var(--drop)}
.linkbtn{background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;color:var(--sub);font-size:15px}
.rptb{justify-self:center;font-size:14px;margin-top:2px}
.nmerr{min-height:1.2em;margin:6px 0 0;color:#b4412c;font-family:var(--hand);font-size:16px}
.fnsur{justify-self:center;font-size:15px}
.mnote{display:block;font-size:13px;color:var(--sub)}
.delacct{justify-self:center;font-size:14px;color:#b4412c;margin-top:6px}
.mpriv{margin:10px 0 0;text-align:center}
.mpriv .linkbtn{font-size:14px}
.btn.danger{background:#c4462f;color:#fffaf0;border-color:#1f1c1d}

/* ---------- home ---------- */
.title{font-weight:700;font-size:clamp(46px,calc(14.5vw / var(--zv)),66px);line-height:.86;letter-spacing:-.01em;margin:6px 0 2px;text-wrap:balance}
.title span{display:block}
.title span:nth-child(2){padding-left:.42em}
.title span:nth-child(3){padding-left:.15em}
.homeTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:1 1 0;min-width:0;max-width:190px}
.hside .handle{max-width:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:0}
.hside .handle b{min-width:0}
.hside .handle .menub{flex:none;margin:0}
/* ---------- the title screen's sky (js/sky.js): the player's time of day over the backyard ----------
   sky.js sets the colours and positions as variables on .sky every minute: --st/--sm/--sl the sky top, middle and
   bottom, --sg/--sga the horizon glow and its strength, --sx/--sy/--sc/--sa the sun, --mx/--my/--ma the moon,
   --stars, --cl/--cs/--ci the clouds' light, shade and ink, --yh/--yf/--yl/--yt the yard, --night 0 by day to 1 */
#title{--sky-ink:#1f1c1d;--sky-sub:#4f4943}
#title.sky-dim{--sky-ink:#f4efe3;--sky-sub:#d6cfc1}
#title .pad{position:relative;z-index:1}
#title .handle b{color:var(--sky-ink)}
#title .netnote{color:var(--sky-sub)}
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(var(--st),var(--sm) 46%,var(--sl))}
.sky>*{position:absolute}
/* the sky's light painted by its shader (skyfx.js): the gradient, glow, stars and the sun's halo step aside for it;
   the inked sun, moon, clouds and yard stay on top */
.sky>canvas.skyfx{inset:0;width:100%;height:100%;display:block}
.sky.gl .sky-glow,.sky.gl .sky-night,.sky.gl .sky-sun::before{display:none}
.sky-glow{inset:0;background:radial-gradient(130% 75% at var(--sx) 100%,var(--sg),transparent 72%);opacity:var(--sga)}
.sky-night{inset:0;opacity:var(--stars)}
.sky-night i{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%}
.sky-night .a{animation:skytw 3.4s ease-in-out infinite alternate}
.sky-night .b{animation:skytw 4.6s ease-in-out -2s infinite alternate}
@keyframes skytw{from{opacity:1}to{opacity:.35}}
/* now and then a star falls */
.sky-night .sky-fall{left:72%;top:9%;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff8e0,rgba(255,248,224,0));transform-origin:0 50%;opacity:0;animation:skyfall 19s 6s linear infinite}
@keyframes skyfall{0%,90%{opacity:0;transform:rotate(152deg) translateX(0) scaleX(.3)}91%{opacity:1}95%{opacity:0;transform:rotate(152deg) translateX(-240px) scaleX(1)}100%{opacity:0}}
/* the sun: an inked disc with a soft halo that grows and warms as it gets low */
.sky-sun{left:var(--sx);top:var(--sy);width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fffdf2,var(--sc) 62%);border:2.5px solid var(--ci);opacity:var(--sa);box-shadow:0 0 0 7px color-mix(in srgb,var(--sc) 30%,transparent),0 0 46px 16px color-mix(in srgb,var(--sc) 55%,transparent)}
.sky-sun::before{content:'';position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sc) 60%,transparent),transparent);transform:scale(calc(1 + var(--slow) * .9));z-index:-1}
.sky-moon{left:var(--mx);top:var(--my);width:44px;height:44px;margin:-22px 0 0 -22px;opacity:var(--ma);filter:drop-shadow(0 0 14px rgba(244,239,220,calc(var(--night) * .45)))}
.sky-moon svg{display:block;width:100%;height:100%}
/* by day only the lit part of the moon shows, pale, as it does in a blue sky */
.sky-moon .md{fill:#2f3658;opacity:calc(var(--night) * .5)}
.sky-moon .mo{opacity:calc(.25 + var(--night) * .4)}
/* clouds drift left to right, each at its own pace and height */
.sky-cloud{left:0;transform-origin:0 0;animation:skydrift var(--d) linear var(--dl) infinite;opacity:.96}
.sky-cloud svg{display:block;transform:scale(var(--k));transform-origin:0 0}
.sky-cloud .cl{fill:var(--cl)}
.sky-cloud .cs{fill:var(--cs)}
.sky-cloud .co{fill:none;stroke:var(--ci);stroke-width:4.4}
@keyframes skydrift{from{transform:translateX(-240px)}to{transform:translateX(calc(calc(100vw / var(--zv)) + 20px))}}
/* the backyard along the bottom, in the same light; at night the stone in the grass glows */
/* (never shorter than the drawing's own proportions, 800 by 60, so a wide window doesn't crop the hedge and the treetop) */
.sky-yard{left:0;bottom:0;width:100%;height:auto;aspect-ratio:40/3;min-height:clamp(64px,calc(12vh / var(--zv)),100px)}
/* with the tab bar up (and the home indicator under it on phones), the yard stands on top of the bar instead of
   behind it, and the lawn carries on down underneath */
#app.tabbed .sky-yard{bottom:calc(var(--tabh) + var(--sab) - 2px)}
#app.tabbed .sky::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--tabh) + var(--sab));background:var(--yl)}
.sky-yard path,.sky-yard ellipse{vector-effect:non-scaling-stroke;stroke:var(--ci);stroke-width:1.6px;stroke-linejoin:round}
.sky-yard .yh,.sky-yard .yc{fill:var(--yh)}
.sky-yard .yt{fill:none;stroke:var(--yt);stroke-width:4px;stroke-linecap:round}
.sky-yard .yf{fill:var(--yf)}
.sky-yard .yl{fill:var(--yl)}
/* the stone: pale by day; at night it glows, a soft pool of light on the lawn and a wash up the fence behind it */
.sky-yard .ys{fill:color-mix(in srgb,#fff4c8 calc(var(--night) * 100%),#e8e2d2);stroke-width:1px}
.sky-yard .ysg{stroke:none;opacity:calc(var(--night) * .95);transform-box:fill-box;transform-origin:center;animation:skyglow 4.5s ease-in-out infinite}
.sky-yard .ysg.yfence{opacity:calc(var(--night) * .5);animation-delay:-.4s}
@keyframes skyglow{0%,100%{transform:scale(.86)}50%{transform:scale(1.06)}}
/* the rim of light along the hedge's top and the treetop: the low sun's, warm, or the moon's, cool */
.sky-yard .yr{fill:none;stroke:var(--rc);stroke-width:3px;opacity:var(--ra);transform:translateY(1.3px)}
/* fireflies, from dusk: they drift on their own loops and blink */
.sky-yard .yflies{opacity:var(--ffa);filter:drop-shadow(0 0 2px #ffe680) drop-shadow(0 0 5px rgba(255,220,110,.6))}
.sky-yard .yff{fill:#fff3a8;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:skyff var(--fd) ease-in-out var(--fl) infinite}
@keyframes skyff{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}45%{opacity:.2}60%{opacity:1;transform:translate(var(--fx),var(--fy))}85%{opacity:.1}100%{opacity:0;transform:translate(calc(var(--fx) * -.4),calc(var(--fy) * .3))}}
/* a low sun lights the yard from its side, warm, laid over it */
.sky-yardlit{left:0;bottom:0;width:100%;height:auto;aspect-ratio:40/3;min-height:clamp(64px,calc(12vh / var(--zv)),100px);pointer-events:none;background:radial-gradient(70% 190% at var(--sx) 100%,color-mix(in srgb,color-mix(in srgb,var(--sc),#ff9440 40%) 95%,transparent),transparent 75%);mix-blend-mode:overlay;opacity:var(--gold)}
#app.tabbed .sky-yardlit{bottom:calc(var(--tabh) + var(--sab) - 2px)}
.sky.still *,.sky.still *::before{animation:none!important}
.handle{font-family:var(--hand);font-size:17px;color:var(--sub);margin-top:2px;text-align:right;max-width:44%}
.handle b{font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);overflow-wrap:anywhere}
.packs{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:18px 0 6px;min-height:200px}
.minipack{width:132px;border:0;background:none;padding:0;transform:rotate(-4deg);transition:transform .2s}
.minipack:nth-child(2){transform:rotate(5deg) translateY(-6px)}
.minipack:active{transform:scale(.97)}
.minipack svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 0 rgba(31,28,29,.18))}
.packnote{text-align:center;font-family:var(--hand);font-size:19px;color:var(--sub);margin:4px 0 18px}
.packnote b{font-family:var(--display);color:var(--text);font-weight:600}
.bootmsg{margin-top:40px;display:grid;gap:12px;justify-items:center}
.empty-packs{border:2px dashed var(--line);border-radius:10px;padding:22px 16px;text-align:center;opacity:.8;width:100%}
.rankplate{display:flex;gap:12px;align-items:center;border:2px solid var(--ink);background:var(--raise);border-radius:10px;padding:10px 12px;margin-bottom:12px;color:var(--text)}
.rankico{width:58px;height:58px;flex:none;border:2px solid var(--ink);border-radius:8px;background:#c9adae;padding:3px}
.rankico .art{--lw:1.4px}
.rankname{font-size:24px;font-weight:700;line-height:1}
.rankline{display:flex;justify-content:space-between;font-size:15px;color:var(--sub);margin-top:4px;gap:8px}
.bar{height:9px;border:1.5px solid var(--ink);border-radius:5px;background:var(--page);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.miniboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:10px 0 4px;height:58px}
.mb-label{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;font-weight:600;margin-top:4px}
.mb-label .mbedit{align-self:center;margin:0 0 4px;width:auto;font-size:15px;padding:7px 14px}
.hist{margin-top:20px}
.hist h3,.sect h3{font-size:18px;font-weight:600;margin:0 0 6px}
.hrow{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1.5px solid color-mix(in srgb,var(--line) 25%,transparent);font-size:16px}
.hrow .res{font-weight:700;width:46px}
.hrow .res.w{color:#3f6a36}.hrow .res.l{color:#a33a26}
:root[data-theme="dark"] .hrow .res.w{color:#8fcf86}:root[data-theme="dark"] .hrow .res.l{color:#f08b74}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hrow .res.w{color:#8fcf86}:root:not([data-theme="light"]) .hrow .res.l{color:#f08b74}}
.hrow .opp{flex:1;font-family:var(--hand);font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tools{margin-top:24px;border-top:2px solid var(--line);padding-top:12px;font-size:15px;color:var(--sub)}
.tools summary{cursor:pointer;font-weight:600;color:var(--text)}
.tools .trow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.netnote{font-family:var(--hand);font-size:16px;color:var(--sub);margin-top:8px}

/* ---------- cards ---------- */
.card{position:relative;background:var(--stock);border:2px solid #1f1c1d;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;color:#1f1c1d;min-width:0;user-select:none;-webkit-user-select:none}
.card .pane{flex:1;min-height:0;position:relative;background:var(--k);border-bottom:1.5px solid #1f1c1d}
.card .pane .art{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);--lw:1.25px}
.card.L .pane .art{--lw:1.4px}
.card .foot{height:calc(21px + var(--fw,2.5px));flex:none;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 calc(var(--fw,2.5px) + 2px) var(--fw,2.5px);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden}
.card.L .foot{gap:8px}
.card .foot .st{display:inline-flex;align-items:center;gap:1px}
.card.S .foot.two{height:38px;flex-direction:column;gap:0;line-height:17px;font-size:13px}
.card.L .foot .st+.st{margin-left:1px}
/* a number raised by a bonus where the card stands (a Chess set, a matchup), or lowered by a matchup */
.card .foot .st.up .v{color:#2f7a2a}
.card .foot .st.down .v{color:#b8402c}
/* strengths and weaknesses: kinds as small tags in their own colours */
.ktag{display:inline-block;margin:0 3px 3px 0;padding:1px 7px;border:1.4px solid #1f1c1d;border-radius:999px;background:var(--k);color:#1f1c1d;font:600 12.5px/1.4 var(--display);white-space:nowrap}
.big .mu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:8px 0 2px;padding:7px 0 0;border-top:1.5px dashed rgba(31,28,29,.3)}
/* strengths (green ▲) and weaknesses (red ▼): each kind as its icon on its own color */
.mub{display:inline-flex;align-items:center;gap:4px}
.mub > b{font-size:12px;line-height:1}
.mub.up > b{color:#4f7d2c}
.mub.dn > b{color:var(--neg)}
.mub i{font-size:12.5px;color:#5d564f}
.kico{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1.8px solid #1f1c1d;border-radius:50%;background:var(--k);cursor:pointer;flex:none}
.kico .kglyph{width:17px;height:17px}
.big .mu .munote{flex-basis:100%}
.munote{margin:2px 0 0;font-size:13px;line-height:1.35;color:#5d564f}
.bdedge{display:grid;gap:3px;margin:-2px 2px 10px;font-size:13px}
.bdedge>div{display:flex;gap:8px;align-items:center}
.bdedge>div>b{flex:none;width:112px;font:600 13px/1.3 var(--display)}
.bdedge .mub > b{font-size:11px}
.bdks{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.bdk{display:inline-flex;align-items:center;gap:2px}
.bdk i{font:600 12px/1 var(--display);font-style:normal;color:#4a4440}
.bdedge .linkbtn{justify-self:start;font-size:13px}
.muchart{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:13px}
.muchart th,.muchart td{text-align:left;vertical-align:top;padding:5px 4px;border-bottom:1px solid rgba(31,28,29,.15)}
.muchart thead th{font:600 12.5px/1.2 var(--display);color:var(--sub)}
.mulist{margin:4px 0 8px;padding-left:18px;font-size:14px;line-height:1.4}
.card .cdn{position:absolute;top:calc(var(--fw,2.5px) + 2px);right:calc(var(--fw,2.5px) + 2px);font-size:10.5px;font-weight:600;background:#fbfaf6;border:1.2px solid #1f1c1d;border-radius:4px;padding:0 3px;line-height:14px;z-index:5}
.card .flag{position:absolute;top:0;left:0;width:0;height:0;border-top:13px solid var(--r);border-right:13px solid transparent;z-index:3}
.card.combo .foot{box-shadow:inset 0 3px 0 var(--gold)}
.card.combo{box-shadow:0 0 0 2.5px #f2c14e,0 0 5px 2px rgba(242,193,78,.45)}
.card .veil{position:absolute;left:0;right:0;top:0;height:0;background:rgba(31,28,29,.40);z-index:2;pointer-events:none}
.card .fx{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;align-items:center;justify-content:center}
.card.frozen .fx{background:repeating-linear-gradient(135deg,rgba(175,212,227,.75) 0 4px,rgba(216,234,240,.55) 4px 8px)}
/* in a fight the card's picture shows what's happening to it (fightfx.js): frost replaces the frozen stripes */
.card .pane canvas.fightfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
:root:not(.nogl) .card.ffx.frozen .fx{background:none}
.card.frozen .fx::after{content:'Frozen';font-size:11px;font-weight:700;background:#d8eaf0;border:1.2px solid #1f1c1d;border-radius:3px;padding:0 3px}
.card.slowed .pane::after,.card.hasted .pane::after{position:absolute;bottom:2px;left:calc(var(--fw,2.5px) + 1px);font-size:10px;font-weight:700;border:1.2px solid #1f1c1d;border-radius:3px;padding:0 3px;z-index:3;line-height:13px}
.card.slowed .pane::after{content:'Slow';background:#c9c4bb}
.card.hasted .pane::after{content:'Haste';background:#f2c14e}
.card.pop{animation:pop .26s ease-out}
.half.foe .card.pop{animation-name:popdown}
@keyframes pop{0%{transform:none}40%{transform:translateY(-9px) scale(1.07)}100%{transform:none}}
@keyframes popdown{0%{transform:none}40%{transform:translateY(9px) scale(1.07)}100%{transform:none}}
.card.flash{animation:flash .35s}
@keyframes flash{0%,100%{filter:none}40%{filter:brightness(1.25) saturate(1.3)}}
.slot-empty{border:1.6px dashed color-mix(in srgb,var(--line) 55%,transparent);border-radius:6px;min-width:0}
.row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;height:var(--rowh,110px)}
.row .card.L,.miniboard .card.L{grid-column:span 3}
.miniboard .card{border-width:1.5px;border-radius:4px}
.miniboard .card .foot,.miniboard .card .cdn{display:none}
.miniboard .card .pane{border-bottom:0}
.miniboard .card .flag{border-top-width:9px;border-right-width:9px}

/* ---------- board screen ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.topbar h2{font-size:26px;font-weight:700;margin:0;flex:1}
.back{border:2px solid var(--ink);background:var(--raise);border-radius:8px;width:40px;height:40px;display:grid;place-items:center;padding:0}
.back svg{width:20px;height:20px}
.back path{stroke:var(--text)}
.boardwrap{background:var(--you);border:2px solid var(--ink);border-radius:10px;padding:8px;margin-bottom:6px}
.boardwrap .row{--rowh:132px}
.boardwrap .card,.pzboard .card,.homeboard .card{touch-action:none;cursor:grab}
.tcbench .card,.tcshop .card{cursor:grab}
.boardwrap .card,.pzboard .card,.homeboard .card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.boardwrap .card.held,.pzboard .card.held,.homeboard .card.held,.row.rgdrop .card.held{z-index:9;cursor:grabbing;box-shadow:0 10px 0 rgba(31,28,29,.25);transition:transform .14s cubic-bezier(.3,1.6,.5,1),box-shadow .14s}
.boardwrap .card.dragging,.pzboard .card.dragging,.homeboard .card.dragging,.row.rgdrop .card.dragging{z-index:9;cursor:grabbing;box-shadow:0 8px 0 rgba(31,28,29,.25);transition:none}
.boardinfo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 2px 4px;font-size:16px}
.combos{font-family:var(--hand);font-size:17px;line-height:1.25;color:var(--sub);margin:4px 2px 14px;min-height:22px}
.combos b{color:var(--text);font-weight:400}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* a chip row's arrows (game.js chipArrows): with a mouse, pinned at whichever end has more chips beyond it */
.chiparr{display:none}
.mouse .chips.morel > .chiparr.l,.mouse .chips.morer > .chiparr.r{display:grid;place-items:center;position:sticky;z-index:3;flex:none;width:32px;height:32px;align-self:center;margin-block:-2px;
  border:1.6px solid var(--ink);border-radius:50%;background:var(--raise);color:var(--text);padding:0;cursor:pointer;box-shadow:0 2px 0 var(--drop)}
.mouse .chips > .chiparr.l{left:0;order:-1;box-shadow:0 2px 0 var(--drop),10px 0 10px 2px var(--page)}
.mouse .chips > .chiparr.r{right:0;order:99;margin-left:auto;box-shadow:0 2px 0 var(--drop),-10px 0 10px 2px var(--page)}
.chiparr svg{width:16px;height:16px}
.chiparr:hover{background:var(--page)}
.chip{flex:none;border:1.6px solid var(--ink);border-radius:20px;padding:4px 12px;background:var(--raise);font-size:15px;font-weight:500}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
:root .chip[aria-pressed="true"]{color:#fbfaf6;background:#1f1c1d}
.chip .glyph{margin-right:4px}
.chip.fbtn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px}
.chip.fbtn svg:not(.glyph){width:17px;height:17px}
.chip.fbtn b{font-size:13px}
.fh{margin:12px 0 6px;font-size:15px;color:var(--sub);font-weight:600}
.fchips{display:flex;flex-wrap:wrap;gap:6px}
.fchips .chip{display:inline-flex;align-items:center}
.rdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--r);border:1.4px solid #1f1c1d;margin-right:5px;flex:none}
.factive{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 10px}
.fon{display:inline-flex;align-items:center;gap:4px;border:1.4px dashed var(--line);background:transparent;color:var(--text);border-radius:14px;padding:2px 8px;font-size:14px}
.fon i:last-child{font-style:normal;font-weight:700;margin-left:2px;color:var(--sub)}
.coll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{position:relative;border:2px solid #1f1c1d;border-radius:8px;background:var(--stock);padding:0;text-align:left;overflow:hidden;color:#1f1c1d;display:flex;flex-direction:column}
.tile .tpane{height:84px;background:var(--k);border-bottom:1.5px solid #1f1c1d;padding:4px}
.tile .tpane .art{--lw:1.35px}
.tile .tname{font-size:15px;font-weight:600;padding:4px calc(var(--fw,3px) + 4px) 0;line-height:1.1;min-height:20px}
.tile .tname{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.tile .tabil{display:inline-flex;gap:2px;flex:none;font-size:15px;margin-top:1px}
.tile .tmeta{display:flex;justify-content:space-between;font-size:13px;padding:2px calc(var(--fw,3px) + 4px) calc(var(--fw,3px) + 3px);color:#5d564f}
.tile .flag{position:absolute;top:0;left:0;border-top:14px solid var(--r);border-right:14px solid transparent}
.tile .new{position:absolute;z-index:5;top:calc(var(--fw,3px) + 3px);right:calc(var(--fw,3px) + 3px);background:var(--accent);color:#fffaf0;font-size:11px;font-weight:600;border:1.3px solid #1f1c1d;border-radius:4px;padding:0 4px}
/* a thing already all on the board: its picture fades, but the tile stays solid so its name and count still read over the sky */
.pzw .tile.spent :is(.tpane,.tabil){filter:grayscale(1);opacity:.45}
/* on the board: a check in the top corner (a collection tile isn't faded when the board is using every copy) */
.tile .onb{position:absolute;z-index:5;top:calc(var(--fw,3px) + 3px);left:calc(var(--fw,3px) + 3px);width:20px;height:20px;box-sizing:border-box;display:grid;place-items:center;background:#6aa84f;border:1.3px solid #1f1c1d;border-radius:50%;box-shadow:0 1.5px 0 #1f1c1d}
.tile .onb svg{width:12px;height:12px;fill:none;stroke:#fffaf0;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.tile .cdn{position:absolute;z-index:5;top:calc(var(--fw,3px) + 3px);right:calc(var(--fw,3px) + 3px);font-size:11.5px;font-weight:600;background:#fbfaf6;color:#1f1c1d;border:1.3px solid #1f1c1d;border-radius:4px;padding:0 4px;line-height:15px}
/* with a cooldown tag in the corner, New sits just under it */
.tile:has(.cdn) .new{top:calc(var(--fw,3px) + 23px)}
.tile .add{position:absolute;z-index:5;right:calc(var(--fw,3px) + 3px);top:58px;width:26px;height:26px;border-radius:50%;border:1.6px solid #1f1c1d;background:#fbfaf6;display:grid;place-items:center;font-size:19px;font-weight:600;line-height:1;padding:0}
.stickybar{position:sticky;bottom:0;z-index:10;padding:12px 0 6px;background:linear-gradient(to top,var(--page) 75%,transparent)}
.hint{font-family:var(--hand);font-size:18px;color:var(--sub);text-align:center;padding:18px 8px}

/* ---------- sheet ---------- */
.scrim{position:absolute;inset:0;background:rgba(20,18,17,.5);z-index:40;display:none}
.scrim.on{display:block}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;background:var(--page);border-top:2.5px solid var(--ink);border-radius:16px 16px 0 0;padding:16px 16px calc(16px + var(--sab));transform:translateY(105%);transition:transform .22s ease-out;max-height:88%;overflow-y:auto}
.sheet.on{transform:none}
.sheet .acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sheet .acts .btn{flex:1}
.sheet.paged{touch-action:pan-y}
.pager{text-align:center;margin:-6px 0 8px;font-size:15px;color:var(--sub);font-variant-numeric:tabular-nums}
#sheet .big.inr{animation:pgin .24s ease-out}
#sheet .big.inl{animation:pgin .24s ease-out;--from:-36px}
#sheet .big.bump{animation:pgbump .25s}
@keyframes pgin{from{transform:translateX(var(--from,36px));opacity:.2}}
@keyframes pgbump{30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.sheet .why{font-family:var(--hand);font-size:17px;color:var(--sub);margin-top:8px;text-align:center}

/* big card */
.big{border:2.5px solid #1f1c1d;border-radius:10px;background:var(--stock);color:#1f1c1d;overflow:hidden;position:relative}
.big .bpane{background:var(--k);border-bottom:2px solid #1f1c1d;aspect-ratio:1.2;padding:10px}
.big.L .bpane{aspect-ratio:1.5}
.big .bpane .art{--lw:2px}
.big .bbody{padding:10px 12px 12px}
.big .bname{font-size:26px;font-weight:700;line-height:1}
.big .tags{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 8px}
.big .tag{font-size:13px;font-weight:500;border:1.4px solid #1f1c1d;border-radius:4px;padding:1px 6px;background:#fbfaf6}
.big .tag.k{background:var(--k)}
.big .tag.set{background:var(--k);font-weight:700}
.big .rules .rv.up{color:#2f7a2a;font-weight:700}
.big .tag.r{background:var(--r);color:#1f1c1d}
.big .rules{font-family:var(--hand);font-size:19px;line-height:1.22}
.big .rules p{margin:0 0 4px}
.big .flav{font-family:var(--hand);font-size:16px;color:#5d564f;margin-top:6px}
/* lore by fusion tier (js/lore.js): a silver or gold rule beside each line read so far */
.big .flav .lore{display:block;margin-top:4px;padding-left:8px;border-left:3px solid #c3ccd1}
.big .flav .lore.t2{border-color:#e2b54a}
.fz-res .big .flav .lore.mine{animation:lorein .7s 1.4s both}
@keyframes lorein{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fz-res .big .flav .lore.mine{animation:none}}
/* the last beat: the empty crater, shown once on reaching Meteorite (js/room.js) */
.crater-seq{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 16px}
.crater-seq .crater{display:block;width:100%;max-width:560px;height:auto;border:2.5px solid var(--ink);border-radius:6px;animation:craterin 2.4s ease both}
.fuse-ov .crater-seq .btn{min-width:180px;margin-top:0;animation:craterin 1s 2.6s ease both}
.fuse-ov:has(.crater-seq){background:#141211}
@keyframes craterin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.crater-seq .crater,.fuse-ov .crater-seq .btn{animation:none}}
/* a dispatch: what the board's ghost got up to while the player was away */
.awsum{font-family:var(--hand);font-size:18px;color:var(--sub);margin:0 0 10px}
.awlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.awlist li{font-size:16px;line-height:1.3;padding-left:10px;border-left:4px solid var(--line)}
.awlist li span{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-right:4px}
.awlist .aww{border-color:#5f9b6a}
.awlist .awl{border-color:var(--accent)}
.awlist b{font-weight:600}
.awmood{font-family:var(--hand);font-size:18px;margin:12px 0 4px}
/* the field guide */
.fgsum{font-family:var(--hand);font-size:17px;color:var(--sub);margin:0 0 10px}
.fgk{margin:14px 0 6px;font-size:17px}
.fg .fgrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 18%,transparent)}
.fgart{width:44px;height:58px;flex:none;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.fgart svg{display:block;width:100%;height:100%}
.fgrow.off .fgart{filter:grayscale(1);opacity:.4}
.fgtx{display:flex;flex-direction:column;gap:2px;min-width:0}
.fgtx b{font-family:var(--display);font-weight:600;font-size:16px}
.fgl{font-family:var(--hand);font-size:15px;color:var(--sub);line-height:1.25}
.fgl.t1,.fgl.t2{padding-left:7px;border-left:3px solid #c3ccd1}
.fgl.t2{border-color:#e2b54a}
.fgl.lk{opacity:.6}
.fglink{text-align:center;margin:10px 0 0}
/* a thing's real-world notes (game.js realHTML): under its card when opened from the field guide, and in the guide's
   own rows on desktop; a phone's rows are too narrow for them */
.fgreal{margin:12px 0 0;padding:10px 14px 12px;border:2px dashed color-mix(in srgb,var(--line) 45%,transparent);border-radius:12px;text-align:left;color:var(--text)}
.fgreal h5{margin:0 0 4px;font:600 13px var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--sub)}
.fgreal p{margin:0 0 8px;font-family:var(--hand);font-size:17px;line-height:1.3}
.fgreal dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.fgreal dt{font:600 14px/1.5 var(--display);color:var(--sub)}
.fgreal dd{margin:0;font-family:var(--hand);font-size:16px;line-height:1.3}
.fgrow .fgreal{display:none}
.big .gl{margin-top:8px;border-top:1.5px dashed #b9b0a3;padding-top:6px;font-size:13px;color:#4a4542;display:grid;gap:3px}
.big .gl div{display:flex;gap:6px;align-items:flex-start}
.big .flag{position:absolute;top:0;left:0;border-top:22px solid var(--r);border-right:22px solid transparent;z-index:2}

/* ---------- pack screen ---------- */
#pack{background:#1d1b1a;color:#f3ede0}
#pack .topbar h2{color:#f3ede0}
#pack .back{background:#2e2b27;border-color:#f3ede0}
#pack .back path{stroke:#f3ede0}
.stage{position:relative;width:min(300px,calc(74vw / var(--zv)));margin:6px auto 0;aspect-ratio:280/460}
.stage .packsvg{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;transition:transform .5s cubic-bezier(.5,0,.8,.4),opacity .5s}
.stage.dealt .packsvg{transform:translateY(80%) rotate(6deg);opacity:0;pointer-events:none}
.stack{position:absolute;left:12%;width:76%;top:30%;aspect-ratio:5/7;z-index:1;transition:top .45s cubic-bezier(.2,.8,.3,1)}
.stage.opened .stack{top:4%}
.stage.dealt .stack{opacity:0}
/* the card back, Holo rings (game.js cbackHTML): the rings in an svg, a band of rainbow foil over them (::before),
   and a rare's or legendary's edge on top (::after) */
.cback{position:absolute;inset:0;border:2.5px solid #1f1c1d;border-radius:10px;background:#2a2340;overflow:hidden}
.cback>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cback::before{content:'';position:absolute;inset:0;background:linear-gradient(-31deg,transparent 30%,#ff9a8a 34%,#ffd27a 39%,#b8f0a8 44%,#9ad8ff 49%,#c8a6ff 54%,#ff9ad0 59%,transparent 63%);opacity:.5;pointer-events:none}
.cback.rR::after,.cback.rL::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.cback.rR::after{box-shadow:inset 0 0 0 6px #8fb0cc}
.cback.rL::after{box-shadow:inset 0 0 0 6px #e2b54a}
.riphint{text-align:center;font-family:var(--hand);font-size:20px;color:#d7cdbb;margin:14px 12px 0;min-height:28px}
.reveal{display:none;padding:0 16px 20px}
.reveal.on{display:block}
.flipwrap{perspective:1200px;width:min(310px,calc(80vw / var(--zv)));margin:4px auto 0;aspect-ratio:5/7.75;position:relative;cursor:pointer}
.flipper{position:absolute;inset:0;transition:transform .45s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.flipper.flipped{transform:rotateY(180deg)}
.flipper .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipper .ffront{transform:rotateY(180deg)}
.flipper .ffront .big{height:100%;display:flex;flex-direction:column}
.flipper .ffront .bbody{flex:1;overflow:auto}
.flipper .ffront .bpane{aspect-ratio:1.75;flex:none}.flipper .ffront .big.L .bpane{aspect-ratio:2.1}
.flipwrap.leave .flipper{transition:transform .3s ease-in,opacity .3s;transform:rotateY(180deg) translateY(40%) scale(.3);opacity:0}
.burst{position:absolute;inset:-14% -10%;z-index:-1;display:none}
.flipper.flipped.rare .burst{display:block}
.revcount{text-align:center;font-size:16px;color:#d7cdbb;margin:10px 0 6px}
/* the pack hints sit where the lamp lights the shelf, so they go on a small dark label instead of loose on the light */
#pack :is(.riphint,.revcount):not(:empty){width:fit-content;max-width:calc(100% - 24px);margin-inline:auto;padding:2px 12px;background:#1f1c1d;color:#f3ede0;border:2px solid #4a4340;border-radius:8px;min-height:0}
.haul{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;margin:8px auto 0;max-width:340px}
.haul .h{aspect-ratio:1;border:1.4px solid #f3ede0;border-radius:4px;background:#2e2b27;overflow:hidden}
.haul .h.got{border-color:#1f1c1d;background:var(--k)}
.haul .h .art{--lw:1px}
.revbtns{display:flex;gap:8px;margin-top:14px}
.revbtns .btn{flex:1}
.summary{display:none;padding:0 16px 24px}
.summary.on{display:block}
.summary h3{font-size:30px;margin:4px 0 12px;font-weight:700;color:#f3ede0}
.summary .coll{margin-bottom:16px}
.summary .tile .tname{color:#1f1c1d}

/* ---------- battle ---------- */
#battle.on{display:flex;flex-direction:column;overflow:hidden;overflow:clip}
.half{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:10px;gap:8px;position:relative;min-height:0}
.half.foe{background:var(--foe)}
.half.me{background:var(--you)}
/* each half's living backdrop (bgfx.js), behind everything in it */
.half.bfx{isolation:isolate}
.half > canvas.bgfx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.half.hasmat{isolation:isolate}
/* a playmat (mats.js): its print under everything in the half, its moving parts over the backdrop's status looks.
   The print is the mat's whole look without WebGL */
.half > svg.matprint{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;overflow:hidden}
.half > canvas.matfx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.half.matlight .whotop .nm,.half.matlight .whotop .rt{color:#f3ede0}
.half.matlight .whotop .tg{color:#f3ede0;border-color:rgba(243,237,224,.7)}
.matprint .mpencil{transform-box:fill-box;transform-origin:50% 50%;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.matprint.nudge .mpencil{transform:translateX(14px) rotate(6deg)}
.matprint .mko,.matprint .mwin{opacity:0;transition:opacity .5s}
.matprint.ko .mko,.matprint.win .mwin{opacity:1}
.matprint .mscrib{stroke-dasharray:520;stroke-dashoffset:520}
.matprint.ko .mscrib{transition:stroke-dashoffset .7s ease-out .2s;stroke-dashoffset:0}
.matprint.ko .mscrib.two{transition-delay:.75s}
.matprint .mbreathe{animation:matbreathe 3.4s ease-in-out infinite alternate}
@keyframes matbreathe{from{opacity:.45}to{opacity:1}}
.matprint.flare .mbreathe{animation:none;opacity:1;filter:brightness(1.6)}
.matprint.cold .mcrk{stroke:#55505a}.matprint.cold .mbreathe{animation:none;opacity:0;transition:opacity 1.2s}
.matprint .msheen{opacity:0}
.matprint.win .msheen{animation:matsheen 1.6s ease-in-out .3s 2}
@keyframes matsheen{0%{opacity:0;transform:translateX(-120px)}30%{opacity:.9}100%{opacity:0;transform:translateX(120px)}}
@media (prefers-reduced-motion:reduce){.matprint *{animation:none!important;transition:none!important}}
/* the Playmats shelf */
.matpv{display:block;position:relative;aspect-ratio:1100/428;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--you)}
.matpv svg{position:absolute;inset:0;width:100%;height:100%}
.matpv.plain{background:radial-gradient(ellipse 70% 95% at 50% 0%,rgba(255,255,255,.3),transparent 70%),var(--you)}
.matrow{display:grid;gap:6px;padding:10px 0;border-bottom:1.5px solid color-mix(in srgb,var(--line) 25%,transparent)}
.matrow:last-child{border-bottom:0}
.matrow .mhd{display:flex;align-items:baseline;gap:8px}
.matrow .mhd b{font-size:18px;font-weight:600}
.matrow .mhd small{color:var(--sub);font-size:14px}
.matrow p{margin:0;font-size:15px;color:var(--sub)}
.matrow.locked .matpv{filter:grayscale(.8) brightness(.92)}
.matrow .btn{justify-self:start}
.desk .matlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
html:not(.desk) .matrow{grid-template-columns:128px minmax(0,1fr);column-gap:12px;align-items:start}
html:not(.desk) .matrow > .matpv{grid-row:1 / span 3}
html:not(.desk) .matrow > :not(.matpv){grid-column:2}
html:not(.desk) .lookpv .matpv{height:92px}
.matnew{display:grid;gap:10px;text-align:center}
.matnew .matpv{max-width:360px;margin:0 auto;width:100%}
.rpnow .rpmat{display:block;margin-top:6px;font-size:14px;text-align:left}
.lookpv{position:relative;margin:0 0 12px}
/* the preview is a strip, so the shelf stays in view */
.lookpv .matpv{aspect-ratio:auto;height:112px;border-radius:10px}
.lookpv .lookemb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78%,300px);pointer-events:none}
.looktabs{display:flex;gap:6px;margin:0 0 10px;border-bottom:2.5px solid var(--line)}
.looktabs .lt{flex:1;border:2px solid color-mix(in srgb,var(--line) 35%,transparent);border-bottom:0;border-radius:8px 8px 0 0;background:transparent;padding:8px 8px 7px;font-weight:600;font-size:16px;margin-bottom:0;color:var(--sub)}
.looktabs .lt small{font-weight:400;font-size:13px;margin-left:4px}
.looktabs .lt.on{background:var(--accent);border-color:var(--line);color:#fffaf0;box-shadow:0 3px 0 var(--accent)}
.looktabs .lt.on small{color:#fffaf0}
.looktabs .lt:not(.on):hover{color:var(--text);border-color:var(--line)}
.lookp{margin:0 0 8px}
.matlist .embhead{grid-column:1/-1}
/* the ported mats' moving parts (mats.js), and the In season sticker */
.half > canvas.matsky,.half > canvas.matmid{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.nogl .half > canvas.matsky,.nogl .half > canvas.matmid{display:none}
.matseason{position:absolute;right:26px;z-index:1;width:62px;height:62px;border-radius:50%;background:var(--kc);border:2.5px solid #1f1c1d;box-shadow:0 0 0 4px #fbf7ec,0 4px 0 4px rgba(31,28,29,.25);display:grid;place-items:center;align-content:center;gap:2px;transform:rotate(-9deg);font:700 9px/1.05 var(--display);letter-spacing:.05em;text-transform:uppercase;color:#1f1c1d;text-align:center;pointer-events:none}
.matseason .glyph{width:24px;height:24px}
html:not(.desk) .matseason{right:10px;width:52px;height:52px;font-size:8px}
/* mats' own moving parts: only transform and opacity */
.matprint .sway{transform-box:fill-box;animation:mt-sway 4.6s ease-in-out infinite alternate}
@keyframes mt-sway{from{transform:skewX(-2.2deg)}to{transform:skewX(2.2deg)}}
.matprint .swing{animation:mt-swing 3.4s ease-in-out infinite alternate}
@keyframes mt-swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.matprint .breathe{animation:mt-breathe 3.4s ease-in-out infinite alternate}
@keyframes mt-breathe{from{opacity:.45}to{opacity:1}}
.matprint .pglow{animation:mt-breathe 2.6s ease-in-out infinite alternate}
.matprint.flare .breathe{animation:none;opacity:1;filter:brightness(1.6)}
.matprint.cold .crk{stroke:#55505a!important}.matprint.cold .breathe{animation:none;opacity:0;transition:opacity 1.2s}
.matprint .koonly,.matprint .winonly{opacity:0;transition:opacity .5s}
.matprint.ko .koonly,.matprint.win .winonly{opacity:1}
.matprint .stampin{transform-box:fill-box;transform-origin:50% 50%}
.matprint.ko .stampin.koonly,.matprint.win .stampin.winonly{animation:mt-stamp .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mt-stamp{from{transform:scale(1.8) rotate(var(--sr,-8deg));opacity:0}to{transform:scale(1) rotate(var(--sr,-8deg));opacity:1}}
.matprint .stampin{transform:rotate(var(--sr,-8deg))}
.matprint .scrib{stroke-dasharray:520;stroke-dashoffset:520}
.matprint.ko .scrib{transition:stroke-dashoffset .7s ease-out .2s;stroke-dashoffset:0}
.matprint .sold{transform:rotate(-75deg);opacity:0}
.matprint.ko .sold{animation:mt-soldin 1s cubic-bezier(.3,1.5,.5,1) .15s forwards}
@keyframes mt-soldin{0%{transform:rotate(-75deg);opacity:0}15%{opacity:1}100%{transform:rotate(0);opacity:1}}
.matprint .pencil{transform-box:fill-box;transform-origin:50% 50%;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.matprint.nudge .pencil{transform:translateX(14px) rotate(6deg)}
.matprint .rcirc{stroke-dasharray:300;stroke-dashoffset:300;animation:mt-draw .45s ease-out forwards,mt-fadeo .5s 1.1s forwards}
@keyframes mt-draw{to{stroke-dashoffset:0}}
@keyframes mt-fadeo{to{opacity:0}}
.matprint .sheen{opacity:0}
.matprint.win .sheen{animation:mt-sheen 1.6s ease-in-out .3s 2}
@keyframes mt-sheen{0%{opacity:0;transform:translateX(-120px)}30%{opacity:.9}100%{opacity:0;transform:translateX(120px)}}
.matprint .konot{transition:opacity .5s,transform .6s cubic-bezier(.5,0,.75,.4)}
.matprint.ko .konot{opacity:0;transform:translateY(var(--fall,30px))}
.matprint.shiver .sway{animation-duration:.22s!important}
.matprint .needle{animation:mt-needle 2.2s ease-in-out infinite alternate;transition:transform .25s}
@keyframes mt-needle{from{transform:rotate(60deg)}to{transform:rotate(78deg)}}
.matprint.spike .needle{animation:none;transform:rotate(150deg)}
.matprint.ko .needle{animation:none;transform:rotate(205deg)}
.matprint.rattle .swing{animation-duration:.18s!important}
.matprint .drift{animation:mt-drift 9s ease-in-out infinite alternate}
@keyframes mt-drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.matprint .slide{animation:mt-drift 7s ease-in-out infinite alternate-reverse}
.matprint .roll{animation:mt-roll 16s linear infinite}
@keyframes mt-roll{from{transform:translateX(0)}to{transform:translateX(var(--rw))}}
.matprint .popin{animation:mt-stamp .3s cubic-bezier(.3,1.6,.5,1) both,mt-fadeo .4s .5s forwards}
.matprint .xtal{transition:filter 1s}.matprint.ko .xtal{filter:saturate(.15) brightness(.75)}
.matprint .burnonly,.matprint .frostonly,.matprint .lowonly{opacity:0;transition:opacity .6s}
.matprint.st-burn .burnonly,.matprint.st-frost .frostonly,.matprint.st-low .lowonly{opacity:1}
.matprint .lowhide{transition:opacity .6s}.matprint.st-low .lowhide{opacity:0}
.matprint .pot{transform-box:view-box}.matprint .bob{animation:mt-bob .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes mt-bob{40%{transform:rotate(-8deg) scale(1.07)}}
.matprint.st-burn .sway{filter:sepia(.6) saturate(.75) brightness(.95)}
.matprint.st-low .sway{filter:saturate(.5) brightness(.85)}
.matprint .gear{transform-box:fill-box;transform-origin:50% 50%;animation:mt-spin 7s linear infinite}
.matprint .gear.rev{animation-name:mt-spinr;animation-duration:4.9s}
@keyframes mt-spin{to{transform:rotate(360deg)}}@keyframes mt-spinr{to{transform:rotate(-360deg)}}
.matprint.surge .gear{animation-duration:1.1s}.matprint.st-frost .gear{animation-duration:20s}
.matprint.ko .gear,.matprint.ko .belt{animation-play-state:paused}
.matprint .belt{stroke-dasharray:6 8;animation:mt-belt .9s linear infinite}
@keyframes mt-belt{to{stroke-dashoffset:-14}}
.matprint.surge .belt{animation-duration:.25s}
.matprint .blink{animation:mt-blink 1s steps(2) infinite}
@keyframes mt-blink{50%{opacity:.15}}
.matprint .jig,.matprint .rat,.matprint.win .timer{transform-box:fill-box;transform-origin:50% 50%}
.matprint.jigon .jig{animation:mt-jig .42s}.matprint.raton .rat{animation:mt-jig .3s 2}.matprint.win .timer{animation:mt-jig .3s 5}
@keyframes mt-jig{25%{transform:translate(2px,-1px) rotate(7deg)}50%{transform:translate(-2px,1px) rotate(-6deg)}75%{transform:translate(1px,0) rotate(3deg)}}
.matprint .led{fill:#5c635f}.matprint.ledon .led{fill:#8fe07a}
.matprint .xc{transition:filter .25s}.matprint .ping{filter:brightness(1.75) drop-shadow(0 0 6px rgba(255,255,255,.9))}
.matprint.st-burn .xtal{filter:hue-rotate(-55deg) saturate(1.6) brightness(1.05)}
.matprint.st-frost .xtal{filter:saturate(.25) brightness(1.35)}
.matprint.st-low .xtal{animation:mt-flick 1.3s ease-in-out infinite}
@keyframes mt-flick{50%{opacity:.55}}
.matprint .ck{transform-box:fill-box;transform-origin:50% 50%}.matprint .hop{animation:mt-hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes mt-hop{40%{transform:translateY(var(--hy,-9px)) rotate(10deg)}}
.matprint .pin{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.matprint.rollp .pin{transform:translateX(26px)}
.matprint .tl{transition:transform .3s cubic-bezier(.5,0,.6,1.7)}.matprint .lift{transform:translateY(var(--ly,-11px)) rotate(-5deg);transition:transform .16s ease-out}
.matprint.st-burn .tl{filter:sepia(.5) saturate(1.7) hue-rotate(-22deg)}
.matprint.st-frost .tl{filter:saturate(.3) brightness(1.3)}
.matprint.st-low .swing{animation-duration:.33s!important}
.matprint .tail{animation:mt-tailw 2.6s ease-in-out infinite alternate}.matprint.flick .tail{animation-duration:.2s}
@keyframes mt-tailw{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
.matprint .open{opacity:0;transition:opacity .2s}.matprint .shut{transition:opacity .2s}
.matprint.awake .open,.matprint.st-low .open{opacity:1}.matprint.awake .shut,.matprint.st-low .shut{opacity:0}
.matprint .cat{transition:transform 1s cubic-bezier(.5,0,.7,.4),opacity 1s}.matprint.ko .cat{transform:translateX(-240px);opacity:0}
.matprint .stack{transform-box:view-box}.matprint.wob .stack{animation:mt-wob .5s}.matprint.st-low .stack{animation:mt-wob 1.1s ease-in-out infinite}.matprint.ko .stack{animation:none}
@keyframes mt-wob{25%{transform:rotate(-4deg)}75%{transform:rotate(3deg)}}
.matprint.ko .ticker{animation:mt-tick 8s linear infinite}
@keyframes mt-tick{to{transform:translateX(-33.3%)}}
.matprint .ice{transition:opacity .6s}.matprint .pud .ice{opacity:0}.matprint.st-frost .pud .ice{opacity:1}
.matprint .tbox{transition:fill .6s}
.matprint .cutI *{fill:#1f1c1d!important;stroke:#1f1c1d!important;stroke-width:6.5px!important;stroke-linejoin:round!important;opacity:1!important}
.matprint .cutU *{fill:var(--u)!important;stroke:var(--u)!important;stroke-width:4px!important;stroke-linejoin:round!important;opacity:1!important}
.matprint .cutI [opacity],.matprint .cutU [opacity]{display:none}
.matprint .tl{transform-box:fill-box;transform-origin:50% 50%}
.matprint .lift{filter:drop-shadow(0 8px 3px rgba(0,0,0,.5))}
.matprint.rattle .tl{animation:mt-rat2 .14s 3}
@keyframes mt-rat2{25%{transform:translate(1.5px,-1px) rotate(1.5deg)}75%{transform:translate(-1.5px,1px) rotate(-1.5deg)}}
.matprint.rattle .parts{animation:mt-rat2 .12s 4}
.matprint .flap{animation:mt-flapS 3.2s ease-in-out infinite alternate}
@keyframes mt-flapS{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes mt-flapM{from{transform:rotate(-10deg)}to{transform:rotate(8deg)}}
@keyframes mt-flapL{0%{transform:rotate(-26deg) skewX(-8deg)}50%{transform:rotate(-8deg) skewX(4deg)}100%{transform:rotate(-32deg) skewX(8deg)}}
.matprint .wxroot[data-wx="2"] .flap{animation-name:mt-flapM;animation-duration:1.7s}
.matprint .wxroot[data-wx="3"] .flap{animation-name:mt-flapM;animation-duration:.8s}
.matprint .wxroot[data-wx="4"] .flap{animation-name:mt-flapL;animation-duration:.42s}
.matprint.gust .flap{animation-name:mt-flapL!important;animation-duration:.28s!important}
.matprint .canopy{animation:mt-canopyS 4s ease-in-out infinite alternate}
@keyframes mt-canopyS{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@keyframes mt-canopyL{from{transform:rotate(-7deg)}to{transform:rotate(3deg)}}
.matprint .wxroot[data-wx="3"] .canopy{animation:mt-canopyL 1.3s ease-in-out infinite alternate}
.matprint .wxroot[data-wx="4"] .canopy,.matprint.gust .canopy{animation:mt-canopyL .45s ease-in-out infinite alternate}
.matprint .vane{animation:mt-vaneS 6s ease-in-out infinite alternate}
@keyframes mt-vaneS{from{transform:scaleX(1)}to{transform:scaleX(.82)}}
@keyframes mt-vaneSpin{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.matprint .wxroot[data-wx="3"] .vane{animation:mt-vaneSpin 1.4s linear infinite}
.matprint .wxroot[data-wx="4"] .vane,.matprint.gust .vane{animation:mt-vaneSpin .45s linear infinite}
.matprint.ko .flap{animation:none}
.matprint .wxs{opacity:0;transition:opacity .9s}
.matprint .wxroot[data-wx="0"] .l0{opacity:1}
.matprint .wxroot[data-wx="1"] .l1{opacity:1}
.matprint .wxroot[data-wx="2"] .l2{opacity:1}
.matprint .wxroot[data-wx="3"] .l3{opacity:1}
.matprint .wxroot[data-wx="4"] .l4{opacity:1}
.matprint .front{transition:transform 2.2s ease-in-out}
.matprint .wxroot[data-wx="0"] .front{transform:translateX(calc(300px * var(--fs,1)))}
.matprint .wxroot[data-wx="1"] .front{transform:translateX(calc(150px * var(--fs,1)))}
.matprint .wxroot[data-wx="2"] .front{transform:translateX(calc(40px * var(--fs,1)))}
.matprint .wxroot[data-wx="3"] .front{transform:translateX(calc(-70px * var(--fs,1)))}
.matprint .wxroot[data-wx="4"] .front{transform:translateX(calc(-150px * var(--fs,1)))}
.matprint .spin{animation:mt-spin 30s linear infinite}
.matprint .drop{animation:mt-dropf .7s linear infinite}
@keyframes mt-dropf{from{transform:translateY(-4px);opacity:0}30%{opacity:1}to{transform:translateY(7px);opacity:0}}
.half .row{--rowh:clamp(104px,calc(19vh / var(--zv)),156px)}
.who{position:relative}
.whotop{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-width:0}
.whotop .rk{width:30px;height:30px;flex:none;border:1.6px solid #1f1c1d;border-radius:6px;background:#c9adae;padding:1px}
.whotop .rk .art{--lw:1px}
.whotop .nm{font-weight:600;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.whotop .tg{font-size:12px;border:1.3px solid var(--line);border-radius:4px;padding:0 5px;flex:none;color:var(--sub)}
.whotop .rt{margin-left:auto;font-size:15px;color:var(--sub);flex:none}
.hpline{display:flex;align-items:center;gap:6px}
.hpbar{position:relative;flex:1;height:24px;border:2px solid #1f1c1d;border-radius:6px;background:#3a3633;overflow:hidden}
.hpbar .hpf{position:absolute;left:0;top:0;bottom:0;background:var(--hp);transition:width .12s}
.hpbar .hpd{position:absolute;left:0;top:0;bottom:0;background:#e9b9a8;transition:width .5s .15s}
.hpbar .shf{position:absolute;left:0;top:0;height:8px;background:repeating-linear-gradient(135deg,#c3c9cb 0 4px,#8e9ba3 4px 8px);border-bottom:1.5px solid #1f1c1d;transition:width .12s}
.hpbar .hpn{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-weight:700;font-size:15px;color:#fbfaf6;text-shadow:0 1px 0 #1f1c1d,1px 0 0 #1f1c1d,-1px 0 0 #1f1c1d,0 -1px 0 #1f1c1d}
.stat{display:inline-flex;align-items:center;gap:2px;font-weight:600;font-size:15px;border:1.5px solid #1f1c1d;border-radius:5px;padding:1px 4px;background:#fbfaf6;color:#1f1c1d}
.stat[hidden]{display:none}
.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.floaters{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.fl{position:absolute;font-weight:700;font-size:27px;white-space:nowrap;animation:floatup 1s ease-out forwards;text-shadow:0 1.5px 0 #1f1c1d,1.5px 0 0 #1f1c1d,-1.5px 0 0 #1f1c1d,0 -1.5px 0 #1f1c1d;display:flex;align-items:center;gap:2px}
.fl.dmg{color:#ff8a66}.fl.shield{color:#d6dde0}.fl.heal{color:#b6e39f}.fl.burn{color:#ffb15c}.fl.poison{color:#d3b8ff}.fl.sudden{color:#fbfaf6}
@keyframes floatup{0%{transform:translateY(6px) scale(.8);opacity:0}15%{transform:translateY(0) scale(1.08);opacity:1}100%{transform:translateY(-34px);opacity:0}}
.band{height:44px;flex:none;background:var(--band);color:var(--bandText);display:flex;align-items:center;justify-content:space-between;padding:0 10px;gap:8px;position:relative;z-index:5}
.band .clock{font-size:22px;font-weight:700;min-width:56px}
.band .sd{font-size:15px;color:#ffb39c;font-weight:600;opacity:0;transition:opacity .3s}
.band .sd.on{opacity:1}
.band .ctl{display:flex;gap:6px}
.band button{border:1.6px solid #fbfaf6;background:transparent;color:#fbfaf6;border-radius:6px;padding:4px 10px;font-size:15px;font-weight:600}
.band button[aria-pressed="true"]{background:#fbfaf6;color:#1f1c1d}
.overlay{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(20,18,17,.55);padding:20px}
.overlay.on{display:flex}
.panel{width:100%;max-width:380px;background:var(--page);border:2.5px solid var(--ink);border-radius:14px;padding:18px;color:var(--text)}
.vs{text-align:center}
.vs .vsn{font-size:28px;font-weight:700;line-height:1.05;overflow-wrap:anywhere}
.vs .vsx{font-family:var(--hand);font-size:24px;color:var(--sub);margin:6px 0}
.vs .vsr{font-size:15px;color:var(--sub)}
.res h2{font-size:58px;line-height:.9;margin:0 0 6px;font-weight:700}
.res .delta{font-size:30px;font-weight:700}
.res .delta.up{color:#4f7a44}.res .delta.down{color:#b5452f}
.res .promo{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:10px;padding:8px;margin:12px 0;background:var(--raise)}
.res .promo .rankico{width:52px;height:52px}
.res .rline{font-size:16px;color:var(--sub);margin-top:4px}
.res .acts{display:grid;gap:8px;margin-top:16px}
.res .acts .row2{display:flex;gap:8px}
.res .acts .row2 .btn{flex:1;padding:10px 6px;white-space:nowrap}
.res .sum{font-family:var(--hand);font-size:18px;color:var(--sub);margin-top:6px}
.hprecap{display:grid;gap:6px;margin:12px 0 4px}
.hprow{display:flex;align-items:center;gap:8px}
.hprow .hpwho{width:30%;flex:none;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hprecap .hpbar{height:20px}
.hprecap .hpf{animation:hpdrain .9s .35s cubic-bezier(.3,.7,.3,1) both}
.hprow.ko .hpn,.hprow.held .hpn{justify-content:center;padding-right:0}
.hprow.ko .hpwho{color:var(--sub);text-decoration:line-through}
@keyframes hpdrain{from{width:100%}}
.toast{position:absolute;left:50%;top:64px;transform:translate(-50%,-20px);background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:8px;font-size:15px;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:90%;text-align:center}
:root .toast{background:#1f1c1d;color:#fbfaf6}
/* a toast with a button (Undo): it can be tapped */
.toast.act{pointer-events:auto}
.toast .tact{margin-left:8px;padding:3px 10px;border:1.5px solid #f2c14e;border-radius:6px;background:none;color:#f2c14e;font:700 14px var(--display);cursor:pointer}
.toast.on{opacity:1;transform:translate(-50%,0)}
.finding{text-align:center;font-family:var(--hand);font-size:24px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .sheen{display:none}
}
.sheen{animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-340px)}100%{transform:translateX(360px)}}
/* ---------- rarity (frame) and tiers (fusion) ---------- */
/* rarity owns the frame: stone, green, blue, gold. Rare and legendary frames carry a moving sheen (legendary's is
   brighter and quicker). Fusion tiers show as the diamond pips and a silver or gold name plate instead */
.card.rC,.tile.rC,.big.rC{--rf:#c4bbaa}
.card.rU,.tile.rU,.big.rU{--rf:#84a97c}
.card.rR,.tile.rR,.big.rR{--rf:#6b97c0;--rs:rgba(240,248,255,.95);--rt:3.6s}
.card.rL,.tile.rL,.big.rL{--rf:#dcaa36;--rs:rgba(255,251,228,1);--rt:2.4s}
:is(.card,.tile,.big):not(.fb)::after{content:'';position:absolute;inset:0;border:var(--fw,3px) solid var(--rf,transparent);border-radius:4px;box-shadow:inset 0 0 0 1.2px rgba(31,28,29,.55);pointer-events:none;z-index:3}
:is(.card,.tile,.big):is(.rR,.rL):not(.fb)::before{content:'';position:absolute;inset:0;padding:var(--fw,3px);border-radius:4px;pointer-events:none;z-index:4;
  background:linear-gradient(115deg,transparent 41%,var(--rs) 47%,#fff 50%,var(--rs) 53%,transparent 59%) 0 0/300% 100% no-repeat;animation:raresheen var(--rt) linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes raresheen{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.card{--fw:2.5px}
.miniboard .card,.homeboard .card{--fw:2px}
.tile::after,.tile::before{border-radius:6px!important}
.tile.rR,.tile.rL{--fw:4px}.card.rR,.card.rL{--fw:3px}
.big{--fw:5px}.big.rR,.big.rL{--fw:6px}.big::after,.big::before{border-radius:8px!important}
.card .flag,.tile .flag,.big .flag{display:none}
.card.t1,.tile.t1,.big.t1{--tc:#c3ccd1;--tp:linear-gradient(180deg,#eef2f4,#bcc6cc 55%,#dfe5e8)}
.card.t2,.tile.t2,.big.t2{--tc:#e2b54a;--tp:linear-gradient(180deg,#fbe9b0,#d9a93a 55%,#f3d47a)}
.tile.t1 .tname,.tile.t2 .tname,.card.t1 .foot,.card.t2 .foot{background:var(--tp)}
.big.t1 .bname,.big.t2 .bname{display:inline-block;background:var(--tp);border:1.5px solid #1f1c1d;border-radius:6px;padding:0 8px}
.tpane,.bpane{position:relative}
.tierb{position:absolute;right:calc(var(--fw,2.5px) + 1px);bottom:3px;z-index:3;display:flex;gap:2px}
.tierb i{display:block;width:7px;height:7px;transform:rotate(45deg);border:1.2px solid #1f1c1d;background:var(--tc)}
.tile .tierb{right:calc(var(--fw,3px) + 4px);bottom:6px;gap:3px}.tile .tierb i{width:9px;height:9px}
.big .tierb{right:12px;bottom:12px;gap:6px}.big .tierb i{width:13px;height:13px;border-width:1.6px}
.miniboard .tierb{right:2px;bottom:2px}.miniboard .tierb i{width:5px;height:5px}
.big .tag.tt{background:var(--tc);font-weight:600}
.tile .fuseb{position:absolute;left:calc(var(--fw,3px) + 2px);bottom:5px;background:#e2b54a;color:#1f1c1d;border:1.3px solid #1f1c1d;border-radius:4px;font-size:11px;font-weight:600;padding:0 5px;z-index:4}
.fzchip{margin-left:8px;border:1.5px solid #1f1c1d;background:#e2b54a;color:#1f1c1d;border-radius:12px;font-size:13px;font-weight:600;padding:2px 8px;vertical-align:2px}
.fusebar{display:flex;align-items:center;gap:10px;border:2px solid #1f1c1d;border-radius:10px;background:#f3e2b0;color:#1f1c1d;padding:8px 10px;margin:0 0 12px}
.fusebar p{margin:0;flex:1;font-family:var(--hand);font-size:17px;line-height:1.2}
.fusebar .btn{flex:none}
.summary .fusebar{margin:2px 0 14px}
/* the confirm sheet before fusing: what's fused, that the copies are used up, and the board after */
.fzlist{margin:4px 0 10px;padding-left:20px;font-size:16px;line-height:1.45}
.fzwarn{margin:8px 0;font-size:15px;line-height:1.4;color:var(--sub)}
.fzwarn b{color:var(--text)}
/* the Board screen's 3 saved boards */
.bdslots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 4px}
.bdslot{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border:2px solid var(--line);border-radius:8px;background:var(--raise);color:var(--text);font:inherit;cursor:pointer}
.bdslot b{font:600 15px/1.1 var(--display)}
.bdslot small{font-size:12px;color:var(--sub)}
.bdslot.on{background:var(--ink);border-color:var(--ink);color:var(--page)}
.bdslot.on small{color:var(--page);opacity:.85}
.bdslotnote{margin:0 2px 8px;font-size:12.5px;color:var(--sub)}
.fusebox{margin-top:14px;border:2px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--raise)}
.fzhead{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:17px}
.fzhave{color:var(--sub);font-weight:500}
.fzpre{font-family:var(--hand);font-size:17px;line-height:1.22;margin:6px 0 10px}
.fusebox .btn{width:100%}
.fuse-ov{position:absolute;inset:0;z-index:55;background:rgba(20,18,17,.88);display:none;flex-direction:column;align-items:center;padding:30px 18px 24px;overflow-y:auto;color:#f3ede0}
.fuse-ov.on{display:flex}
.fz-stage{position:relative;width:min(280px,calc(74vw / var(--zv)));flex:none}
.fz-trio{position:absolute;left:-8%;right:-8%;top:24%;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.fz-trio .fc{width:31%;animation:fzIn3 .55s .35s cubic-bezier(.6,0,.9,.5) forwards}
.fz-trio .tile{width:100%}
@keyframes fzIn3{60%{opacity:1}to{transform:translateX(var(--dx)) scale(.3);opacity:0}}
.fz-res{position:relative;opacity:0;transform:scale(.4);animation:fzPop .5s .82s cubic-bezier(.2,1.5,.4,1) forwards}
.fz-res .burst{display:block;position:absolute;left:-12%;top:-10%;width:124%;height:120%;z-index:-1}
@keyframes fzPop{to{opacity:1;transform:none}}
@keyframes fzIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.fz-msg{font:700 30px/1.05 var(--display);text-align:center;margin:20px 0 2px;animation:fzIn .3s 1.15s both}
.fz-more{font-family:var(--hand);font-size:18px;text-align:center;color:#d7cdbb;margin:6px 0 0;animation:fzIn .3s 1.3s both}
.fuse-ov .btn{margin-top:18px;max-width:320px;animation:fzIn .3s 1.3s both}
.scrapbox{margin:0 0 18px}
.scrapline{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;font-weight:600;margin-bottom:6px;gap:8px}
.scrapline em{font-style:normal;color:#8a6110;font-weight:500}
:root[data-theme="dark"] .scrapline em{color:#e2b54a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scrapline em{color:#e2b54a}}
.scraps{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;height:17px}
.scraps i{border:1.4px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:3px;transition:background-color .2s,border-color .2s,transform .25s}
.scraps i.on{border-color:#1f1c1d;background:#d9b45a linear-gradient(135deg,transparent 0 40%,rgba(255,246,214,.75) 40% 58%,transparent 58%)}
.scraps i.new{transform:translateY(-2px)}
.scraphint{font-family:var(--hand);font-size:16px;color:var(--sub);margin:7px 0 0;line-height:1.2}
.res-scraps{margin:14px 0 0}
.bonusnote{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:700;font-size:21px;animation:fzIn .4s cubic-bezier(.2,1.5,.4,1) both}
.bonusnote[hidden]{display:none}
.bnpack{width:38px;flex:none;transform:rotate(-6deg)}.bnpack svg{width:100%;height:auto;display:block}
.minipack{position:relative}
.minipack.bonus{transform:rotate(3deg) translateY(-2px)}
.packs.n3{gap:8px}.packs.n3 .minipack{width:106px}
.pkcount{position:absolute;right:-6px;top:-8px;background:#1f1c1d;color:#fbfaf6;border-radius:10px;padding:1px 7px;font-size:14px;z-index:2}
/* a panel taller than the screen (a small phone) scrolls inside the overlay instead of spilling off both ends: centring
   is done by the panel's auto margins, which give way when there isn't room (flex centring would push its top out of
   reach), and the overlay keeps clear of the notch and the home bar */
.overlay{overflow-y:auto;overscroll-behavior:contain;align-items:flex-start;justify-content:flex-start;padding:calc(var(--sat) + 16px) 16px calc(var(--sab) + 16px)}
.overlay > *{margin:auto;flex:none}
.packsvg:focus{outline:none}.packsvg:focus-visible{outline:3px solid #f2c14e;outline-offset:4px}
/* ---------- battle spectacle ---------- */
.bstage{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.fxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
/* the knockout blow in slow motion: the stage darkens and drains of colour, the losing side leans in */
.bstage::before{content:'';position:absolute;inset:0;z-index:19;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse 75% 60% at 50% var(--koy,50%),transparent 35%,rgba(12,10,10,.7) 100%)}
.bstage.slow1{--koy:22%}.bstage.slow0{--koy:78%}
.bstage.slowmo::before{opacity:1}
.bstage .half{transition:transform .5s cubic-bezier(.2,.8,.3,1),filter .35s}
.bstage.slowmo .half{filter:saturate(.45) contrast(1.08)}
.bstage.slow1 #half1,.bstage.slow0 #half0{transform:scale(1.04);filter:none}
.band .rplay{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:5px;padding:1px 6px;margin-right:auto;margin-left:8px}
.bstage.predeal .row .card{opacity:0}
.row .card.dealin{animation:dealin .42s cubic-bezier(.2,1.5,.4,1) both}
.half.foe .card.dealin{--dy:-40px;--dr:8deg}
@keyframes dealin{0%{opacity:0;transform:translateY(var(--dy,40px)) rotate(var(--dr,-8deg)) scale(.5)}100%{opacity:1;transform:none}}
.card.pop{animation:pop .34s cubic-bezier(.3,.7,.4,1);z-index:6}
.card.L.pop{animation-duration:.46s}
@keyframes pop{0%{transform:none}25%{transform:translateY(6px) scale(.93)}55%{transform:translateY(-18px) scale(1.12) rotate(-2deg)}100%{transform:none}}
@keyframes popdown{0%{transform:none}25%{transform:translateY(-6px) scale(.93)}55%{transform:translateY(18px) scale(1.12) rotate(2deg)}100%{transform:none}}
.card.ready .cdn{background:#f2c14e}
.row.jolt{animation:jolt .32s}
@keyframes jolt{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hpbar .hpfl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.hpbar.hit{animation:shake .25s}
.hpbar.hit .hpfl{animation:hpfl .22s}
@keyframes hpfl{0%{opacity:.85}100%{opacity:0}}
.hpbar.low{box-shadow:0 0 0 3px #e0603f}
.hpbar.low .hpf{background:repeating-linear-gradient(135deg,#c4513e 0 6px,#a8483a 6px 12px)}
.hpbar.broken{border-style:dashed}.hpbar.broken .hpf,.hpbar.broken .shf,.hpbar.broken .hpd{opacity:0}
.card.kofall{animation:kofall .95s cubic-bezier(.5,0,.75,.4) var(--d,0s) forwards}
@keyframes kofall{20%{transform:translateY(-12px) rotate(calc(var(--r,10deg) * -.25))}100%{transform:translateY(150px) rotate(var(--r,10deg));opacity:0}}
.card.cheer{animation:cheer .42s ease-in-out 4 alternate both}
@keyframes cheer{to{transform:translateY(-10px) scale(1.05)}}
.band.sudden{background:#b5452f;animation:sdpulse 1s steps(2,jump-none) infinite}
@keyframes sdpulse{50%{background:#7e2c1f}}
.foot .st.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.4);color:#c0471f}}
.band button svg{display:block}
.band #sndb{padding:4px 7px}
/* ---------- pack opening v2 ---------- */
#pack{overflow-x:hidden}
.pfx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#pfxb{z-index:0}#pfx{z-index:8}
/* the shader light out of an opened pack (packfx.js rays), screened over the shop behind the stage */
#pfxr{z-index:1;mix-blend-mode:screen}
.pstage{position:relative;height:min(580px,calc(66vh / var(--zv)));z-index:2;--pw:min(262px,calc(64vw / var(--zv)));--cw:min(272px,calc(68vw / var(--zv)))}
/* on a short phone the stage takes only the height left over by the top bar, the hint and the haul with its buttons
   (about 250px, plus the notch and the home bar), and the pack and the cards shrink to fit it, so Show all is never
   below the bottom of a screen that can't scroll while cards are being flipped */
.pstage{--sh:min(580px,calc(66vh / var(--zv)),max(240px,calc(calc(100vh / var(--zv)) - var(--sat) - var(--sab) - 250px)));--sh:min(580px,calc(66dvh / var(--zv)),max(240px,calc(calc(100dvh / var(--zv)) - var(--sat) - var(--sab) - 250px)));height:var(--sh);--pw:min(262px,calc(64vw / var(--zv)),calc(var(--sh) / 1.7));--cw:min(272px,calc(68vw / var(--zv)),calc(var(--sh) / 1.55))}
.pspot{position:absolute;left:50%;top:50%;width:min(420px,calc(108vw / var(--zv)));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,236,200,.05);box-shadow:0 0 0 min(56px,calc(13vw / var(--zv))) rgba(255,236,200,.025)}
.packwrap{position:absolute;left:50%;top:50%;width:var(--pw);aspect-ratio:280/460;transform:translate(-50%,-50%);z-index:3;transition:transform .48s cubic-bezier(.5,0,.8,.4),opacity .4s .08s}
.packwrap.gone{transform:translate(-50%,40%) rotate(8deg);opacity:0;pointer-events:none}
.pack3d{width:100%;height:100%;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .18s ease-out}
.packsway{width:100%;height:100%;animation:sway 3.8s ease-in-out infinite}
.packsway.still{animation:none}
/* a pack's foil (packfx.js): light laid over the drawing and dodged into it, so the ink stays dark and the foil shines */
canvas.packfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:color-dodge;z-index:3}
:root:not(.nogl) svg.fxpack .sheen{display:none}
@keyframes sway{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-7px)}}
.pstage .packsvg{position:static;width:100%;height:100%;display:block;touch-action:none;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35))}
.deckzone{position:absolute;inset:0;z-index:2}
.dk{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:5/7.4;margin-left:calc(var(--cw) / -2);margin-top:calc(var(--cw) * -0.74);transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .3s;will-change:transform;touch-action:none;-webkit-user-select:none;user-select:none}
.dk.notr{transition:none!important}
.dk .glint{position:absolute;top:7%;bottom:7%;width:6px;border-radius:3px;pointer-events:none;opacity:calc(var(--peek,0) * 1.4 - .35);transition:opacity .2s;
  background:linear-gradient(180deg,transparent 0%,#f3d98a 30%,#fffdf4 50%,#cfe6f5 70%,transparent 100%);background-size:100% 260%;animation:glint 1.2s linear infinite;box-shadow:0 0 8px 2px rgba(255,246,214,.55)}
.dk .glint.gl{left:-3px}.dk .glint.gr{right:-3px}
@keyframes glint{from{background-position:0 130%}to{background-position:0 -130%}}
.dkin{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.dk .flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.dk .flipper.flipped{transform:rotateY(180deg)}
.dk .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dk .ffront{transform:rotateY(180deg)}
.dk .ffront .big{height:100%;display:flex;flex-direction:column}
.dk .ffront .bpane{aspect-ratio:2.05;flex:none}.dk .ffront .big.L .bpane{aspect-ratio:2.3}
.dk .big .rules{font-size:16.5px;line-height:1.18}.dk .big .bname{font-size:24px}
#pack{-webkit-user-select:none;user-select:none}
.screen.noscroll,#pack.noscroll{overflow:hidden;overflow:clip}
.dk .ffront .bbody{flex:1;overflow:hidden}
.dk .ffront .gl{display:none}
.dk.top{cursor:pointer}
.dk.top:focus-visible{outline:3px solid #f2c14e;outline-offset:4px;border-radius:12px}
.dk.wiggle .dkin{animation:wiggle 1.5s ease-in-out infinite}
.dk.charge .dkin{animation:charge .07s linear infinite}
@keyframes wiggle{0%,72%,100%{transform:none}78%{transform:rotate(-3deg) scale(1.02)}84%{transform:rotate(3deg) scale(1.02)}90%{transform:rotate(-1.5deg)}}
@keyframes charge{0%{transform:translate(-3px,1px) rotate(-1.2deg) scale(1.03)}50%{transform:translate(3px,-1px) rotate(1.2deg) scale(1.05)}100%{transform:translate(-3px,1px) rotate(-1.2deg) scale(1.03)}}
.holo{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;background-image:repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.42) 26px 34px,transparent 34px 52px,var(--hc) 52px 57px,transparent 57px 80px);background-size:240% 100%;background-position:var(--hx,50%) 0;transition:background-position .15s}
.holo.hL{--hc:rgba(242,193,78,.65)}
.stamp{position:absolute;z-index:6;font:700 24px/1 var(--display);letter-spacing:.02em;padding:5px 10px 4px;border:3px double currentColor;border-radius:6px;opacity:0;pointer-events:none;background:rgba(251,250,246,.55)}
.stamp.snew{color:#c4513e;right:12px;top:14px;--sr:-12deg}
.stamp.sfuse{color:#a8720f;left:10px;top:30%;--sr:8deg;font-size:20px}
.stamp.go{animation:stampIn .3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stampIn{0%{opacity:0;transform:rotate(var(--sr)) scale(2.6)}100%{opacity:.95;transform:rotate(var(--sr)) scale(1)}}
.revui{position:relative;z-index:9;padding:0 16px 16px}
.revui .haul .h{border-color:#4a4542;background:#2a2725;border-radius:5px}
.revui .haul .h.got{border-color:#1f1c1d;background:var(--k);animation:haulpop .32s cubic-bezier(.2,1.6,.4,1)}
.revui .haul .h.rR{box-shadow:0 0 0 2px #8fb0cc}.revui .haul .h.rL{box-shadow:0 0 0 2px #e2b54a}
@keyframes haulpop{0%{transform:scale(.3)}100%{transform:none}}
.riphint{position:relative;z-index:9}
.sumline{font-family:var(--hand);font-size:19px;color:#d7cdbb;margin:-6px 0 12px}
.summary .tile.dealt{animation:dealin .45s cubic-bezier(.2,1.5,.4,1) both}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- leaderboard ---------- */
.lblist{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.lbrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--ink);background:var(--raise);color:var(--text);border-radius:10px;padding:6px 10px}
.lbrow.you{background:var(--you);box-shadow:0 3px 0 var(--drop)}
.lbn{width:28px;flex:none;font-size:20px;font-weight:700;text-align:center}
.lbico{width:36px;height:36px;flex:none;border:1.5px solid var(--ink);border-radius:6px;background:#c9adae;padding:2px}
.lbico .art{--lw:1.2px}
/* (Chess's rows, where the player's face is their emblem, in the rank's place) */
.lbrow :is(.embface,.tcinit).lbic{width:36px;height:36px;border-width:1.5px;border-radius:6px;font-size:17px}
.lbname{flex:1;min-width:0;font-family:var(--hand);font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbname em{font-family:var(--display);font-style:normal;font-size:14px;color:var(--sub)}
.lbrt{display:grid;justify-items:end;line-height:1.05}
.lbrt b{font-size:19px}.lbrt small{font-size:13px;color:var(--sub)}
.lbgap{text-align:center;color:var(--sub);font-size:20px;line-height:1}

/* ---------- account ---------- */
.menub{display:grid;place-items:center;width:34px;height:34px;padding:0;margin:0 0 6px auto;border:2px solid var(--ink);border-radius:8px;background:var(--raise)}
.menub svg{width:18px;height:18px}
.menub path{stroke:var(--text)}
.sndt{display:inline-flex;align-items:center;gap:8px;min-width:88px;justify-content:center}
.sndt[aria-checked="false"]{color:var(--sub)}
.acct-p{margin:0 0 4px;font-family:var(--hand);font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.acct-p b{font-family:var(--display);font-weight:600}
.msect{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1.5px solid color-mix(in srgb,var(--line) 25%,transparent)}
.msect .acct-p{margin:0;min-width:0}
.msect .btn{flex:none}

/* ---------- illustrated scenes ---------- */
/* items draw a full scene cropped to their frame; the kind color shows as the thin border around it */
.art.scene{overflow:hidden}
.big .bpane:has(.art.scene){padding:5px}
/* a light screen-print grain over the big card's illustration only; small cards and tiles stay clean */
.big .bpane::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.3;background-size:150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .12  1.4 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
.steps{margin:0 0 4px;padding-left:22px;font-family:var(--hand);font-size:19px;line-height:1.35}
.steps li+li{margin-top:4px}

/* ---------- rank path ---------- */
.rankplate{cursor:pointer}
.rkhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rkhead .linkbtn{font-family:var(--display);font-weight:500;font-size:15px}

/* ---------- rank rewards: full-bleed cards with a gold foil frame ---------- */
.card.fb,.tile.fb,.big.fb{--gold:#e2b54a;background:#1f1c1d}
.card.fb::before,.tile.fb::before,.big.fb::before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border:2.5px solid var(--gold);border-radius:inherit;box-shadow:inset 0 0 0 1.2px rgba(31,28,29,.75),inset 0 0 0 4px rgba(242,210,122,.35)}
.card.fb .pane{position:absolute;inset:0;border-bottom:0;background:#1f1c1d}
.card.fb .pane .art{inset:0;width:100%;height:100%}
.card.fb .foot{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(251,250,246,.9);border-top:1.5px solid #1f1c1d}
.tile.fb{justify-content:flex-end;min-height:136px}
.tile.fb .tpane{position:absolute;inset:0;height:auto;padding:0;border-bottom:0;background:#1f1c1d}
.tile.fb .tname{margin-top:auto;position:relative;z-index:2;background:rgba(251,250,246,.9);border-top:1.5px solid #1f1c1d;padding-top:3px}
.tile.fb .tmeta{position:relative;z-index:2;background:rgba(251,250,246,.9)}
.big.fb{display:flex;flex-direction:column;aspect-ratio:5/7.6}
.big.fb .bpane,.dk .ffront .big.fb .bpane{position:absolute;inset:0;aspect-ratio:auto;padding:0;border-bottom:0;background:#1f1c1d}
.big.fb .bbody{position:relative;z-index:2;margin-top:auto;background:rgba(251,250,246,.92);border-top:2px solid #1f1c1d}
.big .tag.rw{background:var(--gold,#e2b54a);font-weight:600}
.rprwart{position:relative;width:26px;height:38px;flex:none;border:1.5px solid #e2b54a;border-radius:4px;overflow:hidden;background:#1f1c1d}
.rw-kicker{margin:0 0 6px;text-align:center;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f2d27a}
/* on full-bleed cards the text sits in a compact panel so the art carries the card */
.big.fb .bbody{padding:7px 10px 9px}
.big.fb .bname{font-size:22px}
.big.fb .tags{margin:4px 0 5px}
.big.fb .rules{font-size:16px;line-height:1.18}
.big.fb .flav{font-size:14px;margin-top:2px}
.big.fb .gl{display:none}
.card.spent{filter:grayscale(1) opacity(.55)}
/* revealed pack cards: the full rules always fit; the illustration gives up height (cropping) for long text */
.dk .ffront .bpane,.dk .ffront .big.L .bpane{aspect-ratio:auto;flex:1 1 0;min-height:22%}
/* large items' scenes are 1.7 wide: their pane starts at that shape and only shrinks (cropping top and bottom), never
   grows taller, which would crop the sides and cut off a shark's tail */
.dk .ffront .big.L .bpane{aspect-ratio:1.7;flex:0 1 auto}
.dk .ffront .bbody{flex:none;overflow:visible}
.dk .big .rules p{margin:0 0 3px}
.dk .big.tight .flav{display:none}
.dk .big.tighter .rules{font-size:14.5px;line-height:1.12}.dk .big.tighter .bname{font-size:21px}.dk .big.tighter .tags{margin:4px 0 5px}
/* a revealed pack card shows its picture first, filling the card, with its name and kind in the footer; a tap swaps
   in the whole card (.det) */
.dk .ffront .big.dart{position:absolute;inset:0;z-index:2;display:block;transition:opacity .25s}
.dk .ffront .big.dart .bpane,.dk .ffront .big.L.dart .bpane{position:absolute;inset:0;aspect-ratio:auto;padding:0;border-bottom:0;overflow:hidden}
.dk .big.dart .bpane .art{position:absolute;inset:0}
/* a large thing's card turns sideways (.side) so its wide picture fills it: its picture side and stamps are laid out
   on their side to match */
.dk .dland,.dk.side .dstamps{position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:calc(var(--cw) * 1.48);height:var(--cw);transform:translate(-50%,-50%) rotate(-90deg)}
.dk .dstamps{position:absolute;inset:0;z-index:6;pointer-events:none}
.dkin{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(0deg) scale(1)}
.dk.side .dkin{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(90deg) scale(var(--sk,1))}
.dk.turn .dkin{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.dk .big.dart .dfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:7px 10px 8px 12px;background:rgba(251,250,246,.93);border-top:2px solid #1f1c1d}
.dk .big.dart .dfoot>div{min-width:0}
.dk .big.dart .dname{display:block;font-size:24px;font-weight:700;line-height:1}
.dk .big.dart .dsize{display:block;margin-top:3px;font-size:15px;line-height:1;color:#5d564f}
.dk .big.t1.dart .dname,.dk .big.t2.dart .dname{background:var(--tp);border:1.5px solid #1f1c1d;border-radius:6px;padding:0 8px}
.dk .big.dart .tabil{display:inline-flex;gap:3px;flex:none;font-size:24px;margin-top:0}
.dk .ffront .big:not(.dart){opacity:0;transform:scale(.97);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.3,1)}
.dk.det .ffront .big:not(.dart){opacity:1;transform:none}
.dk.det .ffront .big.dart{opacity:0;pointer-events:none}

/* ---------- health bar status looks ---------- */
/* one fill look per side (data-fx: frozen > burn > poison > wet) and overlays for shock, fog and spines */
.hpbar .hpf::after{content:'';position:absolute;inset:0;pointer-events:none}
.hpbar .hpn{z-index:3}
.hpbar[data-fx=burn] .hpf{background:linear-gradient(0deg,#9e2c1c,#d9502f 40%,#ec8a3a 75%,#f6c75a);animation:hpburn .35s steps(2) infinite}
.hpbar[data-fx=burn] .hpf::after{background:radial-gradient(ellipse 5px 9px at 50% 100%,rgba(255,228,140,.9),rgba(255,160,60,.5) 55%,transparent 72%) 0 0/13px 24px repeat-x;animation:hpflame .5s linear infinite}
.hpbar[data-fx=burn]{border-color:#7e2c1f}
@keyframes hpburn{50%{filter:brightness(1.18) saturate(1.2)}}
@keyframes hpflame{from{background-position:0 14px}to{background-position:6px -10px}}
.hpbar[data-fx=poison] .hpf{background:linear-gradient(180deg,#d4f04a,#9bc919 45%,#6c8f0c);animation:hpooze 1.6s ease-in-out infinite}
.hpbar[data-fx=poison] .hpf::after{background:radial-gradient(circle 6px at 50% 0,#4d6b0c 92%,transparent) 0 -2px/12px 10px repeat-x,radial-gradient(ellipse 3px 5px at 50% 50%,#4d6b0c 90%,transparent) 0 0/15px 24px repeat;animation:hpdrip 1.4s linear infinite}
.hpbar[data-fx=poison]{border-color:#4d6b0c;box-shadow:0 0 8px 1px rgba(182,224,74,.7)}
@keyframes hpooze{50%{filter:saturate(1.3) brightness(1.08)}}
@keyframes hpdrip{from{background-position:0 -3px,0 -6px}to{background-position:0 -3px,0 18px}}
.hpbar[data-fx=wet] .hpf{background:linear-gradient(180deg,#8cc6e2,#4f93bd 60%,#3b7aa3)}
.hpbar[data-fx=wet] .hpf::after{background:repeating-linear-gradient(105deg,rgba(255,255,255,.4) 0 2px,transparent 2px 15px);animation:hpwave 1.2s linear infinite}
.hpbar[data-fx=wet]{border-color:#2f5f80}
@keyframes hpwave{to{background-position:30px 0}}
.hpbar[data-fx=frozen] .hpf{background:linear-gradient(180deg,#f2fafd,#bfe3ef 50%,#8cc6db)}
.hpbar[data-fx=frozen] .hpf::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 2 L12 10 L9 17 L16 23'/%3E%3Cpath d='M12 10 L22 8 L30 15'/%3E%3Cpath d='M30 15 L27 22'/%3E%3Cpath d='M36 1 L33 7 L40 9'/%3E%3C/g%3E%3Cg fill='none' stroke='%236fa8c0' stroke-width='.8'%3E%3Cpath d='M22 8 L24 2'/%3E%3Cpath d='M9 17 L2 20'/%3E%3C/g%3E%3C/svg%3E") 0 0/40px 24px,linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%) -80px 0/80px 100% no-repeat;animation:hpfrost 1.8s ease-in-out infinite}
.hpbar[data-fx=frozen]{border-color:#4f8aa3;box-shadow:0 0 0 2px #d8eaf0}
.hpbar[data-fx=frozen] .hpn{color:#1f1c1d;text-shadow:0 1px 0 #fbfaf6}
@keyframes hpfrost{to{background-position:0 0,240px 0}}
.hpbar::after,.hpbar::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}
.hpbar.s-shock::after{opacity:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpath d='M0 12 L5 7 L9 14 L14 5 L19 16 L24 8 L28 13 L33 6 L37 14 L40 12' fill='none' stroke='%23a9e2f5' stroke-width='5' stroke-opacity='.45' stroke-linejoin='round'/%3E%3Cpath d='M0 12 L5 7 L9 14 L14 5 L19 16 L24 8 L28 13 L33 6 L37 14 L40 12' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/40px 24px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpath d='M0 8 L7 13 L12 6 L18 15 L25 9 L31 16 L36 10 L40 8' fill='none' stroke='%23f4dc6a' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/40px 24px repeat-x;animation:hparc .12s steps(3) infinite}
.hpbar.s-shock{border-color:#2f5f80;box-shadow:0 0 0 2px #a9e2f5,0 0 12px 2px rgba(169,226,245,.8)}
.hpbar.s-shock .hpf{background:linear-gradient(180deg,#3d6f95,#1f3f5c);filter:none}.hpbar.s-shock .hpf::after{background:none}
@keyframes hparc{0%{background-position:0 0,13px 0;opacity:1}50%{background-position:-17px 0,-9px 0;opacity:.6}100%{background-position:-29px 0,21px 0;opacity:1}}
.hpbar.s-blind::before{opacity:1;background:radial-gradient(ellipse 22px 12px at 30% 55%,rgba(240,243,242,.95),transparent 72%) 0 0/60px 24px,radial-gradient(ellipse 26px 11px at 70% 40%,rgba(212,218,220,.9),transparent 72%) 0 0/90px 24px;animation:hpfog 3s linear infinite}
@keyframes hpfog{to{background-position:70px 0,-90px 0}}
.hpbar.s-thorns{border-color:#3f5a2f;box-shadow:0 0 0 2px #b6d39f,0 0 0 4px #3f5a2f}
@media (prefers-reduced-motion:reduce){.hpbar .hpf,.hpbar .hpf::after,.hpbar::after,.hpbar::before{animation:none!important}}

/* poison drips on their own layer, sized to the health fill, so they show over burn, wet or frozen too */
.hpbar .hpp{position:absolute;left:0;top:0;bottom:0;pointer-events:none;display:none;transition:width .12s;
  background:radial-gradient(circle 5px at 50% 0,#6c8f0c 90%,transparent) 0 -2px/12px 9px repeat-x,radial-gradient(ellipse 3px 5px at 50% 50%,#9bc919 55%,#4d6b0c 90%,transparent) 0 0/15px 24px repeat;animation:hpdrip 1.4s linear infinite}
.hpbar.s-poison:not([data-fx=poison]) .hpp{display:block}
.hpbar.s-poison:not([data-fx=poison]){box-shadow:0 0 8px 1px rgba(182,224,74,.7)}
@media (prefers-reduced-motion:reduce){.hpbar .hpp{animation:none}}
/* the bar's state painted by its shader (hpfx.js), under the number: the drawn textures above step aside for it */
.hpbar canvas.hpfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
:root:not(.nogl) .hpbar.hfx .hpf::after{background:none!important}
:root:not(.nogl) .hpbar.hfx::before,:root:not(.nogl) .hpbar.hfx::after{opacity:0!important}
:root:not(.nogl) .hpbar.hfx .hpp{display:none!important}

/* burn and poison ticks: a short brightness pulse, not the white hit flash, so the status look stays readable */
.hpbar.tick{animation:hptick .25s}
@keyframes hptick{40%{filter:brightness(1.3)}}

/* dragging a card off the board removes it (Chess's shelf sends it to the bench, or sells it, instead) */
.homeboard[data-out].dropout::after{content:attr(data-out)!important}
.boardwrap,.pzboard,.homeboard{position:relative}
.boardwrap.dropout,.pzboard.dropout,.homeboard.dropout{border-style:dashed;border-color:#c4513e}
.boardwrap.dropout::after,.pzboard.dropout::after,.homeboard.dropout::after{content:'Release to remove';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;
  font:600 16px var(--display);color:#fbfaf6;background:#c4513e;border:2px solid #1f1c1d;border-radius:6px;padding:3px 10px;white-space:nowrap}
.boardwrap .card.dragging.out,.pzboard .card.dragging.out,.homeboard .card.dragging.out,.row.rgdrop .card.dragging.out{opacity:.6;filter:grayscale(.6);outline:3px dashed #c4513e;outline-offset:2px}
.boardwrap:has(.dragging),.pzboard:has(.dragging),.homeboard:has(.dragging){z-index:20}

/* board screen: the board stays pinned while the collection scrolls under it */
.bdhead{position:sticky;top:0;z-index:15;background:var(--page);margin:-18px -16px 0;padding:18px 16px 4px;box-shadow:0 6px 8px -6px rgba(31,28,29,.25)}
/* dragging a thing from the collection onto the board */
#coll .tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tile.lifting,.card.lifting{opacity:.35}
.tghost{position:fixed;left:0;top:0;z-index:60;width:62px;height:118px;pointer-events:none;filter:drop-shadow(0 10px 6px rgba(31,28,29,.35))}
.tghost.L{width:178px}
.tghost .card{height:100%}
/* a Chess bench thing held away from the shelf and bench: what letting go does */
.tghost[data-away] .card{opacity:.75}
.tghost[data-away]::after{content:attr(data-away);position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;
  font:600 14px var(--display);color:#fbfaf6;background:#c4513e;border:2px solid #1f1c1d;border-radius:6px;padding:3px 10px}
.boardwrap.dropin,.pzboard.dropin,.homeboard.dropin{border-style:dashed;border-color:#5f8a3a;box-shadow:0 0 0 3px #b6d39f}
.boardwrap.nofit,.pzboard.nofit,.homeboard.nofit{border-style:dashed;border-color:#c4513e}
.boardwrap.nofit::after,.pzboard.nofit::after,.homeboard.nofit::after{content:attr(data-why);position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;z-index:8;pointer-events:none;
  font:600 14px var(--display);color:#fbfaf6;background:#c4513e;border:2px solid #1f1c1d;border-radius:6px;padding:3px 10px;max-width:90%;text-align:center}

/* live holofoil (js/holo.js) sits exactly over the illustration; the CSS stripes are the fallback */
.bpane .glholo{position:absolute;z-index:0;pointer-events:none;display:block}
.bpane.glfoil .holo{display:none}

/* the detail card leans a little toward the pointer while the foil follows it */
#sheet .big{transition:transform .2s ease-out;transform-origin:50% 40%}
/* a thing's details in a sheet: its picture on the left beside its name, tags, rules, what it's strong and weak against
   and its lore; the keywords explained run full width underneath. The reveals (a pack's cards, a reward, a fusion)
   keep the picture on top, where the art is the moment */
#sheet .big{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr}
#sheet .big .bbody{display:contents}
#sheet .big .bpane,#sheet .big.L .bpane{grid-column:1;grid-row:1 / 6;aspect-ratio:auto;min-height:132px;border-bottom:0;border-right:2px solid #1f1c1d;display:grid;place-items:center;padding:8px}
#sheet .big .bname{grid-column:2;padding:10px 12px 0;font-size:22px}
#sheet .big .tags{grid-column:2;margin:6px 12px 6px}
#sheet .big .tag{font-size:12px}
#sheet .big .rules{grid-column:2;padding:0 12px;font-size:17px}
#sheet .big .mu,#sheet .big .flav{grid-column:2;margin-left:12px;margin-right:12px}
#sheet .big .flav{align-self:start;margin-bottom:10px}
#sheet .big .gl{grid-column:1 / -1;margin:0;padding:7px 12px 10px;border-top:2px solid #1f1c1d}
/* a large thing's picture is wide: it runs across the top of its details at its own shape, uncropped, with the name,
   tags, rules and lore underneath. A rank reward's card keeps its full-bleed look */
#sheet .big.L:not(.fb){grid-template-columns:minmax(0,1fr);grid-template-rows:none}
#sheet .big.L:not(.fb) .bpane{grid-row:auto;aspect-ratio:728/408;min-height:0;padding:0;border-right:0;border-bottom:2px solid #1f1c1d}
#sheet .big.L:not(.fb) .bpane .art{width:100%;height:100%}
#sheet .big.L:not(.fb) .bbody > *{grid-column:1 / -1}

.card .pane .glholo{position:absolute;z-index:0;pointer-events:none;display:block}
/* a Rare or Legendary small card's foil (cardfx.js): light laid over its picture and dodged into it */
.tile:not(.fb) .tpane{position:relative}
.card .pane canvas.cardfx,.tile .tpane canvas.cardfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:color-dodge;z-index:1}
:root:not(.nogl) :is(.card.cfx > .pane,.tile.cfx > .tpane) > svg.art{filter:saturate(1.12)}

/* ---------- rank promotion sequence ---------- */
.promo-seq,.rw-seq{width:min(340px,calc(92vw / var(--zv)));display:flex;flex-direction:column;align-items:stretch;flex:none;margin:auto 0}
.ladder{position:relative;display:flex;flex-direction:column;gap:5px;padding:2px 0}
.pl-track{position:absolute;left:72px;top:26px;bottom:26px;width:4px;border-radius:2px;background:rgba(243,237,224,.16)}
.pl-fill{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:2px;background:linear-gradient(to top,#e2b54a,#f2d27a);box-shadow:0 0 10px rgba(242,193,78,.7)}
.pl-row{position:relative;display:flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 50px;border-radius:10px;border:2px solid transparent;opacity:.5;transition:opacity .35s,background .35s,border-color .35s}
.pl-row.done{opacity:.85}
.pl-row.here{opacity:1;background:rgba(243,237,224,.08);border-color:rgba(243,237,224,.28)}
.pl-ico{position:relative;z-index:1;width:42px;height:42px;flex:none;border:2px solid #f3ede0;border-radius:8px;overflow:hidden;background:#c9adae}
.pl-ico .art{width:100%;height:100%}
.pl-row.pass .pl-ico{animation:plpass .5s ease-out}
.pl-row.reached .pl-ico{animation:plreach .75s cubic-bezier(.2,1.7,.4,1);box-shadow:0 0 0 3px #f2c14e,0 0 22px 6px rgba(242,193,78,.75)}
.pl-row.reached{border-color:#f2c14e;background:rgba(242,193,78,.12)}
@keyframes plpass{40%{transform:scale(1.25)}}
@keyframes plreach{0%{transform:scale(.6) rotate(-10deg)}60%{transform:scale(1.35) rotate(4deg)}100%{transform:none}}
.pl-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.pl-name b{font-size:19px;color:#f3ede0}
.pl-name small{font-family:var(--hand);font-size:15px;color:#bdb3a4}
.pl-rw{position:relative;width:27px;height:40px;flex:none;border:1.5px solid #e2b54a;border-radius:4px;overflow:hidden;background:#1f1c1d;filter:saturate(.25) brightness(.6)}
.pl-rw .art{width:100%;height:100%}
.pl-rw.got{filter:none}
.pl-rw.none{border:0;background:none}
.pl-rw.glow{filter:none;animation:rwglow .8s ease-in-out infinite alternate}
@keyframes rwglow{from{box-shadow:0 0 0 2px #f2c14e,0 0 6px 2px rgba(242,193,78,.5);transform:scale(1)}to{box-shadow:0 0 0 2px #f2c14e,0 0 18px 6px rgba(242,193,78,.9);transform:scale(1.12)}}
.pl-me{position:absolute;left:0;top:0;z-index:2;transform:translateY(-50%);font:700 13px/1 var(--display);color:#1f1c1d;background:#f2c14e;border:2px solid #1f1c1d;border-radius:6px;padding:4px 6px}
.pl-me::after{content:'';position:absolute;right:-8px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:7px solid #1f1c1d;border-right:0}
.pl-rating{text-align:center;margin-top:12px;font-size:16px;color:#d7cdbb}
.pl-rating b{font:700 30px/1 var(--display);color:#f3ede0;margin-right:4px}
.pl-title{text-align:center;font:600 20px/1.1 var(--display);color:#d7cdbb;margin:8px 0 0;opacity:0}
.pl-title b{display:block;font-size:40px;color:#f2c14e;text-shadow:0 3px 0 #1f1c1d}
.pl-title.on{animation:pltitle .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes pltitle{0%{opacity:0;transform:scale(1.8)}100%{opacity:1;transform:none}}
.pl-acts .btn{width:100%;margin-top:14px;animation:fzIn .3s both}
/* the rank card itself */
.rw-seq{align-items:center}
.rw-card{position:relative;width:min(250px,calc(62vw / var(--zv)));aspect-ratio:5/7.6;margin-top:4px;transform-style:preserve-3d;transition:transform .2s ease-out;animation:rwdrop .6s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes rwdrop{from{transform:translateY(-70vh) rotate(-10deg)}}
.rw-rays{position:absolute;inset:-17% -22%;z-index:-1;opacity:0;transition:opacity .5s}
.rw-rays .burst{display:block;position:static;width:100%;height:100%}
.rw-seq.open .rw-rays{opacity:.85;animation:rwspin 14s linear infinite}
@keyframes rwspin{to{transform:rotate(360deg)}}
.rw-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.rw-flip.flipped{transform:rotateY(180deg)}
.rw-flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rw-flip .ffront{transform:rotateY(180deg)}
.rw-flip .ffront .big{height:100%}
.rw-card.charge .rw-flip{animation:charge .07s linear infinite}
.rw-msg{font:700 34px/1.05 var(--display);text-align:center;margin:22px 0 2px;color:#f3ede0;opacity:0}
.rw-more{font-family:var(--hand);font-size:18px;text-align:center;color:#d7cdbb;margin:2px 0 0;opacity:0}
.rw-seq .btn{width:100%;margin-top:16px;opacity:0;pointer-events:none}
.rw-seq.open .rw-msg{animation:fzIn .35s .1s both}
.rw-seq.open .rw-more{animation:fzIn .35s .25s both}
.rw-seq.open .btn{animation:fzIn .35s .5s both;pointer-events:auto}
.cfwrap{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.cf{position:absolute;top:-14px;left:var(--x);width:8px;height:12px;background:var(--c);border:1px solid #1f1c1d;transform:scale(var(--s));animation:cffall var(--d) cubic-bezier(.3,.1,.7,1) var(--w) forwards}
@keyframes cffall{to{transform:translateY(calc(110vh / var(--zv))) rotate(var(--r)) scale(var(--s))}}
@media (prefers-reduced-motion:reduce){.rw-seq.open .rw-rays{animation:none}.cf{display:none}}
.fuse-ov:has(.promo-seq),.fuse-ov:has(.rw-seq){background:radial-gradient(ellipse at 50% 35%,#2e2a26,#141211 70%)}
.rw-seq .rw-kicker,.promo-seq .rw-kicker{position:relative;z-index:2}
.rw-seq .rw-kicker{margin-bottom:26px}
.rw-msg{position:relative;z-index:2;margin-top:34px}

/* fusion with more copies: smaller tiles in a row, each converging on the result (--dx set per tile) */
.fz-trio.n5{left:-12%;right:-12%;top:30%}
.fz-trio.n5 .fc{width:19%}

/* home: the board is the big thing (full cards), the rank a compact strip under it */
.homeboard{background:var(--you);border:2px solid var(--ink);border-radius:10px;padding:8px;margin-top:8px}
.homeboard .row{--rowh:150px}
.homeboard .card{cursor:pointer}
.rankstrip{display:flex;align-items:center;gap:10px;width:100%;margin:4px 0 16px;padding:7px 10px 7px 7px;border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.rankstrip .rkico{width:38px;height:38px;flex:none;border:2px solid var(--ink);border-radius:7px;overflow:hidden;background:#c9adae;padding:2px}
.rankstrip .rkico .art{width:100%;height:100%}
.rankstrip .rkmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rankstrip .rkrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.rankstrip .rkrow b{font-size:18px}
.rankstrip .rkrow.sub{font-size:13px;color:var(--sub)}
.rankstrip .bar{display:block;margin:0;height:7px}
.rankstrip .rkgo{font:700 24px/1 var(--display);color:var(--sub)}
.homeboard + div{margin-bottom:18px}

/* rank rivals */
.vstaunt{font-family:var(--hand);font-size:19px;color:#5d564f;margin:2px 0 4px}

/* ---------- battle report ---------- */
.mvpline{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 2px;padding:8px 10px;background:var(--raise);color:var(--text);border:var(--lw) solid var(--line);border-radius:10px;font:inherit;text-align:left;cursor:pointer}
.mvpline .rrart{width:40px;height:40px;flex:none}
.mvpline .rrart svg{width:100%;height:100%}
.mvpline > span:nth-child(2){flex:1;min-width:0;font-size:17px;line-height:1.15}
.mvpline small{display:block;font-family:var(--hand);font-size:15px;color:var(--sub)}
.mvpline em,.rr em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--gold);color:#1f1c1d;border:1.3px solid #1f1c1d;border-radius:4px;padding:0 4px;margin-right:4px;vertical-align:2px}
.mvpline .go{font-size:15px;white-space:nowrap;margin-left:auto;color:var(--sub)}
.mvpline .nkw{font-style:normal;font-size:11px;font-weight:600;background:var(--accent);color:#fffaf0;border:1.3px solid #1f1c1d;border-radius:4px;padding:0 4px;vertical-align:2px}
.rph{margin:14px 0 6px;font-size:15px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.rph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.rph>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rph .rdealt{flex:none;text-transform:none;letter-spacing:0;font-size:15px;color:var(--sub);display:inline-flex;align-items:center;gap:3px}
.rph .rdealt b{font-size:20px;font-weight:700;color:var(--text)}
.rbar{height:8px;border:1.5px solid var(--ink);border-radius:5px;background:var(--page);overflow:hidden;margin-bottom:8px}
.rbar i{display:block;height:100%;background:var(--hp);animation:rbarin .7s .15s cubic-bezier(.3,.7,.3,1) both}
.rbar.foe i{background:#b5452f}
@keyframes rbarin{from{width:0}}
.rlist{display:flex;flex-direction:column;gap:6px}
.rr{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--raise);border:var(--lw) solid var(--line);border-left:6px solid var(--k);border-radius:8px}
.rr.mvp{box-shadow:0 0 0 2px var(--gold) inset}
.rr .rrart{width:38px;height:38px;flex:none}
.rr .rrart svg{width:100%;height:100%}
.rr .rrb{flex:1;min-width:0}
.rr .rrn{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.rr .rrn b{font-weight:500;font-size:16px}
.rr .rrn span{font-family:var(--hand);font-size:14px;color:var(--sub);white-space:nowrap}
.rr .rrs{display:flex;flex-wrap:wrap;gap:2px 10px;font-family:var(--hand);font-size:15px;line-height:1.25}
.rr .rrs span{display:inline-flex;align-items:center;gap:3px}
.rr .rrs .glyph{width:15px;height:15px;flex:none}
.rr .rrs .none{color:var(--sub)}
.newkw{background:var(--you);border:var(--lw) solid var(--line);border-radius:10px;padding:8px 10px;margin:4px 0 4px}
.newkw b{display:block;font-weight:500;font-size:15px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.newkw div{display:flex;gap:6px;align-items:flex-start;font-family:var(--hand);font-size:16px;line-height:1.25;margin-top:3px}
.newkw .glyph{width:18px;height:18px;flex:none;margin-top:1px}

/* ---------- starter pack and first matches ---------- */
.packs.first{min-height:240px}
.minipack.starter{width:158px;transform:rotate(-3deg);animation:starterbob 2.4s ease-in-out infinite}
@keyframes starterbob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.minipack.starter{animation:none}}
.sumboard{margin:4px 0 2px}
.summary .scombo{margin:8px 2px 10px;font-size:17px;min-height:21px}
.summary .scombo b{color:#f2c14e;font-weight:400}
.coach{border:2px dashed #f2c14e;border-radius:10px;padding:10px 12px;margin:0 0 4px;color:#f3ede0;font-size:16px;line-height:1.3;background:rgba(242,193,78,.08)}
.coach b{color:#f2c14e}
.coach.done{border-style:solid;background:rgba(242,193,78,.16);animation:coachdone .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes coachdone{from{transform:scale(.94)}}
.tile.coachme{animation:coachme 1.4s ease-in-out infinite;box-shadow:0 0 0 3px #f2c14e}
.summary .tile.coachme.dealt{animation:dealin .45s cubic-bezier(.2,1.5,.4,1) both,coachme 1.4s ease-in-out .6s infinite}
@keyframes coachme{50%{transform:translateY(-4px);box-shadow:0 0 0 3px #f2c14e,0 0 14px 4px rgba(242,193,78,.55)}}
.card.combopop{animation:combopop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes combopop{30%{transform:translateY(-10px) scale(1.08)}}
.firsttip{font-family:var(--hand);font-size:17px;line-height:1.25;margin:8px 0 0;padding:6px 10px;border:var(--lw) dashed var(--line);border-radius:8px;color:var(--text)}
.mvpline.nudge{animation:nudge 1.6s ease-in-out 3 .6s}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(224,96,63,0)}50%{box-shadow:0 0 0 4px rgba(224,96,63,.55)}}

/* ---------- updates and what's new ---------- */
.updbar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 0 10px;padding:9px 12px;background:var(--ink);color:#fbfaf6;border:0;border-radius:10px;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.updbar b{flex:none;font-weight:500;background:var(--accent);color:#fffaf0;border-radius:6px;padding:4px 10px}
/* a guest's prompt to keep their progress with Google (game.js saveBarHTML): the same bar, with a Not now cross */
.savebar{display:flex;align-items:stretch;gap:0;margin:0 0 10px;background:var(--raise);border:1.5px solid var(--ink);border-radius:10px;overflow:hidden}
.savebar .savego{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 6px 9px 12px;background:none;border:0;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.savebar .savego b{flex:none;font-weight:500;background:var(--accent);color:#fffaf0;border-radius:6px;padding:4px 10px}
.savebar .savex{flex:none;width:40px;display:grid;place-items:center;background:none;border:0;color:var(--sub);cursor:pointer}
.savebar .savex svg{width:18px;height:18px}
.dhub .savebar{grid-column:1 / -1}
:root[data-theme="dark"] .updbar{background:#fbfaf6;color:#1f1c1d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .updbar{background:#fbfaf6;color:#1f1c1d}}
.news{border:var(--lw) solid var(--line);border-radius:10px;background:var(--raise);padding:10px 12px;margin-bottom:8px}
.news .nhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.news .nhead b{font-weight:500;font-size:17px}
.news .nhead span{font-family:var(--hand);font-size:14px;color:var(--sub)}
.news ul{margin:6px 0 0;padding-left:18px;font-family:var(--hand);font-size:16px;line-height:1.3}
.news li+li{margin-top:4px}
.tile .tslots{position:absolute;left:calc(var(--fw,3px) + 2px);bottom:4px;background:rgba(251,250,246,.92);color:#1f1c1d;border:1.3px solid #1f1c1d;border-radius:4px;font-size:11px;font-weight:600;padding:0 4px;line-height:15px}
.tile .tmeta span:last-child{text-align:right}

/* ---------- title screen ---------- */
/* the tops of the letters line up with the top of the menu button (the line box starts .07em above the ink) */
#title .title{font-size:clamp(54px,calc(17vw / var(--zv)),84px);margin-top:-.07em}
/* the ink drop shadow is on each word and on the foil canvas rather than the heading, so words that fly about don't
   make the browser redraw it every frame */
#title .title span,#title .title canvas{filter:drop-shadow(0 3px 0 rgba(31,28,29,.8))}
/* a gold glint sweeps across the title now and then, a line at a time; between sweeps it sits off to the side */
#title .title span{--ink:var(--sky-ink,var(--text));background:linear-gradient(105deg,var(--ink) 42%,#e2b54a 47%,#fff4cf 50%,#e2b54a 53%,var(--ink) 58%) 0 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:titleshine 5.5s ease-in-out 1s infinite}
#title .title span:nth-child(2){animation-delay:1.14s}
/* attack in the splash screen's red; --ink is also the colour the foil shader inks each line in */
#title .title span:nth-child(3){animation-delay:1.28s;--ink:var(--accent)}
@keyframes titleshine{0%{background-position:100% 0}26%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){#title .title span{animation:none}}
/* with the foil shader drawing the title (titlefx.js), the heading's own letters keep the layout but stay unseen */
#title .title.glshine span{animation:none;background:none;-webkit-text-fill-color:transparent;color:transparent}
.modes{display:grid;gap:12px;margin-top:28px}
.mode{display:flex;align-items:center;gap:14px;width:100%;padding:14px 14px 14px 12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);color:var(--text);text-align:left;font:inherit;cursor:pointer;box-shadow:0 5px 0 var(--drop);transition:transform .08s,box-shadow .08s;position:relative}
.mode:active{transform:translateY(3px);box-shadow:0 2px 0 var(--drop)}
.mode.ranked{background:var(--you)}
.mode.puzzle{background:#dce8f1}
:root[data-theme="dark"] .mode.puzzle{background:#2c363b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.puzzle{background:#2c363b}}
.mode .mart{width:58px;height:58px;flex:none;display:grid;place-items:center}
.mode .mart svg{width:100%;height:100%}
.pzic{overflow:visible}
.pzic .pz-piece{transform-box:fill-box;transform-origin:50% 90%}
.pzic .pz-lines{transform-box:view-box;transform-origin:24px 24px}
/* Friendly's mark gets a rounded ink frame, as thick as the puzzle piece's outline beside it (2.4 of 48 at 58px) */
.mode.ranked .mart{border:3px solid #1f1c1d;border-radius:10px;overflow:hidden}
/* the other modes' marks sit on tiles framed the same way, each in a lighter tone of its card */
.mode .mart.mt{border:3px solid #1f1c1d;border-radius:10px;background:var(--mt)}
.mode .mart.mt svg{width:82%;height:82%}
.mode.market{--mt:#e3bfa7}.mode.puzzle{--mt:#eef4f8}.mode.camp{--mt:#f0d9a0}.mode.chess{--mt:#c9d2ae}.mode.range{--mt:#cfe0b8}
/* the marks come alive on the home screen: every 8 seconds each one does its own little thing for about a second, one
   after another down the list (Friendly's front card tips up, Ranked's medal swings, the puzzle piece hops, the
   campaign's trail marches to its waving flag, Highlander's sword hops, a dart thunks into the range's target).
   Locked modes keep still, and so does everything with reduced motion */
.mode{--md:0s}
.mode.ranked{--md:.4s}.mode.market{--md:1.7s}.mode.puzzle{--md:3s}.mode.camp{--md:4.3s}.mode.chess{--md:5.6s}.mode.range{--md:6.9s}
.mode .fr-front,.mode .fr-back,.mode .rg-board,.mode .rg-dart,.mode .cp-flag{transform-box:view-box}
.mode .fr-front{transform-origin:30px 40px}.mode .fr-back{transform-origin:16px 40px}
.mode .rg-board{transform-origin:22px 26px}.mode .rg-dart{transform-origin:22px 26px}.mode .cp-flag{transform-origin:33px 10.5px}
.mode:not(.locked) .fr-front{animation:idfront 8s var(--md) ease-in-out infinite}
.mode:not(.locked) .fr-back{animation:idback 8s var(--md) ease-in-out infinite}
.mode.market:not(.locked) .mk-tag{animation:idswing 8s var(--md) ease-in-out infinite}
.mode.puzzle:not(.locked) .pz-piece{animation:idhop 8s var(--md) ease-out infinite}
.mode.puzzle:not(.locked) .pz-lines{animation:idburst 8s var(--md) ease-out infinite}
.mode.camp:not(.locked) .cp-trail{animation:idmarch 8s var(--md) linear infinite}
.mode.camp:not(.locked) .cp-flag{animation:idwave 8s var(--md) ease-in-out infinite}
.mode.chess:not(.locked) .tc-pawn{animation:idsword 8s var(--md) cubic-bezier(.3,.7,.4,1.4) infinite}
.mode.range:not(.locked) .rg-dart{animation:iddart 8s var(--md) ease-in infinite}
.mode.range:not(.locked) .rg-board{animation:idthunk 8s var(--md) ease-out infinite}
@keyframes idfront{0%,14%,100%{transform:none}5%{transform:translate(2px,-4px) rotate(8deg)}10%{transform:translateY(-1px) rotate(-2deg)}}
@keyframes idback{0%,14%,100%{transform:none}5%{transform:translate(-1px,1px) rotate(-5deg)}}
@keyframes idswing{0%,14%,100%{transform:none}4%{transform:rotate(-12deg)}8%{transform:rotate(7deg)}11%{transform:rotate(-3deg)}}
@keyframes idhop{0%,13%,100%{transform:none}4%{transform:translateY(-5px) rotate(-6deg)}8%{transform:scale(1.06,.94)}10%{transform:none}}
@keyframes idburst{0%,7%,14%,100%{opacity:0;transform:scale(.85)}9%{opacity:1;transform:scale(1.1)}}
@keyframes idmarch{0%{stroke-dashoffset:0}14%,100%{stroke-dashoffset:-10.2}}
@keyframes idwave{0%,14%,100%{transform:none}3%{transform:skewY(-12deg)}6%{transform:skewY(9deg)}9%{transform:skewY(-5deg)}12%{transform:skewY(2deg)}}
@keyframes idsword{0%,11%,100%{transform:none}5%{transform:translateY(-5px) rotate(-8deg)}}
@keyframes iddart{0%,100%{transform:none;opacity:1}1.5%,3%{transform:translate(16px,-16px);opacity:0}6%{transform:none;opacity:1}7%{transform:translate(-1px,1px)}8.5%{transform:none}}
@keyframes idthunk{0%,6%,12%,100%{transform:none}7.5%{transform:scale(.94)}9.5%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.mode :is(.fr-front,.fr-back,.mk-tag,.pz-piece,.pz-lines,.cp-trail,.cp-flag,.tc-pawn,.rg-dart,.rg-board){animation:none!important}}
.mode .mtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mode .mtxt b{font-size:26px;font-weight:700;line-height:1}
.mode .msub{font-size:15px;color:var(--sub)}
.mode small{font-family:var(--hand);font-size:16px;line-height:1.2;color:var(--text)}
.mode .mgo{font-size:28px;line-height:1;color:var(--sub)}
.mode .mcount,.mode .mnew{flex:none;background:var(--accent);color:#fffaf0;border:1.5px solid #1f1c1d;border-radius:20px;font-size:14px;font-weight:600;padding:2px 9px}
/* the lock on a mode that isn't open yet (LOCK_ICON in game.js), and on the campaign's locked levels */
.lock{flex:none;display:grid;place-items:center;width:30px;height:30px}
.lock .lockic{width:100%;height:100%;overflow:visible}
.lock .lk-shackle{transform-box:view-box;transform-origin:33px 23px}
.lock .lk-lines,.lock .lk-spark{opacity:0;transform-box:fill-box;transform-origin:center}
.lock .lk-lines{transform-box:view-box;transform-origin:24px 28px}
.mode .lock{opacity:.85}
.cprow .lock{width:24px;height:24px;opacity:.75}
.cprow .lock.lk-go{opacity:1}
.mode .mnew[hidden],.lk-after[hidden]{display:none}
.lk-after{display:contents}
.mode.first{animation:nudge 1.6s ease-in-out infinite}
/* title -> mode: the tapped card becomes a full-screen panel (see titleTo in game.js) */
/* full screen, shaped by its clip; the ink lines top and bottom are its leading edge when it wipes up or down */
.xpanel{position:fixed;inset:0;z-index:80;border-block:2.5px solid var(--ink);box-sizing:border-box;display:grid;place-items:center;align-content:center;gap:6px;overflow:hidden;pointer-events:none;will-change:clip-path,transform}
.xpanel .xrays{position:absolute;left:50%;top:50%;width:118vmin;height:118vmin;margin:-59vmin 0 0 -59vmin;opacity:0;animation:xrays .5s .3s ease-out forwards,xspin 6s linear infinite}
.xpanel .xrays .burst{display:block;position:static;width:100%;height:100%}
.xpanel .xart{position:relative;width:150px;height:150px;transform:scale(.39);animation:xart .5s .18s cubic-bezier(.3,1.5,.5,1) forwards}
.xpanel .xart svg{width:100%;height:100%}
.xpanel .xname{position:relative;font-weight:700;font-size:clamp(44px,calc(13vw / var(--zv)),76px);line-height:1;color:var(--text);opacity:0;animation:xname .32s .42s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes xart{to{transform:scale(1)}}
@keyframes xname{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
@keyframes xrays{to{opacity:1}}
@keyframes xspin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.mode.first{animation:none}}
#home .topbar .menub{margin:0}
#home .topbar #lbb{margin-left:auto}

/* ---------- daily puzzle ---------- */
.pzstars{display:inline-flex;gap:3px;flex:none}
/* stars drawn like the puzzle piece (starSVG in game.js) */
.pzstars i{width:18px;height:18px;color:var(--line)}
.pzstars i svg,.stari svg{display:block;width:100%;height:100%;overflow:visible}
.stari{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.pzstars.lg i{width:26px;height:26px}
.pzres .pzstars{margin:2px 0 4px}
.pzmeta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-family:var(--hand);font-size:16px;color:var(--sub);margin:-4px 0 10px}
.pzdiff{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:20px;padding:1px 9px;color:#1f1c1d}
.pzdiff.easy{background:#cfe3c4}.pzdiff.medium{background:#f3dca0}.pzdiff.hard{background:#f0b8a6}
/* today's three puzzles, one tab each, in their difficulty's colour, with the stars earned or the tries so far */
/* the day's three tabs and, beside them, the way to the puzzles players make: one row of buttons alike in size and weight */
.pznav{display:grid;grid-template-columns:3fr 1fr;gap:8px;margin:2px 0 12px}
.pztabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pztab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 6px 6px;border:2px solid var(--ink);border-radius:12px;background:var(--card,#fbfaf6);color:#1f1c1d;font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--ink);opacity:.8}
.pztab b{font-family:var(--display);font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.pztab small{font-size:12px;opacity:.75}
.pztab.easy{background:#e2efda}.pztab.medium{background:#f8ebc6}.pztab.hard{background:#f6d4c9}
.pztab.on{opacity:1;transform:translateY(2px);box-shadow:0 1px 0 var(--ink);outline:3px solid var(--ink);outline-offset:1px}
.pztab:focus-visible,.pzplayers:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}
.pzplayers{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 6px 6px;border:2px solid var(--ink);border-radius:12px;background:#dfe6f2;color:#1f1c1d;font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.pzplayers b{font-family:var(--display);font-size:15px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pzplayers small{font-size:12px;opacity:.75;white-space:nowrap}
.pzplayers:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media (max-width:480px){.pznav{grid-template-columns:1fr}.pzplayers{flex-direction:row;gap:8px;padding:8px}}
.pzstarsum{font-family:var(--display);font-weight:600;font-size:17px;white-space:nowrap}
.pzstarsum i{color:#e2a72c;font-style:normal}
.pzfoe{background:var(--foe);border:2px solid var(--ink);border-radius:10px;padding:8px}
/* the daily puzzle as the town paper's front page (js/paper.js) */
.paper{background:var(--raise);border:2px solid var(--ink);border-radius:4px;padding:10px 10px 8px;box-shadow:0 4px 0 var(--drop)}
.pmast{display:flex;flex-direction:column;align-items:center;border-top:3px double var(--line);border-bottom:3px double var(--line);padding:4px 0 3px;margin-bottom:8px}
.pmast b{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.02em;line-height:1.05;text-transform:uppercase}
.pmast span{font-family:var(--hand);font-size:14px;color:var(--sub)}
.phead{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.08;margin:0 0 8px;text-wrap:balance}
.paper .pzfoe{border-radius:2px}
.pside{font-family:var(--hand);font-size:16px;line-height:1.25;color:var(--sub);margin:8px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.pside b{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-right:6px}
.pzfoe .row{--rowh:150px}
.pzfoe .card{cursor:pointer}
.pzfn{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 2px 6px}
.pzfn b{font-size:19px;font-weight:600}
.pzfn span{font-family:var(--hand);font-size:16px;color:var(--sub)}
.pzgoal{font-family:var(--hand);font-size:17px;line-height:1.3;margin:12px 2px 6px}
.pzused{font-family:var(--hand);font-weight:400;font-size:16px;color:var(--sub)}
.pzboard{margin-bottom:10px}
/* the board pinned to the top while the things below scroll under it: clear at rest, a page-colored strip only while pinned */
.bdstick{position:sticky;top:0;z-index:15;background:transparent;margin:0 -16px 10px;padding:4px 16px 8px;transition:box-shadow .15s,background-color .15s}
.bdstick.stuck{background:var(--page);box-shadow:0 6px 8px -6px rgba(31,28,29,.25)}
.bdstick .pzboard{margin-bottom:0}
/* Fight rides with the pinned board, so it's always in reach while the things scroll under them */
.bdstick > .btn.primary{margin-top:8px}
/* (on a short screen the pinned board is a little shorter, to leave room for the things) */
@media (max-height:620px){.bdstick .homeboard .row{--rowh:112px}}
.slot-empty.locked{background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(31,28,29,.12) 6px 8px);border-style:solid;opacity:.6}
.pztry{font-family:var(--hand);font-size:16px;color:var(--sub);margin:8px 2px 4px;text-align:center}
.pzstarlist{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-family:var(--hand);font-size:15px;color:var(--sub);margin-bottom:14px}
.pzstarlist span{display:inline-flex;align-items:center;gap:4px}
.pzstarlist i{width:13px;height:13px;background:var(--line);opacity:.25;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pzstarlist .ok{color:var(--text)}
.pzstarlist .ok i{background:var(--gold);opacity:1}
.pzph{font-size:17px;font-weight:600;margin:4px 0 8px}
/* the things to build with, as cards (game.js pzCard): one used up is greyed */
.mkcell.spent .card{opacity:.45;filter:grayscale(.7)}
.mkcell.spent .mkunder{opacity:.6}
.pzused .pzclear{margin-left:6px;padding:3px 10px;font-size:13px;vertical-align:middle}
.pzside .pzfight{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.desk .pzside #pzgo{min-width:0;max-width:none;width:100%}
@media (min-width:1428px){.desk .pzside .mkcards{grid-template-columns:repeat(3,minmax(0,1fr));width:auto;gap:10px 6px;--ch:150px}}
/* (stacked under the board, the seven columns share the panel's width rather than the board's, so it never scrolls sideways) */
.desk .pzside .mkcards{grid-template-columns:repeat(7,minmax(0,1fr));width:auto}
.pzside{overflow-x:hidden}
@media (min-width:1428px){.desk .pzside .mkcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pzw{position:relative}
.pzw .tile{width:100%;height:100%}
/* the rules text: an effect's icon in front of its number */
.rv{white-space:nowrap;font-weight:600}
.rv .glyph{margin-right:1px}

/* ---------- campaign characters (people.js): the thing breathes; a win bounces, a loss wobbles ---------- */
.pp{display:inline-block;flex:none;border:2px solid #1f1c1d;border-radius:10px;overflow:hidden;background:#cdd3d1;line-height:0}
.pp .pp-svg{width:100%;height:100%;display:block}
.pp .pp-bob{transform-box:fill-box;transform-origin:50% 100%;animation:ppbob 3s ease-in-out infinite}
.pp.win .pp-bob{animation:ppgloat .7s cubic-bezier(.3,1.6,.5,1) infinite alternate}
.pp.lose .pp-bob{animation:ppwobble 1.4s ease-in-out infinite}
@keyframes ppbob{50%{transform:translateY(1.6px) scaleY(.985)}}
@keyframes ppgloat{to{transform:translateY(-3px) rotate(2deg)}}
@keyframes ppwobble{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.pp *{animation:none!important}}
.pp.sm{width:52px;height:52px;border-radius:8px}
.pp.md{width:84px;height:84px}
.pp.lg{width:118px;height:118px;border-radius:12px;border-width:2.5px}
.pp.av{width:30px;height:30px;border-radius:6px;border-width:1.6px}
.mode.camp{background:#f3e2b0}
:root[data-theme="dark"] .mode.camp{background:#3a3326}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.camp{background:#3a3326}}
.mode .cpst,.cpst{flex:none;font-size:15px;font-weight:600;color:var(--sub);white-space:nowrap}

/* ---------- friends ---------- */
.mode.friends{background:#e4dcef}
:root[data-theme="dark"] .mode.friends{background:#332e3b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.friends{background:#332e3b}}
/* two things side by side, one leaning on the other */
.frico{position:relative;display:block;width:58px;height:58px}
.xart .frico{width:100%;height:100%}
.frico>span{position:absolute;width:66%;height:66%;border:2px solid var(--ink);border-radius:8px;background:#fbf6ea;padding:2px;overflow:hidden}
.frico>span:first-child{left:0;top:2px;transform:rotate(-8deg)}
.frico>span:last-child{right:0;bottom:2px;transform:rotate(7deg)}
.frico .art{--lw:1.2px}
.frnew{display:flex;justify-content:center}
.frnew .frico{width:88px;height:88px}
.frinv{display:grid;gap:4px;margin:6px 0 14px}
.frinv .acct-p{margin:0}
.frh{margin:16px 0 8px;font-size:20px}
.frlist{display:grid;gap:6px}
.frrow{display:flex;align-items:center;gap:8px}
.frrow .lbrow{flex:1;min-width:0}
.frrow .btn{flex:none}
.inrow{border:2px solid var(--ink);background:var(--raise);border-radius:10px;padding:8px 8px 8px 12px}
.inrow.new{background:var(--you);box-shadow:0 3px 0 var(--drop)}
.frtxt{flex:1;min-width:0;display:grid;line-height:1.15}
.frtxt b{font-family:var(--hand);font-size:19px;font-weight:400}
.frtxt small{font-size:13px;color:var(--sub)}
.frinv .row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.frinv .row2 .btn.small{width:auto}
.frnewc,.frcount{display:inline-block;vertical-align:middle;margin-left:4px;font:600 12px/1 var(--display);padding:4px 7px;border-radius:999px}
.frnewc{background:#c4513e;color:#fbfaf6}
.frcount{background:var(--raise);border:1.5px solid var(--line);color:var(--sub)}
.frmore{display:block;margin:8px auto 0;font-size:14px}
/* how a fight went: a small stamp on challenges and on a friend's last fights */
.frres{flex:none;font:600 11.5px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;border-radius:5px;border:1.5px solid #1f1c1d;color:#1f1c1d}
.frres.won{background:#b6d39f}.frres.lost{background:#efb2a4}.frres.drew{background:#e6dcc0}
/* a friend's sheet: their nameplate, three numbers, your last fights and their board */
.frplate{margin-bottom:12px}
.frstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px}
.frstats div{display:grid;justify-items:center;gap:2px;border:2px solid var(--line);border-radius:8px;background:var(--raise);padding:7px 4px}
.frstats b{font:600 20px/1 var(--display)}
.frstats small{font-size:12px;color:var(--sub)}
.frsub{margin:12px 0 6px;font-size:16px}
.frlast{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.frlast li{display:flex;align-items:center;gap:8px;font-size:14px}
.frlast li span:nth-child(2){flex:1;min-width:0}
.frlast li small{color:var(--sub);font-size:12.5px}
/* friend codes */
.frcodebig{margin:10px 0 4px;text-align:center;font:600 32px/1.1 var(--display);letter-spacing:.08em;padding:12px;border:2px dashed var(--line);border-radius:10px;background:var(--raise);user-select:all}
.frcodein{display:block;width:100%;box-sizing:border-box;margin:10px 0 4px;padding:12px;font:600 24px/1 var(--display);letter-spacing:.08em;text-align:center;text-transform:uppercase;border:2px solid var(--line);border-radius:10px;background:var(--raise);color:var(--text)}

/* ---------- campaign map and levels ---------- */
/* each chapter is a card on paper, as the desktop's chapter is: a header band (its number in a circle that says how it
   stands, its name, its stars), then its blurb, bonus pack and levels. The band is gold for the chapter being played,
   grey while locked */
.cpch{margin:0 0 12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);box-shadow:0 4px 0 var(--drop);overflow:hidden}
.cpch > :not(.cphd){margin-left:12px;margin-right:12px}
.cpch > :last-child{margin-bottom:12px}
/* the campaign's top bar stays at the top of the screen while the chapters scroll under it */
.cphd{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fbf3dc;color:#1f1c1d;border-bottom:2.5px solid var(--ink);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.cpch.here .cphd{background:#f3e2b0}
.cpch.shut .cphd{background:#ddd6c8}
.cphd .cpnum{flex:none;width:30px;height:30px;display:grid;place-items:center;border:2.5px solid #1f1c1d;border-radius:50%;background:#fbf3dc;font:700 15px/1 var(--display)}
.cpch.here .cphd .cpnum{background:#f2c14e}
.cpch.done .cphd .cpnum{background:#5f8a4e;color:#fbfaf6}
.cpch.shut .cphd .cpnum{background:#c9c2b4}
.cphd .cpst{margin-left:auto;display:flex;align-items:center;gap:4px;color:#5d564f}
.cphd .stari,#camp .topbar .stari,.mode .cpst .stari{width:24px;height:24px;vertical-align:0}
.mode .cpst{display:flex;align-items:center;gap:4px}
#camp .topbar .cpst{display:flex;align-items:center;gap:4px}
.cphd:focus-visible{outline:3px solid #f2c14e;outline-offset:-5px;border-radius:12px}
/* a folded chapter is just its header band (and, while locked, how to open it) */
.cpch.fold{margin:0 0 8px}
.cpch.fold .cplist,.cpch.fold:not(.shut) .cpblurb{display:none}
.cpch.fold:not(.shut) .cphd{border-bottom:0}
.cpch.fold .cpblurb{margin-top:8px;margin-bottom:10px}
.cphd h3{margin:0;min-width:0;font-size:20px;font-weight:700;line-height:1.1}
.cpblurb{font-family:var(--hand);font-size:17px;color:var(--sub);margin:10px 0 10px}
.cpch > .cppack{margin-top:0;margin-bottom:12px}
.cplist{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cprow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 12px 8px 8px;border:2px solid var(--ink);border-radius:12px;background:var(--raise);color:var(--text);box-shadow:0 3px 0 var(--drop)}
.cprow:active{transform:translateY(2px);box-shadow:0 1px 0 var(--drop)}
.cprow .cpn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cprow .cpn small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.cprow .cpn b{font-size:19px;font-weight:700;line-height:1.05}
.cprow .cpn span{font-family:var(--hand);font-size:15px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cprow.here{background:#f3e2b0;color:#1f1c1d;animation:nudge 1.8s ease-in-out infinite}
.cprow.here .cpn small,.cprow.here .cpn span{color:#5d564f}
.cprow.locked{opacity:.55;box-shadow:none}
.cprow.locked .pp{filter:grayscale(1)}
.cprow.boss{border-width:2.5px}
.cprow.boss .pp{width:60px;height:60px}
.cpch .cplist{transition:opacity .4s}
.cpch.shut .cplist{opacity:.8}
.cphd .lock{width:24px;height:24px;margin-left:auto;align-self:center}
.cphd .lock + .cpst,.cphd .lk-after + .cpst,.cphd :is(.lock,.lk-after) + .cphpk{margin-left:0}
.cphero{display:flex;align-items:flex-end;gap:12px;margin:2px 0 12px}
.cpsay{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cpbubble{position:relative;background:#fbfaf6;color:#1f1c1d;border:2px solid #1f1c1d;border-radius:14px;padding:9px 12px;font-family:var(--hand);font-size:19px;line-height:1.2;animation:ppsay .4s cubic-bezier(.2,1.6,.4,1) both}
.cpbubble::before{content:'';position:absolute;left:-11px;bottom:12px;border:9px solid transparent;border-right-color:#1f1c1d;border-left:0}
.cpbubble::after{content:'';position:absolute;left:-7px;bottom:14px;border:7px solid transparent;border-right-color:#fbfaf6;border-left:0}
@keyframes ppsay{from{transform:scale(.6) translateX(-20px);opacity:0}}
.cpwho{display:flex;flex-direction:column}
.cpwho b{font-size:20px;font-weight:700;line-height:1.05}
.cpwho span{font-family:var(--hand);font-size:16px;color:var(--sub)}
.cprule{display:inline-block;font-family:var(--display);font-size:14px;font-weight:600;background:#f3e2b0;color:#1f1c1d;border:1.5px solid #1f1c1d;border-radius:20px;padding:1px 10px;margin-right:4px}
.vspp{display:flex;justify-content:center;margin-bottom:8px}
.cpres .cpsay.res,.res .cpsay.res{flex-direction:row;align-items:center;gap:10px;margin:10px 0 4px}
.cpres .pzstars{margin:2px 0 4px}
.whotop .pp.av{background:#cdd3d1}

/* ---------- the campaign's way in: the next character's whole scene fills the panel and they rise into it ---------- */
/* the character takes the bottom of the panel but always leaves room above for the chapter, title and speech bubble;
   dvh is the height actually on screen (vh on phones counts the part under the address bar), with vh as the fallback */
.xpanel.xcamp{display:block;--H:min(calc(118vw / var(--zv)),calc(70vh / var(--zv)),calc(calc(100vh / var(--zv)) - 280px));--H:min(calc(118vw / var(--zv)),calc(70dvh / var(--zv)),calc(calc(100dvh / var(--zv)) - 280px))}
.xcamp .xcpfig{position:absolute;left:50%;bottom:0;width:min(calc(100vw / var(--zv)),calc(var(--H) * 1.17));height:var(--H);transform:translateX(-50%);animation:xcprise .6s .3s cubic-bezier(.2,1.3,.4,1) both}
.xcamp .xcpfig .pp.xl{width:100%;height:100%;border:0;border-radius:0;background:transparent}
/* the scene's top edge fades into the backdrop colour above it, so the panel reads as one picture */
.xcamp .xcpfig::after{content:'';position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(var(--xbg,transparent),transparent);pointer-events:none}
.xcamp .xcptop{position:absolute;left:0;right:0;top:0;bottom:calc(var(--H) - 12px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,calc(2.4vh / var(--zv)),26px);padding:14px 16px 24px}
.xcamp .xcphead{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.xcamp .xcpch{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1f1c1d;display:block;width:fit-content;margin-inline:auto;padding:2px 10px;background:#fbf3dc;border:2px solid #1f1c1d;border-radius:8px;opacity:0;animation:xname .3s .5s ease-out forwards}
.xcamp .xname{color:#1f1c1d;text-shadow:0 3px 0 rgba(251,250,246,.7);font-size:clamp(38px,min(calc(13vw / var(--zv)),calc(9vh / var(--zv))),76px)}
.xcamp .xcpbubble{position:relative;width:min(calc(86vw / var(--zv)),360px);background:#fbfaf6;color:#1f1c1d;border:2.5px solid #1f1c1d;border-radius:16px;padding:12px 16px;font-family:var(--hand);font-size:clamp(18px,min(calc(5.6vw / var(--zv)),calc(3.6vh / var(--zv))),26px);line-height:1.15;text-align:center;box-shadow:0 4px 0 #1f1c1d;animation:xcpsay .42s .78s cubic-bezier(.2,1.6,.4,1) both}
.xcamp .xcpbubble small{display:block;margin-top:6px;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.03em;color:#5d564f}
.xcamp .xcpbubble::before{content:'';position:absolute;left:50%;bottom:-17px;margin-left:-10px;border:10px solid transparent;border-top:15px solid #1f1c1d;border-bottom:0}
.xcamp .xcpbubble::after{content:'';position:absolute;left:50%;bottom:-11px;margin-left:-7px;border:7px solid transparent;border-top:11px solid #fbfaf6;border-bottom:0}
.xcamp{cursor:pointer}
@keyframes xcprise{from{transform:translate(-50%,60%)}}
@keyframes xcpsay{from{transform:scale(.4);opacity:0}}

/* ---------- dark mode controls: outlines show in a warm grey (the --ink above), and anything that was filled with ink
   (a selected chip, an ink button, the toast, the update bar) turns light with dark text, so states read at a glance */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn.ink,:root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--text);color:#1f1c1d;border-color:var(--text)}
  :root:not([data-theme="light"]) .toast,:root:not([data-theme="light"]) .updbar{background:var(--text);color:#1f1c1d}
  :root:not([data-theme="light"]) .btn:disabled{opacity:.55;border-style:dashed;box-shadow:none}
}
:root[data-theme="dark"] .btn.ink,:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--text);color:#1f1c1d;border-color:var(--text)}
:root[data-theme="dark"] .toast,:root[data-theme="dark"] .updbar{background:var(--text);color:#1f1c1d}
:root[data-theme="dark"] .btn:disabled{opacity:.55;border-style:dashed;box-shadow:none}

/* ---------- splash ---------- */
/* js/splash.js builds and plays it: a night sky while the game loads, a small streak coming down, an impact that irises
   open onto the day, a gang of things thrown out of it, the title springing in, then a match cut onto the title screen */
#splash{position:fixed;inset:0;z-index:100;background:#161a27;overflow:hidden;touch-action:none}
#splash.lit{background:transparent}
/* tap to start: a quiet prompt low on the night sky, breathing until the tap, then gone */
.sp-tap{position:absolute;left:50%;bottom:calc(var(--sab) + 18%);z-index:6;transform:translateX(-50%);padding:12px 22px;border:0;background:none;color:#efe9d8;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;-webkit-tap-highlight-color:transparent}
.sp-tap:focus-visible{outline:2px solid rgba(239,233,216,.6);outline-offset:4px;border-radius:8px}
#splash.sp-light .sp-tap{color:#1f1c1d}
#splash.sp-light .sp-tap:focus-visible{outline-color:rgba(31,28,29,.5)}
#splash.ask{cursor:pointer}
#splash.ask .sp-tap{opacity:1;pointer-events:auto;animation:sptapin .6s ease-out,sptap 2.4s ease-in-out .6s infinite}
@keyframes sptapin{from{opacity:0}}
@keyframes sptap{50%{opacity:.45}}
#splash canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sp-sky{z-index:0}
/* the splash's sky is the title screen's at this hour (sky.js), but the stone in the grass hasn't landed yet */
.sp-sky .ystone,.sp-sky .ysg{display:none}
.sp-fx{z-index:3}
.sp-cam{position:absolute;inset:0;z-index:1}
.sp-day{position:absolute;inset:0;clip-path:circle(0 at 50% 70%)}
.sp-paper{position:absolute;inset:0;background:var(--page)}
.sp-rays{position:absolute;left:50%;top:34%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;background:repeating-conic-gradient(var(--text) 0 5deg,transparent 5deg 15deg);opacity:.07;-webkit-mask:radial-gradient(closest-side,#000 6%,transparent 50%);mask:radial-gradient(closest-side,#000 6%,transparent 50%);animation:sprays 40s linear infinite}
.sp-dots{position:absolute;inset:0;background:radial-gradient(var(--text) 1px,transparent 1.6px) 0 0/8px 8px;opacity:.11;-webkit-mask:linear-gradient(to top,#000,transparent 42%);mask:linear-gradient(to top,#000,transparent 42%)}
@keyframes sprays{to{transform:rotate(360deg)}}
/* the title is set exactly as the title screen sets its own (#app's column, .pad, #title .title), so it never has to move */
.sp-lock{position:absolute;inset:0;z-index:2;max-width:480px;margin:0 auto;padding:calc(var(--sat) + 28px) 16px var(--sab);display:flex;flex-direction:column}
.sp-title{position:relative;z-index:2;align-self:flex-start;font-size:clamp(54px,17vw,84px);margin:-.07em 0 2px}
.sp-in{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,6vh,48px);padding-bottom:5vh}
.sp-title span{position:relative;width:max-content}
.sp-title span:nth-child(3){color:var(--accent)}
.sp-title i{display:inline-block;font-style:normal;transform-origin:50% 85%}
/* the stage: the ground line with engraved hatching below it, and the pebble where it landed */
.sp-stage{position:relative;height:clamp(120px,35vw,160px)}
/* the swarm: everything that bursts out of the impact, laid out over the whole screen behind the title */
.sp-swarm{position:absolute;inset:0;z-index:1;pointer-events:none}
.sp-th{position:absolute;will-change:transform}
.sp-th.sp-back{opacity:.88}
.sp-bob,.sp-grr{width:100%;height:100%;will-change:transform}
.sp-grr.float{animation:spfloat var(--fd,3s) ease-in-out var(--fdl,0s) infinite}
@keyframes spfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4%) rotate(2deg)}}
.sp-th .art{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
/* the pebble, left glowing where it came down */
.sp-pebble{position:absolute;bottom:1px;width:10px;height:6px;margin-left:-5px;border-radius:50%;background:#e8e2d2;box-shadow:0 0 0 1.5px var(--text);opacity:0}
.sp-pebble::after{content:'';position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(rgba(255,244,207,.9),rgba(242,210,122,.35) 35%,transparent 70%);animation:sppulse 2.4s ease-in-out infinite}
.sp-pebble.on{opacity:1;transition:opacity .3s .1s}
@keyframes sppulse{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.1);opacity:1}}
/* leaving: the paper and the pebble fade while the words fly to the title screen's title */
#splash.out{pointer-events:none}
#splash.out .sp-paper,#splash.out .sp-stage{opacity:0;transition:opacity .38s .08s}
/* the title screen's title has an ink drop shadow; the words pick it up as they land */
#splash.out .sp-title>span{filter:drop-shadow(0 3px 0 rgba(31,28,29,.8));transition:filter .4s .2s}
@media (prefers-reduced-motion:reduce){
  #splash *,#splash *::after{animation:none!important}
  .sp-day{clip-path:none}
  #splash.out{opacity:0;transition:opacity .28s}
}

/* ---- promotion bosses (rules.js PROMO) ---- */
:root{--boss:#5a2a24;--bossglow:rgba(224,96,63,.55)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--boss:#3e1b17;--bossglow:rgba(224,96,63,.45)} }
:root[data-theme="dark"]{--boss:#3e1b17;--bossglow:rgba(224,96,63,.45)}
/* the boss's half burns darker, edged in gold, and its health bar is thick and gilded */
.bstage.boss .half.foe{background:radial-gradient(ellipse 90% 80% at 50% 0%,#8c3a2c 0%,var(--boss) 70%);box-shadow:inset 0 0 0 3px var(--gold),inset 0 -14px 30px -10px var(--bossglow);animation:bossbreathe 3.2s ease-in-out infinite}
.bstage.boss .half.foe .whotop .nm{color:#fbe7b0}
.bstage.boss .half.foe .whotop .tg{background:var(--gold);color:#1f1c1d;border-color:#1f1c1d}
.bstage.boss .half.foe .hpbar{height:20px;border-color:var(--gold);box-shadow:0 0 0 2px #1f1c1d}
@keyframes bossbreathe{50%{box-shadow:inset 0 0 0 3px var(--gold),inset 0 -24px 44px -10px var(--bossglow)}}
/* the versus panel announces the fight */
.panel.vs.boss{border-color:var(--gold);box-shadow:0 0 0 3px #1f1c1d,0 0 40px var(--bossglow);animation:bossin .6s cubic-bezier(.2,1.4,.4,1) both}
.panel.vs.boss .vsside.foe .vsn{color:var(--accent-ink)}
.vsboss{display:inline-block;margin:-4px 0 10px;padding:4px 12px;border:2px solid #1f1c1d;border-radius:20px;background:var(--gold);color:#1f1c1d;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.panel.vs.boss .pp.lg{border-color:var(--gold);box-shadow:0 0 0 2px #1f1c1d}
@keyframes bossin{from{transform:scale(.85);opacity:0}}
@media (prefers-reduced-motion: reduce){ .bstage.boss .half.foe,.panel.vs.boss{animation:none} }

/* ---- emblems (rules.js EMBLEMS): a nameplate banner, the name on the darker side ---- */
.emb{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;border:2px solid #1f1c1d;border-radius:8px;overflow:hidden;text-align:left;color:#fbf6ea;background:linear-gradient(100deg,var(--e2) 30%,var(--e1) 115%)}
.emb::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 5px,transparent 5px 13px)}
.emb.plain{background:var(--raise);color:var(--text)}
.emb.plain::before{display:none}
.emb.plain .embt{padding-left:12px}
.embico{position:relative;flex:none;align-self:stretch;width:52px;display:grid;place-items:center;background:rgba(20,16,14,.22);border-right:2px solid #1f1c1d}
.embico .art{width:44px;height:44px;border-radius:4px;--lw:1.1px}
.embt{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;padding:6px 10px 6px 0;line-height:1.1}
.embt b{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1.5px 0 rgba(0,0,0,.35)}
.embt small{font-size:12.5px;opacity:.9;margin-top:2px}
.emb.plain .embt b{text-shadow:none}
.nameplate{display:block;width:100%;padding:0;margin:0 0 10px;border:0;background:none;border-radius:8px;box-shadow:0 3px 0 var(--drop)}
/* the collection */
.emblist{display:grid;gap:10px}
.embhead{margin:6px 0 -2px;font:600 13px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--sub)}
.embrow{display:grid;gap:6px;border:2px solid var(--ink);border-radius:10px;padding:8px;background:var(--raise)}
.embrow p{margin:0;font-size:14px;color:var(--sub)}
.embrow .bar{margin-top:0}
.embrow.locked .emb{filter:grayscale(.85) brightness(.9)}
/* a locked plate is grey, and its shimmer can be pale, so its name and count sit on a dark band (no glow on the text) */
.embrow.locked .embt{z-index:1;align-self:stretch;justify-content:center;margin-left:-10px;padding-left:20px;background:rgba(20,16,18,.65)}
.embrow .btn.small{justify-self:start;width:auto;min-width:96px}
/* versus panel and results */
.vs .vsn .emb.vsemb{max-width:320px;margin:0 auto}
.vs .vsn .emb.vsemb .embt b{font-size:22px}
.embnew{display:grid;gap:6px;margin:10px 0;animation:bossin .5s cubic-bezier(.2,1.4,.4,1) both}
.embnew > small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
/* leaderboard: a worn emblem fills the row */
.lbrow{position:relative;overflow:hidden}
.lbrow.hasemb{background:linear-gradient(100deg,var(--e2) 45%,var(--e1) 125%);color:#fbf6ea}
.lbrow.hasemb::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 5px,transparent 5px 13px)}
.lbrow.hasemb > *{position:relative}
.lbrow.hasemb > canvas.embfx{position:absolute;border-radius:inherit}
:root:not(.nogl) .lbrow.hasemb.fx::before{display:none}
.lbrow.hasemb .lbname em,.lbrow.hasemb .lbrt small{color:inherit;opacity:.8}
.lbemb{position:absolute !important;right:64px;top:50%;width:54px;height:54px;transform:translateY(-50%) rotate(-8deg);opacity:.35;pointer-events:none}
.lbemb .art{width:100%;height:100%}

/* ---- the rank strip wears the player's emblem ---- */
.rankstrip{position:relative;overflow:hidden}
.rankstrip.hasemb{background:linear-gradient(100deg,var(--e2) 40%,var(--e1) 120%);color:#fbf6ea}
.rankstrip.hasemb::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 5px,transparent 5px 13px)}
.rankstrip.hasemb > *{position:relative}
/* the emblem's shader (emblemfx.js) paints the whole strip, under everything on it */
.rankstrip.hasemb > canvas.embfx{position:absolute;border-radius:inherit}
:root:not(.nogl) .rankstrip.hasemb.fx::before{display:none}
.rankstrip.hasemb .rkrow b{text-shadow:0 1.5px 0 rgba(0,0,0,.35)}
.rankstrip.hasemb .rkrow.sub,.rankstrip.hasemb .rkgo{color:inherit;opacity:.85}
.rankstrip.hasemb .bar{border-color:#1f1c1d;background:rgba(251,246,234,.85)}
.rankstrip .rkemb{position:absolute !important;right:26px;top:50%;width:62px;height:62px;transform:translateY(-50%) rotate(-8deg);opacity:.3;pointer-events:none}
.rankstrip .rkemb .art{width:100%;height:100%}
.rankstrip .rkrow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rpemb{margin:4px 0 8px}
.rankstrip .rkrow.sub > span:last-child{white-space:nowrap;flex:none}
/* the way up, inside the rank strip: rival dots, then the boss */
.rankstrip{flex-wrap:wrap;row-gap:0}
.rkway{flex:1 1 100%;display:flex;align-items:center;gap:8px;margin:7px 0 0 48px;padding-top:7px;border-top:1.5px dashed currentColor;border-top-color:color-mix(in srgb,currentColor 35%,transparent);font-size:13px}
.rkwdots{display:flex;align-items:center;gap:4px;flex:none}
.rkwdots i{width:11px;height:11px;border-radius:50%;border:1.6px solid currentColor;opacity:.7}
.rkwdots i.on{background:#6fae5f;border-color:#2f4d28;opacity:1}
.rkwdots b{width:12px;height:2px;background:currentColor;opacity:.4;margin:0 2px}
.rkwdots .pp.av{width:24px;height:24px;border-color:var(--gold)}
.rkwtxt{flex:1;min-width:0}
.rkway.ready .rkwtxt{font-weight:700}
.rkway.ready .pp.av{box-shadow:0 0 0 2px #1f1c1d,0 0 10px var(--bossglow)}
/* main buttons: the next promotion step, with a plain match beside it */
.findwrap{margin-top:10px;display:grid;gap:8px}
.btn.bossbtn{background:var(--boss);color:#fbe7b0;border-color:#1f1c1d;box-shadow:0 3px 0 var(--drop),0 0 16px var(--bossglow)}
/* ---- rank path: one rail, bottom to top ---- */

/* ---- the tab bar (game.js TABS): along the bottom of the top-level screens ---- */
:root{--tabh:62px}
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:30;display:none;height:calc(var(--tabh) + var(--sab));padding-bottom:var(--sab);background:var(--raise);border-top:2px solid var(--ink);box-shadow:0 -3px 0 rgba(0,0,0,.06)}
#app.tabbed .tabbar{display:flex}
#app.tabbed .screen{bottom:calc(var(--tabh) + var(--sab));padding-bottom:0}
/* the pill behind the active tab: the outer one slides, the inner one squashes and stretches */
.tblob{position:absolute;left:0;top:6px;height:calc(var(--tabh) - 12px);transition:transform .5s cubic-bezier(.34,1.45,.5,1),width .3s ease;pointer-events:none}
.tblob > i{display:block;width:100%;height:100%;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.tab{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px 4px;border:0;background:none;color:var(--sub);font:600 11px/1.1 var(--display);letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.tico{position:relative;display:block;width:26px;height:26px;transition:transform .45s cubic-bezier(.34,1.6,.5,1)}
.tico{perspective:90px}
.tico svg{width:100%;height:100%;overflow:visible;transform-style:preserve-3d}
.tico svg g,.tico svg path,.tico svg circle,.tico svg rect{transform-box:fill-box}
/* idle: grey outlines; in focus: filled in each part's own colour, inked */
.tico .tf{fill:none;transition:fill .25s ease}
.tico .ex{opacity:0}
.tab.on .tico .tf{fill:var(--c)}
.tab.on .tico svg [stroke="currentColor"]{stroke:#1f1c1d}
.t-pack,.t-a,.t-b{transform-origin:50% 100%}
.t-flap{transform-origin:100% 100%}
.t-card{transform-origin:50% 100%}
.t-cup,.t-shine,.t-clap{transform-origin:50% 50%}
.t-c1,.t-c2,.t-c3{transform-origin:50% 100%}
.t-page{transform-origin:0% 50%}
.t-arm-a{transform-origin:0% 100%}
.t-arm-b{transform-origin:100% 100%}
.tlab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:transform .3s ease}
.tab.on{color:var(--accent-ink)}
.tab.on .tico{transform:translateY(-3px) scale(1.12)}
.tab.on .tlab{transform:translateY(-1px)}
.tab:active .tico{transform:scale(.82);transition-duration:.08s}
.tspark{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;pointer-events:none}
.tbadge{position:absolute;top:3px;left:calc(50% + 7px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;border:1.5px solid var(--ink);background:var(--accent);color:#fffaf0;font:700 11px/15px var(--display);text-align:center;z-index:2}
.tab.first .tbadge{animation:tbpulse 1.4s ease-in-out infinite}
@keyframes tbpulse{50%{transform:scale(1.18)}}
/* packs waiting: the pack gives a little jiggle every few seconds */
.tab[data-tab="packs"].has .t-pack{animation:tbjig 4.5s ease-in-out infinite}
@keyframes tbjig{0%,84%,100%{transform:none}87%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}93%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}
@media (prefers-reduced-motion: reduce){ .tab.first .tbadge,.tab[data-tab="packs"].has .t-pack{animation:none} .tblob,.tico{transition:none} }
/* the Packs screen with nothing to open: one pack, greyed */
.packs.none{opacity:.35;filter:grayscale(.6);pointer-events:none}
.tico .on-only{opacity:0;transition:opacity .25s}.tab.on .tico .on-only{opacity:1}
/* the Packs screen: the packs are the centrepiece, fanned like a hand of cards, the middle one on top */
#packs .packs{min-height:300px;margin:26px 0 14px;gap:0;align-items:center}
#packs .minipack{width:178px;margin:0 -30px;transform-origin:50% 90%;transition:transform .25s cubic-bezier(.34,1.5,.5,1)}
#packs .packs.c1 .minipack{width:220px;margin:0;transform:rotate(-3deg)}
#packs .packs.c2 .minipack:nth-child(1){transform:rotate(-7deg) translateY(6px)}
#packs .packs.c2 .minipack:nth-child(2){transform:rotate(7deg) translateY(6px)}
#packs .packs.c3 .minipack{width:140px;margin:0 -42px}
#packs .packs.c3 .minipack:nth-child(1){transform:rotate(-11deg) translateY(16px)}
#packs .packs.c3 .minipack:nth-child(2){transform:translateY(-6px);z-index:2}
#packs .packs.c3 .minipack:nth-child(3){transform:rotate(11deg) translateY(16px)}
#packs .minipack:active{transform:scale(.95) !important}
#packs .packs.none .minipack{width:180px;margin:0}
/* the field guide's rows open their cards */
.fgrow{cursor:pointer;border-radius:8px;transition:background .15s}
.fgrow:not(.off):active{background:var(--raise)}
.fgrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fgrow.off{cursor:default}
.fgrow.nope{animation:fgnope .35s ease}
@keyframes fgnope{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
/* the field guide's filter */
.fgf{margin:2px 0 4px}
.fgf .chip b{font-weight:700;opacity:.65;margin-left:2px}
/* the field guide's title and filter stick to the top; a shadow shows once the list has scrolled under them */
.fghead{position:sticky;top:0;z-index:5;background:var(--page);margin:-18px -16px 0;padding:18px 16px 2px;transition:box-shadow .15s}
.fghead.stuck{box-shadow:0 6px 8px -6px rgba(31,28,29,.25)}
.fghead .fgf{margin:0;padding-bottom:8px}
/* the field guide's search and sort, over its filters (game.js openGuide) */
.fgtools{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.fgq{flex:1;min-width:0;display:flex;align-items:center;gap:6px;border:1.6px solid var(--ink);border-radius:20px;background:var(--raise);padding:0 12px;color:var(--sub)}
.fgq svg{width:17px;height:17px;flex:none}
.fgq input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:500 16px var(--display);padding:7px 0;outline:none}
.fgq:focus-within{outline:3px solid var(--gold);outline-offset:1px}
.fgsort{display:flex;align-items:center;gap:6px;flex:none;font:600 14px var(--display);color:var(--sub)}
.fgsel{position:relative;display:inline-flex;align-items:center}
/* the browser's own arrow sits too close to the pill's round end, so it draws its own */
.fgsort select{appearance:none;-webkit-appearance:none;border:1.6px solid var(--ink);border-radius:20px;background:var(--raise);color:var(--text);font:500 15px var(--display);padding:6px 32px 6px 12px;cursor:pointer}
.fgsel svg{position:absolute;right:12px;width:12px;height:12px;color:var(--text);pointer-events:none}
.fghead .fgkc{margin:0;padding-bottom:8px}
.fgkc .chip.fbtn{display:inline-flex;align-items:center;gap:4px}
.desk .fgtools{max-width:620px}
.fgcount{font-family:var(--hand);font-size:17px;color:var(--sub);margin:-4px 0 6px}
.fgcount:empty{display:none}
/* Silver and Gold notes: a tick on a silver or gold pill once read, an empty ring until then */
.fgt{display:inline-flex;align-items:center;gap:3px;margin-right:6px;padding:0 7px 0 4px;border-radius:10px;font:600 12px/17px var(--display);letter-spacing:.02em;vertical-align:1px;color:#1f1c1d;border:1.3px solid #1f1c1d}
.fgt svg{width:12px;height:12px}
.fgt i{width:9px;height:9px;margin:0 1px;border:1.5px solid currentColor;border-radius:50%}
.fgl.t1 .fgt.on{background:#c3ccd1}
.fgl.t2 .fgt.on{background:#e2b54a}
.fgt:not(.on){background:none;color:var(--sub);border-color:currentColor}
/* a campaign chapter's reward: a bonus pack for three stars on every level */
.cppack{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:8px 10px;border:2px dashed var(--line);border-radius:10px;background:var(--raise)}
.cppack .cppk{width:34px;flex:none;transform:rotate(-6deg)}
.cppack .cppk svg{width:100%;height:auto;display:block}
.cppack .cppt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.cppack .cppt b{font-size:15px}
.cppack .cppt small{font-size:12.5px;color:var(--sub)}
.cppack .cppt small .stari{display:inline-block;width:12px;height:12px;vertical-align:-1px}
.cppack .bar{margin-top:3px;height:6px}
.cppack.paid{border-style:solid;border-color:#4f7a44}
.cppack .cpok{font-style:normal;font-weight:700;color:#4f7a44;font-size:20px;padding:0 4px}
.cpch.fold .cppack{display:none}
.cphpk{position:relative;width:20px;flex:none;margin-left:auto;transform:rotate(-6deg);opacity:.55;filter:grayscale(.5)}
.cphpk svg{width:100%;height:auto;display:block}
.cphpk.paid{opacity:1;filter:none}
.cphpk.paid::after{content:'✓';position:absolute;right:-6px;bottom:-4px;font:700 11px/14px var(--display);width:14px;height:14px;border-radius:50%;background:#4f7a44;color:#fff;text-align:center}
.cphd .cphpk + .cpst{margin-left:8px}

/* ---- the firing range ---- */
.mode.range{background:#e6efd8}
:root[data-theme="dark"] .mode.range{background:#2f3a2a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.range{background:#2f3a2a}}
.rghero{display:flex;gap:12px;align-items:center;margin:4px 0 14px;padding:10px;border:2px solid var(--ink);border-radius:12px;background:var(--raise)}
.rghero p{margin:0;font-size:14px;color:var(--sub)}
.rgdummy{width:58px;flex:none}
.rgdummy svg{width:100%;height:auto;display:block}

/* the firing range on the battle screen: no cards on the dummy's side, just its health bar and the totals; your
   board, then your things below with the board screen's filters, scrolling on their own */
.bstage.range .half{flex:none}
.bstage.range .half.foe{padding-bottom:6px}
.bstage.range #row0{margin-top:6px}
.rgback{position:absolute;right:10px;top:8px;z-index:8;width:34px;height:34px}
/* the firing range on a phone: a head with back, the title and the board tabs; the dummy's own back goes */
.rghead{flex:none;padding:8px 12px 6px;background:var(--page);border-bottom:2px solid var(--ink);z-index:5}
.rgtop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rgtop h2{margin:0;font-size:22px}
.rghead .rgedit{margin:0}
html:not(.desk) .bstage.range .rgback,html:not(.desk) .rgpanel .rgedit{display:none}
html:not(.desk) .bstage.range .half.foe .who{padding-right:0}
.desk .rghead{display:none}
/* the controls: on a phone, one speed button that steps 1×, 2×, 4×, and Pause and Restart with their names; a computer
   keeps its row of speeds and its Stop */
.bstage.range .band .ctl .rgsp{min-width:42px}
.rglbl{display:none}
html:not(.desk) .bstage.range .band .ctl [data-sp],html:not(.desk) #rgstop{display:none}
html:not(.desk) .bstage.range .band .ctl button.ico{width:auto;display:inline-flex;align-items:center;gap:5px;padding:0 10px}
html:not(.desk) .rglbl{display:inline;font:600 14px/1 var(--display)}
.desk #rgspeed{display:none}
/* the totals under the dummy, big enough to read at a glance */
html:not(.desk) .rgstats{gap:16px;font-size:13px}
html:not(.desk) .rgstats b{font-size:19px}
/* an empty board: what to do */
/* on a phone only the board being built shows (its health bar and the other's stay), so the things below have room */
html:not(.desk) .bstage.range.edfoe #row0,html:not(.desk) .bstage.range.edmine #row1{display:none}
/* watching (play pressed): both boards (the dummy's when it has one), the things put away, the arena filling the screen */
html:not(.desk) .bstage.range.watching #row0,html:not(.desk) .bstage.range.watching #row1{display:grid}
html:not(.desk) .bstage.range.watching .rgpanel,html:not(.desk) .bstage.range.watching .rghint{display:none}
html:not(.desk) .bstage.range.watching .half{flex:1}
html:not(.desk) .bstage.range.watching .rghead .rgedit button[aria-selected="true"]{background:var(--raise);border-color:var(--line);color:var(--text)}
.rghint{margin:0 0 6px;text-align:center;font:600 14px/1.25 var(--display);color:var(--sub)}
/* each of your cards' damage this run */
.bstage.range #row0{position:relative}
.rgdmg{position:absolute;transform:translateX(-50%);z-index:3;padding:1px 7px;border:1.5px solid var(--ink);border-radius:999px;background:#fffaf0;color:#1f1c1d;font:700 12px/1.3 var(--display);white-space:nowrap;pointer-events:none}
/* the panel: a line on what to do; on a phone the things are a grid that scrolls down, three across */
.rgtip{margin:0 0 6px;font-size:13px;color:var(--sub)}
html:not(.desk) .rgpanel .coll.rgcar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:2px 0 8px;scroll-snap-type:none}
html:not(.desk) .rgpanel .coll.rgcar .tile{width:auto}
.bstage.range .half.foe .who{padding-right:46px}
.rgstats{display:flex;justify-content:center;gap:14px;margin:4px 0 0;font-size:13px;color:var(--sub)}
.rgstats b{font-size:16px;color:var(--text)}
.rgpanel{flex:1;min-height:0;overflow-y:auto;background:var(--page);border-top:2px solid var(--ink);padding:8px 12px 12px;z-index:4;-webkit-overflow-scrolling:touch}
/* the range panel: which board it builds, and the Ranked boards pinned for the dummy */
.rgedit{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.rgedit button{padding:7px 6px;border:2px solid var(--line);border-radius:8px;background:var(--raise);color:var(--text);font:600 14px/1.1 var(--display);cursor:pointer}
.rgedit button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--page)}
.rgpins{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 8px}
.rgpins small{flex-basis:100%;font-size:12.5px;color:var(--sub)}
.rgpins .btn.small{width:auto;padding:6px 10px}
.rgpin{display:block;margin:10px auto 0;font-size:14px}
.bstage.range #row0 .card{cursor:pointer}
.bstage.range .band .ctl button{white-space:nowrap}
.bstage.range .band .ctl button.ico{display:grid;place-items:center;width:34px;padding:0}
.bstage.range .band .ctl button.ico svg{width:15px;height:15px}
.bstage.range .band .ctl button.ico.go{background:var(--accent);color:#fffaf0}
.bstage.range .band .ctl button:disabled{opacity:.4}
/* stopped: the arena dims (the board being built stays bright and outlined), the band says Stopped and play pulses */
.bstage.range.stopped .half{transition:filter .25s}
.bstage.range.stopped .half.foe .row,.bstage.range.stopped .half .who{filter:saturate(.35) brightness(.82)}
.bstage.range.stopped .half.foe .row.rgdrop{filter:none}
.bstage.range.stopped .row.rgdrop:not(.dropin):not(.nofit):not(.dropout){border-style:dashed;border-color:rgba(31,28,29,.35)}
.bstage.range.stopped .band .clock{display:none}
.rgstopped{flex:none;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fffaf0;font:600 14px/1.1 var(--display);letter-spacing:.02em;animation:rgstopin .22s ease-out}
.bstage.range.stopped .band .ctl button.ico.go{animation:rgpulse 1.6s ease-in-out infinite}
@keyframes rgstopin{from{opacity:0;transform:scale(.85)}}
@keyframes rgpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,96,64,.55)}50%{box-shadow:0 0 0 7px rgba(224,96,64,0)}}
@media (prefers-reduced-motion: reduce){.rgstopped,.bstage.range.stopped .band .ctl button.ico.go{animation:none}}
/* the range's board takes drops like the board screen's */
#row0.rgdrop,#row1.rgdrop{position:relative;border:2px solid transparent;border-radius:10px;transition:border-color .12s,box-shadow .12s}
#row0.rgdrop.dropin,#row1.rgdrop.dropin{border-style:dashed;border-color:#5f8a3a;box-shadow:0 0 0 3px #b6d39f}
#row0.rgdrop.nofit,#row1.rgdrop.nofit{border-style:dashed;border-color:#c4513e}
#row0.rgdrop.nofit::after,#row1.rgdrop.nofit::after{content:attr(data-why);position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;z-index:8;pointer-events:none;background:#c4513e;color:#fff;font-size:12px;padding:2px 8px;border-radius:6px}
#row0.rgdrop.dropout,#row1.rgdrop.dropout{border-style:dashed;border-color:#c4513e}
#row0.rgdrop.dropout::after,#row1.rgdrop.dropout::after{content:'Release to remove';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;background:#c4513e;color:#fff;font-size:13px;font-weight:700;padding:3px 10px;border-radius:6px}
/* the run goes on while a card is held: its firing pop would pull it back to its slot (an animation beats the drag's
   own transform), and the half it's dragged from goes over the band and the other half */
.row.rgdrop .card:is(.held,.dragging){animation:none}
.bstage.range .half:has(.held){z-index:20}
.rgacts{display:flex;gap:8px;margin:0 0 10px}
/* the firing range's things: one row you swipe along, so both boards stay in view */
.coll.rgcar{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;margin:0 -12px;padding:2px 12px 8px;scroll-snap-type:x proximity;scroll-padding:0 12px;overscroll-behavior-x:contain;scrollbar-width:thin}
.coll.rgcar .tile{flex:none;width:clamp(92px,calc(27vw / var(--zv)),118px);scroll-snap-align:start}
.rgacts .btn.small{flex:1;width:auto;padding:9px 10px;font-size:14px}

/* ---- Chess, the auto-chess mode ---- */
.rlbest{text-align:center;font-family:var(--hand);font-size:17px;color:var(--sub);margin:10px 0 0}
.mode.chess{background:#dfe4cf}
:root[data-theme="dark"] .mode.chess{background:#2f3428}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.chess{background:#2f3428}}
.tc-pawn{transform-origin:24px 30px;transform-box:view-box}
.mode.chess:hover .tc-pawn,.mode.chess:focus-visible .tc-pawn{animation:tchop .5s cubic-bezier(.3,.7,.4,1.4)}
.xpanel .tc-pawn{animation:tchop .6s .15s cubic-bezier(.3,.7,.4,1.4) both}
@keyframes tchop{0%{transform:none}40%{transform:translateY(-5px) rotate(-8deg)}100%{transform:none}}
#chess .topbar .rlround{margin-left:auto;font:600 15px/1 var(--display);background:var(--ink);color:var(--page);padding:6px 10px;border-radius:999px}
/* the buy phase's clock, beside the round; red for the last 10 seconds */
:is(#chess,#lb) .topbar .tctime{margin-left:auto;font:600 15px/1 var(--display);font-variant-numeric:tabular-nums;border:2px solid var(--ink);color:var(--ink);padding:4px 9px;border-radius:999px;min-width:52px;text-align:center}
:is(#chess,#lb) .topbar .tctime + .rlround{margin-left:6px}
#lb .topbar .tctime + .rpsea{margin-left:6px}
#lb .topbar .lbyou ~ .tctime{margin-left:12px}
.tchow{margin:6px 2px 12px;border:2px solid var(--line);border-radius:8px;background:var(--raise);font-size:14.5px;color:var(--sub)}
.tchow summary{cursor:pointer;padding:9px 12px;font:600 16px/1.2 var(--display);color:var(--text)}
.tchow ul{margin:0;padding:0 14px 12px 30px;display:flex;flex-direction:column;gap:5px;line-height:1.35}
.tcnextfight{margin:4px 2px 10px;text-align:center;font-size:15px;color:var(--sub)}
.tcnextfight b{color:var(--text)}
:is(#chess,#lb) .topbar .tctime.low{background:#c4513e;border-color:#c4513e;color:#fbfaf6;animation:tclow 1s steps(2) infinite}
@keyframes tclow{50%{filter:brightness(1.15)}}
@media (prefers-reduced-motion:reduce){:is(#chess,#lb) .topbar .tctime.low{animation:none}}
.tcstat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:2px 2px 10px;font-size:15px}
/* you, at the head of Chess's side panel: the rank strip's card, opening Chess's leaderboard */
.rankstrip.tcstrip{margin:0 0 10px}
.rankstrip.tcstrip .rkico{display:grid;place-items:center;padding:0;font:600 20px/1 var(--display);background:var(--page);color:var(--sub)}
.rankstrip.tcstrip .rkico.embface{background:linear-gradient(135deg,var(--e1),var(--e2))}
.rankstrip.tcstrip .rkico.embface .art{width:82%;height:82%}
/* your health: the neighbors' bar, bigger, with the number on it */
.tchp.me{position:relative;align-self:center;width:130px;height:20px;border-width:2px;border-radius:6px}
.tchp.me b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--display);color:#fbfaf6;
  text-shadow:-1px -1px 0 #1f1c1d,1px -1px 0 #1f1c1d,-1px 1px 0 #1f1c1d,1px 1px 0 #1f1c1d}
.tcinc,.tcsub{font-size:13.5px;font-weight:400;color:var(--sub)}
.tccoin{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.5em;height:1.5em;padding:0 .3em;vertical-align:middle;
  font-weight:700;font-size:.9em;line-height:1;color:#1f1c1d;text-shadow:none;background:radial-gradient(circle at 35% 30%,#fbe29a,#f2c14e 60%,#d9a23a);border:1.5px solid #1f1c1d;border-radius:999px;font-variant-numeric:tabular-nums}
.tcstat .tccoin{font:600 20px/1 var(--display)}
/* the loading screen: 6 seats filling up, each a nameplate (in the player's emblem, if they wear one) */
.tcload{text-align:center;cursor:pointer}
.tcload h3{margin:8px 0 2px;font-size:24px}
.tcseats{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.tcslot{min-height:56px}
.tcseat{display:flex;align-items:center;gap:8px;min-height:56px;text-align:left}
.tcseat .emb{flex:1;min-width:0;box-shadow:0 3px 0 var(--drop)}
.tcseat .pp.sm{flex:none}
.tcinit{flex:none;width:52px;height:52px;border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;background:var(--raise);color:var(--sub);font:600 24px/1 var(--display)}
.tcseat.wait{justify-content:center;border:2px dashed var(--line);border-radius:8px;color:var(--sub);font-size:14px;animation:tcwait 1.4s ease-in-out infinite}
.tcseat.in{animation:tcin .35s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tcwait{50%{opacity:.45}}
@keyframes tcin{from{opacity:0;transform:translateY(10px) scale(.96)}}
@media (prefers-reduced-motion:reduce){.tcseat.wait,.tcseat.in{animation:none}}
.tcnbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:12px}
.tcnb{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 7px;border:2px solid var(--line);border-radius:10px;background:var(--card,transparent);color:inherit;font:inherit;cursor:pointer;min-width:0}
.tcnb .pp{width:38px;height:38px}
.tcnb.next{border-color:#c4513e;box-shadow:0 0 0 2px #c4513e33}
.tcnb.you{cursor:default}
/* a little ink arrow in the panel's margin points at your row */
.tcnb.you::before{content:'';position:absolute;left:-13px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:8px solid var(--ink);border-right:0;pointer-events:none}
.mouse .tcnb.you:hover{transform:none}
/* a neighbor who's out: at the bottom of the standings, under a red wash */
.tcnb.out::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(196,65,43,.3);pointer-events:none}
.tcnb.out :is(.pp,.embface,.tcinit){filter:grayscale(1)}
.tcnbn{font-size:12px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tchp{width:80%;height:6px;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden}
.tchp i{display:block;height:100%;background:#6aa84f}
.tcnbo{font-size:12px;font-weight:600;color:var(--sub)}
.tcnext{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#a93926;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px}
.tcshelf{margin-bottom:12px}
.tcsets{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:6px;min-height:22px}
.tcsets span{background:var(--k);border:1.5px solid #1f1c1d;color:#1f1c1d;border-radius:5px;font-size:12px;line-height:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.tcsets.none{display:block;font-family:var(--hand);font-size:15px;color:var(--sub);text-align:center}
.tccells{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:5px;margin:6px 0 14px}
.tccell{display:flex;flex-direction:column;gap:3px;min-width:0}
.tccell .card,.tccell .slot-empty{height:96px}
.tccell .card{cursor:pointer}
/* a shop thing dragged over the bench */
/* the bench, folded into a button (game.js renderChess); the button and the bench under it are one drop target */
.tcbenchw{position:relative;border-radius:10px;outline:2px dashed transparent;outline-offset:3px;margin:4px 0 14px}
.tcbenchw.dropin{outline-color:#5f8a3a;box-shadow:0 0 0 7px #b6d39f}
.tcbenchw.nofit{outline-color:#c4513e}
.tcbenchb{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--drop);text-align:left}
.tcbenchb b{font:600 17px/1.1 var(--display)}
.tcbenchb .tcbn{flex:1;min-width:0;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcbenchb svg{width:20px;height:20px;flex:none;transition:transform .2s}
.tcbenchb[aria-expanded="true"] svg{transform:rotate(180deg)}
.tcbenchb:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tcbenchw .tccells{margin:8px 0 2px}
.tcbenchw.nofit::after{content:attr(data-why);position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;z-index:8;pointer-events:none;
  font:600 14px var(--display);color:#fbfaf6;background:#c4513e;border:2px solid #1f1c1d;border-radius:6px;padding:3px 10px;max-width:90%;text-align:center}
.tcshop .tccell .card,.tcshop .tccell .slot-empty{height:112px}
/* Chess: a shop thing that would merge with two of yours, and those two (game.js renderChess): a gold glow that pulses
   and an arrow bobbing over each */
.tcbenchb.tcup{box-shadow:0 0 0 3px #f2c14e,0 0 14px 3px rgba(242,193,78,.75);animation:tcup 1.3s ease-in-out infinite}
.tcbenchb .tcupb{position:static;margin:0;flex:none;order:-1}
.desk .tcbenchb .tcupb{margin:0}
.card.tcup{box-shadow:0 0 0 3px #f2c14e,0 0 14px 3px rgba(242,193,78,.75);animation:tcup 1.3s ease-in-out infinite}
@keyframes tcup{50%{box-shadow:0 0 0 3px #f2c14e,0 0 22px 7px rgba(242,193,78,.95)}}
.tcupb{position:absolute;left:50%;top:6px;z-index:6;width:24px;height:24px;margin-left:-12px;display:grid;place-items:center;border:2px solid #1f1c1d;border-radius:50%;background:#f2c14e;color:#1f1c1d;box-shadow:0 2px 0 rgba(0,0,0,.35);pointer-events:none;animation:tcupb 1.3s ease-in-out infinite}
.tcupb svg{width:15px;height:15px}
@keyframes tcupb{50%{transform:translateY(-4px)}}
.desk .tcupb{width:28px;height:28px;margin-left:-14px;top:8px}
.desk .tcupb svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.card.tcup,.tcbenchb.tcup,.tcupb{animation:none}}
/* Chess: a merge, shown (game.js tcMergeFx): copies of the cards fly over everything, meet in a flash, and the new one
   appears glowing; nothing under it stops being clickable */
.tcmfx{position:fixed;inset:0;z-index:95;pointer-events:none}
.tcmcard{position:fixed;transform-origin:50% 50%;will-change:transform}
.tcmcard > .card{width:100%;height:100%;box-sizing:border-box}
.tcmnew > .card{box-shadow:0 0 0 3px #f2c14e,0 0 26px 8px rgba(242,193,78,.85)}
.tcmflash{position:fixed;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#fff6d6 0,rgba(242,193,78,.85) 30%,rgba(242,193,78,0) 70%)}
/* a shop thing's price, right under its card */
.tcshop .tccell{gap:0}
.tcprice{text-align:center;font-size:13px;line-height:1;color:var(--sub);margin-top:2px}
.tcacts{display:flex;gap:6px;margin-bottom:10px}
/* desktop: the shop's heading carries its buttons */
.tcshoph{align-items:center}
.tcshoph .tcacts{margin:0;gap:8px}
.tcshoph .tcacts .btn.small{flex:none;padding:7px 14px}
.tcacts .btn.small{flex:1;width:auto;padding:9px 6px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.tcnsheet{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.tcnsheet .pp{width:72px;height:72px;flex:none}
.tcnsheet h3{margin:0 0 2px;font-size:22px}
.tcnsheet p{margin:0}
.tcres .rlmark{width:54px;margin:0 auto 4px}
.tcres .rlmark svg{width:100%;height:auto;display:block}
.tcothers{list-style:none;padding:0;margin:8px 0 4px;font-size:14px;color:var(--sub)}
.tcothers li{padding:2px 0}
.tcothers span{color:var(--neg);font-weight:600}
@media (prefers-reduced-motion:reduce){.mode.chess .tc-pawn,.xpanel .tc-pawn{animation:none}}

/* a kind as a chip in its colour (the Flea Market's sellers); .no crosses out one someone won't touch */
.kindchip{display:inline-block;background:var(--k);color:#1f1c1d;border:1.5px solid #1f1c1d;border-radius:5px;font-size:12px;font-weight:600;line-height:1;padding:3px 6px}
.kindchip.no{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#c4513e;opacity:.8}
/* the warning before leaving a Chess lobby (a forfeit) */
.tcleave{text-align:center}
.tcleave .rlmark{width:54px;margin:0 auto 4px}
.tcleave .rlmark svg{width:100%;height:auto;display:block}
.tcleave h3{margin:0 0 6px;font-size:22px}
.tcleave p{margin:0 0 12px;line-height:1.4}
/* a real player's seat in Chess: their initial where a neighbor's portrait would be */
.tcinit.sm{width:38px;height:38px;font-size:18px;border-color:var(--ink);background:#fbfaf6;color:#1f1c1d}
.tcinit.sm.out{opacity:.5}
.tcinit.md{width:72px;height:72px;font-size:32px;border-color:var(--ink);background:#fbfaf6;color:#1f1c1d}
/* a player's face: the emblem they wear (its thing on its colours), where a character has a portrait */
.embface{display:grid;place-items:center;flex:none;width:52px;height:52px;border:2px solid var(--ink);border-radius:8px;background:linear-gradient(135deg,var(--e1),var(--e2));overflow:hidden;position:relative}
/* an emblem's shader (emblemfx.js) paints under everything in it: the banner's name and thing, the face's thing */
canvas.embfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
:root:not(.nogl) .emb.fx::before{display:none}
.embface .art{position:relative;z-index:1}
:root:not(.nogl) .embface.fx .art{filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.embface .art{width:82%;height:82%;--lw:1.1px}
.embface.sm{width:38px;height:38px;border-radius:7px}
.embface.md{width:72px;height:72px}
.embface.out{opacity:.5}
.tcnb .embface.sm,.tcnb .tcinit.sm{width:38px;height:38px}
/* the first-emblem walkthrough */
.embgift{text-align:center}
.embgift > small{display:block;font:700 12px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--sub);margin-bottom:8px}
.embgift .emb{margin:0 auto 10px;max-width:300px;text-align:left}
.embgift p{margin:0 0 12px;line-height:1.4;font-size:15px}
.msect.guided{border-radius:10px;box-shadow:0 0 0 3px #f2c14e}
.btn.pulse{animation:btnpulse 1.2s ease-in-out infinite}
@keyframes btnpulse{50%{box-shadow:0 3px 0 var(--drop),0 0 0 6px #f2c14e88}}
@media (prefers-reduced-motion:reduce){.btn.pulse{animation:none}}

/* ======================= desktop (game.js deskSync) ======================= */
/* 1024px and wider: the tab bar is a rail down the left, sheets open as dialogs in the middle, and screens not yet laid
   out for the width keep their phone column in the middle. The game stops growing at 1600px and centres */
.desk{--railw:96px;--deskbg:#e3dccb;--zv:1.05}
@media (prefers-color-scheme:dark){ :root.desk:not([data-theme="light"]){--deskbg:#151412} }
:root.desk[data-theme="dark"]{--deskbg:#151412}
.desk body{background:var(--deskbg)}
.desk #app{max-width:1600px}
.desk .screen > :not(.sky,canvas,.overlay){max-width:620px;margin-inline:auto}
/* the rail */
.desk .tabbar{right:auto;top:0;width:var(--railw);height:auto;flex-direction:column;justify-content:flex-start;gap:6px;padding:18px 0 calc(18px + var(--sab));background:var(--band);border-top:0;box-shadow:none}
.desk #app.tabbed .screen{left:var(--railw);bottom:0}
.desk .tab{flex:none;height:78px;padding:6px 4px;color:#cfc6b6;font-size:13px}
.desk .tico{width:32px;height:32px}
.desk .tab.on{color:var(--text)}
.desk .tab.on .tico{transform:scale(1.1)}
.desk .tab:hover:not(.on){color:#fbfaf6}
.desk .tblob{left:10px;right:10px;top:0;width:auto;transition:transform .5s cubic-bezier(.34,1.45,.5,1),height .3s ease}
.desk .tblob > i{background:var(--page);border:0}
.desk .tbadge{top:6px;left:calc(50% + 9px)}
/* on a wide window the yard is drawn taller (so the hedge and tree show) and stands on a strip of lawn */
.desk #app.tabbed .sky-yard,.desk #app.tabbed .sky-yardlit{bottom:22px;min-height:clamp(100px,calc(16vh / var(--zv)),160px)}
.desk #app.tabbed .sky::after{height:24px}
/* sheets: a dialog in the middle instead of a sheet from the bottom */
.desk .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,calc(100% - 48px));max-height:min(86%,820px);border:2.5px solid var(--ink);border-radius:16px;padding:20px;box-shadow:0 6px 0 var(--drop);
  transform:translate(-50%,-46%);opacity:0;visibility:hidden;transition:transform .2s ease-out,opacity .2s,visibility 0s .2s}
.desk .sheet.on{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition:transform .2s ease-out,opacity .2s}
@media (prefers-reduced-motion:reduce){ .desk .sheet,.desk .sheet.on{transition:none} }
/* Play on desktop: Ranked's board and next fight lead, the other modes in a grid under it, the title, your rank and
   recent matches in a column beside (game.js renderTitle) */
.desk #title > .dhub{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:24px;align-items:start;padding:28px 32px 40px}
.dhub .updbar{grid-column:1 / -1}
.dh-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.dh-ranked{background:var(--you);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--drop);padding:16px 18px 18px}
.dh-ranked.first .findwrap .btn{animation:nudge 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.dh-ranked.first .findwrap .btn{animation:none}}
.dh-rhead{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.dh-rhead .mart{width:52px;height:52px;flex:none;border:2px solid var(--ink);border-radius:9px;overflow:hidden;background:#c9adae;padding:2px}
.dh-rhead .mart .art{width:100%;height:100%}
.dh-rhead h2{font-size:34px;font-weight:700;margin:0;line-height:1}
.dh-rhead .msub{font-size:17px;color:var(--sub);flex:1}
.dh-ranked .homeboard .row{--rowh:clamp(150px,calc(22vh / var(--zv)),200px)}
.dh-ranked .findwrap{margin-top:14px}
.dhub .modes{margin-top:0;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.dhub .modes > .mode{grid-column:span 2;align-items:flex-start;min-height:132px}
.dhub .modes > .mode:nth-child(-n+2){grid-column:span 3}
.dhub .mode .mgo{align-self:center}
/* desktop cards are narrow: a New or count badge sits on the top edge like a sticker, so it never covers the title */
.dhub .mode .mnew,.dhub .mode .mcount{position:absolute;top:-11px;right:14px;z-index:1}
.dh-side{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:0}
.dh-side .homeTop{margin-bottom:6px}
.dh-side .rankstrip{margin:0}
.dh-side .hist{margin-top:0;background:var(--page);border:2px solid var(--ink);border-radius:12px;padding:12px 14px}
.dh-side .netnote{margin:0;background:color-mix(in srgb,var(--page) 82%,transparent);border-radius:8px;padding:6px 10px}
.dh-side .tools{background:var(--page);border:2px solid var(--ink);border-radius:12px;padding:10px 12px}
/* too narrow for a desktop-size board beside the side column: Ranked and the modes first, then the title, your rank
   and recent matches under them in two columns */
@media (max-width:1427px){
  .desk #title > .dhub{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 24px 36px;justify-items:center}
  .dhub > *{width:100%;max-width:880px}
  .dh-side{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 20px;align-items:start}
  .dh-side .homeTop{grid-column:1;grid-row:1 / span 2}
  .dh-side > :not(.homeTop){grid-column:2}
  .dh-side .title{font-size:58px}
  .dhub .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dhub .modes > .mode,.dhub .modes > .mode:nth-child(-n+2){grid-column:auto;min-height:0}
  .dhub .modes > .mode:last-child:nth-child(odd){grid-column:1 / -1}
}
.dh-side .homeTop{flex-direction:column;align-items:stretch;gap:4px}
.dh-side .hside{order:-1;max-width:none;flex:none}
/* the board on desktop: the collection on the left, the board and all about it pinned on the right (game.js renderBoard) */
.desk #board > .bdgrid{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) clamp(420px,38%,560px);gap:28px;align-items:start;padding:24px 32px 40px}
.bdmain{min-width:0}
.bdmain .chips{flex-wrap:wrap;overflow:visible;padding-bottom:12px}
.bdgrid .coll{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bdside{position:sticky;top:0;min-width:0;background:var(--page);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--drop);padding:16px 18px;max-height:calc(calc(100vh / var(--zv)) - 48px);overflow-y:auto}
.bdside .bdhead{position:static;margin:0;padding:0;box-shadow:none;background:none}
.bdside .boardwrap .row{--rowh:clamp(140px,calc(20vh / var(--zv)),190px)}
.bdside .stickybar{position:static;padding:4px 0 0;background:none}
/* a mouse resting on a card or tile: its card and rules beside it (game.js setupHoverCard) */
#hovcard{position:fixed;z-index:70;width:300px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;background:var(--page);color:var(--text);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 6px 0 var(--drop);padding:10px;pointer-events:none;font-family:var(--display);animation:hovin .14s ease-out}
@keyframes hovin{from{opacity:0;transform:translateY(4px)}}
#hovcard .hc{height:130px;display:flex}
#hovcard .hc .card{width:100%}
#hovcard .hb{display:flex;flex-direction:column;gap:3px;min-width:0}
#hovcard .hn{font-size:20px;line-height:1.05}
#hovcard .hk{font-size:13px;color:var(--sub)}
#hovcard .hr{font-family:var(--hand);font-size:16px;line-height:1.25;margin-top:2px}
#hovcard .hr p{margin:0 0 3px}
#hovcard .hh{grid-column:1 / -1;margin:2px 0 0;padding-top:6px;border-top:1.5px solid color-mix(in srgb,var(--line) 25%,transparent);font-family:var(--hand);font-size:14px;color:var(--sub)}
/* a right-click on a card or tile: its actions (game.js cardMenu) */
#ctxmenu{position:fixed;z-index:71;min-width:210px;display:flex;flex-direction:column;background:var(--raise);border:2px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--drop);padding:5px;font:500 16px var(--display)}
#ctxmenu button{border:0;background:none;color:var(--text);text-align:left;padding:7px 10px;border-radius:6px;font:inherit;cursor:pointer}
#ctxmenu button:hover:not([disabled]),#ctxmenu button:focus-visible{background:var(--ink);color:var(--paper);outline:none}
#ctxmenu button.dng{color:#b8402c}
#ctxmenu button.dng:hover,#ctxmenu button.dng:focus-visible{background:#b8402c;color:#fffaf0}
#ctxmenu button[disabled]{opacity:.45;cursor:default}
#ctxmenu hr{border:0;border-top:1.5px solid color-mix(in srgb,var(--line) 25%,transparent);margin:4px 6px}
@media (prefers-reduced-motion:reduce){#hovcard{animation:none}}
/* every board on desktop is one size: the Play screen's, 785 by 199 (seven slots of about 109 by 199). The interim
   column and dialogs that show a board are wide enough to hold it */
.desk{--bw:785px;--bh:199px}
.desk .row,.desk .miniboard{width:var(--bw);height:var(--bh);max-width:none;flex:none;gap:4px}
.desk :is(.boardwrap,.homeboard,.pzboard){width:fit-content;max-width:none}
.desk .miniboard .card{border-width:2px;border-radius:6px}
.desk .miniboard .card .foot{display:flex}.desk .miniboard .card .cdn{display:block}
.desk .miniboard .card .pane{border-bottom:1.5px solid #1f1c1d}
.desk .miniboard .card .flag{border-top-width:13px;border-right-width:13px}
.desk .miniboard .tierb{right:calc(var(--fw,2.5px) + 1px);bottom:3px}.desk .miniboard .tierb i{width:7px;height:7px}
.desk .screen > :not(.sky,canvas,.overlay){max-width:880px}
/* (game.js openSheet marks a sheet holding a board, rather than :has(), which older browsers lack) */
.desk .sheet.hasboard{width:min(880px,calc(100% - 48px))}
/* the board screen: the board and all about it across the top, pinned while the collection scrolls under it */
.desk #board > .bdgrid{grid-template-columns:minmax(0,1fr)}
.bdgrid .bdside{order:-1;z-index:15;max-height:none;overflow:visible;display:grid;grid-template-columns:auto minmax(260px,1fr);column-gap:28px;align-items:start}
.bdgrid .bdside .bdhead{grid-row:1 / span 6}
.bdgrid .bdside > :not(.bdhead){grid-column:2;min-width:0}
@media (max-width:1427px){
  .bdgrid .bdside{position:static;grid-template-columns:minmax(0,1fr)}
  .bdgrid .bdside .bdhead,.bdgrid .bdside > :not(.bdhead){grid-row:auto;grid-column:auto}
}
/* a fight on desktop: the arena across the window, boards at desktop size in the middle of each half, and the feed in a
   column beside it (game.js feedAdd). Too narrow for both, the feed steps aside */
.desk #battle > *{max-width:none;margin:0}
.desk #battle.on{flex-direction:row}
.desk #battle .bstage{flex:1;min-width:0}
.desk .bstage .half{align-items:center}
.desk .bstage .half > .who,.desk .bstage .half > .rgstats{width:var(--bw);max-width:100%}
.desk .bstage .half > .row{margin-inline:auto}
/* a fighter's portrait is big on a computer: it stands beside both the name and the health bar */
.desk .bstage .who:has(> .whotop > .pp.av){padding-left:76px;min-height:64px}
.desk .bstage .whotop > .pp.av{position:absolute;left:0;top:0;width:64px;height:64px;border-width:2px;border-radius:10px}
.bfeed{width:340px;flex:none;display:flex;flex-direction:column;gap:10px;min-height:0;background:var(--page);border-left:2.5px solid var(--ink);padding:18px 16px;overflow:hidden}
.bfeed h3{margin:0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.bfeed h3 small{font-family:var(--hand);font-weight:400;font-size:14px;color:var(--sub)}
.bflog{list-style:none;margin:0;padding:0 4px 0 0;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-family:var(--hand);font-size:16px;line-height:1.2;-webkit-mask:linear-gradient(#000 75%,transparent);mask:linear-gradient(#000 75%,transparent)}
.bflog li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;padding:5px 0 5px 8px;border-bottom:1.5px solid color-mix(in srgb,var(--line) 18%,transparent);border-left:3px solid transparent;animation:bfin .25s ease-out}
.bflog li.s0{border-left-color:var(--accent)}.bflog li.s1{border-left-color:#5f7f94}
.bflog li b{font-family:var(--display);font-weight:600;font-size:13px;color:var(--sub);padding-top:2px}
.bflog li em{font-style:normal;font-family:var(--display);font-weight:600;font-size:15px}
.bflog li.skip{display:block;color:var(--sub);border-left-color:var(--ink)}
/* after the fight the whole feed can be read: no fade at the bottom */
.bfeed.done .bflog{-webkit-mask:none;mask:none}
.bflog:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@keyframes bfin{from{opacity:0;transform:translateY(-6px)}}
.bfmeter{display:flex;flex-direction:column;gap:10px;flex:none}
.bfside small{display:block;font-size:13px;color:var(--sub);margin-bottom:3px;letter-spacing:.04em;text-transform:uppercase}
.bfrow{display:grid;grid-template-columns:98px minmax(0,1fr) 38px;gap:8px;align-items:center;font-size:14px;padding:2px 0}
.bfrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bfrow i{display:block;height:11px;min-width:3px;border:1.5px solid #1f1c1d;border-radius:4px;background:var(--accent);transition:width .3s}
.bfside.s1 .bfrow i{background:#8fb0cc}
.bfrow b{text-align:right;font-variant-numeric:tabular-nums}
.bfnone{margin:0;font-family:var(--hand);color:var(--sub);font-size:15px}
@media (max-width:1196px){.bfeed{display:none}}
@media (prefers-reduced-motion:reduce){.bflog li{animation:none}}
/* the firing range on desktop: the arena on the left, your things and the dummy's in a column on the right, in a grid
   that scrolls instead of one swipe row */
.desk .bstage.range{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,32%,520px);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)}
.desk .bstage.range > .half.foe{grid-column:1;grid-row:1;justify-content:flex-end}
.desk .bstage.range > .band{grid-column:1;grid-row:2}
.desk .bstage.range > .half.me{grid-column:1;grid-row:3;justify-content:flex-start}
.desk .bstage.range > .rgpanel{grid-column:2;grid-row:1 / 4;border-top:0;border-left:2.5px solid var(--ink);padding:16px 16px 20px}
.desk .rgpanel .coll.rgcar{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;overflow:visible;margin:0;padding:2px 0 8px;scroll-snap-type:none}
.desk .rgpanel .coll.rgcar .tile{width:auto}
.desk .bstage.range .half.foe .who{padding-right:0}
.desk .bstage.range .rgback{right:auto;left:14px}
/* Chess on desktop: the shelf, bench and shop in the main column, everything else beside it (game.js renderChess);
   bench and shop cards are the size of a shelf slot */
.desk #chess > .tcgrid{max-width:none;display:grid;grid-template-columns:max-content minmax(280px,340px);grid-template-rows:auto 1fr;column-gap:32px;justify-content:center;align-items:start;padding:22px 32px 40px}
.tcgrid > .topbar{grid-column:1 / -1}
.tcmain{min-width:0}
.tcside{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;background:var(--page);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--drop);padding:14px 16px}
.tcside .tcnbs{grid-template-columns:minmax(0,1fr);gap:6px}
.tcside .tcnb{flex-direction:row;justify-content:flex-start;gap:10px;padding:6px 10px;text-align:left;background:var(--card,var(--page))}
/* rows sliding to new places after a fight pass over one another with their own paper, never showing through */
.tcside .tcnb .tcnbn{flex:1;font-size:15px}
.tcside .tcnb .tchp{width:70px}
.tcside .tcnb .tcnext{position:static;transform:none}
.tcgrid .tctime{font-size:22px;padding:2px 12px}
.desk .tccells{grid-template-columns:repeat(var(--n),calc((var(--bw) - 24px) / 7));gap:4px;width:max-content}
.desk .tccell .card,.desk .tccell .slot-empty,.desk .tcshop .tccell .card,.desk .tcshop .tccell .slot-empty{height:var(--bh)}
/* the shop's row is as wide as the column (your board with its frame, and the buttons over it), its cards in a board
   slot's shape, so a little bigger */
.desk #chess .tcmain .tcshop{width:auto;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.desk #chess .tcmain .tcshop .tccell .card,.desk #chess .tcmain .tcshop .tccell .slot-empty{height:auto;aspect-ratio:108.7 / 199}
@media (max-width:1427px){
  .desk #chess > .tcgrid{grid-template-columns:auto;max-width:880px}
  .tcside{position:static}
}
/* the daily puzzle and a campaign level on desktop: the boards in the main column, the things to build with in a
   column beside, always in view (game.js renderPuzzle, renderCampLevel) */
.desk :is(#puz,#camp) > .pzgrid{max-width:none;display:grid;grid-template-columns:max-content minmax(300px,440px);grid-template-rows:auto auto 1fr;column-gap:32px;justify-content:center;align-items:start;padding:22px 32px 40px}
.pzgrid > .topbar,.pzgrid > .pznav{grid-column:1 / -1}
.desk .pzgrid > .pznav{max-width:720px}
.pzmain{min-width:0}
.pzmain .bdstick{position:static;margin:0 0 10px;padding:4px 0 8px;box-shadow:none}
.pzside{position:sticky;top:0;max-height:calc(calc(100vh / var(--zv)) - 24px);overflow-y:auto;background:var(--page);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--drop);padding:14px 16px}
.pzside .pzph{margin-top:0}
.pzside .coll.pzpool{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
@media (max-width:1427px){
  .desk :is(#puz,#camp) > .pzgrid{grid-template-columns:auto;max-width:880px}
  .pzside{position:static;max-height:none}
}
/* the field guide on desktop: the notes in columns across the width, each kind's heading across them all */
.desk #guide > .pad{max-width:1480px;padding:22px 32px 40px}
.desk .fghead{margin:-22px -32px 0;padding:22px 32px 2px}
/* each thing is a big page of its own: its picture tall beside its notes and real-world notes (a large thing's wide
   picture across the top instead) */
.desk .fg{display:grid;grid-template-columns:repeat(auto-fill,minmax(560px,1fr));gap:20px 24px;align-items:start}
.desk .fg .fgk{grid-column:1 / -1;margin:24px 0 0;font-size:24px}
.desk .fg .fgrow{display:grid;grid-template-columns:clamp(200px,38%,250px) minmax(0,1fr);gap:18px;padding:16px;border:2.5px solid var(--ink);border-radius:16px;background:var(--raise);box-shadow:0 4px 0 var(--drop)}
.desk .fg .fgrow.tbig{grid-template-columns:minmax(0,1fr)}
.desk .fg .fgrow .fgart{width:100%;height:auto;aspect-ratio:4 / 5;border-width:2.5px;border-radius:10px}
.desk .fg .fgrow.tbig .fgart{aspect-ratio:728 / 408}
.desk .fg .fgtx{gap:5px}
.desk .fg .fgtx b{font-size:26px;line-height:1.1;margin-bottom:2px}
.desk .fg .fgl{font-size:17px}
.desk .fg .fgrow .fgreal{display:block}
.desk .fg .fgrow.off{box-shadow:none;background:none;border-style:dashed}
.desk .fgrow:hover:not(.off){background:var(--raise);transform:translateY(-2px);box-shadow:0 6px 0 var(--drop)}
.desk .fg .fgrow{transition:transform .15s,box-shadow .15s}
@media (prefers-reduced-motion:reduce){.desk .fg .fgrow{transition:none}.desk .fgrow:hover:not(.off){transform:none}}
/* the board screen's collection on desktop: big cards with tall pictures, so more of each painting shows; a large
   (3-slot) thing spans two columns, so its wide picture shows whole. Dense packing fills the gap a large one leaves */
.desk .bdgrid .coll{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;grid-auto-flow:row dense}
.desk .bdgrid .coll .tile{border-radius:10px;box-shadow:0 3px 0 var(--drop)}
.desk .bdgrid .coll .tile.tbig{grid-column:span 2}
.desk .bdgrid .coll .tile .tpane{height:auto;aspect-ratio:4 / 5;padding:0}
.desk .bdgrid .coll .tile.tbig .tpane{aspect-ratio:auto;flex:1;min-height:0}
.desk .bdgrid .coll .tile .tname{font-size:17px;padding-top:6px;min-height:26px}
.desk .bdgrid .coll .tile .tabil{font-size:16px}
.desk .bdgrid .coll .tile .tmeta{font-size:14px}
.desk .bdgrid .coll .tile.fb{min-height:0;aspect-ratio:3 / 4}
.desk .bdgrid .coll .tile.fb .tpane{aspect-ratio:auto}
.desk.mouse .bdgrid .coll .tile:hover:not(.spent){transform:translateY(-3px);box-shadow:0 6px 0 var(--drop)}
.desk .bdgrid .coll .tile{transition:transform .15s,box-shadow .15s}
@media (prefers-reduced-motion:reduce){.desk .bdgrid .coll .tile{transition:none}.desk.mouse .bdgrid .coll .tile:hover:not(.spent){transform:none}}
/* a pack's summary on desktop: its ten things five across */
.desk #pack .summary .coll{grid-template-columns:repeat(5,minmax(0,1fr))}
/* the firing range too narrow for a desktop-size board beside its panel: the panel goes under the arena, as on a phone */
@media (max-width:1280px){
  .desk .bstage.range{display:flex}
  .desk .bstage.range > .rgpanel{border-left:0;border-top:2px solid var(--ink);padding:8px 12px 12px}
}
/* the fight feed is desktop only (a fight that began wide and was narrowed keeps it hidden) */
html:not(.desk) .bfeed{display:none}
/* a fight with the feed beside it: the intro and the result cover the arena, not the feed (game.js startBattle) */
@media (min-width:1197px){ .desk #battle.hasfeed > .overlay{right:340px} }
/* ===== design review fixes (desktop) ===== */
/* dark mode: the offline note on Play reads in the page's colours (the sky's grey is for text over the sky), the ×2 by
   a kind icon follows the theme, the hover card is a light card face in both themes like the cards themselves, and the
   rail's current item is a light pill in both */
#title .dh-side .netnote{color:var(--sub)}
.bdk i{color:var(--sub)}
#hovcard{background:#fbfaf6;color:#1f1c1d;border-color:#1f1c1d}
#hovcard .hk,#hovcard .hh{color:#5d564f}
#hovcard .hh{border-top-color:rgba(31,28,29,.18)}
.desk .tblob > i{background:#f4efe3}
.desk .tab.on{color:#1f1c1d}
/* a fight on desktop: each side's name and health bar sit right against its board, both boards close to the clock band */
.desk .bstage:not(.range) .half.foe{justify-content:flex-end}
.desk .bstage:not(.range) .half.me{justify-content:flex-start}
.desk .bstage:not(.range) .half{gap:10px}
/* the board screen on wide screens: the pinned top is two columns, the board on the left and its title, saved boards,
   combos, matchups and fusing on the right, so more of the collection shows; the kind filters pin just under it */
@media (min-width:1428px){
  .bdgrid .bdside{grid-template-columns:auto minmax(280px,1fr);grid-auto-flow:row dense;row-gap:8px;padding:14px 18px}
  .bdgrid .bdside .bdhead{display:contents}
  .bdgrid .bdside .boardwrap{grid-column:1;grid-row:1 / span 5;margin:0}
  .bdgrid .bdside .boardinfo{grid-column:1;grid-row:6;margin:2px 2px 0}
  .bdgrid .bdside .bdhead > :not(.boardwrap):not(.boardinfo){grid-column:2;min-width:0}
  .bdgrid .bdside .bdslotnote{display:none}
  .bdgrid .bdside .topbar{margin-bottom:0}
  .bdgrid .bdside .combos{margin:0}
  .desk .bdmain .chips{position:sticky;top:var(--bdh,0px);z-index:14;background:var(--page);margin:0 -4px;padding:10px 4px}
}
.mtip{display:flex;align-items:center;gap:12px;background:#fff4c9;color:#5b4a12;border:2px solid var(--ink);border-radius:10px;padding:8px 12px;margin:0 0 10px;font-family:var(--hand);font-size:17px}
.mtip span{flex:1}
.mtip .btn{flex:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mtip{background:#3b3420;color:#f1dfa2}}
:root[data-theme="dark"] .mtip{background:#3b3420;color:#f1dfa2}
/* the menu at the foot of the rail (desktop only); Play no longer repeats your name and menu at its top right */
.rmenu{display:none}
.desk .rmenu{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;height:70px;padding:6px 4px;border:0;background:none;color:#cfc6b6;font:600 13px/1.1 var(--display);cursor:pointer}
.desk .rmenu .tico{width:30px;height:30px}
.desk .rmenu:hover{color:#fbfaf6}
.desk .dh-side .hside{display:none}
/* the feed: whose line it is, and a repeat's count */
.bflog .bfwho{font-style:normal;font-family:var(--display);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:0 4px;margin-right:5px;vertical-align:1px;color:#fffaf0}
.bflog li.s0 .bfwho{background:var(--accent)}
.bflog li.s1 .bfwho{background:#5f7f94}
.bflog .bfx{font-style:normal;font-family:var(--display);font-weight:700;font-size:13px;color:var(--sub)}
/* very wide screens: the rail stays on the window's left edge; each screen's content is capped and centred instead.
   Play stops at the width where a desktop board fills the Ranked panel */
/* and the whole app is drawn 5% larger than its pixels, for the room a computer has: the layouts stay as they are, so
   their breakpoints sit 5% wider (1428 for 1360 and so on). Script that turns a size measured on screen into a style
   divides by it (ZM in game.js) */
.desk #app{max-width:none;zoom:1.05}
.desk #title > .dhub{max-width:1340px;margin-inline:auto}
.desk #board > .bdgrid{max-width:1560px;margin-inline:auto}
/* buttons on desktop: in dialogs they line up on the right at their own width; the big primary ones under a column are
   capped and centred rather than stretched across it */
.desk .sheet .acts{justify-content:flex-end}
.desk .sheet .acts > .btn{flex:0 1 auto;width:auto;min-width:150px}
.desk :is(#pzgo,#cpgo){width:auto;min-width:300px;max-width:420px;display:block;margin-inline:auto}
/* the pack summary's buttons stack at one width: the widest one's on a desktop, the full width on a phone */
.sumbtns{display:grid;gap:8px}
.desk .sumbtns{width:max-content;min-width:300px;max-width:100%;margin-inline:auto}
/* the splash on desktop: a prompt you can see from across the room */
.desk .sp-tap{font-size:30px;padding:14px 34px;border:2px solid rgba(239,233,216,.45);border-radius:999px;letter-spacing:.08em}
/* the campaign map on desktop: chapters in two columns */
.desk #camp > .cpmap{max-width:1300px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start;padding:22px 32px 40px}
.cpmap > .topbar,.cpmap > .hint{grid-column:1 / -1}
/* the leaderboard on desktop: the list, and the chosen player beside it */
/* ===== design review 2 (desktop) ===== */
/* hover: with a mouse, what can be clicked answers the pointer. Buttons, mode tiles and the rank strip lift a little;
   things to pick (tiles, shop and bench cards, your things) rise; rows and chips tint; links take the accent */
.mouse .btn{transition:transform .12s ease-out,box-shadow .12s ease-out,filter .12s}
.mouse .btn:not(:disabled):not(:active):hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--drop);filter:brightness(1.04)}
.mouse .mode{transition:transform .15s ease-out,box-shadow .15s ease-out}
.mouse .mode:not(:active):hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--drop)}
.mouse .rankstrip,.mouse .lbrow,.mouse .tcnb,.mouse .cprow,.mouse .chip{transition:transform .12s ease-out,background-color .12s,box-shadow .12s}
.mouse .rankstrip:hover,.mouse .cprow:not(.locked):hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--drop)}
.mouse .lbrow:hover,.mouse .tcnb:not(.out):hover{box-shadow:0 0 0 2px var(--accent)}
.mouse .chip:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--accent) 14%,var(--raise))}
.mouse .linkbtn:hover{color:var(--accent-ink)}
.mouse .tile,.mouse .tccell .card,.mouse .pzw .tile{transition:transform .12s ease-out,box-shadow .12s ease-out}
.mouse :is(.tile:not(.spent),.tccell .card):hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(31,28,29,.35)}
.mouse :is(.boardwrap,.homeboard,.pzboard) .card:not(.held):not(.dragging):hover{box-shadow:0 0 0 3px var(--accent)}
@media (prefers-reduced-motion:reduce){ .mouse :is(.btn,.mode,.tile,.tccell .card,.rankstrip,.cprow):hover{transform:none} }
/* long lists in a dialog (the rank path, emblems): wider on desktop, with the title and Close always in view; emblems
   two to a row */
.desk .sheet.long{width:min(900px,calc(100% - 48px));padding-top:0;padding-bottom:0}
.desk .sheet.long > h3:first-child{position:sticky;top:0;z-index:20;background:var(--page);margin:0 -20px 4px!important;padding:18px 20px 8px}
.desk .sheet.long > .acts:last-child{position:sticky;bottom:0;z-index:20;background:var(--page);margin:12px -20px 0;padding:10px 20px 16px;border-top:1.5px solid color-mix(in srgb,var(--line) 20%,transparent)}
.desk .sheet.long .emblist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;align-items:start}
.desk .sheet.long .emblist .embhead{grid-column:1 / -1}
.desk .sheet.long .matlist{gap:4px 18px}
.desk .matrow > .matpv{aspect-ratio:auto;height:128px}
.desk .sheet.long .lookpv{margin-top:2px}
/* a fight's result on desktop: a lighter shade, so the final boards still show around it, and the panel centred in the arena
   (the overlay stops short of the fight feed, so the centre is the arena's) */
.desk #battle > #result.on{background:rgba(20,18,17,.28)}
/* the things fused, as cards */
.fzcards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.fzcards .card{width:96px;height:170px}
.fuse-ov .fzcards{max-width:760px;margin:6px auto 0}
.fuse-ov .fzcards .card{width:80px;height:140px}
/* a fusion's result: the message, the other things fused and Done stack under the card on a phone; on desktop they sit
   beside it, so the whole result fits the screen without scrolling */
.fz-side{display:flex;flex-direction:column;align-items:center}
.desk .fuse-ov.fz.on{flex-direction:row;justify-content:center;align-items:center;gap:56px}
.desk .fuse-ov.fz .fz-side{align-items:flex-start;max-width:440px}
.desk .fuse-ov.fz :is(.fz-msg,.fz-more){text-align:left}
.desk .fuse-ov.fz .fzcards{justify-content:flex-start;margin:10px 0 0}
.desk .fuse-ov.fz .fzcards .card{width:96px;height:170px}
/* the board screen's pinned top, shorter on wide screens: the board spans the whole height on the left, and the slot
   count with Clear goes to the foot of the right column instead of a row of its own under the board */
@media (min-width:1428px){
  .bdgrid .bdside .boardwrap{grid-row:1 / span 7;align-self:start}
  .bdgrid .bdside .boardinfo{grid-column:2;grid-row:auto;margin:0}
  .bdgrid .bdside .bdslot{padding-block:5px}
  .bdgrid .bdside{row-gap:6px}
}
@media (min-width:1428px){
  .bdgrid .bdside .bdslot{flex-direction:row;justify-content:center;align-items:baseline;gap:6px;padding-block:6px}
  .bdgrid .bdside .bdslots{margin:0}
  .bdgrid .bdside .boardinfo .linkbtn,.bdgrid .bdside .bdedge .linkbtn{padding:0}
  .bdgrid .bdside .bdedge{margin:0 2px}
}
/* the rail's labels get room for their descenders (the g of Field guide was clipped at the tab bar's line height) */
.desk :is(.tab,.rmenu) .tlab{line-height:1.35;padding-bottom:1px}

/* ---------- the rank path (#ranks): your emblem and points, the gate's faces, the one picked in the spotlight, their
   board face down, yours, and the next fight ---------- */
.rpsea{font-size:13px;font-weight:600;border:1.5px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--raise)}
.rpgrid{display:flex;flex-direction:column;gap:14px}
.rpme{display:grid;gap:8px}
.rpme .nameplate{margin:0}
.rpnow b{font-size:16px}
.rpnow .bar{margin:5px 0 4px}
.rpnow small{font-size:13px;color:var(--sub)}
.rpgate{display:grid;gap:6px}
.rpgh{display:flex;align-items:center;gap:8px}
.rpgh h3{flex:1;margin:0;font-size:19px;text-align:center;line-height:1.1}
.rpgh h3 small{display:block;font-size:12.5px;font-weight:500;color:var(--sub)}
.rparr{width:34px;height:34px;flex:none;border:2px solid var(--ink);border-radius:50%;background:var(--raise);font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 0 var(--drop);padding:0 0 2px}
.rparr:disabled{opacity:.3;box-shadow:none;cursor:default}
.rpfaces{display:flex;align-items:flex-start}
.rpface{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 0 8px;font-size:11.5px;font-weight:600;line-height:1.1;text-align:center;color:var(--sub)}
.rpface > span:last-child{overflow-wrap:anywhere}
.rpface .pp.sm{width:48px;height:48px}
.rpface.boss .pp{border-color:var(--gold)}
.rpface.nx .pp{box-shadow:0 0 0 3px var(--page),0 0 0 5.5px var(--accent)}
.rpface:not(.done):not(.nx) .pp{opacity:.6;filter:saturate(.4)}
.rpface.on{color:var(--text)}
.rpface.on::after{content:'';position:absolute;bottom:0;left:32%;right:32%;height:3px;border-radius:2px;background:var(--ink)}
.rpck{position:absolute;top:0;left:calc(50% + 14px);width:18px;height:18px;border-radius:50%;background:#4f7a44;border:1.5px solid #2f4d28;color:#fff;font-style:normal;font-size:10px;display:grid;place-items:center}
.rpjoin{flex:none;width:6px;height:2px;margin-top:28px;background:color-mix(in srgb,var(--line) 30%,transparent)}
.rprwd{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;margin-left:6px;border:1.5px dashed var(--ink);border-radius:8px;background:none;padding:4px 6px;font-size:10.5px;color:var(--sub);line-height:1.05;text-align:center}
.rprwd b{display:block;font-size:12px;color:var(--text)}
.rprwd .rprwart{width:30px;height:42px}
.rprwd.got{border-style:solid;background:var(--raise)}
.rprwd:not(.got) .rprwart{filter:saturate(.4) brightness(.8)}
.rpspot{border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--raise);box-shadow:0 4px 0 var(--drop)}
.rpsky{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(var(--bd),color-mix(in srgb,var(--bd) 55%,var(--raise)));border-bottom:2.5px solid var(--ink)}
.rpsky .pp.lg{width:132px;height:132px;border-bottom:0;border-radius:14px 14px 0 0;margin-bottom:-2px}
.rptag,.rpst{position:absolute;top:10px;font-size:11.5px;font-weight:700;padding:2px 9px}
.rptag{left:10px;background:var(--ink);color:var(--page);letter-spacing:.06em;text-transform:uppercase;border-radius:5px}
.rpst{right:10px;background:var(--page);color:var(--text);border:1.5px solid var(--ink);border-radius:999px}
.rpst.ok{background:#4f7a44;border-color:#2f4d28;color:#fff}
.rpin{padding:12px 14px 14px;display:grid;gap:8px}
.rpin h3{margin:0;font-size:28px;line-height:1;text-align:center}
.rpwho,.rprole{margin:0;text-align:center;font-size:13px;color:var(--sub)}
.rprole{font-family:var(--hand);font-size:16px;line-height:1.2}
.rpsay{position:relative;margin:6px 0 0;background:var(--page);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-family:var(--hand);font-size:17px;line-height:1.2}
.rpsay::before{content:'';position:absolute;left:50%;top:-9px;width:14px;height:14px;margin-left:-7px;background:var(--page);border-left:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg)}
.rpnote{margin:0;font-size:13px;color:var(--sub);text-align:center;line-height:1.3}
.rpodd{margin:0;font-family:var(--hand);font-size:15px;line-height:1.2;color:var(--sub)}
.rppts > div:first-child{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-bottom:4px}
.rppts b{color:var(--text)}
.rptheir .mb-label small{font-size:13px;font-weight:500;color:var(--sub)}
.rptheir .rpbacks{--rowh:64px;margin-top:6px}
.rpbk{border:1.8px solid var(--ink);border-radius:6px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--raise)) 0 5px,var(--raise) 5px 10px);display:grid;place-items:center;font-size:14px;font-weight:700;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.rpmine .homeboard + div{margin-bottom:0}
.rpgo{position:sticky;bottom:0;z-index:3;background:var(--page);padding:2px 0 10px}
.rpgo .findwrap{margin:0}
.rpgo .findwrap.two{grid-template-columns:1fr auto}
.mouse .rpface:hover > span:last-child{text-decoration:underline}
/* a computer: the spotlight down the left beside the gate, their board, yours and the button (stacked below 1428px, 1360 of the app's own pixels) */
.desk #ranks > .pad{max-width:1280px;margin:0 auto}
.desk .rpgrid{max-width:calc(var(--bw) + 24px);margin:0 auto}
.desk .rpme{display:flex;align-items:center;gap:18px}
.desk .rpme .nameplate{width:300px;flex:none}
.desk .rpnow{flex:1}
.desk .rpbk{border-width:2.5px;border-radius:9px;font-size:30px}
.desk .rpgo{position:static;padding:0}
.desk .rpface .pp.sm{width:60px;height:60px}
.desk .rpface{font-size:14px}
.desk .rpjoin{margin-top:34px;width:14px}
.desk .rprwd{font-size:12px;padding:6px 10px}
.desk .rprwd b{font-size:14px}
.desk .rprwd .rprwart{width:40px;height:56px}
@media (min-width:1428px){
  .desk .rpgrid{max-width:none;display:grid;grid-template-columns:400px calc(var(--bw) + 24px);grid-template-areas:"me me" "spot gate" "spot their" "spot mine" "spot go";gap:18px 28px;justify-content:center;align-items:start}
  .desk .rpme{grid-area:me}.desk .rpgate{grid-area:gate}.desk .rptheir{grid-area:their}.desk .rpmine{grid-area:mine}.desk .rpgo{grid-area:go}
  .desk .rpspot{grid-area:spot;align-self:stretch;display:flex;flex-direction:column}
  .desk .rpsky{height:300px}
  .desk .rpsky .pp.lg{width:240px;height:240px;border-radius:20px 20px 0 0;border-width:3px}
  .desk .rpin{padding:18px 20px;gap:12px}
  .desk .rpin h3{font-size:38px}
  .desk .rpwho{font-size:15px}
  .desk .rpsay{font-size:21px}
  .desk .rpodd{font-size:17px}
  .desk .rpnote{margin-top:auto;font-size:15px;padding-top:12px;border-top:1.5px dashed color-mix(in srgb,var(--line) 30%,transparent)}
  .desk .rpin{flex:1;align-content:start;grid-template-rows:auto auto auto auto 1fr}
}

/* ---------- the leaderboard on a computer: a table, a row opening in place with the board at full size ---------- */
.desk #lb > .lbd{max-width:1340px;padding:22px 32px 40px}
.lbyou{margin-left:auto;font-size:15px;color:var(--sub)}
.lbyou b{color:var(--text)}
.lbtable{display:grid;gap:6px}
.lbth,.lbtr{display:grid;grid-template-columns:40px minmax(200px,1fr) 130px 64px 64px 70px 206px 268px;align-items:center;gap:12px}
/* Chess's: points, lobbies won, lobbies and best finish, with no boards, so its rows don't open */
.lbtable.chess :is(.lbth,.lbtr){grid-template-columns:40px minmax(200px,1fr) 90px 90px 90px 120px}
.lbtr.still{cursor:default}
.lbth{padding:0 14px 2px;border:2px solid transparent;border-block-width:0;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
/* (the labels sit over their columns: the place centered, the numbers right-aligned as they are) */
.lbth > :first-child{text-align:center}
.lbth > .r{text-align:right}
.lbtr{border:2px solid var(--ink);border-radius:10px;background:var(--raise);padding:7px 14px;cursor:pointer}
.lbtr.you{background:var(--you)}
.lbtr.open{border-radius:10px 10px 0 0;box-shadow:inset 0 0 0 1.5px var(--accent);border-color:var(--accent)}
.mouse .lbtr:not(.open,.still):hover{box-shadow:0 0 0 2px var(--accent)}
.lbtr .lbn{width:auto;font:700 20px/1 var(--display);text-align:center}
.lbwho{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;padding:0;text-align:left;color:inherit}
.lbwho > span:last-child{min-width:0;line-height:1.15}
.lbwho b{display:block;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbwho b em{font-style:normal;font-size:13px;color:var(--sub);font-weight:500}
.lbwho small{display:block;font-size:12.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbface.embface,.lbface.tcinit{width:42px;height:42px;font-size:20px;border-color:var(--ink)}
.lbtier{display:flex;align-items:center;gap:8px;font-size:15px}
.lbtier .lbico{width:30px;height:30px}
.lbnum{text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
.lbnum b{font-size:19px}
.lbmini{display:flex;gap:2px}
.lbm{width:27px;height:34px;flex:none;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--page)}
.lbm.L{width:85px}
.lbm .art{width:100%;height:100%}
.lbm.e{border-style:dashed;border-color:color-mix(in srgb,var(--line) 35%,transparent);background:none}
.lbacts{display:flex;gap:6px;justify-content:flex-end}
.lbacts .btn.small{width:auto;white-space:nowrap}
.lbtag{font-size:13px;font-weight:700;border:1.5px solid #2f4d28;background:#4f7a44;color:#fff;border-radius:999px;padding:3px 12px;white-space:nowrap}
.lbexp{display:grid;grid-template-columns:var(--bw) minmax(0,1fr);gap:22px;align-items:start;border:2px solid var(--accent);border-top:0;border-radius:0 0 12px 12px;background:var(--page);padding:16px;margin-top:-6px}
.lbexp .row{height:var(--bh)}
.lbexps{display:grid;gap:12px;min-width:0}
.lbexps .nameplate,.lbexps .frstats{margin:0}
.lbexpa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lbexpa .btn{width:auto;flex:1 1 auto}
.lbexpa .rptb{flex-basis:100%;text-align:left}
@media (max-width:1427px){
  .lbtable.ranked :is(.lbth,.lbtr){grid-template-columns:36px minmax(170px,1fr) 120px 60px 60px 64px 238px}
  .lbtable.ranked .lbth > :nth-child(7),.lbtr > .lbmini{display:none}
  .lbexp{grid-template-columns:minmax(0,1fr)}
  .lbexp .row{justify-self:center}
}
.lbsheeta{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lbsheeta .lbtag{align-self:center;justify-self:center;text-align:center}
/* the effects' shared WebGL context is lost (glshare.js puts nogl on <html>): their canvases go, and the plain look
   each one replaces comes back (frozen stripes, the drawn health bar, the emblems' own stripes) until it returns, or
   for a week on a device too slow for them */
.nogl :is(canvas.bgfx,canvas.fightfx,canvas.hpfx,canvas.cardfx,canvas.packfx,canvas.embfx,canvas.glholo,canvas.skyfx,canvas.titlefx,canvas#pfxr){display:none!important}
/* the Flea Market (game.js renderMarket): Ranked on a budget, built like Chess's shop. The store is a grid of price
   tags (arrows: how far each price moved since yesterday); on desktop it wraps in rows a board wide */
.mode.market{background:#f0dccf}
:root[data-theme="dark"] .mode.market{background:#3d2c27}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode.market{background:#3d2c27}}
.mk-tag{transform-box:view-box;transform-origin:24px 4px}
.mode.market:hover .mk-tag,.mode.market:focus-visible .mk-tag{animation:mkswing .6s cubic-bezier(.3,.7,.4,1.4)}
@keyframes mkswing{0%{transform:none}30%{transform:rotate(-16deg)}65%{transform:rotate(9deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.mode.market .mk-tag,.xpanel .mk-tag{animation:none}}
#market .topbar .rlround{margin-left:auto;font:600 15px/1 var(--display);background:var(--ink);color:var(--page);padding:6px 10px;border-radius:999px}
.rankstrip.mkstrip{cursor:default}
/* a store tile: its price today with how it moved, and how many copies the store has */
.tile .mkmeta{align-items:center}
.tile .mkmeta .mkp{display:inline-flex;align-items:center;gap:4px}
.mkch{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:-.02em}
.mkch.up{color:#b8432f}
.mkch.dn{color:#3f7a3a}
:root[data-theme="dark"] .mkch.up{color:#f08b74}
:root[data-theme="dark"] .mkch.dn{color:#8fcf86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mkch.up{color:#f08b74}:root:not([data-theme="light"]) .mkch.dn{color:#8fcf86}}
.mkempty{margin:6px 2px 12px;color:var(--sub);font-size:14.5px}
.mkover{margin:10px 2px 12px;font-size:15px;line-height:1.4}
.mkline{margin:8px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--sub);font-size:14.5px}
.mkpaid{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:10px 0 4px;font-size:15px}
.mkpaid small{color:var(--sub)}
.mkmovers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 14px;margin:8px 0}
.mkmovers h4,.mkall h4{margin:8px 0 4px;font-size:15px}
.mkrow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:14px}
.mkrow .rrart{width:30px;height:30px;flex:none}
.mkrow .rrart svg{width:100%;height:100%}
.mkrn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkall{padding:0 12px 10px}
.mklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));column-gap:14px}
#market .hrow small{color:var(--sub);font-size:12px}
.desk #market > .tcgrid{max-width:none;display:grid;grid-template-columns:max-content minmax(280px,340px);grid-template-rows:auto 1fr;column-gap:32px;justify-content:center;align-items:start;padding:22px 32px 40px}
@media (max-width:1427px){.desk #market > .tcgrid{grid-template-columns:auto;max-width:880px}}
/* the Flea Market's cap beside the board (red while the board is worth more than the battle allows) */
.mkworth.over{color:var(--neg);font-weight:700}
.mkcaphint{color:var(--neg)}
/* the Flea Market day as a run: what it pays for each number of wins, the wins so far marked (game.js mkLadderHTML) */
.mkladder{margin:2px 0 10px}
.mklh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--sub);margin-bottom:4px}
.mklh b{font:600 17px/1 var(--display);color:#3f7a3a}
.mklh b.neg,.mklast b.neg{color:var(--neg)}
.mklrow{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px}
.mklc{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0;border:1.5px solid var(--line);border-radius:6px;background:var(--raise);font-size:11px;line-height:1.1}
.mklc b{font-size:12px}
.mklc i{font-style:normal;font-weight:600;color:#3f7a3a;min-height:1.1em}
.mklc.neg i{color:var(--neg)}
/* steps already played, and the ones out of reach, are told apart by their border and fill, not by fading the words */
.mklc.done{background:transparent;border-color:color-mix(in srgb,var(--line) 45%,transparent)}
.mklc.off{background:transparent;border-style:dashed;border-color:color-mix(in srgb,var(--line) 45%,transparent);color:var(--sub)}
.mklc.at{border-color:var(--ink);background:#f2c14e;color:#1f1c1d;opacity:1}
.mklc.at i{color:#1f1c1d}
.mklfoot{text-align:center;font-size:11px;color:var(--sub);margin-top:1px}
.mklast{margin:-4px 2px 8px;font-size:13px;color:var(--sub)}
.mklast b{color:#3f7a3a}
.panel.res .mkladder{margin:8px 0 4px;text-align:left}
.panel.res .mkrl{margin-top:2px}
:root[data-theme="dark"] .mklc i,:root[data-theme="dark"] .mklh b,:root[data-theme="dark"] .mklast b{color:#8fcf86}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mklc i,:root:not([data-theme="light"]) .mklh b,:root:not([data-theme="light"]) .mklast b{color:#8fcf86}}
:root[data-theme="dark"] :is(.mklc.neg i,.mklh b.neg,.mklast b.neg){color:#f08b74}
:root[data-theme="dark"] .mklc.at i{color:#1f1c1d}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.mklc.neg i,.mklh b.neg,.mklast b.neg){color:#f08b74}:root:not([data-theme="light"]) .mklc.at i{color:#1f1c1d}}
/* the Flea Market's day row: gold, and where the day stands (a tap opens the whole ladder); the store over its limit;
   and the day's end, with a callout for a great day */
.mkday{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}
.mkgold{display:flex;align-items:center;gap:5px;padding:6px 10px;border:2px solid var(--line);border-radius:10px;background:var(--raise)}
.mkgold .tccoin{font:600 20px/1 var(--display)}
.mkgold small{font-size:12px;color:var(--sub)}
.mkdayb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;position:relative;padding:6px 26px 6px 10px;border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.mkdrec{font:600 15px/1.1 var(--display)}
.mkdline{font-size:13px;color:var(--sub)}
.mkdline b{color:#3f7a3a}
.mkdline b.neg{color:var(--neg)}
.mkdayb > i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:700 22px/1 var(--display);font-style:normal;color:var(--sub)}
.tcsub.mkfull,.sumline.mkfull{color:var(--neg);font-weight:600}
.mkcall{display:inline-block;margin:2px 0 4px;padding:3px 12px;border:2px solid var(--ink);border-radius:8px;background:#f2c14e;color:#1f1c1d;font:700 22px/1.1 var(--display);transform:rotate(-3deg);animation:mkcall .6s cubic-bezier(.2,1.5,.4,1) .9s both}
@keyframes mkcall{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:rotate(-3deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.mkcall{animation:none}}
:root[data-theme="dark"] .mkdline b{color:#8fcf86}
:root[data-theme="dark"] .mkdline b.neg{color:#f08b74}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mkdline b{color:#8fcf86}:root:not([data-theme="light"]) .mkdline b.neg{color:#f08b74}}
/* the Flea Market's sellers: two open at a time, each a character trading in their own kind; and a seller's table, where
   things are taken there and then (tap to take, tap the store's to toss; a tile's i shows its card) */
.mksellers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px}
.mkseller{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px;border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--drop)}
.mkseller:disabled{opacity:.5;cursor:default;box-shadow:none}
.mkseller.first{background:#f2c14e;color:#1f1c1d}
/* a challenger in a seller's spot */
.mkseller.mkfoe{background:#f3c9bf;color:#1f1c1d;border-color:#8c2f22}
.mkspoil{display:flex;align-items:center;gap:10px;margin:10px 0;text-align:left;font-size:15px;line-height:1.3}
.mkspoil .rrart{flex:none;width:52px;height:52px}
.mkfoet{font:700 12px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:#8c2f22}
.mkfoenote{margin:-8px 0 14px;font-size:13px;color:var(--sub)}
.mkfoet.ge{color:#3f6a2a}.mkfoet.gt{color:#6e1a12}
.mkseller .pp{flex:none}
.mksn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mksn b{font:600 15px/1.1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mksk{display:flex;align-items:center;gap:6px}
.mksc{font-size:13px;font-weight:700}
.mksn b{white-space:normal}
.mktseller{display:flex;align-items:center;gap:12px;margin:2px 0 12px;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--raise)}
.mktseller .pp{flex:none}
.mktseller b{display:block;font:600 20px/1.1 var(--display)}
.mktseller span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--sub);margin-top:2px}
.mktseller span.kindchip{display:inline-block;color:#1f1c1d;margin-top:0}
.mktseller p{margin:5px 0 0;font-size:14px;font-style:italic}
/* the gold, in the top bar while choosing from a table */
.mktgold{margin-left:auto;padding:4px 9px}
.mktgold .tccoin{font-size:18px}
#market .mktable .topbar .mktgold + .rlround{margin-left:8px}
.desk #market > .mktable{max-width:none;padding:22px 32px 30px}
/* a seller's table on a computer, in rows, all centred: the seller's awning as wide as the table, the table's things in
   one row (never wrapped; it scrolls sideways if the screen can't hold it), then the store or board tabs and what they
   show. The table row sets the width of the awning over it: the awning and its label don't count toward it */
.desk #market > .mktable{display:flex;flex-direction:column;align-items:center}
.desk #market > .mktable > .topbar{align-self:stretch}
.desk .mktable .mktop{display:grid;width:max-content;max-width:100%}
.desk .mktable .mktop > :is(.mktseller,.mb-label){contain:inline-size}
.desk .mktable .mktbl{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:auto;grid-auto-columns:calc((var(--bw) - 24px) / 7);width:auto;max-width:100%;overflow-x:auto;padding-bottom:4px;justify-content:start}
.desk #market > .mktable > :is(.mkseg,.mktstw,#mkwrap,.hint,.acts,.mkdonen){width:min(100%,var(--bw));box-sizing:border-box}
.desk .mktable .mkseg{margin-top:4px}
/* Ranked's things as cards (game.js mkCards): your store, and a seller's table; a large thing three columns wide, and
   a line under each (a bargain, how the price moved, what it would stack onto) */
.mkcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:10px 6px;margin:6px 0 14px;--ch:124px}
.mkcell{display:flex;flex-direction:column;gap:3px;min-width:0}
.mkcell.L{grid-column:span 3}
.mkcell .card{height:var(--ch);cursor:pointer}
.mkunder{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 5px;min-height:16px;font-size:12px;font-weight:600;color:var(--sub)}
.mkunder .mkrib{position:static;border-radius:4px;padding:1px 5px;font-size:10px;box-shadow:none}
.mkstk,.mknew{font:700 10.5px/1.3 var(--display);border:1.5px solid #1f1c1d;border-radius:4px;padding:0 4px;color:#1f1c1d}
.mkstk{background:linear-gradient(180deg,#fbe9b0,#e2b54a);white-space:nowrap}
.mknew{background:#f2c14e;text-transform:uppercase;letter-spacing:.04em}
.desk .mkcards{grid-template-columns:repeat(7,calc((var(--bw) - 24px) / 7));gap:12px 4px;width:max-content;--ch:var(--bh)}
/* what a thing is worth, on its card's corner (the cooldown is on the other) */
.card .ctag{position:absolute;top:calc(var(--fw,2.5px) + 2px);left:calc(var(--fw,2.5px) + 2px);z-index:5;min-width:16px;height:16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 3px;font:700 10.5px/1 var(--display);background:radial-gradient(circle at 35% 30%,#fbe29a,#f2c14e 60%,#d9a23a);border:1.2px solid #1f1c1d;border-radius:8px;pointer-events:none}
.row .card.S .ctag{top:calc(var(--fw,2.5px) + 20px)}
.desk .row .card.S .ctag{top:calc(var(--fw,2.5px) + 2px)}
.card .ctag.free{background:#d8ecc9;font-size:10px}
.desk .card .ctag{min-width:21px;height:21px;border-radius:11px;font-size:13px}
/* at a seller's table: your store or your board, one at a time */
.mkseg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);border-radius:10px;overflow:hidden;margin:6px 0 10px;box-shadow:0 3px 0 var(--drop);background:var(--raise)}
.mksegb{border:0;background:none;color:var(--text);padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.mksegb + .mksegb{border-left:2px solid var(--ink)}
.mksegb b{font:600 17px/1.1 var(--display)}
.mksegb small{font-size:12px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mksegb[aria-selected="true"]{background:var(--ink);color:var(--page)}
.mksegb[aria-selected="true"] small{color:var(--page);opacity:.8}
.mksegb small.mkfull{color:var(--neg);opacity:1}
.mksegb.dropin{background:#d8ecc9;color:#1f1c1d;box-shadow:inset 0 0 0 3px #5f8a3a}
.mksegb.nofit{background:#f6d7cf;color:#1f1c1d;box-shadow:inset 0 0 0 3px #c4513e}
.mktstw{min-height:90px;border:2px dashed transparent;border-radius:10px;padding:2px;position:relative}
.mktstw .mkcards{margin:4px 0 6px}
.mktstw.dropin{border-color:#5f8a3a;box-shadow:0 0 0 3px #b6d39f}
.mktstw.nofit{border-color:#c4513e}
.mktstw.nofit::after{content:attr(data-why);position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;z-index:8;pointer-events:none;background:#c4513e;color:#fff;font-size:12px;padding:2px 8px;border-radius:6px}
.mktable .mkdonen{text-align:center;margin-top:6px}
#app.skyon .screen.on .mksegb small{text-shadow:none}
/* the store's and hired things' sheets: the main action across the top, the rest in one even row */
.sheet .acts.mkacts{display:flex;flex-wrap:wrap;gap:8px}
.sheet .acts.mkacts > .btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
.sheet .acts.mkacts > .btn:first-child{flex-basis:100%}
.desk .sheet .acts.mkacts > .btn{width:auto;min-width:0;flex:1 1 0}
.desk .sheet .acts.mkacts > .btn:first-child{flex-basis:100%}
/* gold on the move at the Flea Market (game.js mkGoldFx): coins between the gold counter and what was hired, visited or
   sold back, and a −/+ tag off the counter */
.mkcoin{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fbe29a,#f2c14e 55%,#d9a23a);border:2px solid #1f1c1d;z-index:70;pointer-events:none}
.mkgtag{position:fixed;z-index:70;pointer-events:none;font:700 17px/1 var(--display);padding:2px 6px;border-radius:999px;border:2px solid #1f1c1d}
.mkgtag.dn{background:#f6d7cf;color:#a8301d}
.mkgtag.up{background:#d8ecc9;color:#2f5a1f}
.mkgold .tccoin{display:inline-flex;transform-origin:30% 50%}
.mkgchip{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));z-index:69;pointer-events:none;padding:6px 14px;border:2px solid #1f1c1d;border-radius:999px;background:var(--page);box-shadow:0 3px 0 var(--drop)}
.mkgchip .tccoin{font:600 20px/1 var(--display);transform-origin:30% 50%}

/* ---------- the corner shop (shop.js): the Packs screen and opening a pack ----------
   The wall (bottom-anchored, cropped at the sides), the lamp with its cone of light and the dust in it, a pool of
   light on the counter, and the counter along the bottom (--ctr high). The lamp takes a colour (.tinted, --tc) when a
   pack rips. All SVG and CSS. */
.pkstage{--ctr:clamp(76px,19%,170px);--lampw:88px}
#pack{--ctr:clamp(80px,calc(17vh / var(--zv)),180px);--lampw:88px;--lampy:-26px}
.shop{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#efdcb4;z-index:0}
.shop.night{background:#241e1c}
.shback{position:absolute;left:0;right:0;top:0;bottom:var(--ctr)}
.shfront{position:absolute;left:0;right:0;bottom:0;height:var(--ctr)}
.shback svg,.shfront svg{display:block;width:100%;height:100%}
.shtx{font-family:var(--display);font-weight:600}
.shhand{font-family:var(--hand)}
.shlamp{position:absolute;left:50%;top:var(--lampy,0px);width:var(--lampw);height:calc(var(--lampw) * 1.25);transform:translateX(-50%);overflow:visible;z-index:2;animation:shswing 7s ease-in-out infinite;transform-origin:50% 0}
@keyframes shswing{0%,100%{transform:translateX(-50%) rotate(-.8deg)}50%{transform:translateX(-50%) rotate(.8deg)}}
.shbulb{fill:#fff6d6;filter:drop-shadow(0 0 8px #ffe9a8) drop-shadow(0 0 18px rgba(255,226,150,.7))}
.shcone,.shpool{position:absolute;left:50%;transform:translateX(-50%);z-index:1}
.shcone{top:calc(var(--lampy,0px) + var(--lampw) * 1.02);bottom:calc(var(--ctr) - 10px);width:min(820px,100%);clip-path:polygon(calc(50% - var(--lampw) * .42) 0,calc(50% + var(--lampw) * .42) 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,241,200,.62),rgba(255,236,190,.2) 62%,rgba(255,236,190,.1));mix-blend-mode:screen;opacity:.75}
.shop.night .shcone{opacity:1}
.shpool{bottom:calc(var(--ctr) - 34px);height:64px;width:min(900px,104%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,186,.6),rgba(255,236,186,.18) 60%,transparent);mix-blend-mode:screen;opacity:.6}
.shop.night .shpool{opacity:1}
.shtint{position:absolute;inset:0;opacity:0;transition:opacity .7s ease-out}
.shcone .shtint{background:linear-gradient(180deg,var(--tc,#fff),color-mix(in srgb,var(--tc,#fff) 30%,transparent) 70%,transparent)}
.shpool .shtint{border-radius:50%;background:radial-gradient(closest-side,var(--tc,#fff),transparent)}
.shop.tinted .shtint{opacity:.85}
/* dust drifting in the light */
.shcone i{position:absolute;width:var(--ms);height:var(--ms);border-radius:50%;background:#fff6d8;box-shadow:0 0 4px #fff2c4;opacity:0;animation:shmote var(--md) ease-in-out var(--ml) infinite}
@keyframes shmote{0%{opacity:0;transform:translate(0,0)}25%{opacity:.85}55%{transform:translate(var(--mx),-26px)}80%{opacity:.5}100%{opacity:0;transform:translate(calc(var(--mx) * -.5),-54px)}}
.shfl{animation:shfl 3.2s ease-in-out var(--fd) infinite}
@keyframes shfl{0%,70%,100%{filter:none}80%{filter:brightness(1.7) drop-shadow(0 0 2px #fff6d0)}}
@media (prefers-reduced-motion:reduce){.shlamp,.shfl{animation:none}.shcone i{display:none}}

/* the display box on the counter: a header card behind, the packs standing in it, the front lip over their feet.
   --pw a pack's width; a pack drawing here is 280 x 400 (--ph its height) */
.pkstage{position:relative;height:clamp(380px,calc(58vh / var(--zv)),470px);margin:4px -16px 14px;overflow:hidden;border-block:2.5px solid var(--ink);--pw:112px}
.pkbox{position:absolute;left:50%;bottom:calc(var(--ctr) - 20px);transform:translateX(-50%);z-index:3;--ph:calc(var(--pw) * 1.43)}
.pkrow{position:relative;z-index:3;display:flex;justify-content:center;gap:4px;padding:0 10px;min-width:calc(var(--pw) * 2.3)}
.pkback,.pkhead,.pkfront{position:absolute;border:2.5px solid #1f1c1d}
.pkback{z-index:1;left:-6px;right:-6px;bottom:0;height:calc(var(--ph) * .6);border-radius:6px 6px 4px 4px;background:linear-gradient(180deg,#b88a4f,#c99a5b 30%,#d3a868);box-shadow:inset 0 10px 14px rgba(60,36,14,.35)}
.pkhead{z-index:1;left:2%;right:2%;bottom:calc(var(--ph) * .55);height:calc(var(--ph) * .76);border-radius:10px 10px 0 0;background:#22324a;color:#fbfaf6;text-align:center;padding-top:calc(var(--ph) * .045);
  background-image:repeating-linear-gradient(-30deg,transparent 0 14px,rgba(255,255,255,.05) 14px 22px)}
.pkhead b{display:block;font:700 calc(var(--pw) * .17)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:#f6d77a;text-shadow:0 2px 0 #1f1c1d}
.pkhead b em{font-style:normal;color:#ee7d5c}
.pkhead span{display:block;margin-top:4px;font:500 calc(var(--pw) * .085)/1.1 var(--display);color:#d9e2ea;letter-spacing:.03em}
.pkfront{z-index:4;left:-14px;right:-14px;bottom:-8px;height:calc(var(--ph) * .27);border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#e0b878 0 8%,#d3a868 8% 100%);box-shadow:0 6px 0 rgba(0,0,0,.28)}
.pkfront::before{content:'';position:absolute;left:0;right:0;top:34%;height:30%;background:var(--accent);border-block:2px solid #1f1c1d}
.pkfront span{position:relative;font:700 calc(var(--pw) * .15)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fbfaf6;text-shadow:0 2px 0 #1f1c1d}
.pkfront i{position:absolute;left:8px;right:8px;bottom:5px;height:3px;background:repeating-linear-gradient(90deg,#1f1c1d 0 3px,transparent 3px 7px);opacity:.25}
#packs .pkrow .minipack{width:var(--pw);margin:0;flex:none;transform:rotate(var(--r,0deg)) translateY(var(--lift,0px));transform-origin:50% 100%;transition:transform .25s cubic-bezier(.34,1.5,.5,1);margin-bottom:calc(var(--ph) * -.02)}
#packs .pkrow .minipack:nth-child(odd){--r:-3deg}
#packs .pkrow .minipack:nth-child(even){--r:2.5deg}
#packs .pkrow .minipack:only-child{--r:-2deg}
#packs .pkrow .minipack svg{filter:drop-shadow(0 5px 0 rgba(31,28,29,.25))}
#packs .pkrow .minipack:focus-visible{outline:none;--lift:-22px}
#packs .pkrow .minipack:focus-visible svg{filter:drop-shadow(0 0 0 3px #f2c14e) drop-shadow(0 5px 0 rgba(31,28,29,.25))}
#packs .pkrow .minipack:active{transform:rotate(var(--r,0deg)) translateY(-10px) scale(.96)!important}
.mouse #packs .pkrow .minipack:hover{--lift:-28px}
#packs .pkrow .minipack.starter{animation:pkbob 2.4s ease-in-out infinite}
@keyframes pkbob{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-14px)}}
.pkstage.first{--pw:136px}
.pkbox.n3{--pw:96px}.pkbox.n4{--pw:82px}
.pkstage.none .pkbox{--pw:112px}
.pksold{margin:0 0 calc(var(--ph) * .34);width:calc(var(--pw) * 1.7);padding:12px 10px 10px;background:#fbfaf6;border:2.5px solid #1f1c1d;border-radius:4px;transform:rotate(-4deg);text-align:center;
  font:700 calc(var(--pw) * .2)/1 var(--display);color:#c4513e;text-transform:uppercase;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.pksold small{display:block;margin-top:6px;font:400 calc(var(--pw) * .15)/1.1 var(--hand);text-transform:none;color:#1f1c1d}
@media (prefers-reduced-motion:reduce){#packs .pkrow .minipack.starter{animation:none}}

/* beside the shop (under it on a phone): today, foil scraps, what's in every pack, the series so far */
.pkcard{border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);padding:12px 14px;margin:0 0 12px;box-shadow:0 4px 0 var(--drop)}
.pkcard h3{margin:0 0 8px;font-size:19px;display:flex;justify-content:space-between;align-items:baseline}
.pkcard h3 small{font:500 15px var(--display);color:var(--sub)}
.pkcard p{margin:0}
.pktoday .packnote{text-align:left;margin:0 0 10px;font-size:19px;line-height:1.2}
.pknext{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--sub)}
.pknext b{color:var(--text);font-family:var(--display);font-weight:600}
.pkring{width:34px;height:34px;flex:none}
.pkring circle{fill:none;stroke-width:5}
.pkring .rbg{stroke:var(--line);opacity:.18}
.pkring .rfg{stroke:#e0603f;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.pkcard.scrapbox{margin:0 0 12px}
.pkten{display:flex;gap:5px;margin:2px 0 10px}
.pkten i{flex:1;max-width:30px;aspect-ratio:5/7;border:2px solid #1f1c1d;border-radius:4px;position:relative;overflow:hidden;animation:pkdeal .4s cubic-bezier(.2,1.5,.4,1) calc(var(--i) * .05s) both}
.pkten .rC{background:#e9e2cf}.pkten .rU{background:#a9cf8f}.pkten .rR{background:#8fb0cc}
.pkten .rR::after{content:'';position:absolute;inset:-40% -80%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);animation:pkglint 2.8s ease-in-out 1s infinite}
@keyframes pkdeal{from{opacity:0;transform:translateY(-8px) rotate(-8deg)}}
@keyframes pkglint{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.pkodds p{font-size:15px;color:var(--sub);line-height:1.3}
.pkcol{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;align-items:center;gap:10px;margin:0 0 7px;font-size:15px}
.pkcol i{height:12px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:var(--page)}
.pkcol i b{display:block;height:100%;background:var(--rc);transition:width .6s}
.pkcol em{font-style:normal;text-align:right;color:var(--sub);font-size:14px}
.pkcol.rC{--rc:#d9cfb4}.pkcol.rU{--rc:#a4c141}.pkcol.rR{--rc:#6f9cc4}.pkcol.rL{--rc:#e2b54a}
.pkcoll .linkbtn{margin-top:4px}
@media (prefers-reduced-motion:reduce){.pkten i,.pkten .rR::after{animation:none}}

/* opening a pack: the shop after closing, lit by the lamp; the pack hangs in the light, and the old spotlight goes */
#pack > .shop ~ .pstage .pspot{display:none}
.desk #pack > .shop{max-width:none}
#pack .summary{position:relative;z-index:9}
#pack .shop{transition:filter .5s}
#pack.summed .shop{filter:brightness(.4) saturate(.8)}

/* desktop: the shop fills the screen beside a column of cards; opening a pack, bigger packs and cards */
.desk #packs > .pkpage{max-width:1500px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-rows:auto minmax(0,1fr);gap:0 26px;min-height:100%;box-sizing:border-box;padding:22px 32px 28px}
.desk #packs .pkpage > .updbar,.desk #packs .pkpage > .topbar{grid-column:1 / -1}
.desk .pkstage{margin:0;height:auto;min-height:560px;border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--drop);--pw:clamp(170px,calc(22vh / var(--zv)),210px);--lampw:140px;--ctr:clamp(110px,20%,190px)}
.desk .pkstage.first{--pw:clamp(200px,calc(26vh / var(--zv)),240px)}
.desk .pkbox.n3{--pw:clamp(150px,calc(19vh / var(--zv)),180px)}.desk .pkbox.n4{--pw:clamp(130px,calc(16vh / var(--zv)),156px)}
.desk .pkstage.none .pkbox{--pw:170px}
.desk .pkside{align-self:start}
.desk #pack{--lampw:136px;--lampy:-58px;--ctr:clamp(120px,calc(18vh / var(--zv)),200px)}
.desk #pack .pstage{height:min(720px,calc(calc(100vh / var(--zv)) - 250px));--pw:min(340px,calc(36vh / var(--zv)));--cw:min(330px,calc(35vh / var(--zv)))}
.desk #pack .revui{max-width:620px;margin-inline:auto}
.desk #pack .revbtns{justify-content:center}
.desk #pack .revbtns .btn{flex:0 1 260px}
.desk #pack .riphint{font-size:22px}

/* ---------- the Flea Market's lane of stalls (game.js mkStall) ----------
   Bunting over the lane; each stall an awning in its kind's colour (--ka), the seller's name on a board, a price tag
   swinging from the awning, the seller behind the counter with a crate of their kind, and the counter along the front
   with the kind and what a tap does. A challenger's is a fight booth. The day's first stall pulses until visited */
.mklane{position:relative;margin:2px 0 16px;padding:42px 12px 0;border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 4px 0 var(--drop);
  background:linear-gradient(180deg,#bfdcec 0,#e2eef0 46%,#efe3c6 46.2%,#efe3c6 100%)}
.mklane .mb-label{position:relative;z-index:2;margin:6px 2px 10px;color:#1f1c1d}
.mklane .mb-label .tcsub{color:#4a443d}
.mkbunt{position:absolute;left:0;top:2px;width:100%;height:40px;z-index:1}
.mkstalls{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.mkcobble{height:16px;margin:0 -12px;background:repeating-linear-gradient(90deg,#b9a98c 0 26px,#a8977a 26px 28px),#b9a98c;border-top:2.5px solid #1f1c1d}
.mklane .mkfoenote{position:relative;z-index:2;margin:0 -12px;padding:8px 14px 10px;background:#a8977a;color:#1f1c1d;font-size:14px;border-top:0}
.mkstall{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;border:0;background:none;color:#1f1c1d;font:inherit;text-align:center;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.5,.5,1)}
.mkawn{display:block;width:100%;height:50px;position:relative;z-index:3;filter:drop-shadow(0 3px 0 rgba(31,28,29,.25))}
.mksign{position:absolute;z-index:4;left:50%;top:34px;transform:translateX(-50%) rotate(-2deg);max-width:86%;padding:3px 10px 4px;background:#8a5a34;border:2.5px solid #1f1c1d;border-radius:5px;
  font:700 16px/1.1 var(--display);color:#fbf3dc;text-shadow:0 2px 0 #1f1c1d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 0 rgba(31,28,29,.3)}
.mktag{position:absolute;z-index:5;right:8px;top:40px;transform-origin:50% -14px;animation:mktag 3.2s ease-in-out infinite;padding:3px 8px;background:#fbf3dc;border:2px solid #1f1c1d;border-radius:4px 4px 8px 8px;
  font:700 15px/1 var(--display);box-shadow:0 2px 0 rgba(31,28,29,.3)}
.mktag::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:12px;background:#1f1c1d}
.mktag.free{background:#f2c14e;color:#8c2f22;font-size:16px}
.mktag.short{background:#f3c9bf;color:#8c2f22}
@keyframes mktag{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}
.mkbooth{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;margin:-8px 6px 0;padding:30px 6px 0;min-height:118px;border:2.5px solid #1f1c1d;border-top:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k,#d9c7a8) 55%,#fbf3dc),color-mix(in srgb,var(--k,#d9c7a8) 35%,#fbf3dc))}
.mkwho{position:relative;z-index:1;line-height:0;transition:transform .2s}
.mkwho .pp.md{width:76px;height:76px;border-radius:10px 10px 0 0;border-bottom:0}
.mkcrate{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:92px;margin-bottom:-2px}
.mkgoods{position:absolute;bottom:22px;width:38px;height:38px;border:2px solid #1f1c1d;border-radius:8px;background:#fbfaf6;overflow:hidden;line-height:0;left:calc(2px + var(--i) * 26px);transform:rotate(calc((var(--i) - 1) * 9deg));box-shadow:0 2px 0 rgba(31,28,29,.25)}
.mkgoods:nth-child(2){bottom:28px;z-index:1}
.mkgoods svg{width:100%;height:100%}
.mkbox{position:relative;z-index:2;width:100%;padding:4px 0 3px;background:repeating-linear-gradient(0deg,#c9955e 0 8px,#b5824c 8px 10px);border:2.5px solid #1f1c1d;border-radius:3px;
  font:700 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fbf3dc;text-shadow:0 1px 0 #1f1c1d}
.mkctr{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;padding:6px 8px;background:linear-gradient(180deg,#c88b52,#a8733f);border:2.5px solid #1f1c1d;border-radius:4px;box-shadow:0 4px 0 rgba(31,28,29,.3)}
.mkctr .kindchip{border-color:#1f1c1d}
.mkcta{padding:3px 12px;background:var(--accent);color:#fbfaf6;border:2px solid #1f1c1d;border-radius:99px;font:700 15px/1.1 var(--display);box-shadow:0 2px 0 #1f1c1d;white-space:nowrap}
.mkstall:disabled{cursor:default;filter:saturate(.45) brightness(.92)}
.mkstall:disabled .mkcta{background:#8a8279}
.mkstall:focus-visible{outline:3px solid #f2c14e;outline-offset:4px;border-radius:10px}
.mouse .mkstall:not(:disabled):hover{transform:translateY(-4px)}
.mouse .mkstall:not(:disabled):hover .mkwho{transform:translateY(-6px)}
.mkstall:not(:disabled):active{transform:scale(.97)}
.mkstall.going{animation:mkgo .5s ease-out}
@keyframes mkgo{30%{transform:translateY(-6px) scale(1.03)}}
/* the day's first: free, and it says so */
.mklane.fresh .mkstall.first:not(:disabled) .mkbooth{animation:mkfirst 1.8s ease-in-out infinite}
@keyframes mkfirst{0%,100%{box-shadow:inset 0 0 0 0 rgba(242,193,78,0)}50%{box-shadow:inset 0 0 0 4px rgba(242,193,78,.9),0 0 18px 2px rgba(242,193,78,.65)}}
/* a challenger's booth */
.mkstall.mkfoe{--k:#e8b0a4}
.mkstall.mkfoe .mksign{background:#2a2730}
.mkspoil{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:84px;margin-bottom:4px;border:2.5px solid #1f1c1d;border-radius:7px;transform:rotate(6deg);
  background:repeating-linear-gradient(45deg,#2c3a5a 0 6px,#334468 6px 12px);box-shadow:0 0 0 3px #8fb0cc,0 0 16px 4px rgba(143,176,204,.75);animation:mkspoil 2.4s ease-in-out infinite}
.mkspoil i{font:700 30px/1 var(--display);font-style:normal;color:#f6d77a;text-shadow:0 2px 0 #1f1c1d}
.mkspoil small{font:600 9px/1.1 var(--display);color:#d9e2ea;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.mkstall.gt .mkspoil{box-shadow:0 0 0 3px #f2c14e,0 0 18px 5px rgba(242,193,78,.8)}
@keyframes mkspoil{0%,100%{transform:rotate(6deg) translateY(0)}50%{transform:rotate(3deg) translateY(-5px)}}
.mkgrade{display:flex;align-items:center;gap:3px;font:700 14px/1 var(--display);color:#fbf3dc;text-shadow:0 1px 0 #1f1c1d}
.mkgrade i{width:9px;height:9px;border-radius:50%;border:2px solid #1f1c1d;background:#6d4126}
.mkgrade i.on{background:#e0603f}
.mkfoe .mkcta{background:#2a2730}
@media (prefers-reduced-motion:reduce){.mktag,.mkspoil,.mklane.fresh .mkstall.first .mkbooth{animation:none}}
/* a computer: the lane leads the main column, with room to breathe */
.desk .mklane{padding:42px 22px 0}
.desk .mkstalls{grid-template-columns:repeat(2,minmax(0,310px));justify-content:space-evenly;gap:26px}
.desk .mkcobble{margin:0 -22px}
.desk .mklane .mkfoenote{margin:0 -22px}
.desk .mkbooth{min-height:150px}
.desk .mkwho .pp.md{width:104px;height:104px}
.desk .mkcrate{width:128px}
.desk .mkgoods{width:52px;height:52px;left:calc(2px + var(--i) * 36px);bottom:24px}.desk .mkgoods:nth-child(2){bottom:32px}
.desk .mksign{font-size:18px}
/* a phone: the name board to the left, clear of the price tag */
html:not(.desk) .mksign{left:6px;transform:rotate(-2deg);max-width:calc(100% - 64px);font-size:14px;padding:2px 7px 3px}
html:not(.desk) .mktag{right:4px;font-size:13px;padding:3px 6px}

/* the table: the seller's awning over them; things dealt face down, turned over best last */
.mktseller{position:relative;padding-top:52px!important;overflow:hidden}
.mktseller .mkawn{position:absolute;left:0;right:0;top:0;height:44px}
.mktbl .mkcell{position:relative;transform-origin:50% 50%}
.mktbl .mkcell .mkback{position:absolute;inset:-2px;z-index:6;border:2.5px solid #1f1c1d;border-radius:inherit;background:repeating-linear-gradient(45deg,#2c3a5a 0 7px,#334468 7px 14px);
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.mktbl .mkcell .mkback::after{content:'?';font:700 26px/1 var(--display);color:#f6d77a;text-shadow:0 2px 0 #1f1c1d}
.mktbl .mkcell.mktease{animation:charge .07s linear infinite}
.mktbl .mkcell.mktease .mkback{box-shadow:0 0 0 3px #8fb0cc,0 0 14px 4px rgba(143,176,204,.8)}
.mktbl .mkcell.mkfd{pointer-events:none}
.mkburst{position:absolute;left:50%;top:40%;width:220%;aspect-ratio:1;z-index:7;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(.2);
  background:repeating-conic-gradient(from 0deg,var(--bc) 0 10deg,transparent 10deg 30deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent);
  animation:mkburst 1s ease-out forwards}
@keyframes mkburst{0%{opacity:.95;transform:translate(-50%,-50%) scale(.2) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(40deg)}}
.mktbl .mkcell.mkglow.rR .card{box-shadow:0 0 0 3px #6f9cc4,0 0 16px 3px rgba(111,156,196,.7)}
.mktbl .mkcell.mkglow.rL .card{box-shadow:0 0 0 3px #f2c14e,0 0 20px 5px rgba(242,193,78,.8);animation:mklglow 1.6s ease-in-out infinite}
@keyframes mklglow{50%{box-shadow:0 0 0 3px #f2c14e,0 0 28px 8px rgba(242,193,78,.95)}}
.mkrib{position:absolute;z-index:4;left:-4px;top:8px;padding:2px 7px 2px 6px;border:2px solid #1f1c1d;border-radius:0 6px 6px 0;font:700 11px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#fbfaf6;pointer-events:none;box-shadow:0 2px 0 rgba(31,28,29,.3)}
.mkrib.cheap{background:#5f8a4e}.mkrib.dear{background:#c4513e}
@media (prefers-reduced-motion:reduce){.mktbl .mkcell.mkglow.rL .card{animation:none}}

/* hired: a stamp and a puff of sparks on the card as it lands */
#mkrow .card{position:relative}
.mkstamp{position:absolute;left:50%;top:38%;z-index:9;padding:3px 10px;border:3px solid #c4513e;border-radius:6px;background:rgba(251,250,246,.9);color:#a93926;font:700 20px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;
  transform:translate(-50%,-50%) rotate(-12deg);animation:mkstamp 1.3s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes mkstamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) rotate(-12deg) scale(1)}}
.mkspark{position:fixed;z-index:60;width:8px;height:8px;margin:-4px;background:#f2c14e;border:1.5px solid #1f1c1d;transform:rotate(var(--a)) translateY(0) rotate(45deg);pointer-events:none;animation:mkspark .8s ease-out forwards}
@keyframes mkspark{0%{opacity:1;transform:rotate(var(--a)) translateY(0) rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-70px) rotate(45deg) scale(.4)}}

/* How to play (game.js openHow), the same sheet in every mode: the ? on a top bar, the mode in four numbered steps,
   a few more lines for the modes with more to say, and a line under them */
.topbar .howb,.dh-rhead .howb{flex:none;margin:0}
.topbar > .back,.topbar > .menub,.topbar .rlround,.topbar .tctime{flex:none;white-space:nowrap}
/* (Highlander's bar carries the clock and the round too: on a phone it tightens up to fit the ?) */
html:not(.desk) #chess .topbar{gap:4px}
html:not(.desk) #chess .topbar h2{font-size:21px;min-width:0}
html:not(.desk) #chess .topbar .rlround{padding-left:7px;padding-right:7px}
html:not(.desk) #chess .topbar .tctime{padding-left:6px;padding-right:6px}
/* (and the daily puzzle's carries its stars) */
html:not(.desk) #puz .topbar h2{font-size:22px}
.howb path{stroke:var(--text)}
.rghow{position:absolute;right:52px;top:8px;z-index:8}
html:not(.desk) .bstage.range .rghow{display:none}
.desk .bstage.range .rghow{right:auto;left:56px}
.howh{margin:0 0 12px;font-size:22px}
.howsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;counter-reset:howst}
.howsteps li{position:relative;padding:8px 10px 9px 44px;border:2px solid var(--line);border-radius:12px;background:var(--raise);counter-increment:howst;min-width:0}
.howsteps li::before{content:counter(howst);position:absolute;left:9px;top:9px;width:26px;height:26px;border:2px solid #1f1c1d;border-radius:50%;background:var(--accent);color:#fbfaf6;font:700 15px/22px var(--display);text-align:center;box-shadow:0 2px 0 #1f1c1d}
.howsteps li:nth-child(2)::before{background:#f2c14e;color:#1f1c1d}
.howsteps li:nth-child(3)::before{background:#5d8fb0}
.howsteps li:nth-child(4)::before{background:#5f8a4e}
.howsteps b{display:block;font:600 17px/1.15 var(--display)}
.howsteps span{display:block;margin-top:2px;font-size:14px;line-height:1.25;color:var(--sub)}
.howmore{margin:12px 0 0;padding:0 4px 0 22px;display:flex;flex-direction:column;gap:5px;font-size:14.5px;line-height:1.35;color:var(--sub)}
.howfoot{margin:12px 2px 0;font-size:14.5px;line-height:1.35;color:var(--sub)}
@media (max-width:359px){ .howsteps{grid-template-columns:1fr} }

/* Ranked's emblems at a glance: earned in colour, the rest greyed inside a ring that fills as they come closer */
.mkembs{display:block;width:100%;margin:0 0 14px;padding:12px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--drop)}
.mkembh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.mkembh b{font:600 19px/1 var(--display)}
.mkembh small{font:500 15px var(--display);color:var(--sub)}
.mkembg{display:flex;flex-wrap:wrap;gap:6px}
.mkemb{position:relative;padding:3px;border-radius:10px;background:conic-gradient(#e2b54a var(--p),color-mix(in srgb,var(--line) 18%,transparent) 0)}
.mkemb .embface{border-radius:7px}
.mkemb:not(.on) .embface{filter:grayscale(1) brightness(1.1);opacity:.45}
.mkemb.on{background:none;padding:3px}
.mkemb.worn .embface{box-shadow:0 0 0 2px #f2c14e}
.mkemb.next{animation:mknext 1.8s ease-in-out infinite}
@keyframes mknext{50%{transform:translateY(-3px)}}
.mkembn{display:block;margin-top:9px;font-size:15px}
.mkembn b{font-family:var(--display);font-weight:600}
.mkembn small{display:block;margin-top:1px;font-size:13px;color:var(--sub)}
.mouse .mkembs:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.mkemb.next{animation:none}}
/* Ranked's side column on a computer: one even gap between its pieces, whatever margins they bring from elsewhere;
   the last day's line stays tucked under the gold and day row it belongs to */
.desk #market .tcside{display:flex;flex-direction:column;gap:14px}
.desk #market .tcside > *{margin-top:0;margin-bottom:0}
.desk #market .tcside > .mklast{margin-top:-8px}
.mkembs{margin:14px 0}


/* ---------- the meteor (game.js mkMeteor): a screen of its own ----------
   Layers: the sky, the ground with the stalls and the run's things on it, the falling rock, the canvas of smoke, embers and
   debris, the shockwave ring, the flash, then the captions and the closing card. Phases are classes on .mtr: on, warn,
   falling, hit, after, card (calm: reduced motion, just the card) */
.mtr{position:fixed;inset:0;z-index:90;overflow:hidden;background:#1a1416;opacity:0;transition:opacity .35s;cursor:pointer;color:#fbf3dc}
.mtr.on,.mtr.calm{opacity:1}
.mtr.gone{opacity:0;pointer-events:none}
.mtrw{position:absolute;inset:-30px;will-change:transform}
.mtrsky{position:absolute;inset:0;background:linear-gradient(180deg,#2b3358 0%,#6b4f7a 45%,#d98a6a 74%,#f2c39a 100%);transition:filter 1.4s}
.mtr.warn .mtrsky,.mtr.falling .mtrsky{filter:hue-rotate(-25deg) saturate(1.6) brightness(.85)}
.mtr.after .mtrsky{filter:saturate(.5) brightness(.45) sepia(.4)}
.mtrglow{position:absolute;right:6%;top:4%;width:46vmin;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,180,90,.65),rgba(255,120,60,.2) 50%,transparent);opacity:0;transition:opacity 1.2s}
.mtr.warn .mtrglow,.mtr.falling .mtrglow{opacity:1}
.mtrground{position:absolute;left:0;right:0;bottom:0;height:calc(26% + 30px)}
.mtrcobble{position:absolute;left:0;right:0;bottom:0;top:52px;background:repeating-linear-gradient(90deg,#6e6050 0 34px,#5d5143 34px 37px),#6e6050;border-top:3px solid #1f1c1d;transition:filter 1s}
.mtr.after .mtrcobble{filter:brightness(.55)}
.mtrstalls{position:absolute;left:0;right:0;top:-96px;height:150px}
.mtrstall{position:absolute;bottom:0;width:min(30vw,260px);height:150px}
.mtrstall.s0{left:8%}.mtrstall.s1{right:8%}
.mtrstall .mkawn{height:44px;filter:brightness(.8)}
.mtrstall i{position:absolute;left:8px;right:8px;top:36px;bottom:0;background:#4a3a34;border:2.5px solid #1f1c1d;border-top:0}
.mtrcrater{position:absolute;left:50%;top:50px;width:min(56vw,460px);height:46px;margin-left:min(-28vw,-230px);border-radius:50%;opacity:0;transform:scale(.3);
  background:radial-gradient(closest-side,#ffb35a,#c4513e 35%,#3a2622 70%,transparent);transition:opacity .2s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.mtr.hit .mtrcrater{opacity:1;transform:none;animation:mtrember 2.4s ease-in-out .6s infinite}
@keyframes mtrember{50%{filter:brightness(1.35)}}
.mtrshadow{position:absolute;left:50%;top:56px;width:10px;height:6px;margin-left:-5px;border-radius:50%;background:rgba(0,0,0,.6);opacity:0;transition:width 1.6s ease-in,margin 1.6s ease-in,height 1.6s ease-in,opacity .4s}
.mtr.falling .mtrshadow{opacity:1;width:240px;height:30px;margin-left:-120px}
.mtr.hit .mtrshadow{opacity:0}
.mtrthings{position:absolute;left:50%;bottom:calc(26% - 4px);transform:translateX(-50%);display:flex;gap:10px;align-items:flex-end}
.mtrthing{width:min(9vw,74px);aspect-ratio:1;border:2.5px solid #1f1c1d;border-radius:10px;background:#fbfaf6;overflow:hidden;line-height:0;box-shadow:0 4px 0 rgba(0,0,0,.35);
  transform:rotate(calc((var(--i) - var(--n) / 2) * 3deg));animation:mtrjit .12s linear infinite paused}
.mtrthing svg{width:100%;height:100%}
.mtr.falling .mtrthing{animation-play-state:running}
@keyframes mtrjit{50%{translate:0 -2px}}
.mtrrock{position:absolute;right:4%;top:2%;width:30px;height:30px;transform:translate(0,0) scale(.2);opacity:0}
.mtrrock i{position:absolute;inset:0;border-radius:50%;border:3px solid #1f1c1d;background:radial-gradient(circle at 35% 35%,#fff6d0,#f2a64e 40%,#c4513e 70%,#5a2a24);
  box-shadow:0 0 30px 14px rgba(255,170,80,.85),0 0 90px 30px rgba(255,110,60,.5);animation:mtrspin .4s linear infinite}
@keyframes mtrspin{to{rotate:360deg}}
.mtr.warn .mtrrock{opacity:1;transition:opacity .4s}
.mtr.falling .mtrrock{opacity:1;animation:mtrfall 1.6s cubic-bezier(.6,0,.95,.6) forwards}
@keyframes mtrfall{0%{right:4%;top:2%;transform:scale(.2)}100%{right:calc(50% - 15px);top:calc(74% - 10px);transform:scale(5)}}
.mtr.hit .mtrrock{opacity:0;transition:opacity .1s}
.mtrc{position:absolute;inset:30px;width:calc(100% - 60px);height:calc(100% - 60px);pointer-events:none}
.mtrring{position:absolute;left:50%;top:74%;width:40px;height:16px;margin:-8px 0 0 -20px;border-radius:50%;border:6px solid rgba(255,236,200,.9);opacity:0}
.mtr.hit .mtrring{animation:mtrring .9s ease-out forwards}
@keyframes mtrring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(40);border-width:1px}}
.mtrfire{position:absolute;left:50%;top:74%;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,#fffbe8,#ffd36a 25%,#ff8a3a 50%,rgba(196,81,62,.6) 70%,transparent)}
.mtr.hit .mtrfire{animation:mtrfire 1.3s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes mtrfire{0%{opacity:1;transform:scale(.1)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5) translateY(-12%)}}
.mtrflash{position:absolute;inset:0;background:#fff6e0;opacity:0;pointer-events:none}
.mtr.hit .mtrflash{animation:mtrflash 1.1s ease-out}
@keyframes mtrflash{0%{opacity:1}15%{opacity:.95}100%{opacity:0}}
.mtrcap{position:absolute;left:0;right:0;top:calc(30px + 9%);margin:0;text-align:center;font:600 clamp(18px,3vw,26px)/1.2 var(--display);text-shadow:0 2px 0 #1f1c1d;opacity:0;transform:translateY(-10px);transition:opacity .5s .3s,transform .5s .3s}
.mtrcap b{display:block;font-size:1.6em;color:#f6d77a}
.mtrcap em{font-style:normal;color:#a9e08a}
.mtr.on .mtrcap{opacity:1;transform:none}
.mtr.hit .mtrcap{opacity:0;transition:opacity .2s}
.mtrwarn{position:absolute;left:0;right:0;top:calc(30px + 26%);margin:0;text-align:center;font:400 clamp(18px,2.6vw,24px) var(--hand);color:#ffd7b0;opacity:0;transition:opacity .4s}
.mtr.warn .mtrwarn,.mtr.falling .mtrwarn{opacity:1;animation:mtrwarn .5s ease-in-out infinite alternate}
@keyframes mtrwarn{to{opacity:.4}}
.mtr.hit .mtrwarn{opacity:0;animation:none}
.mtrcard{position:absolute;left:50%;top:50%;width:min(420px,calc(100% - 92px));padding:22px 22px 18px;border:3px solid #1f1c1d;border-radius:18px;background:#fbf3dc;color:#1f1c1d;text-align:center;
  box-shadow:0 8px 0 rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-30%) scale(.9);pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.2,1.5,.4,1);cursor:default}
.mtr.card .mtrcard{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.mtrcard h2{margin:0 0 6px;font-size:clamp(24px,4vw,32px);color:#a93926}
.mtrcard p{margin:0 0 12px;font-size:16px;line-height:1.35}
.mtrrank{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 12px;border:2px solid #1f1c1d;border-radius:99px;background:#fff;font-size:16px}
.mtrrank svg,.mtrrank .art{width:28px;height:28px}
.mtrcard .btn{width:100%}
.mtrskip{position:absolute;right:46px;bottom:40px;margin:0;font-size:13px;color:rgba(251,243,220,.6);transition:opacity .3s}
.mtr.card .mtrskip{opacity:0}

/* the meteor painted by its shader (meteorfx.js): the sky behind the stalls, the rock, fire and smoke in front. While it
   paints, the CSS look it stands in for steps aside; while the shared context is lost (nogl) that look comes back */
.mtrgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
:root:not(.nogl) .mtr.gl .mtrgl{display:block}
:root:not(.nogl) .mtr.gl .mtrsky,:root:not(.nogl) .mtr.gl .mtrrock,:root:not(.nogl) .mtr.gl .mtrfire,:root:not(.nogl) .mtr.gl .mtrflash,
:root:not(.nogl) .mtr.gl .mtrring,:root:not(.nogl) .mtr.gl .mtrcrater,:root:not(.nogl) .mtr.gl .mtrglow{display:none}
.mtrgl.back{z-index:0}
.mtrground,.mtrthings{z-index:1}
.mtrgl.front{z-index:2}
.mtrc{z-index:3}
.mtrcap,.mtrwarn,.mtrcard,.mtrskip{z-index:4}
/* the meteor's light on the stalls and the things: orange as it comes, blinding at the impact */
.mtr .mtrstall,.mtr .mtrthing{filter:brightness(calc(1 + var(--lit, 0) * 1.1)) sepia(calc(var(--lit, 0) * .55)) saturate(calc(1 + var(--lit, 0) * .8))}
.mtr .mtrcobble{filter:brightness(calc(.8 + var(--lit, 0) * .7)) sepia(calc(var(--lit, 0) * .5))}
.mtr.after .mtrcobble{filter:brightness(calc(.5 + var(--lit, 0) * .5)) sepia(.4)}

/* one stop a battle: the stalls closed up behind striped shutters until the next battle (they roll down once, as it happens) */
.mklane.shut .mkbooth{overflow:hidden}
.mklane.shut .mkbooth::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;z-index:4;border-bottom:3px solid #1f1c1d;
  background:repeating-linear-gradient(180deg,#a7acae 0 9px,#8a9092 9px 11px,#6f7577 11px 12px);box-shadow:inset 0 6px 8px rgba(0,0,0,.25)}
.mklane.closing .mkbooth::after{animation:mkshutter .55s cubic-bezier(.5,0,.75,1.3) both}
.mklane.closing .mkstall:nth-child(2) .mkbooth::after{animation-delay:.12s}
@keyframes mkshutter{from{transform:translateY(-102%)}}
.mklane.shut .mkstall:disabled{filter:none;cursor:default}
.mklane.shut .mkcta{background:#5d6466}
@media (prefers-reduced-motion:reduce){.mklane.closing .mkbooth::after{animation:none}}

/* an emblem behind a name (the rank strip, leaderboard rows): its light colour only tints the dark one, and a solid
   dark band over it (no glow on the text) makes the text read on any emblem */
.rankstrip.hasemb,.lbrow.hasemb{background:linear-gradient(100deg,var(--e2) 35%,color-mix(in srgb,var(--e1) 38%,var(--e2)) 115%)}
.rankstrip.hasemb::after,.lbrow.hasemb::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(20,16,18,.56),rgba(20,16,18,.7))}
.rankstrip.hasemb > :not(canvas),.lbrow.hasemb > :not(canvas){z-index:1}
.rankstrip.hasemb .bar{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.55)}
/* shut stalls: the shutter comes down below the awning and the name board, which stay in front of it */
.mklane.shut .mkbooth::after{z-index:2}
.mklane.shut .mksign{z-index:5}

/* ---------- the backdrop (game.js backdrop): the paper behind every screen without a scene, alive ----------
   drifting light (ab), floating ink doodles of the kinds (ad) and a fine grain. Very faint: the cards come first */
#ambient{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#ambient .ab{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.55;will-change:transform}
#ambient .ab1{left:-20vmax;top:-25vmax;background:radial-gradient(closest-side,rgba(255,214,150,.55),rgba(255,214,150,0));animation:abdrift1 38s ease-in-out infinite alternate}
#ambient .ab2{right:-25vmax;top:10vmax;background:radial-gradient(closest-side,rgba(150,196,220,.32),rgba(150,196,220,0));animation:abdrift2 46s ease-in-out infinite alternate}
#ambient .ab3{left:20vmax;bottom:-35vmax;background:radial-gradient(closest-side,rgba(240,160,130,.3),rgba(240,160,130,0));animation:abdrift3 54s ease-in-out infinite alternate}
@keyframes abdrift1{to{transform:translate(18vmax,12vmax) scale(1.15)}}
@keyframes abdrift2{to{transform:translate(-16vmax,14vmax) scale(.9)}}
@keyframes abdrift3{to{transform:translate(-12vmax,-16vmax) scale(1.1)}}
#ambient .ad{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:.075;filter:grayscale(1) contrast(1.3);animation:addrift var(--d) ease-in-out var(--dl) infinite;will-change:transform}
#ambient .ad svg{width:100%;height:100%}
@keyframes addrift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}100%{transform:translate(0,0) rotate(0)}}
#ambient .agrain{position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
:root:not([data-theme="light"]) #ambient .ab{opacity:.22}
:root[data-theme="dark"] #ambient .ab{opacity:.22}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ambient .ad{opacity:.06;filter:grayscale(1) invert(1)}:root:not([data-theme="light"]) #ambient .agrain{mix-blend-mode:screen;opacity:.15}}
:root[data-theme="dark"] #ambient .ad{opacity:.06;filter:grayscale(1) invert(1)}
:root[data-theme="dark"] #ambient .agrain{mix-blend-mode:screen;opacity:.15}
@media (prefers-reduced-motion:reduce){#ambient .ab,#ambient .ad{animation:none}}

/* a thing ready to fuse: its badge glows gently */
.coll .tile .fuseb{animation:fusepulse 1.6s ease-in-out infinite}
@keyframes fusepulse{50%{box-shadow:0 0 0 3px rgba(242,193,78,.6),0 0 12px 2px rgba(242,193,78,.6)}}
@media (prefers-reduced-motion:reduce){.coll .tile .fuseb{animation:none}}

/* sellers who react: on a computer they perk up and call out as the pointer comes onto their stall */
.mkhi{position:absolute;z-index:6;left:50%;top:72px;padding:4px 10px;border:2px solid #1f1c1d;border-radius:12px;background:#fffdf6;color:#1f1c1d;font:600 14px/1.15 var(--hand);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(-50%) scale(.6) rotate(-3deg);transform-origin:50% 100%;transition:opacity .15s,transform .25s cubic-bezier(.3,1.6,.5,1);box-shadow:0 3px 0 rgba(31,28,29,.25)}
.mkhi::after{content:'';position:absolute;left:50%;bottom:-8px;width:10px;height:10px;margin-left:-5px;background:#fffdf6;border:2px solid #1f1c1d;border-top:0;border-left:0;transform:rotate(45deg)}
.mouse .mkstall:not(:disabled):hover .mkhi{opacity:1;transform:translateX(-50%) scale(1) rotate(-3deg)}
.mouse .mkstall:not(:disabled):hover .pp .pp-bob{animation:ppgloat .6s cubic-bezier(.3,1.6,.5,1) infinite alternate}
/* and at their table, what they say to what's picked, put back and bought */
.mktseller p.mksaid{font-style:normal;font-family:var(--hand);font-size:17px;color:var(--text);animation:mksaid .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes mksaid{from{transform:scale(.7);opacity:0}}

/* a new combo on the board: its cards pop, and a banner and sparks over the board */
.card.combopop{animation:combopop .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes combopop{0%{transform:none}30%{transform:translateY(-10px) scale(1.06);box-shadow:0 0 0 3px #f2c14e,0 0 18px 4px rgba(242,193,78,.8)}100%{transform:none}}
.combofx{position:fixed;z-index:70;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px 7px;border:2.5px solid #1f1c1d;border-radius:14px;background:#fff3c8;color:#1f1c1d;pointer-events:none;
  box-shadow:0 4px 0 rgba(31,28,29,.3);animation:combofx 2s cubic-bezier(.3,1.4,.5,1) forwards}
.combofx b{font:700 22px/1 var(--display);color:#c4513e;text-transform:uppercase;letter-spacing:.04em}
.combofx span{font:500 14px/1.2 var(--display);white-space:nowrap}
.combofx.big{background:#f2c14e}
.combofx.big b{font-size:28px}
@keyframes combofx{0%{opacity:0;transform:translate(-50%,-60%) scale(.5)}15%{opacity:1;transform:translate(-50%,-100%) scale(1.08)}25%{transform:translate(-50%,-100%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-130%)}}
@media (prefers-reduced-motion:reduce){.card.combopop{animation:none;box-shadow:0 0 0 3px #f2c14e}}

/* smoke wafting up from under a card set down on a board (game.js puffAt) */
.puff{position:fixed;z-index:60;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(120,106,90,.8),rgba(150,136,118,.45) 50%,rgba(170,156,138,0));animation:puff 1.25s cubic-bezier(.2,.6,.35,1) forwards}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.35)}12%{opacity:1}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(var(--ps))}}

.card .pane{position:relative}

/* the title's sky behind Ranked, Campaign and Chess (game.js skyFor): shown while one of them is up; their panels keep
   their own backgrounds */
#skywrap{display:none}
#app.skyon #skywrap{display:block}
#app.skyon #ambient{display:none}
#app.skyon .screen.on > .pad{position:relative;z-index:1}
/* the loose text over the sky (headings, labels, hints, counts) takes its colour from the sky right behind it (skyText in
   game.js): dark ink where the sky is light, cream where it's dark, each line by its own height, since at twilight the top
   of the sky is already dark while the bottom is still light. Where neither quite reads, black or white. No labels and no
   glow. Text already on paper (the side columns, panels, sheets, the stalls, a stuck board) is left as it is */
#app.skyon .screen.on :is(.skyd,.skyl){transition:color .6s}
#app.skyon .screen.on .skyd{color:#1f1c1d;--text:#1f1c1d;--sub:#1f1c1d;text-shadow:none}
#app.skyon .screen.on .skyl{color:#f3ede0;--text:#f3ede0;--sub:#f3ede0;text-shadow:none}
#app.skyon .screen.on .skyd.skymax{color:#000;--text:#000;--sub:#000}
#app.skyon .screen.on .skyl.skymax{color:#fff;--text:#fff;--sub:#fff}
/* the words inside take the same colour (a win's green or a loss's red would sink into the sky); chips keep their own */
#app.skyon .screen.on :is(.skyd,.skyl) :is(b,small,span,em,strong,i,.res):not(.kindchip,.pzdiff,.cprule,.pzstarlist i,.tccoin,.tccoin *,.mkcoin,.mkcoin *,.mnew,.tbadge){color:inherit}
#app.skyon .screen.on :is(.skyd,.skyl) .linkbtn{color:inherit}
#app.skyon .screen.on .pzstarlist:is(.skyd,.skyl) i{background:currentColor;opacity:.35}
#app.skyon .screen.on .pzstarlist:is(.skyd,.skyl) .ok i{background:#e0a92e;opacity:1}
#app.skyon .screen.on .hist .hrow:is(.skyd,.skyl){border-bottom-color:color-mix(in srgb,currentColor 30%,transparent)}
#app.skyon:has(#skywrap.sky-dim) .screen.on .topbar .back{background:#fbf3dc;border-color:#1f1c1d}
#app.skyon:has(#skywrap.sky-dim) .screen.on .topbar .back path{stroke:#1f1c1d}
#app.skyon:has(#skywrap.sky-dim) #chess .tcbench .slot-empty{border-color:rgba(246,240,226,.5);background:rgba(246,240,226,.06)}

/* Chess's shop clock over the sky: on paper, so it reads by day or night */
#app.skyon :is(#chess,#lb) .tctime{background:#fbf3dc;color:#1f1c1d;border:2px solid #1f1c1d}
#app.skyon :is(#chess,#lb) .tctime.low{background:#f3c9bf;color:#8c2f22}

/* locked campaign levels: solid, in muted paper, rather than see-through */
.cprow.locked{opacity:1;background:color-mix(in srgb,var(--raise) 82%,#8a8279);color:var(--sub);box-shadow:none;border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.cprow.locked .cpn b{color:var(--sub)}
.cprow.locked .pp{filter:grayscale(1) opacity(.7)}
.cpch.shut .cplist{opacity:1}

/* ---------- Campaign on a computer (game.js renderCampDesk) ---------- */
.desk #camp > .cpdesk{max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 28px;align-items:start;padding:22px 32px 40px}
.cpdesk > .topbar{grid-column:1 / -1}
/* the trail of chapters */
.cprail{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px;padding:4px 0 0 18px}
.cprail::before{content:'';position:absolute;left:39px;top:26px;bottom:44px;border-left:3px dashed color-mix(in srgb,var(--ink) 45%,transparent)}
.cpstop{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--drop);transition:transform .15s ease-out,background .15s}
.cpstop .cpnum{flex:none;width:34px;height:34px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:#fbf3dc;color:#1f1c1d;font:700 17px/1 var(--display)}
.cpstop.done .cpnum{background:#5f8a4e;color:#fbfaf6}
.cpstop.playing .cpnum{background:#f2c14e}
.cpstop .cpsn{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cpstop .cpsn b{font:700 17px/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpstop .cpss{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--sub)}
.cpstop .cpss .stari{width:15px;height:15px}
.cpstop .bar{height:6px}
.cpstop.on{background:#f3e2b0;color:#1f1c1d;transform:translateX(8px);box-shadow:0 3px 0 var(--drop),0 0 0 3px #f2c14e}
.cpstop.on .cpss{color:#5d564f}
.cpstop.shut{background:color-mix(in srgb,var(--raise) 82%,#8a8279)}
.cpstop.shut .cpnum{background:#c9c2b4}
.cpstop .lock{width:22px;height:22px;flex:none}
.mouse .cpstop:not(.on):hover{transform:translateX(4px)}
.cpmore{margin:4px 0 0 36px;font:400 15px var(--hand);color:var(--sub)}
/* the chosen chapter */
.cpdetail{border:2.5px solid var(--ink);border-radius:18px;background:var(--raise);box-shadow:0 5px 0 var(--drop);overflow:hidden}
.cpban{position:relative;padding:20px 24px 16px;background:linear-gradient(135deg,#f3e2b0,#e9cf8c);color:#1f1c1d;border-bottom:2.5px solid var(--ink)}
.cpban small{font:600 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#7a5a20}
.cpban h3{margin:4px 0 4px;font-size:34px;line-height:1.05}
.cpban .cpblurb{margin:0 0 12px;color:#5d564f;font-size:18px;text-shadow:none!important}
.cpban .cppack{max-width:460px;background:#fbf6ea}
.cpdetail.shut .cpban{background:linear-gradient(135deg,#ddd6c8,#c9c2b4)}
.cpshutnote{margin:16px 24px;font:400 18px var(--hand);color:var(--sub)}
.cpspot{display:flex;align-items:flex-end;gap:18px;margin:18px 24px 6px;padding:14px 18px;border:2.5px solid var(--ink);border-radius:16px;background:var(--page)}
.cpspot .pp.lg{width:132px;height:132px;flex:none}
.cpspot.boss{background:color-mix(in srgb,#c4513e 14%,var(--page))}
.cpsay{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cpq{position:relative;margin:0;padding:10px 14px;border:2px solid var(--ink);border-radius:14px;background:#fffdf6;color:#1f1c1d;font:400 19px/1.25 var(--hand)}
.cpq::before{content:'';position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:#fffdf6;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.cpsay small{font-size:14px;color:var(--sub)}
.cpspotb{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cpspotb b{font:700 24px/1.1 var(--display)}
.cpspotb .btn{flex:none;width:auto;min-width:150px}
.cpspotb b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpdetail .cplist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 24px 24px}
.cpdetail .cprow{padding:10px 14px 10px 10px}
.cpdetail .cprow .pp.md{width:64px;height:64px;flex:none}
.cpdetail .cprow.boss{grid-column:1 / -1}
.cpdetail .cprow.boss .pp.md{width:80px;height:80px}
@media (max-width:1155px){.desk #camp > .cpdesk{grid-template-columns:240px minmax(0,1fr)}.cpdetail .cplist{grid-template-columns:minmax(0,1fr)}}
/* ===== the field guide as a book (desktop, book.js) =====
   A 1160 by 740 book drawn to scale straight on the page, its page-turn arrows either side; from 1428px wide (1360 of the app's own pixels) it has the
   whole width, with the guide's header, search and filters in a drawer at the right edge, and below that they sit above it. Its
   paper, cloth and inks are the same in both themes, like the cards. A phone holds it one page at a time (.bksolo) */
#guide .fg{display:none}
.bkdesk{--pen:'Caveat','Segoe Print',cursive;--type:'Courier Prime','Courier New',monospace;--bpaper:#f7f1e1;--bedge:#e6dcc4;--cloth:#2f4a3c;--clothD:#223629;
  margin:6px 0 0}
.bkrow{display:flex;align-items:center;justify-content:center;gap:4px}
.bkfit{position:relative;flex:none}
.bkarrow{flex:none;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--ink);background:var(--raise);color:var(--text);box-shadow:0 4px 0 var(--drop);
  display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .12s}
.bkarrow svg{width:22px;height:22px}
.bkarrow:hover:not(:disabled){transform:translateY(-2px)}
.bkarrow:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--drop)}
.bkarrow:disabled{opacity:.3;cursor:default}
.bkarrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fgside{display:contents}
.fgpull{display:none}
@media (min-width:1428px){
  .desk #guide > .pad{max-width:none;padding:22px 64px 30px 12px}
  .desk #guide .bkdesk{margin:0}
  .desk #guide .fgside{display:block;position:fixed;top:0;right:0;bottom:0;z-index:30;width:300px;padding:22px 20px;background:var(--page);
    border-left:2.5px solid var(--ink);box-shadow:-8px 0 24px rgba(0,0,0,.18);transform:translateX(100%);transition:transform .28s cubic-bezier(.3,.7,.25,1),box-shadow .28s}
  .desk #guide .fgside{overflow-y:auto;visibility:hidden}
  .desk #guide .fgside:not(.open){box-shadow:none;transition:transform .28s cubic-bezier(.3,.7,.25,1),box-shadow .28s,visibility 0s .28s}
  .desk #guide .fgside.open{transform:none;visibility:visible}
  .desk #guide .fghead{position:static;margin:0;padding:0;box-shadow:none;background:none}
  .desk #guide .fgtools{flex-wrap:wrap}
  .desk #guide .fgq{flex:1 1 100%}
  .desk #guide .fghead .chips{flex-wrap:wrap;overflow:visible}
  /* the drawer's tab, at the screen's edge and riding on the drawer's left edge when it's open */
  .desk #guide .fgpull{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;top:22px;right:0;z-index:31;width:46px;padding:12px 0;
    border:2.5px solid var(--ink);border-right:0;border-radius:12px 0 0 12px;background:var(--raise);color:var(--text);cursor:pointer;box-shadow:-3px 4px 0 var(--drop);
    transition:right .28s cubic-bezier(.3,.7,.25,1),transform .15s}
  .desk #guide .fgside.open + .fgpull{right:300px}
  .desk #guide .fgpull svg{width:22px;height:22px}
  .desk #guide .fgpull span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 15px var(--display);letter-spacing:.04em}
  .desk #guide .fgpull b{min-width:22px;height:22px;border-radius:11px;background:var(--ink);color:var(--page);font:700 13px/22px var(--display);text-align:center}
  .desk #guide .fgpull b[hidden]{display:none}
  .desk #guide .fgpull:hover{transform:translateX(-3px)}
  .desk #guide .fgpull:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
}
@media (min-width:1428px) and (prefers-reduced-motion:reduce){.desk #guide :is(.fgside,.fgside:not(.open),.fgpull){transition:none}}
.bkbook{position:absolute;left:0;top:0;width:1160px;height:740px;transform-origin:0 0;perspective:2600px}
.bkshift{position:absolute;inset:0;transition:transform .6s cubic-bezier(.45,.05,.3,1)}
.bkshift.front{transform:translateX(-280px)}.bkshift.rear{transform:translateX(280px)}
.bkhalf{position:absolute;top:10px;width:560px;height:720px}
.bkL{left:20px}.bkR{left:580px}
.bkpg{position:absolute;inset:0;overflow:hidden;background:var(--bpaper);color:#1f1c1d;font-family:var(--hand);font-size:17px;line-height:1.3;
  background-image:radial-gradient(#d9cfb6 1px,transparent 1.2px);background-size:22px 22px;background-position:11px 11px}
.bkpg.none{display:none}
.bkL .bkpg{border-radius:10px 2px 2px 10px;box-shadow:inset -26px 0 30px -22px rgba(60,40,10,.45),-3px 4px 0 var(--bedge),-6px 8px 0 #d3c6a6,0 14px 30px rgba(0,0,0,.25)}
.bkR .bkpg{border-radius:2px 10px 10px 2px;box-shadow:inset 26px 0 30px -22px rgba(60,40,10,.45),3px 4px 0 var(--bedge),6px 8px 0 #d3c6a6,0 14px 30px rgba(0,0,0,.25)}
.bkpg.notes{background-image:repeating-linear-gradient(transparent 0 31px,#cfdde6 31px 32px);background-position:0 120px}
.bkrun{position:absolute;top:16px;left:40px;right:40px;display:flex;justify-content:space-between;font:500 11px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#5f5646}
.bkfolio{position:absolute;bottom:14px;font:500 12px var(--display);color:#5f5646}
.bkL .bkfolio,.bkleaf.onR .bkface.b .bkfolio,.bkleaf.onL .bkface.f .bkfolio{left:40px}
.bkR .bkfolio,.bkleaf.onR .bkface.f .bkfolio,.bkleaf.onL .bkface.b .bkfolio{right:40px}
.bkleaf{position:absolute;top:10px;width:560px;height:720px;transform-style:preserve-3d;z-index:20}
.bkleaf[hidden]{display:none}
.bkleaf.onR{left:580px;transform-origin:0 50%}.bkleaf.onL{left:20px;transform-origin:100% 50%}
.bkface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bkface.b{transform:rotateY(180deg)}
.bkface .bkpg{box-shadow:0 10px 24px rgba(0,0,0,.2)}
.bkcorner{position:absolute;bottom:10px;width:110px;height:110px;z-index:15;cursor:pointer;border:0;padding:0;opacity:.6;transition:opacity .15s}
.bkcorner:hover,.bkcorner:focus-visible{opacity:1}
.bkhn{left:1030px;background:linear-gradient(135deg,transparent 72%,rgba(0,0,0,.08) 72%,rgba(255,255,255,.7) 78%,transparent 84%)}
.bkhp{left:20px;background:linear-gradient(225deg,transparent 72%,rgba(0,0,0,.08) 72%,rgba(255,255,255,.7) 78%,transparent 84%)}
.bkcorner[hidden]{display:none}
.bktabs{position:absolute;left:1140px;top:34px;display:flex;flex-direction:column;gap:5px}
.bktabs[hidden]{display:none}
.bktabs button{width:42px;height:46px;border:2px solid #1f1c1d;border-left:0;border-radius:0 9px 9px 0;background:var(--k);cursor:pointer;display:grid;place-items:center;padding:0 0 0 3px;box-shadow:2px 3px 0 rgba(0,0,0,.25);font:700 18px var(--display);color:#1f1c1d;transition:transform .15s}
.bktabs button svg{width:22px;height:22px}
.bktabs button[aria-current="true"],.bktabs button:hover{transform:translateX(7px)}
.bktabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bkctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.bkctrl .btn{width:auto}
.bkctrl .btn[hidden]{display:none}
.bkwhere{font:500 15px var(--display);min-width:220px;text-align:center;color:var(--text)}
/* a phone: one page at a time, as wide as the screen (book.js solo), the chapter tabs in a row over it and the arrows
   and where you are under it; the guide's search and filters fold away behind a button by the title */
.bksolo{margin:0 -16px}
.bksolo .bkfit{margin:0 auto;touch-action:pan-y}
.bksolo .bkbook{width:580px}
.bksolo .bkL{display:none}
.bksolo .bkR,.bksolo .bkleaf.onR{left:10px}
.bksolo .bkhn{left:460px}
.bksolo .bkhp{left:10px}
.bksolo .bkcover.bkback{border-radius:4px 14px 14px 4px;box-shadow:inset 18px 0 0 var(--clothD),6px 8px 0 #1a2a20,0 18px 34px rgba(0,0,0,.35)}
.bkpg.blank{background-image:none;background-color:var(--bedge)}
.bksolo .bktabs{position:static;flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 0;margin-bottom:-2px}
.bksolo .bktabs::-webkit-scrollbar{display:none}
/* (on the covers the tabs keep their room, so the page doesn't jump when they come back) */
.bksolo .bktabs[hidden]{display:flex;visibility:hidden}
.bksolo .bktabs button{flex:none;width:auto;height:38px;display:flex;align-items:center;gap:5px;padding:0 10px;border:2px solid #1f1c1d;border-bottom:0;border-radius:9px 9px 0 0;box-shadow:none;font:600 14px var(--display);transform:translateY(5px)}
.bksolo .bktabs button svg{width:18px;height:18px}
.bksolo .bktabs button[aria-current="true"],.bksolo .bktabs button:hover{transform:none}
.bksolo .bkctrl{padding:0 16px;gap:8px;flex-wrap:nowrap}
.bksolo .bkwhere{flex:1;min-width:0;font-size:14px;line-height:1.2}
.bksolo .bkctrl + .bkctrl:has(.bkfile[hidden]){display:none}
html:not(.desk) #guide > .pad{position:relative}
html:not(.desk) #guide .fgside:not(.open) :is(.fgtools,.fgf,.fgkc,.fgsum){display:none}
html:not(.desk) #guide .fghead{padding-right:64px}
html:not(.desk) #guide .fgside.open .fghead{padding-right:16px}
html:not(.desk) #guide .fgside.open .fghead .topbar{padding-right:48px}
html:not(.desk) #guide .fgpull{display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:16px;z-index:6;width:40px;height:40px;padding:0;
  border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);box-shadow:0 3px 0 var(--drop)}
html:not(.desk) #guide .fgpull[aria-expanded="true"]{background:var(--ink);color:var(--page)}
html:not(.desk) #guide .fgpull svg{width:20px;height:20px}
html:not(.desk) #guide .fgpull span{display:none}
html:not(.desk) #guide .fgpull b{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#fbfaf6;font:700 12px/20px var(--display);text-align:center}
html:not(.desk) #guide .fgpull b[hidden]{display:none}
/* the cover */
.bkcover{position:absolute;inset:0;border-radius:4px 14px 14px 4px;background:var(--cloth);color:#efe6cf;overflow:hidden;cursor:pointer;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px),repeating-linear-gradient(-45deg,rgba(0,0,0,.08) 0 2px,transparent 2px 6px);
  box-shadow:inset 18px 0 0 var(--clothD),inset 22px 0 10px rgba(0,0,0,.25),6px 8px 0 #1a2a20,0 18px 34px rgba(0,0,0,.35)}
.bkcover.bkback{border-radius:14px 4px 4px 14px;cursor:default;box-shadow:inset -18px 0 0 var(--clothD),-6px 8px 0 #1a2a20,0 18px 34px rgba(0,0,0,.35)}
.bklab{position:absolute;left:92px;right:60px;top:120px;background:#efe6cf;color:#1f1c1d;border:2.5px solid #1f1c1d;border-radius:8px;padding:22px 24px;text-align:center;box-shadow:inset 0 0 0 6px #efe6cf,inset 0 0 0 8px #1f1c1d}
.bklab small{display:block;font:500 13px var(--display);letter-spacing:.2em;text-transform:uppercase}
.bklab b{display:block;font:700 46px/1 var(--display);text-transform:uppercase;margin:6px 0}
.bklab b span{color:var(--accent)}
.bklab em{font-style:normal;font-family:var(--hand);font-size:18px}
.bkplate{position:absolute;left:200px;top:340px;width:170px;padding:8px 10px;text-align:center;background:linear-gradient(#e3c77d,#b8933f);color:#2a2112;border:2px solid #1f1c1d;border-radius:6px;font:600 14px var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #14110f}
.bkplate b{font-size:28px;letter-spacing:.02em}
.bkplate small{display:block;font-size:11px;letter-spacing:.12em;opacity:.8}
.bkown{position:absolute;left:150px;right:120px;bottom:120px;border-bottom:2px solid #efe6cf;padding:0 0 4px;font:500 12px var(--display);letter-spacing:.14em;text-transform:uppercase}
.bkown i{font:700 34px var(--pen);letter-spacing:0;text-transform:none;font-style:normal;margin-left:10px;color:#fff}
.bkband{position:absolute;top:0;bottom:0;right:58px;width:14px;background:#14110f;box-shadow:inset 3px 0 0 #2b2622}
.bkopen{position:absolute;right:80px;bottom:40px;font:700 26px var(--pen);color:#f4d98b;transform:rotate(-6deg)}
.bkstack{position:absolute;left:96px;bottom:40px;z-index:2;padding:12px 16px 10px;background:#fbfaf6;color:#1f1c1d;border:2px solid #1f1c1d;border-radius:7px;font:700 22px var(--pen);transform:rotate(-4deg);cursor:pointer;
  box-shadow:4px 4px 0 #fbfaf6,4px 4px 0 2px #1f1c1d,8px 8px 0 #fbfaf6,8px 8px 0 2px #1f1c1d,0 10px 16px rgba(0,0,0,.35)}
.bkstack::after{content:"";position:absolute;top:-7px;bottom:-7px;right:22%;width:6px;background:#c0412b;border-radius:3px}
/* stamps, handwriting, rings */
.bkst{position:absolute;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid var(--sc);outline:1.5px solid var(--sc);outline-offset:3px;color:var(--sc);
  font:700 18px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:7px 11px;border-radius:6px;transform:rotate(var(--r));mix-blend-mode:multiply}
.bkst small{font:600 11px var(--display);letter-spacing:.12em;margin-top:3px}
.bkst.round{position:relative;border-radius:50%;width:100px;height:100px;padding:0;font-size:14px}
.bkst.ghost{--sc:#5f5646;border-style:dashed;outline:0}
.bkst.thump{animation:bkthump .5s cubic-bezier(.3,1.6,.5,1) both}
.bkst.bkwait,.bkcard.bkland{visibility:hidden}
@keyframes bkthump{0%{transform:rotate(var(--r)) scale(2.2);opacity:0}60%{opacity:.95}100%{transform:rotate(var(--r)) scale(1);opacity:.85}}
.bksc{position:absolute;font:700 24px/1.05 var(--pen);color:#2f4f8f;transform:rotate(var(--r));max-width:300px}
.bksc.old{font-weight:400;font-style:italic;color:#76593c;letter-spacing:.02em}
.bksc s{text-decoration-thickness:2px}
.bkring{position:absolute;width:130px;height:130px;border-radius:50%;border:7px solid rgba(124,82,40,.15);transform:rotate(20deg)}
.bkdood{position:absolute;font:700 30px var(--pen);color:#5d5a57;opacity:.75}
/* pockets and the cards in them */
.bkpk{position:absolute;display:block;border-radius:9px;background:rgba(255,255,255,.3);border:1.5px solid rgba(110,100,80,.42);box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.12)}
.bkpk::before{content:"";position:absolute;left:5px;right:5px;top:13%;height:2px;background:rgba(255,255,255,.75);border-radius:2px;z-index:6;pointer-events:none}
.bkpk::after{content:"";position:absolute;inset:0;border-radius:9px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 42%,transparent 54%);pointer-events:none;z-index:6}
.bkpk.lg{left:36px;top:46px;width:206px;height:282px}
.bksmall{position:absolute;left:36px;top:352px;display:flex;gap:14px}
.bksm{display:flex;flex-direction:column;align-items:center;gap:3px}
.bksm .bkpk{position:relative;width:96px;height:130px}
.bkpk.sm{position:relative;width:84px;height:112px}
.bkpl{font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:#5f5646;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bkcard{position:absolute;inset:5px;display:flex;cursor:pointer}
.bkcard > .card{flex:1}
.bksm .bkcard .card .foot{display:none}
.bkcnt{position:absolute;z-index:7;right:-4px;top:-8px;background:#fbfaf6;border:1.5px solid #1f1c1d;border-radius:6px;font:600 13px/18px var(--display);padding:0 6px;color:#1f1c1d}
.bkcnt.gone{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5f5646;top:auto;bottom:-10px;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap}
.bkghost{position:absolute;inset:5px;border:2px dashed #b7ad97;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#5f5646;overflow:hidden;text-align:center}
.bkghost .bksk{position:absolute;inset:0;filter:grayscale(1) contrast(2.6) brightness(1.45);opacity:.22;mix-blend-mode:multiply}
.bkghost .bksk svg{width:100%;height:100%;display:block}
.bkghost b{position:relative;font:700 17px var(--display);letter-spacing:.06em}
.bkghost.big b{font-size:34px}
.bkghost small{position:relative;font:500 10px var(--display);letter-spacing:.08em;text-transform:uppercase}
.bkmini{position:absolute;inset:5px;display:flex;flex-direction:column;border:2px solid #1f1c1d;border-radius:6px;background:#fbfaf6;overflow:hidden;color:#1f1c1d}
.bkmp{position:relative;flex:1;min-height:0;background:var(--k);border-bottom:1.5px solid #1f1c1d}
.bkmp svg{position:absolute;inset:0;width:100%;height:100%}
.bkmn{font:600 9.5px/1 var(--display);padding:3px 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.bkflag{position:absolute;top:0;left:0;border-top:11px solid var(--r);border-right:11px solid transparent}
.bkfly{position:absolute;left:0;top:0;z-index:40;display:flex;filter:drop-shadow(0 18px 16px rgba(0,0,0,.35));pointer-events:none}
.bkfly > .card{flex:1}
/* a thing's page */
.bkno{position:absolute;left:268px;top:40px;font:700 15px var(--display);letter-spacing:.14em;color:#96331f}
.bkname{position:absolute;left:266px;top:60px;right:30px;font:700 44px/1 var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkname.long{font-size:32px;top:68px}
.bkname.un{color:#b7ad97}
.bkmeta{position:absolute;font:500 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#5f5646}
.bkcol{position:absolute;left:266px;top:276px;bottom:34px;width:258px;display:flex;flex-direction:column;gap:12px}
.bklore{display:flex;flex-direction:column;gap:6px;padding-left:2px}
.bklore p{margin:0;padding-left:10px;border-left:3px solid #d6ccb5;font-size:17px;line-height:1.25}
.bklore p.t1{border-color:#a8b4bb}.bklore p.t2{border-color:#e2b54a}.bklore p.lk{color:#5f5646}
.bkidx{position:relative;margin-top:auto;transform:rotate(1.2deg);background:#fdfbf4;border:1px solid #d6ccb5;box-shadow:0 2px 4px rgba(0,0,0,.18);padding:10px 13px 10px;font:12.5px/1.35 var(--type);color:#2a2622;
  background-image:linear-gradient(transparent 26px,#e88b7a 26px 27px,transparent 27px)}
.bkidx h5{margin:0 0 9px;font:700 11px var(--type);letter-spacing:.12em;text-transform:uppercase;color:#96331f}
.bkidx p{margin:0 0 5px}
.bkclip{position:absolute;right:20px;top:-16px;width:18px;height:50px;border:3px solid #8e979b;border-radius:9px;transform:rotate(8deg)}
/* binder sheets, contents, the owner's page, stickers, journey */
.bkchap{position:absolute;left:40px;top:38px;font:700 52px/.95 var(--display);text-transform:uppercase}
.bkchap.sm{font-size:40px}
.bkkg{position:absolute;left:452px;top:30px;width:70px;height:70px}
.bkkg svg{width:100%;height:100%}
.bkbind{position:absolute;left:40px;top:128px;display:grid;grid-template-columns:repeat(5,84px);gap:9px 10px}
.bkslot{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit}
.bkslot .bkpl{font-size:9.5px;letter-spacing:.04em;width:84px;text-align:center}
.bkslot .bkpk{transition:transform .15s}
.bkslot:hover .bkpk{transform:translateY(-3px)}
.bkslot:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}
.bkbind ~ .bkst{font-size:14px;padding:6px 9px}
.bkranks{position:absolute;left:40px;right:40px;top:262px;display:grid;grid-template-columns:repeat(4,100px);gap:16px 18px}
.bktally{position:absolute;font:500 18px var(--display);color:#5b5346}
.bktally b{font-size:30px;color:#1f1c1d}.bktally span{color:#b7ad97;margin:0 4px}
.bktoc{position:absolute;left:40px;right:40px;top:130px;display:flex;flex-direction:column}
.bktoc button{display:grid;grid-template-columns:1fr auto 56px;align-items:center;gap:12px;padding:8px 0;border:0;border-bottom:1.5px dotted #b7ad97;background:none;color:inherit;cursor:pointer;text-align:left}
.bktoc button b{font:600 21px var(--display);text-transform:uppercase}
.bktoc button span{font:500 14px var(--display);color:#5f5646;text-align:right}
.bktoc button:hover b{color:#c0412b}
.bktoc button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bkstk{position:absolute;width:92px;height:92px;border-radius:50%;background:var(--bg);color:var(--fg);border:5px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.28);transform:rotate(var(--r));display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.bkstka{width:56%;height:46%}
.bkstka svg{width:100%;height:100%}
.bkstk b{font:700 11px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;text-align:center;padding:0 6px;margin-top:2px}
.bkstk.blank{background:none;border:2.5px dashed #b7ad97;box-shadow:none;color:#5f5646}
.bkstk.peel{animation:bkpeel .6s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bkpeel{0%{transform:rotate(calc(var(--r) - 30deg)) scale(1.5);opacity:0}100%{transform:rotate(var(--r)) scale(1);opacity:1}}
/* (five to a row, so every sticker there is, retired ones too, fits above the folio) */
.bkalbum{position:absolute;left:24px;right:24px;top:128px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px 4px;justify-items:center}
.bkalbum .bkstk{position:relative;width:84px;height:84px}
.bkalbum .bkstk b{font-size:10px;padding:0 4px}
.bkjour{position:absolute;left:30px;right:30px;top:120px;height:540px}
.bkjour .bkst.round{position:absolute;width:112px;height:112px}
/* a stamp or sticker's slip: what it takes to earn it (book.js tipOn) */
.bkst[data-how],.bkstk[data-how]{cursor:pointer}
.bkst[data-how]:focus-visible,.bkstk[data-how]:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
#bktip{position:fixed;z-index:70;width:240px;background:#fbf4e2;color:#1f1c1d;border:2px solid #1f1c1d;border-radius:4px;box-shadow:0 5px 0 rgba(0,0,0,.18);padding:9px 12px 10px;pointer-events:none;font-family:var(--display);animation:hovin .14s ease-out;transform:rotate(-1deg)}
#bktip b{display:block;font-size:18px;line-height:1.1}
#bktip .bktk{display:inline-block;margin-top:3px;font:700 11px var(--display);text-transform:uppercase;letter-spacing:.08em;color:#5f5646}
#bktip.got .bktk{color:#3c7a52}
#bktip p{margin:4px 0 0;font-family:var(--hand);font-size:17px;line-height:1.25}
#bktip small{display:block;margin-top:5px;font:600 13px var(--display);color:#6b604c}
@media (prefers-reduced-motion:reduce){.bkshift{transition:none}.bkst.thump,.bkstk.peel{animation:none}}

/* players' puzzles: the list (each puzzle a row: its name and maker, how hard and how often solved, your stars) and
   the maker (a name, their board, the things players build with, the slots, and every thing in the game to drag in) */
.upzpage{max-width:760px}
.upzbar{display:flex;gap:10px;margin:10px 0 14px}
.upzlist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.upzrow{display:flex;gap:8px;align-items:center}
.upzopen{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;text-align:left;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--card,#fbfaf6);box-shadow:0 3px 0 var(--ink);font:inherit;color:#1f1c1d;cursor:pointer}
.upzopen:focus-visible{outline:3px solid #2f6fd6;outline-offset:2px}
.upzname{display:flex;flex-direction:column;min-width:0}
.upzname b{font-family:var(--display);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upzname small,.upzmeta small,.upzme small{font-size:12px;opacity:.75}
.upzmeta{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
@media (max-width:520px){.upzopen{grid-template-columns:minmax(0,1fr) auto}.upzmeta{grid-column:1;align-items:flex-start;flex-direction:row;gap:8px}}
.upzform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
@media (max-width:520px){.upzform{grid-template-columns:1fr}}
.upzf{display:flex;flex-direction:column;gap:4px;font-size:13px}
.upzf input{font:inherit;font-size:16px;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;background:#fffdf7;color:#1f1c1d;min-width:0}
.upzpool{display:flex;flex-wrap:wrap;gap:8px;min-height:96px;padding:10px;border:2px dashed rgba(31,28,29,.35);border-radius:12px;margin-bottom:10px}
.upzpool.dropin{border-color:#3b8a4a;background:rgba(59,138,74,.08)}.upzpool.nofit{border-color:#b3362a}
.upzpool .hint{margin:auto}
.upzslots{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.upzslots b{font-family:var(--display);font-size:17px;min-width:64px;text-align:center}
.upzacts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.upzcat{display:flex;flex-wrap:wrap;gap:6px}
.desk .upzgrid .pzside{max-height:calc(calc(100vh / var(--zv)) - 140px);overflow:auto}

/* ===== characters: faces (avatar.js) and the creator ===== */
.pp.face{background:#e9e1cf}
.pp.face img{width:100%;height:100%;display:block}
.mkpad{padding-bottom:28px}
.mkwrap{display:flex;flex-direction:column;gap:16px}
.mkside{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.mkkind,.mkmood{display:flex;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.mkkind button,.mkmood button{flex:1;min-height:44px;border:0;background:var(--raise);color:var(--text);font:600 15px var(--display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.mkkind button + button,.mkmood button + button{border-left:2px solid var(--ink)}
.mkkind button[aria-pressed="true"],.mkmood button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.mkmood button{min-height:40px;font-size:13px}
.mkpic{align-self:center;width:min(280px,calc(72vw / var(--zv)));aspect-ratio:1;border:3px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 5px 0 var(--drop);background:#e9e1cf}
.mkpic img{width:100%;height:100%;display:block}
.mkhint{margin:0;text-align:center;color:var(--sub);font-size:16px}
.mkacts{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
.mkacts .btn{margin:0}
.mktabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.mktabs::-webkit-scrollbar{display:none}
.mktabs button{flex:none;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:22px;background:var(--raise);color:var(--text);font:600 14px var(--display);letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.mktabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.mkpanel{display:flex;flex-direction:column;gap:16px}
.mkgrp h4{margin:0 0 8px;font:500 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.mknote{margin:0;color:var(--sub);font-size:16px;line-height:1.3}
.mktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.mktiles.wide{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.mkopt{display:flex;flex-direction:column;padding:0;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--raise);color:var(--text);cursor:pointer;box-shadow:0 3px 0 var(--drop);text-align:center}
.mkopt img{width:100%;aspect-ratio:1.5;object-fit:contain;display:block;background:#e9e1cf;border-bottom:2px solid var(--ink)}
.mktiles.wide .mkopt img{aspect-ratio:1}
.mkopt span{font:600 12px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:6px 4px}
.mkopt small{font-size:12px;line-height:1.15;padding:0 6px 6px;color:#4f74a0}
.mkopt[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}
.mkopt.pencil{border:2px dashed #7fa2c9;box-shadow:none;cursor:default}
.mkopt.pencil img{filter:grayscale(1) contrast(.55) brightness(1.25);border-bottom:1.5px dashed #7fa2c9}
.mkopt.pencil span{color:#4f74a0}
.mksws{display:flex;flex-wrap:wrap;gap:10px}
.mksw{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);padding:0;cursor:pointer}
.mksw[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:3px}
.mktogs{display:flex;flex-wrap:wrap;gap:8px}
.mktog{min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:10px;background:var(--raise);color:var(--text);font:17px var(--hand);cursor:pointer}
.mktog[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.desk .mkwrap{display:grid;grid-template-columns:380px minmax(0,1fr);gap:36px;align-items:start}
.desk .mkside{position:sticky;top:0}
.desk .mkpic{width:100%}
.desk .mktabs{flex-wrap:wrap;overflow:visible}
/* the menu's character row and the first-run question */
.lookask{display:flex;flex-direction:column;gap:14px}
.lookaskpp{display:flex;align-items:flex-end;gap:12px}
.lookbub{position:relative;margin:0 0 10px;background:#fff;color:#1f1c1d;border:2px solid var(--ink);border-radius:16px;padding:10px 12px;font:19px/1.2 var(--hand)}
.lookpick{display:flex;flex-direction:column;gap:12px}
.lookopt{display:flex;align-items:center;gap:14px;padding:10px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--raise);color:var(--text);box-shadow:0 4px 0 var(--drop);cursor:pointer;text-align:left}
.lookopt b{display:block;font:700 20px var(--display);text-transform:uppercase}
.lookopt small{font-size:16px;color:var(--sub)}
.lookfan{display:flex;flex:none}
.lookfan .pp + .pp{margin-left:-16px}
/* a new player's welcome (game.js firstWelcome): the game in three numbered steps */
.welsteps{list-style:none;counter-reset:wel;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.welsteps li{counter-increment:wel;display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:center}
.welsteps li::before{content:counter(wel);grid-row:1 / 3;width:34px;height:34px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:var(--accent);color:#fffaf0;font:700 18px var(--display)}
.welsteps b{font:700 18px var(--display);text-transform:uppercase}
.welsteps span{font-size:16px;color:var(--sub)}
/* faces in their places: the leaderboards, Highlander's seats, a knocked-out face */
.lbrow .pp.face.lbic{width:36px;height:36px;border-width:1.5px;border-radius:6px}
.pp.face.lbface{width:42px;height:42px;border-radius:8px}
.pp.face.out{opacity:.55;filter:grayscale(1)}
.tcnb .pp.face.sm{width:38px;height:38px;border-radius:7px}
.panel.vs .vspp .pp.face{box-shadow:0 4px 0 var(--drop)}
/* on a computer the two sides of the versus screen stand next to each other, big, with "versus" between them */
.desk .panel.vs{max-width:760px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:18px}
.desk .panel.vs .vsboss{grid-column:1 / -1;justify-self:center}
.desk .panel.vs .vsx{align-self:center;margin:0}
.desk .panel.vs .vspp .pp.lg{width:240px;height:240px;border-width:3px;border-radius:18px}
.frhead{display:flex;align-items:center;gap:12px}
.frhead .nameplate{flex:1;min-width:0;margin:0}
/* any skin colour: a colour wheel that opens the picker */
.mkany{position:relative;display:inline-block;overflow:hidden;background:conic-gradient(#e37b6a,#f2d06b,#7fb069,#6f9fd8,#b48fd6,#e37b6a);cursor:pointer}
.mkany.on{outline:3px solid var(--accent);outline-offset:3px;background:radial-gradient(circle,var(--own) 0 54%,transparent 56%),conic-gradient(#e37b6a,#f2d06b,#7fb069,#6f9fd8,#b48fd6,#e37b6a)}
.mkany input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.mkany:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== the profile: a comic's first issue (game.js renderProfile) ===== */
.pfpad .topbar .btn,.ylpad .topbar .btn{margin:0;flex:none;width:auto}
.pfpad .topbar h2,.hspad .topbar h2,.ylpad .topbar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pfwrap{display:flex;flex-direction:column;gap:20px}
.pfcover{border:3px solid var(--ink);background:#fbfaf6;box-shadow:6px 6px 0 var(--drop);display:flex;flex-direction:column;overflow:hidden;color:#1f1c1d}
.pfhead{display:flex;border-bottom:3px solid #1f1c1d;min-height:110px}
.pfcorner{width:92px;flex:none;border-right:3px solid #1f1c1d;background:#f6b04a;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 0;font:600 12px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.pp.face.pfface{width:60px;height:60px;border-radius:10px;border-width:2.5px}
.pfmast{container-type:inline-size;flex:1;min-width:0;background:#a8301d;color:#fbfaf6;padding:8px 14px 6px;display:flex;flex-direction:column;justify-content:center}
.pfwhen{font:600 14px/1 var(--display);letter-spacing:.3em;text-transform:uppercase}
.pfname{font:700 60px/.95 var(--display);font-size:min(60px,calc(100cqw / (var(--n,10) * .56)));white-space:nowrap;text-transform:uppercase;color:#f6dd8c;-webkit-text-stroke:1.5px #1f1c1d;text-shadow:3px 3px 0 #1f1c1d}
.pfatt{font:700 18px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;align-self:flex-end;margin-top:3px}
.pfsplash{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:#3a78c9}
.pfsplash > .art{position:absolute;inset:0;width:100%;height:100%}
.pfsplash::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background-image:radial-gradient(rgba(31,28,29,.32) 1.1px,transparent 1.5px);background-size:7px 7px;opacity:.5;pointer-events:none}
.pfstarring{position:absolute;left:12px;bottom:96px;background:#1f1c1d;color:#fbfaf6;padding:7px 11px;font:600 15px/1.15 var(--display);text-transform:uppercase;letter-spacing:.04em;z-index:2}
.pfburst{position:absolute;top:16px;right:10px;width:128px;height:128px;background:#f6dd8c;clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 46%,79% 58%,90% 84%,63% 76%,52% 100%,40% 77%,14% 90%,22% 63%,0 52%,21% 38%,10% 12%,36% 22%);display:flex;align-items:center;justify-content:center;text-align:center;font:700 17px/1.05 var(--display);text-transform:uppercase;color:#1f1c1d;z-index:2}
.pfgold{position:absolute;right:14px;bottom:100px;width:84px;height:84px;border-radius:50%;background:#fbfaf6;border:2px solid #1f1c1d;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 12px/1 var(--display);text-transform:uppercase;text-align:center;transform:rotate(-8deg);z-index:2}
.pfgold b{font-size:30px;color:#d0a23e;-webkit-text-stroke:1px #1f1c1d}
.pfboard{position:absolute;left:0;right:0;bottom:0;height:84px;background:#b7864f;border-top:3px solid #1f1c1d;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;z-index:2}
.pfmini{flex:0 1 48px;min-width:0;aspect-ratio:3/4;border:2px solid #1f1c1d;border-radius:5px;overflow:hidden;background:#f6f1e4}
.pfmini .art{width:100%;height:100%;display:block}
.pffoot{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:3px solid #1f1c1d}
.pffoot p{margin:0;flex:1;font:16px/1.2 var(--hand)}
.pfbar{display:flex;flex-direction:column;align-items:center;background:#fff;border:1.5px solid #1f1c1d;padding:4px 6px 2px;flex:none}
.pfbar svg{width:90px;height:26px}
.pfbar small{font:600 10px/1.2 var(--display);letter-spacing:.18em}
.pfstamp{flex:none;width:48px;height:48px;border:2px solid #1f1c1d;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font:600 8px/1.05 var(--display);text-transform:uppercase;transform:rotate(6deg)}
.pfhub{display:flex;flex-direction:column;gap:16px;min-width:0}
.pfrow2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}
.pfrow4{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.pfp{position:relative;background:var(--raise);border:2px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--drop);padding:12px 14px}
.pfp:has(.pfcap){padding-top:30px}
.pfp p{margin:4px 0 0;color:var(--sub);font-size:16px}
.pfp .k{font:500 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.pfcap{position:absolute;top:-2px;left:-2px;background:#f6dd8c;color:#1f1c1d;border:2px solid var(--ink);font:600 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px}
.pfv{font:600 24px/1.1 var(--display)}
.pfv small{font:400 15px var(--hand);color:var(--sub)}
.pfrank{display:flex;gap:12px;align-items:center}
.pfrank > div{flex:1;min-width:0}
.pfico{width:52px;height:52px;flex:none;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#c9adae}
.pfico .art{width:100%;height:100%}
.pfiss{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:10px}
.pfi{display:flex;flex-direction:column;gap:4px;text-align:left;background:none;border:0;padding:0;color:var(--text);cursor:pointer;font:inherit}
.pfipic{display:block;height:96px;border:2px solid var(--ink);overflow:hidden}
.pfipic .art{width:100%;height:100%}
.pfi b{font:15px/1.1 var(--hand);font-weight:400}
.pfi small{font:500 10px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.pfcards{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.pfcard{width:96px;height:132px;padding:4px;border:2px solid #1f1c1d;border-radius:8px;box-shadow:0 3px 0 #1f1c1d;cursor:pointer;flex:none}
.pfcin{display:flex;flex-direction:column;height:100%;background:#f6f1e4;border:1.5px solid #1f1c1d;border-radius:5px;overflow:hidden;color:#1f1c1d;text-align:left}
.pp.face.pfcpic{width:100%;height:78px;border:0;border-bottom:1.5px solid #1f1c1d;border-radius:0}
.pfcin b{font:600 11px/1.1 var(--display);text-transform:uppercase;padding:4px 5px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfcin small{font:14px/1 var(--hand);color:#5d564f;padding:2px 5px}
.desk .pfwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1428px){.desk .pfwrap{grid-template-columns:520px minmax(0,1fr);align-items:start}}

/* ===== the history: the journey as one comic page (game.js openHistory) ===== */
.hspage{background:#fbfaf6;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--drop);padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;color:#1f1c1d}
.desk .hspage{grid-template-columns:repeat(3,minmax(0,1fr));padding:18px}
.hsp{position:relative;margin:0;border:3px solid #1f1c1d;overflow:hidden;aspect-ratio:1/1.05;background:#e9e1cf}
.hsp.big{grid-column:1 / -1;aspect-ratio:2.4/1}
.hsp > .art{position:absolute;inset:0;width:100%;height:100%}
.hscap{position:absolute;top:8px;left:8px;max-width:78%;background:#f6dd8c;border:2px solid #1f1c1d;padding:5px 8px;font:600 13px/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase}
.hssfx{position:absolute;right:12px;bottom:8px;font:700 clamp(28px,calc(6vw / var(--zv)),54px)/1 var(--display);text-transform:uppercase;color:#f6dd8c;-webkit-text-stroke:2px #1f1c1d;text-shadow:4px 4px 0 #1f1c1d;transform:rotate(-6deg)}
.hsend{grid-column:1 / -1;justify-self:end;margin:4px 0 0;background:#1f1c1d;color:#fbfaf6;font:600 14px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px}
.hsnone{grid-column:1 / -1;font-size:18px}

/* ===== Your look: character, emblem, playmat, cover star (game.js renderYourLook) ===== */
.ylwrap{display:flex;flex-direction:column;gap:20px}
.ylside{display:flex;flex-direction:column;gap:10px}
.ylpv{border:3px solid var(--ink);background:#fbfaf6;box-shadow:5px 5px 0 var(--drop);overflow:hidden;color:#1f1c1d}
.ylpv .pfhead{min-height:84px}
.ylpv .pfname{font-size:min(40px,calc(100cqw / (var(--n,10) * .56)))}
.ylpvart{position:relative;aspect-ratio:2.2/1;overflow:hidden;background:#3a78c9;border-bottom:3px solid #1f1c1d}
.ylpvart .art{position:absolute;inset:0;width:100%;height:100%}
.ylpvplate{padding:8px 10px}
.ylstars{display:flex;flex-wrap:wrap;gap:8px}
.ylstar{width:56px;height:70px;padding:0;border:2px solid var(--ink);border-radius:7px;overflow:hidden;background:#f6f1e4;cursor:pointer}
.ylstar .art{width:100%;height:100%;display:block}
.ylstar.ylauto{width:auto;height:70px;padding:0 12px;font:600 12px var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--text);background:var(--raise)}
.ylstar[aria-pressed="true"]{outline:3px solid var(--accent);outline-offset:2px}
.ylmain{min-width:0}
.ylchar{display:flex;align-items:center;gap:14px;margin:12px 0}
.pp.face.ylme{width:120px;height:120px;border-radius:14px;border-width:2.5px}
.ylchar .acct-p{margin:0 0 10px}
.yltiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
/* Your look's character tab: each section's heading stands clear of the options above and below it */
.ylchar ~ .embhead{margin:22px 0 10px}
.ylchar ~ .yltiles + .acct-p{margin-top:18px}
.desk .ylwrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:30px;align-items:start}
.desk .ylpvart{aspect-ratio:4/3}

/* the profile in the rail (desktop only): your face, just above the menu */
.tab[data-tab="profile"]{display:none}
.desk .tab[data-tab="profile"]{display:flex;margin-top:auto}
.desk .tab[data-tab="profile"] ~ .rmenu{margin-top:0}
.desk .tab[data-tab="profile"] .tico{width:38px;height:38px}
.pp.face.tabf{width:100%;height:100%;border-radius:50%;border:2px solid #1f1c1d}
.pp.face.tabf img{animation:none}

/* the title and showcase (game.js titleTabHTML): a caption box on the cover, three stats in the record, the friend sheet */
.pftitle{position:absolute;left:12px;top:12px;max-width:62%;background:#f6dd8c;color:#1f1c1d;border:2px solid #1f1c1d;padding:5px 9px;font:600 15px/1.15 var(--display);letter-spacing:.03em;text-transform:uppercase;z-index:2;box-shadow:3px 3px 0 #1f1c1d}
.ylpvart .pftitle{font-size:13px;left:8px;top:8px}
.pfshow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 10px}
.pfsv{background:var(--sb);color:var(--sf);border:2px solid var(--ink);border-radius:4px;padding:8px 6px 6px;text-align:center;display:flex;flex-direction:column;gap:3px;min-width:0}
.pfsv b{font:700 26px/1 var(--display)}
.pfsv small{font:500 10px/1.15 var(--display);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.frtitle{margin:-4px 0 10px;font:600 15px/1.2 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--sub)}
.pfshow.frshow{margin-bottom:12px}
.yltitle{font:700 24px/1.1 var(--display);text-transform:uppercase;background:#f6dd8c;color:#1f1c1d;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--drop);padding:10px 12px;margin:6px 0 12px}
.yltitle.none{background:var(--raise);color:var(--sub)}
.ylpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ylpick label{display:flex;flex-direction:column;gap:4px;min-width:0}
.ylpick select{font:18px var(--hand);padding:8px;border:2px solid var(--ink);border-radius:8px;background:var(--raise);color:var(--text);min-width:0}
.ylrow{margin:10px 0}
.ylwords{margin:4px 0 6px}
.ylwords summary{cursor:pointer;font:600 13px var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.ylwords ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.ylwords li{display:flex;flex-direction:column;background:var(--raise);border:1.5px dashed var(--sub);border-radius:8px;padding:6px 10px}
.ylwords li b{font:600 15px var(--display);text-transform:uppercase}
.ylwords li span{font:15px/1.2 var(--hand);color:var(--sub)}
.ylstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ylsv{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--raise);color:var(--text);cursor:pointer;text-align:left}
.ylsv b{font:700 22px/1 var(--display)}
.ylsv span{font:500 11px/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.ylsv[aria-pressed="true"]{background:#f6dd8c;color:#1f1c1d}
.ylsv[aria-pressed="true"] span{color:#5b4a12}
.ylsv i{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--page);font:700 12px/22px var(--display);text-align:center;font-style:normal}

/* the showcase's slots take a drag (game.js setupShowDrag) */
.ylshow{touch-action:pan-y}
.ylslot{min-height:64px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ylslot[data-sid],.ylsv{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ylslot.empty{display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--sub);border-radius:4px;color:var(--sub);padding:6px}
.ylslot.empty small{font:500 11px/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase}
.ylslot.dropin{outline:3px solid var(--accent);outline-offset:2px}
.ylslot.empty.dropin{background:var(--raise)}
.ylshow.dropout .ylslots{outline:2px dashed var(--accent);outline-offset:4px}
.ylsv.lifting,.ylslot.lifting{opacity:.35}
.ylghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;margin:0;box-shadow:0 10px 18px rgba(0,0,0,.25)}

/* Play's top right on a phone: your face and name open your profile (desktop has Profile in the rail) */
.tprof{display:flex;align-items:center;gap:7px;min-width:0;padding:3px 10px 3px 3px;border:2px solid var(--ink);border-radius:20px;background:var(--raise);cursor:pointer;font:inherit}
.tprof b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#title .tprof b{color:var(--text)}
.pp.face.tproff{width:28px;height:28px;border-radius:50%;border-width:1.5px}
.pp.face.tproff img{animation:none}

/* onboarding and emblems (game.js lookDots, wearEmblem, the first issue): a dot for something new on your profile, Wear it
   beside an emblem just earned, the first win's note and the profile's first-visit tour */
.tprof{position:relative}
.dot{position:relative}
.dot::after{content:'';position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--page);pointer-events:none}
.tab.dot::after{top:8px;right:calc(50% - 22px)}
.ylnew{margin-left:6px;padding:1px 6px;border-radius:8px;background:var(--accent);color:#fff;font:600 10px/1.4 var(--display);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.embnewrow{display:flex;align-items:center;gap:8px;margin-top:6px}
.embnewrow > .emb{flex:1;min-width:0}
.embnewrow > .btn{flex:none;margin:0}
.embrow.fresh{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
.pfissue{display:flex;align-items:center;gap:10px;margin:10px 0;padding:8px;border:2.5px solid var(--ink);border-radius:10px;background:#f6dd8c;color:#1f1c1d;box-shadow:3px 3px 0 var(--drop);text-align:left}
.pfissuecv{width:44px;height:58px;flex:none;border:2px solid #1f1c1d;border-radius:4px;overflow:hidden;background:#3a78c9}
.pfissuecv .art{width:100%;height:100%}
.pfissue > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pfissue b{font:600 16px/1.1 var(--display);text-transform:uppercase}
.pfissue small{font:15px/1.15 var(--hand);color:#5b4a12}
.pfissue .btn{flex:none;width:auto;margin:0}
.pftour{position:relative;margin:0 0 16px;padding:12px 14px;border:2.5px solid var(--ink);border-radius:10px;background:#f6dd8c;color:#1f1c1d;box-shadow:4px 4px 0 var(--drop)}
.pftour b{font:600 17px/1.1 var(--display);text-transform:uppercase}
.pftour ul{margin:6px 0 10px;padding-left:20px;font:17px/1.25 var(--hand)}
.pftour li{margin:3px 0}

/* the emblem you wear, as the cover's seal in the corner of its foot (game.js renderProfile); tap it to change it */
.pfseal{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:68px;padding:0;border:0;background:none;color:#1f1c1d;cursor:pointer;transform:rotate(6deg)}
.embface.pfsealf{width:50px;height:50px;border-radius:50%;border:2.5px solid #1f1c1d;box-shadow:2px 2px 0 #1f1c1d}
.pfseal small{max-width:100%;font:600 9px/1.05 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere}

/* the starter pack's summary: the board, and one big way into the first fight */
.firstgo{display:grid;margin-top:14px}
.firstgo .btn{font-size:24px;padding:14px;animation:firstgo 1.6s ease-in-out .8s infinite}
@keyframes firstgo{0%,100%{transform:none}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.firstgo .btn{animation:none}}

/* fusing (game.js fuse, fuseAllSheet): the copies going in, the card before and after with what changes, and the
   collection after; Fuse all as a checklist */
.fzsec{margin:14px 0 6px;font:600 13px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.fzcopies{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:8px}
.fzcopy{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.fzcopy .fzmini{width:100%;height:auto;aspect-ratio:1}
.fzcopy small{font:500 10px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--sub);text-align:center}
.fzpair{display:flex;align-items:center;justify-content:center;gap:10px}
.fzpair > div{display:flex;flex-direction:column;align-items:center;gap:4px}
.fzpair .card{width:100px;height:178px}
.fzpair .card.L{width:170px}
.fzpair small{font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.fzpair .fzto .card{box-shadow:0 0 0 3px var(--gold),0 4px 0 var(--drop)}
.fzpair .fzto small{color:var(--gold)}
.fzbig{font:700 30px var(--display);color:var(--sub)}
.fzdiff{margin:10px 0 0;padding:8px 12px;border:2px solid var(--line);border-radius:10px;background:var(--raise);font:17px/1.3 var(--hand)}
.fzdiff p{margin:3px 0}
.fzdiff s{color:var(--sub)}
.fzup{color:#4f7a44;font-weight:700}
:root[data-theme="dark"] .fzup{color:#9fd18c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fzup{color:#9fd18c}}
.fzar{margin:0 4px;color:var(--sub)}
.fztab{width:100%;border-collapse:collapse;font-size:16px}
.fztab th,.fztab td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right}
.fztab td,.fztab thead th:not(:first-child){width:48px}
.fztab th[scope="row"]{text-align:left;font-weight:500}
.fztab thead th{font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);border-bottom:2px solid var(--ink)}
.fztab td.fzar,.fztab thead th:nth-child(3){width:20px;text-align:center}
.fzboards{display:grid;gap:8px}
.fzboards small{font:600 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.fzpick{display:grid;gap:8px}
.fzrow{display:flex;align-items:center;gap:8px;padding:6px 8px;border:2px solid var(--ink);border-radius:10px;background:var(--raise)}
.fzrow.off{opacity:.55}
.fzrow label{flex:1;min-width:0;display:flex;align-items:center;gap:6px;cursor:pointer}
.fzrow input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.fzmini{width:40px;height:40px;flex:none;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;background:#f6f1e4}
.fzmini .art{width:100%;height:100%}
.fzmini.fzto{box-shadow:0 0 0 2px var(--gold)}
.fzx{font:600 14px var(--display)}
.fzrt{display:flex;flex-direction:column;min-width:0;margin-left:4px}
.fzrt b{font:600 15px/1.1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fzrt small{font:14px/1.15 var(--hand);color:var(--sub)}
.fzrow .linkbtn{flex:none}

/* fuse sheets on a computer: two columns (what goes in and what you get; what goes up and the collection after), the
   boards full width under them, and the title and buttons pinned like the other long sheets */
.fzsec.fzfirst{margin-top:0}
.desk .fzlay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 32px;align-items:start}
.desk .fzlay > .fzbd{grid-column:1 / -1}
.desk .fzlay > .fzcol > .fzsec:first-child{margin-top:6px}

/* the feedback sheet (game.js feedbackSheet) */
.fbkinds{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.fbk{padding:7px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--raise);font:600 14px var(--display)}
.fbk[aria-checked="true"]{background:var(--ink);color:var(--page)}
.fbtext{width:100%;min-height:130px;resize:vertical;font:18px/1.3 var(--hand);padding:10px;border:2px solid var(--ink);border-radius:8px;background:var(--raise);color:var(--text)}
.fbnote{margin:6px 0 0;font:15px/1.25 var(--hand);color:var(--sub)}

/* hairstyles in square tiles, cropped close round the head, so the hair fills them (avatar.js box) */
.mktiles.hairs .mkopt img,.yltiles.hairs .mkopt img{aspect-ratio:1}

/* onboarding polish: the first result waits for a name (game.js finishRanked), the starter summary sits in the middle of
   a phone's screen with its spares, and the first emblem's sheet has room to breathe */
.acts.waitname > :not(#whoami){display:none}
.firstspare{display:flex;align-items:center;gap:6px;margin-top:8px}
.firstspare .fzmini{width:34px;height:34px}
.firstspare .sumline{margin:0 0 0 4px}
#pack.summed .summary.on{min-height:calc(100% - 70px);display:flex;flex-direction:column;justify-content:center}
.embgift .emb{box-shadow:0 0 0 2px var(--ink),0 4px 0 var(--drop)}
.embgift + .acts + .acct-p{margin-top:12px}

/* the Board screen's tip for a new player whose board is full (game.js swapTipHTML) */
.mtip.swaptip{margin:10px 0 4px;flex-direction:column;align-items:stretch;gap:8px}
.swaptip .swapb{display:flex;gap:8px;flex:none;justify-content:flex-end}
.swaptip .swapb .btn{width:auto;flex:none;margin:0}