:root {
  --sky-top: #0b3d55;
  --sky-bottom: #1a6a8f;
  --water-1: #0e5f82;
  --water-2: #0a4a66;
  --gold: #f4c542;
  --ink: #fdf3d8;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 45%, var(--water-2) 45%, var(--water-1) 100%);
  color: var(--ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

.edit-link {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  text-decoration: none;
  font-size: 1.2rem;
  z-index: 20;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.edit-link:hover,
.edit-link:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}

.title {
  text-align: center;
  padding: 1.2rem 1rem 0.4rem;
}

.title h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  letter-spacing: 0.03em;
}

.subtitle {
  margin: 0.3rem 0 0;
  opacity: 0.85;
  font-size: clamp(0.9rem, 2vw, 1.2rem);
}

.board {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.5rem clamp(1rem, 4vw, 4rem) 3rem;
}

.lane {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lane-label {
  font-weight: bold;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.track {
  position: relative;
  height: clamp(64px, 9vw, 96px);
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 12px,
      transparent 12px,
      transparent 26px
    ),
    linear-gradient(180deg, var(--water-1), var(--water-2));
  background-size: 220% 100%, 100% 100%;
  animation: wave-scroll 6s linear infinite;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), inset 0 8px 18px rgba(0, 0, 0, 0.3);
  overflow: visible;
}

@keyframes wave-scroll {
  from { background-position: 0 0, 0 0; }
  to { background-position: -220px 0, 0 0; }
}

.island {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
  z-index: 1;
}

.ship-wrap {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-10%, -50%);
  transition: left 3.6s cubic-bezier(0.35, 0, 0.25, 1);
  z-index: 2;
}

.ship {
  position: relative;
  width: clamp(70px, 10vw, 132px);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.4));
  animation: bob 2.4s ease-in-out infinite;
}

.hull {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hull .mast {
  fill: #3b2414;
}

.hull .shroud {
  stroke: #2a1608;
  stroke-width: 0.6;
  opacity: 0.65;
}

.hull .sail {
  fill: url(#sail-grad);
  stroke: #c9b98a;
  stroke-width: 1.5;
}

.hull .sail-jib {
  opacity: 0.95;
}

.hull .rigging {
  stroke: #3b2414;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}

.hull .hull-body {
  fill: url(#hull-grad);
  stroke: #3a220f;
  stroke-width: 2;
}

.hull .hull-deck {
  fill: #8a5a34;
}

.hull .superstructure {
  fill: #7a4f2e;
  stroke: #3a220f;
  stroke-width: 1.5;
}

.hull .rail {
  stroke: #2a1608;
  stroke-width: 2;
}

.hull .window {
  fill: #1c0e05;
  stroke: #d8c39a;
  stroke-width: 0.6;
}

.hull .gunport-rim {
  fill: #1c0e05;
}

.hull .gunport-bore {
  fill: #000000;
}

.hull .rudder {
  fill: #432712;
}

.ship .flag {
  position: absolute;
  top: -16%;
  left: 50%;
  margin-left: -0.55em;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  animation: flap 1.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes flap {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.lane.arrived .ship {
  animation: celebrate 0.6s ease-in-out infinite;
}

@keyframes celebrate {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1.05); }
  50% { transform: translateY(-10px) rotate(6deg) scale(1.1); }
}

.score-badge {
  position: absolute;
  left: 50%;
  bottom: -1.3rem;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: var(--gold);
  font-weight: bold;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.smoke-puff {
  position: absolute;
  left: -0.1em;
  top: 0.55em;
  font-size: 1.3rem;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: puff-drift 1.1s ease-out forwards;
}

.smoke-puff::before {
  content: '💨';
}

@keyframes puff-drift {
  0% { opacity: 0.9; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--dx, -2em), -1.6em) scale(1.8); }
}

.muzzle-flash {
  position: absolute;
  left: 1.35em;
  top: 0.3em;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, #ffb648 40%, rgba(255, 90, 20, 0.55) 65%, transparent 78%);
  pointer-events: none;
  z-index: 4;
  animation: flash-burst 0.22s ease-out forwards;
}

@keyframes flash-burst {
  0% { opacity: 1; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.9); }
}

.cannonball {
  position: absolute;
  left: 1.6em;
  top: 0.5em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #9a9a9a 0%, #4a4a4a 45%, #121212 85%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 3;
  animation: cannon-arc 0.75s cubic-bezier(0.32, 0.56, 0.58, 1) forwards;
}

@keyframes cannon-arc {
  0% { transform: translate(0, 0) scale(0.7) rotate(0deg); opacity: 1; }
  55% { transform: translate(2.8em, -1.9em) scale(1) rotate(180deg); opacity: 1; }
  100% { transform: translate(4.6em, 0.7em) scale(0.55) rotate(320deg); opacity: 0; }
}

.impact-splash {
  position: absolute;
  left: 6.2em;
  top: 1.2em;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  border: 2px solid rgba(230, 245, 255, 0.85);
  pointer-events: none;
  z-index: 3;
  animation: splash-ring 0.5s ease-out forwards;
}

@keyframes splash-ring {
  0% { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(2.4); }
}

.pop {
  position: absolute;
  left: 0.6em;
  top: -0.4em;
  font-weight: bold;
  color: var(--gold);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.pop.fire {
  animation: float-up 1.1s ease-out;
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1.6em); }
}

.lane.arrived .track {
  box-shadow: inset 0 0 0 3px var(--gold), inset 0 8px 18px rgba(0, 0, 0, 0.3), 0 0 18px rgba(244, 197, 66, 0.6);
}

.empty-state {
  text-align: center;
  opacity: 0.8;
  padding: 3rem 1rem;
  font-size: 1.1rem;
}