/* Side A UI. Semantic tokens + shared primitives, following DESIGN-LANGUAGE.md (qui style). */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --background:#0a0a0a; --foreground:#fafafa;
  --card:#171717; --card-foreground:#fafafa;
  --popover:#171717; --popover-foreground:#fafafa;
  --primary:#e5e5e5; --primary-foreground:#171717;
  --secondary:#262626; --secondary-foreground:#fafafa;
  --muted:#262626; --muted-foreground:#a1a1a1;
  --accent:#262626; --accent-foreground:#fafafa;
  --destructive:#ff6467; --destructive-foreground:#fafafa;
  --border:#282828; --input:#333333; --ring:#737373;
  --surface-2:#1f1f1f;
  --sidebar:#171717; --sidebar-border:#282828;
  --success:#00c950; --warning:#f0b100; --info:#51a2ff;
  --shadow:0 4px 16px rgb(0 0 0 / .35);
  --radius:8px; --radius-sm:6px; --radius-lg:10px;
  --sidebar-width:220px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--foreground); background:var(--background); font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme:light;
    --background:#fafafa; --foreground:#0a0a0a;
    --card:#ffffff; --card-foreground:#0a0a0a;
    --popover:#ffffff; --popover-foreground:#0a0a0a;
    --primary:#171717; --primary-foreground:#fafafa;
    --secondary:#f0f0f0; --secondary-foreground:#171717;
    --muted:#f0f0f0; --muted-foreground:#6b6b6b;
    --accent:#f0f0f0; --accent-foreground:#171717;
    --destructive:#d4000a; --destructive-foreground:#fafafa;
    --border:#e5e5e5; --input:#d9d9d9; --ring:#a1a1a1;
    --surface-2:#f7f7f7;
    --sidebar:#f4f4f4; --sidebar-border:#e5e5e5;
    --success:#008236; --warning:#a65f00; --info:#155dfc;
    --shadow:0 4px 16px rgb(0 0 0 / .08);
  }
}
:root[data-theme="light"] {
  color-scheme:light;
  --background:#fafafa; --foreground:#0a0a0a;
  --card:#ffffff; --card-foreground:#0a0a0a;
  --popover:#ffffff; --popover-foreground:#0a0a0a;
  --primary:#171717; --primary-foreground:#fafafa;
  --secondary:#f0f0f0; --secondary-foreground:#171717;
  --muted:#f0f0f0; --muted-foreground:#6b6b6b;
  --accent:#f0f0f0; --accent-foreground:#171717;
  --destructive:#d4000a; --destructive-foreground:#fafafa;
  --border:#e5e5e5; --input:#d9d9d9; --ring:#a1a1a1;
  --surface-2:#f7f7f7;
  --sidebar:#f4f4f4; --sidebar-border:#e5e5e5;
  --success:#008236; --warning:#a65f00; --info:#155dfc;
  --shadow:0 4px 16px rgb(0 0 0 / .08);
}

/* ---------- Base ---------- */
* { box-sizing:border-box; }
html,body { background:var(--background); }
body { margin:0; font-size:14px; line-height:1.45; }
button,input,textarea,select { font:inherit; color:inherit; }
button,a,input,audio,select { touch-action:manipulation; }
a { color:inherit; text-decoration:none; }
svg { flex-shrink:0; }
h1 { margin:0; font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.01em; }
h2 { margin:0; font-size:16px; line-height:1.3; font-weight:600; }
h3 { margin:0; font-size:14px; line-height:1.35; font-weight:600; }
p { margin:0; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; padding:1px 5px; border-radius:4px; background:var(--muted); overflow-wrap:anywhere; }
small,.muted { color:var(--muted-foreground); font-size:12px; }
.num { font-variant-numeric:tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:none; }
.icon { width:16px; height:16px; }
.icon-sm { width:14px; height:14px; }

