/**
 * StarBoss Squadron — game page styles
 *
 * WHERE THE LITERAL COLOURS ARE, AND WHY
 * --------------------------------------
 * This file has two halves and the boundary is .starboss-stage.
 *
 *   OUTSIDE the stage — the toolbar, the HUD strip, the start / pause /
 *   game-over dialogs, the score form — is suite chrome. Tokens only, so both
 *   themes work, exactly like every other tool.
 *
 *   INSIDE the stage is the playfield: ships, bullets, explosions, the starfield
 *   and the boss meters. Those keep literal arcade colours — #ff3333 enemies,
 *   #00ff00 tracer, #00ffff shields, a black void. They are not theme surfaces.
 *   The playfield is always black in both themes because the game is set in
 *   space, and a "red enemy" that turns into --fw-danger stops reading as an
 *   enemy the moment someone picks a different brand. Every literal below sits
 *   under a .starboss-stage / .starboss-world ancestor and cannot leak out.
 *
 * The playfield is DOM sprites rather than a <canvas>, but it is treated the
 * same way: no frikwork component is forced inside it.
 *
 * Every class is namespaced `starboss-`. The legacy sheet used bare .ship,
 * .player, .enemy, .boss and .star, which only survived because the game had a
 * document to itself — inside the suite they would collide with anything.
 */

/* ===========================================================================
 * Page shell — chrome, tokens only
 * ========================================================================= */

.starboss-game {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
}

.starboss-bar {
  display: flex;
  align-items: center;
  gap: var(--fw-space-md);
  flex-wrap: wrap;
  padding: var(--fw-space-xs) var(--fw-space-sm);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-card);
}

.starboss-bar__actions {
  display: inline-flex;
  gap: var(--fw-space-xs);
  margin-left: auto;
}

/* --- HUD --------------------------------------------------------------------
   Lifted out of the playfield and into the toolbar. In the legacy game the
   score, lives and level were position:fixed inside the transformed play area,
   so the parallax dragged them around with the ship. Out here they are legible,
   themed, and hold still. */

.starboss-hud {
  display: flex;
  align-items: center;
  gap: var(--fw-space-lg);
  flex-wrap: wrap;
}

.starboss-hud__item {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.starboss-hud__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fw-text-muted);
}

.starboss-hud__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fw-text);
}

.starboss-hud__value--best  { color: var(--fw-warning); font-size: 1rem; }
.starboss-hud__value--lives { font-size: 1rem; letter-spacing: 0.05em; }

/* Shield pips sit beside the hearts in the lives readout. Cyan is the shield's
   identity everywhere else in the game, so it is literal here too — this is the
   one deliberate exception outside the stage, and it is a single hue. */
.starboss-hud__shields {
  margin-left: 0.3rem;
  color: #00e5ff;
  font-size: 0.8em;
}

.starboss-hud__shields i { margin-left: 2px; }

@media (max-width: 720px) {
  .starboss-bar__label { display: none; }
  .starboss-hud { gap: var(--fw-space-md); }
  .starboss-hud__value { font-size: 1rem; }
}

/* ===========================================================================
 * The stage
 *
 * Height: the window minus the shell (header, main padding, toolbar, footer).
 * A fixed reserve rather than a JS measurement — measuring would mean writing
 * an inline height that then has to be unwound for fullscreen, and the reserve
 * only has to be close. min-height keeps it playable on a short laptop screen
 * even if that means the page scrolls a little.
 * ========================================================================= */

.starboss-stage {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 15rem);
  height: calc(100dvh - 15rem);
  min-height: 26rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  background: #05070f;
  cursor: crosshair;
  /* Stops a drag-to-steer gesture from scrolling the page underneath. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

/* Fullscreen takes the whole .starboss-game wrapper, not just the stage, so the
   toolbar (and with it the pause button, which is the only pause affordance on
   touch) stays reachable. */
.starboss-game:fullscreen {
  height: 100%;
  padding: var(--fw-space-sm);
  background: var(--fw-bg);
}

.starboss-game:fullscreen .starboss-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

/* .starboss-world holds every sprite and is the layer the parallax moves.
   pointer-events:none so aiming and firing always land on the stage, never on
   a bullet that happens to be under the cursor. */
