:root {
  --bg: #061528;
  --panel: #0b2138;
  --panel-2: #10304f;
  --line: #1d4a6e;
  --text: #e8f6ff;
  --muted: #8fb3cc;
  --accent: #3ff0ff;
  --coral: #ff7a59;
  --gold: #ffd23f;
  --good: #5dff8a;
  --radius: 10px;
  /* The screen's safe areas (docs/PLATFORMS.md, "Layout"): under a notch, a
     cut-out, a rounded corner or the home indicator. Everything the player
     reads or touches keeps inside them. The browser tests set these to try
     insets that their browsers don't have. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The site's header: 48 px, under the top safe area. */
  --header-h: calc(48px + var(--safe-t));
  /* The smallest text (docs/PLATFORMS.md): 14 px on a desktop, 15 on a
     tablet, 13 on a phone, set by the queries below. The renderer reads it
     too (main.js), for the words it draws over the table. */
  --t-min: 14px;
  color-scheme: dark;
}

/* A tablet: a touch screen at least 600 px each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

/* A phone: a touch screen under 600 px one way or the other. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

/* The header before the site's shell fills it (the shell's own rules win). */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-t) max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
  border-bottom: 1px solid var(--line);
}

.page {
  margin: 0;
}

/* ---------- Game layout ---------- */
/* Three layouts (docs/PLATFORMS.md, "Layout"):
   - wide (desktops, tablets held sideways): the score panel, the table and
     the hints and buttons side by side, the table as tall as the screen;
   - upright (phones and tablets held upright, narrow windows): the score in
     a bar over the table and the buttons in a bar under it;
   - a short upright phone: the controls beside the foot of the table;
   - a short landscape screen: compact side panels around the full table.
   No scrolling, zooming, selection or long-press menu over the game: it
   takes no touch gestures (the menus scroll up and down), and main.js stops
   Safari's pinch and the context menu. */
