/* QMSS IQ King — Lumen token-led interface theme */
:root {
  --shadow-soft: 0 8px 24px hsl(var(--ink) / .06);
  --shadow-card: 0 16px 40px hsl(var(--ink) / .08);
  --radius-card: 20px;
  --radius-control: 12px;
}

body { min-height: 100vh; }
.muted { color: hsl(var(--ink-muted)); }
.ok { color: hsl(var(--success)); }
.bad { color: hsl(var(--danger)); }
.chip { border-radius: 999px; padding: .2em .62em; letter-spacing: .02em; }
::selection { color: hsl(var(--ink)); background: hsl(var(--accent) / .3); }

/* Welcome */
body.home { min-height: 100vh; padding: clamp(20px, 5vw, 72px); display: grid; place-items: center; overflow-x: hidden;
  background: radial-gradient(ellipse at 14% 8%, hsl(var(--brand) / .12), transparent 34%), hsl(var(--canvas)); }
main.home { position: relative; width: min(1080px, 100%); margin: auto; }
.home-mark { display: flex; align-items: center; gap: 11px; color: hsl(var(--ink-soft)); font-size: .84rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.home-mark .seal { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: hsl(var(--brand)); color: hsl(var(--on-brand)); font-size: .9rem; letter-spacing: -.04em; }
.home-hero { max-width: 740px; margin: clamp(34px, 6vw, 76px) 0 36px; }
.home-kicker { color: hsl(var(--brand)); font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.home h1 { margin: 12px 0 14px; color: hsl(var(--ink)); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.08; letter-spacing: -.055em; }
.home h1 span { color: hsl(var(--brand)); }
.home-intro { max-width: 520px; margin: 0; color: hsl(var(--ink-muted)); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.75; }
.home-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-links a { position: relative; display: flex; min-height: 160px; flex-direction: column; padding: 22px; overflow: hidden; border: 1px solid hsl(var(--line)); border-radius: var(--radius-card); background: hsl(var(--surface)); color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.home-links a::before { width: 34px; height: 4px; border-radius: 99px; background: hsl(var(--brand)); content: ""; }
.home-links a:nth-child(2)::before { background: hsl(var(--accent)); }
.home-links a:nth-child(3)::before { background: hsl(var(--ink-soft)); }
.home-links a:hover { transform: translateY(-3px); border-color: hsl(var(--brand) / .3); box-shadow: var(--shadow-card); }
.home-links .role { margin-top: 18px; color: hsl(var(--ink-muted)); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-links b { margin: 5px 0 4px; font-size: 1.35rem; letter-spacing: -.025em; }
.home-links .detail { color: hsl(var(--ink-muted)); font-size: .92rem; line-height: 1.5; }
.home-links .arrow { position: absolute; right: 22px; top: 20px; color: hsl(var(--brand)); font-size: 1.2rem; }
.home-foot { display: flex; align-items: center; gap: 9px; margin-top: 28px; color: hsl(var(--ink-muted)); font-size: .82rem; }
.house-spectrum { display: flex; gap: 5px; }
.house-spectrum i { width: 12px; height: 12px; border-radius: 50%; background: var(--house); }
.house-spectrum i:nth-child(1) { --house: #bb4350; }
.house-spectrum i:nth-child(2) { --house: #bf5427; }
.house-spectrum i:nth-child(3) { --house: #c2a033; }
.house-spectrum i:nth-child(4) { --house: #2b7a58; }
.house-spectrum i:nth-child(5) { --house: #3776a8; }
.house-spectrum i:nth-child(6) { --house: #7e569b; }

/* Host console */
body.master { min-height: 100vh; overflow-x: hidden; background: hsl(var(--canvas)); font-size: 14px; }
.mbar { position: relative; z-index: 5; min-height: 68px; padding: 9px 20px; gap: 18px; background: hsl(var(--surface)); color: hsl(var(--ink)); border-bottom: 1px solid hsl(var(--line)); box-shadow: 0 2px 10px hsl(var(--ink) / .035); }
.mbar h1 { display: flex; align-items: center; gap: 10px; font-size: .98rem; font-weight: 800; letter-spacing: -.025em; }
.mbar h1::before { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: hsl(var(--brand)); color: hsl(var(--on-brand)); content: "IQ"; font-size: .78rem; letter-spacing: -.04em; }
.mbar nav { gap: 3px; }
.mbar nav button { padding: .57em .8em; border-radius: 10px; background: transparent; color: hsl(var(--ink-soft)); font-size: .9rem; font-weight: 650; }
.mbar nav button:hover:not(:disabled) { background: hsl(var(--surface-muted)); box-shadow: none; }
.mbar nav button.on { background: hsl(var(--brand-soft)); color: hsl(var(--brand-solid)); font-weight: 780; }
.mbar .links { gap: 12px; font-size: .82rem; }
.mbar a { color: hsl(var(--brand)); font-weight: 700; text-decoration: none; }
.mbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mbar .who { color: hsl(var(--ink-muted)); }
.mbar .logout { border-color: hsl(var(--line)); color: hsl(var(--ink-soft)); }
.mbar .bypass-warn { background: hsl(var(--warning) / .17); color: hsl(var(--warning)); border: 1px solid hsl(var(--warning) / .3); border-radius: 999px; }
.conn { background: hsl(var(--surface-strong)); box-shadow: inset 0 0 0 2px hsl(var(--surface)); }
.conn.on { background: hsl(var(--success)); }
#tab-control.on { position: relative; grid-template-columns: clamp(228px, 20vw, 290px) minmax(340px, 1fr) clamp(245px, 22vw, 310px); height: calc(100dvh - 68px); gap: 12px; padding: 14px; }
.left, .right { border: 1px solid hsl(var(--line)); border-radius: var(--radius-card); background: hsl(var(--surface)); box-shadow: var(--shadow-soft); }
.left { gap: 14px; padding: 14px; }
#qlist { gap: 6px; margin: 0 -4px; padding: 0 4px; scrollbar-color: hsl(var(--surface-strong)) transparent; }
.seg { gap: 5px; }
.seg button { border-radius: 9px; }
.seg button.on { background: hsl(var(--brand)); color: hsl(var(--on-brand)); border-color: hsl(var(--brand)); box-shadow: 0 4px 12px hsl(var(--brand) / .18); }
.qitem { border-color: transparent; border-radius: 10px; background: transparent; }
.qitem:hover:not(:disabled) { background: hsl(var(--surface-muted)); box-shadow: none; }
.qitem .no { color: hsl(var(--ink-muted)); }
.qitem.played { background: hsl(var(--surface-muted)); color: hsl(var(--ink-muted)); }
.qitem.cur { border-color: hsl(var(--brand) / .22); box-shadow: inset 3px 0 0 hsl(var(--brand)); color: hsl(var(--ink)); background: hsl(var(--brand-soft) / .62); }
.screen-ctl { padding-top: 12px; border-top: 1px solid hsl(var(--line)); }
.screen-ctl h3, .right h3 { color: hsl(var(--ink-soft)); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bot-btn { min-height: 42px; border-radius: 11px; }
.bot-btn.on { background: hsl(var(--success) / .1); }
#livePanel { align-self: stretch; min-width: 0; margin: 0; padding: 22px; overflow: auto; border: 1px solid hsl(var(--line)); border-radius: 24px; background: hsl(var(--surface)); box-shadow: var(--shadow-soft); }
.lh { gap: 11px; min-height: 40px; font-size: 1rem; color: hsl(var(--ink)); }
.lh .tag { background: hsl(var(--brand-soft)); color: hsl(var(--brand-solid)); border-radius: 999px; padding: .4em .8em; font-size: .78em; font-weight: 800; }
.lh .st { color: hsl(var(--ink-muted)); font-size: .86em; }
.lh .timer { display: grid; place-items: center; min-width: 2.4em; height: 1.9em; margin-left: auto; padding: 0 .35em; border-radius: 10px; background: hsl(var(--surface-muted)); color: hsl(var(--brand-solid)); font-size: 1.8em; }
.lh .timer.urgent { background: hsl(var(--danger) / .12); color: hsl(var(--danger)); }
#livePanel .slot-q { margin: 16px 0; padding: clamp(16px, 2vw, 25px); border: 1px solid hsl(var(--line)); border-radius: 18px; background: hsl(var(--canvas)); }
#livePanel .slot-q .q-text { font-size: clamp(1.16rem, 1.65vw, 1.55rem); line-height: 1.55; letter-spacing: -.015em; }
.mopts { gap: 8px; }
.mopt { padding: .7em .85em; border: 1px solid hsl(var(--line)); border-radius: 11px; background: hsl(var(--surface)); }
.mopt.ans { border-color: hsl(var(--success) / .35); background: hsl(var(--success) / .1); color: hsl(var(--success)); }
.mopt.wrong { color: hsl(var(--danger)); }
.ans-tag { background: hsl(var(--success)); border-radius: 99px; padding: .2em .55em; }
#livePanel .slot-actions { gap: 8px; }
.right { border-left: 1px solid hsl(var(--line)); padding: 16px; }
.adj { flex-wrap: wrap; color: hsl(var(--ink-muted)); }
.adj input { width: 64px; }
.team-row { grid-template-columns: 12px 2.4em minmax(0,1fr) 34px 34px; gap: 5px; margin: 9px 0; padding: 6px 5px; border: 1px solid hsl(var(--line)); border-left: 3px solid var(--hc); border-radius: 12px; background: color-mix(in srgb, var(--hc) 7%, white); }
.team-row .chip { font-size: .9rem; }
.team-row .score { color: hsl(var(--ink)); font-size: 1.35em; }
.team-row button { min-width: 32px; height: 32px; padding: 0; border-radius: 9px; background: hsl(var(--surface)); }
.team-row button:hover:not(:disabled) { background: hsl(var(--brand-soft)); }
.dot { width: 9px; height: 9px; }
.right .small { font-size: .78rem; }
.page { max-width: 1480px; margin: 0 auto; padding: 26px clamp(16px, 3vw, 42px); }
.page > h2, .cols h2 { margin-top: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.toolbar { gap: 9px; margin-bottom: 14px; }
.tbl { border: 1px solid hsl(var(--line)); border-radius: 14px; }
.tbl th, .tbl td { border-bottom-color: hsl(var(--line)); padding: 10px 12px; }
.tbl th { background: hsl(var(--surface-muted)); color: hsl(var(--ink-soft)); }
.img-card, fieldset { border-color: hsl(var(--line)); border-radius: 15px; box-shadow: 0 2px 10px hsl(var(--ink) / .035); }
fieldset { padding: 16px 18px; }
legend { padding: 0 8px; color: hsl(var(--ink-soft)); }
code { background: hsl(var(--surface-muted)); }
dialog { border: 1px solid hsl(var(--line)); border-radius: 22px; box-shadow: 0 28px 80px hsl(var(--ink) / .24); }
dialog::backdrop { background: hsl(var(--ink) / .5); backdrop-filter: blur(4px); }
.editor { padding: 24px; }
.editor h2 { letter-spacing: -.03em; }
.login { background: radial-gradient(ellipse at 12% 10%, hsl(var(--brand) / .42), transparent 38%), hsl(var(--ink)); }
.login-card { border: 1px solid hsl(var(--line)); border-radius: 22px; box-shadow: var(--shadow-card); }

/* Team iPad and phone */
body.team { background: hsl(var(--canvas)); color: hsl(var(--ink)); font-size: clamp(16px, 1.25vw, 20px); }
.picker { background: radial-gradient(ellipse at 50% 30%, hsl(var(--brand) / .1), transparent 45%); }
.picker h1 { color: hsl(var(--ink)); font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.035em; }
.picker-grid { gap: clamp(10px, 2vw, 20px); }
.picker-grid button { min-height: 108px; border-radius: 25px; box-shadow: 0 10px 22px hsl(var(--ink) / .12); transition: transform .16s ease, box-shadow .16s ease; }
.picker-grid button:hover { transform: translateY(-3px); box-shadow: 0 16px 30px hsl(var(--ink) / .17); }
.picker > .muted { margin: 0; font-size: .86rem; text-align: center; }
.tbar { min-height: 68px; padding: 10px 22px; border-top: 4px solid var(--hc); border-bottom: 1px solid hsl(var(--line)); background: hsl(var(--surface)); color: hsl(var(--ink)); box-shadow: 0 4px 14px hsl(var(--ink) / .045); }
.tbar .hname { padding: .28em .65em; border-radius: 10px; background: color-mix(in srgb, var(--hc) 11%, white); color: color-mix(in srgb, var(--hc) 52%, hsl(var(--ink))); font-size: 1.18em; }
.tbar .conn { border: 2px solid hsl(var(--surface)); box-shadow: 0 0 0 1px hsl(var(--line)); }
.tbar .conn.on { background: hsl(var(--success)); }
.tbar .myscore { padding: .3em .8em; border: 1px solid hsl(var(--line)); background: hsl(var(--surface-muted)); color: hsl(var(--ink-soft)); }
.tbar .myscore b { padding-left: .28em; color: hsl(var(--brand-solid)); }
.tbar .timer { color: hsl(var(--brand-solid)); font-size: 1.65em; }
.tbar .timer.urgent { padding: .08em .25em; background: hsl(var(--danger)); color: hsl(var(--on-danger)); }
main.tmain { width: min(1120px, 100%); align-self: center; padding: clamp(16px, 3vw, 34px); gap: 16px; }
main.tmain > div { gap: 16px; }
.q-head { color: hsl(var(--brand)); font-size: .86rem; font-weight: 800; letter-spacing: .06em; }
main.tmain > .slot-q { padding: clamp(16px, 2.5vw, 25px); border: 1px solid hsl(var(--line)); border-radius: 20px; background: hsl(var(--surface)); box-shadow: var(--shadow-soft); }
.slot-q .q-text { color: hsl(var(--ink)); font-size: clamp(1.2rem, 2.1vw, 1.75rem); line-height: 1.5; letter-spacing: -.025em; }
.slot-q .q-img img { max-height: 28vh; border-radius: 14px; }
.opts { gap: 12px; }
.opt { min-height: 82px; border: 1px solid hsl(var(--line)); border-radius: 17px; background: hsl(var(--surface)); box-shadow: 0 3px 10px hsl(var(--ink) / .035); font-size: clamp(1.05rem, 1.55vw, 1.25rem); transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.opt:active:not(:disabled) { transform: scale(.99); }
.opt b { width: 2em; height: 2em; background: hsl(var(--surface-muted)); color: hsl(var(--ink-soft)); font-size: .9em; }
.opt.chosen { border-color: color-mix(in srgb, var(--hc) 60%, hsl(var(--ink))); background: color-mix(in srgb, var(--hc) 8%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc) 60%, hsl(var(--ink))), 0 4px 14px color-mix(in srgb, var(--hc) 12%, transparent); }
.opt.chosen b { background: var(--hc); color: var(--hf); }
.opt.correct { border-color: hsl(var(--success) / .5); background: hsl(var(--success) / .1); color: hsl(var(--success)); }
.opt.wrong { border-color: hsl(var(--danger) / .5); background: hsl(var(--danger) / .08); color: hsl(var(--danger)); }
.opt.hidden { background: hsl(var(--surface-muted)); }
.status, .banner { border-radius: 15px; }
.status { color: hsl(var(--ink-soft)); }
.banner { padding: 14px 18px; background: hsl(var(--surface-muted)); color: hsl(var(--ink)); }
.banner.ok { background: hsl(var(--success) / .12); color: hsl(var(--success)); }
.banner.bad { background: hsl(var(--danger) / .1); color: hsl(var(--danger)); }
.banner.go { background: hsl(var(--accent) / .2); color: hsl(var(--ink)); }
.banner.wait { color: hsl(var(--ink-muted)); }
.wait > div { min-width: min(420px, 85vw); padding: clamp(24px, 5vw, 46px); border: 1px solid hsl(var(--line)); border-radius: 24px; background: hsl(var(--surface)); box-shadow: var(--shadow-soft); }
.wait .big { color: color-mix(in srgb, var(--hc) 60%, hsl(var(--ink))); font-size: clamp(4rem, 10vw, 7rem); }
.reveal-pts { color: color-mix(in srgb, var(--hc) 52%, hsl(var(--ink))); }
.bet-val b { color: color-mix(in srgb, var(--hc) 68%, hsl(var(--ink))); }
.wager-cat { color: color-mix(in srgb, var(--hc) 52%, hsl(var(--ink))); }
.bet-fill { background: color-mix(in srgb, var(--hc) 62%, hsl(var(--ink))); }
.draw-area canvas { box-shadow: 0 0 0 3px var(--hc), 0 10px 28px hsl(var(--ink) / .1); }
.toolbar { gap: 9px; }
.swatch.on { box-shadow: 0 0 0 3px hsl(var(--brand)); }
.size.on, .tool.on, .seg-mini button.on { background: hsl(var(--brand)); border-color: hsl(var(--brand)); color: hsl(var(--on-brand)); }
.size.on i { background: hsl(var(--on-brand)); }
.size.on i.ring { border-color: hsl(var(--on-brand)); }
.seg-mini { border-color: hsl(var(--line)); border-radius: 11px; }
.seg-mini button.on { background: hsl(var(--brand)); }
.sheet { background: hsl(var(--ink) / .48); backdrop-filter: blur(5px); }
.sheet-card { border: 1px solid hsl(var(--line)); border-radius: 22px; box-shadow: var(--shadow-card); }
.tcard { border-width: 1px; border-radius: 16px; }
.tcard.attack { background: hsl(var(--danger) / .07); border-color: hsl(var(--danger) / .22); }
.tcard.defense { background: hsl(207 45% 93%); border-color: hsl(207 32% 80%); }
.tcard.boost { background: hsl(var(--accent) / .12); border-color: hsl(var(--accent) / .28); }
.toast { border-radius: 13px; box-shadow: var(--shadow-card); }
.toast.ok { background: hsl(var(--success)); }
.toast.bad { background: hsl(var(--danger)); }
.big-buzz { box-shadow: 0 10px 0 color-mix(in srgb, var(--hc) 65%, #172820), 0 22px 40px hsl(var(--ink) / .2); }
.big-buzz:active:not(:disabled) { box-shadow: 0 4px 0 color-mix(in srgb, var(--hc) 65%, #172820); }
.bet-track::before { background: hsl(var(--surface-strong)); }

/* Projector stage */
body.display { background: radial-gradient(ellipse at 50% -18%, #383a3e 0, #242629 38%, #121416 76%); color: #f8f5ef; font-size: clamp(16px, 1.5vw, 30px); }
#stage { gap: 2vh; padding: clamp(20px, 3.3vw, 64px); }
#stage > div { gap: 2vh; }
.top { color: #f8f5ef; }
.sec { color: #c4c7cc; font-size: .96em; font-weight: 750; letter-spacing: .1em; }
.big-timer { color: #f8f5ef; padding: .12em .28em; border: 1px solid rgba(248,245,239,.16); border-radius: 16px; background: rgba(248,245,239,.07); }
.big-timer.urgent { color: #ff9a8d; border-color: rgba(255,154,141,.4); }
#stage > .slot-q { padding: clamp(16px, 2vw, 32px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: hsl(var(--surface)); color: hsl(var(--ink)); box-shadow: 0 22px 60px rgba(0,0,0,.18); }
#stage .slot-q .q-text { color: hsl(var(--ink)); font-size: clamp(1.5rem, 2.2vw, 2.45rem); line-height: 1.38; letter-spacing: -.025em; }
#stage .slot-q .q-img img { max-height: 28vh; border-radius: 14px; }
#stage .opts { gap: 1.4vh 1vw; }
#stage .opt { min-height: 8vh; padding: 1vh 1vw; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.085); color: #f8f5ef; }
#stage .opt b { background: rgba(255,255,255,.15); }
#stage .opt.correct { background: hsl(var(--success)); border-color: hsl(151 52% 57%); }
#stage .opt.wrong { background: hsl(var(--danger) / .28); border-color: hsl(var(--danger)); }
#stage .opt.chosen { background: hsl(var(--accent) / .24); border-color: hsl(var(--accent)); }
#stage .opt.hidden { border-color: rgba(255,255,255,.32); }
#stage .tstat { border: 1px solid color-mix(in srgb, var(--hc) 45%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--hc) 21%, #17191c); color: #fff; }
#stage .tstat.bad { background: rgba(255,255,255,.055); filter: none; }
#stage .banner { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.1); color: #f8f5ef; }
#stage .banner.ok { background: hsl(var(--success)); color: #fff; }
#stage .banner.bad { background: hsl(var(--danger)); color: #fff; }
.title-screen { gap: 6vh; }
.title-screen h1 { font-size: clamp(3.5rem, 6vw, 7rem); letter-spacing: -.045em; }
.houses { gap: clamp(12px, 2vw, 30px); }
.houses .chip { border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.board-wrap h2 { letter-spacing: -.035em; }
.bar-col .bar { border-radius: 16px 16px 4px 4px; box-shadow: 0 0 24px color-mix(in srgb, var(--hc) 25%, transparent); }
.bar-col .nm { color: color-mix(in srgb, var(--hc) 38%, white); }
#scorebar { height: 9vh; border-top: 1px solid rgba(255,255,255,.17); box-shadow: 0 -8px 30px rgba(0,0,0,.14); }
#scorebar .sb { gap: .7vw; font-size: clamp(1rem, 1.45vw, 2rem); }
#scorebar .sb b { font-size: 1.22em; }
.reveal-box { border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #17191c; }
.rv-pts, .wh-cat { color: hsl(var(--accent)); }
.nl-axis { background: rgba(255,255,255,.3); }
.nl-ans { background: hsl(var(--success)); }
.nl-ans b { background: hsl(var(--success)); }
.cardtime-bar { background: hsl(var(--accent)); color: hsl(var(--ink)); }
.cl-row { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); }
.cl-row.attack { background: hsl(var(--danger) / .22); }
.cl-row.defense { background: hsl(207 72% 39% / .28); }
.cl-row.boost { background: hsl(var(--accent) / .2); }
.bet-card { border: 1px solid color-mix(in srgb, var(--hc) 65%, white); border-radius: 18px; box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.bet-card.ok { box-shadow: 0 0 0 .28vw hsl(var(--success)), 0 14px 28px rgba(0,0,0,.12); }

@media (max-width: 1120px) {
  .mbar { flex-wrap: wrap; gap: 9px 14px; padding: 9px 14px; }
  .mbar .links { margin-left: auto; }
  #tab-control.on { height: calc(100dvh - 112px); grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: minmax(380px, 1fr) auto; }
  #tab-control .left { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(180px, .8fr) minmax(230px, 1fr) minmax(180px, .7fr); align-items: start; }
  #qlist { max-height: 160px; }
  #livePanel { grid-column: 1; grid-row: 1; }
  #tab-control .right { grid-column: 2; grid-row: 1; }
  .screen-ctl { border-top: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  body.home { padding: 22px; }
  .home-links { grid-template-columns: 1fr; }
  .home-links a { min-height: 128px; padding: 18px; }
  .home-hero { margin: 36px 0 28px; }
  body.master { min-height: 100dvh; overflow: auto; }
  .mbar { position: sticky; top: 0; }
  .mbar h1 { font-size: .88rem; }
  .mbar .links { gap: 7px; }
  .mbar .links a, .mbar .links .who { display: none; }
  .mbar nav { order: 3; width: 100%; justify-content: space-between; overflow-x: auto; }
  .mbar nav button { flex: 1; min-width: max-content; padding: .5em .62em; font-size: .82rem; }
  #tab-control.on { height: auto; min-height: calc(100dvh - 118px); grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 10px; gap: 10px; }
  #tab-control .left { grid-column: auto; grid-row: 2; display: flex; min-height: 320px; }
  #qlist { max-height: 210px; }
  #livePanel { grid-column: auto; grid-row: 1; min-height: 350px; padding: 16px; border-radius: 18px; }
  #tab-control .right { grid-column: auto; grid-row: 3; }
  .lh { flex-wrap: wrap; }
  .lh .timer { margin-left: auto; }
  .page { padding: 16px 12px; }
  .cols { flex-direction: column; gap: 16px; }
  .cols > div:first-child { width: 100%; }
  .tbl { display: block; overflow-x: auto; }
  .toolbar .seg { max-width: 100%; }
  .editor { padding: 18px; }
  .picker-grid { width: min(100%, 440px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker-grid button { min-width: 0; min-height: 0; font-size: 2.6em; }
  .tbar { min-height: 58px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); gap: 8px; }
  .tbar .hname { font-size: 1.12em; }
  .tbar .myscore { font-size: .82em; padding: .2em .55em; }
  .tbar .timer { min-width: 1.7em; font-size: 1.45em; }
  main.tmain { padding: 14px max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); gap: 10px; }
  main.tmain > div { gap: 10px; }
  main.tmain > .slot-q { border-radius: 16px; }
  .opts { gap: 8px; }
  .opt { min-height: 66px; padding: 10px 12px; border-radius: 14px; }
}
@media (max-width: 430px) {
  .home-foot { align-items: flex-start; }
  .tbar { gap: 6px; }
  .tbar .fx { max-width: 27vw; }
  .opts { grid-template-columns: 1fr; }
  .opt { min-height: 58px; }
}
@media (max-height: 500px) {
  .tbar { min-height: 48px; }
  main.tmain { padding-top: 8px; padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}