/* Copyright (c) 2026 Charles KWON OhJun. All rights reserved.
   SALVO — gentle, readable, kid-friendly educational artillery.
   Soft pastel palette (easy on the eyes) and a clean rounded, readable font. */

:root {
  --ink: #38525e;          /* dark slate text */
  --ink-soft: #6a8593;
  --cream: #fbf7ee;        /* soft panel background */
  --teal: #5fb3a6; --teal-d: #3f8f83;
  --coral: #e8967a; --coral-d: #c9705a;
  --amber: #f0b95e; --amber-d: #d69a3e;
  --line: #e2dccb;
  color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b2d47;
  font-family: "Fredoka", system-ui, sans-serif; color: var(--ink);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

/* ── top HUD (soft light bar) ─────────────────────────────── */
#hud { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 12px; }
#hud > * { background: #ffffffcc; box-shadow: 0 2px 6px rgba(60,90,100,.12); }
#hud .brand { font-weight: 700; font-size: 22px; color: var(--teal-d); letter-spacing: .5px;
  padding: 2px 12px; border-radius: 10px; }
#hud .hp { font-weight: 600; font-size: 18px; padding: 3px 11px; border-radius: 20px; }
#hud .hp { color: var(--ink); display: flex; align-items: center; gap: 5px; }
#hud .hp i { width: 11px; height: 11px; border-radius: 50%; background: var(--player); box-shadow: 0 0 0 2px #fff; }
#hud .hp b { color: var(--player); }
#hud .wind { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 20px; }
#hud .wind .wl { font-size: 12px; color: var(--ink-soft); }
#hud .wind .wv { color: #4d9fd0; font-size: 17px; letter-spacing: -3px; min-width: 16px; text-align: center; }
#hud .wind b { font-size: 18px; color: var(--ink); }
#hud .turn { font-weight: 600; font-size: 15px; padding: 5px 14px; border-radius: 20px; }
#hud .turn.me { color: #fff; background: var(--teal); }
#hud .turn.foe { color: #fff; background: var(--coral); }
#hud .help { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: none;
  color: var(--teal-d); font-weight: 700; font-size: 17px; }

/* ── physics panel (soft cream card, very readable) ───────── */
#edu { position: fixed; top: 58px; left: 50%; z-index: 5; width: min(300px, 47vw);
  background: var(--cream); border-radius: 16px; box-shadow: 0 8px 22px rgba(60,90,100,.2); overflow: hidden;
  transition: left .22s ease, top .22s ease; }
#edu .eh { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  background: #eef3ec; font-weight: 700; font-size: 15px; color: var(--teal-d); }
#edu .eh button { background: none; border: none; color: var(--ink-soft); font-size: 15px; cursor: pointer; }
#edu .eb { padding: 8px 12px 12px; }
#edu .eb.hidden { display: none; }
#edu .tri { width: 150px; height: 96px; float: right; margin: 0 -4px 4px 6px; }
#edu .tri .lx { stroke: #4d9fd0; stroke-width: 3; stroke-linecap: round; }
#edu .tri .ly { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
#edu .tri .lv { stroke: var(--amber-d); stroke-width: 3.5; stroke-linecap: round; }
#edu .tri .arc { stroke: #9fb3ba; stroke-width: 1.5; fill: none; }
#edu .tri .tl { fill: var(--ink); font-family: "Fredoka"; font-weight: 600; font-size: 14px; }
#edu .tri .tl.bx { fill: #3f86b5; } #edu .tri .tl.by { fill: var(--coral-d); } #edu .tri .tl.bv { fill: var(--amber-d); }
#edu .r { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
#edu .r b { color: var(--ink); font-weight: 500; }
#edu .r b em { font-style: normal; font-weight: 700; }
#edu .r.bx b em { color: #3f86b5; } #edu .r.by b em { color: var(--coral-d); } #edu .r b em { color: var(--teal-d); }
#edu .eq { margin: 8px 0; padding: 7px 8px; border-radius: 10px; background: #eef3ec; color: var(--ink);
  font-size: 15px; font-weight: 600; text-align: center; }
