:root {
  --deep:        #072b2e;
  --deep-2:      #0b3d3a;
  --teal:        #0f5c56;
  --seafoam:     #6fbfae;
  --sand:        #e9dcb8;
  --sand-2:      #d8c493;
  --paper:       #f4ead2;
  --rope:        #8a5a34;
  --rope-dark:   #603c20;
  --brass:       #c9a227;
  --brass-light: #e8c85b;
  --coral:       #d1495b;
  --coral-dark:  #7a1220;
  --ink:         #1c1206;
  --shark:       #37474f;

  --n1: #2f7fbf;
  --n2: #2f9e57;
  --n3: #d1495b;
  --n4: #6a3fb5;
  --n5: #a5622a;
  --n6: #2aa8a0;
  --n7: #1c1206;
  --n8: #6b6b6b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--deep);
  font-family: 'Fraunces', serif;
  color: var(--paper);
}

body {
  cursor: default;
}

/* ---------- Background atmosphere ---------- */

.ocean-bg {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #124a45 0%, transparent 55%),
    linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 55%, #041917 100%);
  padding: 48px 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.depth-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    repeating-radial-gradient(circle at 15% 8%, transparent 0, transparent 60px, rgba(111,191,174,0.06) 61px, rgba(111,191,174,0.06) 62px),
    repeating-radial-gradient(circle at 85% 92%, transparent 0, transparent 80px, rgba(111,191,174,0.05) 81px, rgba(111,191,174,0.05) 82px);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ---------- Tacklebox frame ---------- */

.tacklebox {
  width: 100%;
  max-width: 780px;
  background:
    linear-gradient(180deg, #a06d3f 0%, var(--rope) 6%, var(--rope) 94%, #6b4423 100%);
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.55),
    0 2px 0 rgba(255,255,255,0.08) inset;
}

.marquee {
  position: relative;
  text-align: center;
  padding: 26px 20px 20px;
  background: linear-gradient(180deg, #0e4842 0%, #0a3934 100%);
  border-radius: 14px 14px 0 0;
  border-bottom: 4px solid var(--brass);
}

.rope-nail {
  position: absolute;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-light), var(--brass) 60%, #7a5f13 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.rope-nail--l { left: 16px; }
.rope-nail--r { right: 16px; }

.marquee h1 {
  margin: 0;
  font-family: 'Alfa Slab One', serif;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  color: var(--brass-light);
  letter-spacing: 1px;
  text-shadow:
    0 2px 0 #6b4a0e,
    0 4px 0 #52380a,
    0 8px 14px rgba(0,0,0,0.5);
}
.marquee h1 span { color: var(--paper); }

.tagline {
  margin: 10px 0 0;
  font-style: italic;
  font-weight: 500;
  color: var(--seafoam);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.panel {
  background: linear-gradient(180deg, #0a3b37 0%, #082e2b 100%);
  padding: 20px;
  border-radius: 0 0 12px 12px;
}

/* ---------- Controls row: gauges + reaction fish ---------- */

.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #06201d, #041613);
  border: 3px solid var(--rope-dark);
  border-radius: 10px;
  padding: 8px 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
  min-width: 92px;
}

.gauge-label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
  opacity: 0.85;
}

.digits {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: #ff6b57;
  text-shadow: 0 0 8px rgba(255,107,87,0.65);
}

.reaction-fish {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--brass);
  background: radial-gradient(circle at 35% 30%, #ffe08a, var(--brass) 70%);
  cursor: pointer;
  padding: 8px;
  box-shadow: 0 4px 0 #7a5f13, 0 6px 12px rgba(0,0,0,0.4);
  transition: transform 0.08s ease;
}
.reaction-fish:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a5f13, 0 2px 6px rgba(0,0,0,0.4); }

.fish-body { fill: #f4ead2; stroke: var(--ink); stroke-width: 2.5; }
.fish-tail, .fish-fin { fill: #e9c88f; stroke: var(--ink); stroke-width: 2.5; }

/* reaction states swap visibility of eye/mouth groups via JS toggling inline style/display,
   this CSS just ensures crisp rendering */
.reaction-fish svg * { vector-effect: non-scaling-stroke; }

/* ---------- Difficulty tabs ---------- */

.difficulty-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.diff-btn {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
  background: #0a332f;
  border: 2px solid #17544d;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.diff-btn:hover { border-color: var(--seafoam); color: var(--seafoam); }
.diff-btn.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff2ef;
  box-shadow: 0 2px 10px rgba(209,73,91,0.5);
}

/* ---------- Board ---------- */

.board-frame {
  background: linear-gradient(180deg, #0c231f, #081713);
  border-radius: 10px;
  padding: 10px;
  border: 3px solid var(--rope-dark);
  overflow-x: auto;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.7);
}

.board {
  display: grid;
  gap: 2px;
  width: max-content;
  margin: 0 auto;
  background: #0a1f1c;
}

.cell {
  width: var(--cell-size, 30px);
  height: var(--cell-size, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: calc(var(--cell-size, 30px) * 0.5);
  user-select: none;
  -webkit-user-select: none;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #1c8f83, #0d5b53 55%, #0a463f);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.25),
    inset 0 -3px 4px rgba(0,0,0,0.35);
  transition: filter 0.1s ease;
}
.cell:hover:not(.revealed) { filter: brightness(1.1); }
.cell:active:not(.revealed) { filter: brightness(0.92); }

.cell.revealed {
  cursor: default;
  background: linear-gradient(160deg, var(--sand), var(--sand-2));
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}

.cell.revealed.empty { background: linear-gradient(160deg, #ded0a1, #cdb87f); }

.cell .flag {
  width: 62%;
  height: 62%;
  animation: pop 0.18s ease;
}

.cell .shark {
  width: 76%;
  height: 76%;
}

.cell.exploded {
  background: linear-gradient(160deg, var(--coral), var(--coral-dark));
  animation: shake 0.35s ease;
}

.cell.wrong-flag { background: linear-gradient(160deg, #f0c9c9, #d99a9a); }

@keyframes pop {
  0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.n1 { color: var(--n1); }
.n2 { color: var(--n2); }
.n3 { color: var(--n3); }
.n4 { color: var(--n4); }
.n5 { color: var(--n5); }
.n6 { color: var(--n6); }
.n7 { color: var(--n7); }
.n8 { color: var(--n8); }

.hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--seafoam);
  opacity: 0.75;
  margin: 14px 0 4px;
  font-style: italic;
}

.credit {
  margin-top: 18px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--seafoam);
  opacity: 0.55;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,15,13,0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
  padding: 20px;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }

.modal-card {
  background: linear-gradient(180deg, var(--paper), var(--sand-2));
  border-radius: 16px;
  padding: 32px 30px;
  max-width: 340px;
  text-align: center;
  border: 4px solid var(--rope);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.25s ease;
}
.modal-overlay.show .modal-card { transform: translateY(0) scale(1); }

.modal-icon { font-size: 2.6rem; margin-bottom: 6px; }

.modal-card h2 {
  font-family: 'Alfa Slab One', serif;
  color: var(--coral-dark);
  margin: 0 0 10px;
  font-size: 1.5rem;
}

.modal-card p {
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0 0 14px;
  line-height: 1.4;
}

.modal-stats {
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
  color: var(--rope-dark);
  margin-bottom: 18px;
  letter-spacing: 0.03em;
}

#modalPlayAgain {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--coral);
  color: #fff2ef;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--coral-dark);
  transition: transform 0.08s ease;
}
#modalPlayAgain:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-dark); }

@media (max-width: 480px) {
  .cell { width: 26px; height: 26px; font-size: 0.82rem; }
  .controls-row { gap: 10px; }
  .gauge { min-width: 76px; padding: 6px 8px; }
  .digits { font-size: 1.3rem; }
}