*{box-sizing:border-box}
:root{--navy:#071d55;--blue:#0c4eb3;--yellow:#ffc928;--orange:#ff8a00;--white:#fff}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#07142e;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;touch-action:none}
#app{position:relative;width:100%;height:100%}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.hud{position:absolute;z-index:8;inset:16px 16px auto 16px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}
.hud-left,.hud-right{display:flex;gap:9px;align-items:center}
.icon-btn,.hud-chip{border:2px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(9,29,78,.94),rgba(7,16,46,.94));color:#fff;border-radius:14px;box-shadow:0 7px 20px rgba(0,0,0,.28);font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.icon-btn{pointer-events:auto;width:52px;height:52px;font-size:24px;cursor:pointer}
.hud-chip{padding:13px 17px;font-size:18px;min-width:86px;text-align:center}
.hud-chip.small{font-size:14px}
.overlay{position:absolute;z-index:10;inset:0;display:none;align-items:center;justify-content:center;padding:28px;background:linear-gradient(135deg,rgba(4,15,49,.72),rgba(17,23,66,.45));backdrop-filter:blur(5px)}
.overlay.visible{display:flex}
#menu{justify-content:space-between;padding:7vw}
.logo-block{max-width:46vw;color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.28),0 10px 30px rgba(0,0,0,.35)}
.logo-block .kicker{display:inline-block;padding:7px 13px;border-radius:10px;background:#102f7b;border:2px solid rgba(255,255,255,.15);font-weight:1000;letter-spacing:.08em}
.logo-block h1{margin:12px 0 2px;font-size:clamp(54px,8vw,132px);line-height:.76;font-weight:1000;font-style:italic;letter-spacing:-.06em;color:#fff;-webkit-text-stroke:3px #06194f}
.logo-block h1 span{color:#ffb400;-webkit-text-stroke:3px #7d1400}
.logo-block p{display:inline-block;margin:18px 0 0;padding:8px 18px;border-radius:10px;background:#0d2a79;border:2px solid #fff3;font-size:clamp(14px,1.4vw,22px);font-weight:1000}
.menu-card{width:min(470px,44vw);padding:32px;border-radius:28px;background:linear-gradient(180deg,rgba(10,37,105,.96),rgba(5,20,63,.96));color:#fff;border:2px solid rgba(255,255,255,.18);box-shadow:0 25px 80px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,202,40,.08);text-align:center}
.menu-card.compact{width:min(420px,92vw)}
.hero-badge{width:78px;height:78px;margin:-72px auto 16px;border-radius:50%;display:grid;place-items:center;font-size:43px;background:radial-gradient(circle at 35% 30%,#ffe572,#ff9c00 65%,#bd4c00);border:5px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.menu-card h2{font-size:30px;margin:6px 0 8px}
.menu-card p{opacity:.9;line-height:1.5}
.primary,.secondary{width:100%;border:none;border-radius:18px;padding:17px 22px;font-size:22px;font-weight:1000;cursor:pointer;margin-top:14px;transition:.15s transform,.15s filter}
.primary{color:#5b2700;background:linear-gradient(#ffd94f,#ff9900);box-shadow:inset 0 -5px 0 rgba(145,57,0,.25),0 9px 22px rgba(0,0,0,.26)}
.secondary{color:#fff;background:linear-gradient(#19499c,#0a2d75);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.primary:hover,.secondary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.controls{display:flex;flex-direction:column;gap:5px;margin-top:18px;font-size:13px;opacity:.8}
#toast{position:absolute;z-index:15;left:50%;top:18%;transform:translate(-50%,-10px);padding:10px 18px;background:rgba(6,23,68,.92);color:#fff;border-radius:99px;border:2px solid rgba(255,255,255,.2);font-weight:900;opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:800px){
 #menu{justify-content:center;padding:20px}
 .logo-block{display:none}
 .menu-card{width:min(440px,94vw);padding:26px 22px}
 .hud{inset:8px 8px auto 8px}
 .hud-chip{padding:9px 10px;font-size:14px;min-width:auto}
 .icon-btn{width:44px;height:44px}
 .hud-right .small{display:none}
}