.starboss-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* ===========================================================================
 * Playfield — literal arcade palette below this line
 * ========================================================================= */

.starboss-ship {
  position: absolute;
  transition: none;
}

.starboss-player {
  font-size: 2.5em;
  color: #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.starboss-player i,
.starboss-player svg {
  color: #e0e0e0;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5))
          drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.3));
}

/* Power levels 2 and 3 use hulls that Font Awesome draws side-on, so they need
   turning to point up the screen. Selector covers both the <i> and the <svg>
   the kit replaces it with — keying on `i` alone would lose the rotation the
   moment the icon is swapped in. */
.starboss-player--side i,
.starboss-player--side svg { transform: rotate(-90deg); }

.starboss-enemy {
  color: #ff3333;
  filter: drop-shadow(0 0 5px #ff0000);
  font-size: 2em;
  transform: rotate(180deg);
}

.starboss-boss {
  color: #ffffff;
  filter: drop-shadow(0 0 15px #ffffff);
  font-size: 5em;
  transform: rotate(180deg);
}

.starboss-subboss {
  color: #00ff66;
  filter: drop-shadow(0 0 15px #00ff66);
  font-size: 4em;
  transform: rotate(180deg);
}

/* Shield glow, one step per absorbed hit remaining. */
.starboss-shield-0 { filter: drop-shadow(0 0 10px #c0c0c0); }
.starboss-shield-1 { filter: drop-shadow(0 0 15px #c0c0c0) drop-shadow(0 0 25px rgba(0, 255, 255, 0.30)); }
.starboss-shield-2 { filter: drop-shadow(0 0 20px #c0c0c0) drop-shadow(0 0 30px rgba(0, 255, 255, 0.50)); }
.starboss-shield-3 { filter: drop-shadow(0 0 25px #c0c0c0) drop-shadow(0 0 35px rgba(0, 255, 255, 0.70)); }
.starboss-shield-4 { filter: drop-shadow(0 0 30px #c0c0c0) drop-shadow(0 0 40px rgba(0, 255, 255, 0.85)); }
.starboss-shield-5 { filter: drop-shadow(0 0 35px #c0c0c0) drop-shadow(0 0 45px rgba(0, 255, 255, 1)); }

@keyframes starboss-shield-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

.starboss-shield-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: starboss-shield-pulse 2s infinite;
}

/* --- Projectiles ------------------------------------------------------------ */

.starboss-bullet {
  position: absolute;
  border-radius: 2px;
  transform-origin: center;
}

.starboss-bullet--player {
  width: 4px;
  height: 15px;
  background: linear-gradient(to right, rgba(255, 143, 0, 0.8), #ff4400, rgba(255, 68, 0, 0.8));
  box-shadow: 0 0 10px #ff4400;
}

.starboss-bullet--enemy {
  width: 4px;
  height: 15px;
  background: linear-gradient(to bottom, rgba(0, 255, 0, 0.8), #00ff00, rgba(0, 255, 0, 0.8));
  box-shadow: 0 0 10px #00ff00;
}

.starboss-bullet--boss {
  width: 8px;
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #ffffff, #ffaa00);
  box-shadow: 0 0 15px #ffaa00;
}

.starboss-bullet--sub {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #ff66ff, #ff00ff, #ff66ff);
  box-shadow: 0 0 12px #ff00ff;
}

/* --- Explosions ------------------------------------------------------------- */

.starboss-flash {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  filter: blur(4px);
  animation: starboss-fade-out 0.2s forwards;
}

.starboss-particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
}

@keyframes starboss-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Starfield --------------------------------------------------------------
   Two stacked containers scrolled downward and wrapped, so the field is
   seamless. Heights are percentages of the stage, not viewport units — the
   stage is not the viewport any more. */

.starboss-stars {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}

.starboss-star {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 2px #ffffff;
  pointer-events: none;
}

@keyframes starboss-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.starboss-star:nth-child(3n)   { animation: starboss-twinkle 3s infinite ease-in-out; }
.starboss-star:nth-child(3n+1) { animation: starboss-twinkle 4s infinite ease-in-out; }
.starboss-star:nth-child(3n+2) { animation: starboss-twinkle 5s infinite ease-in-out; }

/* ===========================================================================
 * Boss meters — pinned to the stage, so no parallax drift
 * ========================================================================= */

.starboss-meter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  z-index: 3;
}

.starboss-meter--boss { top: 1rem; width: min(340px, 70%); }
.starboss-meter--sub  { top: 3.1rem; width: min(240px, 55%); }

.starboss-meter__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}

.starboss-meter__track {
  flex: 1 1 auto;
  height: 14px;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}

.starboss-meter__fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0000, #ff6600);
  transition: width 0.3s ease;
}

.starboss-meter--sub .starboss-meter__track { border-color: #00ff66; height: 11px; }
.starboss-meter--sub .starboss-meter__fill  { background: linear-gradient(to right, #00ff66, #00cc33); }

/* --- Pointer-lock hint ------------------------------------------------------- */

.starboss-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: var(--fw-space-xs) var(--fw-space-lg);
  border: 1px solid rgba(120, 200, 255, 0.5);
  border-radius: var(--fw-radius-pill);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ===========================================================================
 * Overlays and dialogs — chrome again, tokens only
 *
 * These are the frikwork-styled part of the game screen: start, pause and game
 * over. Sitting on the stage rather than in the world means they hold still
 * while the playfield parallaxes behind them.
 * ========================================================================= */

.starboss-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fw-space-md);
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow: auto;
}

.starboss-dialog {
  width: min(30rem, 100%);
  padding: var(--fw-space-lg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  background: var(--fw-bg-card);
  box-shadow: var(--fw-shadow-lg);
  text-align: center;
}

.starboss-dialog__title {
  margin: 0 0 var(--fw-space-xs);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fw-text);
}

.starboss-dialog__title--over { color: var(--fw-danger); }

.starboss-dialog__lead {
  margin: 0 0 var(--fw-space-lg);
  color: var(--fw-text-2);
}

.starboss-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-lg);
}

/* The game-over card breathes with a scale pulse, which is the one thing the
   legacy screen did that frikwork has no equivalent for. Driven by a keyframe
   rather than from the animation loop so it stops cleanly under reduced
   motion. */
@keyframes starboss-dialog-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

.starboss-dialog--over { animation: starboss-dialog-pulse 2s ease-in-out infinite; }

/* --- Game-over summary ------------------------------------------------------- */

.starboss-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fw-space-sm);
  margin: 0 0 var(--fw-space-lg);
}

.starboss-summary > div {
  padding: var(--fw-space-sm);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}

.starboss-summary dt {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fw-text-muted);
}

.starboss-summary dd {
  margin: 0.15rem 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fw-brand-text);
}

/* --- Score submission -------------------------------------------------------- */

.starboss-entry {
  padding-top: var(--fw-space-md);
  border-top: 1px solid var(--fw-border);
  text-align: left;
}

.starboss-entry__row {
  display: flex;
  gap: var(--fw-space-sm);
  margin-top: var(--fw-space-xs);
}

.starboss-entry__input {
  width: 7rem;
  flex: none;
  font-family: var(--fw-font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}

.starboss-entry__msg--ok   { color: var(--fw-success); }
.starboss-entry__msg--bad  { color: var(--fw-danger); }

@media (max-width: 560px) {
  .starboss-dialog { padding: var(--fw-space-md); }
  .starboss-dialog__title { font-size: 1.3rem; }
  .starboss-summary dd { font-size: 1.15rem; }
  .starboss-player   { font-size: 2em; }
  .starboss-enemy    { font-size: 1.5em; }
  .starboss-boss     { font-size: 4em; }
  .starboss-subboss  { font-size: 3em; }
}

/* ===========================================================================
 * Reduced motion
 *
 * A shoot-'em-up is motion — there is no calm variant of a bullet, and the
 * engine's own movement is the tool's entire purpose, so it keeps running. What
 * is withdrawn is every decoration that adds movement without adding gameplay:
 * the twinkling stars, the shield's pulse, the game-over card's breathing, and
 * the parallax drift of the whole playfield (switched off in game.js, which
 * watches the same media query live). frikwork already handles its own.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .starboss-star,
  .starboss-shield-circle,
  .starboss-dialog--over { animation: none !important; }

  .starboss-meter__fill,
  .starboss-hint { transition: none; }
}