/* ---------- Button ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0;
  height:34px; padding:0 12px; border:1px solid transparent; border-radius:var(--radius-sm);
  background:transparent; color:var(--foreground); font-size:13px; font-weight:500; line-height:1; white-space:nowrap;
  cursor:pointer; transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;
}
.btn svg { width:16px; height:16px; }
.btn:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent); border-color:var(--ring); }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.45; cursor:default; pointer-events:none; }
.btn-primary { background:var(--primary); color:var(--primary-foreground); }
.btn-primary:hover { background:color-mix(in srgb,var(--primary) 88%,transparent); }
.btn-secondary { background:var(--secondary); color:var(--secondary-foreground); }
.btn-secondary:hover { background:color-mix(in srgb,var(--secondary) 80%,var(--foreground) 6%); }
.btn-outline { border-color:var(--border); background:var(--background); }
.btn-outline:hover { background:var(--accent); color:var(--accent-foreground); }
.btn-ghost:hover { background:var(--accent); color:var(--accent-foreground); }
.btn-destructive { background:var(--destructive); color:var(--destructive-foreground); }
.btn-destructive:hover { background:color-mix(in srgb,var(--destructive) 88%,transparent); }
.btn-ghost-destructive { color:var(--destructive); }
.btn-ghost-destructive:hover { background:color-mix(in srgb,var(--destructive) 12%,transparent); }
.btn-sm { height:28px; padding:0 10px; font-size:12px; gap:5px; }
.btn-sm svg { width:14px; height:14px; }
.btn-icon { width:34px; padding:0; }
.btn-icon.btn-sm { width:28px; }
.btn-block { width:100%; }
.btn-group { display:inline-flex; gap:6px; }
.spinner { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Badge ---------- */
.badge {
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border:1px solid transparent; border-radius:5px;
  background:var(--secondary); color:var(--secondary-foreground); font-size:11.5px; font-weight:500; line-height:1; white-space:nowrap;
}
.badge svg { width:12px; height:12px; }
.badge-outline { background:transparent; border-color:var(--border); color:var(--muted-foreground); }
.badge-success { background:color-mix(in srgb,var(--success) 14%,transparent); color:var(--success); }
.badge-warning { background:color-mix(in srgb,var(--warning) 14%,transparent); color:var(--warning); }
.badge-destructive { background:color-mix(in srgb,var(--destructive) 14%,transparent); color:var(--destructive); }
.badge-info { background:color-mix(in srgb,var(--info) 14%,transparent); color:var(--info); }
.badges { display:flex; flex-wrap:wrap; gap:4px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--muted-foreground); flex-shrink:0; }
.status-dot.on { background:var(--success); }

/* ---------- Form controls ---------- */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.label { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:500; color:var(--foreground); }
.input {
  width:100%; min-width:0; height:34px; padding:0 10px; border:1px solid var(--input); border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--input) 30%,transparent); color:var(--foreground); font-size:13px;
  transition:border-color .12s,box-shadow .12s;
}
:root[data-theme="light"] .input { background:var(--card); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .input { background:var(--card); } }
textarea.input { height:auto; min-height:68px; padding:8px 10px; resize:vertical; line-height:1.45; }
.input::placeholder { color:var(--muted-foreground); }
.input:focus-visible { border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 40%,transparent); }
.input:disabled { opacity:.55; cursor:not-allowed; }
.input[aria-invalid="true"] { border-color:var(--destructive); }
.input[type=file] { height:auto; padding:4px; font-size:12px; color:var(--muted-foreground); background:transparent; border-style:dashed; }
.input[type=file]::file-selector-button { height:26px; margin-right:10px; padding:0 10px; border:1px solid var(--border); border-radius:5px; background:var(--secondary); color:var(--foreground); font:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.input-group { position:relative; flex:1; min-width:0; }
.input-group>.input-icon { position:absolute; left:10px; top:50%; translate:0 -50%; width:15px; height:15px; color:var(--muted-foreground); pointer-events:none; }
.input-group>.input { padding-left:32px; }
.copy-field { display:flex; gap:8px; }
.copy-field>.input { flex:1; min-width:0; font-size:12px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 14px; }
.form-grid .full { grid-column:1/-1; }
@media (min-width:1100px) { .form-grid.wide { grid-template-columns:repeat(4,minmax(0,1fr)); } .form-grid.wide .half { grid-column:span 2; } }
.form-error,.error { color:var(--destructive); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.form-error:empty { display:none; }
.success-text { color:var(--success); }

/* Tooltip (supplemental info only) */
.tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted-foreground); cursor:help; }
.tip svg { width:13px; height:13px; }
.tip:hover,.tip:focus-visible { color:var(--foreground); }
.tip:focus-visible { box-shadow:0 0 0 2px var(--ring); }
.tip::after {
  content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 6px); translate:-50% 2px; z-index:30;
  width:max-content; max-width:240px; padding:6px 8px; border-radius:6px; background:var(--primary); color:var(--primary-foreground);
  font-size:12px; font-weight:400; line-height:1.4; text-align:left; white-space:normal; pointer-events:none;
  display:none; animation:tip-in .12s ease-out;
}
.tip:hover::after,.tip:focus-visible::after { display:block; translate:-50% 0; }
@keyframes tip-in { from { opacity:0; translate:-50% 2px; } }

