/* Riviera theme — sand, sea and sun. Only applies when <html data-theme="riviera">; styles.css stays the base. */
[data-theme="riviera"] {
  --bg: #FBF3E0;
  --surface: #FFFDF8;
  --surface-2: #EFE6D2;
  --line: rgba(18, 48, 74, .12);
  --line-2: rgba(18, 48, 74, .26);
  --red: #FF5A3C;       /* coral */
  --red-glow: #D93A1E;
  --gold: #B27F00;      /* lemon ochre */
  --sea: #14A9BD;       /* turquoise */
  --sea-deep: #0B7C93;
  --sun: #FFCE3A;
  --text: #12304A;
  --muted: #6B7C8A;
  --shadow: 0 1px 0 rgba(18, 48, 74, .04), 0 10px 24px -18px rgba(18, 48, 74, .45);
}

/* Summer sky, a big low sun, and a coral beach-awning with a scalloped edge. */
[data-theme="riviera"] .mesh {
  position: absolute; inset: 0 0 auto 0; height: 620px;
  -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(circle at 50% 0, var(--surface) 0 9px, transparent 10px) 0 13px / 20px 11px repeat-x,
    repeating-linear-gradient(90deg, var(--red) 0 20px, var(--surface) 20px 40px) 0 0 / 100% 14px no-repeat,
    radial-gradient(circle at 82% 176px, var(--sun) 0 70px, rgba(255, 206, 58, .38) 71px 92px, rgba(255, 206, 58, .16) 93px 116px, transparent 117px),
    linear-gradient(#86D3F2, #C9ECF7 260px, var(--bg) 520px);
}
[data-theme="riviera"] .hero { padding-top: calc(30px + env(safe-area-inset-top)); }
[data-theme="riviera"] .venue { color: var(--text); opacity: .75; }
[data-theme="riviera"] .meta { color: var(--text); }

/* Waves rolling in under the hero. */
[data-theme="riviera"] .hero::after {
  content: ''; display: block; position: relative; left: 50%; width: 100vw; height: 34px; margin: 26px 0 -8px -50vw;
  background:
    radial-gradient(circle at 50% 100%, var(--bg) 0 15px, transparent 16px) 0 18px / 32px 16px repeat-x,
    radial-gradient(circle at 50% 100%, var(--sea) 0 15px, transparent 16px) 16px 8px / 32px 16px repeat-x,
    radial-gradient(circle at 50% 100%, #8FDCE4 0 15px, transparent 16px) 0 0 / 32px 16px repeat-x,
    linear-gradient(transparent 14px, #8FDCE4 14px 22px, var(--sea) 22px 30px, var(--bg) 30px);
}
[data-theme="riviera"] .admin .hero::after { margin-top: 18px; }

/* Type: same bold fonts as the cage theme. "Open" is solid coral here; an outline is too faint on a light sky. */
[data-theme="riviera"] .t2,
[data-theme="riviera"] .desk-title span { color: var(--red); -webkit-text-stroke: 0; }

/* Surfaces lift off the sand with a soft shadow instead of a glow. */
[data-theme="riviera"] .match,
[data-theme="riviera"] .team,
[data-theme="riviera"] .day,
[data-theme="riviera"] .findme,
[data-theme="riviera"] .qr-card,
[data-theme="riviera"] .cat { box-shadow: var(--shadow); }
[data-theme="riviera"] .logo { box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px rgba(18, 48, 74, .25); }
[data-theme="riviera"] .cat { background: var(--surface); }
[data-theme="riviera"] .cat.on { background: var(--red); box-shadow: 0 10px 22px -10px var(--red); }
[data-theme="riviera"] .live-pill { background: rgba(255, 253, 248, .7); }
[data-theme="riviera"] .live-pill.on { background: var(--red); border-color: var(--red); color: #fff; }
[data-theme="riviera"] .live-pill.on::before { background: #fff; }
[data-theme="riviera"] .findme.set { background: linear-gradient(100deg, rgba(255, 90, 60, .14), var(--surface) 60%); }

/* "Your next match" becomes a sea-blue ticket. */
[data-theme="riviera"] .mine { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 22px, transparent 22px 44px), linear-gradient(135deg, var(--sea), var(--sea-deep)); border: 0; color: #FFFDF8; box-shadow: 0 16px 30px -18px var(--sea-deep); }
[data-theme="riviera"] .mine::after { border-color: rgba(255, 255, 255, .12); }
[data-theme="riviera"] .mine .k,
[data-theme="riviera"] .mine .count { color: var(--sun); }
[data-theme="riviera"] .mine .when small,
[data-theme="riviera"] .mine .vs { color: rgba(255, 253, 248, .75); }
[data-theme="riviera"] .mine .vs b,
[data-theme="riviera"] .mine .court { color: #FFFDF8; }

[data-theme="riviera"] .day.on { background: var(--sea-deep); border-color: var(--sea-deep); color: var(--surface); }
[data-theme="riviera"] .day.on span,
[data-theme="riviera"] .day.on em { color: rgba(255, 253, 248, .7); }

/* Court colours stay as the stripe and swatch; the label goes navy so it reads on a light card. */
[data-theme="riviera"] .court { color: var(--text); }
[data-theme="riviera"] .court::before { box-shadow: none; border-radius: 50%; }
[data-theme="riviera"] .match.mine-m { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), var(--shadow); }
[data-theme="riviera"] .match.is-live { background: linear-gradient(100deg, rgba(255, 90, 60, .10), var(--surface) 55%); }
[data-theme="riviera"] .match.is-final { border-color: var(--gold); background: linear-gradient(120deg, rgba(244, 196, 48, .28), var(--surface) 60%); }
[data-theme="riviera"] .team.me { background: linear-gradient(100deg, rgba(255, 90, 60, .12), var(--surface) 60%); }
[data-theme="riviera"] .rules li { color: var(--text); }

[data-theme="riviera"] .tabbar { background: rgba(255, 253, 248, .9); box-shadow: 0 14px 34px -10px rgba(18, 48, 74, .4); }
[data-theme="riviera"] .sheet-bg { background: rgba(18, 48, 74, .5); }
[data-theme="riviera"] .act.edit { color: var(--text); }

/* Summer touches: lemon seed badges for winners, turquoise section labels. */
[data-theme="riviera"] .side.won .seed { background: var(--sun); color: var(--text); }
[data-theme="riviera"] .h2 small { color: var(--sea-deep); }
[data-theme="riviera"] .cons-h small { color: var(--gold); }
[data-theme="riviera"] .tabbar button.on { box-shadow: 0 8px 18px -8px var(--red); }