/* ============================================================================
 * FIGHTER — arcade skin
 * ----------------------------------------------------------------------------
 * Takes its cues from the 2kodi.in hub: VT323 body type, the hub palette with
 * FIGHTER's own violet held as the identity accent, framed "screens in bezels",
 * chunky unrounded buttons, neon bloom on headings, and a CRT scanline +
 * vignette pass.
 *
 * The CRT treatment is deliberately two fixed CSS layers over the canvas rather
 * than a per-frame canvas pass. A full-screen line pass every frame is one of
 * the few things that can single-handedly blow a 16.7ms budget; as compositor
 * layers these cost nothing per frame.
 * ========================================================================== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --ad-h: 0px;
  --hud-gap: 10px;
  --top-reserve: calc(var(--safe-top) + var(--ad-h) + var(--hud-gap));

  /* FIGHTER identity accent — stays violet, per the label accent registry. */
  --accent: #a06bff;
  --accent-dark: #4b2c8a;
  --danger: #ff3b3b;

  /* Hub palette, used as secondary accents only. */
  --bg: #0a0612;
  --bg-raised: #150c24;
  --card: #1a0f2c;
  --text: #eef2f6;
  --muted: rgba(238,242,246,0.6);
  --arcade: #ffd400;
  --cyan: #28e8ff;
  --pink: #ff3ea5;
  --edge: rgba(255,212,0,0.18);

  --font-body: 'VT323', 'Courier New', ui-monospace, Menlo, Consolas, monospace;
}

html,body{
  margin:0;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
}

#thela-ad-anchor{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  padding-top:var(--safe-top);
  padding-left:var(--safe-left);
  padding-right:var(--safe-right);
  box-sizing:border-box;
  pointer-events:none;
}

/* The canvas is a small buffer stretched to the viewport — nearest-neighbour
   upscaling is what puts the whole game on one visible pixel grid. */
#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:var(--bg);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.hidden{display:none !important;}

/* Bitmap display type produced by retro.js. */
.px-text{
  display:block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  margin:0 auto;
}

/* ---------- CRT overlay (hub numbers) ---------- */
#crtScan{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 1px,
    rgba(0,0,0,0.18) 1px,
    rgba(0,0,0,0.18) 3px
  );
  mix-blend-mode:multiply;
  opacity:0.55;
}
#crtVignette{
  position:fixed;
  inset:0;
  z-index:201;
  pointer-events:none;
  box-shadow: inset 0 0 140px rgba(0,0,0,0.75);
}
@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none !important; }
  .warn-title{ animation:none !important; }
}

/* ---------- HUD (layer 4-6, pointer-events:none) ---------- */
#hud{
  position:fixed;
  top:var(--top-reserve);
  left:0; right:0;
  z-index:6;
  padding:0 max(14px, var(--safe-left)) 0 max(14px, var(--safe-left));
  padding-right:max(14px, var(--safe-right));
  pointer-events:none;
  color:var(--text);
  text-shadow:2px 2px 0 #000;
}
#hudTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
#scoreValue{
  font-size:clamp(26px,8.5vw,40px);
  line-height:1;
  letter-spacing:2px;
  color:var(--arcade);
  text-shadow:2px 2px 0 #000, 0 0 8px rgba(255,212,0,0.65);
}
#comboValue{
  font-size:clamp(17px,5vw,24px);
  line-height:1.1;
  color:var(--accent);
  letter-spacing:2px;
  text-shadow:2px 2px 0 #000, 0 0 8px rgba(160,107,255,0.6);
}
#weaponBlock{ text-align:right; }
#weaponLabel{
  font-size:clamp(17px,5vw,23px);
  line-height:1.1;
  letter-spacing:2px;
  color:var(--accent);
  text-shadow:2px 2px 0 #000, 0 0 8px rgba(160,107,255,0.6);
}
#droneLabel{
  font-size:clamp(14px,4vw,19px);
  line-height:1.1;
  color:var(--cyan);
  letter-spacing:1px;
  text-shadow:2px 2px 0 #000;
}
/* Meters read as inset panels: hard 2px frame, black fill, no rounding. */
#hullBar{
  margin-top:6px;
  width:min(46vw,220px);
  height:12px;
  border:2px solid #000;
  outline:1px solid var(--edge);
  background:#0b0616;
  box-sizing:border-box;
}
#hullFill{
  height:100%;
  width:100%;
  background:#4ee68a;
  box-shadow:0 0 8px rgba(78,230,138,0.5);
}
#hullFill.low{ background:#ff9d3b; box-shadow:0 0 8px rgba(255,157,59,0.5); }
#hullFill.crit{ background:var(--danger); box-shadow:0 0 8px rgba(255,59,59,0.6); }
#shieldPips{
  display:flex;
  gap:4px;
  margin-top:5px;
}
.shield-pip{
  width:12px; height:12px;
  border-radius:0;
  background:var(--cyan);
  border:2px solid #000;
  box-sizing:border-box;
  box-shadow:0 0 6px rgba(40,232,255,0.6);
}
#distValue{
  margin-top:5px;
  font-size:clamp(14px,4vw,18px);
  color:var(--muted);
  letter-spacing:1px;
  text-shadow:2px 2px 0 #000;
}

