/* ============================================================
   SPLOOSH KABOOM — style.css
   ============================================================ */

/* ── ASSET PATHS ──────────────────────────────────────────── */
:root {
  --bg-image:                 url('assets/background.png');
  --highscore-label-image:    url('assets/highscore_label.png');
  --highscore-backdrop-image: url('assets/highscore_backdrop.png');
  --bomb-ammo-image:          url('assets/bomb_ammo.png');
  --bomb-used-image:          url('assets/bomb_used.png');
  --squid-alive-image:        url('assets/squid_alive.png');
  --squid-used-image:         url('assets/squid_used.png');
  --hit-image:                url('assets/hit.png');
  --miss-image:               url('assets/miss.png');
  --arrow-2-v:                url('assets/arrow_2_v.png');
  --arrow-3-v:                url('assets/arrow_3_v.png');
  --arrow-4-v:                url('assets/arrow_4_v.png');
  --arrow-2-h:                url('assets/arrow_2_h.png');
  --arrow-3-h:                url('assets/arrow_3_h.png');
  --arrow-4-h:                url('assets/arrow_4_h.png');

  /* ── CANVAS ───────────────────────────────────────────── */
  --bg-w:      2432px;
  --bg-h:      1368px;

  /* ── GRID in background art ───────────────────────────── */
  --grid-x:    896px;
  --grid-y:    364px;
  --grid-size: 640px;
  --cell-size: 80px;

  /* ── HIGH SCORE region ────────────────────────────────── */
  --hs-x:  1120px;
  --hs-y: 192px;
  --hs-w:  536px;
  --hs-h:  144px;   /* 2× original */

  /* ── AMMO ─────────────────────────────────────────────── */
  --ammo-cell:        80px;
  --ammo-panel-w:     calc(var(--ammo-cell) * 3 + 4px);
  /* ammo panel left edge: 200px further left than grid left edge */
  --ammo-left:  calc(var(--grid-x) - var(--ammo-panel-w) - 8px - 146px);
  /* ammo counter sits at same top as high score row */
  --ammo-top:   var(--hs-y);

  /* ── SQUIDS ───────────────────────────────────────────── */
  --pip-size: 150px;   /* 3× original 80px */
  /* squids right edge: 200px past grid right edge */
  --squid-left: calc(var(--grid-x) + var(--grid-size) + 8px + 160px);
  --squid-top:  var(--grid-y);

  --font-game: 'Reggae One', system-ui;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ── ROOT CANVAS ─────────────────────────────────────────────
   Always 1920×1336. JS scales with Math.min (contain/fit).   */
#root {
  position: absolute;
  width:  var(--bg-w);
  height: var(--bg-h);
  transform-origin: top left;
}

/* ── BACKGROUND ─────────────────────────────────────────────── */
#bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── HIGH SCORE AREA ─────────────────────────────────────────── */
#highscore-area {
  position: absolute;
  left:   var(--hs-x);
  top:    var(--hs-y);
  width:  var(--hs-w);
  height: var(--hs-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

#highscore-label-img {
  flex: 1;
  height: 100%;
  background-image: var(--highscore-label-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

#highscore-backdrop {
  position: relative;
  right: 16px;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-image: var(--highscore-backdrop-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.6));
}

#hs-value {
  font-family: var(--font-game);
  font-size: 3.5rem;
  color: #fff;
  -webkit-text-stroke: 12px #000;
  paint-order: stroke fill;
  letter-spacing: 8px;
  line-height: 1;
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}

/* ── GAME AREA ───────────────────────────────────────────────
   Not a flex row — each panel is independently positioned.    */
#game-area {
  position: absolute;
  inset: 0;
  pointer-events: none; /* children re-enable as needed */
}

/* ── LEFT PANEL: ammo counter + bomb grid ────────────────────
   Pinned absolutely so it never affects board position.       */
#left-panel {
  position: absolute;
  left: var(--ammo-left);
  top:  var(--ammo-top);
  width: var(--ammo-panel-w);
  pointer-events: auto;
}

/* Counter row: 3 cols wide, number in rightmost cell only.
   Sits at the top of the left panel, aligned with high score. */
#ammo-counter-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, var(--ammo-cell));
  gap: 2px;
  /* height matches the gap between hs-y and grid-y */
  height: calc(var(--grid-y) - var(--hs-y));
  align-items: center;
  margin-bottom: 2px;
}

#ammo-count-label {
  grid-column: 3;
  font-family: var(--font-game);
  font-size: 3.5rem;
  color: #fff;
  -webkit-text-stroke: 12px #000;
  paint-order: stroke fill;
  letter-spacing: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-right: 12px;
}

/* Bomb grid: 3 cols × 8 rows, column-major, right col first */
#ammo-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--ammo-cell));
  grid-template-rows: repeat(8, var(--ammo-cell));
  grid-auto-flow: column;
  gap: 0;  /* no gap between bomb icons */
}