#edu .eq span { color: var(--ink-soft); font-weight: 400; font-size: 13px; }
#edu .pred { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 14px; color: var(--ink-soft); }
#edu .pred b { color: var(--teal-d); font-size: 17px; font-weight: 700; }

/* ── bottom controls (big, soft, tactile) ─────────────────── */
#controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.knob { display: flex; align-items: center; gap: 8px; background: #ffffffe0;
  border-radius: 16px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(60,90,100,.16); }
.knob .lab { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.knob b { font-size: 26px; font-weight: 700; min-width: 60px; text-align: center; color: var(--ink); }
.knob button { width: 44px; height: 44px; border-radius: 12px; cursor: pointer; font-size: 26px; font-weight: 700;
  line-height: 1; color: #fff; background: var(--teal); border: none; }
.knob button:active { transform: translateY(2px); filter: brightness(.95); }
.fire { padding: 0 28px; height: 60px; border: none; border-radius: 16px; cursor: pointer;
  font-family: "Fredoka"; font-weight: 700; font-size: 22px; color: #fff;
  background: var(--amber); box-shadow: 0 5px 14px rgba(240,185,94,.5); }
.fire:disabled { filter: grayscale(.5) brightness(.9); box-shadow: none; cursor: default; }
.fire:not(:disabled):active { transform: translateY(3px); }

/* ── overlays (soft) ─────────────────────────────────────── */
#overlay { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: #eaf3f5f0; color: var(--ink); }
/* Title screen: soft dimmed veil at top & bottom (for text), clear in the
   middle so the current ARI-vs-TEO production scene shows through. */
#overlay.title { justify-content: space-between; padding: 20px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  color: #eef4f2;
  background: linear-gradient(180deg, #153c58db 0%, #153c5899 19%, transparent 38%, transparent 56%, #143c58b8 76%, #0c2d47f2 100%); }
#overlay.title .ttop, #overlay.title .tbot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#overlay.title .tbot { width: min(940px, 96vw); gap: 8px; }
#overlay.title .eyebrow { padding: 5px 13px; border: 1px solid #fff7; border-radius: 999px;
  color: #fff6d6; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; background: #163e5b80; }
#overlay.title h1 { color: #fdf1d4; text-shadow: 0 4px 0 #2a444d, 0 0 34px rgba(240,185,94,.25); }
#overlay.title .sub { color: #ffdf9f; }
/* On the title the credit line flows BELOW the action buttons instead of
   floating at an absolute bottom offset, so they can never overlap on short
   screens. */
#overlay.title .foot { position: static; color: #a6bcc0; font-size: 12px; margin-top: 2px; }
.art-status { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 9px 16px; border: 1px solid #fff5; border-radius: 999px; color: #fff0c6;
  background: #0b304ac7; box-shadow: 0 8px 24px #071f3255; font-size: 12px; font-weight: 700;
  letter-spacing: 2px; }
#overlay.title.art-loading .art-status { display: block; }
#overlay.title.art-loading .tbot { opacity: 0; pointer-events: none; }
#overlay.title:not(.art-loading) .tbot { animation: title-ready .28s ease-out both; }
#overlay.title button:disabled { cursor: default; }
@keyframes title-ready { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
#overlay h1 { font-weight: 700; font-size: clamp(58px, 15vw, 150px); color: var(--teal-d); letter-spacing: 1px;
  text-shadow: 0 4px 0 #cfe6e0; }
#overlay .rule { width: min(300px, 60vw); height: 4px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 12px, transparent 12px 20px); }
#overlay .sub { color: var(--teal-d); font-size: clamp(16px, 2.4vw, 24px); font-weight: 600; }
#overlay .tag { color: var(--ink-soft); font-size: clamp(14px, 1.8vw, 18px); max-width: 600px; }
#overlay .lead { color: var(--ink-soft); font-size: clamp(16px, 2.2vw, 22px); max-width: 600px; }
#overlay .bigemoji { font-size: clamp(64px, 11vw, 100px); }
#overlay .foot { position: absolute; bottom: 16px; color: #9fb3ba; font-size: 14px; }
.banner { font-weight: 700; font-size: clamp(42px, 8vw, 76px); }
.banner.gold { color: var(--amber-d); } .banner.teal { color: var(--teal-d); }

.btn { cursor: pointer; border: none; border-radius: 16px; padding: 14px 28px; font-family: "Fredoka";
  font-weight: 700; font-size: 20px; color: #fff; min-width: 260px; }
.btn:active { transform: translateY(3px); }
.btn.big { font-size: 23px; padding: 16px 40px; }
.btn.gold { background: var(--amber); box-shadow: 0 5px 14px rgba(240,185,94,.5); }
.btn.teal { background: var(--teal); box-shadow: 0 5px 14px rgba(95,179,166,.45); }
.btn.line { background: #a9c3cd; box-shadow: 0 5px 14px rgba(120,150,160,.35); }

.pilot-picker { display: grid; grid-template-columns: repeat(5, minmax(70px, 112px)); gap: clamp(5px, 1vw, 10px); }
.picker-tabs { display: flex; gap: 6px; padding: 3px; border-radius: 999px; background: #0b304ab8; }
.picker-tab { min-width: 94px; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #d8e9ee; font-family: "Fredoka", sans-serif; font-weight: 700; }
.picker-tab.active { color: #173d56; background: #fff4cf; box-shadow: 0 2px 8px #071f324d; }
.pilot-card { position: relative; display: grid; grid-template-rows: minmax(50px, 74px) auto auto; justify-items: center;
  min-width: 0; padding: 4px 5px 7px; border: 2px solid #ffffff70; border-radius: 14px; cursor: pointer;
  color: #fff; background: #123b57c7; box-shadow: 0 5px 14px #092a404d; font-family: "Fredoka", sans-serif;
  transition: transform .18s, border-color .18s, background .18s; overflow: hidden; }
.pilot-card:hover { transform: translateY(-3px); }
.pilot-card.selected { transform: translateY(-5px); border-color: #fff6bf; background: color-mix(in srgb, var(--pilot) 62%, #173d56); box-shadow: 0 0 0 3px #fff3, 0 8px 20px #092a4066; }
.pilot-portrait { display: grid; place-items: center; width: 100%; height: 100%; min-height: 50px; overflow: hidden;
  filter: drop-shadow(0 3px 2px #092a4066); }
.pilot-portrait img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center 10%;
  transform: scale(1.62); transform-origin: center 18%; }
.pilot-card b { font-size: 14px; line-height: 1; }
.pilot-card small { color: #e8f5f7; font-size: 9px; letter-spacing: 1px; }
.title-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.title-actions .btn { min-width: 0; padding: 10px 18px; font-size: 15px; }
.title-actions .btn.big { font-size: 17px; padding: 11px 22px; }

/* ── how to play ─────────────────────────────────────────── */
.howto { position: fixed; inset: 0; z-index: 20; background: #eaf3f5f7; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; }
.howto h2 { font-weight: 700; font-size: clamp(30px, 5vw, 46px); color: var(--teal-d); margin-bottom: 8px; }
.howto .row { max-width: 700px; display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline;
  background: #ffffffb0; border-radius: 12px; padding: 8px 14px; }
.howto .row b { color: var(--amber-d); font-size: clamp(15px, 2vw, 19px); }
.howto .row span { color: var(--ink); font-size: clamp(14px, 1.8vw, 18px); line-height: 1.4; }
.howto .btn { margin-top: 14px; }

/* ── toast ───────────────────────────────────────────────── */
#toast { position: fixed; top: 62px; left: 50%; transform: translateX(-50%) translateY(-8px); z-index: 30;
  padding: 9px 20px; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(60,90,100,.25);
  font-size: 16px; font-weight: 500; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 720px) { #edu { width: 210px; } #edu .tri { display: none; } }
@media (max-height: 720px) {
  #overlay.title { padding-top: 8px; }
  #overlay.title h1 { font-size: 52px; }
  .pilot-card { grid-template-rows: 42px auto; }
  .pilot-card small { display: none; }
  .pilot-picker { grid-template-columns: repeat(5, minmax(58px, 82px)); }
}