/* Tank Duel — phone-first, portrait + landscape, safe areas, 44px targets */
@import url("iphone-frame.css");

:root{
  --sky1:#1b2a4a; --sky2:#e8956d; --ground:#6b8f4e; --dirt:#7a5a3a;
  --blue:#4fc3f7; --red:#ef5350; --ink:#0e1526; --panel:rgba(10,16,30,.78);
  --accent:#ffd54f; --edge:rgba(255,255,255,.12);
}
html,body{ background:var(--ink); color:#e8eefc;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif; }
#app{ position:fixed; inset:0; height:100dvh; overflow:hidden; touch-action:none; }
#cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.hidden{ display:none !important; }
button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }

/* ---------- HUD ---------- */
/* the arcade pill owns the top-left 120x52 band: everything else starts below it */
#btn-pause{ position:absolute; right:max(10px,env(safe-area-inset-right));
  top:max(8px,env(safe-area-inset-top)); width:48px; height:48px; min-width:48px; min-height:48px;
  border-radius:12px; border:1px solid var(--edge); background:var(--panel); color:#cfe0ff;
  font-size:13px; font-weight:900; letter-spacing:.06em; z-index:4; }
#hud-top{ position:absolute; left:max(10px,env(safe-area-inset-left));
  right:max(10px,env(safe-area-inset-right));
  top:max(58px,calc(env(safe-area-inset-top) + 58px));
  display:flex; flex-direction:column; gap:5px; pointer-events:none; z-index:3; }
#hp-wrap{ display:flex; align-items:center; gap:8px;
  background:var(--panel); border-radius:11px; padding:7px 9px; backdrop-filter:blur(6px); }
.hp-side{ display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.hp-side.right{ flex-direction:row-reverse; }
.hp-name{ font-size:10px; font-weight:800; letter-spacing:.08em; }
.hp-name.you{ color:var(--blue); } .hp-name.foe{ color:var(--red); }
.hp-bar{ flex:1; height:10px; background:#233048; border-radius:5px; overflow:hidden; min-width:24px; }
.hp-fill{ height:100%; width:100%; border-radius:5px; transition:width .35s ease; }
.hp-fill.p{ background:linear-gradient(90deg,#2196f3,#4fc3f7); }
.hp-fill.e{ background:linear-gradient(90deg,#ef5350,#ff8a65); }
.hp-num{ font-size:10px; font-weight:700; width:24px; text-align:center; }
#turn-banner{ font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--accent);
  white-space:nowrap; text-align:center; min-width:74px; }
#hud-mid{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:center; }
#wind-hud,#stage-hud,#shot-line{ background:var(--panel); border-radius:8px; padding:3px 8px;
  font-size:10px; font-weight:700; letter-spacing:.08em; display:flex; gap:5px; align-items:center; }
#wind-arrow{ font-size:12px; color:var(--accent); display:inline-block; }
#stage-hud{ color:#cfe0ff; }
#shot-line{ color:#9fb2d6; }
#sight-val{ color:var(--accent); }
#clock-wrap{ height:4px; background:#233048; border-radius:2px; overflow:hidden; }
#clock-bar{ height:100%; width:100%; background:linear-gradient(90deg,#43a047,#ffd54f,#ff5252);
  transform-origin:left center; }

#hud-bottom{ position:absolute; left:max(10px,env(safe-area-inset-left));
  right:max(10px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; z-index:3; }
#power-wrap{ display:flex; align-items:center; gap:6px; background:var(--panel);
  padding:5px 8px; border-radius:9px; }
#power-bar{ flex:1; height:9px; background:#233048; border-radius:5px; overflow:hidden; }
#power-fill{ height:100%; width:60%; background:linear-gradient(90deg,#43a047,#ffd54f,#ff5252); }
#power-num{ font-size:10px; font-weight:800; width:32px; text-align:right; }
#ctrl-row{ display:flex; gap:6px; align-items:stretch; }
#ammo-row{ display:flex; gap:4px; flex:1 1 auto; justify-content:flex-start; }
.ammo-chip{ min-width:46px; height:46px; padding:0 4px; border-radius:9px;
  background:var(--panel); border:2px solid transparent; color:#cfe0ff;
  font-size:9px; font-weight:800; letter-spacing:.02em; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.ammo-chip .cnt{ font-size:11px; color:var(--accent); }
.ammo-chip.sel{ border-color:var(--accent); background:rgba(255,213,79,.18); }
.ammo-chip.empty{ opacity:.35; }
.ammo-chip .ic{ font-size:11px; }
#btn-fire{ flex:0 0 78px; min-width:78px; min-height:58px; border-radius:14px; border:none;
  background:linear-gradient(180deg,#ff7043,#e53935); color:#fff; font-size:17px;
  font-weight:900; letter-spacing:.08em; box-shadow:0 4px 14px rgba(229,57,53,.45); }
#btn-fire:disabled{ filter:grayscale(.7); opacity:.6; }
#aim-hint{ position:absolute; left:50%; transform:translateX(-50%);
  top:max(190px,calc(env(safe-area-inset-top) + 190px)); max-width:92vw; text-align:center;
  font-size:10px; color:#cfe0ff; background:rgba(10,16,30,.82); border:1px solid var(--edge);
  padding:5px 11px; border-radius:9px; pointer-events:none; transition:opacity .6s; z-index:3; }
#aim-hint.faded{ opacity:0; }

/* landscape: one control row, compact top */
@media (orientation: landscape){
  #hud-bottom{ flex-direction:row; align-items:center; gap:8px; }
  #ctrl-row{ flex:1 1 auto; }
  #power-wrap{ flex:0 0 auto; }
  #aim-hint{ top:max(158px,calc(env(safe-area-inset-top) + 158px)); }
  #hud-top{ top:max(56px,calc(env(safe-area-inset-top) + 56px)); }
}

/* ---------- pulses ---------- */
#wind-hud.pulse #wind-arrow{ animation:windpulse .4s ease-in-out 3; }
@keyframes windpulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.5);} }
#btn-fire.nudge{ animation:firenudge .9s ease-in-out infinite; }
@keyframes firenudge{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
.hp-fill.dmgflash{ animation:dmgflash .5s ease-out 1; }
@keyframes dmgflash{ 0%{filter:brightness(2.6) saturate(.2);} 100%{filter:none;} }

/* ---------- overlays: menu / pause / verdict ---------- */
#menu,#pause-panel,#verdict{ position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 12%, rgba(36,54,92,.86) 0%, rgba(14,21,38,.94) 70%);
  backdrop-filter:blur(2px); padding:16px; }
