/* Layout: a betting-slip control rail on the left; on the right a smoked-slate table with three bot
   seats around a play-order pot row, an ash pile in the corner and your fan along the bottom. */
:root{--joker:#9b6bff;--joker-glow:rgba(150,90,255,.55);
  color-scheme:dark;
  --bg:#0a151b;
  --rail:#10202a;
  --raised:#172b36;
  --raised-2:#213b49;
  --line:#22404e;
  --fg:#e8eef1;
  --muted:#88a2ae;
  --faint:#58737f;
  --accent:#ffb03b;
  --accent-hi:#ffc463;
  --accent-ink:#2a1700;
  --felt-1:#17394b;
  --felt-2:#0b1c25;
  --hot:#ff5b3d;
  --safe:#3fd68f;
  --warn:#ffcf5a;
  --ash:#b4bec2;
  --card:#fbf6ea;
  --card-ink:#1c2126;
  --back-1:#1d4253;
  --back-2:#0d2430;
  --back-edge:#2c5566;
  --glass:rgba(7,16,22,.78);
  --p0:#ffb03b; --p1:#5cc8ff; --p2:#c69bff; --p3:#ff7eb3;
  --h-safe:var(--safe); --h-low:var(--safe); --h-mid:var(--warn); --h-take:var(--hot); --h-ash:var(--ash);
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-ui:"Manrope","Segoe UI",system-ui,sans-serif;
  --t:400ms;
}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.app{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;height:100%;padding:16px}

/* ---------- rail ---------- */
.rail{background:var(--rail);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0;border:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:38px;height:38px;flex:none}
.brand-text{min-width:0}
.brand h1{margin:0;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:27px;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand h1 span{color:var(--accent)}
/* fixed line heights: when the web fonts replace the fallback fonts, the bar keeps its height and the table below does not move */
.brand p{margin:3px 0 0;font-size:10.5px;line-height:14px;height:14px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.more{display:flex;flex-direction:column;gap:14px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--bg);border-radius:10px}
.seg button{border:0;background:transparent;color:var(--muted);padding:9px 6px;border-radius:7px;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--raised-2);color:var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* language: always one tap away, in the brand row */
.lang{margin-left:auto;flex:none;grid-auto-columns:auto;gap:2px;padding:3px;border-radius:9px}
.lang button{padding:6px 8px;font-size:11.5px;letter-spacing:.04em}
.field,.block{display:flex;flex-direction:column;gap:7px}
.label{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--raised);border-radius:10px;cursor:pointer;font-weight:600}
.toggle input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--bg);position:relative;cursor:pointer;transition:background .2s;margin:0;flex:none}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform .2s,background .2s}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(16px);background:var(--accent-ink)}
.cta{border:0;border-radius:10px;padding:14px 16px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 6px 20px -8px var(--accent);transition:background .15s,transform .1s}
.cta:hover{background:var(--accent-hi)}
.cta:active{transform:translateY(1px)}
.ghost{white-space:nowrap;border:1px solid var(--line);background:var(--raised);border-radius:9px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer}
.ghost.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ghost.icon{padding:7px 10px;font-size:16px;line-height:1}
.m-only{display:none}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stat{background:var(--raised);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:1px}
.stat b{font-size:19px;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;color:var(--muted)}
.mc{display:inline-flex;align-items:center;gap:1px;height:21px;padding:0 4px;border-radius:4px;background:var(--card);color:var(--card-ink);font-family:var(--font-display);font-weight:700;font-size:11px;box-shadow:inset 0 -2px 0 var(--pc,transparent)}
.mc svg{width:11px;height:11px}
.mc.b{outline:1.5px solid var(--hot);outline-offset:0}
.rules{border-top:1px solid var(--line);padding-top:12px;font-size:13px;line-height:1.55;color:var(--muted)}
.rules summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"+";font-size:17px;font-weight:600;color:var(--faint)}
.rules[open] summary::after{content:"–"}
.rules > :not(summary){margin:12px 0 0}
.rules .lead{color:var(--fg);font-family:var(--font-display);font-size:18px;line-height:1.3;font-weight:600;text-wrap:balance}
.rules ol{padding-left:20px;display:flex;flex-direction:column;gap:10px}
.rules b{color:var(--fg)}
.ladder{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin-top:6px}
.ladder i{font-style:normal;color:var(--faint);font-size:10px}
.rules .credits{font-size:11.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:10px}

/* ---------- table ---------- */
.stage{position:relative;min-width:0;min-height:520px}
.table{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 50% 42%,var(--felt-1) 0%,var(--felt-2) 72%);box-shadow:inset 0 0 0 1px var(--line),inset 0 30px 90px rgba(0,0,0,.35);touch-action:manipulation;user-select:none;-webkit-user-select:none;--cw:90px;--ch:130px}
.table::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--felt-tex,none);background-size:180px 180px;opacity:.55;mix-blend-mode:soft-light}
.table::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line),inset 0 0 0 7px rgba(5,12,16,.55),inset 0 0 0 8px rgba(255,176,59,.1),inset 0 0 120px rgba(0,0,0,.45);z-index:4}
.table.instant .card,.table.instant .slot{transition:none!important}
.table.instant .card .flip{transition:none!important}
.table.shake{animation:shake .45s ease}
@keyframes shake{25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,0)}}

/* the printed rule on the felt: no size (so nothing to see) until the layout gives it one; without
   this it is drawn across the whole table for a moment while the page loads */
.print{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1;overflow:visible}
.print text{fill:var(--accent);fill-opacity:.32;font-family:var(--font-ui);font-weight:800;font-size:11.5px;letter-spacing:.2em}
.print path.rule{stroke:var(--accent);stroke-opacity:.16;fill:none}
.narrow .print{display:none}
.tray{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border:1.5px dashed var(--line);border-radius:10px;z-index:2}

.slot{position:absolute;left:0;top:0;border:1.5px dashed rgba(180,190,194,.2);border-radius:8%/5.5%;pointer-events:none;z-index:5;transition:transform var(--t),border-color .25s,box-shadow .25s,opacity .2s}
.slot.filled{opacity:0}
.slot.next{border-style:solid;border-color:var(--pc);box-shadow:0 0 22px -6px var(--pc),inset 0 0 22px -10px var(--pc)}
.tag{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;z-index:450;transition:color .2s}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--pc)}
.tag.burn{color:var(--hot)}
.tag.burn::after{content:var(--t-burns,"shoří");font-weight:600;opacity:.85}
.narrow .tag{font-size:10px;gap:4px}
.narrow .tag.burn::after{content:none}
.tag.takes{color:var(--fg)}

.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform-origin:50% 50%;will-change:transform;-webkit-tap-highlight-color:transparent}
.card .lift{position:relative;width:100%;height:100%;transition:transform .2s cubic-bezier(.3,.7,.3,1)}
.card .flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform calc(var(--t) * 1.05) cubic-bezier(.35,.6,.3,1)}
.card.down .flip{transform:rotateY(180deg)}
.card .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8%/5.5%;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.28);transition:box-shadow .3s,filter .6s}
.card.air{z-index:850!important}
.card.air .face{box-shadow:0 2px 3px rgba(0,0,0,.3),0 22px 34px rgba(0,0,0,.42)}
.card .front svg{display:block;width:100%;height:100%}
.card .fb{position:absolute;inset:0}
.card .art{position:absolute;inset:0;display:none;background-color:var(--card);background-image:var(--sprite);background-size:800% 500%;background-repeat:no-repeat}
.card .front::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,0) 70%,rgba(0,0,0,.07) 100%);box-shadow:inset 0 0 0 1px rgba(60,45,25,.18)}
/* scanned deck: transparent PNG corners are 22px on a 363x585 card */
.table.photo .card .face{border-radius:6.1%/3.8%}
.table.photo .card .art{display:block;background-color:transparent}
.table.photo .card .front svg{display:none}
.table.photo .card .front::after{box-shadow:none;background:linear-gradient(125deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 30%,rgba(0,0,0,0) 72%,rgba(0,0,0,.05) 100%)}
.card .idx{position:absolute;left:5%;top:3.5%;z-index:2;padding:1px 4px;border-radius:4px;background:rgba(18,24,28,.82);color:var(--card);font:800 10px/1.3 var(--font-ui);opacity:0;transition:opacity .2s;pointer-events:none}
.table.photo.tight .card.mine .idx{opacity:1}
/* printed back: paper border around an inked lattice, like a real deck */
.card .back{transform:rotateY(180deg);background:var(--card);box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.28),inset 0 0 0 1px rgba(60,45,25,.18)}
.card .back::before{content:"";position:absolute;inset:5.5% 7%;border-radius:5%/3.4%;background:radial-gradient(circle at 50% 50%,rgba(255,176,59,.28),transparent 34%),repeating-linear-gradient(45deg,rgba(255,196,99,.16) 0 1px,transparent 1px 6px),repeating-linear-gradient(-45deg,rgba(255,196,99,.16) 0 1px,transparent 1px 6px),linear-gradient(160deg,var(--back-1),var(--back-2));box-shadow:inset 0 0 0 1.5px var(--back-edge),inset 0 0 0 3px rgba(255,196,99,.35)}
.card .back::after{content:"";position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);border:1.5px solid var(--accent);background:radial-gradient(circle,var(--accent-hi) 0 14%,rgba(255,91,61,.55) 16% 40%,transparent 44%);box-shadow:0 0 10px rgba(255,176,59,.35)}
.table.photo .card .back{background:var(--back-img,var(--card)) center/100% 100% no-repeat;box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.28)}
.table.photo .card .back::before,.table.photo .card .back::after{display:none}
.table.photo .card.air .face{box-shadow:0 2px 3px rgba(0,0,0,.3),0 22px 34px rgba(0,0,0,.42)}
/* hint badge: sits on the card's top-left corner, the part of a fanned card that stays visible */
.card .hb{position:absolute;left:4%;top:-10px;z-index:3;min-width:22px;height:19px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;font:800 11px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--bg);
  background:var(--hc,var(--safe));box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.25);
  opacity:0;transform:translateY(4px) scale(.85);transition:opacity .2s,transform .25s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.card.hint .hb{opacity:1;transform:none}
.narrow .card .hb{height:17px;min-width:20px;font-size:10px;padding:0 5px;top:-9px}
.card.playable{cursor:grab;touch-action:none}
.card.dragging{z-index:950!important;cursor:grabbing}
.card.dragging .lift{transform:none!important;transition:none}
.card.dragging .face,.table.photo .card.dragging .face{box-shadow:0 4px 6px rgba(0,0,0,.3),0 30px 44px rgba(0,0,0,.48)}
.table.drop-hot .slot.next{border-width:2px;background:color-mix(in srgb,var(--pc) 16%,transparent);box-shadow:0 0 38px -2px var(--pc),inset 0 0 30px -6px var(--pc)}
@media (hover:hover){
  .card.playable:hover{z-index:399!important}
  .card.playable:hover .lift{transform:translateY(-15%)}
}
.card.sel{z-index:399!important}
.card.sel .lift,.card.playable:focus-visible .lift{transform:translateY(-15%)}
.card:focus-visible{outline:none}
.card.playable:focus-visible .front{box-shadow:0 0 0 2px var(--accent-hi),0 10px 24px rgba(0,0,0,.4)}
.card.burn .front{box-shadow:0 0 0 2px var(--hot),0 0 28px 6px rgba(255,91,61,.55);animation:smolder .7s ease-in-out infinite alternate}
@keyframes smolder{to{box-shadow:0 0 0 2px var(--accent-hi),0 0 36px 10px rgba(255,140,60,.6)}}
.card.charred .face{filter:grayscale(.85) brightness(.5) sepia(.2)}

