:root{--gold:#d7a84c;--gold2:#ffe09a;--ink:#05080d;--panel:#0b1119;--line:rgba(225,178,83,.68)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02050a;color:#f4dfad;font-family:Inter,system-ui,Arial,sans-serif;touch-action:none}
body{display:grid;place-items:center}
#app{height:100dvh;width:min(100vw,610px);display:grid;grid-template-rows:minmax(0,1fr) clamp(132px,18dvh,174px);background:#03070c;overflow:hidden;position:relative}
#game-shell{min-height:0;position:relative;border-inline:2px solid rgba(217,168,76,.58);overflow:hidden;background:#02060b;box-shadow:inset 0 0 28px rgba(0,0,0,.75)}
#game{display:block;width:100%;height:100%;object-fit:fill;background:#06111b}
#hud{position:absolute;z-index:6;left:10px;right:10px;top:max(8px,env(safe-area-inset-top));display:grid;grid-template-columns:1fr .82fr 1fr 48px;gap:6px;pointer-events:none}
.hud-box,#pause{background:linear-gradient(180deg,rgba(17,24,33,.96),rgba(3,7,12,.93));border:1px solid var(--line);box-shadow:0 5px 18px rgba(0,0,0,.46),inset 0 0 18px rgba(215,168,76,.1),0 0 0 1px rgba(0,0,0,.7);border-radius:10px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hud-box span{font:700 9px/1.1 Georgia,serif;letter-spacing:1.4px;color:#d7b66f}.hud-box strong{font:800 16px/1 monospace;color:#fff0c3}.center strong{font-size:14px}
#pause{pointer-events:auto;color:#ffdda0;font-size:23px;cursor:pointer;padding:0}
#controls{position:relative;z-index:9;display:grid;grid-template-columns:1.45fr .85fr;gap:16px;align-items:center;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:linear-gradient(180deg,#070c12,#020408);border-top:1px solid rgba(231,184,92,.45);box-shadow:0 -8px 28px rgba(0,0,0,.62)}
.flight-pad{height:100%;display:grid;grid-template-rows:30px 1fr 30px 15px;justify-items:center;align-items:center}.flight-pad .horizontal{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}.flight-pad button,#fire-btn{border:1px solid rgba(255,213,127,.72);color:#ffe4a8;background:radial-gradient(circle at 50% 25%,#755120,#211609 56%,#080b0f 57%);box-shadow:inset 0 0 0 3px rgba(0,0,0,.45),0 5px 16px rgba(0,0,0,.5);font-size:24px;font-weight:900;cursor:pointer}.flight-pad button{width:100%;height:58px;border-radius:14px}.flight-pad button.small{width:68px;height:28px;border-radius:10px;font-size:15px}.flight-pad span{font:700 10px Georgia,serif;letter-spacing:2px;color:#c8a661}.flight-pad button.active,#fire-btn.active{filter:brightness(1.4);transform:translateY(2px);box-shadow:inset 0 0 18px rgba(255,203,95,.5),0 2px 8px #000}
#fire-btn{justify-self:end;width:min(31vw,138px);height:min(31vw,138px);max-height:130px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 50% 35%,#dc633a,#74231d 53%,#130a0a 56%)}
#fire-btn i{display:block;width:15px;height:38px;border-radius:8px 8px 3px 3px;background:linear-gradient(#fff3bf,#ffc756 45%,#7e2c16);box-shadow:0 0 16px #ff9e43;position:relative}#fire-btn i:after{content:"";position:absolute;left:3px;right:3px;bottom:-7px;height:9px;border-radius:50%;background:#efb64e}#fire-btn b{font:800 11px Georgia,serif;letter-spacing:2px;color:#ffe6aa}
.overlay{position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 35%,rgba(31,58,76,.55),rgba(1,4,8,.94) 70%);opacity:0;visibility:hidden;transition:.25s}.overlay.visible{opacity:1;visibility:visible}
.start-card,.message-card{width:min(86%,380px);text-align:center;padding:20px 22px 23px;border-radius:18px;border:1px solid rgba(225,178,83,.78);background:linear-gradient(180deg,rgba(11,19,28,.92),rgba(2,5,9,.97));box-shadow:0 24px 70px #000,inset 0 0 38px rgba(217,168,76,.1),0 0 0 3px rgba(0,0,0,.45)}
.logo{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(239,186,76,.3));margin-bottom:2px}.eyebrow{margin:4px 0 8px;color:#d6b46c;font:700 10px Georgia,serif;letter-spacing:3px}.start-card h1{margin:0;color:#fff0c3;font:700 clamp(30px,8vw,43px)/.94 Georgia,serif;letter-spacing:2px;text-shadow:0 3px 0 #4d2f10,0 0 25px rgba(255,198,92,.2)}.start-card h1 span{font-size:.78em;letter-spacing:8px;color:#dfb35a}.subtitle{font-size:13px;color:#c9d2da;margin:15px 0 20px}.primary{width:100%;height:54px;border-radius:12px;border:1px solid #ffe09a;background:linear-gradient(#f2c96f,#9b5c1f);color:#160c04;font:900 15px Georgia,serif;letter-spacing:1.5px;box-shadow:inset 0 1px #fff1bc,0 8px 25px rgba(0,0,0,.5);cursor:pointer}.hint{font-size:8px;letter-spacing:1.2px;color:#9ca7af;margin:14px 0 0}.message-card h2{font:700 29px Georgia,serif;color:#ffe2a0;margin:7px 0 10px}.message-card p:not(.eyebrow){font-size:13px;color:#c9d2da;line-height:1.5;margin:0 0 19px}
@media (min-width:760px){body{background:radial-gradient(circle,#14202a,#020306 62%)}#app{height:min(100vh,980px);border:1px solid rgba(217,168,76,.35);box-shadow:0 0 80px #000;grid-template-rows:minmax(0,1fr) 160px}}
@media (max-height:650px){#app{grid-template-rows:minmax(0,1fr) 124px}.flight-pad{grid-template-rows:23px 1fr 23px 12px}.flight-pad button{height:46px}.flight-pad button.small{height:22px}#fire-btn{height:105px;width:105px}.logo{width:88px;height:88px}.start-card{padding:14px 18px}}

#hud:before,#hud:after{content:"";position:absolute;top:-3px;width:34px;height:4px;background:linear-gradient(90deg,transparent,#d6a84d,transparent);opacity:.75}#hud:before{left:0}#hud:after{right:0}.primary{position:relative;overflow:hidden}.primary:after{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:shine 3.4s infinite}@keyframes shine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}