/* GameLife — indigo adire, marigold, clay. */
:root {
  --indigo: #1b2566;
  --indigo-2: #2b3a8c;
  --ink: #12152e;
  --paper: #f6efe1;
  --paper-2: #ece2cc;
  --card: #fffaf0;
  --line: #ddd0b4;
  --gold: #f4b42a;
  --gold-dark: #c98a0c;
  --clay: #e8673c;
  --teal: #1f7a6d;
  --muted: #6f6a5c;
  --dot: #22c55e;
  --live: #ef4444;
  --display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; background: var(--paper);
  background-image: radial-gradient(rgba(27, 37, 102, .06) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
  display: grid; grid-template-columns: 220px 1fr;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
input, select { font: inherit; width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; margin-top: 6px; color: var(--ink); }
input:focus, select:focus { outline: none; border-color: var(--indigo-2); }
label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 0; }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
.mono { font-family: var(--mono); letter-spacing: -.02em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.empty { color: var(--muted); padding: 18px; border: 2px dashed var(--line); border-radius: 16px; text-align: center; margin: 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

/* adire: indigo resist-dye pattern */
.adire {
  background-color: var(--v, var(--indigo));
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16) 0 3px, transparent 3.5px),
    radial-gradient(circle at 0 0, transparent 9px, rgba(255, 255, 255, .09) 9.5px 11px, transparent 11.5px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 9px);
  background-size: 28px 28px, 28px 28px, auto;
  color: #fff;
}

/* buttons and tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--ink); border-radius: 12px; padding: 11px 18px; font-weight: 700; background: var(--card); white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s; text-align: center; line-height: 1.15; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.gold { background: var(--gold); }
.btn.ghost { background: transparent; box-shadow: none; border-color: var(--line); }
.btn.danger { color: #b42318; border-color: #f2b8b5; }
.btn.small { padding: 7px 12px; font-size: 14px; }
.btn.wide { width: 100%; padding: 15px; font-size: 17px; margin-top: 18px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.link { font-size: 13px; text-decoration: underline; text-align: center; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.filters.tight { margin: 8px 0 0; }
.tag { border: 2px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; }
.tag.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.quiet { opacity: .55; }
.tag:disabled { opacity: .35; cursor: not-allowed; }

/* rail */
.rail { position: sticky; top: 0; height: 100vh; background: var(--indigo); color: #e9e6ff; display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; z-index: 20; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; margin-bottom: 22px; padding: 0 6px; }
.mark { width: 34px; height: 34px; border-radius: 9px; background: #fff; position: relative; transform: rotate(-8deg); flex: none; }
.mark i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.mark i:nth-child(1) { left: 6px; top: 6px; } .mark i:nth-child(2) { left: 13px; top: 13px; background: var(--clay); } .mark i:nth-child(3) { left: 20px; top: 20px; }
.nav { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 700; }
.nav span { width: 22px; text-align: center; font-size: 18px; position: relative; }
.nav:hover { background: rgba(255, 255, 255, .08); }
.nav.on { background: var(--gold); color: var(--ink); }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.pulse { font-size: 13px; display: flex; align-items: center; gap: 8px; opacity: .9; }
.purse { display: flex; flex-direction: column; gap: 8px; }
.purse > a:first-child:not(.btn) { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border-radius: 14px; padding: 8px; }
.purse small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.purse b { font-family: var(--mono); font-size: 15px; color: var(--gold); }

main { min-width: 0; }
.mobilebar { display: none; }
.page { max-width: 1180px; margin: 0 auto; padding: 24px 28px 40px; }
.hero h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: .98; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--clay); }
.hero { margin-bottom: 22px; }
.sec { font-size: 22px; margin: 30px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.sec span { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }

/* avatars */
.av-bust { position: relative; display: inline-block; flex: none; border-radius: 30%; background: var(--paper-2); border: 2px solid var(--ink); }
.av-bust svg { border-radius: 28%; display: block; width: 100%; height: 100%; }
/* people lists: green online, red busy, grey offline */
.av-bust .dot.busy { background: #ef4444; }
.av-bust .dot.offline { background: #9aa0aa; }
.av-bust .dot { position: absolute; right: -4px; top: -4px; border: 2px solid var(--card); width: 13px; height: 13px; }
.av-full { overflow: visible; filter: drop-shadow(3px 4px 0 rgba(18, 21, 46, .25)); }

/* live */
.matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.match { background: var(--card); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 12px; transition: transform .12s; }
.match:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.m-game { display: flex; justify-content: space-between; font-weight: 700; }
.m-game em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
.m-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.m-p { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.m-p b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--clay); transform: rotate(-8deg); }
.m-foot { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; border-top: 2px dashed var(--line); padding-top: 10px; }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }

/* challenge ticket */
.ticket { display: grid; grid-template-columns: 1fr auto; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; margin-bottom: 12px; position: relative; overflow: hidden; }
.t-main { display: flex; gap: 12px; padding: 14px; align-items: center; min-width: 0; }
.t-main > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t-main small { color: var(--muted); font-size: 13px; }
.t-main small.mono { color: var(--ink); }
.t-stub { border-left: 2px dashed var(--ink); padding: 12px; display: flex; align-items: center; background: var(--paper-2); position: relative; }
.t-stub::before, .t-stub::after { content: ''; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.t-stub::before { top: -10px; } .t-stub::after { bottom: -10px; }
.t-stub .btn { flex-direction: column; gap: 2px; }

/* legends */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 12px; max-width: 640px; margin: 10px auto 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.step b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.step small { color: var(--muted); }
.step .who { position: relative; display: flex; flex-direction: column; align-items: center; }
.crown { color: var(--gold); font-size: 34px; line-height: 1; text-shadow: 2px 2px 0 var(--ink); }
.crown.sm { font-size: 18px; margin-right: -4px; }
.block { width: 100%; border: 2px solid var(--ink); border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 40px; padding-top: 6px; margin-top: 6px; }
.p1 .block { height: 130px; --v: var(--indigo); }
.p2 .block { height: 95px; --v: var(--teal); }
.p3 .block { height: 70px; --v: #b4532a; }
.ranks { list-style: none; padding: 0; margin: 16px 0 0; }
.ranks li { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 2px dashed var(--line); }
.ranks li .muted { font-size: 13px; }
.hot { list-style: none; padding: 0; margin: 0; }
.hot li { display: grid; grid-template-columns: 30px auto 1fr auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 2px dashed var(--line); }
.hot .rank { color: var(--muted); }
.hot-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; display: block; }
.bar i { display: block; height: 100%; background: var(--teal); }
.hot-num { text-align: right; display: flex; flex-direction: column; }
.hot-num b { color: var(--teal); }
.hot-num small { color: var(--muted); font-size: 12px; }

/* venue */
.venue-page { padding-top: 0; }
.venue-hero { margin: 0 -28px; padding: 18px 28px 16px; border-bottom: 3px solid var(--ink); position: relative; }
.venue-hero .back { display: inline-block; font-weight: 700; margin-bottom: 18px; opacity: .85; }
.venue-hero h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 800; line-height: .95; }
.vibe { font-size: 17px; max-width: 560px; opacity: .92; margin: 10px 0 16px; }
.crowd { display: flex; align-items: center; flex-wrap: wrap; }
.person { margin-right: -8px; }
.person .av-bust { border-color: #fff; }
.crowd-n { margin-left: 18px; font-weight: 700; font-size: 14px; }
.venue-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.floorplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; padding: 22px; border: 3px solid var(--ink); border-radius: 22px; min-height: 340px;
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(18, 21, 46, .07) 39px 41px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(18, 21, 46, .07) 39px 41px), #efe4cb; align-content: start; }
.rt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 16px; transition: background .15s; }
.rt:hover { background: rgba(255, 255, 255, .5); }
.disc { width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 4px 4px 0 var(--ink); background: var(--teal); }
.disc span { background: rgba(255, 255, 255, .85); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); }
.rt.g-ayo .disc { background: #b4532a; }
.rt.g-chess .disc { background: repeating-conic-gradient(#f6efe1 0 25%, var(--indigo-2) 0 50%) 0 0 / 28px 28px; }
.rt.g-draughts .disc { background: repeating-conic-gradient(#f6efe1 0 25%, var(--ink) 0 50%) 0 0 / 28px 28px; }
.rt.g-connect4 .disc { background: var(--indigo-2); }
.rt.g-tictactoe .disc { background: #0f766e; }
.rt.g-reversi .disc { background: radial-gradient(circle at 35% 35%, #fff 0 45%, #1b1b1f 47%); }
.rt.open .disc { border-style: dashed; }
.rt-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; background: var(--ink); color: var(--paper); border-radius: 6px; padding: 3px 8px; display: flex; align-items: center; gap: 6px; }
.rt.open .rt-tag { background: var(--gold); color: var(--ink); }
.floor-empty { grid-column: 1 / -1; align-self: center; text-align: center; display: flex; flex-direction: column; gap: 6px; padding: 60px 20px; color: var(--muted); }
.floor-empty b { color: var(--ink); font-family: var(--display); font-size: 22px; }
.counter { background: var(--card); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); margin-top: 58px; overflow: hidden; position: sticky; top: 20px; }
.counter-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 3px solid var(--ink); }
.counter-tabs button { border: 0; background: var(--paper-2); padding: 12px 4px; font-weight: 700; font-size: 13px; border-right: 2px solid var(--ink); }
.counter-tabs button:last-child { border-right: 0; }
.counter-tabs button.on { background: var(--gold); }
#counter { padding: 16px; max-height: 70vh; overflow-y: auto; }
#counter h3 { font-size: 16px; margin: 18px 0 8px; }
.mini { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.mini span { font-weight: 700; color: var(--indigo-2); white-space: nowrap; }
.mini.settled { background: transparent; border: 2px dashed var(--line); color: var(--muted); }
.gate { text-align: center; padding: 20px 6px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.steps > li { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; align-items: center; }
.steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.steps > li > div { grid-column: 2; }
.pick-games { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pg { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.pg span { font-size: 22px; }
.pg small { color: var(--muted); font-size: 12px; }
.pg.on { border-color: var(--ink); background: var(--gold); box-shadow: 3px 3px 0 var(--ink); }
.pg.on small { color: var(--ink); }
.deal { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 18px 0 8px; padding: 12px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--paper); }
.deal div { display: flex; flex-direction: column; }
.deal small { font-size: 11px; color: var(--muted); }
.deal b { font-size: 15px; }
.deal > span { font-weight: 800; color: var(--clay); }

/* arena: one compact column (opponent, board, me, status) with the chat beside it on wide screens */
.arena { padding-top: 18px; padding-bottom: 24px; }
.arena-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.arena-top .back { font-weight: 700; font-family: var(--display); font-size: 17px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-top .back .sub { font-weight: 500; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--muted); }
.pot-chip { background: var(--ink); color: var(--gold); border-radius: 12px; padding: 4px 12px; box-shadow: 3px 3px 0 var(--gold); display: flex; flex-direction: column; text-align: right; line-height: 1.15; flex: none; }
.pot-chip b { font-family: var(--mono); font-weight: 500; font-size: 16px; }
.pot-chip small { font-size: 10px; color: var(--paper); opacity: .8; }
.crowd-count { font-weight: 700; font-size: 13px; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; flex: none; }
.arena-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(260px, 1fr); gap: 20px; align-items: start; }
.play { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.board-holder { position: relative; }

.strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; min-height: 54px; }
.strip.turn { box-shadow: 4px 4px 0 var(--teal); }
.strip.won { background: var(--gold); box-shadow: 4px 4px 0 var(--ink); }
.strip.lost { opacity: .6; }
.strip.empty { border-style: dashed; opacity: .7; }
.strip .ghost { width: 40px; height: 40px; border-radius: 30%; border: 2px dashed var(--muted); display: flex; align-items: center; justify-content: center; font: 800 20px var(--display); color: var(--muted); }
.strip .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.strip .who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .who b em { font-style: normal; background: var(--gold); padding: 0 5px; border-radius: 5px; font-size: 11px; }
.strip .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--muted); min-height: 20px; }
.caps.seeds { gap: 4px; }
.caps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 1px; color: var(--ink); font-size: 12px; }
.caps b { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--teal); margin-left: 4px; }
.caps .pc { font-size: 17px; margin-right: -4px; }
.caps .pc:last-of-type { margin-right: 0; }
.cdisc { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; margin-right: -3px; }
.cdisc.s0 { background: var(--gold); } .cdisc.s1 { background: var(--clay); }
.side { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; flex: none; }
.side.s0 { background: var(--gold); }
.side.s1 { background: var(--clay); }
.side.g-chess.s0 { background: #fff; }
.side.g-chess.s1 { background: #14172b; }

/* the clock: big, next to the board, and a bar that drains */
.clk { position: relative; overflow: hidden; --p: 0; min-width: 78px; text-align: center; padding: 6px 10px 9px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper-2); font-family: var(--mono); font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--ink); }
.clk::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--p) * 1%); background: var(--teal); }
.clk.idle { opacity: .55; }
.clk.idle::after { display: none; }
.strip.turn .clk { background: #fff; }
.strip.me.turn .clk { font-size: 28px; min-width: 96px; box-shadow: 3px 3px 0 var(--teal); }
.clk.low { color: var(--live); border-color: var(--live); }
.clk.low::after { background: var(--live); }
.strip.me.turn .clk.low { animation: urgent .8s ease-in-out infinite; }
@keyframes urgent { 50% { transform: scale(1.06); } }
.clk.think { font-family: 'DM Sans', sans-serif; font-size: 13px; padding: 8px 12px; color: var(--muted); }
.clk.think i { font-style: normal; animation: blink 1.2s infinite; }
.clk.think i:nth-child(2) { animation-delay: .2s; } .clk.think i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

.board-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.waiting-board { width: min(100%, 360px); aspect-ratio: 1; border-radius: 20px; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 60px; box-shadow: 5px 5px 0 var(--ink); }
.waiting-board span { background: var(--card); width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx span { position: absolute; bottom: 0; font-size: 32px; animation: float 1.8s ease-out forwards; }
@keyframes float { to { transform: translate(var(--drift), -300px) scale(1.4); opacity: 0; } }
.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.callout { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 700; flex: 1; min-width: 150px; }
.callout.finished { font-size: 19px; color: var(--clay); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.row-actions.center { justify-content: center; }
.statusbar .btn { padding: 8px 14px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); }
.statusbar .btn.ghost { box-shadow: none; }
.gist { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 10px 12px; }
.gist h3 { font-size: 16px; }
.feed { list-style: none; margin: 6px 0; padding: 0; max-height: 200px; min-height: 90px; overflow-y: auto; font-size: 14px; }
.feed li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
.feed li.sys { color: var(--muted); font-size: 13px; }
.chat { display: flex; gap: 8px; }
.chat input { margin: 0; padding: 8px 12px; }

/* boards */
.hint { color: var(--muted); font-size: 12px; margin: 0; text-align: center; }
.hint.warn { color: var(--live); font-weight: 700; }
.hint select { width: auto; padding: 4px 8px; margin-left: 6px; }
.grid8 { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: min(100%, 520px, max(280px, calc(100vh - 330px))); aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.sq { display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.sq.light { background: var(--paper); }
.sq.dark { background: var(--indigo-2); }
.sq.chess.dark { background: #7d8bc9; }
.sq.last { box-shadow: inset 0 0 0 100px rgba(244, 180, 42, .45); }
.sq.sel { box-shadow: inset 0 0 0 4px var(--gold); }
.sq.dest::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }
.sq.check { box-shadow: inset 0 0 18px 6px rgba(239, 68, 68, .85); }
.sq.movable, .sq.dest { cursor: pointer; }
.man { width: 76%; height: 76%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.man.s0 { background: var(--gold); color: var(--ink); }
.man.s1 { background: var(--clay); color: #fff; }
.sq.movable .man { outline: 3px solid #fff; outline-offset: 1px; }
.pc { font-style: normal; font-size: clamp(24px, 6.4vw, 44px); line-height: 1; user-select: none; font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', 'Apple Symbols', sans-serif; font-variant-emoji: text; }
.pc.w { color: #fff; text-shadow: -1px -1px 0 #14172b, 1px -1px 0 #14172b, -1px 1px 0 #14172b, 1px 1px 0 #14172b, 0 2px 1px rgba(20, 23, 43, .35); }
.pc.b { color: #14172b; text-shadow: 0 0 1.5px rgba(255, 255, 255, .85), 0 1px 0 rgba(255, 255, 255, .3); }
.sq.chess:has(.pc) { cursor: pointer; }
.san { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 0; width: 100%; max-width: 520px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.san::-webkit-scrollbar { display: none; }
.hint.promo { align-self: flex-end; }
.ayo { display: flex; align-items: stretch; gap: 10px; background: #b4532a; padding: 14px; border-radius: 36px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); width: min(100%, 640px);
  background-image: repeating-linear-gradient(100deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 12px); }
.ayo .rows { flex: 1; display: grid; gap: 10px; }
.ayo .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ayo .store { width: 66px; border-radius: 28px; background: #6e2e14; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; border: 2px solid var(--ink); }
.ayo .store b { font-family: var(--mono); font-size: 26px; color: var(--gold); }
.ayo .store small { font-size: 10px; overflow-wrap: anywhere; opacity: .8; }
.pit { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 35%, #5b240e, #8a3a18); position: relative; }
.pit b { position: absolute; bottom: -4px; right: -4px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 11px; padding: 0 5px; }
.pit .seeds i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #f6efe1; transform: rotate(var(--a)) translate(var(--r)) translate(-50%, -50%); box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .3); }
.pit.ok { box-shadow: 0 0 0 3px var(--gold); cursor: pointer; }
.pit.ok:hover { filter: brightness(1.25); }
.pit.last { box-shadow: 0 0 0 3px #fff; }
.pit:disabled { cursor: default; }
.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--indigo-2); padding: 10px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); width: min(100%, 470px); }
.c4 .col { border: 0; background: transparent; display: grid; gap: 6px; padding: 0; border-radius: 10px; }
.c4 .col.ok:hover { background: rgba(255, 255, 255, .15); }
.c4 .col:disabled { cursor: default; }
.hole { aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: inset 0 3px 4px rgba(0, 0, 0, .35); }
.hole.p0 { background: var(--gold); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.hole.p1 { background: var(--clay); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.hole.last { outline: 3px solid #fff; }
.hole.win { outline: 4px solid var(--ink); }

/* auth */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-stage { padding: 48px 40px; display: flex; flex-direction: column; gap: 8px; --v: var(--indigo); }
.auth-stage h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; line-height: 1; }
.pedestal { flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 280px; position: relative; padding-bottom: 26px; }
.pedestal::after { content: ''; position: absolute; bottom: 8px; width: 200px; height: 34px; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink); z-index: -1; }
.pedestal { isolation: isolate; }
.big-dice { font-size: 160px; line-height: 1; color: var(--gold); margin-bottom: 30px; }
.fine { font-size: 14px; opacity: .85; max-width: 380px; }
.auth-form { padding: 40px; max-width: 560px; width: 100%; }
.switch { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.switch a { text-align: center; padding: 10px; font-weight: 700; }
.switch a.on { background: var(--ink); color: var(--paper); }
.dress { border: 2px dashed var(--line); border-radius: 16px; padding: 10px 16px 16px; margin: 16px 0 0; }
.dress legend { font-family: var(--display); font-weight: 800; padding: 0 6px; }
.opt { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; font-weight: 700; }
.opt > div { display: flex; flex-wrap: wrap; gap: 6px; }
.opt .tag { padding: 4px 10px; font-size: 12px; }
.sw { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--ink); background: var(--c); }
.sw.on { box-shadow: 0 0 0 3px var(--gold); transform: rotate(-8deg) scale(1.1); }
#shuffle { margin-top: 10px; }

/* me */
.id-card { display: grid; grid-template-columns: 280px 1fr; border: 3px solid var(--ink); border-radius: 24px; overflow: hidden; background: var(--card); box-shadow: 8px 8px 0 var(--ink); max-width: 860px; }
.id-photo { display: flex; align-items: flex-end; justify-content: center; padding: 30px 0 20px; }
.id-body { padding: 28px; }
.id-body h1 { font-size: 40px; font-weight: 800; }
.id-stats { display: flex; gap: 28px; margin: 18px 0; }
.id-stats small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.id-stats b { font-size: 26px; }
.record { list-style: none; padding: 0; margin: 0; }
.record li { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; z-index: 50; font-weight: 700; max-width: calc(100% - 32px); box-shadow: 4px 4px 0 var(--gold); }
.toast.bad { background: #b42318; box-shadow: 4px 4px 0 var(--ink); }

/* tablet / phone */
@media (max-width: 1000px) {
  .venue-grid { grid-template-columns: 1fr; }
  .counter { margin-top: 0; position: static; order: -1; }
  .arena-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
}
@media (max-width: 760px) {
  body { grid-template-columns: 1fr; padding-bottom: 62px; align-content: start; }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 4px 8px; justify-content: space-around; border-top: 3px solid var(--ink); }
  .logo, .pulse { display: none; }
  .nav { flex-direction: column; gap: 0; padding: 4px 12px; font-size: 11px; }
  .nav span { font-size: 16px; line-height: 1.1; }
  .rail-foot { display: none; }
  .mobilebar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--indigo); border-bottom: 3px solid var(--ink); }
  .mobilebar .logo { display: flex; margin: 0; font-size: 18px; }
  .mobilebar .mark { width: 28px; height: 28px; }
  .mobilebar .purse { flex-direction: row; align-items: center; color: #fff; }
  .mobilebar .purse > a:first-child:not(.btn) { padding: 2px 10px 2px 2px; }
  .mobilebar .purse .link { display: none; }
  .toast { bottom: 74px; }
  .page { padding: 12px 12px 20px; }
  .hero { margin-bottom: 10px; }
  .hero h1 { font-size: 26px; line-height: 1.05; }
  .hero h1 br { display: none; }
  .hero h1 em { margin-left: .22em; }
  .hero .kicker { margin-bottom: 4px; font-size: 11px; }
  .sec { font-size: 17px; margin: 14px 0 8px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 8px 0; padding-bottom: 2px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters.tight { flex-wrap: wrap; overflow: visible; }
  .tag { padding: 6px 11px; font-size: 13px; white-space: nowrap; flex: none; }
  .tag.mono { padding: 6px 8px; font-size: 12.5px; }
  .filters.tight { gap: 6px; }
  .btn { padding: 9px 15px; }
  .btn.wide { padding: 12px; font-size: 16px; margin-top: 12px; }
  .av-bust .dot { width: 11px; height: 11px; }

  /* venue */
  .venue-page { padding-top: 0; }
  .venue-hero { margin: 0 -12px; padding: 8px 12px 10px; }
  .venue-hero .back { margin-bottom: 4px; font-size: 14px; }
  .venue-hero .kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 10px; margin-bottom: 2px; }
  .venue-hero h1 { font-size: 28px; }
  .vibe { display: none; }
  .venue-hero .crowd { margin-top: 6px; }
  .person .av-bust { width: 30px !important; height: 30px !important; }
  .crowd-n { margin-left: 14px; font-size: 13px; }
  .venue-grid { gap: 12px; }
  .counter { border-width: 2px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .counter-tabs button { padding: 9px 2px; font-size: 12.5px; }
  #counter { padding: 12px; max-height: none; overflow: visible; }
  #counter h3 { margin: 12px 0 6px; font-size: 15px; }
  .steps { gap: 10px; }
  .steps .n { width: 22px; height: 22px; font-size: 12px; }
  .pick-games { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pg { padding: 7px 4px; align-items: center; text-align: center; border-radius: 12px; }
  .pg span { font-size: 20px; }
  .pg b { font-size: 11.5px; line-height: 1.15; }
  .pg small { display: none; }
  .opp-pick { gap: 6px; }
  .opp { padding: 8px 10px; }
  .opp b { font-size: 14px; }
  .deal { margin: 12px 0 6px; padding: 8px 10px; }
  .deal b { font-size: 14px; }
  .floorplan { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; min-height: 0; border-width: 2px; border-radius: 16px; }
  .rt { padding: 4px; gap: 4px; }
  .disc { width: 70px; height: 70px; box-shadow: 3px 3px 0 var(--ink); }
  .disc span { width: 34px; height: 34px; font-size: 18px; }
  .seatrow .seat .av-bust { width: 30px !important; height: 30px !important; }
  .seatrow .seat.free { width: 30px; height: 30px; font-size: 16px; }
  .floor-empty { padding: 16px 8px; font-size: 13px; }
  .floor-empty b { font-size: 17px; }
  .ticket { margin-bottom: 8px; border-radius: 14px; }
  .t-main { padding: 9px 10px; gap: 9px; }
  .t-main .av-bust { width: 38px !important; height: 38px !important; }
  .t-stub { padding: 8px; }
  .mini { padding: 8px 10px; font-size: 13px; }

  /* live */
  .tickets, .matches { grid-template-columns: 1fr; gap: 8px; }
  .match { padding: 10px; gap: 6px; box-shadow: 3px 3px 0 var(--ink); border-radius: 14px; }
  .m-p { flex-direction: row; gap: 6px; }
  .m-vs { grid-template-columns: 1fr auto 1fr; }
  .m-p .av-bust { width: 38px !important; height: 38px !important; }
  .m-p b { font-size: 12px; }
  .vs { font-size: 16px; }
  .m-foot { padding-top: 6px; font-size: 12px; }

  /* legends */
  .podium { gap: 6px; }
  .podium .av-full { height: 84px; }
  .podium .p1 .av-full { height: 104px; }
  .crown { font-size: 26px; }
  .block { font-size: 26px; padding-top: 2px; margin-top: 4px; }
  .p1 .block { height: 70px; } .p2 .block { height: 52px; } .p3 .block { height: 38px; }
  .ranks { margin-top: 8px; }
  .ranks li { padding: 6px 4px; gap: 9px; }
  .ranks .av-bust, .hot .av-bust { width: 32px !important; height: 32px !important; }
  .hot li { padding: 6px 2px; gap: 9px; }

  /* me */
  .id-card { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--ink); border-radius: 18px; }
  .id-photo { padding: 12px 0 8px; }
  .id-photo .av-full { height: 120px; }
  .id-body { padding: 14px 16px 16px; }
  .id-body h1 { font-size: 28px; }
  .id-stats { margin: 10px 0; gap: 22px; }
  .id-stats b { font-size: 22px; }
  .record li { grid-template-columns: 110px 1fr auto; padding: 5px 0; }

  /* sign up and sign in */
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-stage { padding: 14px 16px 8px; gap: 2px; }
  .auth-stage h1 { font-size: 26px; }
  .pedestal { min-height: 160px; padding-bottom: 12px; }
  .pedestal .av-full { height: 150px; }
  .pedestal::after { width: 140px; height: 24px; bottom: 4px; }
  .big-dice { font-size: 90px; margin-bottom: 14px; }
  .fine { font-size: 12px; margin: 0; }
  .auth-form { padding: 12px 16px 20px; }
  .opt { grid-template-columns: 74px 1fr; padding: 3px 0; }
  .sw { width: 24px; height: 24px; }
  .dress { padding: 6px 12px 12px; margin-top: 10px; }
  label { margin-top: 10px; }

  /* game scene */
  .arena { padding-top: 8px; }
  .arena-top { margin-bottom: 8px; }
  .arena-top .back { font-size: 16px; }
  .arena-top .back .sub { display: none; }
  .play { gap: 6px; }
  .strip { padding: 5px 7px; gap: 8px; min-height: 50px; border-radius: 12px; }
  .strip .av-bust { width: 36px !important; height: 36px !important; }
  .strip .ghost { width: 36px; height: 36px; }
  .strip .who b { font-size: 14px; }
  .clk { min-width: 66px; font-size: 18px; padding: 5px 8px 8px; }
  .strip.me.turn .clk { font-size: 24px; min-width: 84px; }
  .board-wrap .hint:not(.warn):not(.promo) { display: none; }
  .waiting-board { width: min(100%, 300px); font-size: 44px; }
  .waiting-board span { width: 84px; height: 84px; }
  .callout { font-size: 15px; min-width: 120px; }
  .gist { padding: 8px 10px; }
  .feed { max-height: 130px; min-height: 60px; }
  .ayo { flex-direction: column; padding: 10px; border-radius: 26px; gap: 6px; }
  .ayo .store { width: auto; flex-direction: row; justify-content: space-between; padding: 4px 14px; border-radius: 16px; }
  .ayo .store b { font-size: 20px; }
  .ayo .store small { font-size: 12px; overflow-wrap: normal; }
  .ayo .rows { gap: 8px; }
  .ayo .row { gap: 6px; }
}

/* computer opponent */
.strip .who b em.cpu, .cpu { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; background: var(--ink); color: var(--gold); padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.opp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.opp { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.opp small { color: var(--muted); font-size: 12px; }
.opp.on { border-color: var(--ink); background: var(--gold); box-shadow: 3px 3px 0 var(--ink); }
.opp.on small { color: var(--ink); }
.m-game .cpu { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .clk.think i, .strip.me.turn .clk.low, .waiting-board span { animation: none; } .clk.think i { opacity: 1; } }

/* games home: one tile per game */
.gtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gtile { display: flex; flex-direction: column; background: var(--card); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); overflow: hidden; transition: transform .12s, box-shadow .12s; }
.gtile:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.gt-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; min-height: 72px; }
.gt-icon { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.gt-players { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .32); padding: 3px 9px; border-radius: 999px; }
.gtile > b { font-family: var(--display); font-size: 23px; padding: 10px 14px 0; line-height: 1.1; }
.gtile > small { padding: 2px 14px 0; color: var(--muted); font-size: 13px; }
.gt-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; border-top: 2px dashed var(--line); padding: 10px 14px 12px; }
.gt-counts span { display: flex; flex-direction: column; line-height: 1.15; }
.gt-counts b { font-family: var(--mono); font-weight: 500; font-size: 24px; color: var(--ink); }
.gt-counts em { font-style: normal; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.gt-counts span.hot b { color: var(--teal); }
.ticker.light { padding: 0; list-style: none; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ticker.light a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; font-weight: 500; }
.ticker.light a span { color: var(--indigo-2); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* tables on the room floor, any number of seats */
.seatrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.seatrow .seat { display: inline-flex; }
.seatrow .seat.free { width: 36px; height: 36px; border-radius: 30%; border: 2px dashed var(--muted); align-items: center; justify-content: center; color: var(--muted); font: 700 18px 'DM Sans', sans-serif; }
.rt-names { font-size: 11px; color: var(--muted); max-width: 160px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt.g-whot .disc { background: #9b2f5f; }
.rt.g-ludo .disc { background: conic-gradient(#e8673c 0 25%, #1f7a6d 0 50%, #f4b42a 0 75%, #2b3a8c 0); }
.m-crowd { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }

/* more than two players: compact strips in a row above the board */
.strips-row { display: grid; gap: 6px; }
.strips-row.n2 { grid-template-columns: repeat(2, 1fr); }
.strips-row.n3 { grid-template-columns: repeat(3, 1fr); }
.strip.mini { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 3px 7px; padding: 6px 8px; min-height: 0; align-items: center; }
.strip.mini .who b { font-size: 13px; }
.strip.mini .meta { font-size: 11px; min-height: 0; }
.strip.mini .clk { grid-column: 1 / -1; min-width: 0; font-size: 16px; padding: 3px 6px 7px; }
.strip.mini.empty { opacity: .6; }
.strip.mini .ghost { width: 30px; height: 30px; font-size: 16px; }
.side.none { display: none; }
.side.g-ludo.c0 { background: #e8673c; } .side.g-ludo.c1 { background: #1f7a6d; } .side.g-ludo.c2 { background: #f4b42a; } .side.g-ludo.c3 { background: #2b3a8c; }

/* Whot! */
.whot { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.w-table { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 10px; background: radial-gradient(circle at 50% 40%, #2a9470, #1d6b53); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); flex-wrap: wrap; }
.w-market { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; padding: 0; }
.w-market em { font-style: normal; font-size: 12px; font-weight: 700; }
.w-back { width: 58px; height: 84px; border-radius: 9px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--indigo) 0 6px, var(--indigo-2) 6px 12px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.w-back b { font-family: var(--mono); font-weight: 500; font-size: 20px; }
.w-back small { font-size: 10px; opacity: .85; }
.w-market.ok .w-back { box-shadow: 0 0 0 3px var(--gold), 3px 3px 0 rgba(0, 0, 0, .35); }
.w-market:disabled { opacity: .8; }
.w-top { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.w-want { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: 12px; }
.w-pend { background: var(--live); color: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 5px 11px; display: flex; flex-direction: column; line-height: 1.15; box-shadow: 3px 3px 0 var(--ink); }
.w-pend b { font-size: 18px; }
.w-pend small { font-size: 11px; opacity: .95; }
.w-said { margin: 0; font-size: 12px; color: var(--muted); text-align: center; min-height: 16px; }
.w-hand { display: flex; gap: 6px; overflow-x: auto; padding: 16px 8px 8px; min-height: 108px; align-items: flex-end; scrollbar-width: thin; }
.wbtn { border: 0; background: transparent; padding: 0; flex: none; transition: transform .1s; }
.wbtn.dim { opacity: .5; filter: grayscale(.35); }
.wbtn.ok { transform: translateY(-10px); }
.wbtn.ok .wcard { box-shadow: 0 0 0 3px var(--gold), 2px 2px 0 rgba(0, 0, 0, .35); }
.wcard { position: relative; display: inline-flex; width: 54px; height: 78px; border-radius: 8px; background: #fffaf0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); flex-direction: column; align-items: center; justify-content: center; }
.wcard i { font-style: normal; }
.wcard .cn { position: absolute; top: 3px; left: 5px; font-family: var(--mono); font-weight: 500; font-size: 14px; }
.wcard .cs { font-size: 30px; line-height: 1; font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', sans-serif; font-variant-emoji: text; }
.wcard .cb { position: absolute; bottom: 3px; font-size: 7.5px; font-weight: 800; letter-spacing: .04em; }
.w-top .wcard { width: 66px; height: 94px; }
.w-top .wcard .cs { font-size: 38px; }
.w-top .wcard .cn { font-size: 16px; }
.sh-circle { color: #e8673c; } .sh-triangle { color: #2b3a8c; } .sh-cross { color: #1f7a6d; } .sh-square { color: #d99a0b; } .sh-star { color: #9b2f5f; }
.wcard.whot { background: conic-gradient(from 0deg, #e8673c, #f4b42a, #1f7a6d, #2b3a8c, #9b2f5f, #e8673c); color: #fff; }
.wcard.whot .cn { color: #fff; text-shadow: 0 1px 0 #14172b; }
.wcard.whot .cs { font-size: 13px; font-weight: 800; letter-spacing: .06em; font-family: 'DM Sans', sans-serif; text-shadow: 0 1px 0 #14172b; }
.w-top .wcard.whot .cs { font-size: 15px; }
.w-pick { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.w-pick > div { display: flex; gap: 6px; }
.w-pick button[data-shape] { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; font-size: 24px; line-height: 1; padding: 0; box-shadow: 2px 2px 0 var(--ink); }

/* Ludo */
.ludo { width: min(100%, 520px, max(280px, calc(100vh - 400px))); margin: 0 auto; }
.ludo-board { display: block; width: 100%; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 10px; background: #fffaf0; box-shadow: 4px 4px 0 var(--ink); touch-action: manipulation; }
.pawn.ok { cursor: pointer; }
.pawn .halo { fill: rgba(255, 255, 255, .5); stroke: #14172b; stroke-width: .07; animation: halo .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.3); } }
.dicebar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.die { width: 54px; height: 54px; flex: none; border-radius: 14px; border: 2px solid var(--ink); background: #fff; font-size: 40px; line-height: 1; padding: 0; box-shadow: 3px 3px 0 var(--ink); font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', 'DejaVu Sans', sans-serif; font-variant-emoji: text; color: var(--ink); }
.die:disabled { opacity: 1; }
.die.ok { background: var(--gold); animation: nudge 1.1s ease-in-out infinite; }
.die.tumble { animation: tumble .5s ease-out; }
@keyframes nudge { 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes tumble { 0% { transform: rotate(0) scale(.7); } 55% { transform: rotate(220deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.dsay { font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pawn .halo, .die.ok, .die.tumble { animation: none; } }

@media (max-width: 1000px) { .gtiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .gtiles { gap: 10px; }
  .gtile { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); border-radius: 14px; }
  .gt-top { padding: 6px 10px; min-height: 48px; }
  .gt-icon { font-size: 28px; }
  .gt-players { font-size: 10px; padding: 2px 7px; }
  .gtile > b { font-size: 17px; padding: 7px 10px 0; }
  .gtile > small { display: none; }
  .gt-counts { margin-top: 6px; padding: 6px 10px 8px; gap: 2px; }
  .gt-counts b { font-size: 19px; }
  .gt-counts em { font-size: 10.5px; }
  .ticker.light a { padding: 8px 10px; font-size: 13px; }
  .wcard { width: 46px; height: 68px; }
  .wcard .cs { font-size: 26px; }
  .wcard .cn { font-size: 12px; }
  .w-top .wcard { width: 56px; height: 80px; }
  .w-table { padding: 8px; gap: 16px; }
  .w-back, .w-deck { width: 50px; height: 72px; }
  .w-shuf, .w-shuf i, .w-dealcard { width: 50px; height: 72px; }
  .w-pile, .w-pile .wcard, .w-edge { width: 56px; height: 80px; }
  .w-pile .wcard .cs { font-size: 32px; }
  .w-hand { min-height: 94px; padding-top: 14px; }
  .die { width: 46px; height: 46px; font-size: 34px; }
  .dsay { font-size: 13px; }
  .ludo { width: min(100%, 520px, max(280px, calc(100vh - 360px))); }
}

/* Whot!: stacks, last-card warnings, and the card animations */
.whot { position: relative; }
.w-deck { position: relative; display: block; width: 58px; height: 84px; }
.w-back { width: 58px; height: 84px; border-radius: 9px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--indigo) 0 6px, var(--indigo-2) 6px 12px); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.w-deck .w-back { position: absolute; left: 0; top: 0; }
.w-deck .lay { transform: translate(var(--x), var(--y)) rotate(var(--r)); box-shadow: none; }
.w-deck .top-back { z-index: 1; }
.w-pile { position: relative; width: 66px; height: 94px; }
.w-pile > span, .w-pile > i { position: absolute; left: 0; top: 0; }
.w-pile .wcard { width: 66px; height: 94px; }
.w-pile .wcard .cs { font-size: 38px; }
.w-pile .wcard .cn { font-size: 16px; }
.w-pile .wcard.whot .cs { font-size: 15px; }
.w-under { transform: translate(var(--x), var(--y)) rotate(var(--r)); filter: brightness(.93); }
.w-edge { width: 66px; height: 94px; border-radius: 8px; border: 2px solid var(--ink); background: #e9dfc8; transform: translate(-7px, 5px) rotate(var(--r)); }
.w-edge.e2 { transform: translate(-3px, 8px) rotate(var(--r)); background: #d8ccb0; }
.w-ontop { transform: rotate(var(--r)); z-index: 2; }
.w-count { position: absolute !important; left: 50% !important; top: auto !important; bottom: -17px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .4); padding: 0 7px; border-radius: 999px; white-space: nowrap; z-index: 3; }
.w-table { padding-bottom: 22px; }
.w-last { align-self: center; background: var(--live); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); animation: lastcall 1s ease-in-out infinite; }
@keyframes lastcall { 50% { transform: scale(1.06); } }
.caps.last { color: var(--live); font-weight: 800; animation: lastcall 1s ease-in-out infinite; }
.caps.last b { color: var(--live); }
.w-hand.last { box-shadow: inset 0 -3px 0 var(--live); }

.w-fly { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 9px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--indigo) 0 6px, var(--indigo-2) 6px 12px); pointer-events: none; z-index: 20; animation: wfly .65s ease-in both; animation-delay: var(--delay, 0s); }
@keyframes wfly { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(22deg) scale(.7); opacity: 0; } }
.w-ontop.drop { animation: wdrop .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes wdrop { from { transform: translate(var(--fx), var(--fy)) rotate(-28deg) scale(.6); opacity: .2; } to { transform: rotate(var(--r)) scale(1); opacity: 1; } }

.w-deal { position: absolute; inset: 0 0 auto 0; height: 170px; z-index: 30; pointer-events: none; display: flex; align-items: center; justify-content: center; animation: wdealfade .3s both; animation-delay: calc(2.6s - var(--el) * 1s); }
@keyframes wdealfade { to { opacity: 0; visibility: hidden; } }
.w-shuf { position: relative; width: 58px; height: 84px; }
.w-shuf i { position: absolute; left: 0; top: 0; width: 58px; height: 84px; border-radius: 9px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--indigo) 0 6px, var(--indigo-2) 6px 12px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); animation: shufa .32s ease-in-out 3 both; animation-delay: calc(var(--d) * 1s - var(--el) * 1s); }
.w-shuf i.b { animation-name: shufb; }
@keyframes shufa { 50% { transform: translateX(-30px) rotate(-9deg); } }
@keyframes shufb { 50% { transform: translateX(30px) rotate(9deg); } }
.w-dealcard { position: absolute; left: 50%; top: 50%; width: 58px; height: 84px; margin: -42px 0 0 -29px; border-radius: 9px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--indigo) 0 6px, var(--indigo-2) 6px 12px); opacity: 0; animation: wfly .5s ease-out both; animation-delay: calc(var(--d) * 1s - var(--el) * 1s); }
.w-dealsay { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-style: normal; font-weight: 700; font-size: 12px; color: #fff; text-shadow: 0 1px 0 #14172b; }
.wbtn.deal-in { animation: dealin .4s ease-out both; animation-delay: calc(1.8s + var(--i) * .12s - var(--el) * 1s); }
@keyframes dealin { from { transform: translateY(40px) scale(.7) rotate(-8deg); opacity: 0; } to { opacity: 1; } }
.w-ontop.flip { animation: flipin .55s ease-out both; animation-delay: calc(2.5s - var(--el) * 1s); }
@keyframes flipin { 0% { transform: rotateY(90deg) rotate(var(--r)); opacity: 0; } 100% { transform: rotateY(0) rotate(var(--r)); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .w-fly, .w-deal, .w-last, .caps.last { animation: none; }
  .w-deal, .w-fly { display: none; }
  .w-ontop.drop, .w-ontop.flip, .wbtn.deal-in { animation: none; opacity: 1; }
}

.home-tabs { display: flex; gap: 4px; margin: 6px 0 12px; padding: 3px; background: var(--card, #fff); border: 2px solid var(--ink); border-radius: 999px; width: fit-content; }
.home-tabs a { padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
.home-tabs a.on { background: var(--ink); color: #fff; }

.drecap { display: block; font-weight: 500; font-size: 12px; opacity: .8; margin-top: 2px; }

/* Paper Army Wars */
.armies { display: grid; gap: 6px; justify-items: center; width: 100%; }
.psheet { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 304px); background: #fbfdff; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; background-image: linear-gradient(90deg, rgba(60, 130, 190, .0) 0 100%); }
.psheet.mini { width: min(62%, 200px); box-shadow: 3px 3px 0 var(--ink); }
.pcell { aspect-ratio: 1; border: 0; border-right: 1px solid #b4d3ea; border-bottom: 1px solid #b4d3ea; background: #fbfdff; padding: 0; font-weight: 800; font-size: clamp(11px, 4vw, 19px); line-height: 1; color: #b4d3ea; display: grid; place-items: center; }
.pcell.ok { cursor: crosshair; }
.pcell.ok:hover { background: #e4f2ff; }
.pcell.u { color: #fff; }
.pcell.u0 { background: #3f5d8a; } .pcell.u1 { background: #2f7a55; } .pcell.u2 { background: #9b6a1f; } .pcell.u3 { background: #8a3f5d; } .pcell.u4 { background: #5d4a8a; }
.pcell.miss { color: #6a8db0; }
.pcell.hit { color: #fff; background: #d6342c; }
.pcell.u.hit { background: #7a1410; }
.pcell.fresh { outline: 3px solid var(--gold); outline-offset: -3px; animation: lastcall .8s ease-in-out 2; }
.phead { display: flex; gap: 8px; align-items: baseline; width: min(100%, 304px); justify-content: space-between; margin-top: 2px; }
.phead b { font-size: 13px; }
.pleft { color: var(--muted); font-size: 12px; }
.pchips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.pchip { border: 2px solid var(--ink); background: var(--card); border-radius: 10px; padding: 3px 8px; font-weight: 700; font-size: 12px; display: grid; justify-items: center; }
.pchip i { font-style: normal; font-size: 8px; letter-spacing: 1px; }
.pchip.on { background: var(--gold); }
.pchip.done { opacity: .55; }
.pchip.done.on { opacity: 1; }
.pact { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hint.warn { color: var(--clay); font-weight: 700; }
.hint.sub { font-size: 12px; opacity: .75; margin: 0; }

/* Pen Fight */
.pencils { display: grid; justify-items: center; gap: 4px; width: 100%; }
.desk { width: min(100%, 300px); max-height: 62vh; touch-action: none; user-select: none; border-radius: 10px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.deskmark { font: 800 4px var(--display); fill: #6e4a1a; opacity: .5; letter-spacing: .5px; }
.pen.mine { cursor: grab; }
.pen .ring { fill: none; stroke: var(--ink); stroke-width: .7; stroke-dasharray: 2 1.6; animation: spinring 6s linear infinite; transform-origin: center; }
@keyframes spinring { to { transform: rotate(360deg); } }
.pull { stroke: rgba(18, 21, 46, .35); stroke-width: .8; stroke-dasharray: 1.5 1.5; }
.aimline { stroke-width: 1.6; stroke-linecap: round; }
.rt.g-armies .disc { background: repeating-linear-gradient(0deg, #fbfdff 0 6px, #b4d3ea 6px 7px); }
.rt.g-pencils .disc { background: linear-gradient(135deg, #f4b42a 0 50%, #4c7bd9 0); }
.side.s0.g-armies { background: #3f5d8a; } .side.s1.g-armies { background: #d6342c; }
.side.s0.g-pencils { background: #f4b42a; } .side.s1.g-pencils { background: #4c7bd9; }
.pen .ring { transform-box: fill-box; }

/* Paper Army Wars: the folded sheet */
.paper { width: min(100%, 300px); max-height: 66vh; touch-action: manipulation; user-select: none; border-radius: 3px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.paper text { font-family: var(--display); font-weight: 800; }
.paper .bname { font-size: 3.2px; }
.paper .rip text { font-size: 3px; }
.paper .foldnote { font-size: 4.2px; fill: #8d8672; }
.paper .ink { fill: none; stroke-width: .7; stroke-linecap: round; opacity: .85; }
.paper .ink.fresh { stroke-dasharray: 100; stroke-dashoffset: 100; animation: drawink .6s ease-out forwards; }
@keyframes drawink { to { stroke-dashoffset: 0; } }
.paper .trail { fill: none; stroke-width: .6; stroke-dasharray: 2 1.6; opacity: .75; }
.paper .trail.go { opacity: 1; stroke-width: .8; }
.paper .reach { fill: rgba(244, 180, 42, .08); stroke: #c98a0c; stroke-width: .3; stroke-dasharray: 1.5 1.5; }
.paper .cone { fill: rgba(240, 80, 40, .18); stroke: none; }
.paper .selring { fill: none; stroke: #12152e; stroke-width: .5; stroke-dasharray: 1.6 1.2; animation: spinring 5s linear infinite; transform-box: fill-box; transform-origin: center; }
.paper .sol.dead .rip { animation: ripin .5s ease-out both; }
@keyframes ripin { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: scale(1); } }
.pstat { font-size: 12px; color: var(--ink); }
.pstat b { color: var(--c); }
.hint.warn { color: var(--clay); font-weight: 700; }

.paper .aimdisc { fill: rgba(240, 180, 40, .18); stroke-width: .5; stroke-dasharray: 1.6 1.2; }
.paper .hitring { fill: none; stroke-width: .8; }
.paper .hitring.fresh { animation: lastcall .6s ease-in-out 3; transform-box: fill-box; transform-origin: center; }

.paper .blob.fresh circle { animation: blobpop .7s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes blobpop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.paper .gtitle { font-size: 6px; fill: #2b4fc1; letter-spacing: .6px; }
.paper .gline { font-size: 4.3px; fill: #3a4a7a; font-weight: 700; }
.paper .gsub { font-size: 3.6px; fill: #8d8672; font-weight: 700; }
.paper .gcount { font-size: 4.2px; fill: #2b4fc1; font-weight: 800; }
.paper .tapdot { fill: rgba(43, 79, 193, .3); stroke: #2b4fc1; stroke-width: .6; animation: lastcall 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.paper .shade { fill-opacity: .3; animation: shadefade 3.2s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes shadefade { 0% { transform: scale(.3); opacity: 0; } 8% { transform: scale(1.1); opacity: 1; } 15% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* lines from the base are only a record of where you drew: keep them faint so soldiers and X marks stay clear */
.paper .ink { stroke-width: .4; opacity: .28; }

/* Canter */
.kanta { display: grid; justify-items: center; gap: 4px; width: 100%; position: relative; }
.pitch { width: min(100%, 300px); max-height: 66vh; touch-action: none; user-select: none; border-radius: 10px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.kcap.mine { cursor: grab; }
.kcap .knum { font: 800 3.3px var(--display); fill: #fff; paint-order: stroke; stroke: rgba(18, 21, 46, .55); stroke-width: .5px; pointer-events: none; }
.kcap .ring { fill: none; stroke: #fff; stroke-width: .6; stroke-dasharray: 2 1.6; animation: spinring 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.kscore { display: flex; align-items: center; gap: 12px; font-family: var(--display); }
.kscore b { display: inline-block; min-width: 34px; text-align: center; font-size: 22px; color: #fff; background: var(--c); border: 2px solid var(--ink); border-radius: 10px; padding: 0 6px; }
.kscore small { color: var(--muted); font-weight: 700; font-size: 11px; }
.kgoalbanner { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-4deg); background: var(--gold); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); border-radius: 12px; padding: 6px 16px; font: 800 22px var(--display); animation: goalpop .5s ease-out both; pointer-events: none; white-space: nowrap; }
.kgoalbanner.mine { background: #7ddc8a; }
@keyframes goalpop { from { transform: translate(-50%, -50%) rotate(-4deg) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; } }
.rt.g-kanta .disc { background: radial-gradient(circle at 35% 35%, #fff 0 12%, #e8673c 14% 60%, #12152e 62%); }
.side.s0.g-kanta { background: #e8673c; } .side.s1.g-kanta { background: #2b4fc1; }

/* the free daily allowance */
.allowance { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; background: var(--paper-2); border: 2px dashed var(--line); border-radius: 14px; }
.allowance.ready { background: #fff3c8; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.allowance .gift { font-size: 26px; }
.allowance div { flex: 1; display: grid; gap: 1px; }
.allowance small { color: var(--muted); font-size: 12px; }
.gift-banner { display: block; margin: 0 0 10px; padding: 8px 12px; background: #fff3c8; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.purse .gift { font-style: normal; margin-left: 4px; animation: lastcall 1.2s ease-in-out infinite; }

/* the goal call sits in the score row, never over the pitch */
.kscore { min-height: 40px; }
.kscore .kgoal-pill { font-style: normal; font: 800 14px var(--display); background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 999px; padding: 3px 12px; white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; animation: goalpop2 .45s ease-out both; }
.kscore .kgoal-pill.mine { background: #7ddc8a; }
@keyframes goalpop2 { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kgoalbanner { display: none; }

/* Profile (dense) */
.me2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 560px; margin: 0 auto; padding-top: 10px; }
.me2 > * { min-width: 0; }
.me-head { display: flex; align-items: center; gap: 10px; }
.me-av { width: 52px; height: 52px; flex: none; }
.me-id { flex: 1; min-width: 0; }
.me-id h1 { margin: 0; font-size: 20px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.me-id small { color: var(--muted); font-size: 12px; }
.snd { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 18px; flex: none; }
.snd input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; padding: 0; }
.snd .knob { width: 38px; height: 22px; border-radius: 999px; background: var(--line); border: 2px solid var(--ink); position: relative; transition: background .15s; }
.snd .knob::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: transform .15s; box-sizing: border-box; }
.snd input:checked + .knob { background: var(--dot); }
.snd input:checked + .knob::after { transform: translateX(16px); }
.snd input:focus-visible + .knob { outline: 3px solid var(--gold); outline-offset: 2px; }
.me-stats { display: grid; grid-template-columns: 1.6fr 1.2fr 1fr; gap: 6px; }
.me-stats .stat { background: var(--card); border: 2px solid var(--ink); border-radius: 10px; padding: 5px 8px; display: grid; gap: 0; box-shadow: 2px 2px 0 var(--ink); }
.me-stats small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.me-stats b, .me-stats .mono { font-size: 15px; }
.me-stats .money b { font-size: 17px; }
.me2 .w { color: var(--teal); } .me2 .l { color: var(--clay); }
.nocash { margin: 0; font-size: 12px; color: var(--muted); background: var(--paper-2); border-radius: 8px; padding: 4px 8px; }
.me2 .allowance { margin: 0; padding: 7px 9px; }
.me2 .allowance .gift { font-size: 22px; }
.me2 .allowance b { font-size: 14px; }
.invite { background: #e9f3ff; border: 2px solid var(--ink); border-radius: 12px; padding: 7px 9px; display: grid; gap: 6px; box-shadow: 3px 3px 0 var(--ink); }
.invite .inv-top { display: flex; gap: 8px; align-items: center; }
.invite .gift { font-size: 22px; }
.invite b { font-size: 14px; }
.invite small { display: block; color: var(--muted); font-size: 12px; line-height: 1.25; }
.inv-code { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 8px; padding: 4px 6px 4px 10px; }
.inv-code span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.inv-code b { flex: 1; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
.sec.tight { margin: 6px 0 0; font-size: 14px; }
.friends, .bygame { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.friend { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 4px 6px; }
.fr-av { width: 34px; height: 34px; flex: none; }
.fr-main { flex: 1; min-width: 0; display: grid; }
.fr-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-main small { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 4px; }
/* the bottle-cap drawing used as the Canter icon scales with the text around it */
.gi { width: 1em; height: 1em; vertical-align: -.14em; display: inline-block; }
.tops { display: flex; gap: 3px; flex: none; }
.tg { width: 24px; height: 24px; display: grid; place-items: center; font-size: 15px; background: var(--card); border: 1.5px solid var(--line); border-radius: 7px; }
.you-tag { font-size: 11px; font-weight: 800; color: var(--muted); padding: 0 6px; }
.friend .btn.small[disabled] { opacity: .45; cursor: not-allowed; }
.players-page { display: grid; gap: 6px; align-content: start; }
.plsearch { width: 100%; font: inherit; padding: 7px 10px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); }
#plBox { display: grid; gap: 4px; }
.chpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #fff3c8; border: 2px solid var(--ink); border-radius: 10px; padding: 6px 8px; }
.chpanel[hidden] { display: none; }
.chpanel b { flex: 1 0 100%; font-size: 13px; }
.chpanel select { flex: 1; min-width: 0; font: inherit; padding: 5px; border-radius: 8px; border: 2px solid var(--ink); background: var(--card); }
.bygame { grid-template-columns: 1fr 1fr; }
.bygame li { display: flex; justify-content: space-between; gap: 6px; background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; padding: 3px 7px; font-size: 13px; }
.bygame li.muted { grid-column: 1 / -1; border: 0; background: none; color: var(--muted); }
.me2 .row-actions { margin-top: 4px; }
.me2 .empty.small { font-size: 12px; margin: 0; padding: 8px; }
.challenge-pop { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 60; width: min(92vw, 360px); background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); padding: 10px 12px; display: grid; gap: 4px; animation: popin .3s ease-out both; }
@keyframes popin { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.challenge-pop div { display: flex; gap: 8px; }

/* the numbers across the top of the games page: one slim row */
.citycards { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.3fr 1fr; gap: 4px; margin: 4px 0 8px; }
.ccard { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic val" "lab lab"; align-items: center; column-gap: 3px; padding: 3px 6px 3px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); min-width: 0; line-height: 1.05; }
.ccard .cc-ic { grid-area: ic; font-size: 12px; }
.ccard.live .cc-ic { animation: lastcall 1.1s ease-in-out infinite; }
.ccard b { grid-area: val; font: 800 16px/1.1 var(--display); text-shadow: 1px 1px 0 rgba(0, 0, 0, .25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ccard small { grid-area: lab; font-weight: 800; font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 720px) { .citycards { max-width: 560px; } }
/* on a phone the six cards share one line: the icon steps aside so the number gets the whole card */
@media (max-width: 520px) {
  .ccard { position: relative; grid-template-columns: 1fr; grid-template-areas: "val" "lab"; justify-items: center; text-align: center; padding: 3px 3px 3px; }
  .ccard .cc-ic { display: none; }
  .ccard b { font-size: 15px; max-width: 100%; }
  .ccard small { font-size: 8px; letter-spacing: .02em; max-width: 100%; }
  .ccard.live::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: lastcall 1.1s ease-in-out infinite; }
}
@media (max-width: 380px) { .ccard b { font-size: 14px; } .ccard small { font-size: 7.5px; letter-spacing: 0; } }
@media (max-width: 345px) { .ccard b { font-size: 13px; } .ccard small { font-size: 7px; } }

/* share a waiting table */
.sharebox { display: grid; gap: 4px; background: #e9f3ff; border: 2px solid var(--ink); border-radius: 12px; padding: 7px 9px; box-shadow: 3px 3px 0 var(--ink); }
.sharebox b { font-size: 13px; }
.sharebox small { color: var(--muted); font-size: 11px; line-height: 1.25; }
.sharerow { display: flex; gap: 6px; align-items: center; }
.sharerow input { flex: 1; min-width: 0; font: 12px var(--mono); padding: 6px 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); color: var(--ink); text-overflow: ellipsis; }

.codejoin { display: flex; gap: 6px; align-items: end; margin: 6px 0 10px; }
.codejoin label { flex: 1; display: grid; gap: 2px; font-size: 12px; font-weight: 700; }
.codejoin input { font: 13px var(--mono); padding: 7px 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); min-width: 0; }

/* chat bubble and panel */
.arena-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
.chatbtn { position: relative; flex: none; width: 38px; height: 34px; border-radius: 999px; border: 2px solid var(--ink); background: var(--gold); box-shadow: 2px 2px 0 var(--ink); font-size: 17px; line-height: 1; padding: 0; cursor: pointer; }
.chatbtn.on { background: #fff3c8; transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.chatbadge { position: absolute; top: -7px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; border: 2px solid var(--ink); font: 800 10px/14px var(--display); font-style: normal; text-align: center; box-sizing: border-box; animation: lastcall 1s ease-in-out infinite; }
.chatbadge[hidden] { display: none; }
.chatpanel { position: fixed; z-index: 70; bottom: 124px; right: 10px; width: min(94vw, 380px); max-height: min(72vh, 520px); display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); padding: 10px 12px; animation: popin2 .18s ease-out both; }
.chatpanel[hidden] { display: none; }
@keyframes popin2 { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.chatpanel header { display: flex; align-items: center; justify-content: space-between; }
.chatpanel header b { font: 800 16px var(--display); }
.chatpanel .x { border: 2px solid var(--ink); background: var(--paper-2); border-radius: 999px; width: 28px; height: 28px; font-weight: 800; cursor: pointer; padding: 0; }
.chatpanel .feed { flex: 1; min-height: 120px; max-height: none; margin: 0; }
@media (min-width: 761px) { .chatpanel { bottom: 82px; right: 16px; } }

/* first-time Canter lesson */
.kscore .kteach { font-style: normal; font: 800 12.5px var(--display); background: #fff3c8; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 999px; padding: 3px 10px; white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; animation: lastcall 1.4s ease-in-out infinite; }
.teach .tpull { fill: none; stroke: #fff; stroke-width: 1.1; stroke-dasharray: 2 1.6; stroke-linecap: round; }
.teach .tgo { fill: none; stroke: #7ddc8a; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: tgofade 2.2s ease-in-out infinite; }
.teach .thand { animation: thanddrag 2.2s ease-in-out infinite; }
@keyframes thanddrag { 0% { transform: translateY(0); opacity: 0; } 12% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(20px); opacity: 1; } 75% { transform: translateY(20px); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes tgofade { 0%, 45% { opacity: 0; } 60%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .teach .thand, .teach .tgo, .kscore .kteach { animation: none; } .teach .thand { transform: translateY(10px); } }

/* first-time Paper Army Wars lesson */
.ptip { background: #fff3c8; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 12px; padding: 4px 10px; font-size: 12.5px; line-height: 1.25; text-align: center; max-width: 300px; animation: lastcall 1.6s ease-in-out infinite; }
.paper .lflow { fill: none; stroke: #f08a1c; stroke-width: 1; stroke-dasharray: 2.4 1.8; stroke-linecap: round; animation: lflow 1s linear infinite; }
@keyframes lflow { to { stroke-dashoffset: -8.4; } }
.paper .lring { fill: rgba(244, 180, 42, .18); stroke: #f08a1c; stroke-width: .7; stroke-dasharray: 1.6 1.2; animation: lastcall 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.paper .ltap { font: 800 4px var(--display); fill: #c46a0a; }
.paper .lfrom { font: 700 3.4px var(--display); fill: #8d8672; }
@media (prefers-reduced-motion: reduce) { .ptip, .paper .lflow, .paper .lring { animation: none; } }

/* the Richest tab */
.home-tabs a { white-space: nowrap; }
@media (max-width: 420px) { .home-tabs { gap: 2px; } .home-tabs a { padding: 6px 10px; font-size: 13px; } }
.rich { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.rich li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px; }
.rich li.top1 { background: #fff3c8; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.rich li.top2 { background: #eef2f7; border-color: var(--ink); }
.rich li.top3 { background: #fbeadb; border-color: var(--ink); }
.rich li.me { outline: 3px solid var(--gold); outline-offset: 1px; }
.rich .rk { width: 28px; text-align: center; font: 800 15px var(--display); flex: none; }
.rich .rav { flex: none; }
.rich .rb { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rich .rb b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rich .rb b em { font-style: normal; font-size: 10px; background: var(--gold); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.rich .rb .bar { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rich .rb .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--dot)); }
.rich .rb small { color: var(--muted); font-size: 11px; }
.rich .rn { text-align: right; flex: none; display: grid; }
.rich .rn b { font-size: 15px; color: var(--teal); }
.rich .rn small { font-size: 10px; color: var(--muted); }

/* Ayo sowing animation */
.pit.drop { animation: pitdrop .3s ease-out; }
@keyframes pitdrop { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }
.pit.drop .seeds i:last-child { animation: seedin .3s ease-out; }
@keyframes seedin { from { translate: 0 -26px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.pit.grab { box-shadow: 0 0 0 3px var(--live); animation: grabpulse .3s ease-in-out infinite alternate; }
@keyframes grabpulse { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.08); filter: brightness(1.35); } }
.handchip { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; font: 800 12px var(--mono); padding: 0 6px; white-space: nowrap; animation: handfloat .5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes handfloat { from { margin-top: 0; } to { margin-top: -3px; } }
.ayo .store.gain b { animation: storepop .55s ease-out; }
@keyframes storepop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pit.drop, .pit.drop .seeds i:last-child, .pit.grab, .handchip, .ayo .store.gain b { animation: none; } }

/* install as an app */
.installcard { display: flex; align-items: center; gap: 10px; background: #efe8ff; border: 2px solid var(--ink); border-radius: 12px; padding: 7px 9px; box-shadow: 3px 3px 0 var(--ink); }
.installcard .gift { font-size: 22px; }
.installcard div { flex: 1; display: grid; }
.installcard b { font-size: 14px; }
.installcard small { color: var(--muted); font-size: 12px; line-height: 1.25; }
button.install-banner { width: 100%; font: inherit; font-weight: 700; text-align: left; cursor: pointer; background: #efe8ff; }

/* nothing on the profile may be wider than the screen, even with a long username on a small phone */
.invite, .inv-top, .inv-code { min-width: 0; }
.inv-code b { min-width: 0; }
.inv-top > div { min-width: 0; }
.me-id h1 { min-width: 0; }
@media (max-width: 340px) {
  .mobilebar .logo span:last-child { display: none; }
  .mobilebar .purse { min-width: 0; }
  .mobilebar .purse a { min-width: 0; }
}

/* "come back to your game" banner and alerts nudge */
.attnbar { position: fixed; z-index: 65; left: 8px; right: 8px; top: 58px; display: flex; align-items: center; gap: 8px; background: #fff3c8; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); padding: 6px 8px 6px 12px; font-size: 14px; animation: popin2 .2s ease-out both; max-width: 640px; margin: 0 auto; }
.attnbar[hidden] { display: none; }
.attnbar .attn-text { flex: 1; min-width: 0; line-height: 1.2; }
.attnbar .attn-text b { font-family: var(--mono); font-size: 17px; }
.attnbar.low { background: #ffd9d4; animation: lastcall .8s ease-in-out infinite; }
.attnbar .attn-x { border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 4px 6px; }
@media (min-width: 900px) { .attnbar { top: 12px; } }
.alertsprompt { flex: 1 0 100%; text-align: left; font: inherit; font-weight: 700; font-size: 13px; background: #fff3c8; border: 2px dashed var(--ink); border-radius: 10px; padding: 5px 9px; cursor: pointer; }

/* sign-in extras, forgot password, recovery code */
.forgot { margin: -4px 0 2px; font-size: 13px; text-align: right; }
.forgot a { color: var(--indigo); font-weight: 700; text-decoration: underline; }
.rec-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-panel { display: grid; gap: 6px; }
.rec-panel[hidden] { display: none; }
.rec-panel input, .rec-panel select { width: 100%; font: inherit; padding: 9px 10px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); }
.recovery { display: grid; gap: 6px; min-width: 0; background: #fff6e0; border: 2px solid var(--ink); border-radius: 12px; padding: 7px 9px; box-shadow: 3px 3px 0 var(--ink); }
.recovery .inv-top { display: flex; gap: 8px; align-items: center; min-width: 0; }
.recovery .gift { font-size: 22px; }
.recovery b { font-size: 14px; }
.recovery small { display: block; color: var(--muted); font-size: 12px; line-height: 1.25; }
.rec-out { display: grid; gap: 2px; background: #fff3c8; border: 2px dashed var(--ink); border-radius: 10px; padding: 8px; text-align: center; }
.rec-out b { font-size: 22px; letter-spacing: 2px; user-select: all; }
.rec-out small { color: var(--muted); font-size: 11px; }

/* the chat bar that stays at the bottom of the screen during a game */
.chatdock { position: fixed; z-index: 65; left: 0; right: 0; bottom: 62px; padding: 6px 8px; background: var(--paper, #fbf3e4); border-top: 2px solid var(--ink); }
.chatdock .cd-form { display: flex; align-items: center; gap: 6px; }
.chatdock input { flex: 1; min-width: 0; height: 38px; font: inherit; font-size: 15px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; }
.chatdock input:disabled { background: var(--paper-2, #efe5d0); color: var(--muted); }
.cd-plus, .cd-send { flex: none; height: 38px; border-radius: 999px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; padding: 0; }
.cd-plus { min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; background: #fff3c8; font-size: 20px; line-height: 1; }
.cd-plus b { font: 800 15px var(--display); margin-top: -2px; }
.cd-plus.on { background: var(--gold); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.cd-send { width: 40px; background: var(--indigo); color: #fff; font-size: 16px; }
.chatdock .chatbtn { width: 42px; height: 38px; }
.cd-tray { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); display: grid; gap: 8px; padding: 8px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); animation: popin2 .15s ease-out both; }
.cd-tray[hidden] { display: none; }
.cd-emojis { display: flex; gap: 6px; }
.cd-emojis button { flex: 1; height: 42px; font-size: 22px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; padding: 0; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.cd-emojis button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.cd-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-quick button { font: 700 13px var(--display); padding: 6px 11px; border-radius: 999px; border: 2px solid var(--ink); background: #fff3c8; cursor: pointer; }
.cd-quick button:disabled { opacity: .45; cursor: not-allowed; }
.cd-last { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); text-align: left; font: 500 14px var(--body, inherit); background: var(--gold); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 7px 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-last[hidden] { display: none; }
.cd-last.flash { animation: cdflash .5s ease-out both; }
@keyframes cdflash { 0% { transform: translateY(10px) scale(.96); opacity: 0; } 60% { transform: translateY(-2px) scale(1.02); opacity: 1; } 100% { transform: none; } }
body.chatdock-on { padding-bottom: 122px; }
body.chatdock-on .toast { bottom: 172px; }
@media (min-width: 761px) {
  .chatdock { left: auto; right: 16px; bottom: 16px; width: 380px; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
  body.chatdock-on { padding-bottom: 0; }
  body.chatdock-on .toast { bottom: 100px; }
}

/* quests */
.nav .navbadge { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--live); color: #fff; border: 2px solid var(--ink); font: 800 10px/12px var(--display); font-style: normal; text-align: center; animation: lastcall 1.2s ease-in-out infinite; }
.nav .navbadge[hidden] { display: none; }
.quests-page { display: grid; gap: 8px; align-content: start; }
.q-head h1 { margin: 0; font-size: 28px; line-height: 1.05; }
.q-sub { margin: 4px 0 6px; font-size: 14px; }
.q-meter { display: grid; gap: 4px; }
.q-track { display: block; height: 12px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); overflow: hidden; }
.q-track i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, var(--gold)); transition: width .4s ease; }
.q-meter small { color: var(--muted); font-size: 12px; }
.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.quest { display: flex; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 10px; box-shadow: 2px 2px 0 var(--ink); min-width: 0; }
.quest.done:not(.claimed) { background: #fff3c8; }
.quest.claimed { opacity: .7; box-shadow: none; }
.q-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; background: var(--paper-2, #efe5d0); border: 2px solid var(--ink); border-radius: 12px; }
.q-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.q-main b { font-size: 14px; line-height: 1.2; }
.q-main small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.q-bar { display: block; height: 7px; margin-top: 3px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line, #d8cdb6); overflow: hidden; }
.q-bar i { display: block; height: 100%; background: #22c55e; }
.q-end { flex: none; display: grid; justify-items: end; gap: 4px; text-align: right; }
.q-gift { font-size: 13px; white-space: nowrap; }
.q-end small { color: var(--muted); font-size: 11px; }
.q-got { font-style: normal; font-size: 12px; font-weight: 800; color: #1f7a3a; }
.q-note { margin: 2px 0 0; }
@media (max-width: 400px) { .nav { padding: 4px 8px; } }

.nav .navbadge.new { min-width: 11px; width: 11px; height: 11px; padding: 0; top: -3px; right: -6px; background: #22c55e; font-size: 0; animation: none; }
.q-next { display: grid; gap: 4px; background: #eaf3ff; border: 2px dashed var(--ink); border-radius: 14px; padding: 8px 10px; }
.q-next b { font-size: 14px; }
.q-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.q-next li { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.q-next li span { width: 22px; text-align: center; }
.q-next small { color: var(--muted); font-size: 12px; }

/* loading placeholder, shown at once on a first visit while the data arrives */
.skel { display: grid; gap: 8px; align-content: start; }
.sk { border-radius: 12px; background: linear-gradient(90deg, #ece2cd 25%, #f6efe2 45%, #ece2cd 65%); background-size: 300% 100%; animation: skshine 1.1s ease-in-out infinite; }
.sk-title { height: 26px; width: 55%; }
.sk-row { height: 54px; border: 2px solid var(--line, #d8cdb6); }
@keyframes skshine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* the one-time alerts nudge in a game */
.alertsrow { flex: 1 0 100%; display: flex; gap: 6px; align-items: stretch; }
.alertsrow .alertsprompt { flex: 1; }
.alertsprompt.ios { cursor: default; display: block; }
.alertsx { flex: none; width: 34px; border: 2px solid var(--ink); background: var(--paper-2, #efe5d0); border-radius: 10px; font-weight: 800; cursor: pointer; padding: 0; }

.alertstest { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: var(--card); border: 1.5px dashed var(--ink); border-radius: 10px; padding: 5px 9px; }
.alertstest small { color: var(--muted); font-size: 12px; line-height: 1.25; min-width: 0; }
.alertstest small.bad { color: #b42318; }

/* the profile in three tabs */
.me-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--paper-2); box-shadow: 2px 2px 0 var(--ink); }
.me-tabs button { position: relative; border: 0; border-right: 2px solid var(--ink); background: transparent; padding: 9px 4px; font: 700 14px var(--display); cursor: pointer; }
.me-tabs button:last-child { border-right: 0; }
.me-tabs button.on { background: var(--gold); }
.mt-badge { margin-left: 5px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.me-tabs button.on .mt-badge { background: #fff; color: var(--ink); }
.me-panel { display: grid; gap: 8px; align-content: start; min-width: 0; }
.me-panel[hidden] { display: none; }
.set-group { display: grid; gap: 6px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 10px 10px; box-shadow: 2px 2px 0 var(--ink); min-width: 0; }
.set-group h3 { margin: 0 0 2px; font: 800 12px var(--display); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1.5px solid var(--line, #e3d9c3); }
.set-row:first-of-type { border-top: 0; }
.set-text { min-width: 0; display: grid; gap: 1px; }
.set-text b { font-size: 14px; }
.set-text small { color: var(--muted); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.set-group .installcard, .set-group .recovery { box-shadow: none; }

/* Tic-Tac-Toe */
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 330px); background: #0f766e; padding: 10px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); margin: 0 auto; }
.tcell { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--paper); font: 800 clamp(34px, 12vw, 58px)/1 var(--display); color: var(--ink); display: grid; place-items: center; padding: 0; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); transition: transform .12s, background .15s; }
.tcell.p0 { color: var(--clay); }
.tcell.p1 { color: var(--indigo-2); }
.tcell.ok { cursor: pointer; }
.tcell.ok:hover { background: #fff7d6; transform: translateY(-2px); }
.tcell:disabled { cursor: default; }
.tcell.last { animation: tpop .25s ease-out; }
.tcell.win { background: var(--gold); outline: 3px solid var(--ink); }
@keyframes tpop { from { transform: scale(.4); } to { transform: scale(1); } }

/* Reversi */
.rev { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: min(100%, 440px); background: #14532d; padding: 8px; border-radius: 16px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); margin: 0 auto; }
.rcell { aspect-ratio: 1; border: 0; background: #1f7a3a; padding: 3px; display: grid; place-items: center; border-radius: 4px; position: relative; }
.rcell.ok { cursor: pointer; }
.rcell.ok::after { content: ''; width: 24%; height: 24%; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.rcell.ok:hover { background: #2a9150; }
.rcell:disabled { cursor: default; }
.rev .disc { width: 86%; height: 86%; border-radius: 50%; display: block; box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.rev .disc.p0 { background: #17171c; }
.rev .disc.p1 { background: #f4f1ea; }
.rev .disc.flip { animation: rflip .45s ease-out; }
.rev .disc.last { outline: 3px solid var(--gold); }
@keyframes rflip { 0% { transform: scaleX(1); } 50% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
.side.g-tictactoe.s0 { background: var(--clay); } .side.g-tictactoe.s1 { background: var(--indigo-2); }
.side.g-reversi.s0 { background: #17171c; } .side.g-reversi.s1 { background: #f4f1ea; }

/* "How to play" demo */
body.demo-open { overflow: hidden; }
.demo-back { position: fixed; inset: 0; z-index: 80; background: rgba(12, 14, 30, .72); display: grid; place-items: center; padding: 12px; overflow-y: auto; }
.demo-card { grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); max-height: 100%; overflow-y: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); padding: 14px 14px 16px; display: grid; gap: 10px; }
.demo-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo-card header b { font: 800 18px var(--display); color: var(--v); }
#demoTop:empty, #demoBot:empty { display: none; }
.demo-card .strip { margin: 0; }
.demo-cap { margin: 0; min-height: 3.1em; font: 700 16px/1.3 var(--display); color: var(--ink); background: #fff7d6; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; }
.demo-cap.pop { animation: demopop .3s ease-out; }
@keyframes demopop { from { transform: translateY(5px); opacity: .2; } to { transform: none; opacity: 1; } }
.demo-board { pointer-events: none; user-select: none; min-height: 180px; display: grid; align-items: center; }
.demo-board .board-wrap { width: 100%; }
.demo-load { text-align: center; color: var(--muted, #667); }
.demo-rule { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.demo-bar { height: 6px; background: rgba(0, 0, 0, .12); border-radius: 4px; overflow: hidden; }
.demo-bar i { display: block; height: 100%; width: 0; background: var(--v); transition: width .4s linear; }
.demo-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.venue-hero .howto { position: absolute; top: 14px; right: 14px; }
.demo-board .w-said { display: none; } /* the caption under the board already says what happened */

/* Sponsors */
.sponsorbar { margin-top: 10px; max-width: 520px; position: relative; }
.sponsorbar:empty { display: none; }
.sp-invite { border: 2px dashed var(--ink); background: rgba(255, 255, 255, .55); border-radius: 12px; padding: 6px 12px; font: 700 13px var(--display); color: var(--ink); cursor: pointer; }
.sp-card { display: grid; grid-template-columns: 1fr; gap: 6px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; position: relative; }
.sp-card .sp-img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; background: #f3ead2; }
.sp-noimg { display: grid; place-items: center; font-size: 34px; }
.sp-text { display: grid; gap: 2px; padding: 0 10px; }
.sp-text small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a6a00; }
.sp-text b { font: 800 16px/1.2 var(--display); }
.sp-text > span { font-size: 13px; color: #3a3a52; }
.sp-go { justify-self: start; margin: 0 10px 10px; font: 800 12px var(--display); background: var(--gold); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px; }
.sp-card.small { grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; padding-right: 8px; box-shadow: 2px 2px 0 var(--ink); }
.sp-card.small .sp-img { aspect-ratio: 2 / 1; height: 100%; min-height: 40px; }
.sp-card.small .sp-noimg { font-size: 22px; }
.sp-card.small .sp-text { padding: 6px 0; }
.sp-card.small .sp-text b { font-size: 14px; }
.sp-card.small .sp-go { margin: 0; padding: 2px 8px; }
.sp-dots { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.sp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.sp-dots i.on { background: var(--ink); }
.sp-list { display: grid; gap: 12px; margin: 8px 0 14px; }
.sp-buy { background: #fff7d6; border: 2px solid var(--ink); border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.sp-price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sp-price b { font-size: 24px; }
.sp-price em { margin-left: auto; font-size: 12px; font-weight: 700; color: #8a6a00; font-style: normal; }
.sp-weeks { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-mine { border: 2px solid var(--ink); border-radius: 14px; padding: 10px; margin: 8px 0; display: grid; gap: 8px; background: #fff; }
.sp-mine-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sp-form { display: grid; gap: 8px; }
.sp-form label { display: grid; gap: 3px; font-size: 12px; font-weight: 800; }
.sp-form input[type=text], .sp-form input[type=url], .sp-form input:not([type]) { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; font: 500 15px var(--body, inherit); background: #fff; }
.sp-pic { display: flex; gap: 10px; align-items: center; }
.sp-pic > div { display: grid; gap: 6px; justify-items: start; }
.sp-preview { width: 120px; aspect-ratio: 2 / 1; flex: none; border: 2px dashed var(--ink); border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 12px; color: #667; background: #f3ead2; }
.sp-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sponsor tiles and the expanded ad */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.sp-tile { display: grid; grid-template-rows: auto 1fr; text-align: left; padding: 0; border: 2px solid var(--ink); border-radius: 12px; background: #fff; box-shadow: 2px 2px 0 var(--ink); overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); transition: transform .12s; }
.sp-tile:hover, .sp-tile:focus-visible { transform: translateY(-2px); }
.sp-tile .sp-img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; background: #f3ead2; }
.sp-tile .sp-noimg { font-size: 26px; }
.sp-tile-text { display: grid; gap: 1px; padding: 6px 8px 8px; align-content: start; }
.sp-tile-text small { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a6a00; }
.sp-tile-text b { font: 800 13px/1.2 var(--display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tile.free { background: rgba(255, 255, 255, .5); border-style: dashed; box-shadow: none; }
.sp-tile.free .sp-noimg { color: #8a6a00; }
.sp-card.as-button { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.sp-back { position: fixed; inset: 0; z-index: 85; background: rgba(12, 14, 30, .72); display: grid; place-items: center; padding: 12px; overflow-y: auto; }
.sp-open { width: min(100%, 460px); background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.sp-open .sp-img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; background: #f3ead2; }
.sp-open .sp-noimg { font-size: 54px; }
.sp-open-body { display: grid; gap: 8px; padding: 12px 14px 14px; justify-items: start; }
.sp-open-body small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a6a00; }
.sp-open-body h3 { margin: 0; font: 800 22px/1.15 var(--display); }
.sp-open-body p { margin: 0; font-size: 15px; line-height: 1.4; color: #2b2b44; }
.sp-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-contact .btn { text-decoration: none; }
.sp-actions, .sp-form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-form select { border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; font: 500 15px inherit; background: #fff; }
.sponsor-set h3 small { font-weight: 600; font-size: 12px; opacity: .7; }

/* moderation */
.sp-chip { font: 800 11px var(--display); text-transform: uppercase; letter-spacing: .04em; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 8px; background: #fff; }
.sp-chip.wait { background: #fff0b8; }
.sp-chip.no { background: #ffd3cf; }
.sp-why { margin: 0; font-size: 13px; background: #ffe9e6; border-radius: 8px; padding: 6px 8px; }
.sp-thumb { width: 100%; max-width: 280px; aspect-ratio: 2 / 1; object-fit: cover; border: 2px solid var(--ink); border-radius: 10px; display: block; }
.sp-submit { border-top: 2px dashed var(--ink); padding-top: 10px; display: grid; gap: 6px; }
.sp-open-actions { display: flex; gap: 12px; align-items: center; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; text-decoration: underline; color: #7a2a24; cursor: pointer; }
.sp-report { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.sp-report[hidden] { display: none; }
.sp-count { font: 800 12px var(--display); background: #ddd; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.sp-count.hot { background: #ef4444; color: #fff; }
.sp-q { border: 2px solid var(--ink); border-radius: 12px; padding: 10px; margin: 8px 0; display: grid; gap: 6px; background: #fff; }
.sp-q.report { background: #fff4f2; }
.sp-q p { margin: 0; font-size: 14px; }
.sp-q-head { display: grid; gap: 1px; }
.sp-q-head small { color: #667; }
.sp-q-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-q-actions input, .sp-q-actions select { border: 2px solid var(--ink); border-radius: 10px; padding: 6px 8px; font: 500 14px inherit; background: #fff; flex: 1; min-width: 0; }
.sp-check { display: flex !important; grid-template-columns: none; gap: 8px; align-items: center; font-weight: 700; }
.sp-queue { margin-top: 12px; }

/* a move is on its way */
.board-wrap.sending { opacity: .72; pointer-events: none; transition: opacity .08s; position: relative; }
.board-wrap.sending::after { content: ''; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); border-top-color: transparent; animation: sendspin .7s linear infinite; background: rgba(255, 255, 255, .6); }
@keyframes sendspin { to { transform: rotate(360deg); } }

/* recovery codes from friends */
.rec-who { display: flex; gap: 6px; }
.rec-warn { display: grid; gap: 4px; background: #ffe9e6; border: 2px solid #b4231f; border-radius: 10px; padding: 8px; }
.rec-send { margin-top: 4px; }
.rec-issued { display: grid; gap: 4px; font-size: 13px; }
.rec-issued > div { display: flex; gap: 8px; align-items: center; }
.rec-issued em { font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.rec-issued .st-waiting { color: #8a6a00; } .rec-issued .st-used { color: #1f7a3a; } .rec-issued .st-expired, .rec-issued .st-cancelled { color: #888; }
#recFriend { border: 2px solid var(--ink); border-radius: 10px; padding: 7px 10px; font: 500 15px inherit; background: #fff; }
.rec-how { display: grid; gap: 4px; }
.gift-banner.warn { background: #ffe9e6; border-color: #b4231f; color: #7a1913; }

/* offline */
.offbar { position: sticky; top: 0; z-index: 60; background: #1b2566; color: #fff; padding: 8px 12px; display: flex; gap: 12px; align-items: center; justify-content: center; font: 700 14px var(--display); border-bottom: 3px solid var(--ink); }
.offbar[hidden] { display: none; }
.offbar .btn { text-decoration: none; }
.gift-banner.off { background: #e9eefc; border-color: #2b3a8c; color: #1b2566; }
.off-note { background: #fff7d6; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; margin: 8px 0 12px; display: grid; gap: 4px; }
.off-note p { margin: 0; font-size: 14px; line-height: 1.4; }
.off-state { font-weight: 800; color: #b4231f; }
.pot-chip.off { background: #e9eefc; }
.off-tiles .gtile { cursor: pointer; }
body.is-offline .rail .nav, body.is-offline .tabbar .nav { display: none; }