:root {
  --navy: #071c2f;
  --navy-2: #0c2e4c;
  --blue: #65c7ff;
  --gold: #ffbf26;
  --cream: #fffaf1;
  --line: rgba(255,255,255,.24);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--navy); font-family: "DM Sans", system-ui, sans-serif; color: white; }
button, a { font: inherit; }
button { color: inherit; }
#app, #game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#game-canvas { display: block; background: linear-gradient(#9bdcff, #eefaff 55%, #8ab7c8); }
.game-flash { position:fixed; inset:0; z-index:29; pointer-events:none; opacity:0; background:white; mix-blend-mode:screen; transition:opacity .22s; }
.game-flash.active { opacity:.42; transition:none; }
.lane-warning { position:fixed; z-index:8; left:50%; top:24%; transform:translate(-50%,-12px) scale(.92); padding:9px 17px; border:2px solid #ffd239; border-radius:99px; background:rgba(31,24,5,.82); color:#ffdc55; font-size:10px; font-weight:900; letter-spacing:.16em; opacity:0; visibility:hidden; pointer-events:none; box-shadow:0 0 25px rgba(255,190,20,.35); transition:.2s; }
.lane-warning.active { opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); animation:warningPulse .6s infinite alternate; }
#game-canvas.camera-impact { animation:cameraImpact .42s cubic-bezier(.2,.8,.2,1); }
body.boosting .vignette { opacity:.82; background:radial-gradient(ellipse at center,transparent 35%,rgba(0,145,255,.24) 70%,rgba(0,20,60,.7)); }
@keyframes cameraImpact { 0%{transform:translate(0)} 18%{transform:translate(-9px,5px) rotate(-.35deg)} 34%{transform:translate(8px,-4px) rotate(.3deg)} 55%{transform:translate(-5px,2px)} 75%{transform:translate(3px,-1px)} 100%{transform:translate(0)} }
@keyframes warningPulse { from{box-shadow:0 0 10px rgba(255,190,20,.25)} to{box-shadow:0 0 32px rgba(255,190,20,.75)} }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,18,31,.33), transparent 27%, transparent 75%, rgba(0,18,31,.18)), linear-gradient(0deg, rgba(3,18,31,.55), transparent 35%); opacity: 0; transition: opacity .5s; }
body.playing .vignette { opacity: 1; }

