@charset "utf-8";
/* Under the sea: blue water with light from above, bubbles rising, fish and a submarine. */
:root[data-theme="sea"] {
  --bg: #0b4f74; --panel: #f0fbff; --ink: #0b2e44; --muted: #4f7a90; --line: #c8e7f3;
  --accent: #ff7a59; --accent-ink: #ffffff; --mover: #ffeee8; --die: #ffffff; --die-edge: #7fc8e0;
  --pip: #0b4f74; --held: #ffd166; --field: #ffffff; --good: #1d8a6b; --bad: #d64545;
  --title: #ffffff; --title-font: "Lilita One", "Arial Black", sans-serif; --name-font: "Lilita One", "Arial Black", sans-serif;
  --page-ink: #ffffff; --page-muted: #cdeefa; --radius: 18px; --mark: "🐠";
  --pattern: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255, 255, 255, .35), transparent 70%), linear-gradient(#1a7fae, #0b4f74 45%, #062f48);
}
[data-theme="sea"] h1 { font-size: 46px; font-weight: 400; text-shadow: 0 3px 0 #062f48; }
[data-theme="sea"] .tray-head .name, [data-theme="sea"] .tray-head .total { font-weight: 400; }
[data-theme="sea"] .tray-head .total { color: #ff7a59; font-size: 27px; }
[data-theme="sea"] .card { box-shadow: 0 6px 18px rgba(0, 30, 50, .35); }
[data-theme="sea"] .die:not(.blank) { border-radius: 14px; box-shadow: inset 0 -4px 0 rgba(127, 200, 224, .35); }
[data-theme="sea"] .die.held { box-shadow: 0 0 0 3px var(--held), 0 0 14px rgba(255, 209, 102, .8); }
/* Bubbles rising, all the time. */
[data-theme="sea"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 20px 20px, transparent 5px, rgba(255, 255, 255, .7) 6px, transparent 7px),
    radial-gradient(circle at 120px 140px, transparent 3px, rgba(255, 255, 255, .6) 4px, transparent 5px),
    radial-gradient(circle at 70px 230px, transparent 7px, rgba(255, 255, 255, .5) 8px, transparent 9px);
  background-size: 200px 300px; animation: bubbles 12s linear infinite;
}
@keyframes bubbles { to { background-position: 0 -300px; } }
/* Sand and seaweed along the bottom. */
[data-theme="sea"] body::after {
  content: "🌿🪸🌿🐚🌿🪸"; position: fixed; left: 0; right: 0; bottom: -6px; z-index: 0; pointer-events: none; font-size: 40px; letter-spacing: 6vw;
  white-space: nowrap; text-align: center; background: linear-gradient(transparent 40%, #d9c48f 40%); opacity: .7;
}
[data-theme="sea"] .ambient .a1 { display: block; top: 30%; left: -60px; font-size: 32px; animation: fish 18s linear infinite 2s; }
[data-theme="sea"] .ambient .a1::before { content: "🐟"; display: inline-block; transform: scaleX(-1); }
@keyframes fish { 0% { transform: translate(0, 0); } 20% { transform: translate(40vw, 20px); } 40%, 100% { transform: translate(calc(100vw + 120px), -10px); } }
[data-theme="sea"] .ambient .a2 { display: block; top: 55%; right: -80px; font-size: 40px; animation: sub 30s linear infinite 8s; }
[data-theme="sea"] .ambient .a2::before { content: "🐳"; }
@keyframes sub { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(calc(-100vw - 160px)); } }
[data-theme="sea"] .ambient .a3 { display: block; top: 14%; right: 6%; font-size: 30px; animation: jelly 6s ease-in-out infinite; }
[data-theme="sea"] .ambient .a3::before { content: "🪼"; }
@keyframes jelly { 50% { transform: translateY(-30px) scaleY(1.15); } }