:root {
  --ice-1: #eaf6ff;
  --ice-2: #cfeaff;
  --blue: #3b82f6;
  --blue-dark: #1d4ed8;
  --white-tile: #f8fbff;
  --white-edge: #b9d6ef;
  --ink: #0f2740;
  --panel: #ffffff;
  --accent: #0ea5e9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #dff1ff 0%, #acd8f5 60%, #7ec0ec 100%);
  min-height: 100vh;
}

header {
  text-align: center;
  padding: 18px 12px 6px;
}
header h1 { margin: 0; font-size: 2.2rem; letter-spacing: 1px; }
.tagline { margin: 4px 0 0; opacity: 0.75; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.panel {
  background: var(--panel);
  border-radius: 16px;
  padding: 20px 24px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(13, 60, 110, 0.18);
}
.panel h2 { margin-top: 0; }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.field label { font-weight: 600; font-size: 0.9rem; }
select {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #b9d6ef;
  background: #f4faff;
  font-size: 1rem;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 1rem;
  font-weight: 600;
}
button.primary {
  background: var(--accent);
  color: white;
  width: 100%;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}
button.primary:disabled {
  background: #9fc3d6;
  box-shadow: none;
  cursor: not-allowed;
}
button.ghost {
  background: transparent;
  border: 1px solid #6aa6cf;
  color: var(--ink);
  width: 100%;
}

.hidden { display: none !important; }

#game {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 820px) {
  #game { grid-template-columns: 1fr; }
}

#boardWrap {
  background: radial-gradient(circle at 50% 40%, #2a86bd 0%, #0d4a73 55%, #062c46 100%);
  border-radius: 16px;
  padding: 12px;
  box-shadow: inset 0 0 50px rgba(3, 25, 45, 0.6);
}
#board { width: 100%; height: auto; display: block; }

.hex {
  stroke-width: 2;
  transition: fill 0.3s, opacity 0.3s, transform 0.3s;
  cursor: pointer;
}
.hex.blue  { fill: var(--blue);  stroke: var(--blue-dark); }
.hex.white { fill: var(--white-tile); stroke: var(--white-edge); }
/* knocked-off tile = open water hole, clearly different from a white tile */
.hex.removed {
  fill: url(#water);
  stroke: #0a3a5c;
  stroke-width: 1;
  pointer-events: none;
  cursor: default;
}
.hex.targetable { stroke: #f59e0b; stroke-width: 4; }
.hex.targetable:hover { filter: brightness(1.12); }
.hex.disabled { pointer-events: none; }

/* Board rim / frame — the table edge that also supports the outer tiles */
.rim line {
  stroke: #6b4423;
  stroke-width: 9;
  stroke-linecap: round;
}

.penguin { font-size: 26px; pointer-events: none; user-select: none; }
.penguin.falling { animation: fall 0.9s ease-in forwards; }
@keyframes fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(120px) rotate(220deg); }
}

#sidebar { display: flex; flex-direction: column; gap: 16px; }

.scoreboard { display: flex; gap: 10px; }
.score {
  flex: 1;
  background: var(--panel);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  border: 3px solid transparent;
}
.score.active { border-color: var(--accent); }
.score .who { display: block; font-size: 0.8rem; opacity: 0.7; }
.score .pts { display: block; font-size: 1.8rem; font-weight: 800; }

.wheel-area {
  background: var(--panel);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  position: relative;
}
.wheel-pointer {
  font-size: 1.4rem;
  color: #ef4444;
  line-height: 0.6;
  margin-bottom: -6px;
}
#wheel {
  width: 200px;
  height: 200px;
  max-width: 100%;
  transition: transform 3.2s cubic-bezier(0.17, 0.67, 0.21, 1);
}
#wheel text { font-weight: 700; font-size: 13px; pointer-events: none; }

.status {
  background: var(--panel);
  border-radius: 12px;
  padding: 14px;
  min-height: 60px;
  font-weight: 600;
  line-height: 1.4;
}
.status .big { font-size: 1.15rem; }