/* ==========================================================================
   SignBuddy - web edition theme
   Fantasy "learn, play, connect" look: parchment boards on wooden frames,
   gem-studded buttons, wizard avatars, enchanted forest + library scenes.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;700;800&family=Lilita+One&display=swap');

:root {
  --purple: #6d3fd6; --purple-dark: #4a2a9a; --purple-light: #a77cf7;
  --magenta: #e0479e; --gold: #f3c04b; --gold-dark: #b8860b; --gold-light: #ffe08a;
  --orange: #f28c28; --blue: #3b82f6; --blue-dark: #1e4fb8; --green: #3ea74b; --green-dark: #23702f; --red: #d9432f;
  --parchment: #f7e9cb; --parchment-2: #efd9a8; --parchment-3: #e4c78e; --ink: #3b2717;
  --wood: #8a5a2b; --wood-dark: #5a3a1f; --wood-light: #b27a3f;
  --panel-dark: #1e1b3a; --white: #fff;
  --shadow: 0 10px 30px rgba(20, 10, 40, .35);
  --radius: 18px;
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body); color: var(--ink); background: #1b1f4b;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: .5px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- app shell & backgrounds ---------- */
#app { position: fixed; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .6s ease; }
.bg-forest { background-image: url('../assets/bg-forest.svg'); }
.bg-library { background-image: url('../assets/bg-library.svg'); }
.bg-dim::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,6,30,.25), rgba(10,6,30,.7)); }
.sparkles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sparkles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff8d6; box-shadow: 0 0 10px 3px rgba(255, 240, 180, .7); animation: twinkle 3s ease-in-out infinite; opacity: 0; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transform: scale(.98); transition: opacity .35s ease, transform .35s ease; overflow: auto; }
.screen.active { opacity: 1; pointer-events: auto; transform: none; }
.screen:not(.active) * { pointer-events: none !important; }
.screen-inner { width: min(100%, 1100px); display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ---------- top bar ---------- */
.topbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 5; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.player-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; text-align: left; transition: transform .15s; background: rgba(30, 20, 60, .72); color: #fff; border: 2px solid var(--gold); border-radius: 999px; padding: 4px 14px 4px 4px; backdrop-filter: blur(6px); font-weight: 800; }
.player-chip img { width: 40px; height: 40px; border-radius: 50%; background: var(--parchment); border: 2px solid var(--gold); object-fit: cover; box-shadow: 0 0 0 2px #2d1a5e inset; }
.player-chip small { display: block; font-weight: 600; opacity: .8; font-size: 11px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(30, 20, 60, .72); color: #fff; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: transform .15s; }
.icon-btn:hover { transform: scale(1.08); }

/* ---------- sign board (title) ---------- */
.sign-board { width: min(100%, 680px); position: relative; background: linear-gradient(180deg, var(--parchment), var(--parchment-2)); border: 8px solid var(--wood); border-radius: 26px; padding: 22px 44px 26px; box-shadow: var(--shadow), inset 0 0 0 3px var(--gold), inset 0 0 40px rgba(120, 80, 30, .25); text-align: center; }
.sign-board::before, .sign-board::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); width: 26px; height: 26px; background: linear-gradient(135deg, #9fd8ff, #3b82f6 60%, #1e4fb8); border: 3px solid var(--gold); border-radius: 6px; box-shadow: 0 0 14px rgba(120, 190, 255, .9); }
.sign-board::before { top: -24px; } .sign-board::after { bottom: -24px; }
.ribbon { display: block; width: fit-content; margin: 0 auto 10px; background: linear-gradient(180deg, #7c3aed, #4a2a9a); color: var(--gold-light); font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; padding: 6px 26px; border-radius: 10px; border: 2px solid var(--gold); text-transform: uppercase; font-size: clamp(14px, 2vw, 20px); box-shadow: 0 4px 0 #2d1a5e; }
.logo { display: block; margin: 0 auto; width: min(78vw, 520px); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.tagline { font-family: var(--font-display); font-weight: 600; color: var(--purple-dark); font-size: clamp(14px, 2.2vw, 22px); letter-spacing: 1.5px; margin-top: 4px; }
.tagline b { color: var(--magenta); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; border: 3px solid var(--gold); border-radius: 999px; padding: 12px 34px; font-size: clamp(15px, 1.8vw, 20px); text-shadow: 0 2px 0 rgba(0,0,0,.35); box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.35); transition: transform .12s, box-shadow .12s, filter .15s; min-width: 180px; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.2); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: grayscale(.3); }
.btn::before { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: linear-gradient(135deg, #cdefff, #3b82f6); border: 2px solid var(--gold); border-radius: 4px; }
.btn-purple { background: linear-gradient(180deg, #9b5cf6, #5b2fb8); }
.btn-magenta { background: linear-gradient(180deg, #f06ab8, #b92d78); }
.btn-orange { background: linear-gradient(180deg, #f6a447, #c25e12); }
.btn-blue { background: linear-gradient(180deg, #5aa2ff, #1e4fb8); }
.btn-green { background: linear-gradient(180deg, #67c46f, #23702f); }
.btn-red { background: linear-gradient(180deg, #ef6a55, #a8291a); }
.btn-wood { background: linear-gradient(180deg, #b27a3f, #5a3a1f); }
.btn-sm { padding: 8px 20px; font-size: 14px; min-width: 0; }
.btn-sm::before { display: none; }
.btn-lg { padding: 16px 48px; font-size: clamp(18px, 2.4vw, 26px); }
.btn-ghost { background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff; box-shadow: none; text-shadow: none; }
.btn-ghost::before { display: none; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn-stack { display: flex; flex-direction: column; gap: 14px; align-items: center; width: min(100%, 340px); }
.btn-stack .btn { width: 100%; }

/* ---------- boards / panels ---------- */
.board { position: relative; background: linear-gradient(180deg, var(--parchment), var(--parchment-2) 80%, var(--parchment-3)); border: 7px solid var(--wood); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 0 0 3px var(--gold), inset 0 0 60px rgba(120, 80, 30, .22); padding: 26px 30px 30px; width: min(100%, 720px); text-align: center; }
.board::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 22px; height: 22px; background: linear-gradient(135deg, #9fd8ff, #3b82f6 60%, #1e4fb8); border: 3px solid var(--gold); border-radius: 5px; box-shadow: 0 0 12px rgba(120,190,255,.9); }
.board-title { font-size: clamp(24px, 4vw, 40px); color: var(--ink); text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 2px 0 rgba(255,255,255,.6); margin-bottom: 18px; }
.board-title.banner { display: inline-block; background: linear-gradient(180deg, #ef5a4a, #b3261e); color: #fff; padding: 8px 34px; border-radius: 14px; border: 3px solid var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.35); transform: translateY(-40px); margin-bottom: -22px; box-shadow: 0 6px 0 #7a1810; }
.board p { margin: 6px 0; font-weight: 600; }
.vine { position: absolute; width: 90px; height: 90px; pointer-events: none; opacity: .9; }
.vine.tl { top: -22px; left: -22px; } .vine.tr { top: -22px; right: -22px; transform: scaleX(-1); }
.vine.bl { bottom: -22px; left: -22px; transform: scaleY(-1); } .vine.br { bottom: -22px; right: -22px; transform: scale(-1); }

/* inputs */
.field { width: 100%; max-width: 420px; margin: 8px auto 16px; }
.field input { width: 100%; padding: 14px 18px; border-radius: 14px; border: 3px solid var(--wood); background: #fff9ea; color: var(--ink); font-family: var(--font-display); font-size: 26px; text-align: center; letter-spacing: 3px; text-transform: uppercase; outline: none; box-shadow: inset 0 3px 8px rgba(0,0,0,.15); }
.field input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(109, 63, 214, .25); }
.hint-text { font-size: 14px; color: #6b4b2a; font-weight: 600; }

/* avatars */
.avatar-grid { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 12px 0 22px; }
.avatar-card { width: 190px; background: linear-gradient(180deg, #fff9ea, #f1dcb0); border: 5px solid var(--wood); border-radius: 18px; padding: 12px 12px 10px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: 0 6px 16px rgba(0,0,0,.25); position: relative; }
.avatar-card img { width: 100%; height: 180px; object-fit: contain; }
.avatar-card span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--purple-dark); }
.avatar-card:hover { transform: translateY(-4px); }
.avatar-card.selected { border-color: var(--purple); box-shadow: 0 0 0 5px var(--gold), 0 12px 26px rgba(109,63,214,.45); transform: translateY(-4px) scale(1.03); }
.avatar-card.selected::after { content: '✓'; position: absolute; top: -12px; right: -12px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid #fff; display: grid; place-items: center; font-weight: 900; }

/* ---------- learn gallery ---------- */
.learn-wrap { width: min(100%, 1000px); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; width: 100%; }
.sign-card { background: linear-gradient(180deg, #fff9ea, #f1dcb0); border: 5px solid var(--wood); border-radius: 16px; padding: 10px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.25); position: relative; }
.sign-card .handviz, .sign-card .sign-photo { width: 120px; height: 144px; }
.sign-photo { object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.ref-panel .sign-photo { max-height: 260px; border: 4px solid var(--wood); }
.sign-card .label { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #5c3d2e; line-height: 1; margin-top: -4px; }
.sign-card .hint { font-size: 12px; font-weight: 700; color: #5a3a1f; line-height: 1.3; margin-top: 4px; }
.sign-card .badge { position: absolute; top: -10px; right: -8px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 2px solid #fff; }
.pager { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-display); font-size: 18px; }
.pager .dots { display: flex; gap: 6px; } .pager .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.35); } .pager .dots i.on { background: var(--gold); }
.arrow-btn { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--gold); background: linear-gradient(180deg, #ef5a4a, #b3261e); color: #fff; font-size: 26px; font-weight: 900; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.arrow-btn:disabled { opacity: .35; }

/* ---------- session HUD ---------- */

.hud { width: min(100%, 1180px); display: grid; grid-template-columns: 1fr 1.2fr; grid-template-rows: auto auto 1fr auto; gap: 12px 16px; height: 100%; max-height: 100%; }
.hud-top { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.hud-path { background: rgba(30,20,60,.78); color: #fff; border: 2px solid var(--gold); border-radius: 14px; padding: 8px 14px; font-weight: 800; font-size: 13px; line-height: 1.25; backdrop-filter: blur(6px); justify-self: start; }
.hud-path b { color: var(--gold-light); font-family: var(--font-display); font-size: 15px; }
.hud-score { display: flex; gap: 14px; align-items: center; }
.hud-score .stat { text-align: center; } .hud-score .stat b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--gold-light); line-height: 1; } .hud-score .stat small { font-size: 10px; letter-spacing: 1px; opacity: .8; }
.lives { display: flex; gap: 3px; font-size: 16px; }
.detected { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #f7e9cb, #e4c78e); border: 4px solid var(--wood); border-radius: 999px; padding: 6px 22px; box-shadow: 0 6px 16px rgba(0,0,0,.3), inset 0 0 0 2px var(--gold); font-family: var(--font-display); font-size: clamp(16px, 2.2vw, 24px); color: var(--ink); text-transform: uppercase; letter-spacing: 2px; }
.detected .value { display: inline-grid; place-items: center; min-width: 46px; height: 46px; border-radius: 12px; background: #fff; border: 3px solid var(--purple); color: var(--purple-dark); font-size: 26px; position: relative; overflow: hidden; }
.detected .value i { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--magenta); width: 0; transition: width .08s linear; }
.detected .mascot { font-size: 26px; }
.timer { justify-self: end; position: relative; width: 74px; height: 74px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: #f7e9cb; stroke-width: 7; }
.timer .track { stroke: #b99a68; fill: #f7e9cb; } .timer .prog { stroke: var(--green); fill: none; stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.timer.warn .prog { stroke: var(--orange); } .timer.danger .prog { stroke: var(--red); }
.timer span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.timer.infinite span { font-size: 26px; }
.hud-title { grid-column: 1 / -1; text-align: center; font-family: var(--font-display); font-size: clamp(20px, 3vw, 34px); color: #fff; text-shadow: 0 3px 0 #2d1a5e, 0 6px 16px rgba(0,0,0,.5); letter-spacing: 3px; text-transform: uppercase; min-height: 1.3em; }
.hud-title.good { color: #9ff29a; } .hud-title.bad { color: #ff8f7a; }
.panel { background: linear-gradient(180deg, #fff9ea, #efd9a8); border: 6px solid var(--wood); border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 3px var(--gold); position: relative; min-height: 220px; display: flex; flex-direction: column; overflow: hidden; }
.panel-label { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: linear-gradient(180deg, #4a3020, #2b1810); color: var(--gold-light); font-family: var(--font-display); letter-spacing: 3px; padding: 6px 26px; border-radius: 10px; border: 3px solid var(--gold); font-size: clamp(14px, 1.8vw, 20px); white-space: nowrap; z-index: 2; }
.ref-panel { align-items: center; justify-content: center; padding: 12px 12px 56px; }
.ref-panel .handviz, .ref-panel .sign-photo { height: min(42vh, 300px); width: auto; max-width: 100%; }
.ref-panel .ref-hint { font-size: 13px; font-weight: 700; color: #5a3a1f; margin-top: 4px; text-align: center; max-width: 380px; }
.cam-panel { background: #12102a; padding: 0; }
.cam-panel canvas { width: 100%; height: 100%; object-fit: cover; display: block; flex: 1; min-height: 0; }
.cam-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: #fff; padding: 20px; background: rgba(18,16,42,.86); }
.cam-overlay p { margin: 0; max-width: 360px; font-weight: 600; }
.cam-overlay h3 { color: var(--gold-light); font-size: 22px; }
.cam-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); z-index: 2; }
.cam-badge.on { background: rgba(62,167,75,.85); }
.hud-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 14px; align-items: stretch; }
.mini-board { background: linear-gradient(180deg, #fff9ea, #efd9a8); border: 4px solid var(--wood); border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 0 0 2px var(--gold); font-size: 13px; font-weight: 700; color: #4a3020; text-align: left; }
.mini-board h4 { margin: 0 0 6px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 2px; color: var(--ink); font-size: 14px; }
.mini-board ul { margin: 0; padding-left: 18px; } .mini-board li { margin: 2px 0; }
.diff-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 11px; letter-spacing: 1px; }
.diff-easy { background: var(--green); } .diff-medium { background: var(--blue); } .diff-hard { background: var(--red); } .diff-practice { background: var(--purple); }
.log { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.log span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; font-family: var(--font-display); font-size: 16px; border: 2px solid; }
.log .ok { background: #d9f5d6; border-color: var(--green); color: var(--green-dark); } .log .miss { background: #fde0dc; border-color: var(--red); color: #8a1f12; } .log .skip { background: #eee; border-color: #999; color: #555; }
.hud-actions { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.hud-actions .btn { min-width: 170px; }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 5, 25, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 50; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .25s; overflow: auto; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal .board { transform: translateY(12px); transition: transform .25s; max-height: 92vh; overflow: auto; }
.modal.open .board { transform: none; }
.howto-list { list-style: none; padding: 0; margin: 10px 0 14px; text-align: left; }
.howto-list li { display: flex; align-items: center; gap: 14px; padding: 8px 6px; border-bottom: 2px dotted #c9a86a; font-weight: 700; }
.howto-list .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; border: 3px solid var(--gold); box-shadow: 0 3px 0 rgba(0,0,0,.25); background: linear-gradient(180deg, #5aa2ff, #1e4fb8); }
.diff-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 18px; }
.diff-btn { border: 3px solid transparent; border-radius: 14px; padding: 10px 16px; background: #fff9ea; font-family: var(--font-display); font-size: 16px; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 120px; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.diff-btn small { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #6b4b2a; }
.diff-btn.selected { border-color: var(--purple); background: #efe4ff; box-shadow: 0 0 0 3px var(--gold); }
.diff-btn .em { font-size: 24px; }

/* game over + leaderboard */
.score-big { font-family: var(--font-display); font-size: clamp(40px, 7vw, 72px); color: var(--purple-dark); line-height: 1; text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(109,63,214,.35); }
.stat-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 10px 0 14px; }
.stat-box { background: #fff9ea; border: 3px solid var(--wood); border-radius: 12px; padding: 8px 14px; min-width: 90px; }
.stat-box b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--blue-dark); } .stat-box small { font-size: 10px; letter-spacing: 1px; font-weight: 800; color: #6b4b2a; text-transform: uppercase; }
.lb-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; text-align: left; font-size: 14px; }
.lb-table th { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #6b4b2a; padding: 0 10px; }
.lb-table td { background: #fff9ea; padding: 8px 10px; border-top: 2px solid #d9bd86; border-bottom: 2px solid #d9bd86; font-weight: 700; }
.lb-table td:first-child { border-left: 2px solid #d9bd86; border-radius: 10px 0 0 10px; width: 46px; font-family: var(--font-display); font-size: 18px; text-align: center; }
.lb-table td:last-child { border-right: 2px solid #d9bd86; border-radius: 0 10px 10px 0; }
.lb-table tr.top1 td { background: linear-gradient(90deg, #fff1b8, #fff9ea); border-color: var(--gold-dark); } .lb-table tr.top2 td { background: linear-gradient(90deg, #eef0f5, #fff9ea); border-color: #9aa3b2; } .lb-table tr.top3 td { background: linear-gradient(90deg, #f5dcc4, #fff9ea); border-color: #b87333; }
.lb-table tr.me td { outline: 3px solid var(--purple); outline-offset: -3px; }
.lb-table .who { display: flex; align-items: center; gap: 8px; } .lb-table .who img { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); object-fit: cover; }
.lb-table .pts { color: var(--blue-dark); font-family: var(--font-display); font-size: 17px; text-align: right; }
.lb-table .mode-tag { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; }
.mode-alphabet { background: var(--purple); } .mode-numbers { background: var(--orange); }
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.tab { border: 3px solid var(--wood); background: #fff9ea; border-radius: 999px; padding: 6px 16px; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.tab.on { background: var(--purple); color: #fff; border-color: var(--gold); }
.tabs.small .tab { padding: 4px 12px; font-size: 12px; }
.empty { padding: 20px; color: #6b4b2a; font-weight: 700; }
.note { font-size: 12px; font-weight: 700; color: #8a1f12; background: #fde0dc; border: 2px solid #f0a89e; border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.note.info { color: #1e4fb8; background: #e0ecff; border-color: #9bbcf5; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: rgba(30,20,60,.92); color: #fff; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--gold); font-weight: 800; z-index: 99; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* feedback pop */
.pop { animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.shake { animation: shake .4s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.wizard-hero { position: absolute; left: 3vw; bottom: 0; width: clamp(140px, 22vw, 300px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); animation: bob 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* session tweaks */
body.in-session .topbar .icon-btn { width: 34px; height: 34px; font-size: 15px; }
body.in-session .hud-top { padding-right: 92px; }

/* ---------- scene screens: original game artwork with positioned hotspots ---------- */
.scene { padding: 0; background: #0f1233; }
.scene-box { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; container-type: size; box-shadow: 0 0 60px rgba(0,0,0,.6); }
.scene-img { width: 100%; height: 100%; display: block; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); background: transparent; border: 0; border-radius: 3cqh; cursor: pointer; padding: 0; transition: box-shadow .15s, transform .12s; }
.hotspot:hover, .hotspot:focus-visible { outline: none; box-shadow: 0 0 0 .4cqh rgba(255,224,138,.95), 0 0 3cqh 1cqh rgba(255,224,138,.55); transform: scale(1.03); }
.hotspot:active { transform: scale(.98); }
.hotspot.avatar-pick { border-radius: 2cqh; }
.hotspot.avatar-pick.selected { box-shadow: 0 0 0 .6cqh #ffe08a, 0 0 4cqh 1.2cqh rgba(255,224,138,.7); }
.hotspot.avatar-pick.selected::after { content: '✓'; position: absolute; top: -2cqh; right: -2cqh; width: 6cqh; height: 6cqh; border-radius: 50%; background: var(--green); color: #fff; border: .5cqh solid #fff; display: grid; place-items: center; font-weight: 900; font-size: 3.6cqh; }
.scene-form { position: absolute; inset: 0; }
.hotspot-input { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); box-sizing: border-box; background: #e6d3ab; border: 0; border-radius: 1.2cqh; padding: 0 2.4cqw; font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 5.2cqh; letter-spacing: .3cqh; color: #4a3a2a; text-transform: uppercase; outline: none; box-shadow: inset 0 .6cqh 1.4cqh rgba(0,0,0,.25); }
.hotspot-input::placeholder { color: #9a8a72; opacity: 1; }
.hotspot-input:focus { box-shadow: inset 0 .6cqh 1.4cqh rgba(0,0,0,.25), 0 0 0 .4cqh rgba(255,224,138,.95); }
body.scene-mode #top-icons { position: fixed; right: 12px; bottom: 12px; }
.dim-spot { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); background: rgba(8, 6, 28, .62); border-radius: 3cqh; pointer-events: none; filter: blur(.2cqh); }
.hotspot-primary { border-radius: 999px; box-shadow: 0 0 0 .35cqh rgba(255,224,138,.85), 0 0 2.4cqh .8cqh rgba(255,224,138,.45); animation: hotspot-pulse 1.6s ease-in-out infinite; }
@keyframes hotspot-pulse { 0%, 100% { box-shadow: 0 0 0 .35cqh rgba(255,224,138,.85), 0 0 2.4cqh .8cqh rgba(255,224,138,.45); } 50% { box-shadow: 0 0 0 .5cqh rgba(255,224,138,1), 0 0 4cqh 1.6cqh rgba(255,224,138,.7); } }
@media (prefers-reduced-motion: reduce) { .hotspot-primary { animation: none; } }
body.scene-mode .player-chip { top: 12px; }
@media (max-width: 900px) { .scene { padding: 0; } .scene-box { box-shadow: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hud { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; height: auto; }
  .hud-top { grid-template-columns: 1fr auto; } .timer { grid-column: 2; grid-row: 1; } .detected { grid-column: 1 / -1; justify-content: center; }
  .hud-bottom { grid-template-columns: 1fr; } .hud-actions { flex-direction: row; flex-wrap: wrap; }
  .ref-panel .handviz, .ref-panel .sign-photo { height: 200px; } .panel { min-height: 200px; } .cam-panel { min-height: 240px; }
  #screen-session { justify-content: flex-start; }
  .wizard-hero { display: none; }
}
@media (max-width: 520px) {
  .board { padding: 22px 14px 22px; } .btn { min-width: 0; width: 100%; } .avatar-card { width: 150px; } .avatar-card img { height: 140px; }
  .sign-card .handviz, .sign-card .sign-photo { width: 96px; height: 116px; } .sign-card .label { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .sparkles i, .wizard-hero { animation: none; } .screen, .modal { transition: none; } }

/* ==========================================================================
   Painted-art UI (v2.2): live content placed inside the original game's panels
   ========================================================================== */
:root { --font-hud: 'Lilita One', 'Fredoka', 'Trebuchet MS', sans-serif; }
.hud-font { font-family: var(--font-hud); letter-spacing: .1cqh; }

/* generic positioned element inside a scene box */
.pos, .patch, .slot, .ref-area, .cam-area, .ref-title, .sign-name, .camera-meta, .art-arrow, .art-close, .learn-caption, .hud-scene .timer { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); box-sizing: border-box; }
/* a patch hides baked text under it while keeping the painted look */
.patch { border-radius: 1.4cqh; backdrop-filter: blur(1.2cqh); -webkit-backdrop-filter: blur(1.2cqh); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.patch-parchment { background: rgba(240, 226, 190, .9); color: #3b2717; }
.patch-teal { background: rgba(40, 70, 86, .92); color: #fff; }
.patch-brown { background: rgba(58, 38, 26, .94); color: #ffe9b8; }
.patch-sky { background: rgba(96, 156, 226, .82); color: #fff; }

/* ---------- Learn: slots inside the painted cards ---------- */
#screen-learn .scene-box { overflow: visible; }
.slot { border-radius: 1.6cqh; background: linear-gradient(180deg, #f6e9c9, #e9d4a4); box-shadow: inset 0 0 0 .35cqh #5a3a1f, inset 0 0 2cqh rgba(90,60,20,.25); display: grid; grid-template-columns: 46% 1fr; align-items: center; gap: 1cqw; padding: .8cqh 1cqw; overflow: hidden; }
.slot .sign-photo, .slot .handviz { width: 100%; height: 100%; max-height: calc(100% - .4cqh); object-fit: contain; border-radius: 1cqh; background: #fff; box-shadow: 0 .4cqh 1cqh rgba(0,0,0,.25); }
.slot .handviz { background: transparent; box-shadow: none; }
.slot .label { font-family: var(--font-hud); font-size: 6.4cqh; color: #1e5fd6; line-height: 1; text-shadow: 0 .3cqh 0 #fff; }
.slot .hint { font-size: 1.45cqh; font-weight: 700; color: #5a3a1f; line-height: 1.25; margin-top: .4cqh; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.slot .badge { position: absolute; top: .6cqh; right: .8cqw; background: var(--magenta); color: #fff; font-size: 1.3cqh; font-weight: 800; padding: .2cqh .8cqw; border-radius: 999px; border: .2cqh solid #fff; }
.slot .right { position: relative; align-self: center; }
.art-arrow { border: 0; padding: 0; background: linear-gradient(180deg, #ff5a4a, #b3261e); border-radius: 1.6cqh; box-shadow: 0 0 0 .4cqh #f3c04b, 0 .8cqh 1.6cqh rgba(0,0,0,.45); cursor: pointer; display: grid; place-items: center; transition: transform .12s, filter .15s; }
.art-arrow svg { width: 82%; height: 82%; }
.art-arrow:hover { filter: brightness(1.1); transform: scale(1.05); } .art-arrow:disabled, .hotspot:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.learn-caption { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; font-family: var(--font-hud); font-size: 2.6cqh; color: #ffe9b8; text-shadow: 0 .3cqh 0 #3b2717, 0 0 1.6cqh rgba(0,0,0,.8); pointer-events: none; }
.learn-caption .dots { display: inline-flex; gap: .5cqw; } .learn-caption .dots i { width: 1.3cqh; height: 1.3cqh; border-radius: 50%; background: rgba(255,255,255,.35); } .learn-caption .dots i.on { background: var(--gold); }

/* ---------- Session HUD on the painted scene ---------- */
#screen-session.scene { justify-content: center; padding: 0; }
.hud-path { flex-direction: column; font-family: var(--font-hud); font-size: 1.9cqh; line-height: 1.15; color: #3b2717; padding: 0 .6cqw; }
.hud-path b { color: #8a3b2b; }
.hud-path .lives { font-size: 2cqh; }
.hud-scene .detected { font-size: 3cqh; text-transform: uppercase; text-shadow: 0 .3cqh 0 rgba(0,0,0,.5); gap: .7cqw; padding: 0 .8cqw; white-space: nowrap; flex-wrap: nowrap; }
.hud-scene .detected .lbl { flex: 0 0 auto; }
.hud-scene .detected .value { display: inline-grid; place-items: center; min-width: 5cqh; height: 5.2cqh; padding: 0 .5cqw; border-radius: 1cqh; background: #fff; border: .3cqh solid var(--purple); color: var(--purple-dark); font-size: 3.2cqh; line-height: 1; position: relative; overflow: hidden; flex: 0 0 auto; }
.hud-scene .detected .value i { position: absolute; left: 0; bottom: 0; height: .5cqh; background: var(--magenta); width: 0; transition: width .08s linear; }
.hud-scene .timer { pointer-events: none; }
.hud-scene .timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-scene .timer circle { fill: none; stroke-width: 6; }
.hud-scene .timer .track { stroke: rgba(0,0,0,.1); } .hud-scene .timer .prog { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }
.hud-scene .timer.warn .prog { stroke: var(--orange); } .hud-scene .timer.danger .prog { stroke: var(--red); }
.hud-scene .timer.boost .prog { stroke: #3dcc5a; filter: drop-shadow(0 0 .8cqh #7dff9a); }
.hud-scene .timer.boost { animation: timer-boost .9s ease; }
@keyframes timer-boost {
  0%, 100% { transform: none; }
  40% { transform: scale(1.12); }
}
.hud-scene .timer.infinite { display: none; }
.timer-text { font-size: 4.6cqh; color: #3b2717; }
.hud-title { font-size: 3.9cqh; line-height: 1.05; white-space: nowrap; overflow: visible; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; isolation: isolate; z-index: 1; }
.hud-title::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: rgba(96, 156, 226, .85); backdrop-filter: blur(1.2cqh); -webkit-backdrop-filter: blur(1.2cqh); -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 58%, transparent 100%); }
.hud-title-unused { text-shadow: 0 .4cqh 0 #2d1a5e, 0 .6cqh 1.6cqh rgba(0,0,0,.5); letter-spacing: .2cqh; }
.hud-title.good { color: #9ff29a; } .hud-title.bad { color: #ffb0a0; }
.ref-area { background: #fdfcf8; border-radius: .8cqh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: .6cqh; }
.ref-area #ref-hand { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.ref-area .sign-photo, .ref-area .handviz { max-height: 100%; max-width: 100%; height: 100%; width: auto; border: 0; box-shadow: none; }
.ref-area .ref-hint { font-size: 1.5cqh; font-weight: 700; color: #5a3a1f; text-align: center; padding: .2cqh 1cqw 0; }
.ref-title { display: flex; align-items: center; justify-content: center; color: #fff6e8; font-size: 2.25cqh; letter-spacing: .08cqh; line-height: 1; white-space: nowrap; z-index: 5; pointer-events: none; }
.sign-label { font-size: 3.4cqh; letter-spacing: .3cqh; text-transform: uppercase; }
.sign-name { display: flex; align-items: center; justify-content: center; gap: .35cqw; background: #5c3924; color: #fff6e8; font-size: 2.7cqh; letter-spacing: .06cqh; line-height: 1; white-space: nowrap; text-transform: uppercase; border-radius: .35cqh; z-index: 5; pointer-events: none; }
.adapt-board { flex-direction: column; align-items: center; justify-content: center; gap: .35cqh; text-align: center; padding: .6cqh .7cqw; z-index: 6; background: #f6ead0; box-shadow: inset 0 0 0 .22cqh #6b4a2a; border-radius: 1cqh; }
.adapt-board .adapt-sign { margin: 0; font-size: clamp(16px, 2.6cqh, 28px); letter-spacing: .08cqh; text-transform: uppercase; color: #3b2717; line-height: 1; }
.adapt-board .adapt-sign span { color: var(--purple-dark); }
.adapt-meta { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: clamp(12px, 1.65cqh, 18px); font-weight: 800; color: #4a3020; line-height: 1.15; }
.adapt-meta .on { color: #1f6b2a; }
.adapt-meta b { font-family: var(--font-hud); font-size: 1.12em; }
.cam-area { background: #cfd3d6; border-radius: .8cqh; overflow: hidden; }
.cam-area canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-area .cam-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh; text-align: center; color: #fff; padding: 2cqh; background: rgba(18,16,42,.86); }
.cam-area .cam-overlay p { margin: 0; max-width: 90%; font-weight: 600; font-size: 1.7cqh; }
.cam-area .cam-overlay h3 { color: var(--gold-light); font-size: 2.6cqh; }
.cam-area .cam-badge { position: absolute; top: .8cqh; left: .8cqw; font-size: 1.3cqh; }
.tips-area { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; padding: .8cqh 1cqw; font-size: 1.35cqh; font-weight: 700; color: #4a3020; line-height: 1.25; }
.tips-area .tips-head { font-family: var(--font-hud); font-size: 1.7cqh; text-transform: uppercase; letter-spacing: .15cqh; margin-bottom: .3cqh; display: flex; gap: .6cqw; align-items: center; }
.tips-area .diff-pill { font-size: 1.1cqh; padding: .1cqh .7cqw; }
.tips-area ul { margin: 0; padding-left: 1.4cqw; } .tips-area li { margin: .15cqh 0; }
.camera-meta { display: flex; align-items: center; justify-content: center; text-align: center; color: #fff6e8; font-size: 2cqh; font-weight: 800; line-height: 1; white-space: nowrap; z-index: 6; pointer-events: none; }
.camera-meta .on { color: #a9ef87; }
.camera-meta b { color: #ffe49b; font-size: 1.12em; }
.current-area { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: .9cqh 1.2cqw; gap: .3cqh; }
.current-area .cur { font-size: 2.6cqh; text-transform: uppercase; } .current-area .cur span { color: var(--purple-dark); }
.current-area .cur-sub { font-size: 2.1cqh; text-transform: uppercase; opacity: .85; }
.current-area .log { justify-content: center; gap: .5cqw; margin-top: .2cqh; } .current-area .log span { min-width: 3cqh; height: 3cqh; font-size: 1.9cqh; padding: 0 .5cqw; border-width: .25cqh; border-radius: .8cqh; }

/* ---------- Painted board frame for leaderboard & dialogs ---------- */
.art-board { position: relative; width: min(96vw, 1180px, calc(94vh * 2.015)); aspect-ratio: 1305.6 / 648; background: url('../assets/ui/learn.jpg') 50% 47.5% / 147.06% auto no-repeat; border-radius: 3vh; container-type: size; filter: drop-shadow(0 20px 40px rgba(0,0,0,.55)); }
.art-board.narrow { width: min(92vw, 760px, calc(80vh * 2.015)); }
.art-inner { position: absolute; left: 13.2%; top: 18.3%; width: 73.6%; height: 73.4%; border-radius: 1.6cqh; background: rgba(244, 231, 198, .95); backdrop-filter: blur(1.4cqh); -webkit-backdrop-filter: blur(1.4cqh); box-shadow: inset 0 0 0 .3cqh #5a3a1f, inset 0 0 3cqh rgba(90,60,20,.25); padding: 1.6cqh 2.2cqw; overflow: auto; text-align: center; color: var(--ink); font-size: 13px; }
.art-inner .board-title { font-size: clamp(18px, 4.6cqh, 34px); margin-bottom: 6px; }
.art-inner .board-title.banner { transform: none; margin: 0 0 8px; padding: 4px 22px; font-size: clamp(18px, 4.4cqh, 30px); }
.art-inner p { margin: 4px 0; }
.lb-scroll { overflow: auto; max-height: 44cqh; }
.art-inner .lb-table td { padding: 5px 8px; font-size: 12.5px; } .art-inner .lb-table td:first-child { font-size: 15px; } .art-inner .lb-table .pts { font-size: 14px; }
.art-inner .stat-row { margin: 4px 0 8px; gap: 8px; } .art-inner .stat-box { padding: 4px 10px; min-width: 70px; } .art-inner .stat-box b { font-size: 18px; }
.art-inner .score-big { font-size: clamp(30px, 8cqh, 56px); }
.go-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; text-align: center; }
@media (max-width: 760px) { .go-grid { grid-template-columns: 1fr; } .art-board, .art-board.narrow { width: 96vw; aspect-ratio: auto; height: auto; background-size: cover; padding: 8vw 4vw; } .art-inner { position: relative; left: 0; top: 0; width: 100%; height: auto; max-height: 80vh; } }
.modal .art-board { transform: translateY(12px); transition: transform .25s; } .modal.open .art-board { transform: none; }
.scene-modal .scene-box { width: min(100vw, calc(100vh * 16 / 9)); }
/* the How to Play card is painted at a squarer ~1374:1145 ratio, not the game's usual 16:9 */
.howto-modal .scene-box { aspect-ratio: 1374 / 1145; width: min(100vw, calc(100vh * 1374 / 1145)); }
.howto-modal.dm-easy #btn-howto-cancel   { --x:.852; --y:.115; --w:.072; --h:.086; }
.howto-modal.dm-easy #btn-howto-start    { --x:.353; --y:.866; --w:.288; --h:.082; }
.howto-modal.dm-medium #btn-howto-cancel { --x:.875; --y:.10;  --w:.072; --h:.086; }
.howto-modal.dm-medium #btn-howto-start  { --x:.354; --y:.870; --w:.291; --h:.082; }
.howto-modal.dm-hard #btn-howto-cancel   { --x:.90;  --y:.095; --w:.072; --h:.086; }
.howto-modal.dm-hard #btn-howto-start    { --x:.352; --y:.851; --w:.293; --h:.081; }
.art-close { border: 0; border-radius: 50%; background: linear-gradient(180deg, #ef5a4a, #b3261e); color: #fff; font-weight: 900; font-size: 2.6cqh; box-shadow: 0 0 0 .3cqh var(--gold-light), 0 .5cqh 1cqh rgba(0,0,0,.4); cursor: pointer; display: grid; place-items: center; padding: 0; transition: filter .12s, transform .12s; }
.art-close:hover { filter: brightness(1.1); transform: scale(1.05); }
.art-close:active { transform: scale(.95); }
.diff-btn.hotspot.selected { box-shadow: 0 0 0 .45cqh #ffe08a, 0 0 3cqh 1cqh rgba(255,224,138,.7); background: rgba(255,224,138,.12); }

.art-x { --x:.895; --y:.055; --w:.047; --h:.1; border-radius: 50%; }
@media (max-width: 760px) { .art-x { display: none; } }

/* ---------- Full-screen painted board (results + leaderboard) ---------- */
.art-board.full { width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); aspect-ratio: auto; flex: 0 0 auto; border-radius: 0; filter: none;
  background: url('../assets/ui/learn.jpg') 42.86% 32.14% / 138.9% auto no-repeat; }
.art-board.full .art-x { --x:.897; --y:.184; --w:.05; --h:.09; }
.art-board.full .art-inner { left: 18.1%; top: 29.2%; width: 69.4%; height: 61.1%; padding: 1.6cqh 2.2cqw; font-size: 1.9cqh; border-radius: 2cqh; display: flex; flex-direction: column; overflow: hidden; }
.art-board.full .art-inner .board-title { font-size: 4.6cqh; margin: 0 0 .8cqh; }
.art-board.full .art-inner .board-title.banner { font-size: 4.4cqh; padding: .5cqh 3cqw; margin: 0 0 1cqh; border-width: .4cqh; box-shadow: 0 .7cqh 0 #7a1810; }
.art-board.full .tabs { margin-bottom: .8cqh; gap: .8cqw; } .art-board.full .tab { font-size: 2cqh; padding: .6cqh 1.8cqw; border-width: .3cqh; } .art-board.full .tabs.small .tab { font-size: 1.7cqh; padding: .4cqh 1.4cqw; }
.art-board.full .stat-row { gap: .8cqw; margin: .4cqh 0 .8cqh; flex-wrap: nowrap; width: 100%; } .art-board.full .stat-box { padding: .5cqh .8cqw; min-width: 0; flex: 1; border-width: .3cqh; border-radius: 1.2cqh; } .art-board.full .stat-box b { font-size: 3cqh; } .art-board.full .stat-box small { font-size: 1.2cqh; }
.art-board.full .lb-scroll { flex: 1; min-height: 0; max-height: none; }
.art-board.full .lb-table { border-spacing: 0 .7cqh; } .art-board.full .lb-table th { font-size: 1.4cqh; padding: 0 1cqw; }
.art-board.full .lb-table td { padding: .8cqh 1cqw; font-size: 1.9cqh; border-width: .25cqh; } .art-board.full .lb-table td:first-child { font-size: 2.4cqh; width: 5cqw; border-radius: 1.2cqh 0 0 1.2cqh; } .art-board.full .lb-table td:last-child { border-radius: 0 1.2cqh 1.2cqh 0; }
.art-board.full .lb-table .who img { width: 1.9em; height: 1.9em; flex: 0 0 auto; } .art-board.full .lb-table .pts { font-size: 2.3cqh; } .art-board.full .lb-table .mode-tag { font-size: 1.3cqh; padding: .2cqh 1cqw; }
.art-board.full .btn { font-size: 2.1cqh; padding: 1.2cqh 3cqw; border-width: .35cqh; min-width: 0; }
.art-board.full .btn::before { width: 1.8cqh; height: 1.8cqh; top: -1.3cqh; }
.art-board.full .note { font-size: 1.7cqh; padding: .6cqh 1.2cqw; margin: .6cqh 0; }
/* round complete layout */
.go-inner .go-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 60%) minmax(70px, 1fr); gap: .25cqh; align-items: stretch; text-align: center; }
.go-left { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .1cqh; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.go-right { display: flex; flex-direction: column; min-height: 0; }
.go-inner .score-big { font-size: 3.8cqh; line-height: 1; margin-top: 0; }
.go-points { font-size: 1.4cqh; font-weight: 800; letter-spacing: .2cqh; text-transform: uppercase; color: #6b4b2a; margin-bottom: 0; }
.go-save { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 1cqw; width: 100%; margin-top: .3cqh; }
.go-save .btn { white-space: nowrap; }
.go-name { flex: 1; min-width: 0; padding: .8cqh 1.2cqw; border-radius: 1.6cqh; border: .35cqh solid var(--wood); background: #fff9ea; color: var(--ink); font-family: var(--font-display); font-size: 2.8cqh; text-align: center; letter-spacing: .3cqh; text-transform: uppercase; outline: none; box-shadow: inset 0 .4cqh 1cqh rgba(0,0,0,.15); }
.go-name:focus { border-color: var(--purple); box-shadow: 0 0 0 .4cqh rgba(109,63,214,.25); }
.go-lb-title { font-family: var(--font-display); font-size: 2.4cqh; letter-spacing: .2cqh; margin: 0 0 .6cqh; }
.go-actions { margin-top: auto; padding-top: .8cqh; gap: 1.6cqw; }
@media (max-width: 760px) {
  .art-board.full { width: 100vw; aspect-ratio: auto; height: auto; min-height: 100vh; background-size: cover; padding: 6vw 3vw; }
  .art-board.full .art-inner { position: relative; left: 0; top: 0; width: 100%; height: auto; font-size: 13px; }
  .art-board.full .art-inner .board-title, .art-board.full .art-inner .board-title.banner { font-size: 22px; }
  .art-board.full .stat-box b { font-size: 20px; } .art-board.full .stat-box small { font-size: 10px; } .art-board.full .btn { font-size: 14px; padding: 10px 18px; }
  .art-board.full .lb-table td { font-size: 12px; padding: 5px 8px; } .art-board.full .lb-table td:first-child { font-size: 15px; } .art-board.full .lb-table .pts { font-size: 14px; }
  .go-inner .go-grid { grid-template-columns: 1fr; } .go-inner .score-big { font-size: 44px; } .go-name { font-size: 22px; width: 100%; }
  .go-lb-title { font-size: 15px; } .go-points, .go-lb-title, .art-board.full .tab { font-size: 13px; } .art-board.full .lb-scroll { max-height: 40vh; }
}

.player-chip:hover { transform: scale(1.04); }
.tab-me { border-color: var(--purple); color: var(--purple-dark); }
/* ---------- My Progress screen ---------- */
.profile-inner { text-align: left; }
.profile-head { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: .6cqh; }
.profile-avatar { width: 9cqh; height: 9cqh; border-radius: 50%; background: #fff9ea; border: .4cqh solid var(--gold); box-shadow: 0 .4cqh 1cqh rgba(0,0,0,.25); object-fit: cover; }
.profile-id { flex: 1; min-width: 0; }
.profile-since { font-size: 1.7cqh; font-weight: 700; color: #6b4b2a; }
.profile-actions { display: flex; gap: .8cqw; flex-wrap: wrap; justify-content: flex-end; }
.art-board.full .profile-actions .btn { font-size: 1.7cqh; padding: .8cqh 1.8cqw; }
.profile-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2cqw; }
.profile-col { display: flex; flex-direction: column; min-height: 0; }
.profile-col .lb-scroll { flex: 1; min-height: 0; }
.pf-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.pf-mode { background: #fff9ea; border: .3cqh solid var(--wood); border-radius: 1.4cqh; padding: .8cqh 1.2cqw; }
.pf-mode .mode-tag { font-size: 1.3cqh; padding: .2cqh 1cqw; }
.pf-mode b { display: block; font-family: var(--font-display); font-size: 3cqh; color: var(--blue-dark); line-height: 1.1; margin-top: .3cqh; white-space: nowrap; }
.pf-mode small { display: block; font-size: 1.35cqh; font-weight: 700; color: #6b4b2a; line-height: 1.3; }
.pf-mode .rank { color: var(--magenta); font-weight: 800; }
.pf-bars { display: flex; align-items: flex-end; gap: .6cqw; height: 14cqh; padding: .6cqh 1cqw; background: #fff9ea; border: .3cqh solid var(--wood); border-radius: 1.4cqh; }
.pf-bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3cqh; }
.pf-bars .bar i { display: block; width: 100%; border-radius: .6cqh .6cqh 0 0; background: linear-gradient(180deg, #9b5cf6, #5b2fb8); min-height: .6cqh; }
.pf-bars .bar.numbers i { background: linear-gradient(180deg, #f6a447, #c25e12); }
.pf-bars .bar span { font-size: 1.2cqh; font-weight: 800; color: #4a3020; line-height: 1; }
.pf-bars .empty { align-self: center; width: 100%; text-align: center; font-size: 1.6cqh; padding: 0; }
.pf-table td { white-space: nowrap; }
.kind-tag { font-size: 1.2cqh; letter-spacing: .1cqh; text-transform: uppercase; padding: .2cqh .8cqw; border-radius: 999px; color: #fff; }
.kind-game { background: var(--green); } .kind-practice { background: var(--purple); }
.pf-table .diff { font-size: 1.2cqh; color: #6b4b2a; font-weight: 800; text-transform: uppercase; }
@media (max-width: 760px) { .profile-grid, .pf-modes { grid-template-columns: 1fr; } .profile-head { flex-wrap: wrap; } .profile-avatar { width: 56px; height: 56px; } .pf-bars { height: 90px; } .pf-mode b { font-size: 22px; } .pf-mode small, .pf-bars .bar span, .kind-tag, .pf-table .diff, .profile-since { font-size: 11px; } .art-board.full .profile-actions .btn { font-size: 13px; padding: 8px 14px; } }

/* previous best on the results screen */
.go-prev { font-size: 1.3cqh; font-weight: 800; color: #6b4b2a; background: #fff6d9; border: .18cqh solid #e3c98a; border-radius: 999px; padding: .15cqh 1.4cqw; margin: .08cqh 0 .15cqh; max-width: 100%; }
.go-prev b { color: var(--blue-dark); }
.go-prev.beat { color: #1f6b2a; background: #e4f7dd; border-color: var(--green); animation: pop .5s ease; }
.go-prev.first { color: var(--blue-dark); background: #e0ecff; border-color: var(--blue); }
.go-prev:empty { display: none; }
@media (max-width: 760px) { .go-prev { font-size: 13px; } }

/* full-screen boards inside modals: no padding, never taller than the viewport, no clipped centring */
.modal:has(.art-board.full) { padding: 0; overflow: hidden; align-items: safe center; justify-content: safe center; }
.modal .art-board.full { transform: none; }
.screen.scene:has(.art-board.full) { padding: 0; overflow: hidden; }

/* ---------- Round Complete redesign ---------- */
.go-inner { padding-top: 0; }
.rc-mascot { position: absolute; left: -5%; bottom: 7%; width: 21%; height: auto; z-index: 5; pointer-events: none; filter: drop-shadow(0 1.4cqh 1.6cqh rgba(0,0,0,.45)); }
.rc-mascot[hidden] { display: none; }
@media (max-width: 760px) { .rc-mascot { display: none !important; } .rc-avatar-badge[hidden] { display: block !important; } }
.rc-mode-title { position: relative; z-index: 3; align-self: center; margin: 0 0 -1.2cqh; padding: .35cqh 2.6cqw .45cqh; text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: .12cqh; text-transform: uppercase; font-size: 2.3cqh; line-height: 1; color: #ffe38a; text-shadow: 0 .15cqh 0 #4a2a10; background: linear-gradient(180deg, #a8703a 0%, #7d4f24 60%, #5e3a18 100%); border: .22cqh solid #4a2a10; border-radius: 1.4cqh; box-shadow: inset 0 .2cqh 0 rgba(255,220,160,.35), 0 .35cqh 0 #3b2010, 0 .5cqh 1cqh rgba(0,0,0,.35); }
.rc-ribbon { position: relative; align-self: center; width: 84%; margin: 0 auto 1cqh; font-family: var(--font-hud); font-size: 4.3cqh; letter-spacing: .25cqh; text-transform: uppercase; line-height: 1; z-index: 1; }
.rc-ribbon .body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; padding: 1cqh 3cqw; background: linear-gradient(180deg, #f5564a 0%, #d9281f 55%, #b81a12 100%); border-radius: .5cqh; box-shadow: 0 .55cqh 0 #8a120d, 0 1.2cqh 2.2cqh rgba(0,0,0,.35); }
.rc-ribbon .tail { position: absolute; top: 2cqh; height: 100%; width: 10cqw; background: linear-gradient(180deg, #c2201a, #9c130d); z-index: 1; box-shadow: 0 .6cqh 1.2cqh rgba(0,0,0,.3); }
.rc-ribbon .tail.l { left: -6.5cqw; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.rc-ribbon .tail.r { right: -6.5cqw; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.rc-ribbon .body span { color: #fff; filter: drop-shadow(0 .35cqh 0 #7a1810) drop-shadow(0 0 .6cqh rgba(0,0,0,.25)); }
.rc-ribbon .body span em { font-style: normal; background: linear-gradient(180deg, #fff7cf 0%, #ffe38a 55%, #f0b62e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-ribbon .sp { color: #ffd84a; font-style: normal; font-size: 2.6cqh; text-shadow: 0 .25cqh 0 #7a1810; }
.rc-avatar-badge { position: absolute; left: -3.2cqh; top: 50%; transform: translateY(-50%); width: 10.5cqh; height: 10.5cqh; border-radius: 50%; border: .4cqh solid #ffe38a; box-shadow: 0 0 0 .22cqh #8a5a1f, 0 .3cqh 0 .22cqh #b8860b, 0 .6cqh 1.4cqh rgba(0,0,0,.4); object-fit: cover; background: #fff9ea; z-index: 3; }
.rc-ribbon .burst { position: absolute; top: -1.3cqh; font-size: 2.6cqh; font-style: normal; z-index: 0; color: #ffe38a; -webkit-text-stroke: .04cqh #5a3a1f; paint-order: stroke fill; text-shadow: 0 .2cqh 0 #b8860b; filter: drop-shadow(0 .15cqh .25cqh rgba(0,0,0,.4)); }
.rc-ribbon .burst.l { left: 11%; transform: rotate(-18deg); }
.rc-ribbon .burst.r { right: 11%; transform: rotate(18deg); }
@media (max-width: 760px) {
  .rc-avatar-badge { width: 56px; height: 56px; left: -18px; border-width: 3px; }
  .rc-mode-title { font-size: 13px; margin-bottom: -6px; padding: 3px 14px 4px; border-radius: 10px; }
  .rc-ribbon .burst { font-size: 16px; top: -9px; }
}
.rc-score { position: relative; align-self: center; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; text-align: center; margin: .3cqh 0 .15cqh; padding: .3cqh 2.4cqw .4cqh; background: rgba(255,255,255,.75); border: .2cqh solid rgba(255,255,255,.95); border-radius: 1.6cqh; box-shadow: 0 .3cqh .8cqh rgba(90,60,20,.12); }
.rc-crown { font-size: 4.2cqh; line-height: 1; filter: drop-shadow(0 .25cqh 0 #b8860b); }
.rc-score-num { display: flex; flex-direction: column; align-items: center; }
.rc-score::before, .rc-score::after { content: '★'; position: absolute; top: 50%; color: #ffd84a; font-size: 2.8cqh; line-height: 1; text-shadow: 0 .25cqh 0 #b8860b; filter: drop-shadow(0 .1cqh .2cqh rgba(0,0,0,.25)); }
.rc-score::before { left: -5cqw; transform: translateY(-50%) rotate(-14deg); } .rc-score::after { right: -5cqw; transform: translateY(-50%) rotate(14deg); }
.rk-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 50%; font-family: var(--font-display); font-weight: 800; color: #fff; background: #9aa3b2; box-shadow: 0 .12em 0 rgba(0,0,0,.25); font-size: .85em; }
.rk-badge.rk-1 { background: linear-gradient(180deg, var(--gold-light), var(--gold-dark)); color: #5a3a00; }
.rk-badge.rk-2 { background: linear-gradient(180deg, #e8ecf3, #9aa3b2); color: #2b2f36; }
.rk-badge.rk-3 { background: linear-gradient(180deg, #f0b27a, #b87333); color: #4a2500; }
.rk-badge.rk-n { background: #d9bd86; color: #5a3a1f; }
.rk-badge.rk-medal { font-size: 1.25em; background: none; box-shadow: none; filter: drop-shadow(0 .1em 0 rgba(0,0,0,.3)); }
.go-inner .score-big { color: #5b2fb8; text-shadow: 0 .4cqh 0 #fff, 0 .8cqh 0 #b9a5ee, 0 1.2cqh 2cqh rgba(91,47,184,.35); }
.go-inner .go-points { color: #5a3a1f; letter-spacing: .3cqh; }
.go-inner .go-prev { width: 100%; text-align: center; display: flex; align-items: center; justify-content: center; gap: .8cqw; }
.go-inner .go-prev::before { content: '👑'; font-size: 2.2cqh; }
.go-inner .go-prev.beat::before { content: '🏆'; }
.go-inner .go-prev.beat { animation: pop .5s ease; }
.rc-stats .stat-box { display: flex; align-items: center; gap: .7cqw; text-align: left; background: #fff; border-color: #d9bd86; border-width: .25cqh; border-radius: 1.3cqh; padding: .2cqh .7cqw; box-shadow: 0 .25cqh 0 rgba(0,0,0,.08); }
.rc-stats .stat-box > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.rc-stats .stat-box .ico { font-size: 2.5cqh; line-height: 1; filter: drop-shadow(0 .2cqh 0 rgba(0,0,0,.15)); }
.rc-stats .stat-box b { color: var(--blue-dark); font-size: 2.1cqh; line-height: 1; } .rc-stats .stat-box small { color: #5a3a1f; font-weight: 800; font-size: .85cqh; line-height: 1.1; letter-spacing: .06cqh; }
.rc-stats .stat-box:nth-child(1) { background: #ffe9ec; border-color: #e9868f; } .rc-stats .stat-box:nth-child(1) b { color: #d9281f; }
.rc-stats .stat-box:nth-child(2) { background: #e6f1ff; border-color: #7fb6ee; } .rc-stats .stat-box:nth-child(2) b { color: #1e4fb8; }
.rc-stats .stat-box:nth-child(3) { background: #fff5d6; border-color: #efc462; } .rc-stats .stat-box:nth-child(3) b { color: #c97a0a; }
.rc-stats .stat-box:nth-child(4) { background: #f1e9ff; border-color: #b995ef; } .rc-stats .stat-box:nth-child(4) b { color: #6d3fd6; }
.rc-name { display: none; }
.rc-name .ico { font-size: 2.8cqh; }
.rc-name .go-name { border: 0; background: transparent; box-shadow: none; padding: .8cqh .4cqw; font-size: 3cqh; text-align: center; }
.rc-name:focus-within { border-color: var(--purple); box-shadow: inset 0 .4cqh 1cqh rgba(0,0,0,.12), 0 0 0 .4cqh rgba(109,63,214,.25); }
.rc-lb { background: linear-gradient(180deg, #fff9ea, #f6ebcf); border: .35cqh solid #3b7be0; border-radius: 1.6cqh; padding: 0 .6cqw .5cqh; box-shadow: inset 0 0 0 .22cqh #fff8e6, 0 .5cqh 1.2cqh rgba(0,0,0,.14); }
.rc-lb-head { margin: 0 -.6cqw .35cqh; padding: .35cqh 1cqw; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.8cqh; letter-spacing: .1cqh; color: #fff; text-shadow: 0 .15cqh 0 rgba(0,0,0,.3); background: linear-gradient(180deg, #5b9bf5 0%, #2f6fd9 55%, #1e4fb8 100%); border: none; border-radius: 1.1cqh 1.1cqh 0 0; box-shadow: 0 .25cqh 0 #163a85; }
.rc-table td { background: #fff; }
.art-board.full .rc-table td { padding: .22cqh 1cqw; font-size: 1.6cqh; border-width: .16cqh; }
.rc-table tr.top1 td { background: linear-gradient(90deg, #ffe8a3, #fff6da); border-color: var(--gold-dark); box-shadow: inset .3cqh 0 0 var(--gold-dark); } .rc-table tr.top2 td { background: linear-gradient(90deg, #dbe8ff, #eef4ff); border-color: #8fb4ea; box-shadow: inset .3cqh 0 0 #6f9ee0; } .rc-table tr.top3 td { background: linear-gradient(90deg, #f0c49a, #fbe9d8); border-color: #b87333; box-shadow: inset .3cqh 0 0 #b87333; }
.rc-table tr.top1 td:first-child { box-shadow: inset .3cqh 0 0 var(--gold-dark); border-radius: 1.2cqh 0 0 1.2cqh; } .rc-table tr.top2 td:first-child { box-shadow: inset .3cqh 0 0 #6f9ee0; } .rc-table tr.top3 td:first-child { box-shadow: inset .3cqh 0 0 #b87333; }
.rc-table td:first-child { font-size: 2.1cqh; }
.rc-table .who img { border: .18cqh solid var(--gold); box-shadow: 0 .1cqh .2cqh rgba(0,0,0,.25); }
.art-board.full .rc-table .who img { width: 1.7em; height: 1.7em; }
.rc-table .who { font-weight: 800; }
.rc-table .who { font-size: 1.6cqh; }
.lb-table .pts b { display: block; font-family: var(--font-display); font-size: 2.4cqh; line-height: 1; color: var(--blue-dark); }
.lb-table .pts small { display: block; font-size: 1.4cqh; font-weight: 800; color: var(--blue-dark); line-height: 1.2; }
.art-board.full .lb-table .pts { text-align: center; padding-left: .6cqw; padding-right: .6cqw; }
/* round-complete board: points on the right of each row, inline "pts", the leader also gets a crown; the name cell and
   the points cell share one pill (no border between them) */
.art-board.full .rc-table .pts { text-align: right; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 1.7cqh; color: var(--blue-dark); width: 1%; padding-left: 0; padding-right: 1.2cqw; border-left-width: 0; }
.art-board.full .rc-table .pts .crown { margin-right: .4cqw; font-size: 1.6cqh; filter: drop-shadow(0 .1cqh 0 #b8860b); }
.art-board.full .rc-table .pts small { display: inline; font-size: .75em; font-weight: 700; margin-left: .25em; line-height: 1; }
.art-board.full .rc-table td:nth-child(2) { border-right-width: 0; }
.art-board.full .rc-table td.pts { box-shadow: none; }          /* the row's inset accent bar belongs to the first cells only */
.art-board.full .rc-table tr.top1 td.pts { background: #fff6da; } .art-board.full .rc-table tr.top2 td.pts { background: #eef4ff; } .art-board.full .rc-table tr.top3 td.pts { background: #fbe9d8; }   /* continue the row gradient's end colour */
/* the player's own row: the purple outline runs around the name + points pair as one shape (no line between them) */
.art-board.full .rc-table tr.me td:nth-child(2) { outline: none; box-shadow: inset 0 3px 0 var(--purple), inset 0 -3px 0 var(--purple), inset 3px 0 0 var(--purple); }
.art-board.full .rc-table tr.me td.pts { outline: none; box-shadow: inset 0 3px 0 var(--purple), inset 0 -3px 0 var(--purple), inset -3px 0 0 var(--purple); }
.rc-actions { margin-top: auto; padding-top: .2cqh; display: flex; flex-direction: column; align-items: center; gap: .4cqh; }
.rc-save-row { display: flex; justify-content: center; width: 100%; }
.art-board.full .rc-save { min-width: 36cqw; font-size: 3cqh; padding: 1.4cqh 4cqw; box-shadow: 0 .7cqh 0 #7a1650, 0 1.2cqh 2.2cqh rgba(0,0,0,.3), inset 0 .4cqh 0 rgba(255,255,255,.35); }
.rc-save::before { content: '✦'; position: static; width: auto; height: auto; transform: none; background: none; border: 0; color: #ffe38a; font-size: 2.4cqh; margin-right: 1cqw; }
.rc-save::after { content: '✦'; color: #ffe38a; font-size: 2.4cqh; margin-left: 1cqw; }
.art-board.full .rc-actions .btn-row .btn { min-width: 30cqw; }
@media (max-width: 760px) {
  .rc-ribbon { font-size: 22px; margin-top: 0; width: 100%; } .rc-ribbon .body { padding: 8px 18px; gap: 8px; } .rc-ribbon .sp { font-size: 14px; } .rc-ribbon .tail { display: none; }
  .rc-score::before, .rc-score::after { font-size: 18px; } .rc-score::before { left: -22px; } .rc-score::after { right: -22px; } .rc-crown { font-size: 28px; } .rc-score { padding: 4px 14px 5px; border-radius: 12px; } .rc-stats .stat-box .ico { font-size: 22px; } .rc-stats .stat-box { border-radius: 10px; } .rc-name .go-name { font-size: 20px; } .rc-name .ico { font-size: 20px; }
  .rc-lb-head { font-size: 15px; } .rc-table .who { font-size: 13px; } .lb-table .pts b { font-size: 15px; } .lb-table .pts small { font-size: 10px; }
  .art-board.full .rc-save { min-width: 0; width: 100%; font-size: 16px; padding: 12px 20px; } .art-board.full .rc-actions .btn-row .btn { min-width: 0; }
  .go-inner .go-prev::before { font-size: 14px; }
}

/* ---------- Round Complete: floating cartoon card (mockup) ---------- */
#modal-gameover.modal:has(.art-board.full) { padding: 16px 12px; overflow: auto; align-items: center; justify-content: center; }
#go-classic.art-board.full {
  width: min(88vw, 480px); height: auto; max-height: none; aspect-ratio: auto;
  background: linear-gradient(180deg, #fbf3de 0%, #f3e0b4 100%);
  border-radius: 26px; filter: drop-shadow(0 16px 28px rgba(20,10,40,.5));
  container-type: inline-size; overflow: visible; flex: 0 0 auto;
  box-shadow: inset 0 0 0 5px #e8c57a, inset 0 0 0 8px #fff6dc, 0 7px 0 #c9a15a;
}
#go-classic .art-inner {
  position: relative; left: auto; top: auto; width: 100%; height: auto;
  padding: 10px 16px 14px; font-size: 13px; border-radius: 26px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; overflow: visible;
}
#go-classic .rc-mascot, #go-classic .rc-avatar-badge, #go-classic .rc-stars { display: none !important; }
#go-classic .rc-close {
  position: absolute; right: -6px; top: -6px; z-index: 8;
  left: auto; width: 36px; height: 36px; padding: 0; border: 3px solid #fff3d6;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff7a6e, #e23b32 58%, #c21f18);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
  box-shadow: 0 3px 0 #8a1810, 0 6px 12px rgba(0,0,0,.3); cursor: pointer;
  display: grid; place-items: center;
}
#go-classic .rc-close::before { content: none; }
#go-classic .rc-close:hover { filter: brightness(1.08); transform: scale(1.05); }
#go-classic .rc-head { display: flex; flex-direction: column; align-items: center; margin: 0 4px 4px; padding-top: 0; }
#go-classic .rc-mode-title {
  position: relative; z-index: 3; align-self: center; margin: 0 0 -9px;
  padding: 5px 14px 8px; font-size: 10px; letter-spacing: .18em; border-radius: 10px 10px 6px 6px;
  border-width: 0; box-shadow: 0 3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
#go-classic .rc-ribbon {
  width: calc(100% + 24px); margin: 0 -12px 4px; font-size: 24px; overflow: visible; z-index: 1;
}
#go-classic .rc-ribbon .body {
  padding: 11px 12px 9px; gap: 6px; border-radius: 6px;
  box-shadow: 0 4px 0 rgba(0,0,0,.22), 0 8px 12px rgba(0,0,0,.18);
}
#go-classic .rc-ribbon .tail { display: block; top: 12px; width: 30px; height: 70%; }
#go-classic .rc-ribbon .burst { display: block; top: 50%; transform: translateY(-50%); font-size: 15px; color: #ffe38a; }
#go-classic .rc-ribbon .burst.l { left: 8%; transform: translateY(-50%) rotate(-16deg); }
#go-classic .rc-ribbon .burst.r { right: 8%; transform: translateY(-50%) rotate(16deg); }
#go-classic .rc-ribbon .body span, #go-classic .rc-ribbon .body span em {
  font-style: normal; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff7cf 0%, #ffe38a 40%, #f0b62e 78%, #d99212 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a3a10) drop-shadow(0 3px 0 rgba(0,0,0,.25));
}
#go-classic .go-grid { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-height: 0; }
#go-classic .go-left {
  gap: 6px; overflow: visible; padding: 0; background: none; border: 0; border-radius: 0;
  align-items: center; justify-content: flex-start;
}
#go-classic .go-right { min-height: 0; }
#go-classic .rc-score {
  position: relative; align-self: center; display: flex; flex-direction: row;
  align-items: center; justify-content: center; gap: 10px; width: 86%;
  margin: 4px auto 2px; padding: 7px 14px 8px;
  background: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 4px 0 rgba(214,186,120,.35), 0 7px 12px rgba(90,60,20,.08);
}
#go-classic .rc-score::before, #go-classic .rc-score::after { content: none; }
#go-classic .rc-crown { font-size: 36px; line-height: 1; filter: drop-shadow(0 2px 0 #c9a227); }
#go-classic .rc-score-num { align-items: flex-start; }
#go-classic .score-big { font-size: 34px; line-height: .9; color: #6d3fd6; text-shadow: none; }
#go-classic .go-points { font-size: 10px; letter-spacing: .14em; color: #7b5ad6; margin: 1px 0 0; font-weight: 800; }
#go-classic .rc-sparkle { position: absolute; color: #ffd24a; font-size: 12px; line-height: 1; text-shadow: 0 1px 0 #b8860b; pointer-events: none; }
#go-classic .rc-sparkle.sl { left: -4px; top: 6px; transform: rotate(-18deg); }
#go-classic .rc-sparkle.sr { right: -2px; top: 7px; transform: rotate(16deg); font-size: 13px; }
#go-classic .rc-sparkle.sb { right: 12px; bottom: -4px; font-size: 9px; }
#go-classic .go-prev {
  width: 92%; font-size: 11px; font-weight: 800; padding: 5px 12px; margin: 1px 0 2px;
  line-height: 1.3; border-radius: 999px; background: #fff8ea; border: 1px solid #ead7a8; color: #5a3a1f;
}
#go-classic .go-prev::before { font-size: 12px; }
#go-classic .go-prev b { color: #2f6fd6; }
#go-classic .rc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 1px 0 0; width: 100%;
}
#go-classic .rc-stats .stat-box {
  padding: 5px 4px 5px; gap: 4px; border-width: 2px; border-radius: 10px; min-width: 0;
  justify-content: center; text-align: center; flex-direction: row;
}
#go-classic .rc-stats .stat-box > div { align-items: flex-start; }
#go-classic .rc-stats .stat-box .ico { font-size: 14px; }
#go-classic .rc-stats .stat-box b { font-size: 12px; }
#go-classic .rc-stats .stat-box small { font-size: 8px; letter-spacing: .03em; }
#go-classic .note { font-size: 11px; padding: 4px 8px; margin: 3px 0 0; border-radius: 8px; width: 100%; }
#go-classic .rc-lb {
  display: flex; flex-direction: column; min-height: 0; height: auto;
  border-width: 0; border-radius: 12px; padding: 0 5px 5px; background: #fff;
  box-shadow: 0 3px 0 rgba(214,186,120,.3);
}
#go-classic .rc-lb-head {
  margin: 0 -5px 3px; padding: 5px 8px; font-size: 11px;
  border-radius: 10px 10px 0 0; box-shadow: none;
}
#go-classic .go-lb { flex: 0 0 auto; min-height: 0; max-height: none; overflow: visible; }
#go-classic .rc-table { border-spacing: 0 1px; table-layout: auto; width: 100%; }
#go-classic .rc-table td { padding: 2px 6px; font-size: 11px; }
#go-classic .rc-table td:first-child { font-size: 11px; width: 24px; padding-right: 2px; }
#go-classic .rc-table td:nth-child(2) { width: auto; overflow: hidden; }
#go-classic .rc-table .who { font-size: 11px; min-width: 0; width: 100%; justify-content: flex-start; gap: 5px; }
#go-classic .rc-table .who img { width: 16px; height: 16px; }
#go-classic .rc-table .rk-badge { width: 1.35em; height: 1.35em; font-size: .8em; }
#go-classic .rc-table .rk-badge.rk-medal { font-size: 1em; }
#go-classic .rc-table .mini-pts {
  margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 11px;
  color: var(--blue-dark); white-space: nowrap;
}
#go-classic .rc-table .mini-pts small { font-size: .75em; font-weight: 700; margin-left: .2em; }
#go-classic .rc-table .mini-pts .crown { margin-right: .2em; font-size: .85em; }
#go-classic .rc-table tr.me td:nth-child(2) { box-shadow: inset 0 0 0 1px #c9b4f5; }
#go-classic .rc-actions { padding-top: 8px; gap: 6px; flex: 0 0 auto; }
#go-classic .rc-actions .btn-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#go-classic .rc-actions .btn-row:has(#btn-go-next[hidden]) { grid-template-columns: 1fr; }
#go-classic .rc-actions .btn-row .btn {
  min-width: 0; width: 100%; font-size: 13px; padding: 8px 12px; border-width: 2px;
}
#go-classic .btn::before { display: none; }
#go-classic .rc-save { font-size: 13px; padding: 8px 12px; min-width: 0; width: 100%; }

@media (max-width: 760px) {
  #go-classic.art-board.full { width: min(94vw, 480px); border-radius: 22px; }
  #go-classic .art-inner { padding: 8px 12px 12px; }
  #go-classic .rc-ribbon { font-size: 20px; width: calc(100% + 12px); margin: 0 -6px 4px; }
  #go-classic .rc-ribbon .body { padding: 9px 8px 8px; }
  #go-classic .rc-ribbon .tail { display: none; }
  #go-classic .rc-mode-title { font-size: 9px; margin-bottom: -8px; padding: 4px 12px 6px; }
  #go-classic .rc-score { width: 100%; gap: 8px; padding: 6px 10px; }
  #go-classic .rc-crown { font-size: 30px; }
  #go-classic .score-big { font-size: 28px; }
  #go-classic .go-points { font-size: 9px; }
  #go-classic .go-prev { font-size: 11px; width: 100%; }
  #go-classic .rc-stats { gap: 4px; }
  #go-classic .rc-stats .stat-box { padding: 4px 3px; border-radius: 9px; }
  #go-classic .rc-stats .stat-box b { font-size: 11px; }
  #go-classic .rc-stats .stat-box small { font-size: 7px; }
  #go-classic .rc-stats .stat-box .ico { font-size: 12px; }
  #go-classic .rc-lb-head { font-size: 10px; padding: 4px 8px; }
  #go-classic .go-lb { max-height: none; overflow: visible; }
  #go-classic .rc-table td { padding: 1px 5px; font-size: 10px; }
  #go-classic .rc-table .who { font-size: 10px; gap: 4px; }
  #go-classic .rc-table .who img { width: 14px; height: 14px; }
  #go-classic .rc-table .mini-pts { font-size: 10px; }
  #go-classic .rc-actions .btn-row { grid-template-columns: 1fr; }
  #go-classic .rc-actions .btn-row .btn { font-size: 13px; padding: 9px 12px; }
  #go-classic .rc-close { width: 32px; height: 32px; font-size: 14px; right: -4px; top: -4px; }
}

/* ---------- Lesson Complete ---------- */
.rc-ribbon.green .body { background: linear-gradient(180deg, #6fcf6a 0%, #2f9a3c 55%, #1f7a2c 100%); box-shadow: 0 .55cqh 0 #145220, 0 1.2cqh 2.2cqh rgba(0,0,0,.35); }
.rc-ribbon.green .tail { background: linear-gradient(180deg, #2a8a36, #175c22); }
.rc-ribbon.green .body span { filter: drop-shadow(0 .35cqh 0 #145220) drop-shadow(0 0 .6cqh rgba(0,0,0,.25)); }
.rc-ribbon.green .sp { text-shadow: 0 .3cqh 0 #145220; }

/* Per-difficulty theme on the round-complete card: Easy=green, Medium=blue, Hard keeps the default red */
/* the module tab above the ribbon takes the level's colour too (green / blue / red), white text */
#go-classic.dm-easy .rc-mode-title, #go-classic.dm-medium .rc-mode-title, #go-classic.dm-hard .rc-mode-title { color: #fff; }
#go-classic.dm-easy .rc-mode-title { background: linear-gradient(180deg, #8fdc8a 0%, #3fae4c 60%, #2a8a36 100%); border-color: #145220; text-shadow: 0 .15cqh 0 #145220; box-shadow: inset 0 .2cqh 0 rgba(255,255,255,.35), 0 .35cqh 0 #145220, 0 .5cqh 1cqh rgba(0,0,0,.3); }
#go-classic.dm-medium .rc-mode-title { background: linear-gradient(180deg, #8fbcff 0%, #4a86e8 60%, #2f6fd9 100%); border-color: #163a85; text-shadow: 0 .15cqh 0 #163a85; box-shadow: inset 0 .2cqh 0 rgba(255,255,255,.35), 0 .35cqh 0 #163a85, 0 .5cqh 1cqh rgba(0,0,0,.3); }
#go-classic.dm-hard .rc-mode-title { background: linear-gradient(180deg, #ff8a80 0%, #e6453a 60%, #c4261c 100%); border-color: #7a1810; text-shadow: 0 .15cqh 0 #7a1810; box-shadow: inset 0 .2cqh 0 rgba(255,255,255,.35), 0 .35cqh 0 #7a1810, 0 .5cqh 1cqh rgba(0,0,0,.3); }
#go-classic.dm-easy .rc-ribbon .body { background: linear-gradient(180deg, #6fcf6a 0%, #2f9a3c 55%, #1f7a2c 100%); box-shadow: 0 4px 0 #145220, 0 8px 12px rgba(0,0,0,.18); }
#go-classic.dm-easy .rc-ribbon .tail { background: linear-gradient(180deg, #2a8a36, #175c22); }
#go-classic.dm-easy .rc-ribbon .body span, #go-classic.dm-easy .rc-ribbon .body span em { filter: drop-shadow(0 2px 0 #145220) drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
#go-classic.dm-easy .rc-ribbon .sp { text-shadow: 0 2px 0 #145220; }
#go-classic.dm-easy .rc-lb-head { background: linear-gradient(180deg, #6fcf6a 0%, #2f9a3c 55%, #1f7a2c 100%); }
#go-classic.dm-easy .go-prev b { color: #1f7a2c; }
#go-classic.dm-medium .rc-ribbon .body { background: linear-gradient(180deg, #5b9bf5 0%, #2f6fd9 55%, #1e4fb8 100%); box-shadow: 0 4px 0 #163a85, 0 8px 12px rgba(0,0,0,.18); }
#go-classic.dm-medium .rc-ribbon .tail { background: linear-gradient(180deg, #2f6fd9, #163a85); }
#go-classic.dm-medium .rc-ribbon .body span, #go-classic.dm-medium .rc-ribbon .body span em { filter: drop-shadow(0 2px 0 #163a85) drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
#go-classic.dm-medium .rc-ribbon .sp { text-shadow: 0 2px 0 #163a85; }
#go-classic.dm-medium .rc-lb-head { background: linear-gradient(180deg, #5b9bf5 0%, #2f6fd9 55%, #1e4fb8 100%); }
#go-classic.dm-medium .go-prev b { color: #2f6fd6; }
#go-classic.dm-hard .rc-ribbon .body { background: linear-gradient(180deg, #f5564a 0%, #d9281f 55%, #b81a12 100%); box-shadow: 0 4px 0 #8a120d, 0 8px 12px rgba(0,0,0,.18); }
#go-classic.dm-hard .rc-ribbon .tail { background: linear-gradient(180deg, #c2201a, #9c130d); }
#go-classic.dm-hard .rc-ribbon .body span, #go-classic.dm-hard .rc-ribbon .body span em { filter: drop-shadow(0 2px 0 #7a1810) drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
#go-classic.dm-hard .rc-ribbon .sp { text-shadow: 0 2px 0 #7a1810; }
#go-classic.dm-hard .rc-lb-head { background: linear-gradient(180deg, #f5564a 0%, #d9281f 55%, #b81a12 100%); }
#go-classic.dm-hard .go-prev b { color: #c4261c; }
#go-classic:not(.cleared) .rc-ribbon .body { background: linear-gradient(180deg, #f5564a 0%, #d9281f 55%, #b81a12 100%); box-shadow: 0 .55cqh 0 #8a120d, 0 1.2cqh 2.2cqh rgba(0,0,0,.35); }
#go-classic:not(.cleared) .rc-ribbon .body span, #go-classic:not(.cleared) .rc-ribbon .body span em { filter: drop-shadow(0 2px 0 #7a1810) drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
#go-classic:not(.cleared) .rc-ribbon .sp { text-shadow: 0 .25cqh 0 #7a1810; }
.go-inner .go-prev.done-text::before { content: '🎓'; }
.art-board.full .rc-save.btn-green { box-shadow: 0 .7cqh 0 #174d20, 0 1.2cqh 2.2cqh rgba(0,0,0,.3), inset 0 .4cqh 0 rgba(255,255,255,.35); }
.review-list { display: flex; flex-direction: column; gap: .6cqh; }
.review-card { display: grid; grid-template-columns: 7cqh 1fr; gap: 1cqw; align-items: center; background: #fff; border: .25cqh solid #d9bd86; border-radius: 1.2cqh; padding: .5cqh .9cqw; }
.review-card .sign-photo { width: 7cqh; height: 7cqh; object-fit: cover; border-radius: .8cqh; border: .25cqh solid var(--gold); background: #fff; box-shadow: none; }
.review-card .handviz { width: 7cqh; height: 8cqh; }
.review-card .rv-label { font-family: var(--font-display); font-size: 2.6cqh; color: var(--blue-dark); line-height: 1; }
.review-card .rv-hint { font-size: 1.45cqh; font-weight: 700; color: #5a3a1f; line-height: 1.25; margin-top: .3cqh; }
.review-empty { text-align: center; font-weight: 800; color: #1f6b2a; background: #e4f7dd; border: .3cqh solid var(--green); border-radius: 1.2cqh; padding: 1.2cqh 1cqw; font-size: 1.9cqh; }
@media (max-width: 760px) { .review-card { grid-template-columns: 52px 1fr; } .review-card .sign-photo { width: 52px; height: 52px; } .review-card .rv-label { font-size: 18px; } .review-card .rv-hint, .review-empty { font-size: 12px; } }

/* ---------- Leaderboard redesign ---------- */
.rc-ribbon.blue .body { background: linear-gradient(180deg, #6fb2ff 0%, #2f74d9 55%, #1e4fb8 100%); box-shadow: 0 .55cqh 0 #123a80, 0 1.2cqh 2.2cqh rgba(0,0,0,.35); }
.rc-ribbon.blue .tail { background: linear-gradient(180deg, #2c67c8, #163e8f); }
.rc-ribbon.blue .body span { filter: drop-shadow(0 .35cqh 0 #123a80) drop-shadow(0 0 .6cqh rgba(0,0,0,.25)); }
.rc-ribbon.blue .sp { text-shadow: 0 .3cqh 0 #123a80; }
.lb-inner { text-align: center; }
.lb-controls { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; flex-wrap: wrap; margin: 0 0 .6cqh; }
.art-board.full .pill-tabs { margin: 0; gap: .3cqw; background: #fff9ea; border: .3cqh solid #d9bd86; border-radius: 999px; padding: .35cqh .5cqw; box-shadow: inset 0 .3cqh .8cqh rgba(0,0,0,.08); }
.art-board.full .pill-tabs .tab { border: 0; background: transparent; color: #5a3a1f; font-size: 1.9cqh; padding: .6cqh 1.6cqw; }
.art-board.full .pill-tabs.small .tab { font-size: 1.6cqh; padding: .5cqh 1.3cqw; }
.art-board.full .pill-tabs .tab.on { background: linear-gradient(180deg, #9b5cf6, #5b2fb8); color: #fff; box-shadow: 0 .3cqh 0 #3b1f80; }
.art-board.full .pill-tabs .tab:hover:not(.on) { background: #f3e4c0; }
.lb-stats { margin: 0 0 .8cqh; }
.lb-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; text-align: left; }
.lb-panel .lb-scroll { flex: 1; min-height: 0; }
.lb-panel thead th { position: sticky; top: 0; background: #f6e9c9; z-index: 1; font-size: 1.4cqh; padding: .3cqh 1cqw; }
.lb-inner .rc-actions { margin-top: .8cqh; }
.art-board.full .lb-inner .rc-actions .btn { min-width: 0; font-size: 2cqh; padding: 1cqh 2.6cqw; }
@media (max-width: 760px) {
  .lb-controls { justify-content: center; }
  .art-board.full .pill-tabs .tab { font-size: 13px; padding: 6px 12px; } .art-board.full .pill-tabs.small .tab { font-size: 12px; padding: 5px 10px; }
  .lb-panel thead th { font-size: 10px; } .art-board.full .lb-inner .rc-actions .btn { font-size: 13px; padding: 9px 14px; }
}

/* ---------- My Progress: fit inside the board + separate Game / Learn ---------- */
.profile-grid { grid-template-columns: 1fr 1.5fr; gap: 1.6cqw; }
.profile-col { min-width: 0; }
.stat-groups { display: flex; gap: 1.4cqw; margin: 1.1cqh 0 1cqh; }
.stat-group { position: relative; flex: 1 1 0; min-width: 0; border: .25cqh solid #c9a86a; border-radius: 1.4cqh; padding: 1.3cqh .8cqw .6cqh; background: rgba(255,249,234,.45); }
.stat-group.game { flex-grow: 6; } .stat-group.learn { flex-grow: 5; }
.sg-label { position: absolute; top: -1.2cqh; left: 1cqw; font-size: 1.35cqh; font-weight: 800; letter-spacing: .1cqh; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #6fcf6a, #2f9a3c); padding: .2cqh 1cqw; border-radius: 999px; box-shadow: 0 .25cqh 0 #145220; }
.stat-group.learn .sg-label { background: linear-gradient(180deg, #9b5cf6, #5b2fb8); box-shadow: 0 .25cqh 0 #3b1f80; }
.art-board.full .stat-group .stat-row { margin: 0; gap: .6cqw; }
.art-board.full .stat-group .stat-box { padding: .4cqh .5cqw; flex: 1 1 auto; }
.art-board.full .stat-group .stat-box b { font-size: 2.3cqh; white-space: nowrap; }
.art-board.full .stat-group .stat-box small { font-size: 1.1cqh; letter-spacing: .05cqh; white-space: nowrap; }
.pf-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-bottom: .6cqh; flex-wrap: wrap; }
.pf-hist-head .go-lb-title { margin: 0; }
.art-board.full .pill-tabs .tab em { font-style: normal; display: inline-block; min-width: 2.2cqh; padding: 0 .5cqw; margin-left: .3cqw; border-radius: 999px; background: rgba(0,0,0,.12); font-size: 1.3cqh; line-height: 2.2cqh; text-align: center; }
.art-board.full .pill-tabs .tab.on em { background: rgba(255,255,255,.25); }
.art-board.full .pf-table th { font-size: 1.25cqh; padding: .2cqh .7cqw; position: sticky; top: 0; background: #f6e9c9; z-index: 1; }
.art-board.full .pf-table td { font-size: 1.55cqh; padding: .5cqh .7cqw; }
.art-board.full .pf-table td:first-child { width: auto; text-align: left; font-size: 1.7cqh; }
.art-board.full .pf-table .pts { font-size: 1.8cqh; text-align: left; }
.art-board.full .pf-table .mode-tag { font-size: 1.15cqh; padding: .2cqh .8cqw; }
.pf-bars { justify-content: center; } .pf-bars .bar { max-width: 9cqw; }
@media (max-width: 760px) {
  .stat-groups { flex-direction: column; gap: 14px; } .sg-label { font-size: 11px; }
  .art-board.full .pf-table td { font-size: 12px; } .art-board.full .pf-table td:first-child { font-size: 13px; } .art-board.full .pf-table .pts { font-size: 13px; } .art-board.full .pf-table th { font-size: 10px; }
  .art-board.full .pill-tabs .tab em { font-size: 10px; line-height: 16px; min-width: 16px; }
}

/* ---------- name PIN dialog ---------- */
.pin-inner { text-align: center; }
.pin-msg { font-size: 15px; font-weight: 700; color: #5a3a1f; margin: 4px 0 10px; line-height: 1.35; }
.pin-msg b { color: var(--blue-dark); }
.pin-fields { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0; }
.pin-field { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: #6b4b2a; }
.pin-input { width: 150px; padding: 10px 12px; border-radius: 12px; border: 3px solid var(--wood); background: #fff9ea; color: var(--ink); font-family: var(--font-display); font-size: 26px; text-align: center; letter-spacing: 8px; outline: none; box-shadow: inset 0 3px 8px rgba(0,0,0,.15); }
.pin-input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(109,63,214,.25); }
.pin-input::placeholder { letter-spacing: 4px; color: #b7a488; }
.pin-error { color: #8a1c14; background: #ffe3df; border: 2px solid #e05b4e; border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 13px; margin-top: 6px; }
.pin-hint { font-size: 12px; font-weight: 700; color: #6b4b2a; margin-top: 8px; }
.rc-name input[readonly] { cursor: default; color: var(--blue-dark); }
@media (max-width: 760px) { .pin-input { width: 120px; font-size: 20px; letter-spacing: 5px; } .pin-msg { font-size: 13px; } }

/* ---------- new painted main menu: live player plaque (top right) ---------- */
.menu-chip { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); box-sizing: border-box; display: flex; align-items: center; gap: 1cqw; padding: 0 1.2cqw 0 .6cqw; border-radius: 999px; background: linear-gradient(180deg, #8a5a2b 0%, #6a4321 55%, #4e2f15 100%); border: .35cqh solid #e8c15c; box-shadow: 0 .4cqh 1cqh rgba(0,0,0,.4), inset 0 .3cqh 0 rgba(255,255,255,.2); color: #fff; cursor: pointer; font: inherit; text-align: left; transition: transform .15s, filter .15s; }
.menu-chip:hover { transform: scale(1.03); filter: brightness(1.08); }
.menu-chip img { width: 6.6cqh; height: 6.6cqh; border-radius: 50%; border: .3cqh solid #e8c15c; background: #fff9ea; object-fit: cover; flex: 0 0 auto; }
.menu-chip span { min-width: 0; }
.menu-chip small { display: block; font-size: 1.7cqh; font-weight: 700; opacity: .85; letter-spacing: .05cqh; }
.menu-chip b { display: block; font-family: var(--font-display); font-size: 2.7cqh; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* new painted name screen: the input sits inside the drawn cream box, after its person icon */
.hotspot-input.name-input { text-transform: none; background: #fdf6e3; border-radius: .8cqh; padding: 0 1.4cqw; box-shadow: none; text-align: left; letter-spacing: .3cqw; }
.hotspot-input.name-input:focus { box-shadow: 0 0 0 .35cqh rgba(109, 63, 214, .35); }

/* ---------- exit dialog ---------- */
.exit-msg { font-size: 15px; font-weight: 700; color: #5a3a1f; line-height: 1.6; margin: 6px 0 4px; }
.exit-key { display: inline-block; font-family: var(--font-display); font-size: 16px; color: var(--blue-dark); background: #fff9ea; border: 2px solid var(--wood); border-bottom-width: 4px; border-radius: 8px; padding: 1px 12px; margin: 0 2px; }
@media (max-width: 760px) { .exit-msg { font-size: 13px; } .exit-key { font-size: 14px; } }

/* ---------- level menus: painted Alphabets / Numbers pages (Learn, Game, Leaderboard cards, Home, X exit, player plaque) ---------- */
#screen-level .hotspot { border-radius: 2cqh; }
/* Alphabets menu (painting v3, 2026-09-19): three cards, X top-right (goes back), wooden player plaque top-left, no Home */
#screen-level.lv-alphabet #btn-learn { --x:.239; --y:.418; --w:.163; --h:.456; }
#screen-level.lv-alphabet #btn-game { --x:.435; --y:.418; --w:.163; --h:.456; }
#screen-level.lv-alphabet #btn-level-lb { --x:.641; --y:.418; --w:.168; --h:.456; }
#screen-level.lv-alphabet #btn-level-home { display: none; }
#screen-level.lv-alphabet #btn-level-exit { --x:.938; --y:.028; --w:.05; --h:.089; border-radius: 50%; }
#screen-level.lv-alphabet #level-chip { --x:.009; --y:.015; --w:.184; --h:.102; border-radius: 1.8cqh; padding: 0 1.4cqw 0 .5cqw; gap: 1.2cqw; background: linear-gradient(180deg, #a06c34 0%, #78491f 50%, #56341a 100%); border-width: .45cqh; width: auto; min-width: calc(var(--w) * 100%); max-width: 34cqw; }
#screen-level.lv-alphabet #level-chip img { width: 8.2cqh; height: 8.2cqh; }
#screen-level.lv-alphabet #level-chip small { font-size: 2cqh; }
#screen-level.lv-alphabet #level-chip b { font-size: 3.3cqh; }
#screen-level.lv-alphabet #level-chip b.long { font-size: 2.9cqh; } #screen-level.lv-alphabet #level-chip b.xlong { font-size: 2.55cqh; }
/* Numbers menu shares the v3 layout: level-numbers.jpg is the Alphabets painting with its texts repainted for numbers */
#screen-level.lv-numbers #btn-learn { --x:.239; --y:.418; --w:.163; --h:.456; }
#screen-level.lv-numbers #btn-game { --x:.435; --y:.418; --w:.163; --h:.456; }
#screen-level.lv-numbers #btn-level-lb { --x:.641; --y:.418; --w:.168; --h:.456; }
#screen-level.lv-numbers #btn-level-home { display: none; }
#screen-level.lv-numbers #btn-level-exit { --x:.938; --y:.028; --w:.05; --h:.089; border-radius: 50%; }
#screen-level.lv-numbers #level-chip { --x:.009; --y:.015; --w:.184; --h:.102; border-radius: 1.8cqh; padding: 0 1.4cqw 0 .5cqw; gap: 1.2cqw; background: linear-gradient(180deg, #a06c34 0%, #78491f 50%, #56341a 100%); border-width: .45cqh; width: auto; min-width: calc(var(--w) * 100%); max-width: 34cqw; }
#screen-level.lv-numbers #level-chip img { width: 8.2cqh; height: 8.2cqh; }
#screen-level.lv-numbers #level-chip small { font-size: 2cqh; }
#screen-level.lv-numbers #level-chip b { font-size: 3.3cqh; }
#screen-level.lv-numbers #level-chip b.long { font-size: 2.9cqh; } #screen-level.lv-numbers #level-chip b.xlong { font-size: 2.55cqh; }
#level-chip { padding-left: .4cqw; }
#level-chip img { width: 7.6cqh; height: 7.6cqh; }

/* Learn board: an unused slot is blank parchment (covers the cards painted into learn.jpg) */
.slot.empty { display: flex; align-items: center; justify-content: center; }
.slot-empty { font-size: 5cqh; color: rgba(90, 58, 31, .22); text-shadow: 0 .2cqh 0 rgba(255,255,255,.5); }
.slot[hidden] { display: none; }

/* camera restart button (top right of the camera panel) */
.cam-restart { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(0,0,0,.55); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; z-index: 3; display: inline-flex; align-items: center; justify-content: center; }
.cam-restart:hover { background: rgba(62,167,75,.85); }
.cam-area .cam-restart { top: .8cqh; right: .8cqw; width: 3.4cqh; height: 3.4cqh; font-size: 2.1cqh; border-width: .25cqh; }
.cam-restart[hidden] { display: none; }

/* ---------- painted leaderboard: podium + rows 4-10 ---------- */
.lbx-caption { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #fff1c2, #ffe69b); border-radius: 1cqh; color: #4a2c10; text-align: center; line-height: 1.1; }
.lbx-caption b { font-family: var(--font-display); font-size: 3.1cqh; letter-spacing: .1cqh; white-space: nowrap; }
.lbx-caption small { font-size: 1.45cqh; font-weight: 800; color: #6b4b2a; margin-top: .35cqh; white-space: nowrap; }
.lbx-av { border-radius: 50%; object-fit: cover; background: #fff9ea; box-shadow: inset 0 0 0 .2cqh rgba(0,0,0,.08); }
.lbx-av.empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 3cqh; color: #b8a27a; background: #f6ecd6; }
.lbx-name { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.5cqh; color: #2b1a0e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: .8cqh; padding: 0 .4cqw; }
.lbx-name.silver { background: #e9eef7; } .lbx-name.gold { background: #fdf5e1; font-size: 2.8cqh; } .lbx-name.bronze { background: #fddcb8; }
.lbx-name.me { box-shadow: 0 0 0 .3cqh var(--purple); }
.lbx-pts { display: flex; align-items: center; justify-content: center; gap: .4cqw; border-radius: 999px; color: #fff; font-family: var(--font-display); font-size: 2.5cqh; text-shadow: 0 .2cqh 0 rgba(0,0,0,.25); box-shadow: inset 0 .3cqh 0 rgba(255,255,255,.35), 0 .3cqh 0 rgba(0,0,0,.22); }
.lbx-pts small { font-size: 1.5cqh; font-weight: 800; }
.lbx-pts.silver { background: linear-gradient(180deg, #3d8cff, #0458d5); } .lbx-pts.gold { background: linear-gradient(180deg, #f7c22a, #d18203); font-size: 2.9cqh; } .lbx-pts.bronze { background: linear-gradient(180deg, #f98a3e, #d45717); }
.lbx-pts.dim { background: #d9bd86; color: #6b4b2a; text-shadow: none; box-shadow: none; }
.lbx-rows { display: flex; flex-direction: column; justify-content: flex-start; gap: .55cqh; padding: .3cqh 0; background: linear-gradient(180deg, #f3e0ae, #e8cf9a); border-radius: 1cqh; overflow: hidden; }
.lbx-row { flex: 0 0 auto; height: 4.05cqh; display: flex; align-items: center; gap: 1cqw; padding: 0 1.6cqw 0 1.8cqw; background: #fdf5e2; border-radius: .9cqh; box-shadow: 0 .15cqh 0 rgba(0,0,0,.08); }
.lbx-row .rk { width: 2.2cqw; font-family: var(--font-display); font-size: 2.2cqh; color: #41250f; }
.lbx-row .av { width: 3.2cqh; height: 3.2cqh; border-radius: 50%; object-fit: cover; border: .2cqh solid #d9bd86; background: #fff; }
.lbx-row .nm { flex: 1; font-size: 2cqh; font-weight: 800; color: #2b1a0e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbx-row .pt { font-family: var(--font-display); font-size: 2.2cqh; color: #0d4da5; } .lbx-row .pt small { font-size: 1.5cqh; font-weight: 800; margin-left: .3cqw; }
.lbx-row.me { box-shadow: 0 0 0 .3cqh var(--purple), 0 .15cqh 0 rgba(0,0,0,.08); }
.lbx-row.empty { justify-content: center; color: #6b4b2a; font-weight: 800; font-size: 1.9cqh; text-align: center; }
.lbx-note { display: flex; align-items: center; justify-content: center; font-size: 1.5cqh; font-weight: 800; color: #8a1c14; }
.lbx-note[hidden] { display: none; }
.lbx-side.on { box-shadow: 0 0 0 .4cqh rgba(255,224,138,.95), 0 0 3cqh 1cqh rgba(255,224,138,.55); }
.lbx-side[data-view="top"]:not(.on) { background: rgba(70, 45, 20, .42); }   /* the painted button is drawn as selected: mute it when another view is active */
.lbx-row.pinned { margin-top: auto; border-top: .3cqh dashed #b8965a; border-radius: 0 0 .9cqh .9cqh; }
.lbx-row .you { font-style: normal; font-size: 1.3cqh; color: #fff; background: var(--purple); border-radius: 999px; padding: .1cqh .7cqw; margin-left: .6cqw; vertical-align: middle; }

/* ---------- painted "My Leaderboard" (personal board) ---------- */
.mp-plaque { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #6b3409, #4e2404); color: #ffe9b8; font-family: var(--font-display); font-size: 2.3cqh; letter-spacing: .15cqh; border-radius: .8cqh; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .6cqw; }
.mp-avatar { border-radius: 50%; object-fit: cover; background: #fff9ea; }
.mp-name { margin: 0; display: flex; align-items: center; background: #fdefd3; font-family: var(--font-display); font-size: 3.6cqh; color: #2b1a0e; letter-spacing: .1cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* exact case; long names shrink via fitText() */
.mp-since { display: flex; align-items: center; background: #fdefd3; font-size: 1.75cqh; font-weight: 700; color: #6b4b2a; white-space: nowrap; overflow: hidden; }
.mp-val { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 3.6cqh; line-height: 1; border-radius: .6cqh; white-space: nowrap; }
.mp-val.game { background: #f2eefc; color: #5869bf; } .mp-val.learn { background: #fdf3e0; color: #46260d; }
.mp-bestpts { display: flex; align-items: baseline; justify-content: flex-start; gap: .3cqw; background: #fdf9f0; font-family: var(--font-display); font-size: 2.8cqh; color: #1e3b99; white-space: nowrap; overflow: hidden; }
.mp-bestpts small { font-size: 1.5cqh; font-weight: 800; color: #6b4b2a; }
.mp-lock { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(40, 25, 12, .6); font-size: 4cqh; box-shadow: inset 0 0 0 .3cqh rgba(255,255,255,.25); }
.mp-lock[hidden] { display: none; }
.mp-date { display: flex; align-items: center; justify-content: center; background: #fcead6; font-size: 1.55cqh; font-weight: 800; color: #83674c; white-space: nowrap; border-radius: .4cqh; }
.mp-date.locked { color: #a58b6d; font-style: italic; }

/* player names are links to that player's board */
.lbx-link { cursor: pointer; }
.lbx-name.lbx-link:hover, .lbx-name.lbx-link:focus-visible { text-decoration: underline; outline: none; box-shadow: 0 0 0 .3cqh rgba(255,224,138,.95); }
.lbx-row.lbx-link:hover, .lbx-row.lbx-link:focus-visible { background: #fff1c2; outline: none; }
.lbx-av.lbx-link:hover { box-shadow: 0 0 0 .3cqh rgba(255,224,138,.95); }
.rc-table tr[data-player] { cursor: pointer; } .rc-table tr[data-player]:hover td { background: #fff1b8; }
.mp-cover { background: #fdefd3; border-radius: 1cqh; } .mp-cover[hidden] { display: none; }

/* PIN dialog: forgot-PIN path and the one-time recovery code */
.pin-forgot { background: none; border: 0; color: var(--purple); font-weight: 800; font-size: 13px; text-decoration: underline; cursor: pointer; margin-top: 6px; font-family: inherit; }
.pin-forgot[hidden], .pin-code-show[hidden], #pin-code-wrap[hidden], #pin-pin-wrap[hidden] { display: none; }
.pin-field.wide .pin-input { width: 230px; letter-spacing: 4px; font-size: 22px; text-transform: uppercase; }
.pin-code-show { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; flex-wrap: wrap; }
.pin-code-show b { font-family: var(--font-display); font-size: 34px; letter-spacing: 6px; color: var(--blue-dark); background: #fff9ea; border: 3px dashed var(--wood); border-radius: 12px; padding: 6px 18px; user-select: all; }
@media (max-width: 760px) { .pin-code-show b { font-size: 24px; letter-spacing: 4px; } .pin-field.wide .pin-input { width: 190px; font-size: 18px; } }

/* mode switch inside the leaderboard caption ribbon */
.lbx-sub { display: flex; gap: .5cqw; justify-content: center; align-items: center; margin-top: .35cqh; font-size: 1.45cqh; font-weight: 800; color: #6b4b2a; white-space: nowrap; }
.lbx-tab { border: 0; border-radius: 999px; padding: .2cqh 1cqw; font: inherit; font-size: 1.35cqh; font-weight: 800; line-height: 1.2; background: rgba(90, 58, 31, .14); color: #5a3a1f; cursor: pointer; }
.lbx-tab:hover { background: rgba(90, 58, 31, .24); }
.lbx-tab.on { background: linear-gradient(180deg, #9b5cf6, #5b2fb8); color: #fff; box-shadow: 0 .2cqh 0 #3b1f80; }

/* ---------- main menu: extra plaque drawn to match the painted buttons ---------- */
/* main menu: painted cards + round icon hotspots; the chip mirrors the painted wooden name plaque */
.hotspot.round { border-radius: 50%; }
/* the "i" badge drawn over the painted gear on the menu and the level screen: opens About SignBuddy */
.info-spot { display: flex; align-items: center; justify-content: center; transform: scale(1.06); background: radial-gradient(circle at 42% 34%, #3d4f94, #1a2350 68%, #111838); border: .42cqh solid #e8bd4e; box-shadow: 0 .35cqh .7cqh rgba(0,0,0,.5), inset 0 .3cqh 0 rgba(255,255,255,.16); color: #fff; }
.info-spot::before { content: 'i'; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 6.4cqh; line-height: 1; text-shadow: 0 .25cqh 0 rgba(0,0,0,.45); transform: translateY(-.2cqh); }
.info-spot:hover, .info-spot:focus-visible { transform: scale(1.14); filter: brightness(1.12); }
.icon-btn.info-i { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 24px; padding-bottom: 3px; }
/* choose-your-level About: same circular badge + round hit target as the main menu */
#diff-info { overflow: visible; }
#diff-info::after {
  content: 'About';
  position: absolute; left: 50%; top: 102%; transform: translateX(-50%);
  pointer-events: none;
  font-family: var(--font-body); font-style: normal; font-weight: 800;
  font-size: 1.7cqh; line-height: 1; letter-spacing: .01em;
  padding: .18cqh .45cqw .22cqh; white-space: nowrap;
  color: #3d2918; text-shadow: 0 .1cqh 0 rgba(255,236,200,.45);
  background: linear-gradient(180deg, #e2c48e, #c9a25c 60%, #b48a44);
  border: .16cqh solid #6a4a22; border-radius: .45cqh;
  box-shadow: 0 .15cqh 0 #6a4a22;
}
.hotspot.menu-card { border-radius: 3.2cqh; }
.hotspot.menu-card.locked { background: rgba(12, 8, 32, .22); }
.hotspot.menu-card.locked:hover, .hotspot.menu-card.locked:focus-visible { background: rgba(12, 8, 32, .1); }
/* locked card: a gold padlock drawn as SVG over the painted card. Every card carries the padlock + badge markup; they only
   show when the admin has locked that module for this player (.locked), or as a plain "coming soon" ribbon on an unlocked
   module whose signs are not ready yet (.soon). */
.hotspot.menu-card:not(.locked) .lock-chain { display: none; }
.hotspot.menu-card:not(.locked):not(.soon) .soon-badge { display: none; }
.hotspot.menu-card.soon .soon-badge { background: linear-gradient(180deg, #c8f0ff, #6fc2ee); color: #0f3b5c; border-color: #2b6f9c; box-shadow: 0 .35cqh 0 #2b6f9c, 0 .8cqh 1.2cqh rgba(0,0,0,.3); }
.hotspot.menu-card.pending .soon-badge { background: linear-gradient(180deg, #fff1b8, #f3c84a); }
/* locked-module dialog: pay link, "I've paid" request and the request's status */
a.btn { text-decoration: none; }
.unlock-form { display: grid; gap: 10px; justify-items: center; margin-top: 10px; }
.unlock-ref { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 440px); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; color: #6b4b2a; }
.unlock-ref input { width: 100%; padding: 8px 12px; border-radius: 12px; border: 3px solid var(--wood); background: #fff9ea; color: var(--ink); font: inherit; font-size: 15px; text-align: center; outline: none; box-shadow: inset 0 3px 8px rgba(0,0,0,.15); }
.unlock-ref input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(109,63,214,.25); }
.unlock-status { margin: 10px auto 0; max-width: 560px; padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.unlock-status.wait { background: #fff3d6; color: #7a4a06; border: 2px solid #efc462; }
.unlock-status.no { background: #fde2df; color: #8a1a12; border: 2px solid #f0a39c; }
@media (max-width: 760px) { .unlock-status { font-size: 12px; } .unlock-ref input { font-size: 13px; } }
.lock-chain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 .5cqh .7cqh rgba(0,0,0,.6)); }
.lock-chain .shackle { fill: none; stroke: #c9ced6; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 .3px #3a3f47); }
.lock-chain .body { fill: #f0b83a; stroke: #6b4409; stroke-width: 1; }
.lock-chain .hole { fill: #5a3609; }
.hotspot.menu-card.locked:hover .lock-chain, .hotspot.menu-card.locked:focus-visible .lock-chain { transform: scale(1.02); }
.soon-badge { position: absolute; top: -1.6cqh; left: 50%; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(180deg, #ffd85c, #e4a10b); color: #4a2c10; font-size: 2cqh; font-weight: 800; letter-spacing: .05cqh; text-transform: uppercase; padding: .5cqh 1.4cqw; border-radius: 999px; border: .28cqh solid #7a4a1c; box-shadow: 0 .35cqh 0 #7a4a1c, 0 .8cqh 1.2cqh rgba(0,0,0,.3); white-space: nowrap; pointer-events: none; }
.menu-chip.plank { border-radius: 1.8cqh; padding: 0 1.4cqw 0 .5cqw; gap: 1.2cqw; background: linear-gradient(180deg, #a06c34 0%, #78491f 50%, #56341a 100%); border-width: .45cqh; }
.menu-chip.plank img { width: 8.2cqh; height: 8.2cqh; }
.menu-chip.plank small { font-size: 2cqh; }
.menu-chip.plank b { font-size: 3.3cqh; }
/* chips grow to show the whole name (max 15 chars); long names use a smaller face */
.menu-chip.plank { width: auto; min-width: calc(var(--w) * 100%); max-width: 34cqw; }
.menu-chip b.long { font-size: 2.35cqh; } .menu-chip b.xlong { font-size: 2.05cqh; }
.menu-chip.plank b.long { font-size: 2.9cqh; } .menu-chip.plank b.xlong { font-size: 2.55cqh; }
/* naming rules on the name screen */
.name-rules { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: .3cqh 1.2cqw; border-radius: 1cqh; background: rgba(253, 246, 227, .93); border: .2cqh solid #b8965a; box-shadow: 0 .3cqh .8cqh rgba(0,0,0,.25); color: #4a3520; font-size: 1.85cqh; line-height: 1.3; font-weight: 700; }
.name-rules b { color: #6d3fd6; }
.hotspot-input.name-input.long { font-size: 4.2cqh; letter-spacing: .2cqw; }
.hotspot-input.name-input.xlong { font-size: 3.5cqh; letter-spacing: .15cqw; }
@media (max-width: 760px) { .soon-badge { font-size: 8px; padding: 2px 7px; top: -9px; } }

/* avatar picker + the "more avatars" plaque on the avatar screen + the edit badge on My Leaderboard */
.more-avatars { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 100%); height: calc(var(--h) * 100%); box-sizing: border-box; display: flex; align-items: center; gap: .8cqw; padding: 0 1cqw 0 .5cqw; border-radius: 999px; background: linear-gradient(180deg, #8a5cf0, #5b2fb8); border: .35cqh solid #e8c15c; box-shadow: 0 .5cqh 0 #3a1b7a, 0 .8cqh 1.4cqh rgba(0,0,0,.4), inset 0 .3cqh 0 rgba(255,255,255,.3); color: #fff; font: inherit; cursor: pointer; text-align: left; transition: transform .12s, filter .15s; }
.more-avatars:hover { transform: translateY(-.2cqh); filter: brightness(1.08); }
.more-avatars img { width: 5.6cqh; height: 5.6cqh; border-radius: 50%; border: .25cqh solid #e8c15c; background: #fff9ea; object-fit: cover; flex: 0 0 auto; }
.more-avatars span { min-width: 0; }
.more-avatars small { display: block; font-size: 1.5cqh; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-avatars b { display: block; font-family: var(--font-display); font-size: 2.2cqh; line-height: 1.1; white-space: nowrap; }
.more-avatars .chev { margin-left: auto; font-size: 3.6cqh; font-weight: 900; line-height: 1; }
.av-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 4px 0 2px; }
.av-pick { display: flex; flex-direction: column; align-items: center; gap: 3px; background: rgba(255,255,255,.55); border: 2px solid #b8965a; border-radius: 12px; padding: 6px 2px 4px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; color: var(--ink); transition: transform .12s; }
.av-pick:hover { transform: translateY(-2px); }
.av-pick img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #c99a3a; background: #fff; }
.av-pick.selected { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(109, 63, 214, .35); background: #efe6ff; }
.mp-avatar-btn .edit-badge { position: absolute; right: -.3cqw; bottom: .3cqh; width: 3.6cqh; height: 3.6cqh; border-radius: 50%; background: #fff; border: .25cqh solid #c99a3a; display: grid; place-items: center; font-size: 2cqh; box-shadow: 0 .2cqh .5cqh rgba(0,0,0,.35); }
@media (max-width: 760px) { .av-grid { grid-template-columns: repeat(4, 1fr); } .av-pick img { width: 40px; height: 40px; } }

/* choose-your-level screen (game difficulty), one painting per mode */
#screen-diff .diff-card { border-radius: 3cqh; }
#screen-diff.dm-alphabet .diff-card[data-diff=easy] { --x:.255; --y:.393; --w:.154; --h:.358; }
#screen-diff.dm-alphabet .diff-card[data-diff=medium] { --x:.426; --y:.393; --w:.154; --h:.358; }
#screen-diff.dm-alphabet .diff-card[data-diff=hard] { --x:.599; --y:.393; --w:.157; --h:.358; }
#screen-diff.dm-alphabet #diff-home { --x:.70; --y:.02; --w:.057; --h:.12; }
#screen-diff.dm-alphabet #diff-lb { --x:.775; --y:.02; --w:.057; --h:.12; }
#screen-diff.dm-alphabet #diff-info { --x:.853; --y:.02; --w:.057; --h:.1013; }
#screen-diff.dm-alphabet #diff-sound { --x:.929; --y:.02; --w:.056; --h:.12; }
#screen-diff.dm-numbers .diff-card[data-diff=easy] { --x:.262; --y:.388; --w:.154; --h:.363; }
#screen-diff.dm-numbers .diff-card[data-diff=medium] { --x:.435; --y:.388; --w:.158; --h:.363; }
#screen-diff.dm-numbers .diff-card[data-diff=hard] { --x:.615; --y:.388; --w:.157; --h:.363; }
#screen-diff.dm-numbers #diff-home { --x:.697; --y:.02; --w:.056; --h:.12; }
#screen-diff.dm-numbers #diff-lb { --x:.772; --y:.02; --w:.057; --h:.12; }
#screen-diff.dm-numbers #diff-info { --x:.851; --y:.02; --w:.057; --h:.1013; }
#screen-diff.dm-numbers #diff-sound { --x:.927; --y:.02; --w:.057; --h:.12; }
.diff-best { position: absolute; left: 50%; bottom: -1.7cqh; transform: translateX(-50%); background: linear-gradient(180deg, #ffd85c, #e4a10b); color: #4a2c10; font-size: 1.8cqh; font-weight: 800; padding: .4cqh 1.2cqw; border-radius: 999px; border: .25cqh solid #7a4a1c; box-shadow: 0 .3cqh 0 #7a4a1c, 0 .6cqh 1cqh rgba(0,0,0,.3); white-space: nowrap; pointer-events: none; }
.diff-best:empty { display: none; }
.diff-best.none { background: linear-gradient(180deg, #f6ecd6, #d9c39a); color: #6b4b2a; }
.diff-best.lock { background: linear-gradient(180deg, #ece4d6, #cdbfa4); color: #5a4632; }
#screen-diff .diff-card.locked { background: rgba(12, 8, 32, .32); cursor: not-allowed; }
#screen-diff .diff-card.locked:hover { transform: none; box-shadow: 0 0 0 .4cqh rgba(255,224,138,.5); }
.hud-path .support { color: #1f6b2a; font-weight: 800; }
.ref-memory { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqh; width: 100%; height: 100%; }
.ref-memory span { font-family: var(--font-display); font-size: 12cqh; line-height: 1; color: var(--purple-dark); text-shadow: 0 .4cqh 0 #fff, 0 .8cqh 1.6cqh rgba(109,63,214,.35); }
.ref-memory small { font-size: 1.6cqh; font-weight: 800; color: #6b4b2a; text-align: center; }
@media (max-width: 760px) { .diff-best { font-size: 9px; } }

/* settings dialog */
.art-inner.settings { text-align: left; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(90, 60, 20, .3); }
.set-row > label { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 2.8cqh, 20px); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.set-ico { font-size: 1.2em; }
.set-ctl { display: flex; align-items: center; gap: 10px; }
.set-ctl input[type=range] { width: clamp(110px, 22cqw, 240px); accent-color: #6d3fd6; cursor: pointer; }
.set-ctl output { min-width: 3.2em; text-align: right; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sw { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track { width: 52px; height: 28px; border-radius: 999px; background: #b9a27a; border: 2px solid #5a3a1f; position: relative; transition: background .2s; box-sizing: border-box; }
.sw-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff8e6; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .2s; }
.sw input:checked + .sw-track { background: #2fa85a; }
.sw input:checked + .sw-track::after { transform: translateX(24px); }
.sw input:focus-visible + .sw-track { box-shadow: 0 0 0 3px rgba(109, 63, 214, .45); }
.sw-txt { min-width: 2.2em; font-weight: 800; color: var(--ink); }
.set-txt { display: flex; flex-direction: column; line-height: 1.1; }
.set-txt small { font-family: var(--font-body, inherit); font-size: clamp(10px, 1.7cqh, 12px); font-weight: 600; color: #6b4b2a; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: #6d3fd6; text-decoration: underline; cursor: pointer; }

/* About / Credits card */
.art-inner.about { display: flex; flex-direction: column; overflow: hidden; text-align: left; font-size: clamp(13px, 2.7cqh, 16px); }
.art-inner.about .board-title { text-align: center; margin-bottom: 4px; }
.about-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 8px; flex: 0 0 auto; }
.about-tab { font: inherit; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; padding: 5px 18px; border-radius: 999px; border: 2px solid #5a3a1f; background: rgba(90, 60, 30, .12); color: var(--ink); cursor: pointer; transition: transform .12s; }
.about-tab:hover { transform: translateY(-1px); }
.about-tab.on { background: linear-gradient(180deg, #9b5cf6, #5b2fb8); color: #fff; border-color: var(--gold); box-shadow: 0 2px 0 rgba(0,0,0,.25); text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.about-panel { flex: 1; min-height: 0; overflow: auto; padding: 0 6px; }
.about-panel p { margin: 0 0 8px; line-height: 1.45; }
.about-note { font-size: 11.5px; opacity: .75; font-style: italic; }
.about-panel.credits { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; align-content: start; }
.about-panel.credits h3 { font-family: var(--font-display); font-size: 1.05em; letter-spacing: .5px; text-transform: uppercase; color: #5b2fb8; margin: 4px 0 2px; }
.about-panel.credits p { margin: 0 0 6px; line-height: 1.5; }
.about-panel[hidden] { display: none; }
.about-actions { margin-top: 8px; flex: 0 0 auto; }
@media (max-width: 760px) { .about-panel.credits { grid-template-columns: 1fr; } .art-inner.about { max-height: 80vh; } }

/* ---------- Perfect / champion firework popup ---------- */
#modal-celebrate { z-index: 80; background: rgba(8, 5, 25, .35); overflow: visible; padding: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#modal-celebrate .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#modal-celebrate .fx-card {
  position: relative; z-index: 1; width: min(88vw, 380px);
  text-align: center; padding: 22px 22px 18px;
  background: linear-gradient(180deg, #fff8ea, #f3e0b4);
  border-radius: 24px;
  box-shadow: inset 0 0 0 5px #e8c57a, inset 0 0 0 8px #fff6dc, 0 10px 0 #c9a15a, 0 18px 32px rgba(20,10,40,.45);
  transform: translateY(12px) scale(.96); transition: transform .25s; overflow: visible;
}
#modal-celebrate.open .fx-card { transform: none; }
#modal-celebrate .fx-emoji { margin: 0 0 6px; font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
#modal-celebrate .fx-title {
  font-family: var(--font-hud); font-size: 34px; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff7cf 0%, #ffe38a 40%, #f0b62e 78%, #d99212 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a3a10);
}
#modal-celebrate .fx-text { margin: 8px 0 16px; font-weight: 800; font-size: 15px; line-height: 1.35; color: #5a3a1f; }
#modal-celebrate .fx-card .btn { min-width: 160px; width: auto; }
#modal-celebrate.grand .fx-card { box-shadow: inset 0 0 0 5px #c9b4f5, inset 0 0 0 8px #fff6dc, 0 10px 0 #6d3fd6, 0 18px 32px rgba(20,10,40,.45); }
#modal-celebrate .fx-burst-icon {
  position: absolute; font-size: 42px; line-height: 1; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
#modal-celebrate .fx-burst-icon.b1 { left: calc(50% - 230px); top: calc(50% - 150px); transform: rotate(-18deg); }
#modal-celebrate .fx-burst-icon.b2 { left: calc(50% + 198px); top: calc(50% - 148px); transform: rotate(16deg); }
#modal-celebrate .fx-burst-icon.b3 { left: calc(50% - 236px); top: calc(50% + 40px); font-size: 24px; }
#modal-celebrate .fx-burst-icon.b4 { left: calc(50% + 204px); top: calc(50% + 36px); }
#modal-celebrate .fx-burst-icon.b5 { left: calc(50% - 80px); top: calc(50% - 168px); font-size: 22px; }
#modal-celebrate .fx-burst-icon.b6 { left: calc(50% + 70px); top: calc(50% + 118px); font-size: 22px; }
#modal-celebrate .fx-spark {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; z-index: 3;
  box-shadow: 0 0 16px 6px currentColor;
}
#modal-celebrate.mood-clap .fx-burst-icon,
#modal-celebrate.mood-try .fx-burst-icon,
#modal-celebrate.mood-clap .fx-canvas,
#modal-celebrate.mood-try .fx-canvas,
#modal-celebrate.mood-clap .fx-emoji,
#modal-celebrate.mood-try .fx-emoji { display: none; }
#modal-celebrate .fx-anim { display: none; align-items: center; justify-content: center; gap: 4px; position: relative; height: 92px; margin: 2px 0 4px; }
#modal-celebrate.mood-clap .clap-scene,
#modal-celebrate.mood-try .try-scene { display: flex; }
#modal-celebrate .palm { font-size: 68px; line-height: 1; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
#modal-celebrate .palm.l { animation: clap-l .42s ease-in-out infinite; transform-origin: 70% 80%; }
#modal-celebrate .palm.r { animation: clap-r .42s ease-in-out infinite; transform-origin: 30% 80%; }
@keyframes clap-l {
  0%, 100% { transform: rotate(28deg) translate(-18px, 10px); }
  50% { transform: rotate(-8deg) translate(14px, 0); }
}
@keyframes clap-r {
  0%, 100% { transform: scaleX(-1) rotate(28deg) translate(-18px, 10px); }
  50% { transform: scaleX(-1) rotate(-8deg) translate(14px, 0); }
}
#modal-celebrate .clap-impact {
  position: absolute; left: 50%; top: 28%; font-size: 34px; margin-left: -17px;
  animation: clap-impact .42s ease-out infinite; pointer-events: none;
}
@keyframes clap-impact {
  0%, 42% { opacity: 0; transform: scale(.3); }
  50% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.9); }
}
#modal-celebrate .try-badge {
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-hud); font-size: 42px; color: #fff;
  background: linear-gradient(180deg, #ff8a80, #e6453a 55%, #c4261c 100%);
  border: 4px solid #fff3d6; box-shadow: 0 5px 0 #7a1810, 0 8px 14px rgba(0,0,0,.28);
  animation: try-spin 1.15s linear infinite;
}
@keyframes try-spin { to { transform: rotate(-360deg); } }
#modal-celebrate.mood-try.open .fx-card { animation: try-wobble .55s ease; }
@keyframes try-wobble {
  0%, 100% { transform: none; }
  20% { transform: translateX(-9px) rotate(-2deg); }
  40% { transform: translateX(9px) rotate(2deg); }
  60% { transform: translateX(-5px) rotate(-1deg); }
  80% { transform: translateX(5px); }
}
#modal-celebrate.mood-try .fx-title {
  background: linear-gradient(180deg, #ffe0d6 0%, #ff9a8a 42%, #e6453a 78%, #c4261c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #7a1810);
}
#modal-celebrate.mood-clap .fx-title {
  background: linear-gradient(180deg, #fff7cf 0%, #ffe38a 40%, #f0b62e 78%, #d99212 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  #modal-celebrate .palm, #modal-celebrate .clap-impact, #modal-celebrate .try-badge,
  #modal-celebrate.mood-try.open .fx-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) { #modal-celebrate .fx-canvas, #modal-celebrate .fx-spark { display: none; } }

/* ---------- Adaptive extra-time notice (shown between questions) ---------- */
.adapt-notice {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 40, .58);
  pointer-events: none;
}
.adapt-notice[hidden] { display: none !important; }
.adapt-card {
  width: min(78%, 58cqw); text-align: center;
  padding: 4.2cqh 4cqw 3.6cqh; border-radius: 3.2cqh;
  background: linear-gradient(180deg, #fffdf3 0%, #e6f8c8 48%, #b8e86a 100%);
  border: .55cqh solid #ffe38a;
  box-shadow: inset 0 0 0 .35cqh #fff6dc, 0 1cqh 0 #2f7a28, 0 2cqh 3.4cqh rgba(0,0,0,.4);
  animation: adapt-pop .42s cubic-bezier(.2, 1.4, .4, 1);
}
.adapt-kicker {
  margin: 0 0 .6cqh; font-family: var(--font-display); font-weight: 800;
  font-size: 2.4cqh; letter-spacing: .18cqh; text-transform: uppercase; color: #2f6b24;
}
.adapt-secs {
  margin: 0; font-family: var(--font-hud); font-size: 11cqh; line-height: .9;
  letter-spacing: .06em; color: #1a7a28;
  text-shadow: 0 .35cqh 0 #fff6dc, 0 .7cqh 0 #2f7a28;
  animation: adapt-pulse .9s ease-in-out infinite;
}
.adapt-msg {
  margin: 1.4cqh 0 0; font-weight: 800; font-size: 2.8cqh; line-height: 1.2; color: #3d2a18;
}
@keyframes adapt-pop {
  0% { transform: scale(.72) translateY(2cqh); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes adapt-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .adapt-card, .adapt-secs, .hud-scene .timer.boost { animation: none; }
}

#inapp-browser-warning { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 10px; background: #fff3cd; color: #664d03; border-bottom: 2px solid #ffda6a; padding: 10px 14px; font-size: 13px; line-height: 1.4; font-family: system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#inapp-browser-warning span { flex: 1; }
#inapp-browser-warning button { flex: none; background: none; border: 0; color: #664d03; font-size: 16px; font-weight: 900; cursor: pointer; padding: 4px 8px; }

/* SignBuddy is a landscape (16:9) game: on a phone/tablet held upright, the scene-box shrinks to a thin strip.
   Rotate the whole page 90deg so it fills the screen like landscape, without needing the unreliable
   Fullscreen+Screen-Orientation-lock APIs (iOS Safari supports neither outside an installed PWA). Scoped to
   touch devices only (hover:none + pointer:coarse) so a narrow desktop/laptop window is never affected. */
@media screen and (orientation: portrait) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html { overflow: hidden; }
  body {
    position: absolute; top: 0; left: 100%;
    width: 100vh; height: 100vw;
    transform-origin: 0 0;
    transform: rotate(90deg);
  }
  /* vw/vh units ignore ancestor transforms, so every scene-box sizing rule needs its vw/vh swapped
     to match the rotated frame (the visual width is now the real 100vh, and vice versa). */
  .scene-box, .scene-modal .scene-box { width: min(100vh, calc(100vw * 16 / 9)); }
  .howto-modal .scene-box { width: min(100vh, calc(100vw * 1374 / 1145)); }
}