.menu-inner,.panel{ display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; width:min(420px,100%); }
#menu h1{ font-size:clamp(34px,9vw,52px); font-weight:900; letter-spacing:.06em; margin:0; line-height:1; }
#menu h1 span{ color:var(--accent); }
.tag{ font-size:13px; line-height:1.4; color:#b9c7e6; margin:0; }
.stage-label{ font-size:10px; letter-spacing:.16em; font-weight:800; color:#7d90b8; }
.stage-label span{ color:var(--accent); letter-spacing:.06em; }
#stage-row{ display:flex; gap:6px; justify-content:center; }
.stage-chip{ width:52px; height:52px; min-width:44px; min-height:44px; border-radius:11px;
  border:1px solid var(--edge); background:rgba(12,20,36,.8); color:#cfe0ff;
  font-size:15px; font-weight:900; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; line-height:1; }
.stage-chip .st{ font-size:9px; letter-spacing:.02em; color:var(--accent); }
.stage-chip.sel{ border-color:var(--accent); background:rgba(255,213,79,.18); box-shadow:0 0 0 2px rgba(255,213,79,.25); }
.stage-chip.locked{ opacity:.42; }
.stage-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.hint-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  font-size:10px; color:#9fb2d6; }
.hint-row .ai-prompt{ display:inline-flex; align-items:center; gap:4px; }
.hint-row img{ width:18px; height:18px; display:block; opacity:.9; }
#menu .hint{ font-size:10px; color:#7d90b8; margin:0; max-width:300px; line-height:1.4; }

.primary.touch-target{ min-width:190px; min-height:56px; border:none; border-radius:14px;
  background:linear-gradient(180deg,#ffd54f,#ffb300); color:#1b1b1b; font-size:18px;
  font-weight:900; letter-spacing:.08em; box-shadow:0 4px 16px rgba(255,179,0,.35); }
.secondary{ min-width:190px; min-height:48px; border-radius:12px; border:1px solid var(--edge);
  background:rgba(20,30,50,.9); color:#cfe0ff; font-size:13px; font-weight:800; letter-spacing:.06em; }
#pause-panel h2,#verdict h2{ font-size:clamp(28px,7vw,40px); font-weight:900; margin:0; letter-spacing:.06em; }
#verdict-stars{ font-size:26px; letter-spacing:.14em; color:var(--accent); }
#verdict-sub,#pause-sub{ font-size:13px; color:#b9c7e6; margin:0; }
#verdict-stats{ font-size:12px; color:#9fb2d6; line-height:1.5; }

/* short viewports (landscape phones): compact the overlays so nothing clips */
@media (max-height:520px){
  #menu h1{ font-size:30px; }
  .tag{ font-size:11px; }
  .menu-inner,.panel{ gap:7px; }
  .stage-chip{ width:46px; height:46px; font-size:13px; }
  .primary.touch-target{ min-height:48px; font-size:15px; }
  .secondary{ min-height:44px; font-size:12px; }
  #menu .hint{ display:none; }
  #verdict-stars{ font-size:20px; }
  #pause-panel h2,#verdict h2{ font-size:26px; }
}

/* ---------- toast / fatal ---------- */
#toast{ position:absolute; left:50%; transform:translateX(-50%);
  top:max(150px,calc(env(safe-area-inset-top) + 150px)); background:var(--panel);
  padding:7px 13px; border-radius:9px; font-size:11px; font-weight:700;
  pointer-events:none; z-index:7; max-width:86vw; text-align:center; }
#fatal{ position:absolute; inset:0; z-index:9; background:#0e1526; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px; }
#fatal pre{ color:#ff8a80; font-size:12px; padding:0 20px; white-space:pre-wrap; }