.pod{position:absolute;left:0;top:0;width:max-content;display:flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:999px;background:var(--glass);border:1px solid var(--line);z-index:700;white-space:nowrap;transition:box-shadow .25s,border-color .25s,opacity .3s}
.pod[data-a="c"]{transform:translate(-50%,-50%)}
.pod[data-a="l"]{transform:translate(0,-50%)}
.pod[data-a="r"]{transform:translate(-100%,-50%)}
.pod .ava{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--pc);color:var(--bg);font-weight:800;font-size:13px;flex:none}
.pod b{display:block;font-size:13px;line-height:1.15}
.pod small{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pod .flag{font-size:11px;font-weight:800;color:var(--pc);display:flex;align-items:center;gap:3px}
.pod .flag:empty{display:none}
.pod .flag .d{flex:none;width:4px;height:4px;border-radius:50%;background:var(--pc);animation:blink 1s infinite}
.pod .flag .d:nth-child(2){animation-delay:.15s}.pod .flag .d:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.pod.turn{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 22%,transparent),0 0 26px -6px var(--pc)}
.pod.hit{animation:hit .7s ease}
@keyframes hit{30%{box-shadow:0 0 0 6px rgba(255,91,61,.4),0 0 30px rgba(255,91,61,.4)}}
.pod.done{opacity:.8}
.pod.done .flag{color:var(--accent)}
.pod.lost .flag{color:var(--hot)}
.pod.me{background:transparent;border-color:transparent;padding:0;gap:7px;z-index:250}
.pod.me .ava{width:22px;height:22px;font-size:11px}
.pod.me b{display:inline;font-size:12px}
.pod.me small{display:inline;margin-left:6px}
.pod.me.turn{box-shadow:none}
.pod.me.turn b{color:var(--accent-hi)}
.pod.me.solo{background:var(--glass);border-color:var(--line);padding:6px 8px 6px 6px;z-index:700}
.pod .skip{margin-left:6px}
.narrow .pod{gap:7px;padding:4px 10px 4px 4px}
.narrow .pod .ava{width:24px;height:24px;font-size:11px}
.narrow .pod b{font-size:11.5px}
.narrow .pod small{font-size:10px}

.status{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:720;padding:8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-weight:700;font-size:13px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,color .2s,box-shadow .2s}
.status.you{border-color:var(--accent);color:var(--accent-hi);box-shadow:0 0 24px -8px var(--accent)}
.status.hot{border-color:var(--hot);color:var(--fg)}
.status.ash{border-color:var(--ash);color:var(--ash)}
.narrow .status{font-size:12px;padding:7px 12px}
/* hint tooltip: a small dark card with the card's name, what would happen, and a risk meter */
.tip{position:absolute;left:0;top:0;transform:translate(-50%,-100%) translateY(4px);z-index:900;min-width:150px;max-width:230px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 12px 9px;border-radius:11px;
  background:rgba(7,16,22,.94);border:1px solid var(--line);border-top:3px solid var(--hc,var(--line));
  box-shadow:0 14px 30px -8px rgba(0,0,0,.65);color:var(--fg);pointer-events:none;
  opacity:0;transition:opacity .14s,transform .18s ease}
.tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:rgba(7,16,22,.94);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tip.on{opacity:1;transform:translate(-50%,-100%)}
.tip b{font:700 14px/1.15 var(--font-display);white-space:nowrap}
.tip span{font-size:12px;font-weight:700;color:var(--hc,var(--muted));line-height:1.3}
.tip .meter{display:block;align-self:stretch;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:2px}
.tip .meter em{display:block;height:100%;border-radius:2px;background:var(--hc,var(--safe))}
.tip.safe .meter em,.tip.ash .meter em{min-width:0}
.fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1000}
/* the banner sits on its own dark plate so it never blends into the cards underneath */
.banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:1100;text-align:center;pointer-events:none;opacity:0;white-space:nowrap;
  padding:12px 30px 14px;border-radius:20px;background:rgba(7,16,22,.86);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 24px 60px -10px rgba(0,0,0,.7)}
