/* Ocean — deep water table, sun caustics, sandy shell tiles, coral accent. */

body[data-theme="ocean"] {
  --font-display: "Trebuchet MS", "Verdana", ui-rounded, system-ui, sans-serif;
  --font-body: "Verdana", "Trebuchet MS", system-ui, sans-serif;
  --font-tile-num: "Trebuchet MS", sans-serif;

  --bg: #d9f1f4;
  --panel: #f4fcfd;
  --ink: #174754;
  --ink-soft: #46798a;
  --ink-faint: #7fa9b4;

  --accent: #ff7f66;             /* coral */
  --accent-deep: #e8654c;
  --accent-ink: #ffffff;
  --mahj-bg: #f2b422;            /* sunken treasure */
  --mahj-ink: #4a3305;

  /* Sunlit lagoon: bright shallows, sun rays, sandy glow at the bottom. */
  --felt: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .5), transparent 55%),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 30px),
          radial-gradient(circle at 24% 70%, rgba(255, 255, 255, .2) 0 26px, transparent 27px),
          radial-gradient(circle at 72% 40%, rgba(255, 255, 255, .16) 0 34px, transparent 35px),
          radial-gradient(ellipse at 50% 115%, rgba(244, 226, 178, .55), transparent 55%),
          linear-gradient(180deg, #8edbe4, #55bccd 65%, #3ba9bd);
  --felt-ink: #10535f;
  --felt-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 -14px 36px rgba(21, 96, 110, .25);

  --chip-bg: #cdeef3;
  --chip-ink: #17708a;
  --east-bg: #f2b422;
  --east-ink: #4a3305;

  /* Tiles wash up sandy; backs are scalloped waves. */
  --tile-bg: linear-gradient(178deg, #fdfaf0, #f1e7d2);
  --tile-border: 1.5px solid #c9b98f;
  --tile-shadow: 0 3px 7px rgba(0, 0, 0, .45);
  --tile-back: repeating-radial-gradient(circle at 50% 130%, #48b4c6 0 9px, #339fb3 9px 18px);
  --tile-back-border: 1.5px solid #ffffff;
  --tile-num: #0d5068;
  --tile-sub: #988760;
  --tile-joker-bg: linear-gradient(178deg, #e8f6f4, #cfeae6);
  --tile-flower-bg: linear-gradient(178deg, #ffeee8, #ffd9cd);
  --exposure-bg: rgba(255, 127, 102, .16);

  --radius-panel: 22px;
  --radius-btn: 12px;
  --radius-tile: 10px;
  --btn-bg: #cdeef3;
  --btn-ink: #17708a;
  --btn-border: 1.5px solid #9fd8e2;
  --input-border: 1.5px solid #a8dbe4;
  --shadow: 0 4px 16px rgba(38, 116, 132, .18);
  --shadow-hover: 0 6px 18px rgba(38, 116, 132, .3);

  --anim-tile-in: .32s;
  --anim-tile-in-dy: 16px;

  --cs-a: #2b6cb0;
  --cs-b: #d1554a;
  --cs-c: #2e8a5c;
  --cs-f: #c9880f;
}

body[data-theme="ocean"] .tile { color: #0d5068; }

/* Bubble pips rise in soft aqua rows. */
body[data-theme="ocean"] .tile[data-suit="dot"] .t-glyph {
  white-space: pre-line;
  font-size: .85rem;
  line-height: 1.3;
  letter-spacing: 3px;
  text-indent: 3px;
  text-align: center;
  color: #1a7fa0;
  font-weight: 900;
}
body[data-theme="ocean"] .tile.small[data-suit="dot"] .t-glyph {
  font-size: .48rem; line-height: 1.25; letter-spacing: 1.5px; text-indent: 1.5px;
}

body[data-theme="ocean"] #brand { color: var(--accent-deep); }
body[data-theme="ocean"] .seat-label.active-turn {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 14px 2px rgba(255, 127, 102, .55);
}