:root {
  color-scheme:dark;
  --ink:#10233e;
  --navy:#12325f;
  --blue:#1d6fb8;
  --sky:#67d4ff;
  --yellow:#ffd84d;
  --orange:#f47b20;
  --cream:#fffaf0;
  --panel:#f8fbff;
  --shadow:0 10px 30px rgba(3,18,42,.34);
}

* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:#0a2342;font-family:"Trebuchet MS",Arial,sans-serif; }
body { display:flex;align-items:center;justify-content:center; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }

#game { position:relative;flex:0 0 auto;width:800px;height:600px;overflow:hidden;border:0;outline:0;box-shadow:none;background:linear-gradient(#61d8ff 0 45%,#f5c84b 45% 58%,#324967 58%);transform-origin:center center;user-select:none; }
#pixi-stage,#pixi-stage canvas { position:absolute;inset:0;width:100%!important;height:100%!important;display:block; }
.screen { position:absolute;inset:0;z-index:2; }
.hidden { display:none!important; }
.legacy-loading { background:#ffedc8 url("../whack-mole/media/qtt-splash.png") center/100% 100% no-repeat; }
.legacy-load-track { position:absolute;left:50%;top:80%;width:204px;height:24px;padding:2px;transform:translate(-50%,-50%);border:4px solid #63626b;background:rgba(255,255,255,.32); }
.legacy-load-fill { width:0;height:100%;background:#fad230;transition:width .25s ease-out; }
.loading-status { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.title-screen { color:white;background:#12325f; }
.title-art { position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(8,35,70,.05),rgba(8,35,70,.55)),url("media/title-screen.jpg");background-size:cover;background-position:center;transform:scale(1.01); }
.title-shade { position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,22,49,.92) 0%,rgba(5,29,63,.76) 43%,rgba(4,22,49,.04) 80%),linear-gradient(0deg,rgba(3,18,42,.6),transparent 35%); }
.title-content { position:absolute;left:6%;top:12%;width:48%;text-shadow:0 3px 0 rgba(3,18,42,.4); }
.eyebrow { font-size:12px;font-weight:900;letter-spacing:2px;color:var(--yellow); }
.title-logo { display:block;width:340px;height:190px;margin:-17px 0 -16px;object-fit:cover;object-position:center;filter:drop-shadow(0 7px 10px rgba(0,0,0,.45)); }
.title-content h1 { margin:8px 0 2px;font-size:64px;line-height:.86;letter-spacing:-3px;text-transform:uppercase;font-style:italic;color:var(--yellow);-webkit-text-stroke:2px #7e2b12;text-shadow:0 5px 0 #7e2b12,0 9px 18px rgba(0,0,0,.5);transform:skew(-4deg); }
.title-content h1 span { display:block;color:white;font-size:43px;-webkit-text-stroke:2px var(--navy);text-shadow:0 5px 0 var(--navy); }
.title-content .accessible-title { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.title-tagline { margin:12px 0 16px;font-weight:800;font-size:15px;letter-spacing:.3px; }
.match-card { display:flex;align-items:center;gap:10px;width:380px;padding:10px 12px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:rgba(6,26,56,.76);box-shadow:0 6px 16px rgba(0,0,0,.18);text-shadow:none;backdrop-filter:blur(6px); }
.match-card small { white-space:nowrap; }
.match-card small { display:block;margin-top:2px;color:#cceeff;font-size:11px; }
.match-dot { width:12px;height:12px;border-radius:50%;background:#69e08f;box-shadow:0 0 0 5px rgba(105,224,143,.17),0 0 14px #69e08f; }
.title-actions { display:flex;flex-wrap:nowrap;gap:8px;margin-top:14px;width:390px; }
.title-actions .btn { white-space:nowrap; }
.title-topbar { position:absolute;top:18px;right:20px;display:flex;gap:8px;align-items:center; }
.credits-pill { padding:8px 12px;border:2px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(10,35,66,.88);color:white;font-size:12px;box-shadow:0 3px 0 rgba(0,0,0,.2); }
.credits-pill>span,.credit-award>span { color:var(--yellow);font-size:17px;vertical-align:-1px;text-shadow:0 1px 0 #9b5800; }

.btn { border:0;border-radius:10px;padding:10px 16px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.26);transition:transform .1s,filter .1s; }
.btn:hover { filter:brightness(1.08);transform:translateY(-1px); }
.btn:active { transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.26); }
.btn:focus-visible,.icon-button:focus-visible,.back-button:focus-visible { outline:3px solid white;outline-offset:2px; }
.btn-primary { color:#172c47;background:linear-gradient(#ffe772,#ffc72e); }
.btn-secondary { color:white;background:linear-gradient(#2d8bd0,#1761a7); }
.btn-quiet { color:white;background:rgba(9,29,59,.78);border:1px solid rgba(255,255,255,.28); }
.icon-button { width:36px;height:36px;padding:0;border:2px solid rgba(255,255,255,.5);border-radius:50%;color:white;background:rgba(10,35,66,.86);font-weight:900;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.22); }
.icon-button.is-off { opacity:.48;text-decoration:line-through; }

.race-screen { pointer-events:none; }
.race-hud { position:absolute;left:10px;right:10px;top:9px;display:flex;gap:7px;align-items:center; }
.hud-chip { min-width:88px;padding:5px 10px;border:2px solid #fff;border-radius:9px;background:rgba(8,35,70,.88);box-shadow:0 3px 0 rgba(0,0,0,.25);color:#fff; }
.hud-chip small { display:block;color:#96dcff;font-size:8px;font-weight:900;letter-spacing:1.2px; }
.hud-chip strong { font-size:16px; }
.hud-timer { margin-left:auto;text-align:right;min-width:96px; }
.race-audio,.race-quit { pointer-events:auto; }
.race-quit { border-color:#ffd0d0;background:rgba(145,22,35,.92);font-family:Arial,sans-serif;font-size:25px;line-height:1; }
.race-quit:hover { background:#bd2638; }
.racer-cards { position:absolute;left:8px;top:94px;width:100px;height:300px; }
.racer-card { position:absolute;left:0;width:100px;height:36px;padding:1px 5px 1px 28px;color:white;isolation:isolate;transition:transform .2s; }
.racer-card:before { content:"";position:absolute;z-index:-1;left:0;top:-8px;width:100%;height:36px;border-radius:9px;background:rgba(7,30,59,.82);border:1px solid rgba(255,255,255,.34);box-shadow:0 3px 8px rgba(0,0,0,.25); }
.racer-card.player:before { border-color:var(--yellow);background:rgba(28,62,96,.93); }
.racer-card img { position:absolute;left:-3px;top:1px;width:24px;height:24px;border-radius:50%;object-fit:cover;border:2px solid white;background:#d8ecf5; }
.racer-card strong { position:relative;top:-4px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:14px; }
.racer-card small { position:relative;top:-4px;display:block;color:#bce8ff;font-size:9px;line-height:12px; }
.racer-place { position:absolute;left:-4px;top:-20px;min-width:24px;padding:2px 5px;border-radius:9px;background:var(--yellow);color:var(--ink);font-size:10px;line-height:12px;font-weight:900;text-align:center;z-index:2; }
.countdown { position:absolute;left:50%;top:170px;transform:translate(-50%,-50%) scale(1);min-width:108px;text-align:center;font-size:96px;font-weight:1000;font-style:italic;color:white;-webkit-text-stroke:4px var(--navy);text-shadow:0 8px 0 var(--orange),0 13px 26px rgba(0,0,0,.45);animation:count-pop .55s ease-out; }
@keyframes count-pop { from { transform:translate(-50%,-50%) scale(1.7);opacity:0; } }
.combo-badge { position:absolute;right:18px;top:75px;padding:8px 12px;border-radius:12px;background:linear-gradient(135deg,#ffec65,#ff8b2d);color:#652307;font-weight:1000;font-style:italic;box-shadow:0 4px 0 #9c3d12;animation:combo-pop .25s ease-out; }
@keyframes combo-pop { from { transform:scale(.65) rotate(-5deg); } }
.race-message { position:absolute;left:125px;right:64px;bottom:166px;text-align:center;color:white;font-size:11px;font-weight:bold;text-shadow:0 2px 3px #123; }
.typing-panel { pointer-events:auto;position:absolute;left:14px;right:14px;bottom:12px;height:150px;padding:8px 14px 7px;border:3px solid #173f6b;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 6px 0 #173f6b,var(--shadow);color:var(--ink); }
.typing-panel.error { animation:error-shake .18s linear;box-shadow:0 6px 0 #8f2020,0 0 0 5px rgba(239,68,68,.3); }
@keyframes error-shake { 25%{transform:translateX(-5px)}75%{transform:translateX(5px)} }
.typing-topline { display:flex;justify-content:space-between;color:#3476aa;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase; }
.quote-display { height:86px;margin:3px 0 4px;font-family:"Courier New",monospace;font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.3px;overflow:hidden;user-select:text; }
#quote-typed { color:#1b8b5a;background:#d9f9e9; }
#quote-current { display:inline;padding:0 1px;color:inherit;background:#00ff00;border-radius:6px;font:inherit;line-height:inherit;text-transform:none;text-shadow:none; }
#quote-remaining { color:#19334e; }
.typing-input { position:absolute;left:-9999px;width:1px;height:1px;opacity:.01; }
.progress-rail { height:7px;margin-top:4px;border-radius:6px;background:#d7e5ef;overflow:hidden; }
.progress-fill { height:100%;width:0;background:linear-gradient(90deg,#1fa968,#a8df39,#ffd33f);border-radius:6px;transition:width .1s linear; }

.panel-screen { color:var(--ink);background:linear-gradient(#e9f8ff,#cceaff); }
.panel-header { height:82px;display:flex;align-items:center;gap:13px;padding:11px 18px;color:white;background:linear-gradient(135deg,#12325f,#1d70b7);box-shadow:0 5px 0 rgba(9,45,80,.2); }
.panel-header h2 { margin:2px 0 0;font-size:29px;line-height:1; }
.panel-header .credits-pill { margin-left:auto; }
.back-button { display:grid;place-items:center;align-self:center;width:42px;height:42px;padding:0 0 3px;border:2px solid white;border-radius:50%;color:white;background:#0c274a;font-family:Arial,sans-serif;font-size:25px;font-weight:900;line-height:1;-webkit-text-stroke:1.35px currentColor;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25); }
.garage-body { height:518px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scroll-padding-bottom:28px;padding:12px 16px 28px; }
.upgrade-shop { display:flex;align-items:center;gap:16px;padding:10px 12px;border:2px solid #7aa9c8;border-radius:13px;background:white;box-shadow:0 4px 0 rgba(49,93,126,.18); }
.upgrade-shop h3,.help-card h3 { margin:0;font-size:15px; }
.upgrade-shop p,.help-card p { margin:2px 0 0;color:#56708a;font-size:10px; }
.upgrade-list { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1; }
.upgrade-item { position:relative;min-height:58px;padding:6px;border:1px solid #b7d1e2;border-radius:9px;background:#eef8ff;text-align:center; }
.upgrade-item strong { display:block;font-size:10px; }
.upgrade-item small { display:block;margin:2px 0;color:#56708a;font-size:8px; }
.upgrade-item button { padding:4px 7px;border:0;border-radius:6px;background:#1e76b7;color:white;font-size:8px;font-weight:900;cursor:pointer; }
.upgrade-pips { display:flex;justify-content:center;gap:3px;margin-bottom:3px; }
.upgrade-pips i { width:12px;height:4px;border-radius:3px;background:#c2d8e6; }
.upgrade-pips i.on { background:#ffbd27; }
.garage-heading { display:flex;justify-content:space-between;margin:15px 2px 8px;color:#315d7a;font-size:11px;text-transform:uppercase;letter-spacing:.7px; }
.car-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }
.car-card { position:relative;min-height:157px;padding:8px;border:2px solid #99bfd7;border-radius:13px;background:white;box-shadow:0 4px 0 rgba(49,93,126,.18);overflow:hidden; }
.car-card:nth-last-child(-n+4) { scroll-snap-align:end;scroll-margin-bottom:8px; }
.car-card.owned { border-color:#55ad77; }
.car-card.selected { border-color:#f2a91d;box-shadow:0 0 0 3px #ffdf75,0 4px 0 #bc7610; }
.car-card h4 { margin:3px 0 1px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.car-card p { height:25px;margin:0;color:#6b7f91;font-size:8px;line-height:1.35;overflow:hidden; }
.car-card button { width:100%;margin-top:5px;padding:5px;border:0;border-radius:7px;background:#1e76b7;color:white;font-size:8px;font-weight:900;text-transform:uppercase;cursor:pointer; }
.car-card button.buy { background:#e98224; }
.car-card button:disabled { opacity:.55;cursor:default; }
.garage-car-art { position:relative;height:58px;margin:-8px -8px 4px;background:linear-gradient(#9be4ff,#e7f7ff);overflow:hidden; }
.garage-car-svg { position:absolute;left:50%;top:0;width:118px;height:58px;overflow:visible;transform:translateX(-50%);filter:drop-shadow(0 1px 0 rgba(255,255,255,.65)); }
.car-price { position:absolute;right:7px;bottom:36px;color:#a15b00;font-size:8px;font-weight:900; }
.car-owned-ribbon { position:absolute;z-index:5;left:-31px;top:13px;width:104px;padding:4px 0;transform:rotate(-45deg);background:linear-gradient(#f04444,#b81324);box-shadow:0 2px 4px rgba(68,8,18,.35);color:white;font-size:9px;font-weight:1000;letter-spacing:1px;line-height:1;text-align:center;text-shadow:0 1px 0 #740818;pointer-events:none; }

.help-body { display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:28px 34px; }
.help-card { display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #9fc5dd;border-radius:14px;background:white;box-shadow:0 4px 0 rgba(49,93,126,.18); }
.help-card>span { display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;background:linear-gradient(#ffe65f,#ffae2a);color:#633514;font-size:20px;font-weight:1000; }
.help-card p { font-size:11px;line-height:1.4; }
.help-race { grid-column:1/-1;justify-self:center;margin-top:10px; }

.results-screen { display:grid;place-items:center;background:rgba(4,19,43,.84);backdrop-filter:blur(5px); }
.results-card { position:relative;width:660px;max-height:560px;padding:18px 28px;border:4px solid #fff;border-radius:22px;background:linear-gradient(#fafdff,#dff3ff);box-shadow:0 8px 0 #173f6b,0 20px 55px rgba(0,0,0,.55);color:var(--ink);text-align:center;overflow:auto; }
.results-card h2 { margin:2px 0 0;font-size:29px;color:#173f6b; }
.result-place { position:absolute;right:26px;top:17px;font-size:50px;font-weight:1000;font-style:italic;color:#f47b20;-webkit-text-stroke:2px #8f370c;text-shadow:0 4px 0 #f6ca36;transform:rotate(4deg); }
.result-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0 10px; }
.result-stats div { padding:7px;border:1px solid #a9cce1;border-radius:9px;background:#fff; }
.result-stats small { display:block;color:#5d8199;font-size:8px;font-weight:900;letter-spacing:1px; }
.result-stats strong { font-size:18px; }
.credit-award { display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border-radius:10px;background:#12325f;color:white; }
.credit-award small { color:#a9d9f5; }
.result-standings { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:9px 0; }
.standing-row { display:flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid #bdd5e5;border-radius:8px;background:white;text-align:left;font-size:10px; }
.standing-row.player { border-color:#e8a826;background:#fff9d9; }
.standing-row img { width:23px;height:23px;border-radius:50%;object-fit:cover;background:#d8ecf5; }
.standing-row strong { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.standing-row b { color:#3374a5; }
.result-actions { display:flex;justify-content:center;gap:8px; }
.result-actions .btn { padding:8px 13px;font-size:10px; }
.result-confetti { position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffd84d 0 3px,transparent 4px),radial-gradient(circle,#63d8ff 0 3px,transparent 4px),radial-gradient(circle,#f47b20 0 2px,transparent 3px);background-size:73px 89px,91px 71px,61px 97px;background-position:0 0,20px 30px,40px 12px;animation:confetti 8s linear infinite;opacity:.7; }
@keyframes confetti { to { background-position:0 600px,20px 630px,40px 612px; } }

.toast { position:absolute;z-index:20;left:50%;bottom:18px;transform:translate(-50%,20px);max-width:78%;padding:9px 14px;border-radius:9px;background:#10233e;color:white;box-shadow:var(--shadow);font-size:11px;font-weight:bold;opacity:0;pointer-events:none;transition:.2s; }
.toast.show { opacity:1;transform:translate(-50%,0); }

@media (max-width:620px) {
  .title-content { width:60%;left:4%;top:10%; }
  .title-logo { width:300px;height:170px; }
  .match-card { width:340px; }
  .match-card small { white-space:normal; }
  .title-actions { width:370px;gap:6px; }
  .title-actions .btn { padding-right:12px;padding-left:12px; }
  .car-grid { grid-template-columns:repeat(3,1fr); }
  .upgrade-shop { align-items:stretch;flex-direction:column; }
  .garage-body { height:calc(100% - 82px); }
  .quote-display { font-size:17px; }
}