.banner b{display:block;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(36px,6vw,72px);letter-spacing:-.02em;line-height:1;padding:0 .1em;background:linear-gradient(180deg,#ffffff 0%,var(--card) 45%,var(--ash) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.banner span{display:block;margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.banner.show{animation:banner 1.7s cubic-bezier(.2,.8,.2,1) forwards}
.banner.place b{font-size:clamp(30px,5vw,58px);background:linear-gradient(180deg,var(--accent-hi) 0%,var(--accent) 55%,#b8661c 100%);-webkit-background-clip:text;background-clip:text}
.banner.place span{color:var(--fg)}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}28%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}

.endcard{position:absolute;inset:0;z-index:1200;display:grid;place-items:center;background:rgba(5,12,16,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px}
.sheet{position:relative;width:min(420px,100%);background:var(--rail);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}
.sheet h2{margin:0;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:30px;line-height:1.08;text-wrap:balance}
.standings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.standings li{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--raised);border-radius:10px}
.standings .pl{font-family:var(--font-display);font-weight:800;width:32px;color:var(--muted)}
.standings .ava{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--pc);color:var(--bg);font-weight:800;font-size:11px}
.standings .nm{font-weight:700}
.standings .who{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.standings .aw-line{display:flex;align-items:flex-start;gap:6px;min-width:0}
/* the title itself never shrinks; if the row is short, the number moves to the next line */
.standings .aw{font-size:11.5px;line-height:16px;font-weight:800;color:var(--accent);min-width:0}
.standings .awt,.standings .aw i{white-space:nowrap}
/* fixed circle: long title text gets the ellipsis, never the button */
.aw-info{flex:0 0 16px;width:16px;min-width:16px;height:16px;aspect-ratio:1;box-sizing:border-box;border-radius:50%;padding:0;margin:0;
  -webkit-appearance:none;appearance:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--faint);background:transparent;color:var(--muted);font:italic 700 10px/1 var(--font-display);transition:color .15s,border-color .15s,background .15s}
.aw-info:hover,.aw-info[aria-expanded="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
/* title popup: a small card under the "i" that was clicked */
.aw-pop{position:absolute;left:0;top:0;z-index:5;width:min(240px,calc(100% - 24px));padding:11px 13px 12px;border-radius:12px;
  background:var(--raised-2);border:1px solid var(--line);box-shadow:0 16px 36px -10px rgba(0,0,0,.7);
  animation:awPop .18s cubic-bezier(.2,1.3,.4,1)}
.aw-pop::before{content:"";position:absolute;top:-6px;left:var(--ax,50%);width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:var(--raised-2);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.aw-pop b{display:block;font:700 15px/1.2 var(--font-display);color:var(--accent);margin-bottom:4px}
.aw-pop.aw-lowballer b{color:#5cc8ff}
.aw-pop.aw-highballer b{color:#ff8a5c}
.aw-pop.aw-teflon b,.aw-pop.aw-ashMaster b{color:var(--ash)}
.aw-pop p{margin:0;font-size:13px;line-height:1.45;color:var(--fg)}
@keyframes awPop{from{opacity:0;transform:translateY(-4px) scale(.96)}}
.standings .aw i{font-style:normal;font-weight:600;color:var(--muted)}
.standings .aw-lowballer{color:#5cc8ff}
.standings .aw-highballer{color:#ff8a5c}
.standings .aw-teflon,.standings .aw-ashMaster{color:var(--ash)}
.standings .d{flex:none}
.standings .d2{display:none;font-size:11px;color:var(--faint)}
/* phones: the round info moves under the title so the title gets the whole row */
@media (max-width:560px){
  .sheet{padding:18px}
  .standings li{gap:8px;padding:9px 10px}
  .standings .pl{width:22px}
  .standings .d{display:none}
  .standings .d2{display:block}
}
.standings .d{margin-left:auto;color:var(--muted);font-size:12px;text-align:right}

@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;min-height:100%;padding:12px 16px}
  .rail{overflow:visible;padding:12px}
  .m-only{display:inline-flex}
  .d-only{display:none}
  .brand p{display:none}
  .brand h1{font-size:22px;white-space:nowrap}
  .rail:not(.open) .more{display:none}
  .stage{height:max(560px,calc(100svh - 104px))}
}
@media (prefers-reduced-motion:reduce){
  .card,.card .flip,.slot{transition-duration:1ms!important}
  .banner.show{animation-duration:2.2s}
  .card.burn .front{animation:none}
  .table.shake{animation:none}
}

/* ---------- menu, queue, end actions ---------- */
.overlay{position:absolute;inset:0;z-index:1150;display:grid;place-items:center;background:rgba(5,12,16,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:16px}
.menu-sheet{text-align:left}
.menu-title{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:44px!important;line-height:1;margin:0}
.menu-title span{color:var(--accent)}
.menu-lead{margin:0;color:var(--muted);line-height:1.5;text-wrap:balance}
.nick{display:flex;flex-direction:column;gap:7px}
.nick input{font:600 15px var(--font-ui);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .15s}
.nick input:focus{border-color:var(--accent)}
.cta.big{font-size:17px;padding:16px}
.ghost.wide{width:100%;padding:12px;font-size:14px}
.menu-err{margin:0;color:var(--hot);font-weight:700;font-size:13px}
.menu-note{margin:0;color:var(--faint);font-size:12px;line-height:1.5}
.q-seats{display:flex;gap:10px;justify-content:center;padding:6px 0}
.q-seats span{width:38px;height:54px;border-radius:7px;border:1.5px dashed var(--line);transition:background .3s,border-color .3s}
.q-seats span.on{border:0;background:var(--back-img,var(--accent)) center/cover,var(--back-1);box-shadow:0 6px 14px rgba(0,0,0,.4);animation:seatIn .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes seatIn{from{transform:translateY(-14px) scale(.6) rotate(-10deg);opacity:0}}
.q-count{margin:0;text-align:center;font-weight:800;font-size:15px}
.q-fill{margin:0;text-align:center;color:var(--muted);font-size:13px;min-height:1.4em;font-variant-numeric:tabular-nums}
.end-actions{display:grid;grid-template-columns:1fr auto;gap:8px}

/* ---------- online bits on the table ---------- */
.clock{position:absolute;left:0;top:0;transform:translate(-50%,0);width:150px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);z-index:721;overflow:hidden}
.clock i{display:block;height:100%;background:var(--pc,var(--accent));transform-origin:left center}
.clock.low i{background:var(--hot);animation:clockBlink .5s ease-in-out infinite alternate}
@keyframes clockBlink{to{opacity:.45}}
.pod.bot b::after{content:"BOT";margin-left:6px;padding:1px 5px;border-radius:4px;background:var(--raised-2);color:var(--muted);font:800 9px/1.4 var(--font-ui);letter-spacing:.08em;vertical-align:2px}
.pod.away{opacity:.7}
.pod.away .flag{color:var(--muted)}

/* ---------- juice ---------- */
.flash{position:absolute;inset:0;z-index:1090;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,250,240,.28),rgba(255,176,59,.1) 40%,transparent 70%)}
.flash.go{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.callout{position:absolute;left:0;top:0;z-index:980;pointer-events:none;white-space:nowrap;opacity:0;
  font-family:var(--font-ui);font-weight:800;font-size:11px;letter-spacing:.08em;line-height:1;
  padding:4px 8px;border-radius:999px;color:#fff;
  animation:callout 1.8s cubic-bezier(.25,1.1,.4,1) forwards}
.callout i{font-style:normal;margin-right:4px}
.callout em{font-style:normal;margin-left:4px;opacity:.85}
.callout.low{background:#2a8fd6;box-shadow:0 3px 10px -4px rgba(42,143,214,.7)}
.callout.high{background:#e8603a;box-shadow:0 3px 10px -4px rgba(232,96,58,.7)}
.callout.combo{font-size:12px}
@keyframes callout{
  0%{opacity:0;transform:translate(-50%,-60%) scale(.6)}
  12%{opacity:1;transform:translate(-50%,-105%) scale(1.06) rotate(var(--rot,0deg))}
  20%{transform:translate(-50%,-100%) scale(1) rotate(var(--rot,0deg))}
  85%{opacity:1;transform:translate(-50%,-104%) scale(1) rotate(var(--rot,0deg))}
  100%{opacity:0;transform:translate(-50%,-122%) scale(.96) rotate(var(--rot,0deg))}}
/* "+3": a red pill with a little card stack, above whoever had to take the cards */
.plus{position:absolute;left:0;top:0;z-index:985;pointer-events:none;transform:translate(-50%,-100%);
  display:flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--hot);color:#fff;font:800 17px/1 var(--font-ui);letter-spacing:.01em;font-variant-numeric:tabular-nums;
  box-shadow:0 6px 18px -4px rgba(255,91,61,.75),inset 0 0 0 1.5px rgba(255,255,255,.18);
  animation:plus 1.9s cubic-bezier(.25,1.1,.4,1) forwards}
.plus::before{content:"";flex:none;width:9px;height:12px;border-radius:2px;background:#fff;box-shadow:3px -3px 0 rgba(255,255,255,.55)}
.plus.me{font-size:21px;padding:7px 14px 7px 12px}
.plus.me::before{width:11px;height:15px}
@keyframes plus{
  0%{opacity:0;transform:translate(-50%,-70%) scale(.5)}
  14%{opacity:1;transform:translate(-50%,-118%) scale(1.12)}
  26%{transform:translate(-50%,-110%) scale(1)}
  80%{opacity:1;transform:translate(-50%,-116%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-150%) scale(.96)}}
.pod .n.bump{animation:countBump .9s ease-out}
@keyframes countBump{0%,100%{color:var(--muted)}20%,60%{color:var(--hot)}}
.table.myturn .card.mine .front{animation:myturn 2.6s ease-in-out infinite}
@keyframes myturn{0%,100%{box-shadow:0 1px 1px rgba(0,0,0,.4),0 3px 8px rgba(0,0,0,.28)}50%{box-shadow:0 0 0 1px rgba(255,196,99,.3),0 0 14px -4px rgba(255,176,59,.35)}}
.pod.hit .ava{animation:avaBump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes avaBump{40%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){
  .callout,.plus{animation-duration:1.6s}
  .table.myturn .card.mine .front{animation:none}
  .flash.go{animation:none}
}

/* ---------- table HUD: ash and burned ranks top-left; round, standings and log top-right ---------- */
.hud{position:absolute;z-index:6;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.hud .corner{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-r{align-items:flex-end;text-align:right}
.hud-cols{display:flex;gap:14px;align-items:flex-start;justify-content:flex-end;width:100%}
.narrow .hud-cols{flex-direction:column;align-items:flex-end;gap:8px}
.places{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.places div{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.places div i{font-style:normal;font-family:var(--font-display);font-weight:800;width:24px;text-align:right}
.places div span{width:8px;height:8px;border-radius:50%;background:var(--pc,var(--line))}
.places div.on{color:var(--fg)}
.places div.on i{color:var(--accent)}
.narrow .places div{font-size:10.5px;gap:5px}
.tracker{display:grid;grid-template-columns:repeat(9,19px);gap:3px}
.narrow .tracker{grid-template-columns:repeat(5,19px)}
.tk.one i{grid-template-columns:4px}
.tk{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0 5px;border-radius:5px;background:rgba(7,16,22,.5);transition:opacity .3s}
.tk b{font-family:var(--font-display);font-size:10px;line-height:1;font-weight:700;color:var(--ash)}
.tk i{display:grid;grid-template-columns:repeat(2,4px);gap:2px}
.tk i span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.13)}
.tk i span.on{background:var(--hot);box-shadow:0 0 4px var(--hot)}
.tk.gone{opacity:.35}
/* round log: newest on top, older rounds fade; it scrolls for the rest */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;
  scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
.log::-webkit-scrollbar{display:none}
.log li{display:flex;align-items:center;justify-content:flex-end;gap:6px;border-radius:6px;padding:1px 2px;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.log li:first-child{color:var(--fg)}
.log li.empty{color:var(--faint);font-weight:600}
.log .rn{color:var(--faint);font-variant-numeric:tabular-nums;min-width:16px;text-align:right}
.log .mc{height:17px;font-size:10px;padding:0 3px}
.log .mc svg{width:9px;height:9px}
.log em{font-style:normal;color:var(--hot);font-size:10px;margin-left:-3px}
.log .res{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;min-width:30px;color:var(--fg);font-variant-numeric:tabular-nums}
.log .res i{width:7px;height:7px;border-radius:50%;background:var(--pc)}
.log .res.ashx{color:var(--ash);font-style:italic;font-family:var(--font-display)}

/* ---------- start menu steps ---------- */
.step{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--raised);color:var(--fg);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.choice b{font-size:16px;font-weight:800}
.choice span{font-size:12.5px;color:var(--muted);line-height:1.35}
.choice:hover{border-color:var(--accent);background:var(--raised-2)}
.choice:active{transform:translateY(1px)}
#btn-online{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
#btn-online b{color:var(--accent-hi)}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.levels button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:11px 10px;border-radius:11px;border:1px solid var(--line);
  background:var(--raised);color:var(--fg);cursor:pointer;transition:border-color .15s,background .15s}
.levels button b{font-size:14px;font-weight:800}
.levels button span{font-size:11.5px;color:var(--muted);line-height:1.3}
.levels button[aria-pressed="true"]{border-color:var(--accent);background:var(--raised-2);box-shadow:inset 0 0 0 1px var(--accent)}
.step-back{align-self:center;border:0;background:none;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;padding:4px 10px}
.step-back:hover{color:var(--fg)}
@media (max-width:420px){.levels{grid-template-columns:1fr}.levels button{flex-direction:row;align-items:baseline;gap:8px}}

/* ---------- give up ---------- */
.pod .fold{margin-left:8px;padding:4px 10px;font-size:11.5px;background:rgba(7,16,22,.6);color:var(--muted);border-color:var(--line)}
.pod .fold:hover{color:var(--fg);border-color:var(--hot)}
.pod .fold.arm{background:var(--hot);border-color:var(--hot);color:#fff;animation:armPulse .8s ease-in-out infinite alternate}
@keyframes armPulse{to{box-shadow:0 0 14px -2px var(--hot)}}

/* ---------- the card that would take right now: its rim breathes ---------- */
.card.top:not(.burn) .front{box-shadow:0 0 0 2px var(--accent),0 0 18px 2px rgba(255,176,59,.45),0 3px 8px rgba(0,0,0,.3)}
.card.top:not(.burn):not([data-tense]) .front{animation:topPulse 1.1s ease-in-out infinite alternate}
@keyframes topPulse{
  from{box-shadow:0 0 0 1.5px rgba(255,176,59,.55),0 0 6px 0 rgba(255,176,59,.15),0 3px 8px rgba(0,0,0,.3)}
  to{box-shadow:0 0 0 3px var(--accent-hi),0 0 28px 5px rgba(255,176,59,.6),0 3px 8px rgba(0,0,0,.3)}
}

/* ---------- popílek building up: matching cards tremble, faster with each match ---------- */
.card[data-tense="1"] .lift{animation:tense1 .38s ease-in-out infinite}
.card[data-tense="2"] .lift{animation:tense2 .24s ease-in-out infinite}
.card[data-tense="1"]:not(.burn) .front,.card[data-tense="2"]:not(.burn) .front{box-shadow:0 0 0 1.5px rgba(214,222,226,.6),0 0 22px rgba(214,222,226,.38),0 3px 8px rgba(0,0,0,.3)}
@keyframes tense1{0%,100%{transform:rotate(-.3deg)}50%{transform:rotate(.3deg) translateX(.5px)}}
@keyframes tense2{0%,100%{transform:rotate(-.5deg) translateX(-.6px)}25%{transform:rotate(.45deg) translate(.6px,-.4px)}50%{transform:rotate(-.4deg) translateY(.4px)}75%{transform:rotate(.5deg) translateX(.6px)}}

/* ---------- reactions ---------- */
.pod .emo-btn{flex:none;width:26px;height:26px;margin-left:8px;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(7,16,22,.6);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.pod .emo-btn[hidden]{display:none}
.pod .emo-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pod .emo-btn svg .f{fill:currentColor;stroke:none}
.pod .emo-btn:hover,.pod .emo-btn[aria-expanded="true"]{color:var(--accent-hi);border-color:var(--accent)}
.pod .emo-btn:active{transform:scale(.9)}
.emo-tray{position:absolute;left:0;top:0;z-index:960;display:grid;grid-template-columns:repeat(8,36px);gap:2px;padding:5px;border-radius:16px;background:rgba(10,20,26,.94);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.emo-tray[hidden]{display:none}
.emo-tray.show{animation:trayIn .2s cubic-bezier(.2,1.3,.4,1)}
.emo-tray button{width:36px;height:36px;padding:0;border:0;border-radius:10px;background:none;font-size:21px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}
.emo-tray button:hover,.emo-tray button:focus-visible{background:rgba(255,255,255,.08);transform:scale(1.18);outline:none}
.emo-tray button:active{transform:scale(.9)}
.narrow .emo-tray{grid-template-columns:repeat(4,40px)}
.narrow .emo-tray button{width:40px;height:40px;font-size:23px}
@keyframes trayIn{from{opacity:0;transform:translateY(6px) scale(.92)}}
.emote{--tx:-50%;--ty:-100%;--d:-1;--edge:color-mix(in srgb,var(--pc) 70%,transparent);position:absolute;z-index:940;pointer-events:none;font-size:26px;line-height:1;padding:6px 8px;border-radius:999px;background:rgba(10,20,26,.86);border:1.5px solid var(--edge);box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 16px -4px var(--pc);transform-origin:50% 100%;animation:emoteIn 2.6s cubic-bezier(.2,.9,.3,1) forwards}
.emote::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:rgb(10,20,26);border-right:1.5px solid var(--edge);border-bottom:1.5px solid var(--edge);transform:translateX(-50%) rotate(45deg)}
/* below the seat (top of the table): tail up */
.emote.b{--ty:0%;--d:1;transform-origin:50% 0}
.emote.b::after{bottom:auto;top:-5px;border:0;border-left:1.5px solid var(--edge);border-top:1.5px solid var(--edge)}
/* right of the seat: tail left */
.emote.r{--tx:0%;--ty:-50%;transform-origin:0 50%}
.emote.r::after{left:-5px;top:50%;bottom:auto;border:0;border-left:1.5px solid var(--edge);border-bottom:1.5px solid var(--edge);transform:translateY(-50%) rotate(45deg)}
/* left of the seat: tail right */
.emote.l{--tx:-100%;--ty:-50%;transform-origin:100% 50%}
.emote.l::after{left:auto;right:-5px;top:50%;bottom:auto;border:0;border-right:1.5px solid var(--edge);border-top:1.5px solid var(--edge);transform:translateY(-50%) rotate(45deg)}
.narrow .emote{font-size:21px;padding:5px 7px}
@keyframes emoteIn{
  0%{opacity:0;transform:translate(var(--tx),var(--ty)) translateY(calc(var(--d)*-6px)) scale(.3)}
  12%{opacity:1;transform:translate(var(--tx),var(--ty)) translateY(calc(var(--d)*3px)) scale(1.12)}
  22%{transform:translate(var(--tx),var(--ty)) scale(1)}
  80%{opacity:1;transform:translate(var(--tx),var(--ty)) translateY(calc(var(--d)*5px))}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) translateY(calc(var(--d)*11px)) scale(.96)}
}
@keyframes emoteFade{0%,100%{opacity:0;transform:translate(var(--tx),var(--ty))}10%,85%{opacity:1;transform:translate(var(--tx),var(--ty))}}

/* ---------- behind the menu and the queue: only felt, the deck and the aces ---------- */
.table.lobby :is(.hud,.pod,.status,.clock,.slot,.tag,.tray,.emo-tray,.emote,.elem-tag,.pyr-shape,.combo-bar,.print){opacity:0!important;visibility:hidden}
#menu,#queue{background:rgba(5,12,16,.32);backdrop-filter:none;-webkit-backdrop-filter:none}
/* until the card sheet has loaded, the cards stay out of sight, then fade in where they lie */
.table .card{transition:opacity .45s ease}
.table:not(.ready) .card{opacity:0}

/* ---------- the element: the 33rd card, face down beside the ash until the end ---------- */
.elem-tag{position:absolute;left:0;top:0;z-index:80;transform:translate(-50%,-50%);padding:2px 6px;border-radius:999px;background:rgba(7,16,22,.7);border:1px solid var(--line);color:var(--accent);font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transition:left var(--t),top var(--t),font-size .3s}
.elem-tag[hidden]{display:none}
.elem-tag.up{z-index:881;font-size:10px;padding:3px 9px;border-color:var(--accent);box-shadow:0 0 18px -4px var(--accent)}
.banner.elem{top:22%}
.banner.elem.show{animation-duration:3.2s}
.end-elem{margin:-4px 0 2px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;color:var(--muted);font-size:13px}
.end-elem b{color:var(--fg)}
.end-elem[hidden]{display:none}

/* ---------- the šestka is a joker ---------- */
.card .jk{position:absolute;right:5%;top:3%;z-index:3;padding:2px 7px;border-radius:7px;background:var(--joker);color:#fff;font:800 15px/1.25 var(--font-ui);box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 12px var(--joker-glow);pointer-events:none;transition:opacity .2s}
.card .jk[hidden],.card.down .jk{opacity:0}
/* the declared joker: the chosen card's face, a violet glow around it and a six glinting inside */
.card .g6{position:absolute;inset:0;z-index:1;display:none;place-items:center;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at 50% 50%,rgba(150,90,255,0) 45%,rgba(150,90,255,.26) 100%)}
.card.joker .g6{display:grid}
.card .g6 b{font:italic 900 calc(var(--ch)*.62)/1 var(--font-display);color:transparent;
  /* one wide gradient that does not repeat: its outer thirds are plain violet and the shine sits in
     the middle third, so the first and last frames look the same and the loop has no seam */
  background:linear-gradient(115deg,rgba(176,128,255,.42) 38%,rgba(255,255,255,.98) 50%,rgba(176,128,255,.42) 62%) no-repeat 100% 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1.5px rgba(150,90,255,.7);
  filter:drop-shadow(0 0 8px rgba(150,90,255,.75));animation:glint6 3.2s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes glint6{
  0%{background-position:100% 0;opacity:.6}
  30%{opacity:.92}
  60%{background-position:0% 0;opacity:.6}
  100%{background-position:0% 0;opacity:.6}
}
.card.joker .lift::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:9%/6%;pointer-events:none;
  box-shadow:0 0 0 2px rgba(170,120,255,.85),0 0 22px 6px var(--joker-glow);animation:jokerAura 2.4s ease-in-out infinite alternate}
.card.joker.down .lift::before{opacity:0}
.card.joker.charred .lift::before{opacity:.25;animation:none}
@keyframes jokerAura{from{box-shadow:0 0 0 1.5px rgba(170,120,255,.7),0 0 14px 3px var(--joker-glow)}to{box-shadow:0 0 0 2.5px rgba(196,160,255,.95),0 0 28px 8px var(--joker-glow)}}
.mc.jk{box-shadow:inset 0 0 0 1.5px var(--joker),inset 0 -2px 0 var(--pc,transparent)}
.mc.jk i{font-style:normal;color:var(--joker);font-size:.8em;margin-left:1px}
.joker-pick{position:absolute;left:0;top:0;z-index:970;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 12px 8px;border-radius:16px;background:rgba(10,20,26,.95);border:1px solid var(--joker);box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 26px -6px var(--joker-glow);max-width:calc(100% - 24px)}
.joker-pick[hidden]{display:none}
.joker-pick.show{animation:trayIn .2s cubic-bezier(.2,1.3,.4,1)}
.joker-pick p{margin:0;font-size:12.5px;font-weight:700;color:var(--fg);text-align:center}
.jp-ranks{display:grid;grid-template-columns:repeat(9,38px);gap:4px}
.narrow .jp-ranks{grid-template-columns:repeat(5,42px)}
.jp-ranks button{position:relative;height:46px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--card-ink);font-family:var(--font-display);font-weight:800;font-size:16px;cursor:pointer;display:grid;place-items:center;transition:transform .15s,box-shadow .15s}
.jp-ranks button:hover,.jp-ranks button:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 2px var(--joker),0 0 14px var(--joker-glow);outline:none}
.jp-ranks button i{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);padding:0 4px;border-radius:999px;background:var(--hc,var(--raised-2));color:#fff;font:800 9px/14px var(--font-ui);font-style:normal;white-space:nowrap}
.jp-cancel{border:0;background:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:4px 10px;margin-top:2px}
.jp-cancel:hover{color:var(--fg)}

/* ---------- end screen: you, highlighted ---------- */
.standings li.me{box-shadow:inset 0 0 0 1.5px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--raised))}
.standings li.me .pl{color:var(--accent)}

/* ---------- phones ---------- */
@media (max-width:860px){
  .brand{gap:8px}
  .brand .mark{width:32px;height:32px}
  .lang button{padding:6px 7px}
  .rail.open .more{padding-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .card[data-tense] .lift{animation:none}
  .pod .fold.arm{animation:none}
  .card.top .front{animation:none!important}
  .card .g6 b,.card.joker .lift::before{animation:none}
  .emo-tray.show{animation:none}
  .emote{animation-name:emoteFade}
}

/* ================= game modes, islands, ranked ================= */
:root{--p4:#5fe0a0;--p5:#ff9a5c;--team0:#ff8a3d;--team1:#4fb3ff;--team2:#b26bff}
/* pictures in the seats */
.pod .ava{overflow:hidden}
.pod .ava img,.pava img,.standings .ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.emo-ava{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font-size:.95em;line-height:1}
.pod .ava .emo-ava{font-size:16px}
.pod.me .ava .emo-ava{font-size:13px}
/* frames bought in the shop go around the picture */
[data-frame="gold"] .ava,.pava[data-frame="gold"]{box-shadow:0 0 0 2px #ffd36b,0 0 10px rgba(255,200,80,.6)}
[data-frame="fire"] .ava,.pava[data-frame="fire"]{box-shadow:0 0 0 2px #ff6a2b,0 0 12px 2px rgba(255,90,30,.7);animation:fireRing 1.4s ease-in-out infinite alternate}
[data-frame="neon"] .ava,.pava[data-frame="neon"]{box-shadow:0 0 0 2px #5ff3ff,0 0 14px 2px rgba(80,240,255,.7)}
[data-frame="ice"] .ava,.pava[data-frame="ice"]{box-shadow:0 0 0 2px #cfefff,0 0 10px rgba(200,235,255,.7)}
[data-frame="crown"] .ava,.pava[data-frame="crown"]{box-shadow:0 0 0 2px #ffcf4d,0 0 16px 3px rgba(255,190,60,.65)}
.pod[data-frame="crown"]::before,.pava[data-frame="crown"]::before{content:"👑";position:absolute;font-size:12px;line-height:1;transform:translate(6px,-14px);pointer-events:none}
.pava[data-frame="crown"]::before{transform:translate(-2px,-16px)}
@keyframes fireRing{to{box-shadow:0 0 0 2px #ffb03b,0 0 18px 4px rgba(255,120,40,.8)}}
/* the islands: a team colour ring, the island letter, and the players sitting this round out */
.pod[data-team="0"]{--tc:var(--team0)}.pod[data-team="1"]{--tc:var(--team1)}.pod[data-team="2"]{--tc:var(--team2)}
/* islands: A is the lagoon, B the sand bank; every seat wears its island's colour */
:root{--isA:#3fd6c8;--isB:#ffb45c}
.pod[data-isl="A"],.isle[data-isl="A"]{--ic:var(--isA)}
.pod[data-isl="B"],.isle[data-isl="B"]{--ic:var(--isB)}
.pod[data-isl]{border:1.5px solid var(--ic);background:color-mix(in srgb,var(--ic) 16%,rgba(7,16,22,.86));box-shadow:0 0 18px -6px var(--ic)}
.pod.me[data-isl]{padding:4px 10px 4px 4px;z-index:700}
.pod .tm{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:6px;background:var(--ic,var(--raised-2));color:#0b1418;font:900 11px/20px var(--font-ui);text-align:center}
.isle{position:absolute;left:0;top:0;z-index:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ic) 20%,transparent),color-mix(in srgb,var(--ic) 7%,transparent) 70%,transparent);transition:opacity .4s,left var(--t),top var(--t)}
.table[data-isl="A"] .status{border-color:var(--isA);box-shadow:0 0 18px -6px var(--isA)}
.table[data-isl="B"] .status{border-color:var(--isB);box-shadow:0 0 18px -6px var(--isB)}
.table[data-isl="A"] .slot{border-color:color-mix(in srgb,var(--isA) 45%,transparent)}
.table[data-isl="B"] .slot{border-color:color-mix(in srgb,var(--isB) 45%,transparent)}
.table.lobby .isle{display:none}
.pod.idle{opacity:.5}
.pod.idle.me{opacity:.7}
.standings li[data-team="0"]{--tc:var(--team0)}.standings li[data-team="1"]{--tc:var(--team1)}.standings li[data-team="2"]{--tc:var(--team2)}
.standings li[data-team] .ava{outline:2px solid var(--tc);outline-offset:1px}
/* ranked: a tier mark beside the name; no burned-card counter, no cards on show in the log */
.pod[data-tier]:not([data-tier=""]) b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:2px;transform:rotate(45deg) translateY(-1px);background:var(--tier,#c3ccd4)}
.pod[data-tier="bronze"]{--tier:#c98a5b}.pod[data-tier="silver"]{--tier:#c3ccd4}.pod[data-tier="gold"]{--tier:#ffc547}.pod[data-tier="platinum"]{--tier:#5fe0d0}
.pod[data-tier="diamond"]{--tier:#7cb4ff}.pod[data-tier="master"]{--tier:#c58bff}.pod[data-tier="ace"]{--tier:#ff6b5e}
.table.ranked .tracker{display:none}
/* five or six players: smaller pods and a narrower burned-card counter */
.table.crowd .tracker{grid-template-columns:repeat(5,19px)}
.table.crowd .pod{padding:4px 10px 4px 4px;gap:7px}
.table.crowd .pod .ava{width:26px;height:26px;font-size:11px}
.table.crowd .pod b{font-size:12px}
.table.potcrowd .tag span{display:none}
/* five or six around the table: a seat's flag hangs under it so neighbours do not collide */
.table.crowd .pod:not(.me) .flag{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:4px;padding:1px 7px;border-radius:999px;background:var(--glass);white-space:nowrap}
.table.crowd .pod:not(.me) .flag:empty{display:none}
.table.crowd .pod .who small{white-space:nowrap}
.narrow.crowd .pod b{font-size:11px;max-width:64px;overflow:hidden;text-overflow:ellipsis}
.narrow.crowd .pod small{font-size:9.5px}
/* no room for the BOT tag after a name on a phone: it moves to the card count below */
.narrow.crowd .pod.bot b::after{content:none}
.narrow.crowd .pod.bot .who small.n::before{content:"BOT";margin-right:4px;padding:0 4px;border-radius:3px;background:var(--raised-2);color:var(--muted);font:800 7.5px/1.5 var(--font-ui);letter-spacing:.08em;vertical-align:1px}

/* ================= menu: modes, ranked ================= */
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.choice.mode{position:relative;padding:12px}
.choice.mode b{font-size:14.5px}
.choice.mode span{font-size:11.5px}
.choice.mode.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.seats-ico{display:flex;gap:3px;margin-bottom:4px}
.seats-ico i{width:9px;height:9px;border-radius:50%;display:block}
.seats-ico.isl i:nth-child(3){margin-right:7px}
.choice.ranked{border-color:color-mix(in srgb,var(--joker) 55%,var(--line))}
.choice.ranked b::after{content:"🏆";margin-left:7px;font-size:13px}
.choice.ranked.locked{opacity:.7}
.choice.ranked.locked b::after{content:"🔒"}
#elem-seg button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px}
#elem-seg button small{font-size:10px;color:var(--faint);font-weight:700}
@media (max-width:420px){.modes{grid-template-columns:1fr}}

/* ================= accounts ================= */
.acct-box{display:flex;flex-direction:column;gap:8px}
.acct-lead{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.acct-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:40px}
.gsign{display:flex;align-items:center;gap:12px;width:100%;padding:7px 18px 7px 7px;border-radius:999px;border:1px solid var(--line);
  background:var(--raised-2);color:var(--fg);font-weight:800;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.gsign:hover{border-color:var(--accent);background:color-mix(in srgb,var(--raised-2) 80%,var(--accent) 8%)}
.gsign:active{transform:translateY(1px)}
.gsign .g{flex:none;width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center}
.gsign .g svg{width:19px;height:19px}
.gsign span:last-child{flex:1;text-align:center;margin-right:32px}
.acct-card,.acct-chip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--raised);cursor:pointer;text-align:left;position:relative}
.acct-card:hover,.acct-chip:hover{border-color:var(--accent)}
.ac-who,.acct-chip>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-who b,.acct-chip>span>b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-who small,.acct-chip>span>small{font-size:11.5px;color:var(--muted)}
.gift{margin-left:auto;font-style:normal;font-size:18px;animation:giftBob 1.6s ease-in-out infinite}
@keyframes giftBob{50%{transform:translateY(-3px) rotate(-6deg)}}
.pava{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--raised-2);display:grid;place-items:center;font-size:18px}
.pava.big{width:72px;height:72px;font-size:36px}
.pava .emo-ava{font-size:inherit}
.tier{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--tc) 22%,transparent);color:var(--tc);font-weight:800;font-size:11px;white-space:nowrap;border:1px solid color-mix(in srgb,var(--tc) 50%,transparent)}
.tier::before{content:"";width:6px;height:6px;background:var(--tc);border-radius:1px;transform:rotate(45deg)}
/* the profile window */
.prof-sheet{width:min(560px,100%);max-height:calc(100% - 8px);overflow:hidden;padding:18px 18px 14px;gap:10px}
.prof-head{display:flex;align-items:center;justify-content:space-between}
.prof-head h2{font-size:24px}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--bg);border-radius:10px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:8px 4px;border-radius:7px;font-weight:700;font-size:12.5px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--raised-2);color:var(--fg)}
.prof-body{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:2px;min-height:120px}
.p-top{display:flex;gap:14px;align-items:center}
.p-name{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.p-name small{color:var(--muted)}
.p-row{display:flex;gap:8px;align-items:center}
.p-row.wrap{flex-wrap:wrap}
#p-name{flex:1;min-width:0;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-weight:700}
.p-row .cta{padding:10px 14px;font-size:13px}
.p-sec{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--raised)}
.ghost.file{cursor:pointer}
.emo-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
/* the animals fill their tiles: their size follows the grid's width */
.emo-grid{container-type:inline-size}
.emo-grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:34px;font-size:clamp(24px,7cqi,52px);line-height:1;cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .12s,border-color .12s}
.emo-grid button:hover{transform:scale(1.08);border-color:var(--accent)}
@media (max-width:480px){.emo-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.emo-grid button{font-size:32px;font-size:clamp(24px,9.5cqi,46px)}}
.col-grid{display:flex;gap:6px;flex-wrap:wrap}
.col-grid button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.emo-grid button.sel,.col-grid button.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* unsaved profile changes: the save button wakes up, and a bar under the pictures says so */
.p-row .cta.quiet{background:var(--raised-2);color:var(--muted);box-shadow:none}
.save-row{justify-content:flex-end;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--accent) 12%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
.save-row .unsaved{margin-right:auto;font-size:12px;font-weight:800;color:var(--accent-hi)}
.rank-card{background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 18%,var(--raised)),var(--raised))}
.rk-main{display:flex;align-items:center;gap:10px}
.rk-main .tier{font-size:14px;padding:3px 10px}
.rk-main b{font-size:18px}
.rank-card small{color:var(--muted)}
.p-stats{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.p-stats th{font-size:10.5px;color:var(--muted);text-align:right;font-weight:800;padding:3px 6px}
.p-stats td{padding:5px 6px;text-align:right;border-top:1px solid var(--line)}
.p-stats td:first-child,.p-stats th:first-child{text-align:left}
.p-stats tr.all td{font-weight:800}
/* daily reward and challenges */
.cta.wide{width:100%}
.cta:disabled{opacity:.5;cursor:default;box-shadow:none}
/* the shop */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:10px;background:var(--bg);border:1px solid var(--line);text-align:center}
.item.on{border-color:var(--accent)}
.item b{font-size:12px}
.item button{width:100%;padding:6px 4px;border-radius:8px;border:1px solid var(--line);background:var(--raised-2);color:var(--fg);font-weight:800;font-size:11.5px;cursor:pointer}
.item button.cta{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:none}
.item button:disabled{opacity:.55;cursor:default}
.sw{width:42px;height:42px;border-radius:8px;display:block;position:relative}
.sw-back{width:30px;height:46px;border-radius:5px;background:var(--back-img,var(--back-1)) center/cover}
.sw-felt{border-radius:50%}
.sw-frame{border-radius:50%;background:var(--raised-2)}
.sw-frame[data-id="gold"]{box-shadow:0 0 0 3px #ffd36b,0 0 10px rgba(255,200,80,.6)}
.sw-frame[data-id="fire"]{box-shadow:0 0 0 3px #ff6a2b,0 0 12px rgba(255,90,30,.7)}
.sw-frame[data-id="neon"]{box-shadow:0 0 0 3px #5ff3ff,0 0 14px rgba(80,240,255,.7)}
.sw-frame[data-id="ice"]{box-shadow:0 0 0 3px #cfefff,0 0 10px rgba(200,235,255,.7)}
.sw-frame[data-id="crown"]{box-shadow:0 0 0 3px #ffcf4d,0 0 16px rgba(255,190,60,.65)}
.sw-frame[data-id="crown"]::after{content:"👑";display:block;text-align:center;font-size:16px;line-height:42px}
/* the ladder */
.ladder-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ladder-list li{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;background:var(--raised)}
.ladder-list li.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.ladder-list .lpos{width:22px;text-align:right;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.ladder-list .pava{width:28px;height:28px;font-size:14px}
.ladder-list .lname{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder-list b{font-variant-numeric:tabular-nums}
/* rating change on the results */
.end-rank{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--raised)}
.end-rank .tier{font-size:13px;padding:3px 10px}
.end-rank .plus{color:var(--safe)}
.end-rank .minus{color:var(--hot)}
.end-rank .promo{margin-left:auto;font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px}
.end-rank .promo.up{background:var(--safe);color:#062012;animation:armPulse .8s ease-in-out infinite alternate}
.end-rank .promo.down{background:var(--raised-2);color:var(--muted)}
.toast{position:absolute;left:50%;bottom:18px;z-index:1300;transform:translateX(-50%);padding:10px 16px;border-radius:999px;background:var(--rail);border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.5);font-weight:700;font-size:13px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.toast.show{animation:trayIn .25s cubic-bezier(.2,1.3,.4,1)}

/* ================= cosmetics ================= */
.table[data-felt="green"]{--felt-1:#1d5a35;--felt-2:#0b2416}
.table[data-felt="bordeaux"]{--felt-1:#5a1d2b;--felt-2:#220b11}
.table[data-felt="navy"]{--felt-1:#1d2f5a;--felt-2:#0b1226}
.table[data-felt="graphite"]{--felt-1:#33393d;--felt-2:#121416}
.table[data-felt="violet"]{--felt-1:#3f2560;--felt-2:#160c24}
.table[data-back="ruby"] .card .back{filter:hue-rotate(150deg) saturate(1.25)}
.table[data-back="emerald"] .card .back{filter:hue-rotate(-60deg) saturate(1.2)}
.table[data-back="midnight"] .card .back{filter:grayscale(.6) brightness(.75) contrast(1.1)}
.table[data-back="gold"] .card .back{filter:sepia(.85) saturate(1.8) hue-rotate(-12deg) brightness(1.05)}
.table[data-back="amethyst"] .card .back{filter:hue-rotate(40deg) saturate(1.3)}
.sw-felt[data-id="teal"]{background:radial-gradient(#17394b,#0b1c25)}
.sw-felt[data-id="green"]{background:radial-gradient(#1d5a35,#0b2416)}
.sw-felt[data-id="bordeaux"]{background:radial-gradient(#5a1d2b,#220b11)}
.sw-felt[data-id="navy"]{background:radial-gradient(#1d2f5a,#0b1226)}
.sw-felt[data-id="graphite"]{background:radial-gradient(#33393d,#121416)}
.sw-felt[data-id="violet"]{background:radial-gradient(#3f2560,#160c24)}
.sw-back[data-id="ruby"]{filter:hue-rotate(150deg) saturate(1.25)}
.sw-back[data-id="emerald"]{filter:hue-rotate(-60deg) saturate(1.2)}
.sw-back[data-id="midnight"]{filter:grayscale(.6) brightness(.75) contrast(1.1)}
.sw-back[data-id="gold"]{filter:sepia(.85) saturate(1.8) hue-rotate(-12deg) brightness(1.05)}
.sw-back[data-id="amethyst"]{filter:hue-rotate(40deg) saturate(1.3)}
@media (prefers-reduced-motion:reduce){
  [data-frame="fire"] .ava,.pava[data-frame="fire"],.gift,.end-rank .promo.up{animation:none}
}
/* six players and a long Element: the results scroll instead of running off the table */
.endcard .sheet{max-height:calc(100% - 8px);overflow-y:auto;overflow-x:hidden}
/* the ash count and the Element's size share one row in the corner; on a phone they stack */
.hud-row{display:flex;gap:12px;align-items:baseline;flex-wrap:nowrap}
/* the Element's names: the classic one, and a Pyrrhic one under it; a long name wraps within the
   corner instead of reaching under the seats along the top */
.hud-col{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:0 1 auto}
.hud .corner.pyr-lbl{white-space:normal;line-height:1.3}
.hud .corner.elem-lbl{color:var(--accent)}
.narrow .hud-row{flex-direction:column;gap:2px}

/* ================= the menu hub ================= */
.menu-sheet{max-height:calc(100% - 8px);overflow-y:auto;overscroll-behavior:contain}
.menu-sheet.wide{width:min(860px,100%)}
.step.hub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:22px;align-items:start}
.hub-main,.hub-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:760px){.step.hub{grid-template-columns:1fr;gap:16px}}
/* shop, ladder and profile tiles */
.hub-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.hub-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--raised);cursor:pointer;text-align:left;transition:border-color .15s,transform .1s,background .15s}
.hub-link:hover{border-color:var(--accent);background:var(--raised-2)}
.hub-link:active{transform:translateY(1px)}
.hub-link .hl-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--bg)}
.hub-link>span:not(.hl-ico){display:flex;flex-direction:column;gap:1px;min-width:0}
.hub-link b{font-size:13.5px}
.hub-link small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the cards on the right */
.hub-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--raised-2) 70%,transparent),var(--raised))}
.hub-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hc-title{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:19px;line-height:1.1}
.hc-time,.streak{font-size:11.5px;font-weight:800;color:var(--muted);white-space:nowrap;padding:3px 9px;border-radius:999px;background:var(--bg)}
.streak{color:#ffb35c}
.hc-note{margin:0;font-size:11.5px;color:var(--faint);text-align:center}
/* the žeton coin */
.coin{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-left:3px;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff3c0 0 18%,#ffcf4d 30%,#e59a18 75%,#b8710c);box-shadow:inset 0 0 0 1.5px rgba(150,90,10,.55)}
/* daily reward: seven tiles of one fixed shape */
.hub-card.daily{background:linear-gradient(150deg,rgba(255,176,59,.14),var(--raised) 55%);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.dstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dtile{position:relative;display:grid;grid-template-rows:auto 26px auto;justify-items:center;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:11px;background:var(--bg);border:1px solid var(--line);text-align:center;min-width:0}
.dtile small{font-size:9.5px;font-weight:800;color:var(--faint);white-space:nowrap;letter-spacing:.02em}
.dtile .dico{display:grid;place-items:center;width:26px;height:26px}
.dtile .dico .coin{width:20px;height:20px;margin:0}
.dtile b{font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent-hi);line-height:1}
.dtile .tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--safe);color:#062012;font-weight:900;font-size:13px}
.dtile.done{opacity:.55}
.dtile.done b{color:var(--muted)}
.dtile.today{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg));box-shadow:0 0 18px -4px var(--accent)}
.dtile.today::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%) no-repeat 150% 0/250% 100%;animation:tileShine 2.6s ease-in-out infinite}
@keyframes tileShine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.dtile.seventh{background:linear-gradient(160deg,rgba(155,107,255,.28),var(--bg));border-color:color-mix(in srgb,var(--joker) 55%,var(--line))}
.dtile.seventh.today{border-color:var(--accent)}
.gift7{font-size:19px;line-height:1}
.cta.claim{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 14px;font-size:15px}
.cta.claim small{font-weight:700;opacity:.75}
.gift-bounce{display:inline-block;font-size:18px;animation:giftBob 1.4s ease-in-out infinite}
/* today's challenges */
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.q{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.q .qi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:var(--raised-2)}
.q .qb{display:flex;flex-direction:column;gap:6px;min-width:0}
.q .qb b{font-size:13px;line-height:1.25}
.q .qbar{height:7px;border-radius:999px;background:var(--raised-2);overflow:hidden}
.q .qbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#ffd27a);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.q .qside{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:52px}
.q .qrw{display:inline-flex;align-items:center;font-weight:900;font-size:13px;color:var(--accent-hi);white-space:nowrap}
.q .qn{font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.q .tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--safe);color:#062012;font-weight:900;font-size:13px}
.q.done{border-color:color-mix(in srgb,var(--safe) 40%,var(--line))}
.q.done .qi{background:color-mix(in srgb,var(--safe) 22%,var(--raised-2))}
.q.done .qb b{color:var(--muted)}
.q.done .qbar i{background:var(--safe)}
/* what an account brings, for guests */
.hub-card.teaser ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hub-card.teaser li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.hub-card.teaser li span{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--bg);font-size:16px;flex:none}
/* shop, ladder and profile as pages of the menu */
.step.page{display:flex;flex-direction:column;gap:12px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.page-body{display:flex;flex-direction:column;gap:12px}
.chips-pill{display:inline-flex;align-items:center;gap:2px;padding:5px 11px;border-radius:999px;background:var(--bg);font-weight:900;font-variant-numeric:tabular-nums}
.chips-pill .coin{order:-1;margin:0 5px 0 0}
.page-body .shop-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
@media (prefers-reduced-motion:reduce){.dtile.today::after,.gift-bounce{animation:none}}

/* ================= the shop ================= */
.sh-top{display:flex;align-items:center;gap:10px}
.sh-tabs{flex:1}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sh-item{--rc:#8aa0aa;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px 10px;border-radius:14px;text-align:center;
  border:1px solid color-mix(in srgb,var(--rc) 35%,var(--line));
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--rc) 16%,transparent),transparent 70%),var(--bg);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.sh-item:hover{transform:translateY(-2px);border-color:var(--rc);box-shadow:0 10px 24px -12px var(--rc)}
.sh-item.r1{--rc:#5fd38a}.sh-item.r2{--rc:#5aa9ff}.sh-item.r3{--rc:#b77bff}.sh-item.r4{--rc:#ffc547}
.sh-item.r4{background:radial-gradient(120% 70% at 50% 0%,rgba(255,197,71,.24),transparent 70%),var(--bg)}
.sh-item.on{border-color:var(--safe);box-shadow:inset 0 0 0 1px var(--safe)}
.sh-item b{font-size:13.5px}
.sh-item .rar{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--rc)}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:100%;padding:8px 6px;border-radius:9px;border:1px solid var(--line);font-weight:900;font-size:13px;cursor:pointer;flex-wrap:wrap}
.sh-btn.buy{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 6px 16px -8px var(--accent)}
.sh-btn.buy .coin{order:-1;margin:0 5px 0 0}
.sh-btn.buy:disabled{background:var(--raised-2);color:var(--muted);border-color:var(--line);box-shadow:none;cursor:default}
.sh-btn.buy small{flex-basis:100%;font-size:10px;font-weight:700;opacity:.8}
.sh-btn.equip{background:var(--raised-2);color:var(--fg)}
.sh-btn.equip:hover{border-color:var(--accent)}
.eq-badge{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:8px 6px;border-radius:9px;font-weight:900;font-size:13px;color:var(--safe);background:color-mix(in srgb,var(--safe) 14%,transparent)}
/* previews */
.pv{display:grid;place-items:center;width:100%;height:84px;position:relative}
.pv-back i{position:absolute;width:44px;height:68px;border-radius:5px;background:var(--back-img,var(--back-1)) center/cover;box-shadow:0 4px 10px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.pv-back i:first-child{transform:translateX(-12px) rotate(-10deg)}
.pv-back i:last-child{transform:translateX(12px) rotate(8deg)}
.pv-back[data-id="ruby"] i{filter:hue-rotate(150deg) saturate(1.25)}
.pv-back[data-id="emerald"] i{filter:hue-rotate(-60deg) saturate(1.2)}
.pv-back[data-id="midnight"] i{filter:grayscale(.6) brightness(.75) contrast(1.1)}
.pv-back[data-id="gold"] i{filter:sepia(.85) saturate(1.8) hue-rotate(-12deg) brightness(1.05)}
.pv-back[data-id="amethyst"] i{filter:hue-rotate(40deg) saturate(1.3)}
.pv-felt{--f1:#17394b;--f2:#0b1c25;width:118px;height:76px;margin:4px auto;border-radius:38px;
  /* the felt's grain blends into the colour, as on the table, instead of covering it */
  background:var(--felt-tex,none) center/90px,radial-gradient(120% 90% at 50% 40%,var(--f1),var(--f2) 75%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 4px rgba(5,12,16,.6),inset 0 0 0 5px rgba(255,176,59,.14),0 6px 14px rgba(0,0,0,.4)}
.pv-felt i{position:absolute;top:50%;width:16px;height:24px;border-radius:3px;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pv-felt i:nth-child(1){left:34px;transform:translateY(-50%) rotate(-12deg)}
.pv-felt i:nth-child(2){left:51px;transform:translateY(-55%)}
.pv-felt i:nth-child(3){left:68px;transform:translateY(-50%) rotate(12deg)}
.pv-felt[data-id="green"]{--f1:#1d5a35;--f2:#0b2416}
.pv-felt[data-id="bordeaux"]{--f1:#5a1d2b;--f2:#220b11}
.pv-felt[data-id="navy"]{--f1:#1d2f5a;--f2:#0b1226}
.pv-felt[data-id="graphite"]{--f1:#33393d;--f2:#121416}
.pv-felt[data-id="violet"]{--f1:#3f2560;--f2:#160c24}
.pv-frame .pava.big{width:62px;height:62px;font-size:30px}
@media (max-width:420px){.sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a phone: the week in two rows (1-4, then 5, 6 and a double-width day 7) so every label fits */
@media (max-width:560px){
  .dstrip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dtile.seventh{grid-column:span 2}
  .dtile small{font-size:10.5px}
}
.chips-pill:empty{display:none}
/* headings and shop tabs never break inside a word; on a phone the tabs get their own row */
.hub-card header{flex-wrap:wrap}
.hc-title{white-space:nowrap}
.sh-tabs button{white-space:nowrap}
@media (max-width:480px){
  .sh-top{flex-wrap:wrap}
  .sh-tabs{order:2;flex-basis:100%}
  .sh-top .chips-pill{margin-left:auto}
}
/* a žeton count: the number and the coin, nothing else */
.chipnum{display:inline-flex;align-items:center;gap:1px;font-weight:800;color:var(--accent-hi);font-variant-numeric:tabular-nums}
.ac-who small{display:flex;align-items:center;gap:8px}
/* ================= new game: the modes and how to play ================= */
.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mode-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;border-radius:14px;cursor:pointer;text-align:left;
  border:1px solid var(--line);background:radial-gradient(120% 80% at 50% 0%,rgba(255,176,59,.08),transparent 70%),var(--raised);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.mode-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 12px 26px -14px var(--accent)}
.mode-card.sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 10px 24px -14px var(--accent)}
.mode-card.isl{background:radial-gradient(120% 80% at 30% 0%,rgba(63,214,200,.12),transparent 60%),radial-gradient(120% 80% at 80% 0%,rgba(255,180,92,.1),transparent 60%),var(--raised)}
.mode-art{width:100%;height:auto;aspect-ratio:3/2;border-radius:10px;background:var(--bg)}
.mc-txt{display:flex;flex-direction:column;gap:2px}
.mc-txt b{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:18px;line-height:1.1}
.mc-txt small{font-size:11.5px;color:var(--muted);line-height:1.3}
.mc-tags{display:flex;flex-wrap:wrap;gap:4px}
.mc-tags i{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--bg);color:var(--muted);white-space:nowrap}
.mode-card.isl .mc-tags i:last-child{color:#0b1418;background:linear-gradient(90deg,var(--isA),var(--isB))}
.choice.play{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
.choice.play .ch-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--bg)}
.choice.play .ch-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.choice.play .ch-go{flex:none;font-size:24px;color:var(--faint);transition:transform .15s,color .15s}
.choice.play:hover .ch-go{transform:translateX(3px);color:var(--accent)}
.choice.play.ranked .ch-ico{background:linear-gradient(135deg,rgba(155,107,255,.35),rgba(255,176,59,.2))}
.choice.ranked b::after{content:none}
.choice.ranked.locked .ch-go::before{content:"🔒";font-size:15px}
.choice.ranked.locked .ch-go{font-size:0}
.ghost.leave{color:var(--muted);background:transparent}
.ghost.leave:hover{color:var(--hot);border-color:var(--hot)}
/* ================= one slim bar on top, the table below ================= */
.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px;padding:12px 16px}
.topbar{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;background:var(--rail);border:1px solid var(--line);border-radius:14px;min-width:0}
.topbar .brand{min-width:0}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.top-actions .lang{margin-left:0}
.iconbtn{width:38px;height:38px;padding:0;border-radius:10px;border:1px solid var(--line);background:var(--raised);display:grid;place-items:center;font-size:17px;cursor:pointer;transition:border-color .15s,opacity .15s}
.iconbtn:hover{border-color:var(--accent)}
.iconbtn[aria-pressed="false"]{opacity:.65}
.topbar .leave{padding:8px 12px}
.stage{min-height:440px}
.rules-sheet{width:min(620px,100%);max-height:calc(100% - 8px);overflow:hidden;padding:18px 18px 14px;gap:10px}
.rules-sheet .rules{overflow-y:auto;border-top:0;padding-top:0}
.rules-sheet .rules > :first-child{margin-top:0}
@media (max-width:860px){
  .app{grid-template-rows:auto auto;padding:10px 12px}
  .topbar{padding:6px 8px 6px 10px;gap:8px}
  .brand p{display:none}
  .top-actions{gap:6px}
  .iconbtn{width:34px;height:34px;font-size:15px}
  .topbar .leave{padding:7px 9px}
  .topbar .leave [data-i18n]{display:none}
  .stage{height:max(560px,calc(100svh - 82px))}
}

/* ================= friends and parties ================= */
.hub-link{position:relative}
.badge{position:absolute;top:6px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--safe);color:#062012;font:900 11px/20px var(--font-ui);font-style:normal;text-align:center}
.badge.hot{background:var(--hot);color:#fff;animation:armPulse .8s ease-in-out infinite alternate}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0;background:var(--faint)}
.sdot.menu{background:var(--safe);box-shadow:0 0 6px var(--safe)}
.sdot.game{background:var(--accent);box-shadow:0 0 6px var(--accent)}
/* the party card */
.hub-card.party{border-color:color-mix(in srgb,var(--joker) 50%,var(--line));background:linear-gradient(150deg,rgba(155,107,255,.18),var(--raised) 60%)}
.pmembers{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pm{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;border-radius:12px;background:var(--bg);border:1px solid var(--line);text-align:center;min-width:0}
.pm .pava{width:40px;height:40px;font-size:20px}
.pm b{font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm small{font-size:10.5px;color:var(--faint)}
.pm .sdot{position:absolute;top:8px;left:8px;margin:0}
.pm .crown{position:absolute;top:2px;left:50%;transform:translate(-50%,-6px);font-style:normal;font-size:15px}
.pm.off{opacity:.5}
.pm.invited{border-style:dashed;opacity:.75}
.pm-x{flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--raised-2);color:var(--muted);font-size:11px;cursor:pointer;display:grid;place-items:center}
.pm-x:hover{color:var(--hot);border-color:var(--hot)}
.pm-x.sure{width:auto;padding:0 9px;border-radius:999px;color:#fff;background:var(--hot);border-color:var(--hot);font-weight:800}
.pm .pm-x{position:absolute;top:5px;right:5px;width:20px;height:20px;font-size:10px}
.pmodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px;background:var(--bg);border-radius:10px}
.pmode{border:0;border-radius:7px;padding:8px 4px;background:transparent;color:var(--muted);font-weight:800;font-size:11.5px;cursor:pointer;line-height:1.2}
.pmode.sel{background:var(--raised-2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--joker)}
.pmode:disabled{cursor:default}
.pmode:disabled:not(.sel){opacity:.6}
.toggle.small{padding:8px 12px;font-size:13px}
.pteams{margin:0;padding:8px 12px;border-radius:10px;background:var(--bg);color:var(--muted);font-weight:700}
.prow{display:flex;gap:8px}
.prow .ghost{flex:1}
/* the friends page */
.fcode .code-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.code-val{font:900 26px/1 var(--font-ui);letter-spacing:.18em;padding:8px 14px;border-radius:10px;background:var(--bg);border:1px dashed color-mix(in srgb,var(--accent) 60%,var(--line));color:var(--accent-hi);flex:1;text-align:center;min-width:160px}
#f-code{flex:1;min-width:0;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:800 16px var(--font-ui);letter-spacing:.14em;text-transform:uppercase}
.frl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fr{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;background:var(--bg);border:1px solid var(--line)}
.fr.off{opacity:.6}
.fr .pava{width:34px;height:34px;font-size:17px}
.fr-who{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fr-who b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-who small{font-size:11px;color:var(--muted)}
.fr-act{display:flex;align-items:center;gap:6px;flex:none}
.fr-act .sh-btn{width:auto;padding:6px 12px}
.fr-tag{font-size:11px;font-weight:800;color:var(--muted);padding:3px 8px;border-radius:999px;background:var(--raised-2)}
/* an invite: a card at the bottom until you answer */
.invite-card{position:absolute;left:50%;bottom:16px;z-index:1300;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  width:min(440px,calc(100% - 24px));padding:10px 12px;border-radius:16px;background:var(--rail);border:1px solid var(--joker);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 26px -8px var(--joker-glow)}
.invite-card.show{animation:trayIn .3s cubic-bezier(.2,1.3,.4,1)}
.invite-card .pava{width:40px;height:40px;font-size:20px}
.iv-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.iv-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-txt small{font-size:12px;color:var(--muted)}
.invite-card .cta{padding:9px 14px;font-size:13px}
.invite-card .ghost{padding:9px 10px}
@media (max-width:420px){.invite-card{flex-wrap:wrap}.invite-card .cta,.invite-card .ghost{flex:1}}
@media (prefers-reduced-motion:reduce){.badge.hot{animation:none}}
/* until the page knows who you are, the menu waits out of sight, then fades in complete */
#menu .menu-sheet{transition:opacity .25s ease}
body.booting #menu .menu-sheet{opacity:0;animation:none}

/* ================= readable everywhere: text colours that meet WCAG AA on every panel ================= */
:root{--muted:#9fb7c2;--faint:#8aa5b2;--hot-fill:#cc3a24}
.pod .fold.arm,.pm-x.sure,.badge.hot{background:var(--hot-fill);border-color:var(--hot-fill)}
.callout.low{background:#1e6fb0}
.callout.high{background:#bb4522}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ================= your seat: one box, centred above your cards ================= */
.pod.me{background:var(--glass);border-color:var(--line);padding:4px 11px 4px 4px;gap:8px;z-index:700}
.pod.me .ava{width:24px;height:24px}
/* while a seat's box changes width, what does not fit yet is cut off at its sides only */
.pod.resizing{clip-path:inset(-40px 0 -40px 0 round 999px)}

/* ================= jednohubka and chlebíček: the buttons above your seat ================= */
.combo-bar{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:760;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100vw - 32px)}
.combo-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--joker);cursor:pointer;
  background:linear-gradient(110deg,rgba(155,107,255,.35),rgba(255,176,59,.22));color:var(--fg);font-weight:800;font-size:13px;white-space:nowrap;
  box-shadow:0 8px 24px -8px var(--joker-glow);animation:comboIn .35s cubic-bezier(.2,1.4,.4,1),comboGlow 1.6s ease-in-out .35s infinite alternate}
.combo-btn span{font-size:16px}
.combo-btn:hover{transform:translateY(-2px)}
.narrow .combo-btn{font-size:12px;padding:7px 11px}
@keyframes comboIn{from{opacity:0;transform:translateY(8px) scale(.85)}}
@keyframes comboGlow{to{box-shadow:0 8px 30px -4px var(--joker-glow),0 0 0 3px rgba(155,107,255,.25)}}
.banner.combo b{background:linear-gradient(180deg,#fff 0%,#d9c6ff 50%,var(--joker) 100%);-webkit-background-clip:text;background-clip:text}
.banner.pyr b{font-size:clamp(28px,4.6vw,54px)}
.banner.pyr span{color:var(--accent-hi);letter-spacing:.12em}

/* ================= the Pyrrhic Element beside the ash ================= */
.pyr-shape{position:absolute;left:0;top:0;z-index:3;pointer-events:none;border-radius:8px;transition:box-shadow .3s}
.pyr-shape i{position:absolute;border-radius:2px;border:1px dashed rgba(180,190,194,.3)}
.pyr-shape i.got{border:1.5px solid var(--pc);background:color-mix(in srgb,var(--pc) 22%,transparent)}
.pyr-shape.threat{animation:pyrThreat 1.2s ease-in-out infinite alternate}
@keyframes pyrThreat{from{box-shadow:0 0 0 4px rgba(255,176,59,.05),0 0 10px -4px var(--accent)}to{box-shadow:0 0 0 6px rgba(255,176,59,.12),0 0 26px -2px var(--accent)}}
.hud .corner.pyr-lbl{color:var(--accent)}
/* on a phone the full name wraps instead of running into the seat at the top */
.narrow .hud .corner.pyr-lbl{white-space:normal;max-width:84px;font-size:9.5px;letter-spacing:.05em;line-height:1.35}
.hud .corner.pyr-lbl.threat{color:var(--accent-hi);animation:blink 1.6s ease-in-out infinite}
/* the saying, floating up under the shape for a moment */
.flavor{position:absolute;left:0;top:0;z-index:960;transform:translateX(-50%);pointer-events:none;white-space:nowrap;padding:5px 11px;border-radius:999px;
  background:rgba(7,16,22,.92);border:1px solid var(--accent);color:var(--accent-hi);font:italic 700 13px/1.2 var(--font-display);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6),0 0 18px -6px var(--accent);animation:flavorIn 3.2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes flavorIn{0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.9)}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-4px)}}
.narrow .flavor{font-size:11.5px;padding:4px 9px}
.status:empty{opacity:0}
.log .clm{color:var(--accent);font-size:11px}

/* ================= the Element's introduction ================= */
.intro{position:absolute;inset:0;z-index:1110;display:grid;place-items:center;pointer-events:none;padding:16px}
.intro.in{pointer-events:auto;cursor:pointer}
.intro-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:18px 28px 20px;border-radius:22px;max-width:min(460px,100%);
  background:rgba(7,16,22,.9);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 30px 80px -10px rgba(0,0,0,.75),0 0 60px -20px var(--accent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:scale(.9) translateY(10px)}
.intro.in .intro-card{animation:introIn .55s cubic-bezier(.2,1.25,.35,1) forwards}
.intro.out .intro-card{animation:introOut .4s ease-in forwards}
@keyframes introIn{to{opacity:1;transform:none}}
@keyframes introOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.96) translateY(-12px)}}
.intro-card .label{color:var(--accent)}
.intro-title{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(26px,5vw,40px);line-height:1.05;
  background:linear-gradient(180deg,#fff 0%,var(--card) 50%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-title i{font-size:.55em;font-style:italic;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.intro-tag{margin:0;font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--accent-hi)}
.intro-how{font-size:12.5px;color:var(--muted);line-height:1.45;max-width:340px}
.intro-art{display:flex;align-items:center;justify-content:center;gap:22px;min-height:110px;padding:6px 0}
.ic{display:block;width:22px;height:35px;border-radius:3px;flex:none;background:var(--back-img,linear-gradient(160deg,var(--back-1),var(--back-2))) center/cover,var(--back-1);
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);opacity:0;animation:icIn .42s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(.25s + var(--i) * 70ms)}
@keyframes icIn{from{opacity:0;transform:translateY(-26px) scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
.ia-aside{position:relative;display:flex}
.ia-main{position:relative;display:flex;align-items:center;justify-content:center}
.ia-aside.side{position:absolute;left:100%;top:50%;margin:-18px 0 0 22px}
.ia-aside .ic{margin-left:-14px;transform:rotate(calc(var(--i) * 4deg - 8deg))}
.ia-aside .ic:first-child{margin-left:0}
.ia-aside .ic.flat{animation-name:icAside}
@keyframes icAside{from{opacity:0;transform:translateX(-30px) rotate(-20deg)}to{opacity:1;transform:rotate(calc(var(--i) * 4deg - 8deg))}}
.ia-aside em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:italic 800 26px/1 var(--font-display);color:var(--accent-hi);text-shadow:0 2px 10px rgba(0,0,0,.8)}
.ia-pile{position:relative;width:30px;height:48px}
.ia-pile .ic{position:absolute;left:4px;top:6px;transform:translate(calc(var(--i) * .7px),calc(var(--i) * -.9px)) rotate(calc((var(--i) * 37 % 9) * 1deg - 4deg));animation-name:icDrop}
@keyframes icDrop{from{opacity:0;transform:translateY(-40px) scale(1.2)}to{opacity:1}}
.ia-pyr{display:flex;flex-direction:column;align-items:center;gap:3px}
.ia-pyr .row{display:flex;gap:3px;margin-top:-12px}
.ia-pyr .row:first-child{margin-top:0}
.ia-sword{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% -28px;animation:sway 2.6s ease-in-out .3s infinite}
.ia-sword .thread{position:absolute;left:50%;top:-28px;width:1px;height:30px;background:linear-gradient(var(--muted),rgba(159,183,194,.2))}
.ia-sword .pommel{width:35px;height:22px}
.ia-sword .guard{display:flex;gap:0;margin-top:-4px}
.ia-sword .guard .ic{width:35px;height:22px}
.ia-sword .blade{display:flex;flex-direction:column;align-items:center;margin-top:-4px}
.ia-sword .blade .ic{margin-top:-17px}
.ia-sword .blade .ic:first-child{margin-top:0}
.ia-sword .blade .ic.point{clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.ic,.ia-sword,.intro.in .intro-card,.combo-btn,.pyr-shape.threat,.hud .corner.pyr-lbl.threat{animation:none!important;opacity:1;transform:none}}

/* ================= the menu: who is playing, the legal pages, support ================= */
.live{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.live.on i{background:var(--safe);box-shadow:0 0 8px var(--safe);animation:blink 2s infinite}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:11.5px}
.legal-links a,.legal-links button{color:var(--muted);text-decoration:none;background:none;border:0;padding:2px 0;font:inherit;font-weight:700;cursor:pointer}
.legal-links a:hover,.legal-links button:hover{color:var(--fg);text-decoration:underline}
.legal-links .donate{color:#ff8fa3;flex-basis:100%;text-align:center}
.legal-links.in-rules{justify-content:flex-start;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.consent{flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--muted)}
.consent a,.menu-note a{color:var(--accent-hi)}
.nick .menu-note{font-size:11px}
.ekind{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row}
.ekind button{padding:8px 4px;font-size:12px}
.pmodes.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ================= the profile: game history, deleting the account ================= */
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.hist-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;text-align:left;transition:border-color .15s}
.hist-row:hover{border-color:var(--accent)}
.h-pl{flex:none;width:34px;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--muted);text-align:center}
.h-pl.win{color:var(--accent)}
.h-pl.lost{color:var(--hot)}
.h-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.h-main b{font-size:13px}
.h-main small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-aw{flex:none;font-size:11px;font-weight:800;color:var(--accent);max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-row .ch-go{color:var(--faint);font-size:18px}
.hist-back{align-self:flex-start;padding:4px 0}
.hist-st li{padding:7px 10px}
.hist-st .nm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pc)}
.botm{font-size:9px;font-weight:800;color:var(--muted);padding:0 4px;border-radius:3px;background:var(--raised-2)}
.hist-rounds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.hist-rounds li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 8px;align-items:center;padding:6px 8px;border-radius:9px;background:var(--bg)}
.hist-rounds .rn{font-size:11px;font-weight:800;color:var(--faint);text-align:right}
.hplays{display:flex;flex-wrap:wrap;gap:4px}
.hp{display:inline-flex;gap:1px;padding:2px;border-radius:5px;box-shadow:inset 0 -2px 0 var(--pc)}
.hres{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;font-weight:700}
.hres .res{display:inline-flex;align-items:center;gap:5px;color:var(--fg)}
.hres .res i{width:7px;height:7px;border-radius:50%;background:var(--pc)}
.hres .res.ashx{color:var(--ash);font-style:italic}
.hres .res.clm{color:var(--accent)}
.p-sec.danger{border:1px solid color-mix(in srgb,var(--hot) 35%,var(--line))}
.danger-btn{background:var(--hot-fill);border-color:var(--hot-fill);color:#fff}
.ee-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 7px;width:100%}

/* ================= Trosečník results: one row per team ================= */
.standings li.team .avas{display:flex;flex:none}
.standings li.team .avas .ava:last-child{margin-left:-7px;box-shadow:0 0 0 2px var(--raised)}
.standings li.team .nm{white-space:normal}

/* ================= what the ranks are ================= */
.rank-info{padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line)}
.rank-info summary{cursor:pointer;font-family:var(--font-display);font-style:italic;font-weight:800;font-size:17px;list-style:none;display:flex;align-items:center;justify-content:space-between}
.rank-info summary::-webkit-details-marker{display:none}
.rank-info summary::after{content:"–";color:var(--muted);font-family:var(--font-ui);font-style:normal}
.rank-info:not([open]) summary::after{content:"+"}
.rank-info .tiers{list-style:none;margin:10px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:6px 14px}
.rank-info .tiers li span{white-space:nowrap}
.rank-info .tiers li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rank-info p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.link-btn{align-self:flex-start;border:0;background:none;padding:2px 0;color:var(--accent-hi);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.link-btn:hover{text-decoration:underline}

/* ================= new game: the modes fit on the screen ================= */
.menu-sheet.wide .modes{grid-template-columns:repeat(4,minmax(0,1fr))}
.mode-art{aspect-ratio:auto;height:118px}
@media (max-width:900px){.menu-sheet.wide .modes{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-art{height:92px}}
@media (max-width:560px){
  .menu-sheet.wide .modes,.modes{grid-template-columns:1fr;gap:8px}
  .mode-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:5px;align-items:center;padding:8px 10px 8px 8px}
  .mode-art{grid-row:1/3;width:96px;height:64px}
  .mode-card .mc-txt b{font-size:16px}
}
@media (max-height:700px) and (min-width:561px){.mode-art{height:84px}}
/* when a page really is longer than the screen, its scrollbar stays slim */
.menu-sheet,.prof-sheet,.rules-sheet .rules,.endcard .sheet{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* shorter screens: the menu tightens its spacing, so its pages fit without a scrollbar */
@media (max-height:780px){
  .menu-sheet{padding:18px 20px;gap:11px}
  .menu-sheet .step{gap:10px}
  .menu-title{font-size:38px!important}
  .menu-sheet .cta.big{padding:13px 16px;font-size:16px}
  .menu-sheet .hub-main,.menu-sheet .hub-side{gap:11px}
  .levels button{padding:9px 10px}
  .choice.play{padding:10px 14px}
  .menu-sheet .hub-card{padding:12px;gap:10px}
}
@media (max-height:640px){
  .menu-lead{display:none}
  .menu-sheet .toggle{padding:8px 12px}
  .menu-sheet .step{gap:8px}
  .levels button span{display:none}
  .ekind button{padding:6px 4px}
  .qcard .hc-note{display:none}
  .q{padding:6px 8px;gap:8px}
  .q .qi{width:32px;height:32px;font-size:16px}
  .dtile{padding:5px 2px}
  .cta.claim{padding:10px 12px}
}
/* phones: the bot settings and the modes fit on one screen */
@media (max-width:560px){
  .levels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .levels button{flex-direction:column;align-items:center;text-align:center;padding:10px 6px}
  .levels button span{display:none}
}
@media (max-width:560px) and (max-height:720px){
  .menu-sheet{padding:16px 16px}
  .mode-card{grid-template-columns:84px minmax(0,1fr);padding:6px 8px 6px 6px;row-gap:3px}
  .mode-art{width:84px;height:54px}
  .menu-sheet .seg button{padding:7px 4px}
}