.ammo-cell {
  width:  var(--ammo-cell);
  height: var(--ammo-cell);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.ammo-cell.full  { background-image: var(--bomb-ammo-image); }
.ammo-cell.spent { background-image: var(--bomb-used-image); }

/* ── BOARD ───────────────────────────────────────────────────
   Pinned exactly to the grid region in the background art.   */
#board-container {
  position: absolute;
  left:   var(--grid-x);
  top:    var(--grid-y);
  width:  var(--grid-size);
  height: var(--grid-size);
  pointer-events: auto;
}

#board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell-size));
  grid-template-rows:    repeat(8, var(--cell-size));
  width:  var(--grid-size);
  height: var(--grid-size);
  position: relative;
  z-index: 1;
}

.cell {
  width:  var(--cell-size);
  height: var(--cell-size);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell:hover:not(.revealed):not(.miss) {
  background: rgba(255,255,255,0.08);
}
.cell.miss, .cell.hit, .cell.sunk { cursor: default; }

/* ── SHOT MARKERS ───────────────────────────────────────────── */
.shot-marker {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 3;
}
.shot-marker.hit-marker  { background-image: var(--hit-image); }
.shot-marker.miss-marker { background-image: var(--miss-image); }

/* ── REVEAL LAYER ───────────────────────────────────────────── */
#reveal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Arrow tileset: 256×640 source, scaled to 80×200px display.
   Source tile regions (256×256 each):
     tail: 0,0   → 256,256   display offset: 0,    0px
     body: 0,128 → 256,384   display offset: 0,  -40px  (128/256*80)
     head: 0,384 → 256,640   display offset: 0, -120px  (384/256*80) */
.reveal-tile {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center center;
}
.reveal-tile.arrow-2-v { background-image: var(--arrow-2-v); }
.reveal-tile.arrow-3-v { background-image: var(--arrow-3-v); }
.reveal-tile.arrow-4-v { background-image: var(--arrow-4-v); }
.reveal-tile.arrow-2-h { background-image: var(--arrow-2-h); }
.reveal-tile.arrow-3-h { background-image: var(--arrow-3-h); }
.reveal-tile.arrow-4-h { background-image: var(--arrow-4-h); }

/* ── RIGHT PANEL: squid pips ─────────────────────────────────
   Pinned to the right of the grid, no gap between pips.      */
#right-panel {
  position: absolute;
  left: var(--squid-left);
  top:  var(--squid-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  pointer-events: none;
  margin-top: -32px;
}

.squid-pip {
  width:  var(--pip-size);
  height: var(--pip-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
  margin-bottom: -32px;
}
.squid-pip.alive { background-image: var(--squid-alive-image); }
.squid-pip.sunk  { background-image: var(--squid-used-image); }

/* ── WIN / LOSE BANNER ───────────────────────────────────────── */
#win-banner {
  display: none;
  position: absolute;
  top: calc(var(--grid-y) + var(--grid-size) + 24px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  border: 2px solid #c9a84c;
  border-radius: 0.75rem;
  padding: 2rem 3rem;
  text-align: center;
  z-index: 100;
  color: #fff;
  font-family: var(--font-game);
  white-space: nowrap;
}
#win-banner h2 {
  font-size: 3rem;
  color: #f0d060;
  margin-bottom: 0.75rem;
}
#win-reward {
  font-size: 2rem;
  margin-bottom: 1rem;
}
#win-banner button {
  font-family: var(--font-game);
  font-size: 1.75rem;
  padding: 0.625rem 2rem;
  border-radius: 1.5rem;
  border: 2px solid #c9a84c;
  background: transparent;
  color: #f0d060;
  cursor: pointer;
  transition: background 0.15s;
}
#win-banner button:hover { background: rgba(201,168,76,0.2); }

/* ── VOLUME CONTROLS ───────────────────────────────────────── */

#volume-controls {
  position: absolute;
  bottom: 120px;
  right: 240px;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  z-index: 200;
}

.vol-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.vol-slider-wrap {
  display: none;
  height: 200px;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 16px 12px;
  margin-bottom: 8px;
}

.vol-group:hover .vol-slider-wrap {
  display: flex;
}

.vol-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 6px;
  height: 160px;
  background: #666;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.vol-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

.vol-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#icon-music     { background-image: url('assets/icon_music.png'); }
#icon-sfx       { background-image: url('assets/icon_sfx.png'); }
.muted#icon-music { background-image: url('assets/icon_music_mute.png'); }
.muted#icon-sfx   { background-image: url('assets/icon_sfx_mute.png'); }

/* ── BACK BUTTON ───────────────────────────────────────── */
#back-btn {
  position: absolute;
  top: 120px;
  left: 30px;
  color: #fff;
  font-family: var(--font-game);
  font-size: 1.5rem;
  text-decoration: none;
  z-index: 200;
}

#back-btn:hover {
  opacity: 0.7;
}