/* ---------- Boss HUD ---------- */
/* Framed as chrome. The boss settles high in the play column and the panel sits
   over it, so without an opaque frame the two red masses read as one object. */
#bossHud{
  position:fixed;
  top:var(--top-reserve);
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  width:min(95vw,540px);
  text-align:center;
  pointer-events:none;
  color:var(--danger);
  text-shadow:2px 2px 0 #000;
  /* The boss descends to y=218 with r=90, so its top third sits behind this
     panel. The panel is a DOM overlay, so it can get out of the way without
     touching where the boss or its parts actually are. A solid slab hid the
     centrepiece; this fades to nothing downward, so the name stays legible at
     the top while the hull reads through underneath. The part chips and the
     HP bar carry their own opaque backgrounds, so they stay readable. */
  background:linear-gradient(180deg, rgba(10,6,18,0.88) 0%, rgba(10,6,18,0.55) 55%, rgba(10,6,18,0) 100%);
  border:0;
  border-top:2px solid var(--danger);
  box-shadow:0 -2px 0 0 #000, 0 0 18px rgba(255,59,59,0.18);
  padding:4px 8px 10px;
  box-sizing:border-box;
}
#bossName{
  font-size:clamp(17px,4.6vw,22px);
  line-height:1.05;
  letter-spacing:3px;
  text-shadow:2px 2px 0 #000, 0 0 10px rgba(255,59,59,0.7);
}
#bossParts{
  display:flex;
  justify-content:center;
  gap:4px;
  margin:3px 0;
  flex-wrap:wrap;
}
.boss-part{
  font-size:12px;
  line-height:1.1;
  padding:1px 4px;
  border:2px solid var(--danger);
  color:#ffd0d0;
  letter-spacing:1px;
  background:rgba(10,6,18,0.7);
}
.boss-part.destroyed{
  border-color:#3a3a3a;
  color:#5a5a5a;
  text-decoration:line-through;
}
#bossCoreBar{
  height:8px;
  border:2px solid #000;
  outline:1px solid rgba(255,59,59,0.35);
  background:#0b0616;
  margin:0 auto;
  box-sizing:border-box;
}
#bossCoreFill{
  height:100%;
  width:100%;
  background:var(--danger);
  box-shadow:0 0 8px rgba(255,59,59,0.6);
}

/* ---------- Synergy banner ---------- */
#synergyBanner{
  position:fixed;
  top:30%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:7;
  font-size:clamp(28px,9vw,52px);
  pointer-events:none;
  animation:synergyPop 1.4s ease-out forwards;
}
@keyframes synergyPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.7); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  25%{ transform:translate(-50%,-50%) scale(1); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---------- Screens ---------- */
.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:calc(24px + var(--safe-top)) max(20px, var(--safe-right)) calc(24px + var(--safe-bottom)) max(20px, var(--safe-left));
  box-sizing:border-box;
  color:var(--text);
  z-index:5;
  background:transparent;
}

/* A framed panel, in the hub's bezel language: black fill, 2px arcade-yellow
   frame, hard black outer ring plus a soft yellow bloom. */
