/* Michigander Euchre theme E: Lake Michigan Beach. Sand, driftwood, lake-blue felt, sunny.
   Sunny cream panels, cherry-red accents, light maple rail, bright green felt, script wordmark. Light theme. */
:root[data-theme="beach"] {
  color-scheme: light;
  --theme-name: "Lake Michigan Beach";
  --theme-color: #f8e9c7;
  --bg: #f4e4bf;
  --bg-2: #fbedcd;
  --scenery: linear-gradient(180deg, rgba(255, 250, 238, .25), rgba(255, 250, 238, .35)), url('/themes/art/beach-bg.svg');
  --panel: rgba(255, 249, 235, .94); /* light side menu (was falling back to navy) */
  --surface: rgba(255, 245, 223, .97);
  --surface-2: #fae9c2;
  --surface-glass: rgba(254, 243, 216, .95);
  --line: #dcc59c;
  --line-strong: #c36a36;
  --text: #3a2a1e;
  --text-soft: #5a4636;
  --muted: #86704f;
  --accent: #c36a36;
  --accent-hi: #d38354;
  --accent-ink: #fff9ea;
  --accent-grad: linear-gradient(180deg, #d38354, #b25d2d);
  --accent-shadow: 0 3px 0 #7b401d;
  --secondary-bg: #fffaf0;
  --secondary-ink: #924f28;
  --secondary-line: #cfa77c;
  --danger: #b8312f; --danger-ink: #fff9ea;
  --ok: #3c7996; --ok-ink: #42c2fa;
  --warn: #c47a1a; --warn-ink: #fffaf0;
  --plan: #6d7f8f; --plan-ink: #f6f9fc;
  --input-bg: #fffaf0;
  --focus-ring: 0 0 0 3px rgba(195, 106, 54, .25);
  --overlay: rgba(60, 40, 20, .45);
  --font-ui: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-display: "Brush Script MT", "Segoe Script", "Lobster", "Comic Sans MS", cursive;
  --display-weight: 700;
  --display-case: none;
  --display-spacing: .01em;
  --display-color: #c36a36;
  --heading-color: #b25d2d;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 10px 26px rgba(90, 60, 30, .25);
  --shadow-sm: 0 3px 8px rgba(90, 60, 30, .22);
  --felt: url('/themes/art/beach-felt.svg') center / cover no-repeat;
  --felt-color: #336882;
  --felt-line: rgba(255, 244, 220, .3);
  --rail: linear-gradient(155deg, #d3c6ae 0%, #a39278 38%, #c2b394 62%, #86755c 100%); /* weathered driftwood */
  --rail-width: 14px;
  --rail-shadow: 0 14px 34px rgba(90, 60, 30, .35), inset 0 0 0 2px rgba(255, 246, 225, .4), inset 0 0 36px rgba(0, 0, 0, .3);
  --seat-bg: rgba(255, 245, 223, .95);
  --seat-line: #c36a36;
  --seat-ink: #3a2a1e;
  --seat-active: #c36a36;
  --team-ns: #2b6cb0;
  --team-ew: #c36a36;
  --card-face: #fffaf0;
  --card-ink: #222;
  --card-red: #c0262d;
  --card-radius: 10px;
  --card-shadow: 0 4px 10px rgba(60, 40, 20, .35);
  --card-back-url: url('/themes/art/beach-back.svg');
  --theme-back-url: url('/themes/art/beach-back.svg');
  --start-art: url('/themes/art/beach-start.svg');
  --start-glow: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .6), transparent 60%);
}

/* scenery sits at the bottom of the window and fills it */

/* v1.3.4: scenery is one fixed, full-viewport layer behind everything (no repeat, no gap at the bottom). */
:root[data-theme="beach"] { --bg-image: none; background: var(--bg); }
:root[data-theme="beach"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--scenery); background-size: 100% 100%, cover; background-position: center, center bottom; background-repeat: no-repeat; }
:root[data-theme="beach"] body { background: transparent !important; }
:root[data-theme="beach"] #eu-start { background-color: var(--bg) !important; background-image: var(--start-glow), var(--scenery) !important; background-size: 100% 100%, 100% 100%, cover !important; background-position: center, center, center bottom !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }