/* keel-theme.css — Keel ship/cargo overrides (loaded after styles.css).
   Phase 1 so far: a calm dusk sea/sky backdrop (replaces the removed animated/
   video backgrounds). Hull / cargo-container / list-gauge styling will be added here. */

html, body {
  background: linear-gradient(180deg,
      #0a1a30 0%,    /* night sky */
      #123250 42%,   /* lower sky */
      #0e2840 56%,   /* horizon */
      #081a2c 78%,   /* sea */
      #050f1c 100%   /* deep sea */
    ) fixed !important;
}

/* ── hull frame + heel readout ───────────────────────────────────────── */
/* steel hull instead of the theme's gold. Match the theme rules' specificity
   (body[data-theme] #game-canvas) so our !important actually wins. */
body[data-theme] #game-canvas,
#game-canvas {
  border-color: #6f8aa6 !important;
  box-shadow: 0 0 0 2px #0a1828, 0 14px 34px rgba(0,0,0,0.55) !important;
  backdrop-filter: none !important;
}
#game-canvas:focus, #game-canvas:focus-visible { outline-color: #6f8aa6 !important; }
body[data-theme] .game-main, .game-main { border-color: #6f8aa6 !important; outline-color: #6f8aa6 !important; }

/* ── port / starboard list labels (flank the board) ──────────────────── */
.keel-side-label {
  position: absolute; top: 10px; z-index: 6; pointer-events: none;
  font: 700 10px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.14em;
  color: #8aa6c2; opacity: 0.55;
}
.keel-port { left: 4px; }
.keel-stbd { right: 4px; }

/* ── capsize: the board tips over and sinks when the game ends ────────── */
#game-canvas.keel-capsizing { animation: keel-capsize 1s ease-in forwards !important; transform-origin: 50% 100%; }
@keyframes keel-capsize {
  to { transform: rotate(62deg) translateY(60px); opacity: 0.45; filter: saturate(0.6) brightness(0.7); }
}
/* label the tilt-degree readout as ship "heel" */
#board-strip-angle::before {
  content: "HEEL ";
  opacity: 0.55;
  font-size: 0.8em;
  letter-spacing: 0.06em;
}

/* ── ship-turn intro ─────────────────────────────────────────────────── */
#keel-intro {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0a1a30 0%, #102a44 45%, #081a2c 70%, #050f1c 100%);
  overflow: hidden; transition: opacity 0.55s ease;
}
#keel-intro.keel-intro-out { opacity: 0; pointer-events: none; }
.keel-intro-stage { position: relative; width: 280px; height: 220px; perspective: 760px; }
.keel-ship-side {
  position: absolute; inset: 0; width: 100%; height: auto; margin: auto;
  transform: translateX(-150%); opacity: 0; transform-style: preserve-3d;
  transform-origin: 50% 60%;
}
.keel-intro-play .keel-ship-side { animation: keel-sail 2.5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes keel-sail {
  0%   { transform: translateX(-150%) rotateY(0deg); opacity: 0; }
  16%  { opacity: 1; }
  44%  { transform: translateX(0) rotateY(0deg); opacity: 1; }
  74%  { transform: translateX(0) rotateY(86deg); opacity: 1; }
  100% { transform: translateX(0) rotateY(90deg); opacity: 0; }
}
.keel-hull-front {
  position: absolute; inset: 26px 84px; border: 3px solid #8aa6c2; border-radius: 12px;
  background: linear-gradient(180deg, #102236 0%, #0a1828 100%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.7);
}
.keel-hull-front span {
  color: #cfe0f2; font: 800 26px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 4px;
}
.keel-intro-play .keel-hull-front { animation: keel-hull 2.5s ease forwards; }
@keyframes keel-hull {
  0%, 58% { opacity: 0; transform: scale(0.7); }
  80%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1.04); }
}
.keel-intro-skip {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: #9fb3cc; font: 600 12px "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
}

/* ═══ Phase 2 — cargo-ship dressing (all decorative; pointer-events:none, behind play) ═══ */
/* Per-game WEATHER vars (overridden in keel-sprint/-heavy-seas/-listing/-squall):    */
:root {
  --keel-wave-far:  #163450;   /* crest tones, far → near */
  --keel-wave-mid:  #102a44;
  --keel-wave-near: #0b1f34;
  --keel-foam:      #36608a;
  --keel-wave-speed: 9s;       /* lower = faster water (more motion) */
  --keel-bob: 6.5s;
}

/* deep-water base behind the ship. The single wavy SURFACE is .keel-frontwave (in the
   ambience block) — full-width, laps in front of the hull/panels but behind the cargo hold. */
body::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,24,40,0) 0%, #07182a 45%, #050f1c 100%);
}
/* faint forward wake glow under the ship's waterline */
body::after {
  content: ""; position: fixed; left: 50%; bottom: 0; width: 520px; height: 40vh;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 100%, rgba(120,160,190,0.16), rgba(120,160,190,0) 70%);
}

/* ── the ship: WOODEN stern hull framing the whole play column ──────────── */
:root { --keel-wood-name: "KEEL · OPEN WATER"; }
.game-container { position: relative; z-index: 1; }
.game-container::before {            /* planked wooden hull — flared deck, tapering keel */
  content: ""; position: absolute; z-index: -1;
  left: -34px; right: -34px; top: -16px; bottom: -132px;   /* extra room below for the keel taper */
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 2px, rgba(255,220,170,0.025) 2px 6px), /* grain */
    repeating-linear-gradient(180deg, #6e4a2a 0 21px, #5a3c22 21px 23px, #36230f 23px 25px);    /* planks + caulk seams */
  /* ship-hull silhouette: wide flared deck up top, bulging sides, narrowing to a rounded keel */
  clip-path: polygon(
    4% 2%, 50% 0%, 96% 2%,
    99% 8%, 98% 28%, 96% 40%,
    90% 52%, 81% 63%, 70% 74%, 60% 84%, 53% 93%, 50% 100%,
    47% 93%, 40% 84%, 30% 74%, 19% 63%, 10% 52%,
    4% 40%, 2% 28%, 1% 8%
  );
  box-shadow: inset 0 5px 0 rgba(205,165,110,0.30),     /* deck-edge highlight */
              inset 0 -120px 120px rgba(0,0,0,0.5);     /* shading down toward the keel */
  filter: drop-shadow(0 20px 28px rgba(0,0,0,0.6));
  animation: keel-bob var(--keel-bob) ease-in-out infinite;
}
.game-container::after {             /* carved nameplate on the lower hull / transom */
  content: var(--keel-wood-name); position: absolute; z-index: -1;
  left: 0; right: 0; bottom: -92px; text-align: center;
  color: #e9d3a3; font: 800 13px/1 "Georgia", "Segoe UI", serif;
  letter-spacing: 3px; text-transform: uppercase; opacity: 0.92;
  text-shadow: 0 1px 0 #2a1c0e, 0 2px 2px rgba(0,0,0,0.6), 0 -1px 0 rgba(255,235,200,0.25); /* carved */
  animation: keel-bob var(--keel-bob) ease-in-out infinite;
}
@keyframes keel-bob {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50%      { transform: translateY(-6px) rotate(0.5deg); }
}

/* ── cargo HOLD: splintered cut-away into the planks (border-image = uniform-width
   torn wood frame in the border box, so it never covers playable cells, and it tips
   with the board because .game-main rotates). Inner shadow = depth of the hold. ── */
body[data-theme] #game-canvas, #game-canvas {
  border: 24px solid transparent !important;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238a5e34'/%3E%3Cstop offset='.5' stop-color='%235e4126'/%3E%3Cstop offset='1' stop-color='%233a2715'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23w)' fill-rule='evenodd' d='M0 0H100V100H0Z M22 28 L32 13 L41 26 L51 12 L60 27 L70 14 L79 28 L85 39 L73 49 L86 59 L74 69 L84 77 L78 86 L68 72 L57 88 L47 72 L37 87 L27 79 L15 71 L27 60 L13 50 L26 40 L16 29 Z'/%3E%3Cpath fill='none' stroke='%23201407' stroke-width='1.8' stroke-linejoin='round' d='M22 28 L32 13 L41 26 L51 12 L60 27 L70 14 L79 28 L85 39 L73 49 L86 59 L74 69 L84 77 L78 86 L68 72 L57 88 L47 72 L37 87 L27 79 L15 71 L27 60 L13 50 L26 40 L16 29 Z'/%3E%3C/svg%3E") 30 round !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 52px rgba(0,0,0,0.82), 0 24px 44px rgba(0,0,0,0.6) !important;
  background: #0b0a08 !important;   /* dark hold interior behind the cargo */
}

/* ── shorten + balance the two side decks so the hull curves in higher ───── */
.game-info, #zone-panel {
  align-self: flex-start !important;   /* content-height & top-aligned (was stretched full board height) */
}
.game-info { gap: 12px !important; min-width: 0 !important; }
#zone-panel {                          /* now a clean column: Zone meter, then Level, then Hold */
  display: flex !important; flex-direction: column; gap: 12px !important;
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
}
/* compact previews so the decks stay short */
#next-canvas, #hold-canvas { width: 78px !important; height: 78px !important; }
.score-section, .level-section, .next-section, .hold-section { padding: 9px !important; }

/* ── keep toasts (momentum lost, zone, hints) OFF the heel readout + stability bar
   at the bottom of the hold — float them in from the TOP instead. (They're fixed,
   but the scaled #pp-stage makes "fixed" stage-relative, so bottom:24px landed on
   the board-strip.) ── */
.toast-notification {
  bottom: auto !important;
  top: 60px !important;
  transform: translateX(-50%) translateY(-90px) !important;
}
.toast-notification.toast-visible {
  transform: translateX(-50%) translateY(0) !important;
}










/* ═══ weather ambience — gulls, flying fish, storm debris, fractal lightning (decorative) ═══ */
.keel-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.keel-bolt-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.keel-sheet-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.keel-amb { position: absolute; left: -64px; will-change: transform; }
.keel-amb.rtl { left: auto; right: -64px; }
.keel-amb.bird   { animation: keel-cross 12s linear forwards; }
.keel-amb.bird.rtl { animation-name: keel-cross-rtl; }
.keel-amb.fish   { animation: keel-leap 3s ease-in-out forwards; }
.keel-amb.fish.rtl { animation-name: keel-leap-rtl; }
.keel-amb.debris { animation: keel-debris 2.2s linear forwards; }
.keel-amb.debris.rtl { animation-name: keel-debris-rtl; }
@keyframes keel-cross { 0%{transform:translateX(0) translateY(0)} 25%{transform:translateX(28vw) translateY(-12px)} 50%{transform:translateX(56vw) translateY(7px)} 75%{transform:translateX(84vw) translateY(-9px)} 100%{transform:translateX(116vw) translateY(0)} }
@keyframes keel-cross-rtl { 0%{transform:translateX(0) translateY(0) scaleX(-1)} 25%{transform:translateX(-28vw) translateY(-12px) scaleX(-1)} 50%{transform:translateX(-56vw) translateY(7px) scaleX(-1)} 75%{transform:translateX(-84vw) translateY(-9px) scaleX(-1)} 100%{transform:translateX(-116vw) translateY(0) scaleX(-1)} }
@keyframes keel-leap { 0%{transform:translateX(0) translateY(26px) rotate(-12deg)} 50%{transform:translateX(58vw) translateY(-34px) rotate(8deg)} 100%{transform:translateX(116vw) translateY(26px) rotate(22deg)} }
@keyframes keel-leap-rtl { 0%{transform:translateX(0) translateY(26px) rotate(12deg) scaleX(-1)} 50%{transform:translateX(-58vw) translateY(-34px) rotate(-8deg) scaleX(-1)} 100%{transform:translateX(-116vw) translateY(26px) rotate(-22deg) scaleX(-1)} }
@keyframes keel-debris { 0%{transform:translateX(0) translateY(0) rotate(0)} 100%{transform:translateX(116vw) translateY(48px) rotate(560deg)} }
@keyframes keel-debris-rtl { 0%{transform:translateX(0) translateY(0) rotate(0)} 100%{transform:translateX(-116vw) translateY(48px) rotate(-560deg)} }
/* soft sky flash behind the bolt */
.keel-lightning { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(130% 62% at 50% 0%, rgba(205,222,255,0.5), rgba(205,222,255,0) 62%); }
.keel-lightning.flash { animation: keel-flash 0.9s ease-out; }
@keyframes keel-flash { 0%{opacity:0} 6%{opacity:.5} 13%{opacity:.12} 20%{opacity:.45} 32%{opacity:0} 100%{opacity:0} }
/* the fractal forked bolt — bright stroke with layered glow, flickers then fades */
.keel-bolt { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(190,215,255,0.95)) drop-shadow(0 0 14px rgba(120,170,255,0.6));
  animation: keel-strike 0.5s ease-out forwards; }
