/* App chrome + component styles. Theme tokens come from themes.css only. */

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* classes set display; hidden must still win */
.svg-defs, .chess-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* shared SVG defs must not take layout space */
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
img, svg { display: block; max-width: 100%; }

body { user-select: none; -webkit-user-select: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

.app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0 16px 40px; flex: 1; display: flex; flex-direction: column; }

.boot-splash { display: grid; place-items: center; min-height: 100dvh; }
.boot-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); box-shadow: var(--glow) var(--accent); animation: bootpulse 1.2s ease-in-out infinite; }
@keyframes bootpulse { 0%,100% { transform: scale(1); opacity: .8 } 50% { transform: scale(1.12); opacity: 1 } }

.muted { color: var(--ink-2); }
.spacer { flex: 1; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-size: clamp(22px, 4vw, 28px); font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); box-shadow: var(--glow) var(--accent); display: grid; place-items: center; flex: none; }
.brand .mark svg { width: 24px; height: 24px; }

.family { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 600; font-size: 14px; min-height: 44px; color: var(--ink); }
.chip.me { border-color: var(--accent); box-shadow: var(--glow) var(--accent); }

/* ---------- avatars ---------- */
.av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.22); }
.av svg { width: 78%; height: 78%; }
.av.big { width: 84px; height: 84px; }
.av.med { width: 48px; height: 48px; }
.av.guest { background: var(--surface-2); border: 2px dashed var(--ink-2); color: var(--ink-2); font-weight: 800; font-size: 1.2em; display: grid; place-items: center; }

/* ---------- login ---------- */
.login { display: grid; place-content: center; gap: 30px; flex: 1; text-align: center; padding-bottom: 8vh; }
.login .brand { justify-content: center; font-size: clamp(30px, 7vw, 48px); }
.login-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.face { display: grid; justify-items: center; gap: 8px; padding: 18px 14px 14px; min-width: 128px; border-radius: var(--radius); background: var(--tile-grad); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.face:active { transform: scale(.97); }
.face:hover { border-color: var(--accent); }
.face-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.face-sub { font-size: 12px; color: var(--accent); }
.login-hint { font-size: 13px; color: var(--ink-2); }

/* ---------- hub ---------- */
.rivalry { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius); background: var(--tile-grad); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 18px; }
.rivalry .who { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.rivalry .who:last-child { justify-content: flex-end; }
.rivalry .score { font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); text-shadow: var(--glow) var(--accent); white-space: nowrap; }
.rivalry .cap { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); text-align: center; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--tile-grad); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; min-height: 132px; display: grid; align-content: space-between; gap: 10px; text-align: left; color: var(--ink); transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tile:active { transform: scale(.97); }
.tile .ico { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
.tile .ico svg { width: 36px; height: 36px; }
.tile .nm { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.tile .sub { font-size: 12px; color: var(--ink-2); }
.tile.soon { opacity: .55; border-style: dashed; cursor: default; }
.tile.soon:hover, .tile.soon:active { transform: none; border-color: var(--line); }

.footlinks { display: flex; gap: 20px; justify-content: center; padding: 26px 0 10px; flex-wrap: wrap; }
.footlinks a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

.section-title { font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 10px; }

/* ---------- back bar ---------- */
.backbar { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.backbar-title { font-size: clamp(22px, 4vw, 30px); margin: 0; }
.backbar-spacer { width: 74px; }

/* ---------- buttons / keys ---------- */
.btn { font: 700 15px/1.2 var(--font-body); min-height: 48px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 10px 18px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: var(--glow) var(--accent), inset 0 -3px 0 rgba(0,0,0,.2); }
.btn.danger { color: #fff; background: var(--accent-2); border-color: transparent; }
.btn.big { min-height: 60px; font-size: 18px; width: 100%; }
.btn.ghost-btn { background: transparent; box-shadow: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.key { height: 60px; min-width: 64px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 700 22px/1 var(--font-display); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.key:active { transform: translateY(1px); }
.key.ghost { background: transparent; font-family: var(--font-body); font-size: 13px; box-shadow: none; border: none; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 16px; }
.turn { display: flex; align-items: center; gap: 12px; min-width: 0; }
.turn .av { width: 48px; height: 48px; }
.turn.active .av { box-shadow: 0 0 0 3px var(--accent), var(--glow) var(--accent), inset 0 -4px 0 rgba(0,0,0,.18); }
.turn .t1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.turn .t2 { font-size: 13px; color: var(--ink-2); }
.turn.waiting .av { opacity: .45; filter: grayscale(.6); }
.turn.waiting .t2 { color: var(--accent-2); font-weight: 700; }
.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap { background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 12px; display: grid; gap: 4px; }
.cap b { font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.cap span { font-size: 12px; color: var(--ink-2); }
.cap .tray { display: flex; gap: 2px; margin-top: 2px; flex-wrap: wrap; }
.cap .tray i { width: 16px; height: 16px; display: block; }
.cap .tray svg { width: 100%; height: 100%; overflow: visible; }
.btns { display: grid; gap: 8px; }

/* ---------- game table layout ---------- */
.game { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; flex: 1; }
@media (max-width: 820px) { .game { grid-template-columns: 1fr; } }
.table-surface { border-radius: var(--radius); padding: clamp(14px, 3vw, 28px); display: grid; place-items: center; border: 1px solid var(--line); }
/* svh, not dvh: iPad Safari's dvh changes as the toolbar collapses, which
   made boards resize mid-game. svh is the stable (smallest) viewport. */
.rail { padding: clamp(12px, 2.6vw, 20px); border-radius: calc(var(--radius-s) + 6px); width: min(100%, calc(100svh - 345px), 580px); }
@media (max-width: 820px) { .rail { width: min(100%, calc(100svh - 430px), 580px); } }

.board { position: relative; display: grid; aspect-ratio: 1; border-radius: 2px; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.35) inset; }
.sq { position: relative; background: var(--sq-light); }
.sq.d { background: var(--sq-dark); }
.sq.d::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .07; mix-blend-mode: multiply; pointer-events: none; }
.sq .coord { position: absolute; font: 700 9px/1 var(--font-body); opacity: .55; color: var(--sq-light); pointer-events: none; z-index: 1; }
.sq:not(.d) .coord { color: var(--sq-dark); }
.sq .coord.f { right: 3px; bottom: 2px; }
.sq .coord.r { left: 3px; top: 2px; }
.sq.hint::before { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--accent); opacity: .9; box-shadow: 0 0 0 3px rgba(0,0,0,.2), var(--glow) var(--accent); animation: pulse 1.4s ease-in-out infinite; z-index: 2; }
.sq.sel { box-shadow: inset 0 0 0 4px var(--accent); }
.sq.last { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--accent) 28%, transparent); }
.sq.win { animation: winpulse .7s ease-in-out 3; }
@keyframes pulse { 0%,100% { transform: scale(.9); opacity: .75 } 50% { transform: scale(1.08); opacity: 1 } }
@keyframes winpulse { 0%,100% { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--accent) 20%, transparent); } 50% { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--accent) 45%, transparent); } }

