/* Heart of the Cards: bright storybook look. Cream paper, serif display, glass panels over card artwork. */
:root{
  --bg:#FBF7EF; --surface:#FFFFFF; --surface-2:#F5EFE4; --ink:#1B2233; --muted:#5E6677; --faint:#9097A4; --line:#ECE4D5;
  --accent:#1E88E5; --accent-ink:#FFFFFF; --accent-soft:#E4F0FC; --gold:#D4962A; --teal:#159C9C;
  --glow:#1E88E5; --red:#C2413B; --good:#1F8A5B; --warn:#A8660A;
  --glass:rgba(255,255,255,.78); --glass-line:rgba(255,255,255,.7);
  --mat:#E6EEF7; --mat-opp:#F0E9F1; --opp-tint:rgba(255,255,255,.4); --zone:rgba(27,34,51,.035); --zone-line:rgba(27,34,51,.13);
  --radius:22px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(60,45,20,.05),0 12px 32px -12px rgba(60,45,20,.16); --card-shadow:0 1px 3px rgba(0,0,0,.25);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1322; --surface:#141C2E; --surface-2:#1B2539; --ink:#F3EEE4; --muted:#A8AFBD; --faint:#737C8D; --line:#26314A;
  --accent:#6DB6F5; --accent-ink:#0D1322; --accent-soft:#16304D; --gold:#E9B45A; --teal:#4CCACA; --glow:#6DB6F5;
  --red:#F08A8A; --good:#6FD3A0; --warn:#F2B766; --glass:rgba(16,22,38,.74); --glass-line:rgba(255,255,255,.08);
  --mat:#15223A; --mat-opp:#1E1B31; --opp-tint:rgba(160,120,200,.07); --zone:rgba(243,238,228,.03); --zone-line:rgba(243,238,228,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6); --card-shadow:0 1px 3px rgba(0,0,0,.6); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0D1322; --surface:#141C2E; --surface-2:#1B2539; --ink:#F3EEE4; --muted:#A8AFBD; --faint:#737C8D; --line:#26314A;
  --accent:#6DB6F5; --accent-ink:#0D1322; --accent-soft:#16304D; --gold:#E9B45A; --teal:#4CCACA; --glow:#6DB6F5;
  --red:#F08A8A; --good:#6FD3A0; --warn:#F2B766; --glass:rgba(16,22,38,.74); --glass-line:rgba(255,255,255,.08);
  --mat:#15223A; --mat-opp:#1E1B31; --opp-tint:rgba(160,120,200,.07); --zone:rgba(243,238,228,.03); --zone-line:rgba(243,238,228,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6); --card-shadow:0 1px 3px rgba(0,0,0,.6); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.02;text-wrap:balance;font-kerning:normal;font-feature-settings:"kern","liga","onum"}
h1 em,h2 em{font-style:italic;font-weight:600;letter-spacing:-.01em;background:linear-gradient(100deg,#C8871F,#E9B45A 55%,#D4962A);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
h1{font-size:clamp(2.7rem,8vw,4.6rem);line-height:.98}
h2{font-size:clamp(1.9rem,5vw,2.6rem)}
h3{font-size:1.45rem}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
main.wrap{padding-top:24px;padding-bottom:40px}
.eyebrow{display:block;font:600 .72rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.eyebrow.gold{color:var(--gold)}
.lede{color:var(--muted);font-size:1.05rem;max-width:58ch;margin-top:12px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.section{margin-top:28px}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font:600 1.45rem/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand svg{width:22px;height:22px;flex:none}
.top nav{display:flex;gap:4px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{font-weight:500;font-size:.95rem;color:var(--muted);padding:8px 14px;border-radius:999px;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.top .cta{margin-left:0}
@media (max-width:860px){.top .cta{display:none}.top nav{margin-right:0}}
@media (max-width:620px){
  .top .wrap{height:auto;flex-wrap:wrap;gap:6px 12px;padding-top:10px;padding-bottom:8px}
  .top nav{order:3;width:100%;margin:0 -8px;justify-content:space-between}
  .top nav a{padding:6px 10px;font-size:.9rem}
  .brand{font-size:1.2rem}
}

/* ---------- buttons, pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .82rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;border-radius:999px;border:1.5px solid transparent;background:var(--accent);color:var(--accent-ink);cursor:pointer;min-width:96px;white-space:nowrap;box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover{text-decoration:none;filter:brightness(1.05)}
.btn.ghost{background:var(--surface);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:none}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.btn.sm{padding:10px 16px;font-size:.75rem}
.seg{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;box-shadow:var(--shadow)}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;padding:9px 16px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 13px;border-radius:999px;font-size:.84rem;font-weight:550;color:var(--muted);cursor:pointer;white-space:nowrap;text-transform:capitalize}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.badge{display:inline-flex;align-items:center;font:600 .68rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.first{background:var(--accent-soft);color:var(--accent)}
.badge.second{background:color-mix(in srgb,var(--gold) 16%,var(--surface));color:var(--warn)}
.badge.pts{background:#F6E3A8;color:#5A4300}
.badge.ban{background:var(--red);color:#fff}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.sheetpanel{padding:clamp(22px,4vw,44px)}
.pad{padding:18px}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:-40px;z-index:-2;background:var(--hero) center/cover;filter:blur(18px) saturate(1.15);transform:scale(1.08)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(251,247,239,.2) 60%,var(--bg) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center;padding-top:56px;padding-bottom:72px}
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:28px;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 30px 60px -30px rgba(20,40,80,.35)}
.hero .glass{padding:clamp(26px,4vw,48px)}
.hero h1{margin-top:4px}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero .art{position:relative;aspect-ratio:1;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(20,40,80,.45);border:6px solid rgba(255,255,255,.75)}
.hero .art img{width:100%;height:100%;object-fit:cover;display:block}
.hero .fan{position:absolute;right:-6px;bottom:-10px;display:flex}
.hero .fan img{width:92px;border-radius:6px;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);margin-left:-40px;transform-origin:bottom center}
.hero .fan img:nth-child(1){transform:rotate(-12deg) translateY(6px)}
.hero .fan img:nth-child(2){transform:rotate(-2deg)}
.hero .fan img:nth-child(3){transform:rotate(9deg) translateY(4px)}
.features{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}
.feature{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;line-height:1.3}
.feature i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);font-style:normal}
.feature svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-top:24px;padding-bottom:40px}
  .hero .art{max-width:420px;width:100%;margin:0 auto;order:-1;aspect-ratio:16/11}
  .hero .fan img{width:64px;margin-left:-28px}
}

/* ---------- page header band (inner pages) ---------- */
.band{position:relative;overflow:hidden;border-radius:var(--radius);min-height:210px;display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);isolation:isolate}
.band .art{position:absolute;inset:0 0 0 50%;z-index:-2;background:var(--art) var(--pos,center 25%)/cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--surface) 46%,color-mix(in srgb,var(--surface) 55%,transparent) 60%,transparent 78%)}
.band .txt{padding:28px clamp(22px,4vw,40px);max-width:min(620px,50%)}
.band .lede{font-size:.98rem}
@media (max-width:620px){.band{min-height:0;align-items:flex-end}.band .art{inset:0;opacity:.35}.band::before{background:linear-gradient(0deg,var(--surface) 30%,color-mix(in srgb,var(--surface) 60%,transparent))}.band .txt{padding-top:80px}}

/* ---------- cast (deck) cards ---------- */
.cast{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px}
@media (max-width:960px){.cast{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cast{grid-template-columns:1fr 1fr;gap:12px}}
.member{display:flex;flex-direction:column;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s}
.member:hover{text-decoration:none;transform:translateY(-3px)}
.member .pic{aspect-ratio:3/4;overflow:hidden}
.member .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.member:hover .pic img{transform:scale(1.04)}
.member .body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.member h3{font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.member p{color:var(--muted);font-size:.9rem;line-height:1.5}
.member .go{margin-top:auto;padding-top:8px;font:700 .72rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* ---------- two panel row ---------- */
.duo{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:18px}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.mosaic{display:grid;gap:10px;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;margin-top:18px;height:280px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}
.mosaic img:first-child{grid-row:span 2}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media (max-width:520px){.trio{grid-template-columns:1fr}}
.trio b{display:block;font:600 .68rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.trio span{color:var(--muted);font-size:.88rem;line-height:1.5}
.worldpic{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
@media (max-width:520px){.worldpic{grid-template-columns:1fr}}
.worldpic img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block}
.note-card{background:var(--surface-2);border-radius:16px;padding:22px}

/* turn steps */
.turns{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:n;padding:0;margin:22px 0 0}
@media (max-width:860px){.turns{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.turns{grid-template-columns:1fr}}
.turns li{list-style:none;counter-increment:n;background:var(--surface-2);border-radius:16px;padding:18px}
.turns li::before{content:counter(n,decimal-leading-zero);display:block;font:600 1.6rem/1 var(--serif);color:var(--gold);margin-bottom:6px}
.turns b{font:600 1.2rem/1.2 var(--serif)}
.turns p{color:var(--muted);font-size:.9rem;margin-top:4px}

/* FAQ / glossary */
.faq{margin-top:18px;border-top:1px solid var(--line)}
.faq div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.faq b{font:600 1.1rem/1.3 var(--serif)}
.faq span{color:var(--muted);font-size:.94rem}
@media (max-width:620px){.faq div{grid-template-columns:1fr;gap:2px}}
table.pts{border-collapse:collapse;width:100%;font-size:.93rem;margin-top:18px}
table.pts td,table.pts th{padding:10px 4px;border-top:1px solid var(--line);text-align:left}
table.pts th{border-top:0;font:600 .68rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
table.pts td:last-child,table.pts th:last-child{text-align:right;font-variant-numeric:tabular-nums}

/* CTA banner + footer */
.banner{position:relative;overflow:hidden;border-radius:var(--radius);margin-top:18px;min-height:300px;display:grid;place-items:center;text-align:center;isolation:isolate;box-shadow:var(--shadow)}
.banner .art{position:absolute;inset:0;z-index:-2;background:var(--art) center 35%/cover}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(255,255,255,.72),rgba(255,255,255,.25) 70%)}
.banner h2{color:#1B2233;padding:0 20px}
.banner .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.tagline{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,28px);flex-wrap:wrap;margin:44px 0 8px;font:500 clamp(.8rem,2.4vw,1.1rem)/1 var(--serif);letter-spacing:.42em;text-transform:uppercase;color:var(--ink)}
.tagline svg{width:30px;height:30px}
.tagline i{font-style:normal;color:var(--teal);letter-spacing:0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 34px;border-top:1px solid var(--line);margin-top:28px;font-size:.82rem;color:var(--muted)}
.foot .brand{font-size:1.1rem}
.foot nav{display:flex;gap:16px}
.foot nav a{color:var(--teal);font-weight:600}

/* ---------- browser: deck switch + scenario picker ---------- */
.browse{margin-top:22px}
.picker{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:14px 0 22px}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:86px;box-shadow:var(--shadow)}
.pick b{font:600 1.2rem/1.2 var(--serif)}
.pick .row{display:flex;gap:6px;align-items:center;margin-top:auto;flex-wrap:wrap}
.pick[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent),var(--shadow)}
@media (max-width:700px){
  .picker{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;margin-left:-20px;margin-right:-20px;padding:2px 20px 8px;scroll-padding:0 20px}
  .picker::-webkit-scrollbar{display:none}
  .pick{flex:0 0 72%;max-width:260px;min-height:0;scroll-snap-align:start}
}
.empty-state{padding:28px 16px;text-align:center;color:var(--muted)}

/* ---------- play layout ---------- */
.play{display:grid;gap:14px}
@media (min-width:960px){.play{grid-template-columns:minmax(0,350px) minmax(0,1fr);gap:22px;align-items:start}.play .side-col{position:sticky;top:88px}}
.stepbox{padding:18px 20px;min-height:130px;border-radius:20px}
.stepbox .where{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.stepbox .turn{font:600 1.25rem/1.15 var(--serif)}
.stepbox .ph{font:600 .66rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--surface));padding:5px 9px;border-radius:999px}
.stepbox .ph:empty{display:none}
.stepbox .w{margin-top:10px;color:var(--muted);font-size:.93rem}
.stepbox .w:empty{display:none}
.moved{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.moved:empty{display:none}
.moved span{font-size:.75rem;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.need{font-size:.92rem;color:var(--muted);margin-bottom:12px;padding:0 4px}
.need:empty{display:none}
.stepnav{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.stepnav .btn{min-width:108px}
.progress{height:4px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .25s}
@media (max-width:959px){
  .stepnav{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  body:has(.stepnav){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.stepnav .count{margin-left:auto;color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}

/* ---------- the playmat ---------- */
.mat{--gap:4px;--cw:calc((min(100vw - 40px, 640px) - 6*var(--gap) - 26px)/7);--ch:calc(var(--cw)*1.458);
  background:linear-gradient(180deg,var(--mat-opp),var(--mat) 45%);border-radius:24px;padding:12px;user-select:none;-webkit-user-select:none;touch-action:pan-y;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (min-width:960px){.mat{--cw:min(calc((min(100vw - 40px - 372px, 720px) - 6*var(--gap) - 26px)/7), calc((100vh - 220px)/8.3))}}
.side{display:grid;grid-template-columns:repeat(7,var(--cw));gap:var(--gap);justify-content:center}
.side.opp{background:var(--opp-tint);border-radius:14px;padding:6px 0}
.midrow{display:grid;grid-template-columns:repeat(7,var(--cw));gap:var(--gap);justify-content:center;margin:6px 0}
.midrow .cell{height:calc(var(--ch)*.4)}
.cell{position:relative;width:var(--cw);height:var(--ch);border-radius:6px;border:1px solid var(--zone-line);background:var(--zone);display:flex;align-items:center;justify-content:center}
.cell.blank{border:none;background:none}
.cell .lbl{position:absolute;font-size:.52rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);text-align:center;line-height:1.15;pointer-events:none;padding:0 2px}
.cell.pile .n{position:absolute;right:-5px;bottom:-6px;z-index:3;background:var(--ink);color:var(--bg);font-size:.64rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.bz{border:none;background:var(--ink);color:var(--bg);font-size:.6rem;font-weight:700;border-radius:5px;padding:2px 4px;cursor:pointer;line-height:1.1}
.lpbar{display:flex;align-items:center;gap:10px;padding:0 4px 8px}
.lpbar .who{font:600 1.05rem/1 var(--serif)}
.lpbar .lp{margin-left:auto;font:700 .95rem/1 var(--font);font-variant-numeric:tabular-nums;transition:color .3s;background:var(--surface);padding:5px 10px;border-radius:999px;box-shadow:var(--shadow)}
.lpbar .lp.hit{color:var(--red)}
.ohand{display:flex;align-items:center;gap:2px}
.ohand i{width:10px;height:14px;border-radius:2px;background:#2a1a0c url(/img/back.jpg) center/cover;box-shadow:0 1px 1px rgba(0,0,0,.3)}
.ohand em{font-style:normal;font-size:.78rem;color:var(--muted);margin-left:6px}
.you-bar{padding:10px 4px 0}
.hand{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:6px;min-height:calc(var(--ch)*1.15)}
.hand .c{width:calc(var(--cw)*1.15);height:calc(var(--ch)*1.15)}
.hand .empty{color:var(--faint);font-size:.85rem;align-self:center}

/* a card on the mat */
.c{position:relative;width:var(--cw);height:var(--ch);border-radius:3px;padding:0;border:0;background:#222;box-shadow:var(--card-shadow);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;flex:none}
.c img{width:100%;height:100%;display:block;border-radius:3px;object-fit:cover}
.c.back{background:#2a1a0c url(/img/back.jpg) center/cover;cursor:default}
.c.def{transform:rotate(90deg) scale(.69)}

.c .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.52rem;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px;pointer-events:none}
.c.def .tag{transform:translate(-50%,-50%) rotate(-90deg)}
.c.token{background:linear-gradient(160deg,#9aa3b2,#5d6676);border:2px solid #3d4452}
.c .tok{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:3px;color:#fff;text-align:left}
.c .tok b{font-size:.5rem;line-height:1.1}
.c .tok span{font-size:.5rem;font-weight:700}
.c.new{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--gold),0 0 16px 3px color-mix(in srgb,var(--gold) 80%,transparent)}
.c.new:not(.def){transform:translateY(-3px)}
.cell.new{box-shadow:0 0 0 2px var(--gold),0 0 12px 1px var(--gold)}
@media (prefers-reduced-motion:reduce){.c,.lpbar .lp,.progress i,.member,.member .pic img{transition:none}.c.new:not(.def){transform:none}}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(13,19,34,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet.open{display:flex}
.sheet .box{background:var(--surface);color:var(--ink);width:100%;max-width:820px;max-height:90vh;overflow:auto;border-radius:26px 26px 0 0;padding:22px 22px calc(24px + env(safe-area-inset-bottom,0px));position:relative}
@media (min-width:700px){.sheet{align-items:center}.sheet .box{border-radius:26px}}
.sheet .close{position:absolute;right:14px;top:14px;border:none;background:var(--surface-2);border-radius:999px;width:36px;height:36px;font-size:1.1rem;cursor:pointer;z-index:2}
.detail{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:26px;align-items:start}
.detail>img,.detail>.tokbig{width:100%;border-radius:10px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.tokbig{aspect-ratio:268/391;background:linear-gradient(160deg,#9aa3b2,#5d6676);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;text-align:center;padding:8px}
@media (max-width:640px){.detail{grid-template-columns:1fr;gap:16px}.detail>img,.detail>.tokbig{width:78%;max-width:320px;margin:0 auto}}
.detail h3{font-size:2rem;padding-right:40px}
.meta{color:var(--muted);font-size:.85rem;margin-top:4px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.detail .sum{margin-top:6px}
.fulltext{white-space:pre-wrap;font-size:.88rem;background:var(--surface-2);border-radius:12px;padding:12px 14px;margin-top:18px}

.links{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font:700 .75rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase}
.gylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:14px}
.gylist .c{width:100%;height:auto;aspect-ratio:268/391}

/* ---------- library ---------- */
.toolbar{display:grid;gap:12px;margin:22px 0 18px}
.search{width:100%;font:inherit;padding:14px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.search::placeholder{color:var(--faint)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:22px 14px;align-items:start}
@media (min-width:700px){.cards-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}}
.lib-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;border:none;background:none;padding:0;text-align:left;cursor:pointer;color:var(--ink);height:100%}
.lib-card .art{position:relative;display:block}
.lib-card img{width:100%;aspect-ratio:268/391;border-radius:7px;box-shadow:var(--card-shadow);display:block;background:var(--surface-2);transition:transform .25s}
.lib-card:hover img{transform:translateY(-3px)}
.lib-card .qty{position:absolute;right:6px;top:6px;background:rgba(13,19,34,.82);color:#fff;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:999px}
.lib-card .nm{font:600 1.02rem/1.15 var(--serif);margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.lib-card .rl{font:600 .64rem/1 var(--font);letter-spacing:.1em;color:var(--teal);text-transform:uppercase;margin-top:5px}
.lib-card.banned img{filter:grayscale(1) opacity(.55)}

/* ---------- practice ---------- */
.options{display:grid;gap:8px;margin-top:14px}
.opt{text-align:left;padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:550}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.opt.wrong{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.opt .why{display:block;font-weight:400;color:var(--muted);margin-top:6px;font-size:.92rem}

/* quoted card line that makes a step happen */
.cites{display:grid;gap:8px;margin-top:12px}
.cites:empty{display:none}
.cite{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;text-align:left;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-left:3px solid var(--gold);border-radius:12px;background:color-mix(in srgb,var(--gold) 7%,var(--surface));cursor:pointer}
.cite img{width:34px;border-radius:3px;box-shadow:var(--card-shadow);display:block}
.cite b{display:block;font:600 .66rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);margin-bottom:3px}
.cite q{font:italic 500 1.02rem/1.35 var(--serif);color:var(--ink);quotes:"\201C" "\201D"}
.fulltext mark{background:color-mix(in srgb,var(--gold) 30%,transparent);color:inherit;border-radius:3px;padding:0 2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 30%,transparent)}
.cn{font-weight:650;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 55%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px}
.cn:hover{text-decoration-color:var(--gold)}
.peek{position:fixed;z-index:60;width:220px;pointer-events:none;opacity:0;transform:translateY(4px) scale(.98);transition:opacity .15s,transform .15s}
.peek.show{opacity:1;transform:none}
.peek img{width:100%;display:block;border-radius:9px;box-shadow:0 22px 44px -14px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.peek{transition:none}}

/* your own face-down card: real card back, the actual card peeking from the corner */
.c .backface{position:absolute;inset:0;border-radius:3px;background:#2a1a0c url(/img/back.jpg) center/cover}
.c .peekcard{position:absolute;right:-8%;bottom:-6%;width:52%!important;height:auto!important;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.55);border:1.5px solid #fff;transform:rotate(8deg)}
.c.def .peekcard{transform:rotate(-82deg);right:-6%;bottom:-8%}
.c .fdlabel{position:absolute;left:50%;top:6%;transform:translateX(-50%);font:700 .44rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:2px 4px;border-radius:3px;white-space:nowrap;pointer-events:none}
.c.def .fdlabel{transform:translateX(-50%) rotate(-90deg);top:40%}
.hand .c .fdlabel{font-size:.5rem}
/* a stand-in: any card would do here */
.c.any{outline:2px dashed var(--gold);outline-offset:2px}
.c.any img{filter:grayscale(.85) opacity(.55)}
.c .anylabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);font:700 .52rem/1.1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#1B2233;background:var(--gold);padding:3px 6px;border-radius:4px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none}
.hand .c .anylabel{font-size:.6rem}

/* deck tiles + grouped scenario cards */
.browse{margin-top:28px}
.decktiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.decktile{position:relative;height:118px;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;background:var(--surface-2);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.decktile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .4s,filter .2s;filter:saturate(.85) brightness(.92)}
.decktile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,26,.78),rgba(10,14,26,.05) 62%)}
.decktile .dt-name{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;font:600 1.45rem/1.05 var(--serif);color:#fff;letter-spacing:.01em;overflow-wrap:anywhere}
.decktile .dt-count{position:absolute;right:10px;top:10px;z-index:1;font:700 .7rem/1 var(--font);color:#1B2233;background:rgba(255,255,255,.88);padding:4px 8px;border-radius:999px}
.decktile:hover img{transform:scale(1.04);filter:none}
.decktile[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold),var(--shadow)}
.decktile[aria-pressed="true"] img{filter:none}
.groups{margin-top:26px;display:grid;gap:20px}
.group .eyebrow{margin-bottom:10px}
.group .picker{margin:0}
.groups>.group{min-width:0}
@media (min-width:701px){.picker{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}}
.pick{min-height:96px;justify-content:space-between}
.pick b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick .num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 .72rem/1 var(--font);margin-right:8px;vertical-align:3px}
#stage{margin-top:28px}
.stepbox .need{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);font-size:.9rem}
@media (max-width:700px){
  .decktiles{gap:8px}
  .decktile{height:86px;border-radius:14px}
  .decktile .dt-name{left:10px;bottom:8px;font-size:1.05rem}
  .decktile .dt-count{right:6px;top:6px;font-size:.62rem;padding:3px 6px}
  .groups{gap:14px;margin-top:20px}
}

@media (min-width:701px){.groups.compact{grid-template-columns:1fr 1fr;column-gap:14px}.groups.compact .picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.band .txt{max-width:none}}

/* ---- page-wide alignment pass ---- */
.section,.duo{margin-top:24px}
.hero .wrap{align-items:stretch}
.hero .art{aspect-ratio:auto;height:100%;min-height:440px}
.stackpanel{display:flex;flex-direction:column;gap:12px}
.stackpanel h2{margin:0}
.stackpanel .mosaic{margin-top:auto;padding-top:10px;height:300px}
.mosaic-b{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:16px;align-items:stretch}
.mosaic-b img{grid-row:auto!important}
.mosaic-b .trio{grid-template-columns:1fr;gap:14px;margin:0;align-content:center;background:var(--surface-2);border-radius:14px;padding:18px}
.ptsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin-top:20px}
.ptrow{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;text-align:left;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-size:.9rem;color:var(--ink)}
.ptrow:hover{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.ptrow img{width:30px;border-radius:3px;box-shadow:var(--card-shadow);display:block}
.ptrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptrow b{font:700 .78rem/1 var(--font);background:#F6E3A8;color:#5A4300;padding:4px 8px;border-radius:999px}
.decktiles.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.searchrow{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.searchrow p{white-space:nowrap}
.toolbar{gap:16px;margin:28px 0 24px}
@media (max-width:860px){
  .hero .art{min-height:0;height:auto;aspect-ratio:16/11}
  .ptsgrid{grid-template-columns:1fr 1fr}
  .stackpanel .mosaic{height:240px}
}
@media (max-width:620px){
  .ptsgrid{grid-template-columns:1fr}
  .decktiles.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .searchrow{grid-template-columns:1fr}
  .mosaic-b{grid-template-columns:1fr;height:auto!important}
  .mosaic-b img{height:200px}
}
/* scenario cards: one fixed height everywhere so rows line up across groups */
.pick{height:84px;min-height:0!important;padding:12px 16px;gap:6px;border-radius:16px;justify-content:space-between}
.pick b{font-size:1.05rem;line-height:1.2;-webkit-line-clamp:2}
.pick .row{margin-top:0}
.pick .badge{padding:4px 8px;font-size:.62rem}
.group .eyebrow{margin-bottom:8px}
@media (max-width:700px){.pick{height:78px}}

/* Extra Monster Zones and Xyz materials */
.midrow.tall .cell.emz{height:var(--ch)}
.c.hasmats{box-shadow:3px 3px 0 -1px #6b4523,6px 6px 0 -2px #3a2412,var(--card-shadow)}
.c .mats{position:absolute;left:-6px;bottom:-6px;z-index:3;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#1B2233;font:700 .64rem/18px var(--font);text-align:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.c.def .mats{transform:rotate(-90deg)}

/* format switch + meta deck rows */
.seg.fmt{margin-left:4px;box-shadow:none;padding:3px}
.seg.fmt button{padding:6px 11px;font-size:.8rem}
.tilesets{display:grid;gap:18px}
.tilegroup .eyebrow{margin-bottom:10px}
a.decktile{display:block}
.decktiles.one{grid-template-columns:1fr}
.alltile{height:58px}
.alltile img{object-position:center 40%}
.alltile .dt-name{bottom:auto;top:50%;transform:translateY(-50%);font-size:1.2rem}
.alltile .dt-count{top:50%;transform:translateY(-50%)}
@media (max-width:860px){.seg.fmt{order:2;margin-left:auto}}

/* ================= site structure: Learn (lessons) and Play (duel simulator) ================= */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-weight:600}
.skip:focus{top:12px}
.top .wrap{gap:14px}
.top nav a{display:inline-flex;align-items:center;min-height:44px}
.learnnav{align-items:center}
.learnnav a.hub{font-weight:650;color:var(--ink)}
.learnnav a.hub::after{content:"";width:1px;height:18px;background:var(--line);margin-left:16px;margin-right:-6px}
.learnnav a.hub[aria-current="page"]::after{display:none}
/* Play a duel button: the doorway to the simulator, in the simulator's colours */
.playcta{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;font:700 .8rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:#F3EEE4;background:linear-gradient(135deg,#1B2539,#0D1322);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 6px 18px -8px rgba(13,19,34,.6);white-space:nowrap}
.playcta svg{width:18px;height:18px;fill:none;stroke:#E9B45A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.playcta:hover{filter:brightness(1.15)}
@media (max-width:620px){
  .top .brand{font-size:1.02rem;letter-spacing:.1em;min-height:44px;gap:8px}
  .top .brand svg{width:18px;height:18px}
  .playcta{padding:0 14px 0 12px}
  .playcta .long{display:none}
}
@media (max-width:480px){.top .brand .bl{display:none}.top .brand{font-size:1.15rem}}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- home: the front door ---------- */
.door .wrap{display:block;padding-top:52px;padding-bottom:56px}
.doorhead{text-align:center;max-width:760px;margin:0 auto}
.doorhead .lede{margin:14px auto 0}
.door::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent),color-mix(in srgb,var(--bg) 82%,transparent) 50%,var(--bg) 100%)}
.foot nav{flex-wrap:wrap;gap:4px 16px}.foot nav a{white-space:nowrap;display:inline-flex;align-items:center;min-height:32px}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:36px}
.path{display:flex;flex-direction:column;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,40,80,.4);transition:transform .25s,box-shadow .25s}
.path:hover{transform:translateY(-4px);box-shadow:0 40px 70px -30px rgba(20,40,80,.5)}
.path .pic{position:relative;display:block;height:260px;overflow:hidden}
.path-learn .pic>img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;transition:transform .5s}
.path:hover .pic>img{transform:scale(1.04)}
.path .fan{position:absolute;right:34px;bottom:18px;display:flex}
.path .fan img{width:96px;border-radius:7px;box-shadow:0 14px 28px -10px rgba(0,0,0,.6);margin-left:-42px;transform-origin:bottom center}
.path .fan img:nth-child(1){transform:rotate(-12deg) translateY(6px)}
.path .fan img:nth-child(2){transform:rotate(-2deg)}
.path .fan img:nth-child(3){transform:rotate(9deg) translateY(4px)}
.path-play .pic{background:radial-gradient(ellipse at 50% 60%,rgba(233,180,90,.35),transparent 62%),linear-gradient(135deg,#1B2539,#0D1322)}
.path-play .fan{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-46%);padding-left:42px}
.path-play .fan img{width:132px}
.path .body{display:flex;flex-direction:column;gap:10px;padding:28px clamp(22px,3vw,34px) 30px;flex:1}
.path .body .eyebrow{margin-bottom:0}
.path h2{font-size:clamp(1.8rem,3.2vw,2.3rem)}
.path .say{color:var(--muted);font-size:1rem;line-height:1.55}
.ticks{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px}
.ticks>span{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:550}
.ticks svg{width:16px;height:16px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.path-play .ticks svg{stroke:var(--gold)}
.fmtline{font-size:.86rem;color:var(--muted);padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.path .btn{align-self:flex-start}
.path .ticks{margin-bottom:12px}
.path .fmtline+.btn{margin-top:12px}
.btn.gold{background:linear-gradient(135deg,#1B2539,#0D1322);color:#F3EEE4;border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 6px 18px -8px rgba(13,19,34,.6)}
.btn.gold svg{stroke:#E9B45A}
.fmtgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.fmtcard{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:var(--surface-2);color:var(--ink);border:1px solid transparent;transition:border-color .2s}
.fmtcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.fmtcard b{font:600 1.5rem/1.1 var(--serif)}
.fmtcard>span:last-child{color:var(--muted);font-size:.92rem;line-height:1.5}
.fmtcard .where{align-self:flex-start;font:600 .62rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:5px 9px;border-radius:999px}
.fmtcard.goat{background:linear-gradient(135deg,#1B2539,#0D1322);color:#F3EEE4}
.fmtcard.goat>span:last-child{color:#A8AFBD}
.fmtcard.goat .where{color:#1B2233;background:#E9B45A}
@media (max-width:860px){
  .door .wrap{padding-top:28px;padding-bottom:36px}
  .paths{grid-template-columns:1fr;gap:16px;margin-top:24px}
  .path .pic{height:190px}
  .path .fan img{width:72px;margin-left:-32px}
  .path-play .fan img{width:100px}
  .fmtgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.path,.path .pic>img,.fp-btn svg{transition:none}.path:hover{transform:none}}

/* ---------- learn hub ---------- */
.fmtpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.fmtopt{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:20px 22px 18px 58px;border-radius:18px;border:1px solid var(--line);background:var(--surface);cursor:pointer;box-shadow:var(--shadow)}
.fmtopt b{font:600 1.6rem/1.05 var(--serif)}
.fmtopt>span:not(.tick){color:var(--muted);font-size:.93rem;line-height:1.5}
.fmtopt em{font:700 .66rem/1 var(--font);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.fmtopt .tick{position:absolute;left:20px;top:22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line)}
.fmtopt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent),var(--shadow);background:color-mix(in srgb,var(--accent-soft) 60%,var(--surface))}
.fmtopt[aria-pressed="true"] .tick{border:6px solid var(--accent);background:var(--surface)}
.fmtopt:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.goatnote{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--surface-2);font-size:.92rem;color:var(--muted)}
.goatnote b{color:var(--ink)}
.goatnote a{font-weight:650;white-space:nowrap}
.lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.lesson{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:12px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);transition:transform .2s}
.lesson:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.lesson img{width:96px;height:96px;object-fit:cover;border-radius:12px;display:block}
.lesson b{display:block;font:600 1.4rem/1.1 var(--serif)}
.lesson span span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45;margin-top:4px}
.ptsmore{margin-top:18px}
.ptsmore summary{display:inline-block;line-height:42px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--accent);list-style:none}
.ptsmore summary::-webkit-details-marker{display:none}
.ptsmore summary::after{content:"+";margin-left:10px;font-size:1.1rem}
.ptsmore[open] summary::after{content:"\2212"}
@media (max-width:700px){
  .fmtpick,.lessons{grid-template-columns:1fr}
  .lesson{grid-template-columns:72px 1fr}.lesson img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){.lesson{transition:none}}

/* ---------- Play section header (/play, /play/builder): its own dark look, a way back to Learn ---------- */
.top.playbar{background:linear-gradient(90deg,#0D1322,#1B2539);border-bottom:1px solid rgba(233,180,90,.35);color:#F3EEE4}
.top.playbar .brand{color:#F3EEE4}
.top.playbar .wrap{flex-wrap:nowrap}
.playtag{display:inline-flex;align-items:center;gap:8px;font:600 .66rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#A8AFBD;white-space:nowrap}
.playtag i{font-style:normal;color:#1B2233;background:#E9B45A;padding:4px 7px;border-radius:999px;letter-spacing:.1em}
.top.playbar nav{margin:0 0 0 auto}
.top.playbar nav a{color:#A8AFBD;padding:0 14px}
.top.playbar nav a:hover{color:#F3EEE4}
.top.playbar nav a[aria-current="page"]{color:#F3EEE4;background:rgba(255,255,255,.08)}
.backlearn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#F3EEE4;font-weight:600;font-size:.9rem;white-space:nowrap}
.backlearn:hover{border-color:#E9B45A}
.backlearn svg{width:16px;height:16px;fill:none;stroke:#E9B45A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.playtag{display:none}}
@media (max-width:620px){
  .top.playbar .wrap{height:60px;flex-wrap:nowrap;gap:4px;padding-top:0;padding-bottom:0}
  .top.playbar .brand{min-height:44px;min-width:44px;justify-content:center}
  .top.playbar nav{order:0;width:auto;margin:0 0 0 auto;justify-content:flex-end}
  .top.playbar nav a{padding:0 10px;font-size:.9rem}
  .backlearn{padding:0 12px 0 10px;font-size:.88rem}
  .backlearn .long{display:none}
}

/* ================= formats first: header, home picker, format pages, learn ================= */
.sitebar .wrap{gap:10px}
.sitebar .brand{margin-right:auto}
.fmtchip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px 0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);white-space:nowrap}
.fmtchip:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.fmtchip small{font:600 .62rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.fmtchip b{font-weight:650;font-size:.9rem}
.fmtchip svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sitenav{display:flex;align-items:center;gap:8px;flex:none}
.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:700 .8rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);background:var(--surface);white-space:nowrap}
.navlink:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.navlink[aria-current="page"]{background:var(--surface-2)}
.playcta.soon{opacity:.55;cursor:default;box-shadow:none}
.playcta.soon:hover{filter:none}
.playcta small{font:600 .58rem/1 var(--font);letter-spacing:.1em;color:#1B2233;background:#E9B45A;padding:3px 6px;border-radius:999px}
@media (max-width:620px){
  .fmtchip{padding:0 10px 0 12px;gap:5px}
  .fmtchip small{display:none}
  .navlink{padding:0 12px}
  .sitenav{gap:6px}
  .sitebar .wrap{gap:6px;padding:0 12px}
}
.sitebar .wrap{flex-wrap:nowrap}
@media (max-width:480px){.fmtchip svg,.playcta small{display:none}.navlink{padding:0 11px}.playcta{padding:0 12px 0 10px}}
@media (max-width:374px){.playcta svg{display:none}}
@media (max-width:620px){.goatdecks{grid-template-columns:1fr 1fr}}

.foot{justify-content:center;text-align:center}
.foot a{color:var(--teal);font-weight:600}

/* home: pick a format */
.homepick{padding-top:44px;padding-bottom:12px}
.homepick h1{text-align:center;font-size:clamp(2.4rem,7vw,3.8rem)}
.pick4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.ftile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:360px;padding:22px;border-radius:22px;overflow:hidden;color:#F3EEE4;border:1px solid var(--line);box-shadow:var(--shadow);isolation:isolate;transition:transform .25s}
.ftile:hover{transform:translateY(-4px)}
.ftile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:-2;transition:transform .5s}
.ftile:hover img{transform:scale(1.04)}
.ftile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,14,26,.94) 28%,rgba(10,14,26,.2) 72%)}
.ftile .tag{font:600 .68rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#E9B45A}
.ftile b{font:700 2.4rem/1 var(--serif);letter-spacing:-.01em}
.ftile .ln{font-size:.92rem;line-height:1.45;color:rgba(243,238,228,.85)}
@media (max-width:960px){.pick4{grid-template-columns:1fr 1fr}.ftile{min-height:260px}}
@media (max-width:560px){.homepick{padding-top:26px}.pick4{grid-template-columns:1fr;gap:12px;margin-top:20px}.ftile{min-height:150px;padding:18px}.ftile b{font-size:2rem}.ftile::after{background:linear-gradient(90deg,rgba(10,14,26,.94) 30%,rgba(10,14,26,.55))}}
@media (prefers-reduced-motion:reduce){.ftile,.ftile img{transition:none}}

/* format page: two big buttons, then decks */
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.bigbtns.one{grid-template-columns:1fr}
.bigbtn{display:flex;align-items:center;gap:20px;padding:24px 28px;min-height:120px;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);transition:transform .2s}
a.bigbtn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.bigbtn>svg{flex:none;width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bigbtn b{display:block;font:700 2.2rem/1 var(--serif)}
.bigbtn span span{display:block;color:var(--muted);font-size:.95rem;margin-top:6px}
.bigbtn.play{background:linear-gradient(135deg,#1B2539,#0D1322);color:#F3EEE4;border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.bigbtn.play span span{color:#A8AFBD}
.bigbtn.soon{opacity:.6;cursor:default}
@media (max-width:620px){.bigbtns{grid-template-columns:1fr;gap:12px}.bigbtn{min-height:92px;padding:18px 20px;gap:16px}.bigbtn b{font-size:1.9rem}.bigbtn>svg{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.bigbtn{transition:none}}
.sh{font-size:clamp(1.5rem,4vw,1.9rem);margin-bottom:14px}
a.decktile{display:block}
.decktile.cardart img{object-position:center 24%}
.more{margin-top:14px}
.pagehead{padding:28px 0 4px}
.pagehead h1{font-size:clamp(2.4rem,7vw,3.6rem)}
.small{font-size:.88rem}
/* play header (Oct 2026 lobby cleanup): the lobby has no nav, so Back sits at the right; phones drop the builder nav (Back is enough) */
.top.playbar .backlearn{margin-left:auto}
.top.playbar nav ~ .backlearn{margin-left:0}
@media (max-width:560px){.top.playbar nav{display:none}.top.playbar nav ~ .backlearn{margin-left:auto}}


/* ======================================================================= modern look (Oct 2026)
   Editorial: Bodoni Moda display, Inter body, JetBrains Mono eyebrows and pills. The home hero is always dark. */
:root{--serif:"Bodoni Moda","Instrument Serif",Georgia,"Times New Roman",serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--bg:#F6F4EF;--surface:#FFFFFF;--surface-2:#EEEBE3;--line:#E4E0D6;--ink:#141414;--muted:#6B6B6B;--radius:18px}
:root[data-theme="dark"]{--bg:#0F1117;--surface:#171A22;--surface-2:#1F232D;--line:#2A2F3A;--ink:#F3EEE4;--muted:#A6A9B3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1117;--surface:#171A22;--surface-2:#1F232D;--line:#2A2F3A;--ink:#F3EEE4;--muted:#A6A9B3}}
h1,h2,h3{font-weight:400;letter-spacing:-.015em;font-feature-settings:"kern","liga"}
h1 em,h2 em{font-style:italic;font-weight:400;background:none;-webkit-text-fill-color:currentColor;color:inherit;padding:0}
h1{font-size:clamp(2.8rem,7.5vw,5rem);line-height:.98}
h2{font-size:clamp(2rem,4.6vw,2.8rem)}
.eyebrow,.eyebrow.gold{font:500 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lede{font-size:1rem;line-height:1.6;color:var(--muted)}
.sh{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:18px}
.sh .eyebrow{margin-bottom:10px}

/* header */
.top.sitebar{background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.sitebar .wrap{display:flex;align-items:center;gap:22px;height:76px;flex-wrap:nowrap}
.sitebar .brand{font:400 1.7rem/1 var(--serif);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-right:auto;gap:0}
.sitebar .brand svg{display:none}
.fnav{display:flex;align-items:center;gap:2px;margin:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fnav::-webkit-scrollbar{display:none}
.fnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;font:500 .9rem/1 var(--font);color:var(--muted);white-space:nowrap}
.fnav a:hover{color:var(--ink)}
.fnav a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}
.fnav a.sep{margin-left:10px;position:relative}
.fnav a.sep::before{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:1px;background:var(--line)}
.playcta,.pill{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px 0 18px;border-radius:9px;font:500 .74rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#F6F4EF;background:#141414;border:1px solid #141414;box-shadow:none;transition:transform .2s,background .2s}
.playcta svg,.pill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.playcta:hover,.pill.dark:hover{filter:none;background:#2a2a2a;transform:translateY(-1px)}
.playcta:hover svg,.pill:hover svg{transform:translateX(3px)}
.playcta small,.pill small{font:500 .58rem/1 var(--mono);letter-spacing:.12em;color:#141414;background:#E9B45A;padding:4px 6px;border-radius:5px}
:root[data-theme="dark"] .playcta,:root[data-theme="dark"] .pill.dark{background:#F3EEE4;color:#141414;border-color:#F3EEE4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .playcta,:root:not([data-theme="light"]) .pill.dark{background:#F3EEE4;color:#141414;border-color:#F3EEE4}}
.pill{min-height:48px;padding:0 20px 0 22px}
.pill:not(.dark){background:transparent;color:var(--ink);border-color:var(--line)}
.pill:not(.dark):hover{border-color:var(--ink)}
.pill.soon{opacity:.55;cursor:default}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* home hero: dark stage, tagline, floating card art with mouse parallax, the wordmark cropped at the bottom */
body.home{background:var(--bg)}
body.home .top.sitebar{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;color:#F3EEE4}
body.home .sitebar .brand,body.home .fnav a:hover{color:#F3EEE4}
body.home .fnav a{color:#C9C6BE}
body.home .fnav a[aria-current="page"]{background:rgba(255,255,255,.1);color:#F3EEE4}
body.home .fnav a.sep::before{background:rgba(255,255,255,.18)}
body.home .playcta{background:#F3EEE4;color:#141414;border-color:#F3EEE4}
body.home .playcta:hover{background:#fff}
.hero{position:relative;height:min(92vh,900px);min-height:560px;overflow:hidden;background:#0B0B0C radial-gradient(ellipse 60% 55% at 50% 62%,#2A1F3D 0,#15121C 45%,#0B0B0C 100%);color:#F3EEE4;isolation:isolate;perspective:1400px}
.hero-tag{position:absolute;left:50%;top:clamp(96px,16vh,150px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);text-align:center;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.08;margin:0;z-index:3;color:#F3EEE4}
.hero-scene{position:absolute;inset:0;z-index:2}
.hcard{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:1/1.46;border-radius:clamp(10px,1.2vw,16px);overflow:hidden;background:#222;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1) inset;
  transform:translate(calc(-50% + var(--x) + var(--px,0px)),calc(-50% + var(--y) + var(--py,0px))) rotateY(var(--ry)) rotateX(6deg) rotate(var(--r));animation:hfloat 7s ease-in-out infinite;will-change:transform}
.hcard.back{animation-duration:9s;animation-delay:-3s;opacity:.92;z-index:-1}
.hcard img{width:100%;height:100%;object-fit:cover;display:block}
.hcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.26),rgba(255,255,255,0) 40%,rgba(0,0,0,.28))}
@keyframes hfloat{0%,100%{margin-top:0}50%{margin-top:-14px}}
.hero-word{position:absolute;left:50%;bottom:-.19em;transform:translateX(-50%);font:400 clamp(3.6rem,11.6vw,12.2rem)/1 var(--serif);letter-spacing:-.03em;white-space:nowrap;color:#fff;z-index:4;pointer-events:none;text-shadow:0 30px 60px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.hcard{animation:none}}
@media (max-width:760px){
  .hero{height:auto;min-height:0;padding:120px 0 0}
  .hero-tag{position:static;transform:none;width:auto;margin:0 20px;font-size:2.1rem}
  .hero-scene{position:relative;height:300px;margin-top:20px}
  .hcard{--w:34vw!important}
  .hcard:nth-child(1){--x:-26vw!important;--y:-2vh!important}.hcard:nth-child(2){--x:26vw!important;--y:-2vh!important}
  .hcard:nth-child(3){--x:-9vw!important;--y:8vh!important;--w:24vw!important}.hcard:nth-child(4){--x:9vw!important;--y:8vh!important;--w:24vw!important}
  .hero-word{position:relative;display:block;bottom:auto;left:auto;transform:none;text-align:center;font-size:9.6vw;line-height:.8;margin-top:10px;margin-bottom:-.12em;overflow:hidden}
}
.homepick{padding-top:64px;padding-bottom:20px}
.homepick h2{text-align:left}
.pick4{gap:14px;margin-top:22px}
.ftile{border-radius:14px;border:0;min-height:380px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.ftile .tag{font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#D9D4C8;margin-bottom:4px}
.ftile b{font:400 2.2rem/1 var(--serif);letter-spacing:-.01em}
.ftile .ln{color:#C9C6BE;font-size:.9rem;line-height:1.45}

/* format pages: editorial split hero, the art as a tilted card */
.fhero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:56px 0 24px;min-height:min(70vh,560px)}
.fhero h1{font-size:clamp(3.4rem,9vw,6.6rem);line-height:.95;margin-bottom:22px}
.fhero .lede{max-width:46ch;font-size:1.02rem}
.fart{perspective:1400px;display:grid;place-items:center}
.fart .tilt{width:min(100%,520px);aspect-ratio:1/1;border-radius:16px;overflow:hidden;transform:rotateY(-16deg) rotateX(4deg) rotate(2deg);box-shadow:0 60px 100px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .6s cubic-bezier(.2,.8,.2,1);position:relative}
.fart .tilt::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%,rgba(0,0,0,.22))}
.fart .tilt img{width:100%;height:100%;object-fit:cover;display:block}
.fhero:hover .fart .tilt{transform:rotateY(-8deg) rotateX(2deg) rotate(1deg)}
@media (max-width:760px){.fhero{grid-template-columns:1fr;gap:26px;padding:28px 0 10px;min-height:0}.fart{order:-1}.fart .tilt{width:min(100%,380px);transform:none}}

/* sub-page bands and heads */
.band{border:0;border-radius:16px;background:var(--surface);box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
.band .txt{padding:36px clamp(22px,4vw,44px)}
.band h1{font-size:clamp(2.6rem,6vw,4rem)}
.pagehead{padding:40px 0 8px}
.pagehead h1{font-size:clamp(2.8rem,7vw,4.4rem)}
.lesson,.bigbtn,.decktile,.panel{border-radius:14px}
.lesson b{font:400 1.6rem/1.05 var(--serif)}
.decktile .dt-name{font:400 1.5rem/1 var(--serif)}
.foot{border-top:1px solid var(--line);margin-top:48px;padding:26px 0 40px;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.foot a{color:var(--ink)}
/* phones: wordmark and Play on the first row, the format links scroll on a second row */
@media (max-width:760px){
  .sitebar .wrap{flex-wrap:wrap;height:auto;padding:10px 16px 8px;gap:8px 12px}
  .sitebar .brand{order:1;font-size:1.5rem}
  .sitebar .playcta{order:2;min-height:38px;padding:0 12px 0 14px}
  .sitebar .acct{order:2;margin-left:0}
  .fnav{order:3;margin:0 -16px;padding:0 6px;width:calc(100% + 32px)} /* first link text lines up with the wordmark (6px + the link's 10px) */
  .fnav a{min-height:36px;padding:0 10px;font-size:.86rem}
  .hero{padding-top:124px}
}

/* play lobby header: same wordmark as the site header */
.playbar .brand{font:400 1.5rem/1 var(--serif);letter-spacing:-.01em;text-transform:none;gap:0;color:#F3EEE4}
.playbar .brand svg{display:none}
@media (max-width:480px){.top.playbar .brand .bl{display:inline}.top.playbar .brand{font-size:1.25rem;justify-content:flex-start}}

/* account button in the header (filled by /assets/auth.js) */
.acct{position:relative;display:flex;align-items:center;margin-left:10px}
.acct-in{font:600 .8rem/1 var(--font,Inter,sans-serif);color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.acct-in:hover{border-color:var(--ink)}
.acct-me{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2,#1C2438);padding:0;overflow:hidden;cursor:pointer;display:grid;place-items:center;color:var(--ink);font:600 .9rem/1 var(--serif)}
.acct-me img{width:100%;height:100%;object-fit:cover;display:block}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;background:var(--surface,#151C2E);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);padding:6px;z-index:40;display:flex;flex-direction:column}
.acct-menu[hidden]{display:none}
.acct-who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.acct-who b{font:600 .9rem/1.2 var(--font,Inter,sans-serif);color:var(--ink)}.acct-who small{font-size:.72rem;color:var(--muted)}
.acct-menu a,.acct-menu button{text-align:left;font:500 .84rem/1 var(--font,Inter,sans-serif);color:var(--ink);background:none;border:0;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(255,255,255,.06)}
body.home .acct-in{color:#F3EEE4;border-color:rgba(255,255,255,.3)}
.sitebar .acct{order:3;margin-left:6px}
@media (max-width:760px){.acct-in{padding:8px 11px;font-size:.74rem}}

/* accounts pages: friends, admin */
.prose{max-width:760px;padding:8px 0 48px}
.prose h2{font:400 1.5rem/1.2 var(--serif);margin:28px 0 10px}
.prose p{line-height:1.6;color:var(--muted)}
.pill.small{min-height:36px;padding:0 14px;font-size:.78rem}
.pill.on{background:var(--ink);color:#111}
.lnk{background:none;border:0;color:var(--muted);font:500 .8rem/1 var(--font,Inter,sans-serif);cursor:pointer;padding:8px}
.lnk:hover{color:var(--ink)}
.fsearch{display:flex;gap:8px;margin:16px 0}
.fsearch input{flex:1;min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:0 16px;font:500 .95rem var(--font,Inter,sans-serif)}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.frow{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.frow img,.frow .fav{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--surface-2,#1C2438);flex:none}
.fname{flex:1;font:500 1rem/1.2 var(--serif)}.fname small{font:500 .72rem var(--font,Inter,sans-serif);color:var(--muted)}
.arange{display:flex;gap:8px;margin:14px 0 20px}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.astat{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.astat b{font:400 2rem/1 var(--serif)}.astat span{font:500 .74rem/1.3 var(--font,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.astat small{display:block;text-transform:none;letter-spacing:0}
.abars{display:flex;align-items:flex-end;gap:3px;height:140px;margin-top:22px;border-bottom:1px solid var(--line);padding:0 2px}
.abar{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%}
.abar i{flex:1;display:block;background:rgba(255,255,255,.22);border-radius:3px 3px 0 0;min-height:1px}
.abar i.d{background:var(--gold,#F6CD6B)}
.acols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.atable{width:100%;border-collapse:collapse;font-size:.88rem}
.atable td{padding:7px 8px;border-bottom:1px solid var(--line)}.atable td:last-child{text-align:right;color:var(--muted)}
.atable td:first-child{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){.sitebar .acct{order:2;margin-left:0}.sitebar .brand{font-size:1.35rem}.sitebar .wrap{gap:8px 8px}}
@media (max-width:760px){.acct-in{font-size:0;width:36px;height:36px;padding:0;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/18px no-repeat}}

.hcard.far{opacity:.8;animation-duration:11s;animation-delay:-5s}
@media (max-width:760px){.hcard:nth-child(n+5){display:none}}

/* admin dashboard v2 */
.ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ahead .arange{margin:0 0 6px}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin-top:14px}
.acard h2{font:400 1.25rem/1.2 var(--serif);margin:0 0 12px}.acard h2.sub{margin-top:22px}
.ahd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.legend{font:500 .72rem/1 var(--font,Inter,sans-serif);color:var(--muted);display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-left:10px}.legend .lv{background:rgba(255,255,255,.3)}.legend .ld{background:var(--gold,#F6CD6B)}.legend .ls{background:#5FD3D3;border-radius:50%}
.alive{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.alive b{font:400 1.4rem/1 var(--serif);color:var(--ink);margin-right:4px}
.alive-dot{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.2);flex:none}
.ahours{margin-left:auto;display:flex;align-items:flex-end;gap:2px;height:28px;width:min(260px,100%)}
.ahours i{flex:1;display:block;background:rgba(255,255,255,.25);border-radius:2px 2px 0 0;min-height:2px}
.agrid{margin-top:14px}
.astat{position:relative}.astat span i{font:600 .68rem/1 var(--font,Inter,sans-serif);font-style:normal;letter-spacing:0;text-transform:none;margin-left:8px;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.astat span i.up{background:rgba(74,222,128,.15);color:#7fe0a3}.astat span i.down{background:rgba(255,99,99,.15);color:#ff9a9a}
.astat small{font:400 .78rem/1.3 var(--font,Inter,sans-serif);color:var(--muted);text-transform:none;letter-spacing:0}
.abar{position:relative}.abar em{position:absolute;left:50%;top:-16px;width:7px;height:7px;border-radius:50%;background:#5FD3D3;transform:translateX(-50%)}
.axis{display:flex;justify-content:space-between;font:500 .68rem/1 var(--mono,monospace);color:var(--muted);margin-top:6px;letter-spacing:.06em}
.hb{display:grid;grid-template-columns:minmax(0,1fr) 3fr auto;align-items:center;gap:10px;padding:5px 0;font-size:.84rem}
.hb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb i{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--gold,#F6CD6B),#D4962A);min-width:2px}.hb b{font:500 .8rem/1 var(--mono,monospace);color:var(--muted)}
.atable td:nth-child(n+2){white-space:nowrap}
.r-win{color:#7fe0a3}.r-loss{color:#ff9a9a}.r-draw{color:var(--muted)}
@media (max-width:760px){.alive{gap:12px}.ahours{width:100%;margin:6px 0 0}}

/* home hero: deep space (stars as box-shadows on three 1px dots, nebula and a milky-way band on .sky) */
.hero{background:#05060C radial-gradient(ellipse 70% 60% at 50% 50%,#121a33 0,#090c18 50%,#05060C 100%)}
.hero .sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .sky i{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:transparent}
.hero .sky i.s1{box-shadow:0.01vw 92.08vh rgba(255,255,255,.55),28.92vw 21.06vh rgba(255,255,255,.55),72.94vw 53.27vh rgba(255,255,255,.55),32.93vw 75.21vh rgba(255,255,255,.55),75.51vw 54.29vh rgba(255,255,255,.55),68.45vw 63.59vh rgba(255,255,255,.55),81.68vw 24.20vh rgba(255,255,255,.55),37.42vw 70.79vh rgba(255,255,255,.55),69.80vw 5.39vh rgba(255,255,255,.55),68.39vw 46.79vh rgba(255,255,255,.55),92.24vw 80.74vh rgba(255,255,255,.55),12.28vw 51.31vh rgba(255,255,255,.55),92.32vw 68.85vh rgba(255,255,255,.55),64.38vw 57.74vh rgba(255,255,255,.55),91.20vw 90.83vh rgba(255,255,255,.55),37.22vw 33.54vh rgba(255,255,255,.55),83.72vw 33.23vh rgba(255,255,255,.55),15.26vw 29.76vh rgba(255,255,255,.55),42.85vw 29.49vh rgba(255,255,255,.55),93.73vw 55.74vh rgba(255,255,255,.55),72.93vw 87.79vh rgba(255,255,255,.55),5.86vw 27.35vh rgba(255,255,255,.55),56.06vw 50.88vh rgba(255,255,255,.55),42.14vw 19.29vh rgba(255,255,255,.55),90.90vw 5.49vh rgba(255,255,255,.55),36.55vw 34.41vh rgba(255,255,255,.55),66.44vw 92.43vh rgba(255,255,255,.55),51.49vw 16.56vh rgba(255,255,255,.55),40.56vw 28.36vh rgba(255,255,255,.55),36.45vw 42.40vh rgba(255,255,255,.55),33.26vw 53.17vh rgba(255,255,255,.55),61.40vw 23.32vh rgba(255,255,255,.55),90.65vw 45.78vh rgba(255,255,255,.55),86.30vw 63.51vh rgba(255,255,255,.55),63.43vw 51.62vh rgba(255,255,255,.55),50.49vw 68.90vh rgba(255,255,255,.55),93.96vw 39.67vh rgba(255,255,255,.55),70.82vw 25.11vh rgba(255,255,255,.55),58.69vw 35.06vh rgba(255,255,255,.55),33.06vw 39.14vh rgba(255,255,255,.55),79.47vw 87.76vh rgba(255,255,255,.55),11.11vw 81.92vh rgba(255,255,255,.55),7.77vw 40.68vh rgba(255,255,255,.55),15.36vw 7.79vh rgba(255,255,255,.55),99.62vw 22.00vh rgba(255,255,255,.55),63.24vw 14.43vh rgba(255,255,255,.55),45.71vw 59.29vh rgba(255,255,255,.55),13.78vw 92.19vh rgba(255,255,255,.55),88.46vw 89.06vh rgba(255,255,255,.55),88.52vw 90.78vh rgba(255,255,255,.55),76.11vw 27.54vh rgba(255,255,255,.55),1.05vw 24.83vh rgba(255,255,255,.55),7.60vw 0.16vh rgba(255,255,255,.55),61.68vw 23.14vh rgba(255,255,255,.55),74.11vw 48.94vh rgba(255,255,255,.55),68.75vw 23.80vh rgba(255,255,255,.55),88.21vw 23.52vh rgba(255,255,255,.55),37.39vw 89.43vh rgba(255,255,255,.55),11.84vw 48.93vh rgba(255,255,255,.55),0.30vw 91.30vh rgba(255,255,255,.55),63.69vw 92.21vh rgba(255,255,255,.55),2.10vw 90.01vh rgba(255,255,255,.55),18.81vw 96.87vh rgba(255,255,255,.55),56.53vw 67.94vh rgba(255,255,255,.55),26.63vw 22.28vh rgba(255,255,255,.55),20.89vw 56.44vh rgba(255,255,255,.55),5.23vw 76.94vh rgba(255,255,255,.55),70.07vw 71.41vh rgba(255,255,255,.55),49.82vw 3.27vh rgba(255,255,255,.55),11.03vw 91.90vh rgba(255,255,255,.55),13.08vw 68.79vh rgba(255,255,255,.55),89.30vw 3.71vh rgba(255,255,255,.55),88.31vw 86.14vh rgba(255,255,255,.55),99.27vw 95.43vh rgba(255,255,255,.55),76.49vw 41.96vh rgba(255,255,255,.55),24.82vw 72.77vh rgba(255,255,255,.55),88.22vw 39.83vh rgba(255,255,255,.55),23.47vw 40.49vh rgba(255,255,255,.55),88.70vw 55.88vh rgba(255,255,255,.55),35.14vw 62.15vh rgba(255,255,255,.55),73.49vw 33.50vh rgba(255,255,255,.55),72.52vw 42.28vh rgba(255,255,255,.55),19.86vw 31.17vh rgba(255,255,255,.55),98.55vw 99.41vh rgba(255,255,255,.55),63.24vw 87.22vh rgba(255,255,255,.55),91.83vw 19.95vh rgba(255,255,255,.55),64.52vw 13.54vh rgba(255,255,255,.55),49.74vw 55.74vh rgba(255,255,255,.55),77.14vw 94.58vh rgba(255,255,255,.55),48.21vw 18.72vh rgba(255,255,255,.55),44.67vw 16.61vh rgba(255,255,255,.55),66.26vw 52.17vh rgba(255,255,255,.55),56.15vw 50.67vh rgba(255,255,255,.55),75.71vw 36.25vh rgba(255,255,255,.55),75.09vw 2.60vh rgba(255,255,255,.55),29.88vw 54.17vh rgba(255,255,255,.55),20.28vw 72.29vh rgba(255,255,255,.55),29.09vw 23.57vh rgba(255,255,255,.55),65.96vw 42.92vh rgba(255,255,255,.55),7.53vw 77.29vh rgba(255,255,255,.55),82.29vw 91.54vh rgba(255,255,255,.55),91.00vw 68.09vh rgba(255,255,255,.55),95.89vw 2.52vh rgba(255,255,255,.55),76.20vw 60.10vh rgba(255,255,255,.55),72.40vw 89.82vh rgba(255,255,255,.55),3.70vw 13.60vh rgba(255,255,255,.55),8.03vw 10.82vh rgba(255,255,255,.55),8.48vw 0.95vh rgba(255,255,255,.55),60.50vw 94.57vh rgba(255,255,255,.55),19.20vw 13.36vh rgba(255,255,255,.55),20.22vw 67.49vh rgba(255,255,255,.55),24.33vw 45.64vh rgba(255,255,255,.55),99.40vw 42.26vh rgba(255,255,255,.55),67.38vw 77.43vh rgba(255,255,255,.55),39.69vw 41.64vh rgba(255,255,255,.55),6.12vw 23.01vh rgba(255,255,255,.55),80.76vw 97.44vh rgba(255,255,255,.55),15.24vw 92.55vh rgba(255,255,255,.55),50.87vw 12.22vh rgba(255,255,255,.55),21.01vw 60.26vh rgba(255,255,255,.55),17.05vw 7.81vh rgba(255,255,255,.55),27.27vw 64.65vh rgba(255,255,255,.55),55.61vw 48.06vh rgba(255,255,255,.55),99.38vw 7.52vh rgba(255,255,255,.55),41.34vw 31.45vh rgba(255,255,255,.55),0.42vw 0.62vh rgba(255,255,255,.55),41.35vw 9.13vh rgba(255,255,255,.55),23.42vw 92.41vh rgba(255,255,255,.55),77.75vw 76.39vh rgba(255,255,255,.55),43.68vw 85.49vh rgba(255,255,255,.55),96.24vw 80.10vh rgba(255,255,255,.55),66.18vw 57.22vh rgba(255,255,255,.55),34.80vw 40.70vh rgba(255,255,255,.55),49.70vw 49.48vh rgba(255,255,255,.55),56.74vw 72.18vh rgba(255,255,255,.55),66.51vw 63.28vh rgba(255,255,255,.55),72.90vw 88.45vh rgba(255,255,255,.55),84.52vw 98.82vh rgba(255,255,255,.55),43.81vw 48.71vh rgba(255,255,255,.55),95.72vw 97.51vh rgba(255,255,255,.55),35.78vw 7.92vh rgba(255,255,255,.55),34.28vw 88.27vh rgba(255,255,255,.55),70.84vw 73.81vh rgba(255,255,255,.55),95.52vw 78.70vh rgba(255,255,255,.55),20.71vw 23.82vh rgba(255,255,255,.55),79.85vw 10.41vh rgba(255,255,255,.55),91.56vw 80.02vh rgba(255,255,255,.55),63.52vw 71.15vh rgba(255,255,255,.55),53.59vw 44.30vh rgba(255,255,255,.55),87.21vw 56.34vh rgba(255,255,255,.55),87.37vw 27.06vh rgba(255,255,255,.55),68.66vw 43.40vh rgba(255,255,255,.55),39.51vw 18.75vh rgba(255,255,255,.55),58.91vw 23.14vh rgba(255,255,255,.55),89.88vw 82.21vh rgba(255,255,255,.55),33.80vw 68.29vh rgba(255,255,255,.55),87.74vw 11.59vh rgba(255,255,255,.55),30.77vw 92.09vh rgba(255,255,255,.55),0.13vw 13.18vh rgba(255,255,255,.55),39.73vw 2.16vh rgba(255,255,255,.55),69.29vw 89.79vh rgba(255,255,255,.55),17.30vw 21.21vh rgba(255,255,255,.55),94.73vw 69.98vh rgba(255,255,255,.55),17.52vw 11.68vh rgba(255,255,255,.55),62.66vw 1.59vh rgba(255,255,255,.55),81.19vw 59.16vh rgba(255,255,255,.55),75.11vw 12.81vh rgba(255,255,255,.55),33.13vw 71.48vh rgba(255,255,255,.55),95.51vw 54.78vh rgba(255,255,255,.55),58.82vw 77.75vh rgba(255,255,255,.55),70.25vw 73.37vh rgba(255,255,255,.55),59.76vw 10.03vh rgba(255,255,255,.55),4.54vw 61.33vh rgba(255,255,255,.55),22.49vw 58.11vh rgba(255,255,255,.55),25.09vw 22.30vh rgba(255,255,255,.55),62.00vw 62.95vh rgba(255,255,255,.55),81.28vw 23.95vh rgba(255,255,255,.55),90.55vw 5.28vh rgba(255,255,255,.55),69.07vw 40.67vh rgba(255,255,255,.55),79.20vw 65.97vh rgba(255,255,255,.55),80.47vw 10.47vh rgba(255,255,255,.55),91.95vw 50.09vh rgba(255,255,255,.55),82.30vw 42.49vh rgba(255,255,255,.55),86.63vw 79.06vh rgba(255,255,255,.55),72.71vw 90.78vh rgba(255,255,255,.55),85.82vw 19.03vh rgba(255,255,255,.55),71.97vw 15.46vh rgba(255,255,255,.55),12.52vw 94.86vh rgba(255,255,255,.55),95.48vw 5.65vh rgba(255,255,255,.55),7.69vw 26.20vh rgba(255,255,255,.55),94.07vw 86.98vh rgba(255,255,255,.55),95.66vw 27.70vh rgba(255,255,255,.55),19.83vw 2.98vh rgba(255,255,255,.55),46.98vw 55.94vh rgba(255,255,255,.55),14.16vw 32.31vh rgba(255,255,255,.55),48.09vw 22.68vh rgba(255,255,255,.55),5.50vw 4.44vh rgba(255,255,255,.55),9.35vw 62.93vh rgba(255,255,255,.55),46.79vw 80.82vh rgba(255,255,255,.55),72.81vw 51.08vh rgba(255,255,255,.55),70.04vw 38.80vh rgba(255,255,255,.55),61.34vw 96.52vh rgba(255,255,255,.55),77.06vw 96.20vh rgba(255,255,255,.55),71.15vw 60.34vh rgba(255,255,255,.55),80.27vw 17.12vh rgba(255,255,255,.55),6.54vw 72.66vh rgba(255,255,255,.55),64.67vw 43.12vh rgba(255,255,255,.55),54.48vw 38.70vh rgba(255,255,255,.55),49.44vw 12.19vh rgba(255,255,255,.55),6.63vw 7.92vh rgba(255,255,255,.55),35.42vw 34.46vh rgba(255,255,255,.55),20.01vw 63.99vh rgba(255,255,255,.55),12.54vw 5.22vh rgba(255,255,255,.55),0.16vw 83.58vh rgba(255,255,255,.55),86.95vw 4.44vh rgba(255,255,255,.55),76.82vw 31.82vh rgba(255,255,255,.55),40.23vw 90.82vh rgba(255,255,255,.55),79.68vw 1.16vh rgba(255,255,255,.55),99.33vw 20.55vh rgba(255,255,255,.55),64.29vw 42.76vh rgba(255,255,255,.55)}
.hero .sky i.s2{width:1.6px;height:1.6px;box-shadow:3.32vw 17.27vh rgba(255,255,255,.9),75.53vw 75.39vh rgba(255,255,255,.9),24.91vw 85.75vh rgba(255,255,255,.9),81.35vw 31.79vh rgba(255,255,255,.9),45.92vw 29.89vh rgba(255,255,255,.9),25.33vw 88.15vh rgba(255,255,255,.9),87.00vw 67.82vh rgba(255,255,255,.9),49.85vw 86.67vh rgba(255,255,255,.9),81.98vw 81.31vh rgba(255,255,255,.9),76.07vw 97.04vh rgba(255,255,255,.9),69.13vw 28.54vh rgba(255,255,255,.9),71.21vw 32.43vh rgba(255,255,255,.9),86.40vw 16.30vh rgba(255,255,255,.9),84.53vw 65.85vh rgba(255,255,255,.9),81.60vw 46.69vh rgba(255,255,255,.9),79.57vw 82.88vh rgba(255,255,255,.9),4.26vw 23.18vh rgba(255,255,255,.9),19.55vw 2.34vh rgba(255,255,255,.9),57.75vw 81.19vh rgba(255,255,255,.9),62.72vw 85.34vh rgba(255,255,255,.9),86.55vw 81.34vh rgba(255,255,255,.9),20.74vw 56.25vh rgba(255,255,255,.9),45.97vw 38.61vh rgba(255,255,255,.9),53.82vw 75.11vh rgba(255,255,255,.9),51.76vw 38.38vh rgba(255,255,255,.9),49.97vw 24.48vh rgba(255,255,255,.9),70.33vw 77.17vh rgba(255,255,255,.9),29.74vw 25.46vh rgba(255,255,255,.9),61.40vw 55.17vh rgba(255,255,255,.9),93.82vw 56.84vh rgba(255,255,255,.9),31.63vw 60.03vh rgba(255,255,255,.9),57.36vw 63.58vh rgba(255,255,255,.9),57.11vw 16.15vh rgba(255,255,255,.9),20.87vw 11.83vh rgba(255,255,255,.9),33.35vw 63.40vh rgba(255,255,255,.9),87.46vw 64.41vh rgba(255,255,255,.9),38.93vw 34.73vh rgba(255,255,255,.9),39.82vw 12.56vh rgba(255,255,255,.9),15.48vw 5.31vh rgba(255,255,255,.9),47.61vw 37.59vh rgba(255,255,255,.9),9.14vw 63.42vh rgba(255,255,255,.9),40.36vw 45.75vh rgba(255,255,255,.9),9.95vw 84.03vh rgba(255,255,255,.9),27.42vw 30.34vh rgba(255,255,255,.9),12.15vw 20.29vh rgba(255,255,255,.9),43.74vw 19.97vh rgba(255,255,255,.9),60.76vw 57.81vh rgba(255,255,255,.9),75.40vw 78.47vh rgba(255,255,255,.9),49.23vw 86.69vh rgba(255,255,255,.9),68.44vw 12.06vh rgba(255,255,255,.9),62.40vw 73.63vh rgba(255,255,255,.9),89.10vw 57.99vh rgba(255,255,255,.9),96.72vw 29.06vh rgba(255,255,255,.9),99.48vw 3.74vh rgba(255,255,255,.9),10.32vw 30.77vh rgba(255,255,255,.9),85.62vw 89.85vh rgba(255,255,255,.9),72.34vw 54.67vh rgba(255,255,255,.9),23.92vw 53.46vh rgba(255,255,255,.9),77.65vw 18.55vh rgba(255,255,255,.9),81.18vw 68.31vh rgba(255,255,255,.9),58.16vw 95.11vh rgba(255,255,255,.9),30.67vw 2.84vh rgba(255,255,255,.9),73.48vw 51.47vh rgba(255,255,255,.9),61.41vw 69.21vh rgba(255,255,255,.9),68.17vw 4.55vh rgba(255,255,255,.9),70.63vw 98.10vh rgba(255,255,255,.9),84.56vw 67.98vh rgba(255,255,255,.9),56.70vw 21.83vh rgba(255,255,255,.9),63.01vw 56.75vh rgba(255,255,255,.9),43.94vw 2.26vh rgba(255,255,255,.9)}
.hero .sky i.s3{width:2.4px;height:2.4px;box-shadow:86.28vw 65.28vh 0 2px rgba(246,205,107,.95),97.63vw 30.78vh 0 2px rgba(246,205,107,.95),74.43vw 93.83vh 0 2px rgba(246,205,107,.95),57.10vw 62.23vh 0 2px rgba(246,205,107,.95),19.81vw 24.20vh 0 2px rgba(246,205,107,.95),44.66vw 43.24vh 0 2px rgba(246,205,107,.95),4.73vw 56.76vh 0 2px rgba(246,205,107,.95),78.09vw 84.04vh 0 2px rgba(246,205,107,.95),8.51vw 30.60vh 0 2px rgba(246,205,107,.95),61.46vw 42.23vh 0 2px rgba(246,205,107,.95),31.74vw 28.99vh 0 2px rgba(246,205,107,.95),7.32vw 36.95vh 0 2px rgba(246,205,107,.95),43.21vw 63.51vh 0 2px rgba(246,205,107,.95),50.40vw 54.36vh 0 2px rgba(246,205,107,.95),43.19vw 62.29vh 0 2px rgba(246,205,107,.95),89.78vw 94.52vh 0 2px rgba(246,205,107,.95),46.24vw 83.24vh 0 2px rgba(246,205,107,.95),98.10vw 64.86vh 0 2px rgba(246,205,107,.95);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.6}to{opacity:1}}
.hero .sky::before{content:"";position:absolute;inset:-15%;filter:blur(60px);background:radial-gradient(520px 260px at 28% 38%,rgba(120,80,220,.28),transparent 70%),radial-gradient(600px 240px at 70% 62%,rgba(60,120,255,.22),transparent 70%),radial-gradient(360px 200px at 55% 25%,rgba(246,205,107,.1),transparent 70%)}
.hero .sky::after{content:"";position:absolute;left:-10%;right:-10%;top:30%;height:36%;transform:rotate(-12deg);filter:blur(40px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06) 30%,rgba(200,210,255,.1) 50%,rgba(255,255,255,.06) 70%,transparent)}
.hero::after{background:linear-gradient(180deg,rgba(5,6,12,.1),rgba(5,6,12,0) 40%,rgba(5,6,12,.7) 100%)}
@media (prefers-reduced-motion:reduce){.hero .sky i.s3{animation:none}}
@media (max-width:760px){.hero .sky::after{display:none}}

/* ================= online rail (site-wide, /assets/presence.js): moved here from play.css 12 Oct 2026 ================= */
.online-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:80vh}
.online-rail[hidden]{display:none}
.rail-head{font:600 .62rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:5px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);margin-bottom:2px;white-space:nowrap}
.rail-item{position:relative}
.rail-item.me{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);opacity:.75}
.rail-p{position:relative;width:44px;height:44px;border-radius:50%;padding:0;border:2px solid var(--surface);background:var(--surface-2);box-shadow:0 8px 20px -10px rgba(0,0,0,.8);cursor:pointer;display:grid;place-items:center;transition:transform .15s,border-color .15s}
.rail-p:hover,.rail-p[aria-expanded="true"]{transform:scale(1.08);border-color:var(--gold)}
.rail-p img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.rail-av{font:600 1rem/1 var(--serif);color:var(--ink)}
.rail-ico{width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/20px no-repeat}
.rail-p .pdot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;min-height:0;max-height:12px;padding:0;margin:0;border-radius:50%;border:2px solid var(--bg);background:#4ade80;display:block;line-height:0;animation:none;transform:none}
.rail-p .pdot.is-room{background:var(--gold)}.rail-p .pdot.is-duel{background:#ff6b6b}
.rail-pop{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);min-width:170px;max-width:240px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:0 16px 34px -14px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:6px;z-index:2}
.rail-pop[hidden]{display:none}
.rail-pop b{font:600 .92rem/1.2 var(--font)}.rail-pop small{font:500 .72rem/1.3 var(--font);color:var(--muted)}
.rail-pop::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--line)}
.rail-ask{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:color-mix(in srgb,var(--gold) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 16px 34px -14px rgba(0,0,0,.8);max-width:260px}
.rail-ask img,.rail-ask .rail-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--surface-2)}
.rail-ask div{display:flex;flex-direction:column;gap:4px}.rail-ask b{font:600 .9rem/1.2 var(--font)}.rail-ask small{font:500 .72rem/1.2 var(--font);color:var(--muted)}
.rail-ask.wait{background:var(--surface);border-color:var(--line)}
.sbtn.small{padding:7px 11px;font-size:.72rem}
.on-btns{display:flex;gap:6px}
@media (max-width:760px){.online-rail{right:8px;top:auto;bottom:84px;transform:none;max-height:50vh}.rail-p{width:38px;height:38px}.rail-head{display:none}}

.online-rail .sbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 .76rem/1 var(--font);letter-spacing:.07em;text-transform:uppercase;padding:12px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.online-rail .sbtn.pri{background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;border-color:transparent;box-shadow:0 6px 16px -8px rgba(212,150,42,.9)}
.rail-pop.wide{min-width:220px;max-width:260px}
.rail-pop .lbl{font:700 .6rem/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-top:4px}
.rail-seg{display:flex;flex-wrap:wrap;gap:4px}
.rail-seg button{border:1px solid var(--line);background:transparent;color:var(--muted);font:600 .72rem/1 var(--font);padding:7px 10px;border-radius:999px;cursor:pointer}
.rail-seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--gold)}
.rail-pop .muted{color:var(--muted)}
.ptoast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font:500 .9rem/1.3 var(--font);box-shadow:0 16px 34px -14px rgba(0,0,0,.8);z-index:60;transition:opacity .2s,transform .2s;max-width:min(92vw,420px)}
.ptoast.show{opacity:1;transform:translate(-50%,0)}
body.home .online-rail .rail-p{border-color:rgba(255,255,255,.14)}

/* admin dashboard v3 (12 Oct 2026): even rows, capped lists with a "more" fold, Watch links */
.acols.a4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.acols.a2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.acols .acard{margin-top:0;min-width:0}
.acard{overflow:auto}
.acard h2.sub{margin-top:18px}
.amore summary{cursor:pointer;color:var(--muted);font:500 .78rem/1 var(--font,Inter,sans-serif);padding:10px 0 4px;list-style:none}
.amore summary::before{content:"+ "}.amore[open] summary::before{content:"\2013 "}
.atable td .watch{color:var(--gold,#F6CD6B);font-weight:600;text-decoration:none;border:1px solid color-mix(in srgb,var(--gold,#F6CD6B) 50%,transparent);padding:4px 10px;border-radius:999px;font-size:.76rem}
@media (max-width:1100px){.acols.a4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.acols.a4,.acols.a2{grid-template-columns:minmax(0,1fr)}.atable{font-size:.8rem}.atable td{padding:6px 5px}}

/* ================= phones: compact home and format pages (Laith, 12 Oct 2026: "huge photos and thumbnails") ================= */
@media (max-width:760px){
  .hero{padding-top:104px}
  .hero-scene{height:210px;margin-top:6px}
  .hcard{--w:26vw!important}
  .hcard:nth-child(1){--x:-22vw!important;--y:-1vh!important}.hcard:nth-child(2){--x:22vw!important;--y:-1vh!important}
  .hcard:nth-child(3){--x:-7vw!important;--y:6vh!important;--w:19vw!important}.hcard:nth-child(4){--x:7vw!important;--y:6vh!important;--w:19vw!important}
  .hero-word{font-size:8.6vw;line-height:1;margin:14px 0 0;padding-bottom:18px;overflow:visible}
  .homepick{padding-top:28px;padding-bottom:8px}
  .homepick h2{font-size:2rem}
  .pick4{grid-template-columns:1fr;gap:10px;margin-top:16px}
  .ftile{min-height:0;height:124px;padding:14px 16px;border-radius:14px;justify-content:center;gap:3px}
  .ftile img{object-position:center 30%}
  .ftile::after{background:linear-gradient(90deg,rgba(10,14,26,.95) 38%,rgba(10,14,26,.45))}
  .ftile .tag{font-size:.56rem;margin-bottom:2px}
  .ftile b{font-size:1.6rem}
  .ftile .ln{font-size:.8rem;line-height:1.35;max-width:62%}
  .fhero{gap:18px;padding:18px 0 6px}
  .fart .tilt{width:100%;aspect-ratio:16/9;max-height:200px;border-radius:14px}
  .fhero h1{font-size:2.8rem;margin-bottom:12px}
  .fhero .lede{font-size:.95rem}
  .online-rail{right:6px;bottom:72px;gap:6px}
  .rail-p{width:34px;height:34px}
}
@media (max-width:760px){.decktile .dt-name{font-size:1.2rem;left:12px;right:12px;bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.8)}}

/* the logo mark (two cards) next to the wordmark, site header and play header */
.sitebar .brand svg.mark,.playbar .brand svg.mark{display:inline-block;width:1.35em;height:1.35em;margin-right:.25em;flex:none;color:currentColor;transform:translateY(-.04em)}
.playbar .brand{gap:0}
/* phones: the hero cards sit in one tidy row, no overlap (Laith, 13 Oct 2026) */
@media (max-width:760px){
  .hero-scene{height:150px;margin-top:34px}
  .hcard,.hcard.back{--w:20vw!important;--y:0vh!important;--ry:0deg!important;opacity:1;animation-duration:8s}
  .hcard:nth-child(1){--x:-34vw!important;--r:-6deg!important}
  .hcard:nth-child(2){--x:34vw!important;--r:6deg!important}
  .hcard:nth-child(3){--x:-11.5vw!important;--r:-2deg!important}
  .hcard:nth-child(4){--x:11.5vw!important;--r:2deg!important}
}

.shsub{margin:-6px 0 14px}
.fhero .ctas{flex-wrap:wrap}

/* footer: short centered lines that never break mid-phrase, the Install app button under them (13 Oct 2026) */
.foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;text-align:center}
.foot .fl{white-space:nowrap;line-height:1.6}
.foot .pwa-install{margin:0}
@media (max-width:760px){.foot{flex-direction:column;gap:10px}}
/* online rail at the top of the page: one row of avatars pinned top right under the header, popovers open downward
   (presence.js sets top from the header's bottom edge) */
.online-rail{top:84px;bottom:auto;right:14px;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-height:none;max-width:min(560px,calc(100vw - 28px))}
.rail-head{margin:0 2px 0 0}
.rail-item.me{margin:0 0 0 4px;padding:0 0 0 8px;border-top:0;border-left:1px solid var(--line)}
.rail-p{width:38px;height:38px}
.rail-pop{right:0;left:auto;top:calc(100% + 10px);transform:none}
.rail-pop::after{left:auto;right:14px;top:auto;bottom:100%;transform:none;border:6px solid transparent;border-bottom-color:var(--line)}
.rail-ask{order:10;flex-basis:100%;max-width:300px;margin-left:auto}
@media (max-width:760px){.online-rail{top:128px;bottom:auto;right:10px;gap:5px}.rail-p{width:34px;height:34px}.rail-head{display:none}}
.online-rail:has(.rail-p){padding:4px;border-radius:999px;background:color-mix(in srgb,#0B0F1A 82%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.online-rail:has(.rail-ask){border-radius:22px}
.online-rail .rail-pop{background:#151B2A}
.rail-head{border:0;background:none;padding:0 4px 0 8px}

/* everywhere but home the rail is a strip in the page flow right under the header: it scrolls away and never covers
   a control; home keeps it pinned over the hero */
body:not(.home) .online-rail{position:relative;top:auto;right:auto;margin:10px 14px -4px auto;width:max-content;max-width:calc(100% - 28px)}
body.in-duel .online-rail{display:none}
.rail-item.me{opacity:1}.rail-item.me>.rail-p{opacity:.85}
/* alone on the rail: no pill and no divider around a single avatar */
.online-rail:has(.rail-p):not(:has(.rail-item + .rail-item)){padding:0;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.rail-item.me:first-child{margin:0;padding:0;border-left:0}

/* friend request notice (auth.js notice) and the badge on the account button */
.acct-me{position:relative;overflow:visible}
.acct-me img{border-radius:50%}
.acct-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ff5a5a;color:#fff;font:700 .62rem/17px var(--font,Inter,sans-serif);font-style:normal;text-align:center;border:2px solid var(--bg,#0B0F1A)}
#friendNote{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 14px);z-index:3100;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 10px;border-radius:16px;background:#151B2A;border:1px solid color-mix(in srgb,#E9B45A 45%,transparent);box-shadow:0 18px 40px -14px rgba(0,0,0,.75);color:#F3EEE4}
#friendNote[hidden]{display:none}
#friendNote img,#friendNote>b{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:#1C2438;font:600 .95rem/1 var(--serif,serif)}
#friendNote div{display:flex;flex-direction:column;gap:3px;min-width:0}
#friendNote div b{font:600 .88rem/1.2 var(--font,Inter,sans-serif)}
#friendNote small{font:500 .74rem/1.3 var(--font,Inter,sans-serif);color:#B9C0CE}
#friendNote .fn-go{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;font:700 .74rem/36px var(--font,Inter,sans-serif);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-decoration:none}
#friendNote .fn-x{flex:none;width:36px;height:36px;border:0;background:none;color:#B9C0CE;font-size:1.1rem;cursor:pointer;border-radius:50%}
#friendNote{width:min(420px,calc(100vw - 24px));box-sizing:border-box}#friendNote div{flex:1}

/* online strip: the head is a friends-only toggle once you have friends (shown on phones too) */
.rail-filter{cursor:pointer;font:600 .62rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rail-filter[aria-pressed="true"]{color:#1B2233;background:linear-gradient(135deg,#F2C462,#D4962A);border-color:transparent}
@media (max-width:760px){.online-rail .rail-filter{display:inline-flex;align-items:center;min-height:30px}}
.flist .fonline{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 var(--font,Inter,sans-serif);color:#4ade80}
.flist .fonline i{width:8px;height:8px;border-radius:50%;background:currentColor}
.flist .fonline.busy{color:var(--gold,#E9B45A)}
/* Edison learn (/edison/learn): jump chips, deck cards, staples */
.edjump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.edjump .chip{text-transform:none;display:inline-flex;align-items:center;min-height:36px}
.edjump .chip:hover{color:var(--ink);border-color:var(--ink);text-decoration:none}
#what,#rules,#list,#decks,#staples,#first,.edeck{scroll-margin-top:84px}
@media (max-width:620px){#what,#rules,#list,#decks,#staples,#first,.edeck{scroll-margin-top:124px}}
.edprose{max-width:68ch}
.edprose p{line-height:1.6;color:var(--muted);margin-top:10px}
.faq b small{display:block;font:500 .78rem/1.3 var(--font,Inter,sans-serif);margin-top:4px}
.edtier{margin-top:22px}
.edtier>.muted{margin:4px 0 12px}
.edecks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.edeck{display:flex;flex-direction:column;overflow:hidden}
.ed-art{position:relative;height:120px;overflow:hidden;background:var(--surface-2)}
.ed-art img{position:absolute;top:0;left:-19%;width:138%;max-width:none;height:100%;object-fit:cover;object-position:center 24%;filter:saturate(.9) brightness(.95)}
.ed-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,26,.8),rgba(10,14,26,.05) 65%)}
.ed-art h3{position:absolute;left:16px;right:16px;bottom:12px;z-index:1;font:400 1.6rem/1.05 var(--serif);color:#fff}
.ed-body{display:flex;flex-direction:column;gap:10px;padding:14px 18px 18px;flex:1}
.ed-body .badges{margin:0}
.ed-body p{color:var(--muted);font-size:.93rem;line-height:1.5}
.ed-body p b{color:var(--ink)}
.ed-keys{display:flex;flex-wrap:wrap;gap:8px}
.ed-keys span{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:10px;background:var(--surface-2);font-size:.84rem;font-weight:550}
.ed-keys img{width:28px;height:41px;object-fit:cover;border-radius:3px;display:block}
.ed-tip{padding:10px 12px;border-left:3px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
.ed-body .pill{align-self:flex-start;margin-top:auto}
.edstaples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.edstaple{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;padding:10px;border-radius:12px;background:var(--surface-2)}
.edstaple img{width:52px;height:76px;object-fit:cover;border-radius:4px;display:block}
.edstaple b{display:block;font-weight:650;font-size:.95rem;line-height:1.25}
.edstaple small{display:block;color:var(--gold);font:600 .7rem/1.2 var(--font,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;margin:3px 0 4px}
.edstaple span span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45}
.edctas{margin-top:22px}
@media (max-width:960px){.edstaples{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.edecks,.edstaples{grid-template-columns:1fr}.ed-art{height:100px}.ed-art h3{font-size:1.35rem}}

/* Friends page: your profile (name + @handle, auth.js saveProfile) */
.fprofile{display:grid;grid-template-columns:1fr 1fr auto;gap:10px 14px;align-items:end;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#151C2E);margin:6px 0 22px}
.fprofile h2{grid-column:1/-1;margin:0;font-size:1.25rem}
.fprofile label{display:flex;flex-direction:column;gap:6px;font:600 .72rem/1 var(--font,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fprofile input{min-height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg,#0B0F1A);color:var(--ink);font:500 .95rem/1 var(--font,Inter,sans-serif);text-transform:none;letter-spacing:0;width:100%;box-sizing:border-box}
.fprofile .fat{position:relative;display:block}
.fprofile .fat i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font:500 .95rem/1 var(--font,Inter,sans-serif);text-transform:none}
.fprofile .fat input{padding-left:28px}
.fprofile .fmsg{grid-column:1/-1;color:var(--muted);font-size:.78rem}
.fprofile .fmsg.bad{color:#ff7b7b}
.rail-pop .handle{color:var(--gold,#E9B45A)}
@media (max-width:640px){.fprofile{grid-template-columns:1fr}}

/* letter avatars without a picture (presence.js av): white initial on a colour from the name */
.rail-av{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:hsl(var(--h,220) 55% 42%);color:#fff;font:600 1rem/1 var(--font,Inter,system-ui,sans-serif)}
.rail-ask .rail-av{font-size:.95rem}

.acct-me .rail-av{font-size:.9rem}
#friendNote .rail-av{width:36px;height:36px;flex:none;font-size:.95rem}
.flist .frow .rail-av{width:40px;height:40px;flex:none;font-size:1rem}
/* ================= admin dashboard v4 (assets/admin.js): filter row, one chart per measure ================= */
.adminpage .ahead{margin-bottom:10px}
.afilters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;position:sticky;top:var(--hdr-h,64px);z-index:5;padding:10px 0;background:var(--bg,#0B0F1A)}
.aseg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface,#151C2E)}
.aseg button{border:0;background:none;color:var(--muted);font:600 .76rem/1 var(--font,Inter,sans-serif);padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.aseg button[aria-pressed="true"]{background:#F2EEE4;color:#141414}
.aseg button:focus-visible{outline:2px solid var(--teal,#5FD3D3);outline-offset:2px}
.afilters .anote{flex-basis:100%;color:var(--muted);font-size:.74rem}
#adminApp.loading{opacity:.55;transition:opacity .2s}
.astat{display:flex;flex-direction:column;gap:4px}
.astat>span{font:600 .68rem/1.2 var(--font,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.astat>b{font:500 2rem/1 var(--serif);color:var(--ink)}
.astat>em{font-style:normal}
.astat em i{font-style:normal;font:600 .68rem/1 var(--font,Inter,sans-serif);padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.astat em i.up{background:rgba(74,222,128,.14);color:#4ade80}.astat em i.down{background:rgba(255,107,107,.14);color:#ff8a8a}
.acharts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0}
.achart .ach{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.achart .ach h2{margin:0;font-size:1.05rem}
.achart .ach small{display:block;margin-top:3px;font-size:.72rem}
.achart .ach>b{font:500 1.7rem/1 var(--serif);color:var(--ink)}
.aplot{position:relative;height:150px;border-bottom:1px solid var(--line);padding-top:16px}
.aplot .ay{position:absolute;left:0;top:0;font:500 .64rem/1 var(--mono,monospace);color:var(--muted)}
.aplot .ay::after{content:"";position:absolute;left:0;right:-2000px;top:12px;border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent);pointer-events:none}
.acols-bars{position:absolute;left:0;right:0;bottom:0;top:16px;display:flex;align-items:flex-end;gap:2px}
.acols-bars .ab{flex:1;height:100%;display:flex;align-items:flex-end;cursor:crosshair;min-width:0}
.acols-bars .ab i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--c);opacity:.85;transition:opacity .1s}
.acols-bars .ab.on i,.acols-bars .ab:hover i{opacity:1;box-shadow:0 0 0 2px var(--surface,#151C2E)}
.achart.v{--c:#8EA0C8}.achart.d{--c:#E9B45A}.achart.s{--c:#5FD3D3}
.atip{position:absolute;top:-6px;z-index:3;pointer-events:none;padding:6px 9px;border-radius:9px;background:#0B0F1A;border:1px solid var(--line);box-shadow:0 10px 24px -10px rgba(0,0,0,.8);font:500 .78rem/1.2 var(--font,Inter,sans-serif);color:var(--ink);white-space:nowrap}
.atip b{font-weight:700}.atip small{display:block;color:var(--muted);font-size:.68rem;margin-top:2px}
.ax{display:flex;justify-content:space-between;margin-top:6px;font:500 .66rem/1 var(--mono,monospace);color:var(--muted)}
@media (max-width:980px){.acharts{grid-template-columns:1fr}}
@media (max-width:640px){.afilters{top:var(--hdr-h,108px)}.aseg button{padding:7px 9px;font-size:.72rem}.astat>b{font-size:1.6rem}}
.achart .ach{min-height:46px}

/* ================= display and accessibility (profile settings, auth.js applyA11y) ================= */
.fdisplay{grid-template-columns:1fr}
.fdisplay .tg{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);text-transform:none;letter-spacing:0;font-size:inherit;cursor:pointer}
.fdisplay .tg:first-of-type{border-top:0}
.fdisplay .tg>span{display:flex;flex-direction:column;gap:3px;flex:1}
.fdisplay .tg b{font:600 .92rem/1.25 var(--font,Inter,sans-serif);color:var(--ink)}
.fdisplay .tg small{font:400 .78rem/1.35 var(--font,Inter,sans-serif);color:var(--muted)}
.fdisplay input[type=checkbox]{order:2;width:22px;height:22px;flex:none;accent-color:var(--gold,#E9B45A)}
.fdisplay select{min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg,#0B0F1A);color:var(--ink);font:500 .9rem/1 var(--font,Inter,sans-serif)}
/* bigger text: rem-based text everywhere, plus the duel log, card panel, prompts and tray (zoom) */
html.a11y-text-l{font-size:112.5%}
html.a11y-text-xl{font-size:125%}
html.a11y-text-l #log,html.a11y-text-l #detail,html.a11y-text-l .sheet2 .body,html.a11y-text-l .menu{zoom:1.12}
html.a11y-text-xl #log,html.a11y-text-xl #detail,html.a11y-text-xl .sheet2 .body,html.a11y-text-xl .menu{zoom:1.25}
/* colour-blind safe: good = blue, bad = orange; status dots carry a symbol too */
html.a11y-cb{--good:#3B82F6;--red:#F59E0B}
html.a11y-cb .rail-p .pdot{background:#3B82F6}
html.a11y-cb .rail-p .pdot.is-room{background:#E9B45A}
html.a11y-cb .rail-p .pdot.is-duel{background:#F59E0B}
html.a11y-cb .rail-p .pdot::after{content:"";position:absolute;inset:2px;border-radius:50%}
html.a11y-cb .rail-p .pdot.is-duel::after{content:"\2694";inset:auto;left:50%;top:50%;transform:translate(-50%,-55%);font:700 7px/1 system-ui;color:#111}
html.a11y-cb .rail-p .pdot.is-room::after{content:"\2022";inset:auto;left:50%;top:50%;transform:translate(-50%,-55%);font:700 9px/1 system-ui;color:#111}
html.a11y-cb .astat em i.up{background:rgba(59,130,246,.18);color:#7FB0FF}
html.a11y-cb .astat em i.down{background:rgba(245,158,11,.18);color:#FBBF5A}
html.a11y-cb .acct-badge{background:#F59E0B;color:#111}
html.a11y-cb .alive-dot{background:#3B82F6;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
html.a11y-cb .fonline{color:#7FB0FF}
.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}
.fdisplay .tg{flex-direction:row}
.fdisplay .tg select{order:2;flex:none}
/* the header keeps its size with bigger text (it would wrap on phones) */
html.a11y-text-l header.top{zoom:.889}
html.a11y-text-xl header.top{zoom:.8}
/* home format cards on phones: the one-line description runs the full width (no wrapping) over a darker fade */
@media (max-width:760px){
  .ftile .ln{max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ftile::after{background:linear-gradient(90deg,rgba(10,14,26,.95) 55%,rgba(10,14,26,.6))}
}
/* ---------- language picker (assets/i18n.js): a small globe pill in every header, menu under it ---------- */
.langpick{position:relative;display:flex;align-items:center;flex:none;margin-left:6px}
.sitebar .langpick{order:3}
.lang-btn{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:600 .74rem/1 var(--font,Inter,sans-serif);letter-spacing:.04em;cursor:pointer}
.lang-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.lang-btn:hover{border-color:var(--ink)}
.playbar .lang-btn,body.home .lang-btn{color:#F3EEE4;border-color:rgba(255,255,255,.3)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:var(--surface,#151C2E);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);padding:6px;z-index:60;display:flex;flex-direction:column}
.lang-menu[hidden]{display:none}
.lang-menu button{display:flex;align-items:center;gap:10px;text-align:left;font:500 .86rem/1 var(--font,Inter,sans-serif);color:var(--ink);background:none;border:0;padding:10px;border-radius:8px;cursor:pointer}
.lang-menu button b{font:600 .66rem/1 var(--font,Inter,sans-serif);letter-spacing:.08em;color:var(--muted);width:20px}
.lang-menu button:hover{background:rgba(255,255,255,.06)}
.lang-menu button[aria-checked="true"]{background:rgba(228,183,106,.14)}
.lang-menu button[aria-checked="true"] b{color:var(--gold,#E4B76A)}
.lang-hint{position:absolute;right:0;top:calc(100% + 8px);z-index:59;white-space:nowrap;font:600 .72rem/1 var(--font,Inter,sans-serif);color:#1B2233;background:var(--gold,#E4B76A);border:0;border-radius:999px;padding:8px 12px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.lang-note{font:500 .8rem/1.4 var(--font,Inter,sans-serif);color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:14px 0}
/* phones: a 36px circle with the code; on the site bar it sits at the end of the format row (the first row is full) */
@media (max-width:760px){.lang-btn{width:36px;height:36px;padding:0;justify-content:center}.lang-btn svg{display:none}.lang-btn b{font-size:.72rem}
  .sitebar .langpick{order:4;margin:0 0 0 auto}.sitebar .fnav{width:calc(100% - 28px);margin:0 0 0 -16px}}
@media (max-width:480px){.playbar .langpick{margin-left:4px}.top.playbar .backlearn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.top.playbar .backlearn{padding:0 13px;min-height:40px}}
/* longer Play words in other languages: the phone header keeps its first row (wordmark, Play, account) */
@media (max-width:480px){html:not([lang="en"]) .sitebar .playcta{letter-spacing:.02em;padding:0 10px;gap:5px}html:not([lang="en"]) .sitebar .brand{font-size:1.25rem}}
/* ================= GOAT story card (/goat, build-pages.cjs STORY_CARD; story mode lives in /play/ui/story.js) ================= */
.storysec{padding-top:8px}
.stcard{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:20px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.stcard:hover{border-color:var(--gold);transform:translateY(-1px)}
.stc-pics{display:flex;flex:none}
.stc-pics img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid var(--surface);margin-left:-14px;background:var(--line)}
.stc-pics img:first-child{margin-left:0}
.stc-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.stc-txt b{font:500 1.5rem/1.1 var(--serif)}
.stc-txt .ln{color:var(--muted);font-size:.92rem}
.stc-prog{font:600 .72rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.stc-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:6px;padding:5px 12px 5px 8px;border-radius:999px;font:700 .74rem/1 var(--font);color:#1B2233;background:linear-gradient(135deg,#F2C462,#D4962A)}
.stc-badge svg{flex:none;width:15px;height:15px;fill:currentColor}
.stc-badge[hidden],.stc-prog[hidden]{display:none}
.stc-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .stcard{flex-direction:column;align-items:flex-start;gap:12px;padding:14px}
  .stc-txt{width:100%}
  .stc-pics img{width:44px;height:44px;margin-left:-12px}
  .stc-go{display:none}
}

/* several stories per format (stories registry, 15 Oct 2026): a stack on format pages, a grid on the home page */
.stlist{display:flex;flex-direction:column;gap:14px}
.stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:4px}
.stgrid .stcard{flex-direction:column;align-items:flex-start;gap:12px}
.stgrid .stc-txt{width:100%}
.stgrid .stc-go{display:none}
.homestories{margin-top:48px}
.fbadges p{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.astory-sel{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.astory-sel span{font:600 .68rem/1.2 var(--font,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.astory-sel select{min-height:38px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 .9rem/1.2 var(--font,Inter,sans-serif);max-width:100%}
.fbadges .stc-badge{margin-top:0}
@media (max-width:640px){.stgrid{grid-template-columns:1fr}.homestories{margin-top:36px}}

/* ================= online strip v3 (14 Oct 2026): a pill that opens a vertical list ================= */
.online-rail{flex-direction:column;align-items:flex-end;gap:8px;padding:0!important;border:0!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.online-rail .rail-head{display:none}
.rail-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,#0B0F1A 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font:600 .7rem/1 var(--font,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.rail-toggle .rt-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}
html.a11y-cb .rail-toggle .rt-dot{background:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.rail-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.rail-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.rail-list{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:min(300px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:18px;border:1px solid var(--line);background:#121827;box-shadow:0 24px 50px -18px rgba(0,0,0,.8)}
.rail-list[hidden]{display:none}
body:not(.home) .online-rail{position:relative}
.rail-list .rail-item{position:relative;width:100%}
.rail-list .rail-item.me{margin:4px 0 0;padding:6px 0 0;border:0;border-top:1px solid var(--line);opacity:1}
.rail-list .rail-p.rail-row{width:100%;height:auto;min-height:52px;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;border:0;background:none;box-shadow:none;text-align:left;transform:none}
.rail-list .rail-p.rail-row:hover,.rail-list .rail-p.rail-row[aria-expanded="true"]{background:rgba(255,255,255,.06);transform:none;border-color:transparent}
.rail-list .rail-avw{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:block}
.rail-list .rail-avw img,.rail-list .rail-avw .rail-av{width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid}
.rail-list .rail-p .pdot{right:-2px;bottom:-2px}
.rail-list .rail-nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.rail-list .rail-nm b{font:600 .88rem/1.2 var(--font,Inter,sans-serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-list .rail-nm small{font:500 .72rem/1.2 var(--font,Inter,sans-serif);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-list .rail-pop{position:static;transform:none;margin:4px 0 8px 50px;min-width:0;max-width:none;width:auto;box-shadow:none;background:#0d1220}
.rail-list .rail-pop::after{display:none}
.rail-list .rail-filter{align-self:flex-start;margin:0 0 6px 4px;display:inline-flex}
.online-rail .rail-ask{order:0;align-self:flex-end}
@media (max-width:760px){.online-rail{top:auto}.rail-toggle{min-height:34px}}

/* ================= admin badge, Everyone / Friends switch, chat (14 Oct 2026) ================= */
.rail-avw.is-admin img,.rail-avw.is-admin .rail-av,.chat-av.is-admin img,.chat-av.is-admin .rail-av{box-shadow:0 0 0 2px #121827,0 0 0 4px #E9B44C}
.rail-list .rail-avw.is-admin{margin:2px}
.admin-tag{flex:none;font:700 .58rem/1 var(--font,Inter,sans-serif);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#1B2233;background:linear-gradient(135deg,#F2C462,#D4962A);padding:3px 6px;border-radius:999px}
.rail-list .rail-nmrow{display:flex;align-items:center;gap:6px;min-width:0}
.rail-list .rail-nmrow b{min-width:0}
.rail-unread{flex:none;margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:#E5484D;color:#fff;font:700 .66rem/1 var(--font,Inter,sans-serif);font-style:normal;letter-spacing:0}
.rail-toggle .rail-unread{margin-left:0}
.rail-sec{display:block;padding:8px 8px 4px;font:600 .62rem/1 var(--font,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rail-scope{display:flex;gap:2px;padding:3px;margin:0 0 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.rail-scope button{flex:1;border:0;background:none;color:var(--muted);font:600 .76rem/1 var(--font,Inter,sans-serif);padding:8px 10px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}
.rail-scope button[aria-pressed="true"]{background:#E9B44C;color:#1B2233}
.rail-scope button:focus-visible{outline:2px solid #E9B44C;outline-offset:2px}
.rail-list .rail-pop [data-msg]{width:100%;margin:8px 0 2px}

.chat-panel{position:fixed;right:16px;bottom:16px;z-index:60;width:min(360px,calc(100vw - 32px));height:min(480px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);background:var(--surface,#121827);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);color:var(--ink);font-family:var(--font,Inter,sans-serif)}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line)}
.chat-av img,.chat-av .rail-av{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.chat-who{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.chat-who b{font:600 .95rem/1.2 var(--font,Inter,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-x{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.chat-x:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.chat-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.chat-msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.chat-empty{margin:auto;text-align:center;color:var(--muted);font-size:.84rem;max-width:240px}
.chat-m{max-width:80%;display:flex;flex-direction:column;gap:2px}
.chat-m p{margin:0;padding:8px 12px;border-radius:16px;font-size:.88rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-m small{font-size:.66rem;color:var(--muted);padding:0 6px}
.chat-m.theirs{align-self:flex-start}
.chat-m.theirs p{background:color-mix(in srgb,var(--ink) 9%,transparent);border-bottom-left-radius:6px}
.chat-m.mine{align-self:flex-end;align-items:flex-end}
.chat-m.mine p{background:#E9B44C;color:#1B2233;border-bottom-right-radius:6px}
.chat-m.failed p{opacity:.5}
.chat-m.failed small{color:#E5484D}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;resize:none;min-height:40px;max-height:120px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--bg,#0B0F1A);color:var(--ink);font:400 .9rem/1.35 var(--font,Inter,sans-serif)}
.chat-form textarea:focus{outline:none;border-color:#E9B44C}
.chat-send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:linear-gradient(135deg,#F2C462,#D4962A);color:#1B2233;cursor:pointer;display:grid;place-items:center}
.chat-send svg{width:18px;height:18px;fill:currentColor}
@media (max-width:600px){.chat-panel{right:8px;left:8px;bottom:8px;width:auto;height:min(70vh,520px)}}

/* ================= admin dashboard v5 (15 Oct 2026, assets/admin.js): live box, filter bar with chips, sections ================= */
.adminpage .ahead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:6px}
.aperiod{margin:6px 0 0;font-size:.95rem;color:var(--ink)}.aperiod span{color:var(--muted)}
.alivebox{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.alivebox:empty{display:none}
.alv{display:flex;align-items:center;gap:8px;padding:4px 10px}
.alv+.alv{border-left:1px solid var(--line)}
.alv div{display:flex;flex-direction:column;gap:2px}
.alv b{font:600 1.15rem/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.alv span{font:500 .68rem/1.1 var(--font);color:var(--muted);white-space:nowrap}
.ahours2{display:flex;align-items:flex-end;gap:2px;height:30px;width:150px;padding:0 6px}
.ahours2 i{flex:1;display:block;min-height:2px;border-radius:2px 2px 0 0;background:color-mix(in srgb,#E9B44C 70%,transparent)}
.afilters{display:block;position:static;padding:10px 0 8px;margin:6px 0 4px;border-bottom:1px solid var(--line);background:none}
.afrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px}
.afilters .aseg{background:var(--surface)}
.afilters .aseg button[aria-pressed="true"]{background:#E9B44C;color:#1B2233}
.asels{display:flex;flex-wrap:wrap;gap:8px}
.asel,.adates label{display:flex;flex-direction:column;gap:4px}
.asel>span,.adates span{font:600 .62rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.asel select,.adates input{height:36px;min-width:112px;padding:0 30px 0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .84rem/1 var(--font);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.adates{display:flex;gap:8px}.adates input{padding:0 10px;background-image:none;min-width:0}
.asel.on select{border-color:#E9B44C;box-shadow:0 0 0 1px #E9B44C inset}
.asel select:disabled{opacity:.45;cursor:not-allowed}
.asel select:focus-visible,.adates input:focus-visible,.arefresh:focus-visible,.achip:focus-visible{outline:2px solid #E9B44C;outline-offset:2px}
.arefresh{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:600 .78rem/1 var(--font);cursor:pointer}
.arefresh svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arefresh:hover{border-color:var(--ink)}
.achips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;font-size:.8rem;min-height:30px}
.achip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 12px;border-radius:999px;border:1px solid color-mix(in srgb,#E9B44C 55%,transparent);background:color-mix(in srgb,#E9B44C 14%,transparent);color:var(--ink);font:600 .76rem/1 var(--font);cursor:pointer}
.achip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:.7}
.achip.reset{background:none;border-color:var(--line);color:var(--muted);padding:0 12px}
.achip.reset:hover,.achip:hover{border-color:var(--ink)}
.awarn{color:#B07A12}.aupd{margin-left:auto;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.aupd .arefresh{height:30px;margin:0;padding:0 12px}
.aminis.top0{margin-top:0}
.at td.nw{white-space:nowrap}
@media (min-width:981px){.astory{grid-auto-flow:column;grid-template-rows:repeat(7,auto)}}
:root[data-theme="dark"] .awarn{color:#E9B44C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .awarn{color:#E9B44C}}
.anav2{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px}
.anav2::-webkit-scrollbar{display:none}
.anav2 a{flex:none;font:600 .78rem/1 var(--font);color:var(--muted);padding:8px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none}
.anav2 a:hover{color:var(--ink);border-color:var(--ink)}
.abanner{margin:16px 0 0;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,#E9B44C 50%,transparent);background:color-mix(in srgb,#E9B44C 10%,var(--surface));font-size:.9rem;line-height:1.5}
.abanner b{display:block;margin-bottom:2px}
.adminpage code{font:500 .85em/1 var(--mono,monospace);padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.asec{margin-top:34px;scroll-margin-top:calc(var(--hdr-h,64px) + 12px)}
.asec-h{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.asec-h h2{margin:0;font:500 1.8rem/1.1 var(--serif);color:var(--ink)}
.asec-h p{margin:0;color:var(--muted);font-size:.88rem}
.akpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.akpi{display:flex;flex-direction:column;gap:6px;padding:14px 14px 12px;border-radius:16px;border:1px solid var(--line);background:var(--surface);min-width:0}
.akpi>span{font:600 .64rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.akpi>b{font:600 1.75rem/1 var(--font);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.akpi>b small{font-size:.8rem;font-weight:500;color:var(--muted)}
.akpi-f{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.akpi-f small{font-size:.72rem;line-height:1.3;color:var(--muted)}
.akpi-f i{font-style:normal;font:700 .66rem/1 var(--font);padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)}
.akpi-f i.up{background:rgba(74,222,128,.14);color:#1f9d55}.akpi-f i.down{background:rgba(255,107,107,.14);color:#d14343}
:root[data-theme="dark"] .akpi-f i.up{color:#4ade80}:root[data-theme="dark"] .akpi-f i.down{color:#ff8a8a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .akpi-f i.up{color:#4ade80}:root:not([data-theme="light"]) .akpi-f i.down{color:#ff8a8a}}
html.a11y-cb .akpi-f i.up{background:rgba(59,130,246,.18);color:#7FB0FF}html.a11y-cb .akpi-f i.down{background:rgba(245,158,11,.18);color:#FBBF5A}
.aminis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.aminis>div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;min-width:0}
.aminis>div+div{border-left:1px solid var(--line)}
.aminis span{font:600 .62rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.aminis b{font:600 1.15rem/1.1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.aminis small{font-size:.72rem;color:var(--muted)}
.aminis.col{grid-template-columns:1fr;margin:0;border:0;background:none}
.aminis.col>div{padding:10px 0}.aminis.col>div+div{border-left:0;border-top:1px solid var(--line)}
.anote2{margin:8px 0 0;font-size:.76rem;line-height:1.45;color:var(--muted)}
.acard2>.anote2{margin:-4px 0 10px}
.acard2{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;min-width:0}
.acard2-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.acard2-h h3{margin:0;font:600 .98rem/1.2 var(--font);color:var(--ink)}
.acard2-h span{font-size:.76rem;color:var(--muted);white-space:nowrap}
.agrid2,.agrid3{display:grid;gap:12px;margin-top:12px;align-items:start}
.agrid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.agrid2.wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.agrid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.asec-h+.agrid2,.asec-h+.agrid3{margin-top:0}
.asec>.acard2{margin-top:12px}.asec-h+.acard2{margin-top:0}
.astack{display:flex;flex-direction:column;gap:12px;min-width:0}
.aempty{margin:6px 0;color:var(--muted);font-size:.84rem}
.aneeds{margin:6px 0;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,#E9B44C 60%,transparent);color:var(--muted);font-size:.82rem}
.atabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.atabs button{border:1px solid var(--line);background:none;color:var(--muted);font:600 .78rem/1 var(--font);padding:8px 12px;border-radius:999px;cursor:pointer}
.atabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.atabs button:disabled{opacity:.4;cursor:not-allowed}
.achead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.achead b{font:600 1.9rem/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.achead span{font-size:.8rem;color:var(--muted)}
.aplot2{position:relative;height:200px;border-bottom:1px solid var(--line);padding-top:16px}
.aplot2 .ay{position:absolute;left:0;top:0;font:500 .64rem/1 var(--mono,monospace);color:var(--muted)}
.aplot2 .ay::after{content:"";position:absolute;left:0;width:3000px;max-width:calc(100vw - 80px);top:12px;border-top:1px dashed var(--line);pointer-events:none}
.achart2{overflow:hidden}
.abars{position:absolute;left:0;right:0;bottom:0;top:16px;display:flex;align-items:flex-end;gap:2px}
.abars .ab{flex:1;height:100%;display:flex;align-items:flex-end;cursor:crosshair;min-width:0}
.abars .ab i{display:block;width:100%;border-radius:3px 3px 0 0;background:#E9B44C;opacity:.8}
.abars .ab.on i,.abars .ab:hover i{opacity:1}
.ahbs{display:flex;flex-direction:column;gap:2px}
.ahb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(40px,1fr) auto 38px;align-items:center;gap:10px;padding:5px 0;font-size:.84rem}
.ahb>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ahb>i{display:block;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ahb>i em{display:block;height:100%;border-radius:999px;background:#E9B44C}
.ahb>b{font:600 .8rem/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.ahb>small{font-size:.72rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.amore2 summary,.amorebtn{cursor:pointer;color:var(--muted);font:600 .76rem/1 var(--font);padding:10px 0 2px;list-style:none;background:none;border:0}
.amore2 summary::-webkit-details-marker{display:none}
.amorebtn:hover,.amore2 summary:hover{color:var(--ink)}
.ascroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.at{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.at th{text-align:left;font:600 .64rem/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.at th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.at th button:hover{color:var(--ink)}.at th button:focus-visible{outline:2px solid #E9B44C;outline-offset:2px;border-radius:3px}
.at th i{font-style:normal;font-size:.6rem;color:#E9B44C}
.at th.n,.at td.n{text-align:right}.at th.n button{flex-direction:row-reverse}
.at td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--ink);vertical-align:middle}
.at tbody tr:last-child td{border-bottom:0}
.at td.n{white-space:nowrap}
.at tr.aclick{cursor:pointer}.at tr.aclick:hover td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.at tr.sel td{background:color-mix(in srgb,#E9B44C 12%,transparent)}
.at td.wbar{width:42%}
.abarcell{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.abarcell i{display:block;height:8px;border-radius:999px;background:#E9B44C;max-width:calc(100% - 44px)}
.abarcell b{font-weight:600;min-width:36px;text-align:right}
.acc{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.aflag{font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:1.15em;line-height:1;display:inline-block;width:1.3em;text-align:center}
.aflag.none::before{content:"";display:inline-block;width:14px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.apath{font:500 .8rem/1.2 var(--mono,monospace);word-break:break-all}
.at .watch,.arep a{color:#B07A12;font-weight:600;text-decoration:none}
:root[data-theme="dark"] .at .watch,:root[data-theme="dark"] .arep a,:root[data-theme="dark"] .arep summary{color:#E9B44C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .at .watch,:root:not([data-theme="light"]) .arep a,:root:not([data-theme="light"]) .arep summary{color:#E9B44C}}
.at .watch{border:1px solid color-mix(in srgb,#E9B44C 50%,transparent);padding:4px 10px;border-radius:999px;font-size:.76rem;white-space:nowrap}
.arep summary{cursor:pointer;color:#B07A12;font-weight:600;font-size:.78rem;white-space:nowrap;list-style:none}
.arep summary::-webkit-details-marker{display:none}
.arep div{display:flex;flex-direction:column;gap:4px;padding-top:6px}
.arep a{font-size:.76rem;white-space:nowrap}
.auser{display:flex;flex-direction:column;gap:2px;min-width:150px}
.auser b{font-weight:600}.auser small{font-size:.72rem;color:var(--muted);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asearch{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.asearch input{flex:1;min-width:180px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:500 .88rem/1 var(--font)}
.asearch input:focus{outline:none;border-color:#E9B44C}
.asearch small{color:var(--muted);font-size:.76rem}
.arets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.arets>div{display:flex;flex-direction:column;gap:2px}
.arets b{font:600 1.5rem/1 var(--font);color:var(--ink)}
.arets span{font-size:.8rem;color:var(--ink)}.arets small{font-size:.72rem;color:var(--muted)}
.alevels{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.alevel{display:grid;grid-template-columns:64px minmax(0,1fr) 48px;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center}
.alevel-n{font-weight:600;font-size:.88rem}
.awinbar{height:10px;border-radius:999px;background:color-mix(in srgb,#E5484D 35%,transparent);overflow:hidden}
.awinbar i{display:block;height:100%;background:#4ade80;border-radius:999px 0 0 999px}
html.a11y-cb .awinbar{background:rgba(245,158,11,.4)}html.a11y-cb .awinbar i{background:#3B82F6}
.alevel b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.alevel small{grid-column:2/4;font-size:.72rem;color:var(--muted)}
.astory-top{display:flex;gap:28px;margin-bottom:12px}
.astory-top div{display:flex;flex-direction:column;gap:2px}.astory-top b{font:600 1.5rem/1 var(--font)}.astory-top span{font-size:.74rem;color:var(--muted)}
.astory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.ast{display:grid;grid-template-columns:22px 110px minmax(40px,1fr) 34px 120px;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);font-size:.84rem}
.ast-i{font:600 .7rem/1 var(--mono,monospace);color:var(--muted)}
.ast-n small{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#E9B44C}
.ast-bar{display:block;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ast-bar em{display:block;height:100%;border-radius:999px;background:#E9B44C}
.ast>b{text-align:right;font-weight:600}.ast>small{font-size:.72rem;color:var(--muted);text-align:right;white-space:nowrap}
.afeed{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.afeed li{display:grid;grid-template-columns:62px 22px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);font-size:.82rem}
.afeed li>span:nth-child(3){overflow-wrap:anywhere}
.afeed small{color:var(--muted);font-size:.7rem}
.afeed .muted{font-size:.74rem}
@media (max-width:1200px){.akpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.agrid2,.agrid2.wide-left,.agrid3{grid-template-columns:minmax(0,1fr)}.astory{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .alivebox{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.alv{padding:4px 2px;align-items:flex-start;gap:6px}.alv+.alv{border-left:0}.alv b{font-size:1.05rem}.alv span{white-space:normal;font-size:.64rem}.alv .alive-dot{width:8px;height:8px;margin-top:4px}.ahours2{grid-column:1/-1;width:auto;height:24px}
  .akpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.akpi{padding:12px}.akpi>b{font-size:1.45rem}
  .aminis{grid-template-columns:repeat(2,minmax(0,1fr))}.aminis>div:nth-child(odd){border-left:0}.aminis>div:nth-child(n+3){border-top:1px solid var(--line)}
  .aminis.col{grid-template-columns:1fr}.aminis.col>div{border-top:1px solid var(--line)}.aminis.col>div:first-child{border-top:0}
  .afilters .aseg{width:100%;overflow-x:auto;scrollbar-width:none}.afilters .aseg button{flex:1;padding:8px 6px}
  .asels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.asel select{width:100%;min-width:0}
  .adates{width:100%}.adates label{flex:1}.adates input{width:100%}
  .arefresh{margin-left:0}
  .asec-h h2{font-size:1.5rem}
  .acard2{padding:14px}
  .ast{grid-template-columns:20px minmax(0,1fr) 60px 28px;font-size:.8rem}.ast>small{grid-column:2/5;text-align:left}
  .afeed li{grid-template-columns:54px 20px minmax(0,1fr)}.afeed li small{display:none}
}
/* ================= home trophy bar (build-pages trophyBar, 15 Oct 2026) ================= */
.trophybar{margin:8px 0 40px;padding:18px 20px 20px;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--gold,#E9B45A) 10%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--gold,#E9B45A) 30%,var(--line));box-shadow:var(--shadow)}
.tb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.tb-head h2{margin:0;font-family:var(--serif);font-size:1.35rem;line-height:1.15}
.tb-head .eyebrow{display:block;margin-bottom:4px}
.tb-count{flex:none;padding:6px 12px;border-radius:999px;font:700 .74rem/1 var(--font);color:#1B2233;background:linear-gradient(135deg,#F2C462,#D4962A)}
.tb-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.tb-cup{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 12px;border-radius:16px;text-align:center;text-decoration:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);transition:transform .2s,border-color .2s}
.tb-cup:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold,#E9B45A) 60%,var(--line))}
.tb-cup .cup{width:58px;height:58px;margin-bottom:6px;filter:grayscale(1) brightness(.55);opacity:.45;transition:filter .3s,opacity .3s}
.tb-cup b{font-size:.86rem;line-height:1.2}
.tb-cup small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tb-cup em{margin-top:4px;font:600 .7rem/1.2 var(--font);font-style:normal;color:var(--muted)}
.tb-cup.won{border-color:color-mix(in srgb,var(--gold,#E9B45A) 55%,var(--line));background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--gold,#E9B45A) 22%,transparent),var(--bg) 70%)}
.tb-cup.won .cup{filter:drop-shadow(0 0 12px rgba(242,181,68,.6));opacity:1;animation:tbGlow 3.2s ease-in-out infinite}
.tb-cup.won em{color:#D4962A}
@keyframes tbGlow{50%{filter:drop-shadow(0 0 20px rgba(242,181,68,.9))}}
html.a11y-calm .tb-cup.won .cup{animation:none}
@media (prefers-reduced-motion:reduce){.tb-cup.won .cup{animation:none}.tb-cup{transition:none}}
@media (max-width:640px){.trophybar{margin-bottom:28px;padding:14px}.tb-cup{flex-basis:116px}.tb-head h2{font-size:1.15rem}}

/* trophies, compact (Laith, 15 Oct 2026): under "Play a story", one slim row of chips instead of big cards */
.trophybar{margin:18px 0 40px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.trophybar .tb-head{margin:0;gap:10px;align-items:center;flex:none}
.trophybar .tb-head h2{font:600 .78rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.trophybar .tb-head .eyebrow{display:none}
.trophybar .tb-count{padding:4px 9px;font-size:.68rem}
.trophybar .tb-row{flex:1;min-width:0;gap:8px;padding:0;flex-wrap:wrap;overflow:visible}
.trophybar .tb-cup{flex:0 0 auto;flex-direction:row;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;text-align:left;background:var(--bg)}
.trophybar .tb-cup:hover{transform:none}
.trophybar .tb-cup .cup{width:22px;height:22px;margin:0}
.trophybar .tb-cup b{font-size:.8rem;white-space:nowrap}
.trophybar .tb-cup small{display:none}
.trophybar .tb-cup em{margin:0;font-size:.68rem;white-space:nowrap}
.trophybar .tb-cup em::before{content:"\00B7";margin-right:6px;color:var(--muted)}
.trophybar .tb-cup.won{background:color-mix(in srgb,var(--gold,#E9B45A) 12%,var(--bg))}
.trophybar .tb-cup.won .cup{filter:drop-shadow(0 0 6px rgba(242,181,68,.6))}
@keyframes tbGlow{50%{filter:drop-shadow(0 0 10px rgba(242,181,68,.85))}}
@media (max-width:640px){.trophybar{padding:10px}.trophybar .tb-head{width:100%;justify-content:space-between}}

/* trophies, quieter (Laith, 15 Oct 2026): cup + story name only; gold when won, a thin progress line while in
   progress, the words live in the tooltip */
.trophybar{gap:12px;padding:10px 12px;background:transparent;border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.trophybar .tb-head h2{font-size:.7rem}
.trophybar .tb-count{background:none;color:var(--gold,#E9B45A);border:1px solid color-mix(in srgb,var(--gold,#E9B45A) 45%,transparent);padding:3px 8px;font-variant-numeric:tabular-nums}
.trophybar .tb-cup{position:relative;overflow:hidden;gap:6px;padding:5px 11px 5px 7px;border-color:color-mix(in srgb,var(--line) 80%,transparent);background:transparent}
.trophybar .tb-cup em{display:none}
.trophybar .tb-cup b{font-weight:600;font-size:.76rem;color:var(--muted)}
.trophybar .tb-cup .cup{width:18px;height:18px}
.trophybar .tb-cup.won b{color:var(--ink)}
.trophybar .tb-cup.going b{color:var(--ink)}
.trophybar .tb-cup.going::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0) * 100%);background:var(--gold,#E9B45A);opacity:.8}
.trophybar .tb-cup:hover{border-color:color-mix(in srgb,var(--gold,#E9B45A) 55%,var(--line))}

/* person card in the online list, cleaner (Laith, 15 Oct 2026): the row above already shows name and status;
   Message and Add friend side by side, then one Challenge block with the formats on one row */
.rail-list .rail-pop.rp2{display:flex;flex-direction:column;gap:10px;padding:10px}
.rp2 .rp-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center}
.rp2 .rp-acts .sbtn,.rp2 .rp-acts small{width:100%;margin:0;min-height:34px;padding:0 8px;font-size:.66rem;display:grid;place-items:center;text-align:center}
.rp2 .rp-acts small{border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.rp2 .rp-ch{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.rp2 .rp-ch .lbl{margin:0;font:600 .62rem/1 var(--font,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rp2 .rail-seg{display:flex;flex-wrap:nowrap;gap:2px;padding:2px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.rp2 .rail-seg button{flex:1;min-width:0;padding:7px 4px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 .7rem/1 var(--font,Inter,sans-serif);white-space:nowrap;cursor:pointer}
.rp2 .rail-seg button[aria-pressed="true"]{background:#E9B44C;color:#1B2233}
.rp2 .rp-ch .sbtn.pri{width:100%;margin:2px 0 0}
.rp2 .rp-busy{color:var(--muted)}
.rail-list .rail-pop.rp2{margin:2px 0 8px}
.rp2 .rail-seg button{padding:7px 2px;font-size:.68rem}

/* ================= trophy cabinet (Laith, 15 Oct 2026: "it's awards, make it prestigious") =================
   a lit display shelf; each story is a medallion: polished gold with a slow shine once won, dark bronze with a
   gold progress ring while in progress, engraved serif names. Overrides the compact chip styles above. */
.trophybar{position:relative;display:block;margin:22px 0 44px;padding:22px 22px 18px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(233,180,76,.13),transparent 60%),linear-gradient(180deg,#171A24,#0E1017);
  border:1px solid rgba(233,180,76,.32);box-shadow:inset 0 1px 0 rgba(255,231,170,.18),0 30px 60px -30px rgba(0,0,0,.9)}
.trophybar::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,#F2C462,transparent)}
.trophybar .tb-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 16px}
.trophybar .tb-head h2{margin:0;font:400 1.5rem/1.1 var(--serif);letter-spacing:.01em;text-transform:none;color:#F6E7C1}
.trophybar .tb-head .eyebrow{display:block;margin-bottom:6px;color:#C99A3E}
.trophybar .tb-count{padding:5px 12px;border-radius:999px;border:1px solid rgba(233,180,76,.5);background:rgba(233,180,76,.08);color:#F2C462;font:700 .78rem/1 var(--font)}
.trophybar .tb-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:0}
/* the shelf under the medallions */
.trophybar .tb-row{position:relative;padding-bottom:14px}
.trophybar .tb-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:4px;background:linear-gradient(180deg,#3A2E18,#1C160C);box-shadow:0 -1px 0 rgba(255,220,150,.25),0 8px 18px -6px rgba(0,0,0,.8)}
.trophybar .tb-cup{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;border:0;border-radius:14px;background:none;text-align:center;flex:initial}
.trophybar .tb-cup::after{display:none}
.trophybar .tb-cup:hover{transform:translateY(-3px);background:radial-gradient(60% 60% at 50% 30%,rgba(233,180,76,.10),transparent)}
/* medallion: the cup inside a ring; the ring fills with progress (--p) */
.trophybar .tb-cup .cup{width:44px;height:44px;padding:13px;margin:0 0 6px;box-sizing:content-box;border-radius:50%;border:3px solid transparent;opacity:1;
  background:radial-gradient(circle at 50% 35%,#2A2418,#14110B 70%) padding-box,conic-gradient(#E9B44C calc(var(--p,0) * 360deg),rgba(255,255,255,.08) 0) border-box;
  filter:grayscale(1) brightness(.5) sepia(.6);box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.trophybar .tb-cup b{font:500 .95rem/1.15 var(--serif);color:#B9AE97;white-space:normal}
.trophybar .tb-cup small{display:block;font:600 .56rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#6F6656}
.trophybar .tb-cup em{display:none}
.trophybar .tb-cup.going .cup{filter:grayscale(.6) brightness(.75) sepia(.5)}
.trophybar .tb-cup.going b{color:#E4D6B6}
/* won: polished gold medallion, warm spotlight, slow shine */
.trophybar .tb-cup.won .cup{filter:none;border-width:3px;
  background:radial-gradient(circle at 35% 30%,#FFF3C4,#E9B44C 45%,#9C6B1C 100%) padding-box,linear-gradient(135deg,#FFE7A6,#B67F22 50%,#FFE7A6) border-box;
  box-shadow:0 0 0 4px rgba(233,180,76,.14),0 0 28px 4px rgba(242,181,68,.45),inset 0 -6px 12px rgba(120,70,0,.35);animation:tbGlow 3.2s ease-in-out infinite}
.trophybar .tb-cup.won .cup *{fill:#5A3A08}
.trophybar .tb-cup.won b{color:#F6E7C1}
.trophybar .tb-cup.won small{color:#C99A3E}
.trophybar .tb-cup.won::before{content:"";position:absolute;left:50%;top:-8px;width:120px;height:120px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(242,181,68,.22),transparent 65%);pointer-events:none}
@keyframes tbGlow{50%{box-shadow:0 0 0 4px rgba(233,180,76,.2),0 0 40px 8px rgba(242,181,68,.6),inset 0 -6px 12px rgba(120,70,0,.35)}}
html.a11y-calm .trophybar .tb-cup.won .cup{animation:none}
@media (prefers-reduced-motion:reduce){.trophybar .tb-cup.won .cup{animation:none}}
@media (max-width:640px){.trophybar{padding:18px 14px 14px}.trophybar .tb-head h2{font-size:1.25rem}.trophybar .tb-row{grid-template-columns:repeat(3,1fr)}.trophybar .tb-cup .cup{width:36px;height:36px;padding:11px}.trophybar .tb-cup b{font-size:.84rem}}
.trophybar .tb-cup.won{background:none;border:0}

/* retro formats (15 Oct 2026): the header's "More formats" menu, the home page's "Retro formats" row, the format page intro */
.sitebar .wrap{position:relative}
.fmorebtn{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 10px 0 12px;border:0;border-radius:999px;background:none;font:500 .9rem/1 var(--font);color:var(--muted);white-space:nowrap;cursor:pointer}
.fmorebtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fmorebtn:hover,.fmorebtn[aria-expanded="true"]{color:var(--ink)}
.fmorebtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.fmorebtn[data-cur]{color:var(--ink);background:var(--surface-2)}
body.home .fmorebtn{color:#C9C6BE}
body.home .fmorebtn:hover,body.home .fmorebtn[aria-expanded="true"]{color:#F3EEE4}
.fmore{position:absolute;top:calc(100% - 8px);left:0;z-index:60;width:290px;display:grid;gap:2px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -20px rgba(0,0,0,.5)}
.fmore[hidden]{display:none}
.fm-head{padding:8px 10px 6px;font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fmore a{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:10px;color:var(--ink)}
.fmore a:hover,.fmore a[aria-current="page"]{background:var(--surface-2)}
.fmore img{flex:none;width:42px;height:42px;border-radius:8px;object-fit:cover}
.fmore a span{display:flex;flex-direction:column;gap:4px;min-width:0}
.fmore b{font:400 1.15rem/1 var(--serif)}
.fmore small{font:500 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .fmorebtn{min-height:36px;padding:0 8px 0 10px;font-size:.86rem}
  .fmore{position:static;order:5;width:calc(100% + 32px);margin:0 -16px;display:flex;gap:8px;padding:2px 16px 4px;overflow-x:auto;scrollbar-width:none;background:none;border:0;border-radius:0;box-shadow:none}
  .fmore::-webkit-scrollbar{display:none}
  .fm-head{display:none}
  .fmore a{flex:none;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px}
  .fmore img{width:28px;height:28px;border-radius:50%}
  .fmore a span{flex-direction:row;align-items:baseline;gap:6px}
  .fmore b{font:500 .86rem/1 var(--font)}
  body.home .fmore a{color:#F3EEE4;border-color:rgba(255,255,255,.2)}
  body.home .fmore a[aria-current="page"],body.home .fmore a:hover{background:rgba(255,255,255,.1)}
}
.retrohead{margin-top:46px}
.pick4.retro4 .ftile.sm{min-height:230px;padding:18px}
.pick4.retro4 .ftile.sm b{font-size:1.7rem}
.pick4.retro4 .ftile.sm .ln{font-size:.84rem}
@media (max-width:960px){.pick4.retro4 .ftile.sm{min-height:190px}}
@media (max-width:560px){.retrohead{margin-top:30px}.pick4.retro4{grid-template-columns:1fr 1fr;gap:10px}.pick4.retro4 .ftile.sm{height:auto;min-height:118px;padding:12px;justify-content:flex-end}
  .pick4.retro4 .ftile.sm b{font-size:1.25rem}.pick4.retro4 .ftile.sm .ln{display:none}.pick4.retro4 .ftile.sm::after{background:linear-gradient(0deg,rgba(10,14,26,.94) 30%,rgba(10,14,26,.25))}}
.rt-about p{max-width:70ch;font-size:1rem;line-height:1.6}
.rt-facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:18px 0}
.rt-facts dt{font:500 .62rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.rt-facts dd{margin:0;font:400 1.2rem/1.2 var(--serif)}
.rt-tier{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px}
.rt-about a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.fmore small{display:none}}
.rail-sel select{width:100%;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 .74rem/1 var(--font);cursor:pointer}
.rail-sel select option,.rail-sel select optgroup{background:var(--surface);color:var(--ink)}
.acc.guess{opacity:.55;font-style:italic}

/* ================= My decks (/decks, assets/decks.js, 16 Oct 2026): every saved deck in every format ================= */
body.mydecks{background:radial-gradient(1100px 460px at 85% -8%,rgba(233,180,76,.09),transparent 70%),linear-gradient(180deg,#0D1322 0,var(--bg) 640px) no-repeat,var(--bg)}
.mdk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:34px}
.mdk-head h1{font-size:clamp(2.6rem,6vw,4rem)}
.mdk-head h1 em{color:#E9B44C}
.mdk-sub{margin:10px 0 0;font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.mdk-sync{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;font-size:.88rem;color:var(--muted)}
.mdk-dot{width:8px;height:8px;border-radius:50%;background:var(--faint,#737C8D);flex:none}
.mdk-dot.ok{background:var(--good,#6FD3A0);box-shadow:0 0 0 3px color-mix(in srgb,var(--good,#6FD3A0) 22%,transparent)}
.mdk-dot.spin{background:#E9B44C;animation:mdkPulse 1s ease-in-out infinite alternate}
@keyframes mdkPulse{to{opacity:.3}}
.mdk-link{border:0;background:none;padding:0;font:600 .88rem/1 var(--font);color:#E9B44C;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* buttons */
.mdk-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:600 .86rem/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .15s,background .15s,transform .15s}
.mdk-btn:hover{border-color:color-mix(in srgb,#E9B44C 60%,var(--line))}
.mdk-btn:focus-visible,.mdk-ic:focus-visible,.mdk-chip:focus-visible{outline:2px solid #E9B44C;outline-offset:2px}
.mdk-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mdk-btn[data-act="play"] svg{fill:currentColor;stroke:none}
.mdk-btn.gold{background:#E9B44C;border-color:#E9B44C;color:#18130A}
.mdk-btn.gold:hover{background:#F1C365;border-color:#F1C365}
.mdk-btn.big{min-height:48px;padding:0 22px 0 18px;font-size:.95rem}
.mdk-btn.sm{min-height:34px;padding:0 12px;font-size:.8rem}
.mdk-btn.danger{background:color-mix(in srgb,var(--red,#F08A8A) 18%,var(--surface-2));border-color:color-mix(in srgb,var(--red,#F08A8A) 55%,transparent);color:var(--ink)}
.mdk-btn.danger:hover{background:color-mix(in srgb,var(--red,#F08A8A) 30%,var(--surface-2))}
/* toolbar */
.mdk-tools{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:24px 0 18px}
.mdk-tools[hidden]{display:none}
.mdk-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:2px}
.mdk-chips::-webkit-scrollbar{display:none}
.mdk-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 .86rem/1 var(--font);cursor:pointer;white-space:nowrap}
.mdk-chip b{font:600 .72rem/1 var(--mono);color:var(--faint,#737C8D)}
.mdk-chip:hover{color:var(--ink)}
.mdk-chip[aria-pressed="true"]{background:#E9B44C;border-color:#E9B44C;color:#18130A}
.mdk-chip[aria-pressed="true"] b{color:#4A3A12}
.mdk-tr{display:flex;align-items:center;gap:10px;flex:1 1 360px;justify-content:flex-end;min-width:0}
.mdk-search{position:relative;flex:1 1 220px;max-width:340px;min-width:0}
.mdk-search svg{position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.mdk-search input{width:100%;box-sizing:border-box;min-height:42px;padding:0 14px 0 38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .9rem/1 var(--font)}
.mdk-search input:focus{outline:none;border-color:#E9B44C}
.mdk-sort{display:flex;align-items:center;gap:8px;flex:none}
.mdk-sort span{font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mdk-sort select{min-height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .88rem/1 var(--font);cursor:pointer}
/* grid of decks */
.mdk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-bottom:48px}
.mdk{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.mdk:hover{border-color:color-mix(in srgb,#E9B44C 45%,var(--line));transform:translateY(-2px);box-shadow:0 22px 44px -26px rgba(0,0,0,.8)}
.mdk.flash{border-color:#E9B44C;box-shadow:0 0 0 3px rgba(233,180,76,.25)}
.mdk-cover{position:relative;display:block;aspect-ratio:16/10;background-color:#141C2E;background-repeat:no-repeat;background-size:134% auto;background-position:50% 40%}
.mdk-cover[data-full="1"]{background-size:cover;background-position:50% 25%}
.mdk-cover[data-none="1"]{background-image:radial-gradient(circle at 30% 20%,rgba(233,180,76,.18),transparent 60%),linear-gradient(135deg,#1B2539,#0D1322)}
.mdk-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,19,34,.45) 0,transparent 32%,transparent 62%,rgba(13,19,34,.7) 100%)}
.mdk-fmt{position:absolute;left:12px;top:12px;z-index:1;padding:6px 10px;border-radius:999px;background:#E9B44C;color:#18130A;font:700 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.mdk-st{position:absolute;right:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(13,19,34,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#F3EEE4;font:600 .72rem/1 var(--font)}
.mdk-st i{width:7px;height:7px;border-radius:50%;background:#A8AFBD}
.mdk-st.ok i{background:#6FD3A0}
.mdk-st.bad{color:#FFD7C2}
.mdk-st.bad i{background:#F2A065}
.mdk-st.wait{color:#A8AFBD}
.mdk-body{padding:14px 16px 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.mdk-name{margin:0;font:400 1.5rem/1.08 var(--serif);color:var(--ink);overflow-wrap:anywhere}
.mdk-counts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;font:500 .72rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mdk-counts b{color:var(--ink);font-weight:600;margin-right:3px}
.mdk-why{margin:2px 0 0;font-size:.8rem;line-height:1.35;color:#F2B08A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mdk-when{margin:auto 0 0;padding-top:4px;font-size:.78rem;color:var(--faint,#737C8D);min-height:1.2em}
.mdk-acts{display:flex;align-items:center;gap:8px;padding:12px 16px 16px}
.mdk-icons{margin:0 0 0 auto;display:flex;gap:2px}
.mdk-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:none;color:var(--muted);cursor:pointer}
.mdk-ic:hover{background:var(--surface-2);color:var(--ink)}
.mdk-ic.danger:hover{color:var(--red,#F08A8A)}
.mdk-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mdk-ren{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mdk-ren input{flex:1 1 160px;min-width:0;min-height:38px;padding:0 12px;border-radius:10px;border:1px solid #E9B44C;background:var(--surface-2);color:var(--ink);font:500 1rem/1 var(--font)}
.mdk-ren input:focus{outline:none;box-shadow:0 0 0 3px rgba(233,180,76,.25)}
/* empty states and the format picker */
.mdk-empty{margin:26px 0 48px}
.mdk-emptybox{padding:34px 28px;border:1px dashed color-mix(in srgb,#E9B44C 40%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--surface) 80%,transparent)}
.mdk-emptybox h2{font-size:clamp(1.8rem,4vw,2.4rem)}
.mdk-emptybox>p{max-width:56ch;margin:10px 0 22px}
.mdk-emptybox.small{text-align:center;padding:28px}
.mdk-emptybox.small p{margin:0 auto 14px}
.mdk-fgrp+.mdk-fgrp{margin-top:16px}
.mdk-fhead{display:block;margin-bottom:8px;font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mdk-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.mdk-ftile{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.mdk-ftile:hover,.mdk-ftile:focus-visible{border-color:#E9B44C;background:var(--surface-2);outline:none}
.mdk-ftile img{flex:none;width:46px;height:46px;border-radius:10px;object-fit:cover}
.mdk-ftile span{display:flex;flex-direction:column;gap:4px;min-width:0}
.mdk-ftile b{font:400 1.2rem/1 var(--serif)}
.mdk-ftile small{font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mdk-dlg{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box;padding:22px 22px 24px;border:1px solid color-mix(in srgb,#E9B44C 35%,var(--line));border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.mdk-dlg.small{width:min(420px,calc(100vw - 32px))}
.mdk-dlg::backdrop{background:rgba(5,8,16,.66);backdrop-filter:blur(3px)}
.mdk-dlg h2{font-size:1.9rem}
.mdk-dlg p{margin:10px 0}
.mdk-dhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mdk-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.mdk-drow{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.mdk-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:80;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;background:#F3EEE4;color:#141414;font:600 .88rem/1.3 var(--font);box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.mdk-toast[hidden]{display:none}
@media (max-width:620px){
  .mdk-head{padding-top:22px;align-items:center}
  .mdk-head .mdk-btn.big{min-height:44px;padding:0 16px 0 13px}
  .mdk-tools{margin:18px 0 14px}
  .mdk-tr{flex-basis:100%}
  .mdk-search{max-width:none}
  .mdk-sort span{display:none}
  .mdk-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  /* phones: a row per deck, the cover on the left */
  .mdk{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"cover body" "acts acts"}
  .mdk:hover{transform:none}
  .mdk-cover{grid-area:cover;aspect-ratio:auto;min-height:118px;background-size:180% auto;background-position:50% 32%}
  .mdk-fmt{left:8px;top:8px;padding:5px 7px;font-size:.58rem}
  .mdk-st{left:8px;right:auto;top:auto;bottom:8px;padding:4px 7px 4px 6px;font-size:.64rem}
  .mdk-body{grid-area:body;padding:12px 12px 6px}
  .mdk-name{font-size:1.25rem}
  .mdk-acts{grid-area:acts;padding:8px 10px 10px;border-top:1px solid var(--line)}
  .mdk-acts .mdk-btn{min-height:38px;padding:0 13px}
  .mdk-ic{width:36px;height:36px}
  .mdk-emptybox{padding:24px 16px}
  .mdk-fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mdk-ftile{padding:6px 8px 6px 6px;gap:8px}
  .mdk-ftile img{width:36px;height:36px}
  .mdk-ftile b{font-size:1rem}
  .mdk-dlg{padding:18px 16px 20px}
}
/* home: the row into My decks */
.homedecks{display:flex;align-items:center;gap:18px;margin:34px 0 8px;padding:14px 20px 14px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.homedecks:hover{border-color:color-mix(in srgb,#E9B44C 55%,var(--line));transform:translateY(-1px)}
.hd-art{flex:none;position:relative;width:96px;height:64px}
.hd-art img{position:absolute;top:4px;width:42px;height:58px;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.hd-art img:nth-child(1){left:0;transform:rotate(-9deg)}
.hd-art img:nth-child(2){left:26px;top:0;z-index:1}
.hd-art img:nth-child(3){left:52px;transform:rotate(9deg)}
.hd-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.hd-t .eyebrow{margin:0}
.hd-t b{font:400 1.7rem/1.05 var(--serif)}
.hd-t small{font-size:.88rem;color:var(--muted)}
.hd-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E9B44C;color:#18130A}
.hd-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:620px){.homedecks{gap:12px;padding:12px 14px 12px 10px}.hd-art{width:78px;height:56px}.hd-art img{width:36px;height:50px}.hd-art img:nth-child(2){left:21px}.hd-art img:nth-child(3){left:42px}.hd-t b{font-size:1.35rem}.hd-go{width:38px;height:38px}}
/* My decks: sync line wraps as text; 3 columns on desktop so every action fits */
.mdk-sync{display:block;line-height:1.5}
.mdk-sync .mdk-dot{display:inline-block;margin-right:8px;vertical-align:1px}
.mdk-sync .mdk-link{margin-left:4px}
.mdk-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rail-list .rail-pop.rp2[hidden]{display:none}

/* ---------- achievements on /friends (#achievements, public/assets/achievements.js renderGrid) ---------- */
.fach{scroll-margin-top:96px;margin:6px 0 22px;padding:18px 16px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#151C2E)}
.fach h2{margin:0;font-size:1.25rem}
.fach .ach-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fach .ach-count{font:600 .8rem/1 "JetBrains Mono",ui-monospace,monospace;color:var(--gold)}
.fach .ach-bar{height:6px;margin:12px 0 4px;border-radius:999px;background:var(--surface-2,#1B2539);overflow:hidden}
.fach .ach-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#B8811F,#E9B44C,#FFE3A0)}
.fach .ach-g{margin:18px 0 8px;font:700 .68rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.fach .ach-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.fach .ach-t{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg,#0D1322)}
.fach .ach-t::before{display:none}
.fach .ach-m{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--mHi),var(--mLo) 75%);box-shadow:0 0 0 2px rgba(255,255,255,.1) inset}
.fach .ach-m svg{width:22px;height:22px;fill:none;stroke:#1A1206;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fach .ach-x{display:flex;flex-direction:column;gap:2px;min-width:0}
.fach .ach-x b{font:500 1.02rem/1.2 var(--serif);color:var(--ink)}
.fach .ach-x small{font-size:.78rem;line-height:1.3;color:var(--muted)}
.fach .ach-d{font-style:normal;font:600 .64rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.fach .ach-t.bronze{--mHi:#F2C79B;--mLo:#A8693A}
.fach .ach-t.silver{--mHi:#F4F7FB;--mLo:#8F9AAB}
.fach .ach-t.gold{--mHi:#FFEDB5;--mLo:#B8811F}
.fach .ach-t.on{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.fach .ach-t.on .ach-d{color:var(--gold)}
.fach .ach-t:not(.on) .ach-m{filter:grayscale(1) brightness(.55);opacity:.7}
.fach .ach-t:not(.on) .ach-x b{color:var(--muted)}
.fach .ach-t.secret .ach-x b{font-style:italic}
.fach .ach-note{margin:14px 0 0;font-size:.8rem}
.prose .fach ul{padding:0}
@media (max-width:640px){.fach .ach-grid{grid-template-columns:1fr}}
/* push notifications card (/friends#notify, public/assets/push.js mountSettings) */
.fnotify .tg.sub{padding-left:18px}
.fnotify .tg.sub:has(input:disabled){opacity:.55;cursor:default}
.fnotify .tg input:disabled{cursor:default}
.fnotify .nt-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.fnotify .nt-row .fmsg{margin:0}
.fnotify{scroll-margin-top:130px}

/* home stories + trophy cabinet, aligned (Laith, 18 Oct 2026): two even columns of equal-height horizontal cards
   (portraits left, text right, badge on the same line every time), the cabinet as an even 5 x 2 grid */
.homepick .stgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px}
.homepick .stgrid .stcard{flex-direction:row;align-items:center;gap:16px;padding:16px 18px;height:100%}
.homepick .stgrid .stc-pics{width:132px;justify-content:flex-start;overflow:hidden}
.homepick .stgrid .stc-pics img{width:44px;height:44px;margin-left:-16px}
.homepick .stgrid .stc-pics img:first-child{margin-left:0}
.homepick .stgrid .stc-pics img:nth-child(n+5){display:none}
.homepick .stgrid .stc-txt{gap:4px}
.homepick .stgrid .stc-txt b{font-size:1.3rem}
.homepick .stgrid .stc-txt .ln{font-size:.86rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.homepick .stgrid .stc-badge,.homepick .stgrid .stc-prog{margin-top:6px}
.homepick .stgrid .stc-go{display:none}
.trophybar .tb-row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:18px}
.trophybar .tb-cup b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:150px}
.trophybar .tb-cup{justify-content:flex-start}
@media (max-width:860px){.homepick .stgrid{grid-template-columns:1fr;grid-auto-rows:auto}.trophybar .tb-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.homepick .stgrid .stc-pics{width:100px}.homepick .stgrid .stc-pics img{width:36px;height:36px;margin-left:-13px}.homepick .stgrid .stc-txt b{font-size:1.15rem}}

/* Critter (18 Oct 2026): five retro formats and eleven trophies. Retro row: five across on desktop; narrower screens
   put two wide tiles over three (a 6 column grid), so no tile is left alone on a row. Trophy cabinet: centred rows of
   six (6 + 5), three on tablets and phones (3 + 3 + 3 + 2), instead of 5 + 5 + 1. */
.pick4.retro4{grid-template-columns:repeat(5,minmax(0,1fr))}
.pick4.retro4 .ftile.sm b{font-size:1.5rem}
@media (max-width:960px){.pick4.retro4{grid-template-columns:repeat(6,minmax(0,1fr))}.pick4.retro4>.ftile{grid-column:span 2}.pick4.retro4>.ftile:nth-child(-n+2){grid-column:span 3}}
@media (max-width:560px){.pick4.retro4 .ftile.sm b{font-size:1.1rem}}
.trophybar .tb-row{display:flex;flex-wrap:wrap;justify-content:center;column-gap:10px}
.trophybar .tb-row>.tb-cup{flex:0 0 calc((100% - 50px) / 6);min-width:0}
@media (max-width:860px){.trophybar .tb-row>.tb-cup{flex-basis:calc((100% - 20px) / 3)}}
.homepick .stgrid .stcard:last-child:nth-child(odd){grid-column:1/-1} /* 11 stories: the last one spans both columns */

/* TeleDAD + Synchro Cat (19 Oct 2026): seven retro formats and thirteen trophies. Retro row: 4 over 3 on desktop (a 12
   column grid, every row full width), 2 + 2 + 3 on narrower screens. Trophy cabinet: centred rows of seven (7 + 6) on
   desktop; under 860px a 12 column grid, 3 per row then the last 4 two by two (3 + 3 + 3 + 2 + 2), so no cup sits alone
   and the long SJC / YCS names keep room for two lines. */
.pick4.retro4{grid-template-columns:repeat(12,minmax(0,1fr))}
.pick4.retro4>.ftile{grid-column:span 3}
.pick4.retro4>.ftile:nth-child(n+5){grid-column:span 4}
@media (max-width:960px){.pick4.retro4{grid-template-columns:repeat(6,minmax(0,1fr))}.pick4.retro4>.ftile,.pick4.retro4>.ftile:nth-child(-n+2){grid-column:span 3}.pick4.retro4>.ftile:nth-child(n+5){grid-column:span 2}}
.trophybar .tb-row>.tb-cup{flex-basis:calc((100% - 60px) / 7)}
@media (max-width:860px){.trophybar .tb-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.trophybar .tb-row>.tb-cup{grid-column:span 4}.trophybar .tb-row>.tb-cup:nth-child(n+10){grid-column:span 6}}

/* Survival cards (format pages under the stories, home under Play a story): a red shield, same card as a story */
.svcard{border-color:color-mix(in srgb,#E5484D 40%,var(--line))}
.svcard:hover{border-color:#E5484D}
.sv-ico{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3A1416,#160A0B 70%);box-shadow:0 0 0 2px color-mix(in srgb,#E5484D 55%,transparent),0 0 24px -4px rgba(229,72,77,.55)}
.sv-ico svg{width:30px;height:30px;fill:none;stroke:#F07C80;stroke-width:1.6;stroke-linejoin:round}
.sv-ico svg path:last-child{fill:#E5484D;stroke:none}
.svcard .stc-txt .eyebrow{color:#F07C80}
.svcard .sv-best{color:#F07C80}
.homepick .svhome{flex-direction:row;align-items:center;margin-top:4px}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.sv-chips a{display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:600 .82rem/1 var(--font)}
.sv-chips a:hover{border-color:#E5484D}
.sv-chips small{font:600 .68rem/1 var(--font);color:#F07C80}
@media (max-width:640px){.sv-ico{width:48px;height:48px}.sv-ico svg{width:24px;height:24px}}
.homepick .homesurvival{margin-top:44px}
/* Survival cards: a light touch of the "Last stand" look (ember to gold wash, slanted life bar under the title) */
.svcard{background:linear-gradient(115deg,color-mix(in srgb,#F0503C 9%,var(--surface)),var(--surface) 62%)}
.svcard .stc-txt b{position:relative}
.svcard .stc-txt b::after{content:"";display:block;width:64px;height:5px;margin-top:8px;transform:skewX(-16deg);background:linear-gradient(90deg,#E9B44C,#F0503C)}

/* ================= redesign (23 Oct 2026): header Play / Decks / Learn, home A, format page stage C ================= */
/* header: the three links in the middle on desktop; phones keep them on their own row under the wordmark */
.sitebar .brand{margin-right:0}
.sitebar .fnav{margin:0 auto;gap:4px}
.sitebar .fnav a{padding:0 18px;font-size:.95rem}
@media (max-width:760px){.sitebar .fnav{margin:0 -16px;justify-content:center}.sitebar .brand{margin-right:auto}}

/* home: section heads, the four big format tiles, the retro row, the ways to play */
.homepick{padding-top:44px}
.hp-sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:40px 0 16px}
.hp-sh:first-child{margin-top:0}
.hp-sh h2{font:400 clamp(1.6rem,3.4vw,2.1rem)/1 var(--serif);letter-spacing:-.01em}
.hp-sh a{color:var(--gold);font:500 .9rem/1 var(--font);white-space:nowrap}
.hp-sh a:hover{text-decoration:underline}
.hp-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hp-retro{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px} /* 9 retro formats since 25 Oct 2026 (Lightsworn, Trishula) */
.hp-retrolab{margin:22px 0 12px}
.hp-ft{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#141C2E;color:#F3EEE4;box-shadow:0 24px 50px -30px rgba(0,0,0,.6);isolation:isolate;transition:transform .25s}
.hp-ft:hover{transform:translateY(-3px)}
.hp-ft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:-2;transition:transform .5s}
.hp-ft:hover img{transform:scale(1.04)}
.hp-ft::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(8,11,22,.92))}
.hp-ft .t{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.hp-ft b{font:400 1.6rem/1 var(--serif);letter-spacing:-.01em}
.hp-ft small{font:500 .66rem/1 var(--mono);letter-spacing:.1em;color:#E9B45A;padding:5px 7px;border:1px solid rgba(233,180,90,.4);border-radius:6px;background:rgba(0,0,0,.35);white-space:nowrap}
.hp-retro .hp-ft{aspect-ratio:1/1;border-radius:14px}
.hp-retro .hp-ft .t{left:8px;right:8px;bottom:10px;flex-direction:column;align-items:flex-start;gap:6px}
.hp-retro .hp-ft b{font-size:.9rem;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.hp-retro .hp-ft b{font-size:.98rem}}
.hp-retro .hp-ft small{font-size:.58rem;padding:4px 6px}
.hp-modes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hp-mt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:border-color .2s,transform .2s}
.hp-mt:hover{border-color:var(--gold);transform:translateY(-2px)}
.hp-mt .mi{flex:none;width:52px;height:52px;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.hp-mt .mi img{width:100%;height:100%;object-fit:cover;display:block}
.hp-mt .tx{min-width:0;flex:1}
.hp-mt b{display:block;font:600 1rem/1.25 var(--font)}
.hp-mt .tx>span{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.hp-mt.trophy .mi{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.hp-mt.trophy .mi svg{width:34px;height:34px}
.hp-mt .tx .hp-bar{display:block;height:5px;border-radius:9px;background:var(--surface-2);margin-top:7px;overflow:hidden}
.hp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#F6CD6B,#D4962A)}
@media (max-width:1000px){.hp-modes{grid-template-columns:repeat(3,minmax(0,1fr))}.hp-retro{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:700px){
  .homepick{padding-top:30px}
  .hp-sh{margin:32px 0 12px}
  .hp-main{grid-template-columns:1fr 1fr;gap:10px}
  .hp-ft b{font-size:1.25rem}.hp-ft .t{left:10px;right:10px;bottom:10px}
  /* phones: the retro tiles are one swipe row */
  .hp-retro{display:flex;overflow-x:auto;gap:10px;margin:0 -20px;padding:0 20px;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none}
  .hp-retro::-webkit-scrollbar{display:none}
  .hp-retro .hp-ft{flex:0 0 112px;scroll-snap-align:start}
  .hp-retro .hp-ft b{font-size:.95rem}
  .hp-modes{grid-template-columns:1fr 1fr;gap:10px}
  .hp-mt{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .hp-mt .mi{width:40px;height:40px;border-radius:11px}
  .hp-mt.trophy{grid-column:1/-1;flex-direction:row;align-items:center}
}
@media (prefers-reduced-motion:reduce){.hp-ft,.hp-ft img,.hp-mt{transition:none}}

/* format pages: the stage (full-bleed art on the right, dark in both themes), Play + mode chips, the format strip */
.fstage{position:relative;display:flex;flex-direction:column;min-height:clamp(560px,calc(100svh - 110px),860px);overflow:hidden;background:#070A14;color:#F3EEE4;isolation:isolate}
.fs-art{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:-1;background-size:cover;background-position:center 30%}
.fs-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#070A14 0%,rgba(7,10,20,.7) 28%,rgba(7,10,20,0) 60%),linear-gradient(0deg,#070A14 2%,rgba(7,10,20,.3) 38%,rgba(7,10,20,0) 60%),linear-gradient(180deg,rgba(7,10,20,.6),transparent 22%)}
.fstage::before{content:"";position:absolute;left:-10%;top:20%;width:60%;height:70%;z-index:-1;background:radial-gradient(closest-side,rgba(233,180,90,.12),transparent);pointer-events:none}
.fs-in{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;padding-top:48px;padding-bottom:24px}
.fs-eye{font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#E9B45A}
.fstage h1{font:500 clamp(4rem,10vw,9.5rem)/.88 var(--serif);letter-spacing:-.03em;margin:18px 0;color:#F3EEE4;white-space:nowrap}
.fs-line{font-size:1.12rem;color:rgba(243,238,228,.8);max-width:34ch;margin:0}
.fs-play{display:inline-flex;align-items:center;gap:12px;height:66px;padding:0 40px;margin-top:30px;border-radius:999px;background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1A1306;font:600 1.22rem/1 var(--font);box-shadow:0 10px 30px -10px rgba(233,180,90,.55);transition:transform .2s,filter .2s}
.fs-play:hover{transform:translateY(-2px);filter:brightness(1.05)}
.fs-play svg{width:22px;height:22px;fill:currentColor}
.fs-play small{font:500 .8rem/1 var(--font);opacity:.7;margin-left:2px}
.fs-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fs-modes button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,28,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:rgba(243,238,228,.8);font:500 .9rem/1 var(--font);cursor:pointer;white-space:nowrap}
.fs-modes button:hover{border-color:rgba(233,180,90,.6);color:#F3EEE4}
.fs-modes button[aria-pressed="true"]{background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1A1306;border-color:transparent;font-weight:600}
.fs-modes svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fs-strip{display:flex;gap:12px;width:100%;overflow-x:auto;padding-top:16px;padding-bottom:26px;scrollbar-width:none}
.fs-strip::-webkit-scrollbar{display:none}
.fs-strip a{flex:0 0 92px;text-align:center;color:#F3EEE4;opacity:.62;transition:opacity .2s,transform .2s}
.fs-strip a:hover{opacity:1}
.fs-strip .im{display:block;height:116px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px -12px #000}
.fs-strip img{width:100%;height:100%;object-fit:cover;display:block}
.fs-strip b{display:block;font:600 .78rem/1.2 var(--font);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-strip small{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.1em;color:#8A93A8;margin-top:3px}
.fs-strip a[aria-current="page"]{opacity:1;transform:translateY(-8px)}
.fs-strip a[aria-current="page"] .im{border:2px solid #E9B45A;box-shadow:0 0 0 4px rgba(233,180,90,.18),0 18px 30px -12px #000}
.fs-strip a[aria-current="page"] small{color:#E9B45A}
.fs-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:26px}
.fs-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 .92rem/1 var(--font)}
.fs-links a:hover{border-color:var(--gold)}
.fs-links svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fpage .rt-about{padding-top:26px}
.fpage .foot{margin-top:40px}
@media (max-width:700px){
  .fstage{min-height:calc(100svh - 120px)}
  .fs-art{width:100%;height:62%;bottom:auto}
  .fs-art::after{background:linear-gradient(0deg,#070A14 4%,rgba(7,10,20,.55) 40%,rgba(7,10,20,0) 70%),linear-gradient(180deg,rgba(7,10,20,.6),transparent 28%)}
  .fs-in{justify-content:flex-end;padding-top:150px}
  .fstage h1{font-size:clamp(3rem,18vw,5.4rem);margin:12px 0 10px;white-space:normal}
  .fs-line{font-size:1rem}
  .fs-play{width:100%;justify-content:center;height:60px;margin-top:20px}
  .fs-modes{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 40px);margin:14px -20px 0;padding:0 20px;scrollbar-width:none}
  .fs-modes::-webkit-scrollbar{display:none}
  .fs-modes button{flex:none}
  .fs-strip{padding-bottom:18px}
  .fs-strip a{flex-basis:72px}.fs-strip .im{height:92px}
  .fs-links{gap:8px;padding-top:20px}
  .fs-links a{min-height:40px;padding:0 14px;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){.fs-play,.fs-strip a{transition:none}}
/* format pages: the online strip floats over the stage (elsewhere it takes a row under the header) */
body.fpage .online-rail{position:absolute;top:calc(var(--fpH,34px) + 92px);right:14px;margin:0}
@media (max-width:760px){body.fpage .online-rail{top:calc(var(--fpH,34px) + 112px);right:10px}}

/* ---------- format switch animation (24 Oct 2026): picking another format in the stage strip slides between the
   pages instead of a plain reload (cross-document View Transitions; the strip and header stay put, the art
   cross-fades and zooms in, the name and buttons slide in). Browsers without support just load the page. */
@view-transition{navigation:auto}
.fpage .fs-art{view-transition-name:fs-art}
.fpage .fs-in{view-transition-name:fs-text}
.fpage .fs-strip{view-transition-name:fs-strip}
.fpage header.top{view-transition-name:site-head}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
::view-transition-old(fs-art){animation:.35s ease both fsOut}
::view-transition-new(fs-art){animation:.55s cubic-bezier(.2,.7,.2,1) both fsArtIn}
::view-transition-old(fs-text){animation:.18s ease both fsTextOut}
::view-transition-new(fs-text){animation:.42s .1s cubic-bezier(.2,.7,.2,1) both fsTextIn}
::view-transition-old(fs-strip),::view-transition-old(site-head){display:none}
::view-transition-new(fs-strip),::view-transition-new(site-head){animation:none}
@keyframes fsOut{to{opacity:0}}
@keyframes fsArtIn{from{opacity:0;transform:scale(1.06)}}
@keyframes fsTextOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes fsTextIn{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ================= learn pages (24 Oct 2026): every /<format>/learn = dark art band + strip of every format's learn page,
   "Learn a deck" (deck tiles by tier, a guide dialog per deck), then the format's own lessons ("More to learn").
   The band reuses the format stage's .fs-art / .fs-in / .fs-eye / .fs-strip, with the same view-transition names. ================= */
.lstage{position:relative;display:flex;flex-direction:column;min-height:clamp(400px,54svh,540px);overflow:hidden;background:#070A14;color:#F3EEE4;isolation:isolate}
.lstage::before{content:"";position:absolute;left:-10%;top:10%;width:60%;height:80%;z-index:-1;background:radial-gradient(closest-side,rgba(233,180,90,.12),transparent);pointer-events:none}
.lstage .fs-art{width:58%}
.lstage .fs-in{padding-top:52px;padding-bottom:10px}
.lstage h1{font:500 clamp(3.2rem,7.4vw,6.4rem)/.9 var(--serif);letter-spacing:-.03em;margin:14px 0 12px;color:#F3EEE4}
.lstage .fs-strip a{flex-basis:84px}
.lstage .fs-strip .im{height:104px}
.lpage .fs-art{view-transition-name:fs-art}
.lpage .fs-in{view-transition-name:fs-text}
.lpage .fs-strip{view-transition-name:fs-strip}
.lpage header.top{view-transition-name:site-head}
body.lpage .online-rail{position:absolute;top:calc(var(--fpH,34px) + 92px);right:14px;margin:0}
.lpage .foot{margin-top:48px}
/* the deck section */
.lg-sec{padding-top:40px}
.lg-sec>h2,.lg-more>h2{font:400 clamp(1.8rem,3.6vw,2.4rem)/1 var(--serif);letter-spacing:-.01em;margin:0}
.lg-tier{margin-top:24px}
.lg-tier>h3{font:500 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.lg-tile{display:block;min-width:0;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);color:var(--ink);transition:transform .2s,border-color .2s}
.lg-tile:hover{transform:translateY(-3px);border-color:var(--gold)}
.lg-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lg-art{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#141C2E}
.lg-art img{position:absolute;display:block;max-width:none}
.lg-art img.fu{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.lg-art img.cp{left:-18%;width:136%;height:auto;top:50%;transform:translateY(-45%)}
.lg-t{display:block;padding:10px 12px 12px}
.lg-t b{display:block;font:400 1.14rem/1.15 var(--serif);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px;font-size:.78rem;line-height:1.2;color:var(--muted)}
.lg-meta .df::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--gold)}
.lg-meta .df[data-d="Easy"]::before{background:#4FBF7A}
.lg-meta .df[data-d="Hard"]::before{background:#E06A5A}
/* the guide dialog (a bottom sheet on phones) */
.lg-dlg{width:min(580px,calc(100vw - 32px));max-width:none;max-height:min(88svh,780px);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.75);overflow:auto;overscroll-behavior:contain}
.lg-dlg:focus{outline:none}
.lg-dlg::backdrop{background:rgba(5,7,14,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lg-dlg[open]{animation:lgIn .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes lgIn{from{opacity:0;transform:translateY(14px)}}
.lg-dhead{position:relative;display:flex;align-items:flex-end;min-height:180px;padding:18px 20px;color:#F3EEE4;background:#070A14;isolation:isolate;overflow:hidden}
.lg-dhead .lg-art{position:absolute;inset:0;aspect-ratio:auto;z-index:-2}
.lg-dhead .lg-art img.cp{top:42%}
.lg-dhead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(7,10,20,.94) 8%,rgba(7,10,20,.35) 60%,rgba(7,10,20,.15))}
.lg-dt{min-width:0;padding-right:44px}
.lg-dhead h3{font:400 clamp(1.7rem,5vw,2.2rem)/1.02 var(--serif);letter-spacing:-.01em;margin:8px 0 8px;color:#fff}
.lg-dhead .lg-meta{color:rgba(243,238,228,.8)}
.lg-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.5);color:#fff;font:400 1.5rem/1 var(--font);cursor:pointer;display:grid;place-items:center}
.lg-x:hover{border-color:#E9B45A}
.lg-body{padding:18px 20px 4px}
.lg-body h4{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:18px 0 8px}
.lg-body h4:first-child{margin-top:0}
.lg-body p{margin:0;line-height:1.55}
.lg-keys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.lg-keys li{min-width:0;font-size:.76rem;line-height:1.25;text-align:center;color:var(--muted)}
.lg-keys img,.lg-keys .noimg{display:block;width:100%;aspect-ratio:59/86;object-fit:cover;border-radius:6px;margin-bottom:6px;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.lg-keys .noimg{background:#141C2E url('/img/back.jpg') center/cover}
.lg-acts{display:flex;flex-wrap:wrap;gap:10px;padding:18px 20px 20px}
.lg-play,.lg-build{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:999px;font:600 .98rem/1.1 var(--font)}
.lg-play{background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1A1306;box-shadow:0 10px 26px -12px rgba(233,180,90,.6)}
.lg-play:hover{filter:brightness(1.05)}
.lg-play svg{width:18px;height:18px;fill:currentColor}
.lg-build{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:500}
.lg-build:hover{border-color:var(--gold)}
.lg-build svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* a deck's lessons (Genesys / Advanced): a badge on the tile, the Combos / Duels / Puzzles / Cards row in the dialog (25 Oct 2026) */
.lg-badge{position:absolute;top:8px;left:8px;z-index:1;padding:4px 8px;border-radius:999px;background:rgba(7,10,20,.78);border:1px solid rgba(233,180,90,.55);color:#F6CD6B;font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.lg-les{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lg-l{display:flex;align-items:center;gap:10px;min-width:0;min-height:56px;padding:6px 10px 6px 6px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);transition:border-color .2s}
.lg-l:hover{border-color:var(--gold)}
.lg-l:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lg-l img{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;display:block}
.lg-l span{min-width:0}
.lg-l b{display:block;font:400 1.08rem/1.1 var(--serif)}
.lg-l small{display:block;margin-top:2px;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the format's own lessons under the decks */
.lg-more{padding-top:44px}
.lg-more>p{margin:8px 0 0}
.lg-more .lessons{margin-top:18px}
.lg-more .tilesets{margin-top:18px}
.lg-more .edjump{margin-top:16px}
.lg-ed>.section:first-of-type{margin-top:28px}
@media (max-width:700px){
  .lstage{min-height:auto}
  .lstage .fs-art{width:100%;height:72%;bottom:auto}
  .lstage .fs-art::after{background:linear-gradient(0deg,#070A14 6%,rgba(7,10,20,.7) 45%,rgba(7,10,20,.15) 85%),linear-gradient(180deg,rgba(7,10,20,.6),transparent 30%)}
  .lstage .fs-in{padding-top:150px}
  .lstage h1{font-size:clamp(2.8rem,15vw,4.4rem);margin:10px 0 8px}
  .lstage .fs-strip{padding-bottom:18px}
  .lstage .fs-strip a{flex-basis:72px}.lstage .fs-strip .im{height:88px}
  body.lpage .online-rail{top:calc(var(--fpH,34px) + 112px);right:10px}
  .lg-sec{padding-top:30px}
  .lg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lg-t{padding:8px 10px 10px}
  .lg-t b{font-size:1rem}
  .lg-meta{font-size:.72rem;gap:3px 8px}
  .lg-dlg{width:100%;max-height:92svh;margin:auto 0 0;border-radius:20px 20px 0 0;border-bottom:0}
  .lg-dhead{min-height:150px}
  .lg-keys{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg-acts{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .lg-acts a{flex:1 1 100%}
  .lg-badge{top:6px;left:6px;padding:3px 7px;font-size:.58rem}
  .lg-more{padding-top:34px}
}
@media (prefers-reduced-motion:reduce){.lg-tile{transition:none}.lg-dlg[open]{animation:none}}
/* /formats (25 Oct 2026): the header's Play; the home's format picker under a page head (eyebrow Play, h1) */
.fpage .homepick{padding-top:48px}
.fp-head{align-items:flex-end}
.fp-head h1{font:400 clamp(2.4rem,6vw,3.8rem)/1 var(--serif);letter-spacing:-.02em;margin:10px 0 0}
@media (max-width:560px){.fpage .homepick{padding-top:28px}.fp-head{flex-wrap:wrap;gap:10px}}

/* ================= Wild Card (admin preview, 26 Oct 2026): home banner #hpWild + /wildcard (assets/wildcard-page.js) ================= */
.hp-wild{position:relative;display:flex;align-items:center;min-height:190px;margin:26px 0 6px;padding:24px 28px;border-radius:22px;border:1px solid rgba(233,180,90,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(233,180,90,.16),transparent 55%),#0E0C10;box-shadow:var(--shadow);overflow:hidden;color:var(--ink);isolation:isolate;transition:transform .25s,box-shadow .25s,border-color .25s}
.hp-wild:hover{transform:translateY(-2px);border-color:#E9B45A;box-shadow:0 26px 50px -22px rgba(233,180,90,.45)}
.hp-wild:hover .hw-bg{transform:scale(1.05)}
.hw-bg{position:absolute;inset:0 0 0 38%;z-index:-1;background:#111 center 28%/cover;-webkit-mask:linear-gradient(90deg,transparent,#000 55%);mask:linear-gradient(90deg,transparent,#000 55%);opacity:.9;transition:transform .6s ease}
.hp-wild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0E0C10 30%,rgba(14,12,16,.55) 62%,rgba(14,12,16,.1));pointer-events:none}
.hw-tx{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;max-width:600px}
.hw-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hw-tag{font:600 .7rem/1 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hw-chip{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid rgba(233,180,90,.35);background:rgba(233,180,90,.08);font-size:.76rem;color:#F1D9A6}
.hw-tx b{font:500 2.4rem/1.02 var(--serif);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hw-line{color:#C9C3CF;font-size:1rem;line-height:1.45}
.hw-foot{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:.82rem;color:var(--muted)}
.hw-foot .btn{height:42px;padding:0 26px}
.hw-pips{display:flex;gap:5px}
.hw-pips i{width:14px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.hw-pips i.on{background:linear-gradient(135deg,#F6CD6B,#D4962A);border-color:transparent;box-shadow:0 0 10px rgba(233,180,90,.5)}
@media (max-width:640px){.hp-wild{min-height:0;padding:20px 18px}.hw-bg{inset:0;opacity:.35;-webkit-mask:none;mask:none}.hp-wild::after{background:linear-gradient(180deg,rgba(14,12,16,.5),#0E0C10 85%)}.hw-tx b{font-size:1.8rem}.hw-foot{width:100%}.hw-foot small{margin-left:auto}}
.wc-app{padding:26px 0 56px}
.wc-head h1 em{font-style:italic;background:linear-gradient(135deg,#F6CD6B,#D4962A);-webkit-background-clip:text;background-clip:text;color:transparent}
.wc-now{position:relative;display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:28px;align-items:center;margin:22px 0 10px;padding:22px;border-radius:24px;border:1px solid #D4962A;background:linear-gradient(120deg,rgba(233,180,90,.16),rgba(233,180,90,.02) 60%),var(--surface);box-shadow:var(--shadow);overflow:hidden}
.wc-art{aspect-ratio:1;border-radius:18px;background:#111 center 30%/cover;box-shadow:0 0 0 2px rgba(233,180,90,.55),0 24px 50px -20px rgba(0,0,0,.8);transform:rotate(-3deg)}
.wc-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wc-body h2{font-size:3rem}
.wc-body p{font-size:1.1rem;color:var(--muted)}
.wc-facts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px;padding:0;list-style:none}
.wc-facts li{height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:.82rem;color:var(--muted)}
.wc-prog{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--muted);margin-bottom:6px}
.wc-pips{display:flex;gap:6px}
.wc-pips i{width:22px;height:30px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.wc-pips i.on{background:linear-gradient(135deg,#F6CD6B,#D4962A);border-color:transparent;box-shadow:0 0 14px rgba(233,180,90,.5)}
.wc-now.done .wc-prog{color:var(--gold)}
.wc-h2{font-size:1.6rem;margin:38px 0 6px}
.wc-sub{margin:0 0 4px;font-size:.9rem}
.wc-sub{margin:0 0 4px;font-size:.9rem}
.wc-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.wc-card{display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.wc-card:hover{border-color:#D4962A;transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(233,180,90,.45)}
.wc-cart{position:relative;aspect-ratio:16/10;background:#111 center 28%/cover}
.wc-cart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--surface))}
.wc-cfmt{position:absolute;left:12px;top:12px;z-index:1;height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:rgba(14,12,16,.75);border:1px solid rgba(233,180,90,.45);font-size:.74rem;color:#F1D9A6;backdrop-filter:blur(4px)}
.wc-ctx{display:flex;flex-direction:column;gap:6px;padding:4px 16px 16px;flex:1}
.wc-ctx b{font:500 1.3rem/1.1 var(--serif)}
.wc-ctx>span:not(.eyebrow){font-size:.86rem;color:var(--muted);line-height:1.45;flex:1}
@media (max-width:1000px){.wc-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.wc-more{grid-template-columns:1fr}}
@media (max-width:720px){.wc-now{grid-template-columns:1fr;padding:16px;gap:18px}.wc-art{max-width:200px}.wc-body h2{font-size:2.2rem}.wc-body .btn{width:100%}}
.wc-play,.hw-foot .btn{background:linear-gradient(135deg,#F6CD6B,#D4962A);color:#1A1306;box-shadow:0 10px 26px -10px rgba(233,180,90,.55)}
/* admin: Most played formats chart (admin.js fmtChart) */
.afc-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:.8rem;color:var(--muted)}
.afc-key span{display:inline-flex;align-items:center;gap:6px}
.afc-key i{width:12px;height:12px;border-radius:3px;display:inline-block}
.afcs{display:flex;flex-direction:column;gap:8px}
.afc{display:grid;grid-template-columns:120px 1fr 64px 44px;align-items:center;gap:12px;font-size:.88rem}
.afc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afc-t{display:flex;height:22px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.afc-t i{display:block;height:100%}
.afc-cpu{background:linear-gradient(90deg,#D4962A,#F6CD6B)}
.afc-on{background:linear-gradient(90deg,#3E7BD6,#6FA8F0)}
.afc b{text-align:right;font-variant-numeric:tabular-nums}
.afc small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:560px){.afc{grid-template-columns:88px 1fr 48px;gap:8px}.afc small{display:none}}
/* iPhone zooms the page in when a text box under 16px gets focus, and stays zoomed (the room link box did it, 28 Oct 2026): every box is 16px on touch screens */
@media (pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}}

/* polish pass 29 Oct 2026 */
/* deck tiles: whole words, smaller on narrow tiles ("Sacred Beasts" broke as "Sacre d Beast s") */
.decktile .dt-name{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:520px){.decktile{container-type:inline-size}.decktile .dt-name{left:6px;right:6px;bottom:8px;font-size:min(.84rem,14.5cqw);line-height:1.05;letter-spacing:0}}
/* phones: the header already has Sign in; the signed-out "who is online" button was a second identical person icon */
@media (max-width:760px){.online-rail:has(.rail-in){display:none}}
/* play pages on phones: a little air between the wordmark and the back button */
@media (max-width:420px){.top.playbar .brand span{font-size:1.05rem}.top.playbar .wrap{gap:8px}}
/* ================= admin dashboard v6 (29 Oct 2026, assets/admin.js): KPI tabs + one line chart, tabbed cards, small charts ================= */
.adminpage .alivebox{gap:0;padding:4px;border-radius:999px}
.alv2{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font:500 .76rem/1 var(--font);color:var(--muted);white-space:nowrap}
.alv2+.alv2{border-left:1px solid var(--line)}
.alv2 b{font:650 .95rem/1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.anav2{position:sticky;top:calc(var(--hdr-h,64px) - 1px);z-index:20;margin:0 -4px;padding:10px 4px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#anav{display:contents}
.asec{margin-top:28px}
.asec-h{margin-bottom:12px;padding-bottom:0;border-bottom:0}
.asec-h h2{font-size:1.5rem}
.agrid2,.agrid3{align-items:stretch}
.acard2{border-radius:16px}
.amain{padding:0;overflow:hidden}
.akt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line)}
.akt-b{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:14px 16px 12px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.akt-b+.akt-b{border-left:1px solid var(--line)}
.akt-b>span:first-child{font:600 .64rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.akt-b>b{font:650 1.6rem/1 var(--font);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.akt-d{min-height:18px}
.akt-d i{font:700 .66rem/1 var(--font);font-style:normal;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--muted)}
.akt-d i.up{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}.akt-d i.down{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.aspark{width:100%;height:22px;overflow:visible}
.aspark polyline{fill:none;stroke:var(--faint);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.akt-b[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.akt-b[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.akt-b[aria-selected="true"] .aspark polyline{stroke:var(--accent)}
.akt-b:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 4%,transparent)}
.akt-b[aria-selected="true"]:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.akt-b:disabled{opacity:.45;cursor:not-allowed}
.akt-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.achart2{padding:16px 18px 14px}
.achead{gap:6px 18px;margin-bottom:14px;font-size:.82rem;color:var(--muted)}
.achead b{font:650 .95rem/1 var(--font);color:var(--ink)}
.achead-x:empty{display:none}
.alc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:220px auto;column-gap:10px}
.alc-y{position:relative;width:34px}
.alc-y span{position:absolute;right:0;transform:translateY(50%);font:500 .68rem/1 var(--font);color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.alc-p{position:relative;touch-action:pan-y}
.alc-p svg{display:block;width:100%;height:100%;overflow:visible}
.alc-g{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 4}.alc-g.base{stroke-dasharray:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent)}
.alc-a{fill:color-mix(in srgb,var(--accent) 13%,transparent)}
.alc-l{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.alc-x{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--ink) 30%,transparent);pointer-events:none}
.alc-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface);pointer-events:none}
.alc-xl{grid-column:2;position:relative;height:22px}
.alc-xl span{position:absolute;top:8px;transform:translateX(-50%);font:500 .68rem/1 var(--font);color:var(--faint);white-space:nowrap}
.alc-xl span:first-child{transform:none}.alc-xl span:last-child{transform:translateX(-100%)}
.alc .atip,.acols .atip{position:absolute;top:-6px;z-index:3;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 .76rem/1.2 var(--font);white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.alc .atip[hidden],.acols .atip[hidden]{display:none}
.alc .atip b,.acols .atip b{font-size:1rem}.alc .atip small,.acols .atip small{opacity:.75;font-size:.7rem}
.atotals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.atotals>div{display:flex;flex-direction:column;gap:3px;padding:12px 16px;min-width:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.atotals span{font:600 .62rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.atotals b{font:650 1.2rem/1.1 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.atotals small{font-size:.72rem;color:var(--muted)}
.atabbed .acard2-h{align-items:center;flex-wrap:wrap}
.actabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2)}
.actabs button{border:0;background:none;padding:6px 11px;border-radius:999px;font:600 .74rem/1 var(--font);color:var(--muted);cursor:pointer;white-space:nowrap}
.actabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.actab-p[hidden]{display:none}
.astack100{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;margin:4px 0 14px}
.astack100 i{display:block;min-width:3px}
.astack100 .c1,.alegend .c1{background:var(--accent)}.astack100 .c2,.alegend .c2{background:var(--gold)}.astack100 .c3,.alegend .c3{background:var(--faint)}
.alegend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alegend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:10px;font-size:.84rem}
.alegend li i{width:10px;height:10px;border-radius:3px}
.alegend b{font-variant-numeric:tabular-nums}.alegend small{min-width:44px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.amtrs{display:flex;flex-direction:column;gap:12px}
.amtr{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:5px;font-size:.84rem}
.amtr>b{font-variant-numeric:tabular-nums}
.amtr>i{grid-column:1/-1;display:block;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.amtr>i em{display:block;height:100%;border-radius:4px;background:var(--accent)}
.amtr>small{grid-column:1/-1;font-size:.72rem;color:var(--muted)}
.acols{position:relative;display:flex;align-items:flex-end;gap:2px;height:120px;border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent);touch-action:pan-y}
.acol{flex:1;height:100%;display:flex;align-items:flex-end}
.acol i{display:block;width:100%;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--gold) 70%,transparent)}
.acol.on i{background:var(--gold)}
.acols-x{display:flex;justify-content:space-between;margin-top:6px;font:500 .68rem/1 var(--font);color:var(--faint)}
.adminpage .ahead h1{font-size:clamp(2rem,4vw,2.6rem)}.adminpage .pagehead{padding-top:18px}
@media (max-width:980px){.akt{grid-template-columns:repeat(3,minmax(0,1fr))}.akt-b:nth-child(4){border-left:0}.akt-b:nth-child(n+4){border-top:1px solid var(--line)}.agrid3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .agrid2,.agrid2.wide-left,.agrid3{grid-template-columns:minmax(0,1fr)}
  .akt{grid-template-columns:repeat(2,minmax(0,1fr))}.akt-b:nth-child(n){border-left:0;border-top:0}.akt-b:nth-child(even){border-left:1px solid var(--line)}.akt-b:nth-child(n+3){border-top:1px solid var(--line)}
  .akt-b{padding:12px 14px 10px}.akt-b>b{font-size:1.35rem}
  .alc{grid-template-rows:170px auto}.achart2{padding:14px 12px 10px}
  .adminpage .alivebox{border-radius:14px;flex-wrap:wrap}.alv2{padding:6px 10px}
  .asec-h h2{font-size:1.3rem}
}
.astory-sel select{min-width:0;flex:1 1 auto}
@media (max-width:760px){.adminpage .alivebox{display:grid;grid-template-columns:1fr 1fr;width:100%;box-sizing:border-box}.alv2+.alv2{border-left:0}.alv2:nth-child(even){border-left:1px solid var(--line)}.alv2:nth-child(n+3){border-top:1px solid var(--line)}.alv2{white-space:normal;line-height:1.2}}
/* format page links on phones: one line (Laith, 29 Oct 2026); tighter chips, a sideways scroll if a format has more links */
@media (max-width:760px){.fs-links{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fs-links::-webkit-scrollbar{display:none}.fs-links a{flex:1 0 auto;justify-content:center;padding:0 10px;font-size:.82rem;white-space:nowrap}.fs-links svg{display:none}}
/* Wild Card banner on phones: tag and both chips on one line (Laith, 29 Oct 2026) */
@media (max-width:520px){.hw-top{flex-wrap:nowrap;gap:6px;min-width:0}.hw-tag{letter-spacing:.12em;font-size:.62rem;flex:none}.hw-chip{height:22px;padding:0 7px;font-size:.68rem;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}}