@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&family=Inter:wght@400;600;800&display=swap');
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#091c29;color:#e8f9f9;font-family:Inter,Arial,sans-serif}#game{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 1px 8px #102638}.brand{position:absolute;top:22px;left:30px;font:900 26px 'Barlow Condensed',sans-serif;letter-spacing:.15em;color:#ffd078}.brand small{display:block;font:600 10px Inter;letter-spacing:.26em;color:#d9f6fc;margin-top:2px}#status{position:absolute;top:29px;right:30px;font:700 11px Inter;letter-spacing:.12em;color:#e5faff;background:#133342bb;border:1px solid #69dfe04f;padding:10px 13px}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;color:#c4f9f8}#stats{position:absolute;left:30px;bottom:78px;display:flex;gap:11px;align-items:center}#stats span{padding:12px 16px;background:#0b2537dc;border:1px solid #61d3d64a;font:800 12px Inter;letter-spacing:.08em}#cells{display:flex;align-items:center;gap:5px}#cells b{width:25px;height:10px;background:#5cebef;display:inline-block;box-shadow:0 0 10px #45dff0}#cells b.empty{background:#395666;box-shadow:none}#hint{position:absolute;left:30px;bottom:28px;font:600 11px Inter;letter-spacing:.06em;color:#e6f5ed;background:#0b2537ad;padding:10px}#menu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:7vw;background:linear-gradient(90deg,#061a25f5 0%,#061a25d8 34%,#061a2570 64%,transparent 100%);transition:opacity .25s}#menu.hidden{opacity:0;pointer-events:none}.eyebrow{color:#59e1e6;font:800 13px Inter;letter-spacing:.4em}h1{font:900 clamp(70px,12vw,180px)/.77 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.025em;margin:24px 0;color:#f0f4e8;text-shadow:0 10px 30px #08121a}h1 em{color:#ffba4c;font-style:normal}#menu p{font:500 clamp(18px,2.2vw,27px) 'Barlow Condensed',sans-serif;letter-spacing:.09em;color:#dff6f4;margin:28px 0 36px}.actions{display:flex;gap:14px}.actions button{border:0;background:#ffb84a;color:#142536;padding:16px 24px;font:900 16px 'Barlow Condensed';letter-spacing:.14em;cursor:pointer}.actions button+button{background:transparent;border:1px solid #6fe4e7;color:#b9f7f5}.actions button:hover{filter:brightness(1.2)}.notes{margin-top:30px;color:#acc5cb;font:600 11px Inter;letter-spacing:.1em}#touch{display:none}@media(max-width:750px){.brand{top:12px;left:15px;font-size:21px}#status{top:53px;left:15px;right:auto;font-size:9px}#stats{left:12px;bottom:104px;gap:3px;flex-wrap:wrap}#stats span{padding:7px;font-size:9px}#hint{display:none}#menu{padding:10vw}h1{font-size:20vw}.actions{flex-direction:column}#touch{display:flex;position:absolute;bottom:15px;left:15px;right:15px;justify-content:space-between;pointer-events:none}#touch>*{pointer-events:auto}#stick{width:75px;height:75px;border-radius:50%;border:2px solid #90e4e7aa;background:#163b4aaa;display:grid;place-items:center;font-size:24px}.touch-actions{display:flex;gap:5px;align-items:end}.touch-actions button{width:64px;height:64px;border-radius:50%;border:1px solid #a2f1e6;background:#123a4dd9;color:white;font-weight:800;font-size:10px}}

