body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 75% -20%, #302040, transparent 42rem), var(--body);
}
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(2.05rem,4.5vw,4rem); line-height: 1.03; letter-spacing: -.065em; font-weight: 780; }
h2 { font-size: clamp(1.25rem,2vw,1.7rem); letter-spacing: -.038em; }
h3 { font-size: 1.05rem; letter-spacing: -.02em; }
a { color: var(--violet); text-underline-offset: .2em; }
a:hover { color: var(--gold-light); }
:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, .button {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .48rem;
  border: 1px solid var(--line); border-radius: 9px; padding: .65rem .96rem; background: var(--raised);
  color: var(--text); text-decoration: none; font-weight: 690; cursor: pointer; line-height: 1.24; text-align: center;
}
button:hover:not(:disabled), .button:hover { border-color: var(--violet); color: var(--text); }
button:disabled { opacity: .42; cursor: default; }
.primary, .primary:hover:not(:disabled), .button.primary:hover { color: #241421; background: var(--gold); border-color: var(--gold); }
.primary:hover:not(:disabled), .button.primary:hover { background: var(--gold-light); }
.quiet { background: #242032; }
.success { background: #233b35; border-color: #477464; color: var(--green); }
.danger { background: #38232e; border-color: #683d4b; color: var(--red); }
.topbar {
  display: flex; align-items: center; gap: clamp(.6rem,3vw,3rem); padding: .82rem max(1.3rem,calc((100vw - 1420px)/2));
  min-height: 76px; background: #18131f; border-bottom: 1px solid var(--line);
}
.brand { flex: none; display: inline-flex; align-items: center; gap: .58rem; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.15rem; line-height: 1; }
.brand img { width: 38px; height: 38px; }
.brand small { display: block; color: var(--violet); font: 650 .58rem var(--mono); letter-spacing: .15em; margin-top: .28rem; }
.topbar nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 650; padding: .62rem .75rem; border-radius: 8px; }
.topbar nav a[aria-current], .topbar nav a:hover { background: var(--raised); color: var(--text); }
#logout { margin-left: auto; }
#app { width: min(1420px, 100% - 2.6rem); margin: 0 auto; flex: 1; padding: 2.6rem 0 3.2rem; }
#app:focus { outline: none; }
footer { width: min(1420px,100% - 2.6rem); margin: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 1.2rem 0; color: var(--muted); font: .74rem var(--mono); letter-spacing: .09em; }
.foot-index { color: var(--violet); }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }
.eyebrow { color: var(--violet); font: 700 .71rem var(--mono); letter-spacing: .145em; line-height: 1.5; }
.page-head .eyebrow { margin-bottom: .43rem; }
.subhead { margin-top: .65rem; color: var(--muted); max-width: 73ch; line-height: 1.55; }
.panel { background: linear-gradient(145deg,#241c2f,transparent 72%),var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: clamp(1.05rem,2.3vw,1.65rem); min-width: 0; }
.muted, .loading { color: var(--muted); line-height: 1.55; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.section-head a { font-size: .88rem; }
.notice { position: sticky; top: .5rem; z-index: 3; margin: .75rem auto -1rem; width: min(1420px,100% - 2.6rem); padding: .9rem 1rem; border-radius: 9px; border: 1px solid var(--violet-deep); background: #2b2140; white-space: pre-line; max-height: 40vh; overflow: auto; }
.notice[data-kind=error] { border-color: #a65c6c; background: #452632; }
.notice[data-kind=warn], .warning { border-color: #885d43; background: #402a2c; color: var(--gold-light); }
.warning { padding: .8rem 1rem; border: 1px solid #885d43; border-radius: 9px; line-height: 1.55; }
.dashboard-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 1rem; }
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: .85rem; min-height: 296px; background: radial-gradient(ellipse at 80% 0,#493060, transparent 75%),#221930; }
.hero > :not(.hero-pattern) { position: relative; z-index: 1; }
.hero h2 { max-width: 12ch; font-size: clamp(2.1rem,4vw,3.45rem); line-height: 1.02; }
.hero p:not(.eyebrow) { color: var(--muted); max-width: 36ch; }
.hero .button { margin-top: .35rem; }
.hero-pattern { position: absolute; inset: 0; opacity: .46; background: url(effects/orbit.svg) right -1rem center / min(52%,23rem) auto no-repeat,url(effects/grid.svg) right center / 150px; mask-image: linear-gradient(90deg,transparent 15%,black 75%); }
.dashboard-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.metric { display: flex; flex-direction: column; gap: .7rem; }
.metric div { display: flex; align-items: center; gap: .43rem; color: var(--violet); font: 700 .7rem var(--mono); letter-spacing: .08em; }
.metric .icon { font-size: 1.05rem; }
.metric strong { margin-top: auto; font: 750 clamp(1.9rem,4.5vw,3.7rem)/1 var(--mono); letter-spacing: -.12em; color: var(--gold-light); }
.metric p { color: var(--muted); font-size: .87rem; }
.metric a { margin-top: .3rem; font-size: .82rem; }
.dashboard-history { margin-top: 1rem; }
.empty { display: grid; justify-items: center; gap: .85rem; padding: 1.4rem .5rem; text-align: center; color: var(--muted); }
.empty .icon { font-size: 1.8rem; color: var(--violet); }
.records { margin: .75rem 0; }
.record { display: grid; grid-template-columns: minmax(9rem,1fr) minmax(0,2fr) minmax(0,1.15fr) auto; align-items: center; gap: 1rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.record .button { grid-column: -2; }
.record-result { color: var(--muted); font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.record-result b { color: var(--text); }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tags > * { display: inline-flex; gap: .45rem; align-items: center; border-radius: 7px; border: 1px solid var(--line); padding: .35rem .55rem; background: #1b1623; font-size: .84rem; overflow-wrap: anywhere; }
.tags b { color: var(--gold-light); }
.actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.login-layout { min-height: 590px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: stretch; }
.login-graphic { position: relative; isolation: isolate; min-height: 440px; border: 1px solid #694d89; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.4rem,4vw,3.6rem); overflow: hidden; background: url(effects/grid.svg),radial-gradient(ellipse at 68% 40%,#4e306d,#1c1427 68%); }
.login-graphic h1 { font-size: clamp(2.5rem,5.5vw,5.9rem); }
.login-graphic p:not(.eyebrow) { margin-top: 1rem; color: var(--muted); }
.login-orbit { position: absolute; inset: .5rem 0 auto 8%; width: 95%; height: 75%; z-index: -1; opacity: .65; background: url(effects/orbit.svg) center / contain no-repeat; }
.login-orbit .icon { display: none; }
.login-form { display: grid; align-content: center; gap: 1rem; padding: clamp(1.5rem,4vw,3rem); }
.login-form h2 { font-size: clamp(1.6rem,3vw,2.5rem); }
label { display: grid; gap: .42rem; min-width: 0; color: var(--text); font-size: .88rem; font-weight: 660; }
input:not([type=checkbox]),select,textarea {
  display: block; min-width: 0; width: 100%; min-height: 43px; padding: .62rem .72rem; border: 1px solid #534361;
  border-radius: 8px; background: #15111d; color: var(--text);
}
input:disabled, select:disabled { opacity: .5; }
textarea,pre { line-height: 1.52; }
pre, textarea[name=json] { font-family: var(--mono); font-size: .84rem; white-space: pre-wrap; overflow-wrap: anywhere; }
pre { border-radius: 8px; padding: .8rem; background: var(--ink); }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--violet); }
.check { grid-template-columns: auto 1fr; align-items: center; gap: .54rem; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: .8rem; }
legend { color: var(--violet); font-size: .82rem; }
details { border-top: 1px solid var(--line); padding: .76rem 0; }
details > :not(summary) { margin-top: .7rem; }
summary { cursor: pointer; color: var(--text); font-weight: 690; }
.form-section { display: grid; gap: .85rem; align-content: start; }
.form-section > button { justify-self: start; }
.steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; color: var(--muted); font: 650 .7rem var(--mono); letter-spacing: .08em; }
.steps > * { padding: .44rem .67rem; border-radius: 5px; background: #241c30; }
.steps b { color: var(--gold-light); background: #402d38; }
.setup-grid,.control-layout,.editor-grid,.settings-grid,.library-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.full-width { grid-column: 1/-1; }
.players-fields,.check-grid,.answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.check-grid { grid-template-columns: repeat(auto-fit,minmax(min(13rem,100%),1fr)); }
.summary { display: grid; grid-template-columns: minmax(7rem,14rem) 1fr; gap: .6rem 1rem; margin: .3rem 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; overflow-wrap: anywhere; }
.status,.badge { flex: none; font: 700 .72rem var(--mono); letter-spacing: .055em; color: var(--violet); background: #2e233f; border: 1px solid #5a4574; border-radius: 99px; padding: .55rem .8rem; }
.status i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); margin-right: .4rem; }
.control-scores { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(180px,100%),1fr)); gap: .6rem; margin: 0 0 .8rem; }
.control-score { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .25rem .48rem; align-items: center; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.control-score .index { color: var(--violet); font: 700 .65rem var(--mono); }
.player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-score b { font: 750 1.45rem var(--mono); color: var(--gold-light); }
.control-score small { grid-column: 2/-1; color: var(--muted); }
.control-score.selected { background: #3b284c; border-color: var(--violet); }
.control-score.excluded { border-color: #713d4c; }
.control-toolbar { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .5rem; padding: .6rem; margin-bottom: .85rem; }
.control-toolbar button { min-height: 58px; font-size: clamp(.85rem,1.2vw,1.04rem); }
.control-layout { grid-template-columns: minmax(0,1.7fr) minmax(245px,.78fr); margin-bottom: 1rem; }
.control-side { display: grid; align-content: start; gap: .8rem; }
.game-card, .private-card, .timer-card, .buzz-list { display: grid; align-content: start; gap: .8rem; }
.game-card h2 { font-size: clamp(1.6rem,3.1vw,2.7rem); line-height: 1.14; white-space: pre-line; overflow-wrap: anywhere; }
.game-card .actions { margin-top: .35rem; }
.buzz-list { padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.buzz-list button { min-height: 52px; max-width: 100%; }
.buzz-list button span { overflow-wrap: anywhere; }
.private-card { border-color: #6e528e; background: linear-gradient(135deg,#36244a,#22192f); }
.private-card .solution { font-size: 1.42rem; color: var(--gold-light); overflow-wrap: anywhere; }
.private-card p:not(.eyebrow) { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.timer-card #countdown { color: var(--gold-light); font: 750 3rem/1 var(--mono); }
.timer-card #countdown.expired { color: var(--red); }
.question-image { width: 100%; max-height: 22rem; object-fit: contain; background: var(--ink); border-radius: 9px; border: 1px solid var(--line); }
.advanced details:first-child { border-top: 0; }
.advanced .form-section { max-width: 56rem; }
.correction-answer,.inline-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.55fr); gap: .6rem; align-items: end; }
.audit { display: grid; gap: .35rem; color: var(--muted); font: .78rem var(--mono); }
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; border-bottom: 1px solid var(--line); padding: .7rem 0; }
.simple-list li span { min-width: 0; overflow-wrap: anywhere; }
.simple-list li small { display: block; color: var(--muted); margin-top: .3rem; }
.simple-list li .actions { justify-content: end; }
.library-grid { margin-bottom: 1rem; }
.filter-grid { display: grid; align-items: end; gap: .6rem; grid-template-columns: repeat(auto-fit,minmax(8.2rem,1fr)); }
dialog { max-width: min(450px,100% - 2rem); border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 13px; padding: 1.35rem; }
dialog::backdrop { background: #0b0711bb; }
@media (max-width: 1040px) {
  .dashboard-side { grid-template-columns: 1fr; }
  .metric { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem .7rem; }
  .metric strong { grid-column: 2; grid-row: 1/3; align-self: center; margin: 0; }
  .control-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: .7rem 1rem; gap: .5rem; }
  .topbar nav { order: 3; width: 100%; }
  .topbar nav a { padding: .5rem; font-size: .8rem; }
  #app { width: calc(100% - 1.6rem); padding-top: 1.5rem; }
  .dashboard-grid,.login-layout,.setup-grid,.control-layout,.editor-grid,.settings-grid,.library-grid { grid-template-columns: 1fr; }
  .login-graphic { min-height: 260px; }
  .page-head { align-items: start; flex-direction: column; }
  .record { grid-template-columns: minmax(0,1fr) auto; }
  .record .tags, .record-result { grid-column: 1/-1; }
  .record .button { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  button,.button,.control-score { transition: background-color .14s,border-color .14s,color .14s; }
}