.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; overflow: auto; background: radial-gradient(circle at 78% 43%, rgba(75,177,231,.17), transparent 34%), linear-gradient(115deg, rgba(4,20,34,.97) 0 42%, rgba(7,29,48,.82) 62%, rgba(5,20,33,.95)); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.screen--active { opacity: 1; visibility: visible; }
.screen::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to right, black, transparent 75%); }
.brandbar { position: relative; min-height: 90px; padding: 22px clamp(24px,4vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.11); }
.brand { display:flex; align-items:center; gap:14px; color:white; text-decoration:none; font-weight:800; font-size:clamp(17px,1.5vw,22px); letter-spacing:.13em; }
.brand b { color:var(--gold); }
.brand-mark { width:43px; height:43px; display:flex; justify-content:center; align-items:flex-end; gap:3px; border:2px solid #b3e7ff; border-radius:50%; box-shadow:inset 0 0 0 3px rgba(36,139,199,.4); }
.brand-mark span { width:5px; background:#e8f8ff; border-radius:3px 3px 0 0; }
.brand-mark span:nth-child(1) { height:15px; }.brand-mark span:nth-child(2) { height:24px; }.brand-mark span:nth-child(3) { height:32px; }
.best-pill { display:grid; grid-template-columns:auto auto; column-gap:10px; align-items:center; background:rgba(4,17,29,.65); border:1px solid var(--line); border-radius:14px; padding:10px 16px; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.best-pill span { grid-row:1/3; font-size:24px; }.best-pill small { color:#86b5d2; font-size:9px; letter-spacing:.16em; }.best-pill strong { font-size:17px; }
.menu-content { position:relative; z-index:1; flex:1; display:grid; grid-template-columns:minmax(310px,.72fr) minmax(520px,1.28fr); gap:clamp(30px,5vw,90px); align-items:center; width:min(1450px,92vw); margin:0 auto; padding:48px 0 36px; }
.menu-copy { max-width:560px; }
.eyebrow { font-size:11px; letter-spacing:.25em; font-weight:800; color:#91c5e5; display:flex; gap:10px; align-items:center; }
.eyebrow span { width:28px; height:2px; background:var(--gold); }
.menu-copy h1 { font-family:"Playfair Display", Georgia, serif; font-size:clamp(56px,6vw,96px); line-height:.86; margin:24px 0 28px; letter-spacing:-.04em; }
.menu-copy h1 em { color:var(--gold); font-weight:700; }
.intro { max-width:480px; color:#b8ccda; font-size:clamp(14px,1.2vw,18px); line-height:1.7; }
.control-hint { display:flex; flex-wrap:wrap; gap:22px; color:#a5bfd0; font-size:12px; margin-top:35px; }
.control-hint span { display:flex; align-items:center; gap:6px; }
kbd { min-width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.26); border-bottom-width:3px; border-radius:7px; color:white; background:rgba(255,255,255,.08); }
.character-picker { display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; }
.character-card { position:relative; height:min(55vh,570px); min-height:410px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:#dce8ea; padding:0; cursor:pointer; text-align:left; box-shadow:0 25px 50px rgba(0,0,0,.26); transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.character-card:hover { transform:translateY(-6px); }
.character-card.selected { border:3px solid var(--gold); box-shadow:0 0 0 6px rgba(255,191,38,.14), 0 30px 60px rgba(0,0,0,.34); transform:translateY(-8px); }
.card-art { position:absolute; inset:0; background-repeat:no-repeat; background-size:auto 100%; background-position:9% center; transform:scale(1.02); transition:transform .6s; }
.character-card:hover .card-art { transform:scale(1.07); }
.phileas-art { background-image:url("assets/phileas-sheet.png"); }
.fogg-art { background-image:url("assets/fogg-sheet.png"); }
.card-shine { position:absolute; inset:0; background:linear-gradient(130deg, transparent 42%, rgba(255,255,255,.2) 52%, transparent 61%), linear-gradient(0deg, rgba(2,14,24,.94), transparent 47%); background-size:220% 100%,100% 100%; background-position:120% 0,0; transition:background-position .7s; }
.character-card:hover .card-shine { background-position:-120% 0,0; }
.selected-tag { position:absolute; right:14px; top:14px; opacity:0; transform:translateY(-8px); padding:8px 10px 8px 13px; border-radius:99px; color:#192329; background:var(--gold); font-size:9px; letter-spacing:.16em; font-weight:800; transition:.3s; }
.selected-tag span { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:4px; border-radius:50%; background:#142d40; color:white; }
.selected .selected-tag { opacity:1; transform:none; }
.model-status { position:absolute; top:15px; left:15px; z-index:2; max-width:58%; padding:8px 11px; border-radius:99px; background:rgba(4,22,35,.82); border:1px solid rgba(255,255,255,.3); color:#d8efff; font-size:8px; letter-spacing:.13em; font-weight:800; backdrop-filter:blur(8px); transition:.3s; }
.model-status.ready { color:#172a20; background:#9fe56f; border-color:#d8ffc0; }
.model-status.error { color:white; background:#a43a37; border-color:#ffaaa5; }
.card-copy { position:absolute; left:24px; right:20px; bottom:21px; text-shadow:0 2px 12px rgba(0,0,0,.8); }
.card-copy p { margin:0 0 2px; color:var(--gold); font-size:9px; letter-spacing:.22em; font-weight:800; }
.card-copy h2 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(30px,3vw,45px); margin:0; line-height:1.1; letter-spacing:.03em; }
.card-copy span { color:#d5e2ea; font-size:11px; }
.play-button { grid-column:1/3; border:0; background:linear-gradient(110deg,#f0a815,#ffd95f); color:#142335; min-height:82px; border-radius:18px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:0 28px; cursor:pointer; box-shadow:0 15px 35px rgba(255,179,26,.25); transition:transform .25s, filter .25s; text-align:left; font-weight:900; font-size:20px; letter-spacing:.04em; }
.play-button:hover { transform:translateY(-3px); filter:brightness(1.08); }
.play-button small { display:block; font-size:9px; letter-spacing:.22em; opacity:.6; margin-bottom:2px; }
.play-icon { display:grid; place-items:center; width:48px; height:48px; padding-left:3px; border-radius:50%; background:#132c40; color:white; box-shadow:0 6px 12px rgba(0,0,0,.25); }
.play-button i { font-style:normal; font-size:30px; transition:transform .25s; }.play-button:hover i { transform:translateX(5px); }
.menu-footer { position:relative; z-index:1; padding:15px clamp(24px,4vw,72px); display:flex; justify-content:space-between; color:#668da7; border-top:1px solid rgba(255,255,255,.1); font-size:9px; letter-spacing:.14em; }

.hud { position:fixed; z-index:5; inset:0; pointer-events:none; opacity:0; visibility:hidden; transition:.4s; }
.hud.active { opacity:1; visibility:visible; }
.hud button { pointer-events:auto; }
.hud-top { display:flex; justify-content:space-between; align-items:flex-start; padding:clamp(18px,3vw,38px); }
.glass-panel { background:linear-gradient(145deg,rgba(5,28,47,.88),rgba(9,46,75,.78)); border:1px solid rgba(196,231,255,.4); box-shadow:inset 0 0 0 2px rgba(4,16,28,.25),0 10px 30px rgba(0,0,0,.23); backdrop-filter:blur(12px); }
.icon-button { width:64px;height:64px;border-radius:17px;border:1px solid #d7efff;background:linear-gradient(150deg,#68b9e2,#164d70);box-shadow:inset 0 0 0 4px rgba(5,37,60,.45),0 8px 20px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer; }
.icon-button span { width:8px;height:26px;background:white;border-radius:3px;box-shadow:0 2px 0 #637c90; }
.run-stats { display:flex; align-items:center; border-radius:18px; padding:11px 22px; min-width:250px; }
.run-stats > div { display:grid; grid-template-columns:auto auto; align-items:center; column-gap:8px; }
.run-stats small { font-size:8px; letter-spacing:.17em; color:#a9cae0; font-weight:700; }.run-stats strong { font-size:22px; text-shadow:0 2px 2px #001526; }
.star { grid-row:1/3; color:var(--gold); font-size:31px; text-shadow:0 2px 0 #9d6100; }.stats-rule { width:1px;height:39px;background:rgba(255,255,255,.2);margin:0 20px; }
.wallet { display:grid; grid-template-columns:auto auto; gap:7px; position:relative; padding-right:74px; }
.currency { min-width:126px;height:48px;border-radius:14px;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:0 15px;font-size:19px; }
.coin-mini { display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:white;background:linear-gradient(#ffd84b,#f49d00);border:3px solid #ffed87;box-shadow:0 2px 0 #a65f00; }
.gem-mini { color:#63d9ff;font-size:26px;text-shadow:0 2px 0 #1776a8; }
.runner-portrait { position:absolute;right:0;top:0;width:68px;height:102px;border:2px solid #d9f2ff;border-radius:16px;background:#d7edf4;overflow:hidden;box-shadow:inset 0 0 0 4px #315e7c,0 7px 20px rgba(0,0,0,.3); }
#portrait-art { position:absolute;inset:0 0 25px;background-size:auto 220%;background-position:6% 22%; }
.runner-portrait>span { position:absolute;bottom:0;left:0;right:0;text-align:center;height:26px;line-height:26px;background:#14344f;font-weight:900; }
.mission-panel { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:min(420px,70vw); border-radius:20px; padding:13px 18px 15px; }
.mission-heading { text-align:center;display:flex;flex-direction:column;line-height:1.2; }.mission-heading span {color:var(--gold);font-size:9px;letter-spacing:.17em;font-weight:900;}.mission-heading strong{font-size:15px;}
.mission-row{display:flex;align-items:center;gap:12px;margin-top:9px}.mission-track{height:23px;position:relative;flex:1;border-radius:20px;background:#071c2c;border:2px solid #6a9dbc;overflow:hidden;box-shadow:inset 0 2px 5px #000}.mission-track i{position:absolute;left:2px;top:2px;bottom:2px;width:0;border-radius:20px;background:linear-gradient(90deg,#70c80b,#bdeb36);transition:width .3s}.mission-track b{position:absolute;inset:0;text-align:center;font-size:11px;line-height:19px;text-shadow:0 1px 3px #000}.mission-prize{color:white;font-weight:800;font-size:12px;white-space:nowrap}.mission-prize span{color:var(--gold);font-size:24px;vertical-align:middle;text-shadow:0 2px 0 #a16200}
.power-status{position:absolute;left:26px;bottom:30px;display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:14px;opacity:0;transform:translateY(20px);transition:.3s}.power-status.active{opacity:1;transform:none}.power-status>span{font-size:28px}.power-status small{display:block;color:#acd0e7;font-size:8px;letter-spacing:.12em}.power-status b{display:block;width:90px;height:5px;background:#092239;border-radius:5px;overflow:hidden}.power-status i{display:block;height:100%;width:100%;background:#ffca2c;transform-origin:left}
.modal-wrap{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(2,13,23,.58);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:.3s}.modal-wrap.active{opacity:1;visibility:visible}.modal{width:min(430px,90vw);border-radius:27px;padding:38px;text-align:center}.modal .eyebrow{justify-content:center;color:var(--gold);margin:0}.modal h2{font-family:"Playfair Display",Georgia,serif;font-size:42px;margin:10px 0}.modal>p:not(.eyebrow){color:#bdd0dd;margin:0 0 24px}.primary-button{width:100%;border:0;border-radius:14px;background:linear-gradient(110deg,#f0a815,#ffd95f);color:#132638;padding:18px;font-weight:900;letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 25px rgba(255,180,30,.22)}.text-button{margin-top:18px;border:0;background:transparent;color:#9fc2d8;cursor:pointer}.result-badge{display:inline-block;padding:6px 10px;border-radius:5px;background:var(--gold);color:#132638;font-size:8px;letter-spacing:.16em;font-weight:900}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.15);border-radius:15px;margin:25px 0 14px}.result-stats div{padding:14px 4px}.result-stats div+div{border-left:1px solid rgba(255,255,255,.15)}.result-stats small{display:block;color:#82aac4;font-size:8px;letter-spacing:.1em}.result-stats strong{display:block;font-size:19px;margin-top:4px}.new-best{color:var(--gold);font-weight:900;font-size:11px;letter-spacing:.14em;margin:0 0 18px;display:none}.new-best.show{display:block}.toast{position:fixed;z-index:30;left:50%;top:24%;transform:translate(-50%,-20px);background:#102d45;border:2px solid var(--gold);border-radius:99px;padding:13px 22px;font-size:12px;letter-spacing:.12em;font-weight:900;opacity:0;visibility:hidden;transition:.4s;box-shadow:0 13px 35px rgba(0,0,0,.3)}.toast span{color:var(--gold)}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sound-button{position:fixed;z-index:31;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(7,28,47,.7);color:white;cursor:pointer;backdrop-filter:blur(8px)}.sound-button.muted{opacity:.5}.mobile-controls{display:none}

@media (max-width: 900px) {
  .menu-content{grid-template-columns:1fr;align-items:start;padding-top:30px;gap:26px}.menu-copy{text-align:center;margin:auto}.eyebrow{justify-content:center}.intro{margin-inline:auto}.control-hint{justify-content:center}.character-picker{width:min(650px,100%);margin:auto}.character-card{height:380px;min-height:360px}.menu-copy h1{font-size:54px;margin:15px 0}.best-pill{display:none}.brandbar{min-height:70px;padding-block:13px}.menu-footer{display:none}
}
@media (max-width: 620px) {
  .screen{overflow:hidden}.brandbar{padding-inline:17px}.brand{font-size:14px}.brand-mark{width:36px;height:36px}.menu-content{width:92vw;padding:20px 0;display:flex;flex-direction:column;gap:17px}.menu-copy h1{font-size:42px}.menu-copy .intro{font-size:12px;line-height:1.45;margin-bottom:0}.control-hint{display:none}.character-picker{gap:10px}.character-card{height:42vh;min-height:280px;border-radius:16px}.card-copy{left:13px;bottom:13px}.card-copy h2{font-size:26px}.card-copy span{display:none}.selected-tag{right:8px;top:8px;font-size:0;padding:5px}.selected-tag span{margin:0}.play-button{min-height:61px;border-radius:14px;padding:0 17px;font-size:16px}.play-icon{width:38px;height:38px}.hud-top{padding:13px}.icon-button{width:50px;height:50px;border-radius:14px}.icon-button span{height:21px;width:6px}.run-stats{position:absolute;top:13px;left:50%;transform:translateX(-50%);min-width:180px;padding:8px 12px}.run-stats strong{font-size:16px}.run-stats small{font-size:6px}.star{font-size:22px}.stats-rule{height:28px;margin:0 10px}.wallet{padding-right:0;display:block}.currency{min-width:79px;height:36px;font-size:14px;margin-bottom:5px}.currency:nth-child(2){display:none}.coin-mini{width:23px;height:23px;font-size:11px}.runner-portrait{display:none}.mission-panel{bottom:80px;width:88vw}.power-status{left:13px;bottom:145px}.sound-button{right:14px;bottom:17px}.mobile-controls{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:16px}.mobile-controls button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(8,35,56,.64);font-size:24px;backdrop-filter:blur(8px)}
}
@media (max-height: 720px) and (min-width: 621px) {.character-card{height:440px;min-height:370px}.menu-content{padding-block:25px}.menu-copy h1{font-size:62px}.brandbar{min-height:70px;padding-block:12px}.menu-footer{display:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms!important}}