.hero-choice{display:flex;flex-direction:column;gap:8px;color:#58e1e6;font:800 11px Inter;letter-spacing:.18em;margin:-5px 0 24px}.hero-choice select{appearance:none;min-width:260px;padding:13px 14px;background:#163645;color:#e9fcf5;border:1px solid #6bdfe5;font:700 16px "Barlow Condensed",sans-serif;letter-spacing:.06em}.hero-choice option{background:#163645;color:white}

#prompt{position:absolute;left:50%;top:57%;transform:translateX(-50%);font:800 12px Inter;letter-spacing:.12em;color:#fff4c7;background:#163646d9;padding:8px 12px;min-height:0}#prompt:empty{display:none}#forecast{position:absolute;right:30px;top:77px;color:#80edf1;font:700 11px Inter;letter-spacing:.1em;background:#123442bc;padding:9px}#forecast:empty{display:none}@media(max-width:750px){#forecast{top:100px;left:15px;right:auto;font-size:9px}#prompt{top:57%;font-size:10px;white-space:nowrap}}

#minimap{position:absolute;right:30px;top:84px;width:220px;height:220px;border:1px solid #8ce7dcaa;box-shadow:0 8px 24px #08212b88;background:#123744cc}#forecast{top:314px}@media(max-width:750px){#minimap{right:12px;top:12px;width:126px;height:126px}#forecast{top:144px;right:12px;left:auto;font-size:8px;max-width:126px}#status{max-width:calc(100% - 158px)}}
@media(max-width:750px){#touch{align-items:end;bottom:max(12px,env(safe-area-inset-bottom));touch-action:none}#stick{flex:none;touch-action:none}.touch-actions{display:flex;flex-direction:column;align-items:end;gap:5px}.touch-row{display:flex;gap:4px}.touch-row button{width:53px;height:35px;border-radius:8px;font-size:8px;touch-action:none}.touch-row.primary button{width:64px;height:54px;border-radius:50%;font-size:10px}.touch-row button:active{background:#38b9c3}#stats{bottom:165px}#prompt{top:48%}}
@media(pointer:coarse) and (min-width:751px){#touch{display:flex;position:absolute;left:24px;right:24px;bottom:max(16px,env(safe-area-inset-bottom));justify-content:space-between;align-items:end;pointer-events:none;touch-action:none}#touch>*{pointer-events:auto}#stick{width:95px;height:95px;border-radius:50%;border:2px solid #90e4e7aa;background:#163b4aaa;display:grid;place-items:center;touch-action:none}.touch-actions{display:flex;flex-direction:column;align-items:end;gap:5px}.touch-row{display:flex;gap:5px}.touch-row button{width:66px;height:40px;border:1px solid #a2f1e6;border-radius:8px;background:#123a4dd9;color:white;font-weight:800;font-size:9px;touch-action:none}.touch-row.primary button{width:72px;height:60px;border-radius:50%}#stats{bottom:210px}#hint{display:none}}
.private-play{display:flex;align-items:end;flex-wrap:wrap;gap:9px;max-width:720px;margin-top:20px;color:#b6dce2;font:700 12px Inter;letter-spacing:.1em}.private-play label{display:flex;flex-direction:column;gap:7px;color:#65e3e9}.private-play select,.private-play input{background:#102d3b;border:1px solid #5aadb7;color:#ebf8f4;padding:11px 13px;font:700 14px 'Barlow Condensed',sans-serif;letter-spacing:.06em}.private-play input{width:128px;text-transform:uppercase}.private-play button,#invite button{background:#123f4d;border:1px solid #65dce4;color:#d9faf8;padding:11px 15px;font:800 13px 'Barlow Condensed',sans-serif;letter-spacing:.09em;cursor:pointer}.private-play button:hover,#invite button:hover{background:#236578}#invite{position:absolute;left:30px;top:78px;display:flex;align-items:center;gap:10px;padding:6px 8px;background:#082736df;color:#9ceff0;font:800 11px Inter;letter-spacing:.11em}#invite[hidden]{display:none}@media(max-width:750px){#menu{overflow-y:auto;justify-content:flex-start;padding-top:58px}#menu p{margin:17px 0}.private-play{gap:7px;margin-top:14px}.private-play select,.private-play input{padding:8px}.private-play button{padding:9px}#invite{left:12px;top:79px;max-width:calc(100% - 150px);font-size:9px;flex-wrap:wrap}}
.in-menu #hud>:not(#status){visibility:hidden}.in-menu #menu{background:linear-gradient(90deg,#061a25f5 0%,#061a25df 38%,#061a2540 58%,transparent 70%)}

/* The character card stays readable without covering the full-height preview. */
#menu{padding:5vh 7vw;overflow-y:auto}#menu h1{font-size:clamp(62px,8vw,112px);margin:18px 0}#menu>p{margin:12px 0 22px;font-size:22px}.hero-choice{margin:0 0 12px}.pilot-card{max-width:470px;margin-bottom:20px}.pilot-card h2{font:700 24px 'Barlow Condensed',sans-serif;color:#ffd078;margin:0 0 6px}#menu .pilot-card p{font:400 13px/1.55 Inter,sans-serif;letter-spacing:0;margin:0 0 10px;color:#c9dce0}#pilot-kit{font:600 11px/1.6 Inter,sans-serif;color:#79e8dd;max-width:450px}#cosmetic-choice[hidden]{display:none}#cosmetic-choice select{padding:8px 12px}.notes{margin-top:18px}.in-menu #touch{display:none}@media(max-height:800px) and (min-width:751px){#menu{justify-content:flex-start;padding-top:30px}#menu h1{font-size:72px}.pilot-card{margin-bottom:10px}.private-play{margin-top:12px}}@media(max-width:750px){#menu{padding:42px 7vw 28px}#menu h1{font-size:16vw}.pilot-card{max-width:90%}.in-menu #menu{background:linear-gradient(90deg,#061a25f5,#061a25a0)}.hero-choice select{max-width:86vw}}