:root{color-scheme:dark;--gold:#eaca83;--muted:#c6bea9;--line:#c49b4a69;--accent:#7ed6a6;font-family:Inter,Arial,sans-serif;color:#faf1d7;background:#0c110e;font-synthesis:none}*{box-sizing:border-box}html,body{height:100%;height:100dvh;margin:0;overflow:hidden}body{background:linear-gradient(#080e0cda,#070c0cea),url('../assets/arcade-games-trivia.png') center/cover fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#1c241e;padding:10px 16px;min-height:42px;font-weight:700}button:hover{background:#344033}button:focus-visible,a:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.gold{background:linear-gradient(135deg,#f4d999,#bf8e3e);color:#201e13;border-color:#f0d292;box-shadow:0 2px 12px #0005}.gold:hover{background:#f4d999}a{color:var(--gold);text-decoration:none}.topbar{height:64px;display:flex;align-items:center;gap:12px;padding:8px 24px;border-bottom:1px solid var(--line);background:#0b110eef}.topbar>a{font-size:14px;white-space:nowrap}.wordmark{display:flex;gap:14px;align-items:center;min-width:0;flex:1}.wordmark b{font-family:Georgia,serif;font-size:31px;letter-spacing:3px;color:var(--gold);border-left:1px solid var(--line);padding-left:14px}.wordmark span{font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}main{height:calc(100dvh - 64px);padding:16px 24px;max-width:1440px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.machine{display:grid;grid-template-rows:66px minmax(0,1fr) 30px 84px;min-height:0;min-width:0;border:2px solid #ab8847;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#222c22,#08130e);box-shadow:0 12px 38px #0009,inset 0 0 0 4px #060e0b}.scoreboard{display:grid;grid-template-columns:.75fr 1fr .8fr 1.3fr;align-items:center;text-align:center;border-bottom:1px solid var(--line);padding:7px 8px;gap:6px;background:#0c1510}.scoreboard>div{display:flex;flex-direction:column;min-width:0;gap:5px}.scoreboard span{font-size:9px;color:var(--muted);letter-spacing:1.4px;font-weight:700}.scoreboard strong{font-size:16px;font-variant-numeric:tabular-nums;color:#f5dc9d}.screen-wrap{position:relative;min-height:0;min-width:0;display:flex;justify-content:center;align-items:center;background:radial-gradient(ellipse,#142f23,#050d09 80%);overflow:hidden}canvas{display:block;max-width:100%;max-height:100%;touch-action:none;box-shadow:0 0 45px #0009}.game-message{font-size:12px;display:flex;align-items:center;justify-content:center;text-align:center;padding:2px 10px;background:#101c14;color:#ead6a3;border-top:1px solid #b8954a44;overflow:hidden}.controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 18px;border-top:1px solid var(--line);background:linear-gradient(#1c271e,#0b120d)}.direction-pad{display:grid;grid-template-columns:44px 44px 44px;grid-template-rows:32px 32px;gap:3px;flex-shrink:0}.direction-pad button{padding:0;font-size:22px;min-height:0;background:#263b2d;touch-action:none;user-select:none}.up{grid-column:2;grid-row:1}.left{grid-column:1;grid-row:2}.down{grid-column:2;grid-row:2}.right{grid-column:3;grid-row:2}.direction-pad.horizontal{grid-template-columns:64px 64px;grid-template-rows:52px;gap:8px}.horizontal .left{grid-column:1;grid-row:1}.horizontal .right{grid-column:2;grid-row:1}.horizontal .up,.horizontal .down{display:none}.direction-pad.race-pad{grid-template-columns:44px 62px 44px;grid-template-rows:52px}.race-pad .up{display:none}.race-pad .left,.race-pad .right,.race-pad .down{grid-row:1}.race-pad .down{font-size:12px}.control-hint{font-size:12px;line-height:1.5;color:#c6cebd;text-align:center;flex:1}.action{min-width:132px;min-height:54px;font-size:17px;touch-action:none;user-select:none}.held{filter:brightness(1.45);transform:translateY(1px)}.action[hidden]{display:none}.game-guide{min-height:0;overflow:auto;scrollbar-width:thin;padding:16px 0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}.game-guide h2{font:36px/1.08 Georgia,serif;margin:14px 0;color:#f5e8c9}.game-guide p{color:var(--muted);font-size:14px;line-height:1.6}.rule-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:24px 0}.rule-card p{margin:8px 0 0}.best-card strong{display:block;color:var(--gold);font-size:34px;margin-top:8px}.best-card p{font-size:12px}.game-guide>a{font-size:13px;display:block;margin-top:26px}.overlay{position:absolute;inset:0;background:#07130de3;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}.overlay[hidden]{display:none}.overlay>div{max-width:440px;text-align:center}.overlay h1{font:36px/1.1 Georgia,serif;color:#f6e1ae;margin:12px 0}.overlay p{line-height:1.5;font-size:14px;color:#d6d2c2;margin:0 0 20px}.overlay button{min-width:180px;font-size:16px}.overlay a{display:block;margin-top:16px;font-size:12px}dialog{max-width:520px;width:calc(100% - 32px);max-height:90dvh;border:1px solid var(--gold);border-radius:14px;padding:28px;background:#101c14;color:#f8e8c5;box-shadow:0 20px 100px #000b}dialog::backdrop{background:#000b}dialog h2{font:30px Georgia,serif}dialog p{line-height:1.6;font-size:15px}.note{color:#bcbba9;font-size:12px}body[data-kind=maze] .control-hint{max-width:300px}body[data-kind=golf] .scoreboard{grid-template-columns:.6fr 1.1fr .8fr 1.4fr}body[data-kind=golf] .action{font-size:15px}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr);max-width:960px;gap:0;padding:10px 16px}.game-guide{display:none}.topbar{padding:8px 16px}}
@media(max-width:600px){.topbar{height:55px;padding:6px 10px;gap:8px}.topbar>a{font-size:12px}.wordmark{gap:6px}.wordmark b{font-size:20px;padding-left:6px;letter-spacing:0}.wordmark span{font-size:10px;letter-spacing:.3px}.topbar button{font-size:11px;padding:5px 8px;min-height:36px}main{height:calc(100dvh - 55px);padding:5px}.machine{border-radius:10px;grid-template-rows:57px minmax(0,1fr) 36px 87px}.scoreboard{gap:3px;padding:6px 3px}.scoreboard span{font-size:7px;letter-spacing:.6px}.scoreboard strong{font-size:11px;line-height:1.25}.controls{gap:8px;padding:6px 9px}.control-hint{font-size:10px;line-height:1.3}.direction-pad{grid-template-columns:38px 38px 38px;grid-template-rows:33px 33px}.action{min-width:86px;font-size:14px;min-height:54px;padding:6px 9px}.horizontal{width:auto}.direction-pad.horizontal{grid-template-columns:51px 51px}.direction-pad.race-pad{grid-template-columns:36px 46px 36px}.game-message{font-size:10px;line-height:1.3}.overlay{padding:12px}.overlay h1{font-size:27px;margin:8px 0}.overlay p{font-size:12px;margin-bottom:12px}.overlay a{margin-top:10px}.overlay button{min-height:40px}.overlay .eyebrow{font-size:8px}body[data-kind=golf] .action{font-size:12px}}
@media(max-height:500px) and (min-width:601px){.topbar{height:44px;padding:4px 12px}.topbar button{min-height:30px;padding:5px 10px;font-size:12px}.wordmark b{font-size:24px}.wordmark span{font-size:12px}main{height:calc(100dvh - 44px);padding:4px;max-width:1100px}.game-guide{display:none}.machine{grid-template-rows:43px minmax(0,1fr) 23px 57px}.scoreboard{padding:3px}.scoreboard span{font-size:7px}.scoreboard strong{font-size:12px}.scoreboard>div{gap:3px}.direction-pad{grid-template-columns:35px 35px 35px;grid-template-rows:21px 21px;gap:2px}.direction-pad button{font-size:17px}.direction-pad.horizontal{grid-template-columns:55px 55px;grid-template-rows:42px}.direction-pad.race-pad{grid-template-columns:42px 58px 42px;grid-template-rows:42px}.controls{padding:4px 15px}.action{min-height:40px;font-size:14px}.game-message{font-size:10px}.overlay{padding:8px}.overlay h1{font-size:24px;margin:4px 0}.overlay p{font-size:12px;margin:6px auto;max-width:440px}.overlay button{min-height:32px;padding:6px 20px;font-size:13px}.overlay a{margin-top:6px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.game-message{justify-content:space-between;gap:8px}#message{flex:1}#bestDuring{white-space:nowrap;font-size:10px;color:#bfb69c}#clock{font:inherit}
@media(max-width:600px){#bestDuring{font-size:8px}.game-message{padding-inline:7px}}
@media(max-height:500px) and (min-width:601px){.machine{grid-template-columns:110px minmax(0,1fr) 130px;grid-template-rows:minmax(0,1fr) 26px}.scoreboard,body[data-kind=golf] .scoreboard{grid-column:1;grid-row:1;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);border-right:1px solid var(--line);border-bottom:0;padding:6px}.scoreboard strong{font-size:13px}.screen-wrap{grid-column:2;grid-row:1}.game-message{grid-column:1/-1;grid-row:2}.controls{grid-column:3;grid-row:1;flex-direction:column;justify-content:space-evenly;padding:9px 7px;border-top:0;border-left:1px solid var(--line);gap:7px}.control-hint{flex:none;font-size:10px}.direction-pad{grid-template-columns:33px 33px 33px;grid-template-rows:30px 30px}.direction-pad.horizontal{grid-template-columns:49px 49px;grid-template-rows:46px}.direction-pad.race-pad{grid-template-columns:31px 42px 31px;grid-template-rows:44px}.action{min-width:100px;min-height:46px}.overlay h1{font-size:24px}.overlay p{font-size:11px}}

body[data-kind=maze] canvas{cursor:crosshair}

body[data-kind=shot] canvas{cursor:crosshair}body[data-kind=shot] .action{min-width:150px;font-size:20px}@media(max-width:600px){body[data-kind=shot] .action{min-width:98px;font-size:17px}}@media(max-height:500px) and (min-width:601px){body[data-kind=shot] .action{min-width:100px;font-size:17px}}

/* Separate thumb controls, shared pinball physics. */
.pinball-controls{display:grid;grid-template-columns:minmax(100px,1fr) auto minmax(100px,1fr);grid-template-rows:minmax(0,1fr) 16px;gap:3px 16px;padding:5px 14px}.flipper-button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;height:100%;padding:5px 14px;border:2px solid #d4ae64;background:linear-gradient(#354c36,#15291d);color:#f9df9d;touch-action:none;user-select:none;box-shadow:inset 0 -3px 0 #0005}.flipper-button>span{font-size:10px;letter-spacing:2px}.flipper-button>strong{font-size:17px;letter-spacing:1px}.left-flipper{grid-column:1;grid-row:1}.right-flipper{grid-column:3;grid-row:1}.pinball-controls>.action{grid-column:2;grid-row:1;min-height:0;height:100%;min-width:110px;font-size:14px}.pinball-controls>.control-hint{grid-column:1/-1;grid-row:2;font-size:10px;line-height:1.2}.flipper-button.held{background:#e6c579;color:#14251a;filter:none;box-shadow:inset 0 3px 0 #967139}
@media(max-width:600px){.pinball-controls{grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:3px 8px;padding:5px 8px}.flipper-button>span{font-size:9px}.flipper-button>strong{font-size:13px}.pinball-controls>.action{min-width:0;font-size:11px;padding:3px}.pinball-controls>.control-hint{font-size:8px}}
@media(orientation:landscape) and (max-height:500px){
 body[data-kind=pinball] .machine{grid-template-columns:100px minmax(0,1fr) 120px;grid-template-rows:minmax(0,1fr) 26px}
 body[data-kind=pinball] .scoreboard{grid-column:1;grid-row:1;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);padding:5px 5px 78px;border-bottom:0;border-right:1px solid var(--line)}
 body[data-kind=pinball] .scoreboard strong{font-size:11px}body[data-kind=pinball] .scoreboard span{font-size:7px}
 body[data-kind=pinball] .screen-wrap{grid-column:2;grid-row:1}body[data-kind=pinball] .game-message{grid-column:1/-1;grid-row:2}
 .pinball-controls{display:contents}.pinball-controls>.left-flipper{grid-column:1;grid-row:1;align-self:end}.pinball-controls>.right-flipper{grid-column:3;grid-row:1;align-self:end}
 .pinball-controls>.flipper-button{height:62px;width:calc(100% - 12px);margin:0 6px 8px;z-index:1}.flipper-button>strong{font-size:12px}.flipper-button>span{font-size:9px}
 .pinball-controls>.action{grid-column:3;grid-row:1;align-self:start;margin:9px 6px;min-width:0;width:calc(100% - 12px);height:44px;font-size:12px}
 .pinball-controls>.control-hint{grid-column:3;grid-row:1;align-self:center;font-size:10px;padding:0 10px;line-height:1.4}
}

/* Keep the venue visible around the playable screen, never over its controls. */
.screen-wrap{background:linear-gradient(#050d09aa,#050d09e8),var(--game-art) center/cover}.machine{border-color:#cba95e;box-shadow:0 12px 38px #0009,inset 0 0 0 4px #060e0b}.game-guide{border-top:2px solid #b89c5e}.game-guide .eyebrow:first-child{display:block;padding:9px 0}.scoreboard{background:linear-gradient(180deg,#18241b,#08130d)}.scoreboard strong{text-shadow:0 0 13px #f2ce6744}.controls{border-top:2px solid #a98c4b}

/* Large playfield: put the dashboard beside the field on wide screens. */
main{max-width:none;padding:8px;gap:0;grid-template-columns:minmax(0,1fr)}
.game-guide{display:none}
.topbar{height:56px;padding:6px 16px}
main{height:calc(100dvh - 56px)}
.game-message{min-height:34px;font-size:13px}
@media(min-width:700px) and (orientation:landscape){
 .machine,body[data-kind=pinball] .machine{grid-template-columns:clamp(100px,13vw,180px) minmax(0,1fr) clamp(132px,15vw,208px);grid-template-rows:minmax(0,1fr) 38px}
 .scoreboard,body[data-kind=golf] .scoreboard,body[data-kind=pinball] .scoreboard{grid-column:1;grid-row:1;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);padding:18px 8px;border-bottom:0;border-right:1px solid var(--line)}
 .scoreboard span,body[data-kind=pinball] .scoreboard span{font-size:clamp(9px,1vw,13px)}
 .scoreboard strong,body[data-kind=pinball] .scoreboard strong{font-size:clamp(16px,1.7vw,26px);line-height:1.3}
 .screen-wrap,body[data-kind=pinball] .screen-wrap{grid-column:2;grid-row:1}
 .game-message,body[data-kind=pinball] .game-message{grid-column:1/-1;grid-row:2}
 .controls{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:12px 8px;border-top:0;border-left:1px solid var(--line)}
 .control-hint{flex:none;font-size:clamp(12px,1.1vw,16px);line-height:1.5}
 .direction-pad{grid-template-columns:repeat(3,minmax(30px,46px));grid-template-rows:46px 46px;width:100%;justify-content:center}
 .direction-pad.horizontal{grid-template-columns:repeat(2,minmax(42px,72px));grid-template-rows:62px}
 .direction-pad.race-pad{grid-template-columns:1fr 1.4fr 1fr;grid-template-rows:62px}
 .direction-pad button{font-size:24px}.race-pad .down{font-size:12px}
 .action,body[data-kind=shot] .action,body[data-kind=golf] .action{min-width:0;width:100%;min-height:64px;font-size:20px;padding:8px}
 .pinball-controls{display:flex;gap:20px;padding:12px}
 .pinball-controls>.flipper-button{width:100%;height:78px;min-height:60px;margin:0;align-self:stretch;flex:0 0 auto}
 .pinball-controls>.action{height:64px;width:100%;min-width:0;margin:0;align-self:stretch;font-size:18px}
 .pinball-controls>.control-hint{padding:0;font-size:12px;line-height:1.4;align-self:auto}
 .flipper-button>strong{font-size:17px}.flipper-button>span{font-size:10px}
}
@media(min-width:700px) and (max-height:500px){
 .topbar{height:42px;padding:3px 10px}.topbar button{min-height:32px;padding:4px 9px}
 main{height:calc(100dvh - 42px);padding:3px}
 .machine,body[data-kind=pinball] .machine{grid-template-columns:100px minmax(0,1fr) 132px;grid-template-rows:minmax(0,1fr) 32px}
 .scoreboard,body[data-kind=pinball] .scoreboard{padding:3px 5px}.scoreboard strong,body[data-kind=pinball] .scoreboard strong{font-size:14px}
 .scoreboard span,body[data-kind=pinball] .scoreboard span{font-size:8px}
 .controls,.pinball-controls{padding:5px;gap:10px}.control-hint,.pinball-controls>.control-hint{font-size:10px;line-height:1.3}
 .direction-pad{grid-template-rows:38px 38px}.direction-pad.horizontal{grid-template-rows:44px}.direction-pad.race-pad{grid-template-rows:44px}
 .action,body[data-kind=shot] .action,body[data-kind=golf] .action,.pinball-controls>.action{min-height:44px;height:44px;font-size:15px}
 .pinball-controls>.flipper-button{height:48px;min-height:44px;padding:3px}.flipper-button>strong{font-size:13px}.flipper-button>span{font-size:9px}
 .game-message{font-size:10px;min-height:0}
}
@media(max-width:699px){
 .topbar{height:55px;padding:6px 8px;gap:6px}.wordmark b{display:none}.wordmark span{font-size:11px;letter-spacing:.2px}
 main{height:calc(100dvh - 55px);padding:3px}
 .machine{grid-template-columns:minmax(0,1fr);grid-template-rows:54px minmax(0,1fr) 42px 90px}
 .game-message{font-size:11px;line-height:1.3}.control-hint{font-size:10px}
 .scoreboard strong{font-size:12px}.topbar button{padding:5px 7px;font-size:11px;min-height:36px}
}
@media(orientation:landscape) and (max-height:500px) and (min-width:700px){
 body[data-kind=pinball] .scoreboard{padding-bottom:64px}
 .pinball-controls{display:contents}
 .pinball-controls>.left-flipper{grid-column:1;grid-row:1;align-self:end}
 .pinball-controls>.right-flipper{grid-column:3;grid-row:1;align-self:end}
 .pinball-controls>.flipper-button{width:calc(100% - 10px);height:52px;margin:0 5px 7px;z-index:1}
 .pinball-controls>.action{grid-column:3;grid-row:1;align-self:start;width:calc(100% - 10px);margin:8px 5px}
 .pinball-controls>.control-hint{grid-column:3;grid-row:1;align-self:center;padding:0 8px}
}