/* Neon Tide — generated from tokens.json */
/* Source of truth: tokens.json in the Neon Tide design system. Regenerate this file from there; do not edit values here.
   Load order: tokens.css, then neon-tide.css. */

/* Press Start 2P is not in the repo yet. Add the woff2 at public/fonts/press-start-2p.woff2 (SIL OFL 1.1),
   then uncomment this rule. Until then arcade text falls back to the system monospace.
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

:root, [data-theme="dark"] {
  --bg-0: #070a14; /* Page background. Near-black with a blue tint; flat, never a gradient. */
  --bg-1: #0d1124; /* Board well and sunken fields (share-link input). Shows through the 1px grid gaps. */
  --surface-1: #151a33; /* Raised panels: turn banner, modal, sheet, tray, stat tiles. */
  --surface-2: #20274d; /* Toasts and hover fills on ghost controls. */
  --line: #2c3566; /* Decorative hairlines and pressed fills. Not a control boundary (below 3:1). */
  --line-strong: #6b77c2; /* Control and panel borders. 4.7:1 on bg-0, 4.1:1 on surface-1, 3.4:1 on surface-2. */
  --text-primary: #f4f6ff; /* Body copy and headings on bg-0 (18.3:1), bg-1 (17.3:1), surface-1 (15.8:1), surface-2 (13.3:1) and neutral-top (10.0:1). */
  --text-secondary: #b3bcea; /* Hints, captions, coordinate labels on bg-0 (10.6:1), bg-1 (10.0:1), surface-1 (9.2:1), surface-2 (7.7:1). */
  --text-disabled: #7a84b8; /* Disabled labels on bg-0 (5.4:1), surface-1 (4.7:1), surface-2 (3.9:1). Disabled text is exempt from AA; it still clears 3:1. */
  --on-bright: #070a14; /* Text and glyphs on any lit face: miss (12.9:1), hit (7.1:1), sunk (6.7:1), ship and action (15.2:1), place-valid (15.4:1). Never white on a lit face. */
  --state-unknown-top: #5053cc; /* Top face of an untargeted cell: dim indigo, no glyph. 3.0:1 against the bg-1 well so every cell is findable. */
  --state-unknown-left: #34379a; /* Left side face of the unknown cube. Decorative: never the only cue. */
  --state-unknown-right: #222468; /* Right side face of the unknown cube, the darkest of the three. */
  --state-miss-top: #2ee6f5; /* Top face of a miss: cyan with a small dot. As text on bg-0 12.9:1. */
  --state-miss-left: #1795b5; /* Left side face of the miss cube. Decorative: never the only cue. */
  --state-miss-right: #0c5c7a; /* Right side face of the miss cube, the darkest of the three. */
  --state-hit-top: #ff6f1f; /* Top face of a hit: hot orange with an X. As text on bg-0 7.1:1. */
  --state-hit-left: #c24a08; /* Left side face of the hit cube. Decorative: never the only cue. */
  --state-hit-right: #7d2b05; /* Right side face of the hit cube, the darkest of the three. */
  --state-sunk-top: #ff52bd; /* Top face of a sunk cell (Sink Cube): magenta with a solid block and the X cut out. As text on bg-0 6.7:1. */
  --state-sunk-left: #b81f84; /* Left side face of the sunk cube. Decorative: never the only cue. */
  --state-sunk-right: #73135a; /* Right side face of the sunk cube, the darkest of the three. */
  --state-ship-top: #ffe23a; /* Top face of your own ship: yellow with a ring. Yellow always means you. */
  --state-ship-left: #c79f10; /* Left side face of the ship cube. Decorative: never the only cue. */
  --state-ship-right: #866708; /* Right side face of the ship cube, the darkest of the three. */
  --neutral-top: #2f396e; /* Top face of secondary and icon buttons. Carries text-primary (10.0:1) or text-secondary (5.8:1). */
  --neutral-left: #1f2650; /* Left side face of neutral cubes. */
  --neutral-right: #10142b; /* Right side face of neutral cubes. */
  --action-top: var(--state-ship-top); /* Top face of the primary and fire buttons and the checked segment. Label in on-bright. */
  --action-left: var(--state-ship-left); /* Left side face of action cubes. */
  --action-right: var(--state-ship-right); /* Right side face of action cubes. */
  --place-valid: #5cffb0; /* Placement preview that fits: solid outline and ring. 14.5:1 on the bg-1 well; 3.0:1 lighter than place-invalid, so the pair never rests on hue. */
  --place-invalid: #f0364f; /* Placement preview that collides or leaves the grid: dashed outline and hatch. 4.7:1 on the bg-1 well. A mark, not a text colour. */
  --cursor: #ffffff; /* Targeting cursor: corner brackets around the selected cell. 6.0:1 on state-unknown-top. */
  --focus: var(--cursor); /* Keyboard focus ring, 2px solid with a 2px gap. 19.7:1 on bg-0, 17.1:1 on surface-1, 14.3:1 on surface-2. */
  --turn-you: var(--state-ship-top); /* Your turn: banner title, rule and active-board outline. As text on bg-0 15.2:1, on surface-1 13.1:1. */
  --turn-opp: #b3a6ff; /* Opponent's turn and waiting states. As text on bg-0 9.2:1, on surface-1 7.9:1. */
  --scrim: rgba(4, 6, 14, 0.78); /* Backdrop behind modals and sheets. */
}
:root {
  --space-1: 4px; /* Base unit. Segment gaps, board bleed into the page gutter. */
  --space-2: 8px; /* Page gutter on phones, gaps between stacked buttons, icon to label. */
  --space-3: 12px; /* Gap between screen regions, panel padding. */
  --space-4: 16px; /* Button side padding, modal padding. */
  --space-6: 24px; /* Modal top padding, page gutter on tablet and desktop. */
  --space-8: 32px; /* Gap between the two boards on tablet and desktop. */
  --space-12: 48px; /* Vertical breathing room on the home and result screens. */
  --radius-none: 0; /* Cells, pips, ship pieces. Cubes are square. */
  --radius-sm: 2px; /* Buttons, segments, inputs, toasts. */
  --radius-md: 4px; /* Panels, modals, sheets, the segmented track. */
  --glow-1: 6px; /* Low glow that stays on: the most recent shot. */
  --glow-2: 12px; /* Standard glow: the targeting cursor, a lifted ship, the your-turn rule. */
  --glow-3: 20px; /* Peak glow, for the moment of a hit or a sinking only. */
  --cell-min: 32px; /* Smallest board cell. Ten of these plus the label column fit a 360px phone. */
  --target-min: 44px; /* Smallest tap target for any control that is not a board cell. */
  --cube-depth: 6px; /* Height of the two side faces under a cube. */
  --cube-notch: 3px; /* How far the top face dips into the side faces at the centre. */
  --cube-depth-pressed: 2px; /* Side-face height while a button is pressed or disabled. */
  --board-gap: 1px; /* Gap between cells; bg-1 shows through as the grid line. */
  --board-label: 16px; /* Width of the row-number column and height of the column-letter row. */
  --dur-quick: 120ms; /* Cursor lock, shot fired, button release, glyph pop. */
  --dur-flip: 180ms; /* One colour flip. Also the board shake on a hit. */
  --dur-turn: 240ms; /* Turn banner and toast entrance. */
  --dur-bounce: 480ms; /* Sunk bounce. */
  --dur-stagger: 60ms; /* Delay between neighbouring cells when a ship flips and bounces. */
  --dur-hold: 600ms; /* Pause after a result before the turn changes, so the result can be read. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* Entrances and the cursor. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Sunk bounce, glyph pop, toast entrance. */
  --ease-arcade: steps(3, end); /* Colour flip and shake: three hard steps each way, no tweening. */
  --font-arcade: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-arcade-display: 400 24px/32px var(--font-arcade); /* Win and lose headline. 14 characters a line at 390px; keep to 12. */
  --text-arcade-title: 400 16px/24px var(--font-arcade); /* Screen titles, turn banner, modal titles. 22 characters a line at 390px; keep to 18. */
  --text-arcade-label: 400 12px/16px var(--font-arcade); /* Toast titles and status lines. The smallest size a player must read. 29 characters a line at 390px; keep to 24. */
  --text-arcade-micro: 400 8px/12px var(--font-arcade); /* Decorative captions that repeat something said elsewhere. Never the only carrier of information. */
  --text-sans-body: 400 16px/24px var(--font-sans); /* Body copy, rules. 45 to 60 characters a line. */
  --text-sans-small: 400 14px/20px var(--font-sans); /* Hints, toast body, fleet names, input text. */
  --text-sans-button: 700 16px/20px var(--font-sans); /* Button and segment labels, uppercase. */
  --text-sans-caption: 600 12px/16px var(--font-sans); /* Small labels and banner hints. The smallest sans size for anything a player must read. */
  --text-sans-coord: 700 10px/12px var(--font-sans); /* Grid coordinates A to J and 1 to 10 only. */
}
.arcade-display {
  font-family: var(--font-arcade);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.arcade-title {
  font-family: var(--font-arcade);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.arcade-label {
  font-family: var(--font-arcade);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.arcade-micro {
  font-family: var(--font-arcade);
  font-size: 8px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.sans-button {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sans-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sans-coord {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0;
}