.keel-bolt svg { display: block; overflow: visible; }
@keyframes keel-strike { 0%{opacity:0} 8%{opacity:1} 22%{opacity:.25} 36%{opacity:1} 60%{opacity:.2} 100%{opacity:0} }
/* sheets of wind-driven rain spray sweeping across the screen (storm gusts) */
.keel-rainsheet { position: absolute; top: 0; left: 0; height: 122%; width: 55vw; pointer-events: none; opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 34'%3E%3Cg stroke='%23d3e3f5' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='5' y1='2' x2='2.5' y2='11'/%3E%3Cline x1='13' y1='10' x2='10.5' y2='19'/%3E%3Cline x1='8' y1='20' x2='5.5' y2='29'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 18px 34px;
  animation: keel-sheet 1.2s linear forwards; }
.keel-rainsheet.rtl { animation-name: keel-sheet-rtl; }
@keyframes keel-sheet { 0%{opacity:0;transform:translateX(-62vw) skewX(-14deg)} 18%{opacity:.55} 82%{opacity:.5} 100%{opacity:0;transform:translateX(186vw) skewX(-14deg)} }
@keyframes keel-sheet-rtl { 0%{opacity:0;transform:translateX(186vw) skewX(14deg)} 18%{opacity:.55} 82%{opacity:.5} 100%{opacity:0;transform:translateX(-62vw) skewX(14deg)} }
/* THE sea surface — full-width, multi-crest waves giving one continuous wavy waterline.
   Inside .game-container at z:3 so it laps in front of the hull/panels (1 / -1) but behind
   the cargo hold (5). Full-width insets so it spans the viewport (no separate back-sea seam). */
.keel-frontwave { position: absolute; left: -130vw; right: -130vw; bottom: -16px; height: 280px;
  z-index: 3; pointer-events: none; background-repeat: repeat-x; opacity: 0.98;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46'%3E%3Cpath d='M0 23 q55 -20 110 0 t110 0 V46 H0 Z' fill='%2313355a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46'%3E%3Cpath d='M0 23 q55 -20 110 0 t110 0' fill='none' stroke='%234a7ba6' stroke-width='2.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='40'%3E%3Cpath d='M0 20 q65 -17 130 0 t130 0 V40 H0 Z' fill='%230e2a46'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='44'%3E%3Cpath d='M0 22 q80 -18 160 0 t160 0 V44 H0 Z' fill='%230a2138'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(10,30,50,0) 0, #0a2138 16px, #06182a 100%);
  background-size: 220px 46px, 220px 46px, 260px 40px, 320px 44px, 100% 256px;
  background-position: bottom 224px left 0, bottom 230px left 0, bottom 170px left 0, bottom 96px left 0, bottom 0 left 0;
  animation: keel-frontwaves 7s linear infinite; }
@keyframes keel-frontwaves { to { background-position: bottom 224px left -440px, bottom 230px left -440px, bottom 170px left -520px, bottom 96px left -640px, bottom 0 left 0; } }