/* Progress */
.progress { display:block; width:100%; height:6px; border:0; border-radius:999px; background:var(--muted); overflow:hidden; appearance:none; }
.progress::-webkit-progress-bar { background:var(--muted); border-radius:999px; }
.progress::-webkit-progress-value { background:var(--primary); border-radius:999px; }
.progress::-moz-progress-bar { background:var(--primary); border-radius:999px; }

/* ---------- App shell ---------- */
.shell { display:flex; min-height:100vh; min-height:100dvh; }
.sidebar {
  position:sticky; top:0; display:flex; flex-direction:column; width:var(--sidebar-width); height:100vh; height:100dvh; flex-shrink:0;
  padding:12px 8px; border-right:1px solid var(--sidebar-border); background:var(--sidebar); overflow-y:auto;
}
.brand { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 8px; font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.brand-mark { display:inline-flex; }
.brand-mark svg { width:20px; height:20px; }
.sidebar .brand { margin-bottom:12px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-footer { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:8px; }
.nav-item {
  display:flex; align-items:center; gap:10px; width:100%; height:34px; padding:0 10px; border:0; border-radius:var(--radius-sm);
  background:transparent; color:var(--foreground); font-size:13.5px; font-weight:500; text-align:left; cursor:pointer;
}
.nav-item svg { width:16px; height:16px; }
.nav-item:hover { background:var(--accent); }
.nav-item.active { background:var(--primary); color:var(--primary-foreground); }
.nav-item:focus-visible { box-shadow:0 0 0 2px var(--ring); }
.nav-item .nav-meta { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted-foreground); font-size:12px; font-weight:400; }
.nav-separator { height:1px; margin:10px 4px; background:var(--sidebar-border); }
.nav-label { padding:4px 10px 6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-foreground); }
.nav-user { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; font-size:13.5px; font-weight:500; min-width:0; }
.nav-user span:not(.status-dot) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-user svg { width:16px; height:16px; }
.nav-user .status-dot { margin-left:auto; }

.content { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; height:52px; padding:0 16px;
  border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--background) 92%,transparent); backdrop-filter:blur(6px);
}
.topbar-spacer { flex:1; }
.topbar-actions { display:flex; align-items:center; gap:6px; }
.topbar-brand { display:none; }
main { width:100%; max-width:1180px; padding:20px 24px 40px; }
.sidebar-backdrop { display:none; }

.shell.collapsed .sidebar { display:none; }
body.auth .sidebar,body.auth #menu-button,body.auth .sidebar-backdrop { display:none; }
body.auth .topbar-brand { display:inline-flex; }
body.auth main { max-width:none; }

/* ---------- Page header ---------- */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin-bottom:16px; }
.page-header>div:first-child { min-width:0; }
.page-description { margin-top:3px; color:var(--muted-foreground); font-size:13px; }
.page-header .page-description { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Game header: date left, status right, one line */
.game-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; min-height:34px; }
.game-title { display:flex; align-items:center; gap:6px; min-width:0; }
.game-title h1 { white-space:nowrap; }
.game-title .btn { margin-left:-6px; }
.game-status { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- Card ---------- */
.card { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card); color:var(--card-foreground); }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; padding:10px 16px; }
.card-header.bordered { border-bottom:1px solid var(--border); }
.card-title { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; font-weight:600; }
.card-title svg { width:16px; height:16px; color:var(--muted-foreground); }
.card-description { color:var(--muted-foreground); font-size:12px; }
.card-header-meta { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:12px; white-space:nowrap; }
.card-body { padding:14px 16px; }
.card-header+.card-body { padding-top:4px; }
.card-header.bordered+.card-body { padding-top:14px; }
.card-footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--border); }
.card-footer .footer-status { margin-right:auto; color:var(--muted-foreground); font-size:12px; min-width:0; }
.card-clip { overflow:hidden; }
.stack { display:flex; flex-direction:column; gap:16px; }
.stack>* { min-width:0; }
.section-title { display:flex; align-items:center; gap:6px; margin:18px 0 10px; font-size:13px; font-weight:600; }
.section-title:first-child { margin-top:0; }
.separator { height:1px; background:var(--border); border:0; margin:14px 0; }