.bezel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:min(92vw,560px);
  max-height:100%;
  overflow-y:auto;
  box-sizing:border-box;
  padding:22px 20px;
  background:rgba(10,6,18,0.94);
  border:2px solid var(--arcade);
  box-shadow:0 0 0 4px #000, 0 0 24px rgba(255,212,0,0.15);
}
.warn .bezel{
  border-color:var(--danger);
  background:rgba(26,4,4,0.9);
  box-shadow:0 0 0 4px #000, 0 0 24px rgba(255,59,59,0.22);
}
.upgrade .bezel{
  border-color:var(--accent);
  box-shadow:0 0 0 4px #000, 0 0 24px rgba(160,107,255,0.2);
}

/* Font-size still drives the bitmap unit, so the desktop cap is kept here. */
.title{
  font-size:clamp(38px,14vw,88px);
  margin:0;
  line-height:1;
}

.tagline{
  font-size:clamp(17px,4.6vw,24px);
  max-width:min(80vw,640px);
  color:var(--muted);
  margin:0;
  letter-spacing:1px;
}

.best-line, .detail-line{
  font-size:clamp(17px,4.8vw,24px);
  color:#c9b8f2;
  margin:0;
  letter-spacing:1px;
  line-height:1.25;
}
.best-line span, .detail-line span{ color:var(--arcade); }

.target-big{
  font-size:clamp(38px,13vw,76px);
  line-height:1;
}

#resultStats{ margin-top:2px; }

.roast{
  font-size:clamp(14px,4vw,18px);
  color:rgba(238,242,246,0.55);
  margin:0;
  letter-spacing:1px;
  font-style:italic;
}

/* Chunky unrounded arcade button: near-black text on the accent, 2px black
   frame, hard drop with no radius. */
.cta-btn{
  font-family:inherit;
  font-size:clamp(22px,6.5vw,32px);
  letter-spacing:3px;
  padding:14px 34px;
  border:2px solid #000;
  border-radius:0;
  background:var(--arcade);
  color:#0a0612;
  box-shadow:0 6px 0 #7a5c00, 0 6px 0 2px #000, 0 10px 22px rgba(0,0,0,0.55);
  cursor:pointer;
  touch-action:manipulation;
  text-transform:uppercase;
}
.cta-btn:active{
  transform:translateY(5px);
  box-shadow:0 1px 0 #7a5c00, 0 1px 0 2px #000;
}
.pulse{ animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.05); }
}

/* ---------- Boss warning ---------- */
.warn{ background:rgba(20,4,4,0.4); }
.warn-title{
  font-size:clamp(40px,15vw,84px);
  margin:0;
  line-height:1;
  animation:warnFlash 0.4s steps(2) infinite;
}
@keyframes warnFlash{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}
.warn .tagline{ color:#ffb3b3; }

/* ---------- Upgrade overlay ---------- */
.upgrade{ background:rgba(6,4,14,0.7); z-index:8; }
.upgrade-kicker{
  font-size:clamp(20px,5.6vw,32px);
  margin:0;
  line-height:1;
}
#upgradeChoices{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.upgrade-choice{
  font-family:inherit;
  text-align:left;
  padding:10px 14px;
  border:2px solid var(--accent);
  border-radius:0;
  background:linear-gradient(rgba(160,107,255,0.14), rgba(160,107,255,0.04));
  color:#eee2ff;
  cursor:pointer;
  touch-action:manipulation;
  box-shadow:0 0 0 2px #000;
}
.upgrade-choice:active{ background:rgba(160,107,255,0.3); transform:translateY(2px); }
.upgrade-choice .oc-num{
  color:#0a0612;
  background:var(--arcade);
  padding:0 7px;
  margin-right:8px;
  border:2px solid #000;
  display:inline-block;
  line-height:1.15;
}
.upgrade-choice .oc-name{
  letter-spacing:2px;
  display:inline;
  font-size:clamp(18px,5vw,24px);
  color:var(--arcade);
  text-shadow:0 0 8px rgba(255,212,0,0.45);
}
.upgrade-choice .oc-desc{
  font-size:clamp(15px,4.2vw,20px);
  color:#c9b8f2;
  display:block;
  margin-top:1px;
  line-height:1.2;
}

/* --- desktop keyboard hint --- */
.kbd-hint{display:none;}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{display:block;}
}
.kbd-hint{color:var(--muted);font-size:17px;letter-spacing:1px;margin:0;}