.pc { position: absolute; inset: 6%; z-index: 2; }
.pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pc.lift { transform: translateY(-9%) scale(1.08); filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)); z-index: 3; }
.pc.lift svg { animation: hoverbob 1.6s ease-in-out infinite; }
@keyframes hoverbob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2%) } }

/* ---------- chess piece stand-ins ---------- */
.cp .body { fill: url(#gA); stroke: rgba(0,0,0,.55); stroke-width: 1.6; stroke-linejoin: round; }
.cp.s1 .body { fill: url(#gB); }
.cp .hl { fill: #fff; opacity: var(--gloss); }
.cp .cross { fill: var(--accent); stroke: rgba(0,0,0,.5); stroke-width: 1; }
.cp .shadow { fill: #000; opacity: .35; filter: url(#blur); }

/* ---------- quarto pieces ---------- */
.qp .shadow { fill: #000; opacity: .35; filter: url(#blur); }
.qp .side, .qp .top, .qp .side-r { stroke: rgba(0,0,0,.4); stroke-width: 1.3; stroke-linejoin: round; }
.qp .hole { stroke: rgba(0,0,0,.5); stroke-width: 1; }
.qp.light .side { fill: url(#qL); }
.qp.light .top { fill: var(--q-light); }
.qp.light .top-edge { stroke: var(--q-light-2); }
.qp.dark .side { fill: url(#qD); }
.qp.dark .top { fill: color-mix(in srgb, var(--q-dark) 70%, #fff 10%); }
.qp.dark .top-edge { stroke: var(--q-dark-2); }
.qp .top-edge { fill: none; stroke-width: 1.2; }
.qp.light .side-r { fill: var(--q-light-2); }
.qp.dark .side-r { fill: var(--q-dark-2); }
.qp .hole { fill: color-mix(in srgb, var(--q-dark-2) 80%, #000); }
.qp.light .hole { fill: var(--q-light-2); }
.qp .gloss { fill: #fff; opacity: calc(var(--gloss) * .7); }

/* ---------- mancala pits ---------- */
.pit .bowl { fill: url(#bowl); }
.pit .rim { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.pit .bead { stroke: rgba(0,0,0,.35); stroke-width: .8; }
.pit .bead-hl { fill: #fff; opacity: .55; }
.pit .count { font: 700 22px var(--font-display); fill: var(--ink); paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; }

/* ---------- cards ---------- */
.card { width: 92px; aspect-ratio: 5/7; border-radius: 9px; position: relative; box-shadow: 0 8px 16px rgba(0,0,0,.38), 0 0 0 1px rgba(0,0,0,.18); overflow: hidden; transition: transform .25s; background: var(--card-face); }
.card svg { width: 100%; height: 100%; display: block; }
.card.tilt { transform: rotate(-7deg) translateY(-6px); }
.card.tilt2 { transform: rotate(-2deg) translateY(-10px); margin-left: -76px; }
.cf .paper { fill: var(--card-face); }
.cf .ink { fill: var(--card-ink); }
.cf.red .ink { fill: var(--card-red); }
.cf .frame { fill: none; stroke: var(--card-ink); stroke-width: .8; opacity: .35; }
.cf.red .frame { stroke: var(--card-red); }
.cf .mono { font: 700 44px var(--font-display); }
.cf .idx { font: 700 13px var(--font-body); }
.cb .base { fill: var(--card-back); }
.lattice { stroke: var(--card-back-2); stroke-width: .9; opacity: .55; fill: none; }
.cb .border { fill: none; stroke: var(--card-back-2); stroke-width: 1.2; }
.cb .border2 { fill: none; stroke: var(--card-back-2); stroke-width: .6; opacity: .8; }
.cb .medal { fill: var(--card-back); stroke: var(--card-back-2); stroke-width: 1.2; }
.cb .medal-ink { fill: var(--card-back-2); }

/* ---------- pin pad ---------- */
.pin { justify-items: center; text-align: center; min-width: min(320px, 86vw); }
.pin .dots { display: flex; gap: 12px; justify-content: center; }
.pin .dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-2); }
.pin .dots i.f { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow) var(--accent); }
.pin-err { min-height: 18px; font-size: 13px; color: var(--accent-2); font-weight: 700; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(64px, 76px)); gap: 10px; justify-content: center; }
.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }

/* ---------- overlay / sheets ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: grid; place-items: center; padding: 18px; animation: fadein .16s ease-out; backdrop-filter: blur(3px); }
.overlay.closing { opacity: 0; transition: opacity .15s; }
.overlay .sheet { max-width: min(480px, 94vw); max-height: 88dvh; overflow: auto; animation: sheetup .2s cubic-bezier(.2,.8,.2,1); }
.overlay .sheet > * { margin: 0; }
@keyframes fadein { from { opacity: 0 } }
@keyframes sheetup { from { transform: translateY(18px); opacity: .6 } }
.confirm { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: grid; gap: 14px; min-width: min(340px, 86vw); }
.confirm h3 { margin: 0; }
.confirm .row { display: flex; gap: 10px; }
.confirm .row .btn { flex: 1; }
.picker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: grid; gap: 16px; }
.picker h3 { margin: 0; text-align: center; }
.picker-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.picker-grid .face { min-width: 108px; padding: 14px 10px 12px; }

.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); padding: 12px 22px; font-weight: 700; font-size: 14px; animation: toastup .25s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
@keyframes toastup { from { transform: translate(-50%, 14px); opacity: 0 } }

/* ---------- result ---------- */
.result-screen { display: grid; place-content: center; flex: 1; }
.result { display: grid; gap: 14px; text-align: center; justify-items: center; padding: 30px; min-width: min(420px, 92vw); position: relative; overflow: hidden; }
.result .crownbig { width: 72px; height: 72px; animation: crowndrop .5s cubic-bezier(.3,1.4,.5,1); }
.result .crownbig svg { width: 100%; height: 100%; overflow: visible; }
.result .big { font-family: var(--font-display); font-size: clamp(30px, 6vw, 40px); font-weight: 700; line-height: 1; }
.result .delta { font-size: 15px; color: var(--ink-2); }
.result .delta b { color: var(--accent); font-variant-numeric: tabular-nums; }
.result .row { display: flex; gap: 8px; width: 100%; }
.result .row .btn { flex: 1; }
.result .av.med { animation: crowndrop .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes crowndrop { from { transform: translateY(-40px) scale(.6); opacity: 0 } }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: confetti 1.5s ease-in forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(75vh) rotate(560deg); }
}

/* ---------- setup ---------- */
.setup { display: grid; gap: 18px; max-width: 640px; margin: 0 auto; width: 100%; }
.seats { display: grid; gap: 10px; }
.seatrow { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; min-height: 68px; }
.seatrow .face-name { font-size: 17px; }
.seatrow .seat-tag { font-size: 12px; color: var(--ink-2); display: block; }
.seatrow.empty { border-style: dashed; color: var(--ink-2); font-weight: 700; justify-content: center; cursor: pointer; }
.seatrow.empty:hover { border-color: var(--accent); color: var(--ink); }
.seatrow .kick { margin-left: auto; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; flex-wrap: wrap; }
.optlabel { font-weight: 700; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn { font: 600 14px/1 var(--font-body); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); padding: 12px 16px; border-radius: 999px; min-height: 44px; }
.seg-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: var(--glow) var(--accent); }
.toggle { width: 58px; height: 34px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); position: relative; transition: background .18s; flex: none; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink-2); transition: transform .18s, background .18s; }
.toggle[aria-checked="true"] { background: var(--accent); border-color: transparent; }
.toggle[aria-checked="true"] .knob { transform: translateX(24px); background: #fff; }

/* ---------- stats ---------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0 14px; }
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.stat-table td { padding: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.stat-table .who-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.stat-table .num { text-align: right; }
.dots10 { display: inline-flex; gap: 4px; }
.dots10 i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); opacity: .4; }
.dots10 i.a { background: var(--accent); opacity: 1; }
.dots10 i.b { background: var(--accent-2); opacity: 1; }
.h2h-pick { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; }
.recent { display: grid; gap: 8px; }
.recent-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px; font-size: 14px; flex-wrap: wrap; }

/* ---------- profile / family ---------- */
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.theme-card { border-radius: var(--radius-s); border: 2px solid var(--line); overflow: hidden; text-align: left; }
.theme-card.on { border-color: var(--accent); box-shadow: var(--glow) var(--accent); }
.theme-card .swatch { height: 54px; display: flex; }
.theme-card .swatch i { flex: 1; }
.theme-card .l { padding: 8px 10px; font-weight: 700; font-size: 13px; color: var(--ink); background: var(--surface-2); }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-grid .av-pick { border-radius: 50%; padding: 2px; border: 3px solid transparent; }
.avatar-grid .av-pick.on { border-color: var(--accent); }
.color-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.color-grid .col-pick { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.color-grid .col-pick.on { border-color: var(--ink); }
.input { font: 600 16px/1.2 var(--font-body); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px 16px; width: 100%; min-height: 52px; }
.input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.fam-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; flex-wrap: wrap; }
.fam-row .grow { flex: 1; min-width: 120px; }
.fam-row .mini-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.fam-row .btn { min-height: 42px; padding: 6px 12px; font-size: 13px; }

/* ---------- move log ---------- */
.movelog { max-height: 180px; overflow-y: auto; background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 14px; font-size: 13px; color: var(--ink-2); display: grid; gap: 3px; }
.movelog div { border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.movelog div:last-child { border-bottom: none; color: var(--ink); }

/* ---------- Heidi (5-win streak easter egg) ---------- */
.heidi { position: absolute; bottom: 6px; left: -80px; width: 64px; height: 64px; z-index: 5;
  animation: heiditrot 3.2s linear forwards; pointer-events: none; }
.heidi svg { width: 100%; height: 100%; animation: heidibounce .4s ease-in-out infinite; }
@keyframes heiditrot { from { left: -80px; } to { left: calc(100% + 30px); } }
@keyframes heidibounce { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

/* ---------- misc ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.center { text-align: center; }
.timerbar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.timerbar i { display: block; height: 100%; background: var(--accent); transition: width .3s linear; }

@media (max-width: 480px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .picker-grid .face { min-width: 92px; }
  .av.big { width: 68px; height: 68px; }
}