/* ---------- Table ---------- */
.table-wrap { position:relative; width:100%; overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { height:36px; padding:0 12px; background:var(--surface-2); color:var(--foreground); font-weight:500; text-align:left; white-space:nowrap; border-bottom:1px solid var(--border); }
.table td { height:42px; padding:6px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background:color-mix(in srgb,var(--accent) 45%,transparent); }
.table .right { text-align:right; }
.table .shrink { width:1%; white-space:nowrap; }
.table .cell-sub { display:block; margin-top:1px; color:var(--muted-foreground); font-size:12px; }
.table tr.is-you td { font-weight:600; }
.table tr.inactive td { color:var(--muted-foreground); }
.hide-desktop,.table .cell-sub.hide-desktop { display:none; }
.archive-row { cursor:pointer; }
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; }

/* Empty state */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 16px; text-align:center; color:var(--muted-foreground); font-size:13px; }
.empty-state strong { color:var(--foreground); font-weight:500; }

/* ---------- Game ---------- */
.game-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.game-main,.game-side { display:flex; flex-direction:column; gap:16px; min-width:0; }

.clue-table { display:flex; flex-direction:column; }
.clue-head,.clue-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; padding:0 14px; }
.clue-head { height:34px; background:var(--surface-2); border-bottom:1px solid var(--border); font-size:12.5px; font-weight:500; }
.clue-head span:last-child { text-align:right; }
.clue-row {
  width:100%; min-height:44px; padding-top:6px; padding-bottom:6px; border:0; border-bottom:1px solid var(--border); border-radius:0;
  background:transparent; color:var(--foreground); text-align:left; cursor:pointer; position:relative;
}
.clue-row:last-child { border-bottom:0; }
.clue-row:hover:not(:disabled) { background:color-mix(in srgb,var(--accent) 50%,transparent); }
.clue-row:focus-visible { box-shadow:inset 0 0 0 2px var(--ring); }
.clue-row.selected { background:var(--accent); }
.clue-row.selected::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--primary); }
.clue-row:disabled { cursor:default; color:var(--muted-foreground); }
.clue-num { color:var(--muted-foreground); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.clue-row.selected .clue-num,.clue-row.current .clue-num { color:var(--foreground); }
.clue-main { min-width:0; }
.clue-label { display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clue-guess { display:block; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted-foreground); }
.clue-status { display:flex; justify-content:flex-end; }
/* Guess result colouring */
.clue-row.r-correct,.clue-row.r-artist,.clue-row.r-wrong { --tone:var(--muted-foreground); background:color-mix(in srgb,var(--tone) 9%,transparent); }
.clue-row.r-correct { --tone:var(--success); } .clue-row.r-artist { --tone:var(--warning); } .clue-row.r-wrong { --tone:var(--destructive); }
.clue-row.r-correct:hover:not(:disabled),.clue-row.r-artist:hover:not(:disabled),.clue-row.r-wrong:hover:not(:disabled) { background:color-mix(in srgb,var(--tone) 14%,transparent); }
.clue-row.r-correct::before,.clue-row.r-artist::before,.clue-row.r-wrong::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tone); }
.clue-row.r-correct .clue-num,.clue-row.r-artist .clue-num,.clue-row.r-wrong .clue-num,
.clue-row.r-correct .clue-guess,.clue-row.r-artist .clue-guess,.clue-row.r-wrong .clue-guess { color:var(--tone); }
.clue-row.r-correct.selected,.clue-row.r-artist.selected,.clue-row.r-wrong.selected { background:color-mix(in srgb,var(--tone) 18%,transparent); }
.clue-row.r-skipped .clue-label,.clue-row.r-skipped .clue-num { color:var(--muted-foreground); }
.clue-row.r-skipped.selected .clue-label { color:var(--foreground); }
.locked-label { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted-foreground); }
.locked-label svg { width:12px; height:12px; }

