@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');

:root {
  --yellow:#ffe600; --navy:#132b42; --ink:#101e2b; --muted:#93a5b1;
  --font:'Barlow',Arial,sans-serif; --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden; }
body { background:#07121b;color:#f5f7f6;font-family:var(--font);font-size:24px; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit;cursor:pointer; }
button:focus-visible,a:focus-visible { outline:5px solid:#64c6ff;outline-offset:7px; }
button:disabled { cursor:default; }
svg { display:block; }
[hidden] { display:none!important; }
.svg-defs { position:absolute;width:0;height:0;overflow:hidden; }
.game-shell {
  --viewport-scale:1;
  position:absolute;left:50%;top:50%;width:1080px;height:1920px;
  transform:translate(-50%,-50%) scale(var(--viewport-scale));transform-origin:center;
  overflow:hidden;background:var(--ink);box-shadow:0 0 100px #0006;
}
main { width:1080px;height:1752px; }
.screen { width:1080px;height:1752px;position:relative;overflow:hidden; }

.topbar { height:168px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:var(--yellow);color:var(--navy);border-bottom:2px solid:#a99e10;position:relative;z-index:5;gap:24px; }
.brand { display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--navy); }
.brand svg { width:132px;height:90px; }
.brand span { font-size:43px;font-weight:700;line-height:.84;letter-spacing:-1.8px; }
.topbar-center { display:flex;align-items:center;gap:15px;font:700 34px/1.15 var(--display);letter-spacing:1px;max-width:370px; }
.status-dot { width:11px;height:11px;border-radius:50%;background:var(--yellow);display:inline-block;box-shadow:0 0 14px #ffe60065;flex-shrink:0; }
.topbar-center .status-dot { background:var(--navy);box-shadow:none; }
.topbar-actions { display:flex;align-items:center;gap:19px; }
.challenge-label { max-width:140px;font:700 17px/1.5 var(--font);letter-spacing:1px; }
.sound-button { width:64px;height:64px;flex-shrink:0;background:none;border:2px solid:#17304740;border-radius:50%;display:grid;place-items:center;color:var(--navy); }
.sound-button:hover { background:#fff6; }
.sound-button svg { width:34px;height:34px; }
.eyebrow { font:600 20px/1.5 var(--font);letter-spacing:3px;color:#a6bac7;display:flex;align-items:center;gap:16px; }

.hero { height:1280px;position:relative;overflow:hidden;border-bottom:2px solid:#ffffff15; }
.hero-art { position:absolute;left:0;right:0;top:315px;bottom:0;background:url('assets/capa.png') 65% center/cover; }
.hero-shade { position:absolute;inset:0;background:linear-gradient(180deg,#0b1927 0%,#0b1927 18%,#0b1927a6 43%,#0b19270a 69%,#0b1927f5 100%),linear-gradient(90deg,#0b19278a,transparent 70%); }
.hero-copy { position:relative;z-index:1;padding:70px 70px 0;width:100%;height:100%; }
.hero .eyebrow { color:#c2d2dc;font-size:19px;letter-spacing:2.5px; }
.hero h1 { font:800 160px/.9 var(--display);letter-spacing:-2px;margin:45px 0 26px;text-transform:uppercase; }
.hero h1 span { color:var(--yellow); }
.hero-copy>p { color:#cfdae0;font-size:29px;line-height:1.55;font-weight:400;margin:0; }
.hero-cta { position:absolute;left:70px;right:70px;bottom:143px;display:flex;align-items:center;gap:32px; }
.primary-button { background:var(--yellow);border:0;border-radius:7px;color:var(--navy);height:108px;padding:0 40px;font:800 34px var(--display);letter-spacing:1.6px;display:flex;align-items:center;justify-content:center;gap:45px;box-shadow:0 7px 0 #bfa500;transition:background .2s,transform .2s; }
.primary-button:hover { background:#fff065;transform:translateY(-3px); }
.primary-button:active { transform:translateY(3px);box-shadow:0 3px 0 #bfa500; }
.primary-button svg { width:43px;height:43px; }
.hero-cta .primary-button { width:635px; }
.time-chip { display:flex;align-items:center;gap:15px;color:#e5edf0; }
.time-chip>b { font:600 77px var(--display); }
.time-chip>span { font:600 17px/1.6 var(--font);letter-spacing:1px; }
.hero-hint { position:absolute;left:70px;bottom:61px;display:flex;align-items:center;gap:13px;font-size:20px;color:#93a8b6; }
.key-mini { display:grid;place-items:center;min-width:43px;height:40px;border:2px solid:#7790a044;background:#233e4c44;border-radius:5px;font-size:24px;color:#c6d3da; }
.hero-hint .key-mini:nth-of-type(3),.hero-hint .key-mini:nth-of-type(4) { margin-left:16px; }
.space-key { font-size:18px;padding:0 12px; }
.hero-tag { position:absolute;right:42px;top:22px;display:flex;align-items:center;gap:13px;font-size:15px;font-weight:600;letter-spacing:1.3px;color:#8faab9; }
.hero-tag>b { margin-left:9px;font:700 27px var(--display);color:var(--yellow); }
.hero-sticker { position:absolute;bottom:305px;right:44px;padding:18px 24px;background:#0b1b29df;border:2px solid:#94aaba40;border-radius:7px;display:flex;align-items:center;gap:21px;font-size:17px;letter-spacing:1px;line-height:1.8;color:#bbcad3;backdrop-filter:blur(10px); }
.hero-sticker svg { width:46px;height:46px;color:var(--yellow); }
.hero-sticker b { color:#fff; }
.how-strip { height:376px;padding:25px 70px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:#132634; }
.how-title { display:none; }
.how-item { display:flex;align-items:center;gap:29px;min-height:92px; }
.step-number { font:500 58px var(--display);color:#597182;border-right:2px solid:#51677750;padding-right:26px;width:86px;flex-shrink:0; }
.how-item b { font:600 27px var(--font); }
.how-item p { margin:7px 0 0;font-size:21px;color:#93a9b6; }
.start-footer { height:96px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 55px;color:#788e9c;font-size:16px;line-height:1.5;letter-spacing:.6px; }
.start-footer span:first-child { max-width:450px; }

.game-screen { padding:44px 38px 40px;display:flex;flex-direction:column;background:linear-gradient(#101e2bea,#152c3cea),url('assets/capa.png') 65% center/cover; }
.game-heading { width:100%;height:116px;margin:0 0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0; }
.game-heading .eyebrow { font-size:17px;letter-spacing:2px; }
.game-heading h2 { font:600 46px/1.1 var(--display);letter-spacing:.2px;margin:10px 0 0;color:#f6f8f9; }
.game-heading h2 span { color:var(--yellow); }
.game-layout { display:grid;grid-template-columns:180px 580px 196px;gap:24px;width:1004px;align-items:start; }
.metrics,.operations { display:flex;flex-direction:column;gap:24px; }
.metric { background:linear-gradient(140deg,#253e4e,#152d3d);border:2px solid:#5d798940;border-radius:10px;padding:26px 18px;position:relative;box-shadow:0 8px 18px #0002;overflow:hidden; }
.metric>span,.metric>div>span { font:600 17px/1.5 var(--font);letter-spacing:1px;color:#b2c4ce; }
.metric strong { font:700 72px/1.2 var(--display);display:block;color:var(--yellow);letter-spacing:0;margin-top:11px;font-variant-numeric:tabular-nums;white-space:nowrap; }
.metric small { display:block;font-size:17px;line-height:1.6;color:#7996a9;margin-top:7px; }
.score-metric { border-top:4px solid var(--yellow); }
.timer-metric>div:first-child { display:flex;align-items:center;justify-content:space-between; }
.timer-metric .clock-icon { display:none; }
.timer-metric strong { font-size:60px;color:#fff; }
.timer-track { height:7px;background:#0c1e2d;margin-top:23px;border-radius:10px;overflow:hidden; }
.timer-track i { display:block;width:100%;height:100%;background:var(--yellow);transition:width .1s linear; }
.timer-metric.urgent { border-color:#fa7845; }
.timer-metric.urgent strong { color:#ff9467; }
.timer-metric.urgent .timer-track i { background:#ff9467; }
.compact-metric strong { font-size:66px;color:#f3f7f8; }
.mission { padding:23px 14px 19px;border:2px dashed #67809250;border-radius:9px;margin-top:4px;text-align:center; }
.small-tag { font:600 16px var(--font);letter-spacing:1.5px;color:#8aa3b2; }
.mission svg { width:142px;height:90px;margin:22px auto 10px; }
.mission p { font:400 22px/1.5 var(--font);color:#91a9b7;margin:10px 0; }
.mission b { color:#e1e9ed;font-weight:500; }
.board-column { width:580px; }
.board-top,.board-bottom { display:flex;align-items:center;justify-content:space-between;font:500 14px var(--font);letter-spacing:1.2px;color:#91a9b7;height:44px; }
.board-top i { width:8px;height:8px;background:var(--yellow);display:inline-block;border-radius:50%;margin-right:10px; }
.board-frame { padding:14px;border:2px solid:#e0b815;border-radius:14px;background:linear-gradient(125deg,#567081,#152b3b 12%,#223c4d 90%,#728793);box-shadow:0 0 0 6px #0a1925,0 22px 55px #0006;position:relative; }
.board-frame:before { content:'';inset:7px;position:absolute;pointer-events:none;border:2px solid:#93aab740;border-radius:9px; }
#board { display:block;width:100%;height:auto;background:#0d1e2a;border:2px solid:#08141e;box-shadow:inset 0 0 30px #000;border-radius:5px;touch-action:none; }
.board-bottom { height:46px;color:#6c899b;font-size:14px; }
.board-message { position:absolute;top:48%;left:14px;right:14px;padding:27px 12px;text-align:center;color:var(--navy);background:#ffe600ef;font:800 43px var(--display);letter-spacing:1.5px;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .2s,transform .2s; }
.board-message.visible { opacity:1;transform:scale(1); }

.next-panel,.dispatch-panel { background:#1d3545;border:2px solid:#7591a341;border-radius:10px;overflow:hidden;box-shadow:0 8px 18px #0002; }
.panel-title { min-height:69px;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#152b3b;border-bottom:2px solid:#47647840;font:600 17px/1.5 var(--font);letter-spacing:1px;color:#c5d6e0;gap:10px; }
.panel-title>svg { width:25px;height:25px;flex-shrink:0;color:#647f91; }
#next { display:block;width:192px;height:140px;margin:14px auto; }
.next-panel>p { font-size:18px;line-height:1.5;color:#8ca4b3;text-align:center;margin:0 17px 24px; }
.dispatch-panel .panel-title { align-items:flex-start;flex-direction:column;gap:8px; }
.live-label { font-size:13px;color:#8dbca0;display:flex;gap:8px;align-items:center;letter-spacing:1px; }
.live-label i { width:8px;height:8px;background:#8ecba0;border-radius:50%; }
.dispatch-stage { height:270px;position:relative;overflow:hidden;background:linear-gradient(#30495c 0%,#233f53 76%,#152a38 76%); }
.gate-sign { position:absolute;left:15px;top:23px;display:flex;align-items:center;gap:12px;color:#152d42;background:var(--yellow);border:3px solid:#cebc00;border-radius:3px;padding:6px 8px;font:700 24px var(--display);letter-spacing:1px;z-index:2; }
.gate-sign span { font-size:15px;letter-spacing:2px; }
.gate { position:absolute;left:15px;top:78px;width:137px;height:145px;border:7px solid:#547080;border-bottom:0;background:#081926;overflow:hidden;box-shadow:5px 0 0 #132737; }
.gate-inside { position:absolute;inset:0;background:linear-gradient(90deg,#070f16,#1b3142); }
.gate-inside:before { content:'';position:absolute;left:15px;top:82px;width:80px;height:65px;background:repeating-linear-gradient(90deg,#987941 0 35px,#685124 36px 40px);border-top:3px solid:#b6985a; }
.shutter { position:absolute;inset:0;background:repeating-linear-gradient(#405464 0 9px,#293f50 10px 13px);border-bottom:7px solid:#a7b9c1;transition:transform .4s ease;z-index:2; }
.dispatch-stage.departing .shutter { transform:translateY(-94%); }
.gate-light { position:absolute;top:76px;left:162px;width:10px;height:15px;border-radius:4px;background:#dd9e2c;box-shadow:0 0 12px #dd9e2c66; }
.departing .gate-light { background:#8edd78;box-shadow:0 0 16px #8edd78; }
.road { position:absolute;bottom:0;left:0;right:0;height:48px;background:linear-gradient(#53606a,#35444f);border-top:4px solid:#111f2b; }
.road:after { content:'';position:absolute;left:0;right:0;top:28px;height:3px;background:repeating-linear-gradient(90deg,#d7ba35 0 36px,transparent 36px 65px);transform:skew(-35deg); }
.gate-post { position:absolute;left:153px;bottom:37px;height:48px;width:10px;background:repeating-linear-gradient(135deg,#dcca44 0 7px,#172b3d 7px 14px);z-index:4; }
.dispatch-trucks { position:absolute;inset:0;overflow:hidden; }
.delivery-truck { position:absolute;left:7px;bottom:32px;width:187px;z-index:3;animation:drive-out 2.2s both ease-in-out;filter:drop-shadow(0 6px 5px #0004); }
@keyframes drive-out { 0%{transform:translateX(-180px);opacity:0}18%{transform:translateX(-170px);opacity:1}45%{transform:translateX(0)}65%{transform:translateX(35px)}100%{transform:translateX(300px)} }
.dispatch-caption { font-size:18px;line-height:1.5;color:#8da4b4;text-align:center;min-height:88px;padding:15px 13px;display:grid;place-items:center;border-bottom:2px solid:#55708033; }
.dispatch-caption.active { color:var(--yellow); }
.shipped { padding:25px 17px; }
.shipped span { display:block;font:600 16px/1.6 var(--font);color:#a0b7c5;letter-spacing:.8px; }
.shipped strong { display:block;font:600 68px var(--display);color:var(--yellow); }
.shipped>svg { width:145px;height:78px;margin:10px auto 0; }
.tip { display:flex;align-items:flex-start;gap:13px;padding:7px 2px; }
.tip>span { font-size:35px;color:#608398; }
.tip p { margin:5px 0;font:400 19px/1.7 var(--font);color:#7895a7; }
.tip b { color:#bacbd7; }

.controls { display:flex;align-items:stretch;justify-content:center;gap:15px;margin: auto 0 0;padding-top:32px;border-top:2px solid:#68849324;width:100%;position:static; }
.controls-label { display:none; }
.controls>button { height:123px;min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:2px solid:#64829750;background:#203b4c;color:#d8e3e9;border-radius:8px;touch-action:none;user-select:none; }
.controls>button:hover { background:#2e4b5e;border-color:#b2c7d160; }
.controls>button:active { background:#4b6779; }
.controls>button>span { font-size:43px;line-height:1; }
.controls small { font:600 18px var(--font);letter-spacing:1px; }
.controls em { font-style:normal;color:#61798a;margin-left:6px;font-size:15px; }
.controls .drop-control { background:var(--yellow);color:var(--navy);border-color:#ffe600;flex:1.35; }
.controls .drop-control:hover { background:#fff16c; }
.controls .drop-control em { display:none; }

.result-screen { display:grid;place-items:center;padding:60px 64px; }
.result-art { position:absolute;inset:0;background:url('assets/capa.png') 60% center/cover;filter:blur(9px);transform:scale(1.04); }
.result-shade { position:absolute;inset:0;background:#0b1a29db; }
.result-card { position:relative;text-align:center;z-index:1;width:900px;padding:46px 54px;background:linear-gradient(135deg,#233c4de8,#122c3bea);border:2px solid:#8ba4b645;border-top:5px solid:#ffe600;border-radius:14px;box-shadow:0 45px 95px #0006;backdrop-filter:blur(20px); }
.result-card>.eyebrow { justify-content:center;color:#bacbd6;font-size:21px; }
.result-truck svg { width:280px;height:160px;margin:35px auto 25px; }
.result-card h1 { font:700 84px/1.04 var(--display);margin:0 0 25px;letter-spacing:-.5px; }
.result-card h1 span { color:var(--yellow); }
.result-card>p { font-size:25px;line-height:1.6;color:#a3b6c4;margin:0; }
.result-score { margin:38px 0 32px;background:#0d2130;padding:30px;border:2px solid:#5d7b8e33;border-radius:9px; }
.result-score>span { display:block;font:600 21px var(--font);letter-spacing:2.5px;color:#a3b8c6; }
.result-score strong { display:block;font:700 160px/1.1 var(--display);color:var(--yellow);margin:8px 0;font-variant-numeric:tabular-nums; }
.result-score small { font-size:19px;letter-spacing:1.8px;color:#8fa9ba; }
.result-stats { display:flex;justify-content:center;gap:45px;margin:33px 0; }
.result-stats>div { flex:1; }
.result-stats>div+div { border-left:2px solid:#90a7b42e; }
.result-stats strong { display:block;font:600 65px var(--display);color:#f2f5f7; }
.result-stats span { font-size:18px;letter-spacing:1px;color:#98afc0; }
.result-card .result-message { color:#c4d3dc;min-height:45px;margin-bottom:33px; }
.result-card .primary-button { width:100%;height:104px;font-size:33px;gap:45px; }
.result-truck.show-dispatch { width:330px;margin:25px auto;border:2px solid:#6f8a9d44;border-radius:9px;overflow:hidden; }
.result-truck .dispatch-stage { height:230px; }
.result-truck .delivery-truck { width:240px;height:auto;margin:0; }
.result-truck .gate { width:190px; }
.result-truck .gate-light { left:215px; }
.result-truck .gate-post { left:205px; }
.board-frame.flash { animation:board-glow .7s; }
@keyframes board-glow { 0%,100%{box-shadow:0 0 0 6px #0a1925,0 22px 55px #0006}35%{box-shadow:0 0 0 6px #ffe60033,0 0 65px #ffe60055} }
@media(prefers-reduced-motion:reduce) { .primary-button{transition:none}.board-frame.flash{animation:none}.result-art{filter:none} }