.game-root {
  /* --in-*: the parts of the safe areas that fall inside the game. On the
     page the header keeps the top one; in full screen the game has all four. */
  --in-t: 0px;
  --in-r: var(--safe-r);
  --in-b: var(--safe-b);
  --in-l: var(--safe-l);
  /* The table and the text keep inside the safe areas. Touch controls keep
     16 px further in, so a thumb on one never starts a system gesture, and at
     least 24 px from the screen's bottom, clear of a phone's rounded corners
     and Android's gesture bar. */
  --edge-b: max(8px, var(--in-b));
  --touch-b: max(24px, calc(16px + var(--in-b)));
  --side-l: calc(16px + var(--in-l));
  --side-r: calc(16px + var(--in-r));
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* One row exactly as tall as the game area, so a tall side panel can't
     stretch the table past the bottom of the screen. */
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 320px;
  padding: calc(8px + var(--in-t)) var(--side-r) var(--edge-b) var(--side-l);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
  background: radial-gradient(ellipse at 50% 0%, #0c2c4c 0%, var(--bg) 70%);
}

/* Full screen, with the site's button (docs/PLATFORMS.md, "Full screen"):
   the game is the whole screen, inside all four safe areas, and keeps the top
   middle clear for the site's "Leave full screen" button. */
.game-root:fullscreen {
  --in-t: var(--safe-t);
}

.stage {
  position: relative;
  height: 100%;
  aspect-ratio: 540 / 1060;
  max-width: 100%;
  justify-self: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(0, 0, 0, 0.55);
  background: #05080f;
}

.stage canvas {
  /* Out of the layout, so the canvas's pixel size never feeds back into
     the stage's size. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cc-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding-top: 8px;
}

.cc-left {
  align-items: flex-end;
  text-align: right;
}

.cc-right {
  align-items: flex-start;
}

.cc-label {
  font-size: var(--t-min);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.cc-score {
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(63, 240, 255, 0.45);
  line-height: 1.1;
}

.cc-row {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}

.cc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.cc-replay-box {
  min-width: 130px;
}

.cc-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 4px;
}

.cc-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  border-radius: 3px;
  transition: width 0.25s ease-out;
}

.cc-display {
  width: 100%;
  max-width: 360px;
  min-height: 74px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #020a14;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 22px rgba(63, 240, 255, 0.08);
  text-align: center;
}

.cc-msg {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.5);
  min-height: 1.2em;
}

.cc-sub {
  font-size: var(--t-min);
  color: var(--text);
  margin-top: 4px;
  min-height: 1.2em;
}

.cc-card {
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(11, 33, 56, 0.85);
  border: 1px solid var(--line);
}

.cc-hint {
  margin-top: 4px;
  font-size: var(--t-min);
  line-height: 1.35;
}

.cc-depths {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: var(--t-min);
  display: grid;
  gap: 2px;
}

.cc-depths li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.cc-depths li.done {
  color: var(--accent);
}

.cc-depths li.now {
  color: var(--gold);
  font-weight: 700;
}

/* The controls for the last input used (main.js): keys, touch or a gamepad. */
.cc-help {
  display: none;
}

.cc-in-keys .cc-help-keys,
.cc-in-mouse .cc-help-keys,
.cc-in-touch .cc-help-touch,
.cc-in-pad .cc-help-pad {
  display: block;
}

.cc-keys {
  margin: 6px 0 0;
  font-size: var(--t-min);
  line-height: 1.4;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}

.cc-keys dt {
  color: var(--muted);
}

.cc-keys dd {
  margin: 0;
}

kbd {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  font: 600 var(--t-min) / 1.35 system-ui, sans-serif;
  color: var(--text);
  white-space: nowrap;
}

/* Dive status over the top of the table. */
.cc-dive {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 300px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(2, 10, 20, 0.72);
  border: 1px solid rgba(63, 240, 255, 0.35);
  text-align: center;
  pointer-events: none;
}

/* In full screen the table's top is the screen's: the dive status starts
   below the site's "Leave full screen" button. */
.game-root:fullscreen .cc-dive {
  top: calc(max(8px, var(--safe-t)) + 44px - var(--safe-t));
}

.cc-dive-name {
  font-size: var(--t-min);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-dive .cc-bar > i {
  background: linear-gradient(90deg, #1fb6ff, var(--accent));
}

.cc-dive-time {
  font-size: var(--t-min);
  color: var(--muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  line-height: 1.3;
}

.cc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: auto;
  /* Touch controls sit --touch-b above the screen's bottom; the root's
     padding gives --edge-b of it. */
  margin-bottom: calc(var(--touch-b) - var(--edge-b));
}

.has-menu .cc-controls { visibility: hidden; }

.cc-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(11, 33, 56, 0.88);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: max(15px, var(--t-min));
  font-weight: 700;
  cursor: pointer;
}

.cc-btn:hover {
  border-color: var(--accent);
}

.cc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A gamepad moves the focus through the menus: show where it is. */
.cc-in-pad .overlay .cc-btn:focus,
.cc-in-pad .overlay input:focus {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.cc-launch {
  order: -1;
  flex: 1 0 100%;
  min-height: 52px;
  padding: 10px;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(180deg, #ff6a4d, #c8283f);
  border-color: #ffb3a3;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(255, 106, 77, 0.55);
  animation: cc-launch-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes cc-launch-pulse {
  from {
    box-shadow: 0 0 8px rgba(255, 106, 77, 0.35);
  }
  to {
    box-shadow: 0 0 24px rgba(255, 150, 90, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-launch {
    animation: none;
  }
}

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--in-t)) var(--side-r) var(--touch-b) var(--side-l);
  background: rgba(2, 8, 18, 0.55);
  z-index: 5;
}

.overlay.show {
  display: flex;
}

.overlay.clear {
  background: rgba(2, 8, 18, 0.25);
}

/* In full screen a tall menu starts below "Leave full screen". */
.game-root:fullscreen .overlay {
  padding-top: calc(max(8px, var(--safe-t)) + 52px - var(--safe-t));
}

.menu {
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  overflow: auto;
  /* The menus scroll up and down inside the game, never the page. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(8, 26, 46, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.menu h2 {
  margin: 0 0 4px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--accent);
  background: linear-gradient(100deg, #3ff0ff 0%, #b8fbff 22%, #ffd23f 45%, #ff6fb0 68%, #3ff0ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(63, 240, 255, 0.45));
  animation: cc-title-shimmer 7s linear infinite;
}

@keyframes cc-title-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu h2 {
    animation: none;
  }
}

.menu h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.menu p {
  margin: 6px 0;
  color: var(--muted);
  font-size: max(14px, var(--t-min));
  line-height: 1.4;
}

.menu .big {
  font-size: 32px;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.menu-buttons {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.menu-buttons .cc-btn {
  padding: 11px 12px;
  font-size: 16px;
}

.cc-btn.primary {
  background: linear-gradient(180deg, #19b8d0, #0d7f99);
  border-color: #6ff5ff;
  color: #021018;
}

.scores {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: max(15px, var(--t-min));
  font-variant-numeric: tabular-nums;
}

.scores td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.scores td:first-child {
  color: var(--muted);
  width: 2em;
}

.scores td:nth-child(2) {
  font-weight: 800;
  letter-spacing: 2px;
  text-align: left;
}

.scores td:last-child {
  text-align: right;
}

.scores tr.me td {
  color: var(--gold);
}

.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  text-align: left;
  font-size: var(--t-min);
  margin-top: 8px;
}

.stats span:nth-child(even) {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ach {
  display: grid;
  gap: 6px;
  text-align: left;
  margin-top: 10px;
}

.ach div {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--t-min);
  color: var(--muted);
}

.ach div.got {
  color: var(--text);
  background: rgba(63, 240, 255, 0.1);
}

.ach b {
  display: block;
  color: inherit;
}

.initials {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 10px 0;
}

.initials input {
  width: 8ch;
  min-height: 44px;
  text-align: center;
  font: 800 26px/1.2 system-ui, sans-serif;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: #020a14;
  color: var(--gold);
  /* The name field keeps its own touch behaviour: a tap places the caret. */
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}

.help-list {
  text-align: left;
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: var(--t-min);
  line-height: 1.45;
  color: var(--text);
}

.help-list li {
  margin-bottom: 5px;
}

.cc-toast {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%) translateY(10px);
  max-width: calc(100% - 16px);
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(8, 26, 46, 0.95);
  border: 1px solid var(--gold);
  font-size: var(--t-min);
  font-weight: 700;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 6;
}

.cc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Ads and about ---------- */
.ad-slot {
  margin: 16px auto 0;
  max-width: 970px;
  padding: 0 max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
}

.about {
  max-width: 820px;
  margin: 24px auto 40px;
  padding: 0 max(16px, var(--safe-r)) max(0px, var(--safe-b)) max(16px, var(--safe-l));
  line-height: 1.6;
}

.about h1 {
  font-size: 28px;
  margin: 0 0 8px;
}

.about h2 {
  font-size: 20px;
  margin: 20px 0 8px;
}

.about li {
  margin-bottom: 6px;
}

/* ---------- Wide screens that are short ---------- */
/* The right panel keeps its buttons on screen: the cards a short screen
   can't hold go, least needed first. The depth list repeats the table's
   depth lamps; the controls card is the help screen's in brief. */
@media (max-height: 700px) {
  .cc-depth-card {
    display: none;
  }
}

@media (max-height: 569px) {
  .cc-help-card {
    display: none;
  }
}

/* ---------- Upright: a bar over the table and a bar under it ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) and (min-height: 521px) {
  .game-root {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: calc(6px + var(--in-t)) var(--side-r) var(--touch-b) var(--side-l);
  }

  /* In full screen the bar's top row stands beside "Leave full screen": the
     score left of it, the ball and the replay score right of it, and the
     message line below it. */
  .game-root:fullscreen {
    padding-top: max(8px, var(--in-t));
  }

  .cc-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hud-gap, 0px) minmax(0, 1fr);
    grid-template-areas:
      'score . stats'
      'display display display';
    align-items: center;
    gap: 4px 0;
    padding: 0;
    text-align: left;
  }

  .game-root:fullscreen .cc-left {
    --hud-gap: 60px;
    grid-template-rows: minmax(44px, auto) auto;
    row-gap: 8px;
  }

  .cc-score-box {
    grid-area: score;
    min-width: 0;
  }

  .cc-score-box .cc-label {
    display: none;
  }

  /* Narrow phones: an eight-digit score keeps to its side of the bar. */
  .cc-score {
    font-size: clamp(20px, 6.2vw, 24px);
  }

  .cc-row {
    grid-area: stats;
    gap: 12px;
    min-width: 0;
  }

  .cc-stat {
    font-size: max(14px, var(--t-min));
    text-align: right;
  }

  .cc-stat .cc-label {
    letter-spacing: 0.4px;
  }

  .cc-replay-box {
    min-width: 0;
  }

  .cc-display {
    grid-area: display;
    max-width: none;
    min-height: 0;
    padding: 4px 8px;
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: center;
  }

  .cc-msg {
    font-size: max(14px, var(--t-min));
    min-height: 0;
    white-space: nowrap;
  }

  .cc-sub {
    margin: 0;
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stage {
    grid-row: 2;
    width: auto;
    aspect-ratio: 540 / 1060;
    justify-self: center;
    border-radius: 10px;
  }

  /* The table sits under the bar here, so its top is clear of the button. */
  .game-root:fullscreen .cc-dive {
    top: 8px;
  }

  .game-root:fullscreen .overlay {
    padding-top: calc(max(8px, var(--safe-t)) + 52px);
  }

  .cc-right {
    grid-row: 3;
    flex-direction: row;
    padding: 0;
  }

  .cc-right > .cc-card {
    display: none;
  }

  .cc-controls {
    max-width: none;
    flex-wrap: nowrap;
    margin: 0;
  }

  .cc-icon {
    flex: none;
  }

  .cc-launch {
    order: 0;
    flex: 0 1 auto;
    margin-left: auto;
    min-width: 42%;
    min-height: 44px;
    padding: 0 12px;
  }
}

/* ---------- Compact landscape ---------- */
/* Keep the full table between useful side panels; every orientation plays. */
@media (orientation: landscape) and (max-height: 599px) {
  .game-root { min-height: 0; gap: 8px; }
  .cc-panel { gap: 8px; padding-top: 4px; }
  .cc-display { padding: 6px; }
  .cc-left > .cc-dive { position: static; transform: none; width: 100%; padding: 6px; }
  .cc-left .cc-dive-name { white-space: normal; line-height: 1.3; }
  .cc-msg { font-size: var(--t-min); letter-spacing: 0; }
  .cc-stat { font-size: var(--t-min); }
  .cc-row { gap: 8px; flex-wrap: wrap; }
  .cc-replay-box { min-width: 0; }
  .cc-right > .cc-card:not(:first-child) { display: none; }
  .cc-launch { min-height: 44px; }
  .cc-controls { gap: 8px; }
  .cc-btn { padding: 8px; }
  .menu { max-width: 600px; padding: 10px 16px; }
  .menu h2 { font-size: 26px; }
  .menu-buttons { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 8px; }
}

/* A short upright phone: put the toolbar beside the foot of the table.
   This saves a bottom row without placing a control over the playfield. */
@media (max-width: 480px) and (max-height: 700px) and (orientation: portrait) {
  .game-root {
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-rows: 44px minmax(0, 1fr);
    padding-left: calc(8px + var(--in-l));
  }
  .cc-left, .game-root:fullscreen .cc-left {
    grid-column: 1 / -1;
    grid-template-areas: 'score . stats' 'display . stats';
    grid-template-rows: 22px 18px;
    row-gap: 4px;
    padding-left: 8px;
    --hud-gap: 0px;
  }
  .game-root:fullscreen .cc-left { --hud-gap: 60px; }
  .cc-score { font-size: 20px; }
  .cc-row { gap: 8px; }
  .cc-display { padding: 0; border: 0; background: none; box-shadow: none; justify-content: flex-start; }
  .cc-msg { font-size: var(--t-min); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
  .cc-sub { display: none; }
  .stage { grid-column: 1; }
  .cc-right { grid-row: 2; grid-column: 2; align-items: flex-end; }
  .cc-controls { flex-direction: column; align-self: flex-end; }
  .cc-controls .cc-btn { padding: 4px 2px; font-size: 13px; width: 52px; }
  .cc-launch { margin: 0; min-width: 0; min-height: 64px; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-bar > i, .cc-toast { transition: none; }
}