.player-body { display:flex; flex-direction:column; gap:12px; }
audio { display:block; width:100%; height:40px; border-radius:var(--radius-sm); }
.clue-extras { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hint-box { display:flex; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); }
.hint-box>svg { width:16px; height:16px; margin-top:2px; color:var(--warning); }
.hint-box .hint-label { display:block; font-size:12px; color:var(--muted-foreground); }
.hint-box p { font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.guess-section { padding-top:14px; border-top:1px solid var(--border); }
.guess-form { display:flex; flex-direction:column; gap:6px; }
.guess-controls { display:flex; gap:8px; }
.guess-status { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guess-status:has(small:empty) { display:none; }
.song-search { position:relative; flex:1; min-width:0; }
.song-options {
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:15; max-height:min(320px,50vh); overflow-y:auto; overscroll-behavior:contain;
  padding:4px; border:1px solid var(--border); border-radius:var(--radius); background:var(--popover); box-shadow:var(--shadow);
}
.song-options[hidden] { display:none; }
.song-option { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; min-height:40px; padding:6px 8px; border:0; border-radius:5px; background:transparent; color:var(--popover-foreground); text-align:left; cursor:pointer; }
.song-option[aria-selected=true],.song-option:hover { background:var(--accent); }
.song-option strong { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.song-option span { font-size:12px; color:var(--muted-foreground); overflow-wrap:anywhere; }

.result-answer { font-size:18px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.result-artist { margin-top:2px; color:var(--muted-foreground); font-size:13px; }
.result-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.details-list { display:flex; flex-direction:column; margin:0; }
.detail { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; }
.detail dt { display:flex; align-items:center; gap:8px; color:var(--muted-foreground); font-size:13px; }
.detail dt svg { width:14px; height:14px; }
.detail dd { margin:0; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.detail dd small { font-weight:400; }
.detail.genres { align-items:flex-start; padding-top:6px; }
.detail.genres dd .badges { justify-content:flex-end; }

.label-short { display:none; }
.group-summary { display:flex; flex-direction:column; gap:10px; }
.group-line { display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:13px; }
.group-line strong { font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.sample-label { margin-top:12px; font-size:11px; color:var(--muted-foreground); }

/* Stats dialog */
.stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:18px; text-align:center; }
.stat-row strong { display:block; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
.stat-row small { font-size:12px; }
.distribution { display:grid; grid-template-columns:16px minmax(0,1fr) 28px; align-items:center; gap:10px; margin:7px 0; font-size:12.5px; font-variant-numeric:tabular-nums; }
.distribution span:last-child { text-align:right; color:var(--muted-foreground); }
.distribution .progress { height:8px; }
.distribution.is-you span:first-child,.distribution.is-you span:last-child { color:var(--foreground); font-weight:600; }
.distribution.is-you .progress::-webkit-progress-value { background:var(--success); }
.distribution.is-you .progress::-moz-progress-bar { background:var(--success); }
.crowd-note { margin:-4px 0 4px; }
.vbars { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; align-items:end; margin-top:12px; }
.vbar { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; font-variant-numeric:tabular-nums; }
.vbar-value { color:var(--muted-foreground); font-size:11.5px; }
.vbar-track { display:flex; align-items:flex-end; width:100%; max-width:36px; height:120px; border-radius:var(--radius-sm); background:var(--muted); overflow:hidden; }
.vbar-fill { width:100%; border-radius:var(--radius-sm); background:var(--primary); }
.vbar-label { font-size:12.5px; }
.vbar.is-you .vbar-fill { background:var(--success); }
.vbar.is-you .vbar-value,.vbar.is-you .vbar-label { color:var(--foreground); font-weight:600; }
.crowd-clues { display:grid; gap:16px; }
.crowd-clue h4 { display:flex; align-items:baseline; gap:8px; margin:0 0 8px; font-size:12.5px; font-weight:500; }
.crowd-clue h4 small { margin-left:auto; }
.crowd-clue ol { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.top-guess { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:36px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); font-size:13px; }
.top-guess .guess-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; margin-bottom:16px; padding:3px; border-radius:var(--radius); background:var(--muted); }
.segmented button { height:30px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.segmented button[aria-selected="true"] { background:var(--background); color:var(--foreground); box-shadow:0 1px 2px rgb(0 0 0 / .12); }
.segmented button:focus-visible { outline:2px solid var(--ring, var(--primary)); outline-offset:1px; }
.group-guess { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; border-left-width:3px; }
.group-guess .player-chips { justify-content:flex-end; }
.group-guess.is-correct { border-left-color:var(--success); }
.group-guess.is-artist { border-left-color:var(--warning); }
.group-guess.is-wrong { border-left-color:var(--destructive); }
.group-guess.is-skip .guess-name { color:var(--muted-foreground); font-style:italic; }
.player-chips { display:flex; flex-wrap:wrap; gap:4px; }
.player-chip { display:inline-flex; align-items:center; height:20px; padding:0 8px; border:1px solid var(--border); border-radius:999px; background:var(--background); color:var(--muted-foreground); font-size:11.5px; font-weight:500; }
.player-chip.is-you { border-color:var(--foreground); color:var(--foreground); }
.top-guess .num { color:var(--muted-foreground); font-size:12px; font-variant-numeric:tabular-nums; }

/* Photo dialog */
.photo-preview { display:block; width:100%; max-height:55svh; object-fit:contain; border-radius:var(--radius-sm); background:var(--muted); }

/* ---------- Login ---------- */
.auth-wrap { display:flex; justify-content:center; padding:48px 0 24px; }
.auth-card { width:100%; max-width:380px; }
.auth-card .card-header { flex-direction:column; align-items:flex-start; gap:4px; padding:18px 20px 6px; }
.auth-card .card-title { font-size:18px; }
.auth-card .card-body { display:flex; flex-direction:column; gap:14px; padding:12px 20px 20px; }

/* ---------- Admin ---------- */
.upload-table td { height:46px; }
.upload-table .input[type=text] { min-width:120px; }
.upload-table .input[type=file] { min-width:200px; }
.webhook-state { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.note-list { margin:10px 0 0; padding-left:18px; color:var(--muted-foreground); font-size:12.5px; line-height:1.6; }

/* ---------- Dialog ---------- */
dialog {
  width:calc(100% - 32px); max-width:460px; max-height:85svh; padding:0; overflow:auto;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow);
}
dialog[open] { animation:dialog-in .15s ease-out; }
dialog.wide { max-width:560px; }
dialog::backdrop { background:rgb(0 0 0 / .6); }
@keyframes dialog-in { from { opacity:0; transform:translateY(4px) scale(.98); } }
.dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 0; }
.dialog-heading { min-width:0; }
.dialog-heading h2 { font-size:16px; padding-top:4px; overflow-wrap:anywhere; }
.dialog-description { margin-top:4px; color:var(--muted-foreground); font-size:13px; }
.dialog-body { padding:14px 18px 18px; }
.dialog-body .form-grid { gap:12px; }
.dialog-body>*+p { margin-top:10px; }
.dialog-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
.dialog-footer[hidden] { display:none; }

/* Guess sheet (phones): top-anchored so the keyboard sits below it */
.guess-launch { display:flex; gap:8px; }
.guess-trigger {
  display:flex; align-items:center; gap:8px; flex:1; min-width:0; height:40px; padding:0 12px;
  border:1px solid var(--input,var(--border)); border-radius:var(--radius-sm); background:var(--card); color:var(--muted-foreground);
  font:inherit; font-size:15px; text-align:left; cursor:pointer;
}
.guess-trigger svg { width:16px; height:16px; flex:none; }
.guess-trigger span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guess-trigger:focus-visible { outline:none; border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent); }
.guess-launch .btn { height:40px; flex:none; }
dialog.guess-sheet {
  position:fixed; inset:var(--sheet-top,0px) 0 auto 0; width:100%; max-width:none; height:auto; max-height:var(--sheet-height,100dvh); margin:0;
  border:0; border-bottom:1px solid var(--border); border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--background); box-shadow:var(--shadow); overflow:hidden;
}
dialog.guess-sheet[open] { display:flex; flex-direction:column; animation:sheet-in .16s ease-out; }
@keyframes sheet-in { from { opacity:0; transform:translateY(-8px); } }
.guess-sheet .guess-form { flex:1 1 auto; min-height:0; gap:0; padding-bottom:6px; }
.guess-sheet .guess-status small { color:var(--muted-foreground); }
.sheet-header { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.sheet-heading { flex:1; min-width:0; display:flex; flex-direction:column; }
.sheet-heading h2 { font-size:15px; line-height:1.2; }
.sheet-heading .muted { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-search { display:flex; gap:8px; padding:12px 12px 6px; }
.sheet-search .input { height:42px; font-size:16px; }
.sheet-search .btn { height:42px; flex:none; padding:0 16px; }
.guess-sheet .guess-status,.guess-sheet .form-error { padding:0 12px; }
.guess-sheet .form-error:empty { display:none; }
.guess-sheet .guess-status { min-height:20px; }
.guess-sheet .song-options {
  position:static; flex:1 1 auto; min-height:0; max-height:none; margin:4px 0 0; padding:0 4px 12px; border:0; border-top:1px solid var(--border);
  border-radius:0; background:var(--background); box-shadow:none;
}
.guess-sheet .song-option { min-height:52px; padding:8px 10px; border-bottom:1px solid var(--border); border-radius:0; }
.guess-sheet .song-option:last-child { border-bottom:0; }
.guess-sheet .song-option strong { font-size:15px; }
.guess-sheet .song-option span { font-size:13px; }

/* ---------- Toast ---------- */
.toast {
  position:fixed; right:20px; bottom:20px; z-index:50; display:flex; align-items:center; gap:8px; width:max-content; max-width:min(380px,calc(100% - 32px));
  padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--popover); color:var(--popover-foreground);
  box-shadow:var(--shadow); font-size:13px; animation:toast-in .16s ease-out;
}
.toast[hidden] { display:none; }
@keyframes toast-in { from { opacity:0; transform:translateY(6px); } }

/* ---------- Responsive ---------- */
@media (max-width:1023px) {
  .game-grid { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .game-main,.game-side { display:contents; }
  .area-details { order:1; } .area-result { order:2; } .sample-label { order:9; margin-top:0; } .area-clues { order:3; } .area-player { order:4; } .area-group { order:5; }
  /* Compact, evenly spaced song-details strip */
  .area-details .card-header { display:none; }
  .area-details .card-body { padding:8px 6px; }
  .details-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); row-gap:6px; }
  .detail { flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:0; text-align:center; }
  .detail+.detail:not(.genres) { border-left:1px solid var(--border); }
  .detail dt { font-size:11px; line-height:1.2; }
  .detail dt svg,.label-long { display:none; }
  .label-short { display:inline; }
  .detail dd { font-size:14px; line-height:1.25; text-align:center; }
  .detail.genres { grid-column:1/-1; flex-direction:row; justify-content:center; gap:8px; padding-top:6px; border-top:1px solid var(--border); }
  .detail.genres dt .label-short { display:none; }
  .detail.genres dt .label-long { display:inline; }
  .detail.genres dd .badges { justify-content:center; }
}
@media (max-width:899px) {
  .sidebar {
    position:fixed; left:0; top:0; z-index:40; width:260px; transform:translateX(-100%); transition:transform .18s ease-out;
    box-shadow:var(--shadow);
  }
  .shell.collapsed .sidebar { display:flex; }
  .shell.drawer-open .sidebar { transform:none; }
  .shell.drawer-open .sidebar-backdrop { display:block; position:fixed; inset:0; z-index:35; background:rgb(0 0 0 / .5); }
  .topbar-brand { display:inline-flex; }
  .topbar { padding:0 12px; }
  main { padding:16px 16px 32px; }
}
@media (max-width:639px) {
  .input { font-size:16px; height:38px; }
  textarea.input { font-size:16px; }
  .btn { height:36px; }
  .btn-icon { width:36px; }
  .btn-sm { height:30px; }
  .btn-icon.btn-sm { width:30px; }
  .guess-controls { flex-wrap:wrap; }
  .guess-controls .song-search { flex-basis:100%; }
  .guess-controls .btn { height:38px; flex:1; }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  h1 { font-size:20px; }
  .page-header { margin-bottom:12px; }
  .game-header { margin-bottom:10px; }
  .game-status { font-size:12.5px; gap:6px; }
  .card-header,.card-body,.card-footer { padding-left:12px; padding-right:12px; }
  .clue-head,.clue-row { padding-left:12px; padding-right:12px; grid-template-columns:24px minmax(0,1fr) auto; }
  .table th,.table td { padding-left:10px; padding-right:10px; }
  .hide-sm { display:none; }
  .table .cell-sub.hide-desktop { display:block; }
  .toast { left:16px; right:16px; width:auto; max-width:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}