/* Notch design language: dark only, Roboto, soft corners, shade instead of borders. */
:root{
  color-scheme:dark;
  --bg:#131618;--rule:#7F8990;--surface:#1A1E21;--fill:#23292E;--fill-hover:#2D3439;--raised:#22272B;
  --text:#E6EAED;--text-dim:#7F8990;--text-muted:#A3ACB3;
  --accent:#9DDDFF;--accent-hover:#C2EAFF;--on-accent:#00324F;
  --ok:#4DBA86;--warn:#E0A54A;--crit:#EE6A5D;
  --r-xs:4px;--r-sm:6px;--r-md:10px;
  --f:'Roboto',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.hidden{display:none!important}

/* header: brand label on the left, controls right-aligned, heavy rule under */
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:11px 16px;min-height:56px;flex:0 0 auto;border-bottom:2px solid var(--rule)}
.bar .grow{flex:1;display:flex;align-items:center;gap:16px;min-width:0}
.label{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}
.brand{color:var(--text)}
.state{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;white-space:nowrap}
.mark{width:8px;height:8px;border-radius:2px;background:var(--text-dim);flex:none}
.mark.ok{background:var(--ok)}.mark.warn{background:var(--warn)}.mark.crit{background:var(--crit)}

/* controls: one height, 8px apart, no borders */
button,select,input[type=text],input[type=password]{height:34px;padding:0 14px;border:0;border-radius:var(--r-sm);background:var(--fill);color:var(--text);font:600 12.5px var(--f);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .12s}
button:hover,select:hover,input:hover{background:var(--fill-hover)}
button.primary{background:var(--accent);color:var(--on-accent)}
button.primary:hover{background:var(--accent-hover)}
button:disabled{opacity:.4;cursor:not-allowed}
input[type=text],input[type=password]{cursor:text;font-weight:400;width:240px;text-transform:none;letter-spacing:normal;font-size:13.5px}
input:focus{background:var(--raised);box-shadow:inset 0 -2px 0 var(--accent);outline:none}
input::placeholder{color:var(--text-dim)}
select{font-weight:500;padding-right:10px;text-transform:none;letter-spacing:normal;font-size:13.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* page shell */
.wrap{max-width:1120px;margin:0 auto}
main{padding:24px 16px}
main .seats{margin-bottom:16px}
.seatrow{flex:0 0 auto;width:100%;padding:16px 16px 0}
.seatrow .seats{margin-bottom:16px}
.seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.seat{padding:0 8px;font-size:12px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:34px;text-align:center}
.seat:not(.taken){animation:flash 1.2s steps(1,end) infinite}
@keyframes flash{0%{color:var(--text)}50%{color:var(--text-dim)}}
.seat.taken,.seat.taken:disabled{background:#50C878;color:#062814;opacity:1;cursor:default}
.seat.taken:hover,.seat.taken:disabled:hover{background:#50C878}
.seat.mine{cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
.seat.mine:hover{background:#63D08A}
@media(prefers-reduced-motion:reduce){.seat:not(.taken){animation:none}}
#hname{width:240px;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px}
.cell{min-width:0}
.cell .seat{width:100%}
.cell input.seat-input{display:none;width:100%;padding:0 8px;text-align:center;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:600;background:var(--raised);box-shadow:inset 0 -2px 0 var(--accent)}
.cell input.seat-input.need{box-shadow:inset 0 -2px 0 var(--crit)}
.cell.edit .seat{display:none}
.cell.edit input.seat-input{display:block}
input.need{box-shadow:inset 0 -2px 0 var(--crit)}
.err{color:var(--crit);font-size:13.5px}

.stage{position:relative;background:#000;border-radius:var(--r-md);overflow:hidden}
#stage{width:min(100%,calc((100dvh - 170px) * 4 / 3));margin:0 auto}
#game{width:100%;aspect-ratio:4/3}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:rgba(19,22,24,.86);text-align:center;padding:16px;font-size:15px}

/* guest: the player fills the viewport */
body.play{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.play .stage{flex:1;border-radius:0;min-height:0}
canvas#view{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
video#full{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}

/* touch controls: graphite shades, blue only on the primary action */
#touch{position:absolute;inset:0;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}
#touch *{touch-action:none;-webkit-tap-highlight-color:transparent}
.tc{position:absolute;pointer-events:auto;border-radius:50%;background:rgba(35,41,46,.72);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;user-select:none;transition:background .06s}
.tc.on{background:rgba(127,137,144,.85)}
#stick{left:4%;bottom:8%;width:130px;height:130px}
#knob{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:rgba(230,234,237,.55);pointer-events:none}
#bA{right:5%;bottom:10%;width:88px;height:88px;background:rgba(157,221,255,.62);color:var(--on-accent);font-size:20px}
#bA.on{background:var(--accent)}
#bB{right:calc(5% + 98px);bottom:6%;width:68px;height:68px}
#bZ{right:5%;bottom:calc(10% + 100px);width:64px;height:64px}
#bR{right:calc(5% + 76px);bottom:calc(10% + 84px);width:56px;height:56px}
#bS{left:50%;bottom:4%;transform:translateX(-50%);width:76px;height:34px;border-radius:var(--r-sm);font-size:11px;letter-spacing:.09em;text-transform:uppercase}

@media(max-width:640px){
  .seats{grid-template-columns:1fr 1fr}
  .seat,.cell input.seat-input{height:42px;font-size:13px}
  .bar .grow{display:none}
}

.ovl{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:8px}
.ovl button,.ovl select{background:rgba(35,41,46,.72);backdrop-filter:blur(4px)}
.ovl button:hover,.ovl select:hover{background:rgba(45,52,57,.9)}

#msg{font-size:24px;font-weight:500;line-height:1.35;max-width:640px}

.stats{position:fixed;left:8px;bottom:8px;z-index:10;margin:0;padding:10px 12px;border-radius:var(--r-md);background:rgba(19,22,24,.85);color:var(--text);font:12px/1.5 'Roboto Mono',ui-monospace,Menlo,monospace;pointer-events:none;white-space:pre}

/* guest volume slider, on the video */
.vol{display:flex;align-items:center;height:34px;padding:0 12px;border-radius:var(--r-sm);background:rgba(35,41,46,.72);backdrop-filter:blur(4px)}
.vol input[type=range],.vol input[type=range]:hover,.vol input[type=range]:focus{-webkit-appearance:none;appearance:none;width:100px;height:6px;padding:0;border-radius:3px;outline:none;box-shadow:none;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--p,50%),rgba(230,234,237,.25) var(--p,50%))}
.vol input[type=range]:focus-visible{outline:2px solid var(--text);outline-offset:6px}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:4px;background:var(--text);border:0}
.vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:4px;background:var(--text);border:0}
.vol input[type=range]::-moz-range-track{background:transparent}
@media(max-width:640px){.vol input[type=range],.vol input[type=range]:hover,.vol input[type=range]:focus{width:72px}}