/* The Deep Sea world (sea.js builds the scenery and dresses Pib; skins.js switches worlds).
   Everything here is under body.skin-sea, so the casino is untouched when it's off.

   The look: sunlit teal fading into the deep, sea-glass panels with brass rivets, round friendly
   Fredoka type that bobs gently instead of neon that hums, aqua light instead of gold, coral
   instead of hot pink, and treasure gold kept for the winners. */

body.skin-sea {
  --sea-abyss: #031a2e; --sea-deep: #052c4a; --sea-mid: #0b4a6e; --sea-teal: #12a3a8;
  --sea-aqua: #7fe8ff; --sea-ice: #bff6ff; --sea-foam: #e6fdff; --sea-pearl: #f4feff;
  --sea-coral: #ff7a6b; --sea-coral-soft: #ffaba0; --sea-gold: #ffd46b; --sea-gold-deep: #e9b43a;
  --sea-brass: #d9973f; --sea-brass-hi: #ffe6a8; --sea-brass-lo: #6e3d12;
  --sea-glass: linear-gradient(170deg, rgba(160,240,255,.16), rgba(10,72,104,.5) 38%, rgba(4,34,56,.86));
  --sea-panel: rgba(4,36,58,.78);
  --sea-line: rgba(127,232,255,.38);
  --sea-round: "Fredoka", "Quicksand", system-ui, sans-serif;
  /* rivets in the corners of a panel: brass studs */
  --sea-rivets: radial-gradient(circle at 1.1vw 1.1vw, var(--sea-brass-hi) .16vw, var(--sea-brass) .26vw, var(--sea-brass-lo) .34vw, transparent .38vw),
                radial-gradient(circle at calc(100% - 1.1vw) 1.1vw, var(--sea-brass-hi) .16vw, var(--sea-brass) .26vw, var(--sea-brass-lo) .34vw, transparent .38vw),
                radial-gradient(circle at 1.1vw calc(100% - 1.1vw), var(--sea-brass-hi) .16vw, var(--sea-brass) .26vw, var(--sea-brass-lo) .34vw, transparent .38vw),
                radial-gradient(circle at calc(100% - 1.1vw) calc(100% - 1.1vw), var(--sea-brass-hi) .16vw, var(--sea-brass) .26vw, var(--sea-brass-lo) .34vw, transparent .38vw);
  /* the house tokens, pointed at the sea */
  --gx-gold: #9ff0ff; --gx-gold-deep: #3fc6d9; --gx-pink: #ff7a6b; --gx-pink-soft: #ffaba0; --gx-ivory: #f4feff;
  --gx-glass: var(--sea-glass); --gx-line: rgba(127,232,255,.35); --gx-hair: rgba(191,246,255,.16);
  --gx-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1.6vw 3.4vw -1vw rgba(0,12,24,.75);
  background: var(--sea-abyss);
}

/* ================= the scenery: the deep through a long lens ================= */
#sea { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--sea-abyss); }
body.skin-sea #bg, body.skin-sea .casino-room, body.skin-sea .back-sign, body.skin-sea .room-beat { display: none; }
.sea-paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the sun, somewhere up through the surface, and a slow shimmer of it */
.sea-sun { position: absolute; left: 22%; top: -38%; width: 56%; height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200,250,255,.42), rgba(120,220,240,.14) 55%, transparent); filter: blur(2.6vw);
  animation: sea-breathe 9s ease-in-out infinite alternate; }
.sea-caustics { position: absolute; inset: -10% -10% 45%; opacity: .2; mix-blend-mode: soft-light; filter: blur(.7vw); background-size: 52vw 52vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.011 .015' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 1 0 0 0 0 1 -7 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  animation: sea-pan 60s linear infinite; }
@keyframes sea-pan { to { background-position: 52vw 26vw; } }

/* shafts of light, soft as smoke, swaying with the surface */
.sea-rays i { position: absolute; top: -14%; left: var(--x); width: var(--w); height: 92%; opacity: var(--o); mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(210,252,255,.38), rgba(160,235,250,.1) 50%, rgba(160,235,250,0) 86%);
  transform: skewX(-14deg); transform-origin: 50% 0; filter: blur(2.4vw);
  animation: sea-ray var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes sea-ray { from { transform: skewX(-14deg) translateX(0); } to { transform: skewX(-8deg) translateX(2.4vw); opacity: calc(var(--o) * .4); } }

/* far off along an unseen reef: a glow, and the bioluminescence in it, out of focus */
.sea-horizon { position: absolute; left: -5%; right: -5%; top: 64%; height: 22%;
  background: radial-gradient(60% 100% at 50% 50%, rgba(80,210,230,.22), rgba(140,110,255,.08) 55%, transparent 80%); filter: blur(1.6vw); }
.sea-band { position: absolute; inset: 0 -3vw; animation: sea-band 50s ease-in-out infinite alternate; }
@keyframes sea-band { to { transform: translateX(2.6vw); } }
.sea-b { position: absolute; border-radius: 50%; opacity: var(--o); background: radial-gradient(circle, var(--c) 0%, var(--c) 36%, transparent 70%);
  animation: sea-glow var(--t) ease-in-out infinite alternate, sea-wander calc(var(--t) * 4) ease-in-out infinite alternate; }
@keyframes sea-glow { from { opacity: var(--o); } to { opacity: calc(var(--o) * .45); } }
@keyframes sea-wander { to { translate: var(--dx) var(--dy); } }
@keyframes sea-breathe { from { opacity: .85; transform: scale(1); } to { opacity: 1; transform: scale(1.05); } }

/* now and then something huge goes by, far off in the haze */
.sea-whale { position: absolute; left: 0; top: 34%; width: 34vw; fill: rgba(2,22,40,.55); filter: blur(1.4vw); opacity: 0;
  animation: sea-whale 80s linear 8s infinite; }
@keyframes sea-whale { 0% { transform: translateX(-40vw) translateY(2vh); opacity: 0; } 6% { opacity: 1; } 46% { transform: translateX(110vw) translateY(-4vh); opacity: 1; } 47%, 100% { transform: translateX(110vw); opacity: 0; } }

/* marine snow, and bubbles out of focus drifting up */
.sea-snow i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(220,250,255,.4); filter: blur(.5px); opacity: 0;
  animation: sea-snow var(--d) linear var(--dl) infinite; }
@keyframes sea-snow { 0% { opacity: 0; transform: translate(0, 0); } 15%, 85% { opacity: .6; } 100% { opacity: 0; transform: translate(3vw, 24vh); } }
.sea-bubbles i { position: absolute; left: var(--x); bottom: -4vh; width: var(--s); height: var(--s); border-radius: 50%; filter: blur(var(--bl)); opacity: 0;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55) 0 14%, rgba(180,240,255,.1) 40%, rgba(220,252,255,.3) 68%, transparent 72%);
  animation: sea-rise var(--d) ease-in var(--dl) infinite; }
@keyframes sea-rise {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; } 10% { opacity: var(--o); }
  33% { transform: translate(var(--sw), -36vh) scale(.85); } 66% { transform: translate(calc(var(--sw) * -1), -72vh) scale(1); }
  90% { opacity: var(--o); } 100% { transform: translate(0, -108vh) scale(1.15); opacity: 0; } }

/* Pib's own breath stays crisp: he's the one thing in focus */
.pib-breath { position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  border: 1px solid rgba(225,252,255,.8); background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.9) 0 12%, rgba(255,255,255,.08) 30%, rgba(160,240,255,.12) 70%, rgba(255,255,255,.3) 100%);
  box-shadow: inset 0 0 .3vw rgba(255,255,255,.3); }

/* off the lobby and the menu, the water darkens a little so the cards read */
.sea-wash { position: absolute; inset: 0; background: radial-gradient(70% 62% at 50% 44%, rgba(2,22,40,.35), rgba(2,14,28,.55)); opacity: 0; transition: opacity .8s; }
body.skin-sea:not(.lobby):not(.menu) .sea-wash { opacity: 1; }
.sea-vignette { position: absolute; inset: 0; background: radial-gradient(140% 110% at 50% 42%, transparent 50%, rgba(1,8,18,.78) 100%); }
.sea-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; }

/* ================= the type ================= */
body.skin-sea .gx-neon, body.skin-sea .gx-neon.pink {
  font-family: var(--sea-round); font-weight: 600; font-size: 5.6vw; line-height: 1.1; letter-spacing: -.01em; padding: 0 .2em;
  color: var(--sea-foam); -webkit-text-stroke: 0;
  text-shadow: 0 .05em 0 #0a4060, 0 .1em .25em rgba(0,20,40,.5), 0 0 .5em rgba(127,232,255,.5), 0 0 1.2em rgba(60,200,240,.3);
  animation: sea-bob 5s ease-in-out infinite; }
body.skin-sea .gx-neon.pink { color: #fff1ee; text-shadow: 0 .05em 0 #7a2a24, 0 .1em .25em rgba(40,0,0,.4), 0 0 .5em rgba(255,122,107,.55), 0 0 1.2em rgba(255,122,107,.3); }
@keyframes sea-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25vw); } }
/* the neon stutter becomes a surfacing: up out of a blur */
body.skin-sea .screen.active .gx-on, body.skin-sea .gx-on.go, body.skin-sea .hub-title.go, body.skin-sea .stamp {
  animation: sea-surface 1.1s cubic-bezier(.2,.8,.2,1) both, sea-bob 5s ease-in-out 1.1s infinite; }
@keyframes sea-surface { from { opacity: 0; transform: translateY(1.6vw) scale(.94); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
body.skin-sea #s-intro .gx-neon { font-size: 7.6vw; }
body.skin-sea #s-answering .gx-neon { font-size: 5.6vw; }
body.skin-sea .stamp { font-size: 8vw; }
body.skin-sea .sb-head .gx-neon { font-size: 4.4vw; }
body.skin-sea .landslide .gx-neon { font-size: 3.8vw; }
body.skin-sea .dg-title { font-size: 3.6vw; } body.skin-sea .dg-title.long { font-size: 3vw; }
body.skin-sea .winner-label { font-size: 2.8vw; }
body.skin-sea .hub-title { font-size: 4.2vw; }

body.skin-sea .gx-kicker { font-family: var(--sea-round); font-weight: 600; letter-spacing: .3em; color: var(--sea-ice); text-shadow: 0 0 .6vw rgba(127,232,255,.4); }
body.skin-sea .gx-sub { color: rgba(220,250,255,.75); font-family: var(--sea-round); font-weight: 500; }
body.skin-sea .gx-sub i { width: .55vw; height: .55vw; background: radial-gradient(circle at 32% 30%, #fff 0 18%, rgba(160,240,255,.25) 40%, rgba(255,255,255,.3)); border: 1px solid rgba(225,252,255,.8); box-shadow: none; }

/* ================= the top bar and Settings ================= */
body.skin-sea #topbar .pill, body.skin-sea #topbar .icon-btn {
  background: rgba(4,40,64,.62); border-color: var(--sea-line); color: var(--sea-ice); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 .8vw 1.8vw -.8vw rgba(0,12,24,.8); }
body.skin-sea #topbar .pill { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea #topbar .pill.timer::before { background: var(--sea-aqua); box-shadow: 0 0 .6vw var(--sea-aqua); }
body.skin-sea .settings { background: rgba(4,34,56,.84); border-color: var(--sea-line); box-shadow: 0 24px 60px -20px rgba(0,8,18,.9), inset 0 1px 0 rgba(255,255,255,.12); }
body.skin-sea .set-title { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .set-group legend { color: var(--sea-aqua); }
body.skin-sea .set-group input::after { background: var(--sea-aqua); box-shadow: 0 0 8px var(--sea-aqua); }
body.skin-sea .set-group input:checked { border-color: var(--sea-aqua); }
body.skin-sea .set-group label:has(input:checked) { background: rgba(127,232,255,.1); }

/* ================= Pib ================= */
/* his hat down here (a captain's cap) is drawn by sea.js */
.pib-breath { left: 58%; top: 2%; z-index: 3; pointer-events: none; animation: pib-breath 3.8s ease-out both; }
@keyframes pib-breath { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 12% { opacity: .95; }
  50% { transform: translate(var(--dx), -9vh) scale(1); } 100% { transform: translate(calc(var(--dx) * -1), -20vh) scale(1.2); opacity: 0; } }

/* his speech: an actual bubble, glassy and pale, with a sheen round the rim */
body.skin-sea #bubble { color: #06324a; font-family: var(--sea-round); font-weight: 500; }
body.skin-sea .bubble-shape { filter: drop-shadow(0 .8vw 1.6vw rgba(0,16,32,.55)) drop-shadow(0 0 1.2vw rgba(127,232,255,.35)); }
body.skin-sea .bubble-shape path { fill: url(#sea-bubble); stroke: url(#sea-sheen); stroke-width: 3; }
body.skin-sea #bubble::before { content: ""; position: absolute; right: 5%; top: 11%; width: 16%; height: .45vw; border-radius: 999px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); opacity: .85; }
body.skin-sea .bubble-name { color: #e2584a; font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .bubble-name::before { background: radial-gradient(circle at 32% 30%, #fff 0 20%, #7fe8ff 55%, #1f86a3); box-shadow: 0 0 .6em rgba(127,232,255,.8); }
body.skin-sea #bubble .tfx-pink { color: #d6406a; } body.skin-sea #bubble .tfx-orange { color: #d9622a; } body.skin-sea #bubble .tfx-yellow { color: #b78a12; }
body.skin-sea #bubble .tfx-green { color: #128a6a; } body.skin-sea #bubble .tfx-blue { color: #1569b0; } body.skin-sea #bubble .tfx-purple { color: #6a3cc0; }
body.skin-sea #bubble .tfx-red { color: #c8302a; }
body.skin-sea #thinking span { background: radial-gradient(circle at 32% 30%, #fff 0 20%, #bff6ff 55%, #4fc3dc); }

/* ================= the start menu ================= */
body.skin-sea #gate, body.skin-sea .sq { background: transparent; }
/* the casino's menu and game floor are opaque and hide the room behind them; here the sea shows
   through instead, so whatever is waiting behind them is hidden until they close */
body.skin-sea.menu:not(.hub-open) #topbar, body.skin-sea.menu #stage, body.skin-sea.menu #host, body.skin-sea.menu .casino-stage,
body.skin-sea.hub-open #stage, body.skin-sea.hub-open #host, body.skin-sea.hub-open .casino-stage { visibility: hidden; }
body.skin-sea .sq-scene > * { display: none; }
body.skin-sea .sq-dim { background: var(--sea-abyss); }
body.skin-sea .sq-title {
  font-family: var(--sea-round); font-weight: 700; font-size: 12vw; line-height: 1.05; letter-spacing: -.02em; -webkit-text-stroke: 0; text-shadow: none;
  color: transparent; background: linear-gradient(180deg, #ffffff 8%, #d4fbff 38%, #7fe8ff 70%, #2fb6d6 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .45vw 0 #0a4060) drop-shadow(0 1.2vw 1.6vw rgba(0,16,32,.6)) drop-shadow(0 0 2.6vw rgba(127,232,255,.45));
  animation: sea-surface 1.4s cubic-bezier(.2,.8,.2,1) .3s both, sea-bob 5.5s ease-in-out 1.7s infinite; }
body.skin-sea .sq-rule { background: var(--sea-aqua); box-shadow: 0 0 .8vw var(--sea-aqua); border-radius: 2px; }
body.skin-sea .sq-credit { font-family: var(--sea-round); font-weight: 600; color: var(--sea-coral-soft); text-shadow: 0 .15vw 0 rgba(90,20,20,.5), 0 0 1vw rgba(255,122,107,.5);
  animation: sea-surface 1.2s cubic-bezier(.2,.8,.2,1) 1.1s both; }
/* PLAY: a pearl */
body.skin-sea .sq-play, body.skin-sea .hub-go {
  font-family: var(--sea-round); font-weight: 600; color: #053049; border: 1px solid rgba(255,255,255,.75);
  background: radial-gradient(120% 140% at 30% 18%, #ffffff 0, #e7fbff 28%, #a8ecf7 62%, #4fc3dc 100%);
  box-shadow: inset 0 -.4vw .9vw rgba(20,110,140,.35), inset 0 .25vw .4vw rgba(255,255,255,.9), 0 0 2.6vw -.2vw rgba(127,232,255,.7), 0 .9vw 2vw -.6vw rgba(0,16,32,.7); }
body.skin-sea .sq-play { font-size: 1.7vw; letter-spacing: .04em; }
body.skin-sea .sq-play:hover, body.skin-sea .hub-go:hover:not(:disabled) { box-shadow: inset 0 -.4vw .9vw rgba(20,110,140,.35), inset 0 .25vw .4vw rgba(255,255,255,.9), 0 0 3.6vw 0 rgba(127,232,255,.85), 0 .9vw 2vw -.6vw rgba(0,16,32,.7); }
body.skin-sea .sq-more { color: #bff6ff; background: rgba(6,40,60,.72); }
body.skin-sea .sq-more:hover { background: rgba(10,70,100,.85); }
body.skin-sea .sq-tut { color: #bff6ff; background: rgba(6,40,60,.72); }
body.skin-sea .sq-tut i { background: #bff6ff; }
body.skin-sea .sq-tag span { color: #bff6ff; }
body.skin-sea .sq-info { background: linear-gradient(180deg, transparent 0, rgba(3,26,46,.8) 20vh, var(--sea-abyss) 42vh); font-family: var(--sea-round); }
body.skin-sea .sq-kicker { color: var(--sea-aqua); font-weight: 600; }
body.skin-sea .sq-h { font-weight: 600; color: var(--sea-foam); }
body.skin-sea .sq-p, body.skin-sea .sq-steps span:last-child, body.skin-sea .sq-facts span:last-child { color: rgba(214,248,255,.72); font-family: "Quicksand", var(--body); }
body.skin-sea .sq-steps li, body.skin-sea .sq-facts div { border-top-color: rgba(127,232,255,.22); }
body.skin-sea .sq-num { font-family: var(--sea-round); font-weight: 700; font-size: 1.8vw; color: #053049; text-shadow: none; display: grid; place-items: center; width: 3.4vw; height: 3.4vw; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0, #c6f5fd 40%, #5fd0e6); box-shadow: 0 0 1.4vw rgba(127,232,255,.45); }
body.skin-sea .sq-big { font-family: var(--sea-round); font-weight: 700; color: var(--sea-gold); text-shadow: 0 .2vw 0 rgba(90,50,0,.45), 0 0 1.2vw rgba(255,212,107,.4); }

/* ================= the game floor: brass-and-glass consoles ================= */
body.skin-sea .hub { background: radial-gradient(80% 70% at 50% 42%, rgba(9,74,108,.55), rgba(3,26,46,.75) 70%, rgba(2,14,26,.9)); font-family: var(--sea-round); }
body.skin-sea .hub::after { background: radial-gradient(140% 110% at 50% 45%, transparent 55%, rgba(1,10,20,.7) 100%); }
body.skin-sea .hm-rounds { color: var(--sea-coral-soft); }
body.skin-sea .hm-rounds b { color: var(--sea-foam); font-family: var(--sea-round); }
body.skin-sea .hm-btn { color: #053049; background: radial-gradient(circle at 32% 28%, #ffffff, #c6f5fd 35%, #4fc3dc 75%, #1f86a3); box-shadow: 0 .22vw 0 #0a4060, 0 .4vw 1vw rgba(0,10,20,.6), 0 0 1.1vw -.2vw rgba(127,232,255,.7); }
body.skin-sea .hm-btn:active { box-shadow: 0 .04vw 0 #0a4060, 0 .1vw .4vw rgba(0,10,20,.6); }
body.skin-sea .lx-lever .base { background: linear-gradient(90deg, #6e3d12, #ffe6a8 45%, #b06d26 75%, #4a2a0c); }
body.skin-sea .lx-lever .knob { background: radial-gradient(circle at 32% 28%, #ffffff, #c6f5fd 35%, #4fc3dc 75%, #1f86a3); box-shadow: 0 0 1vw rgba(127,232,255,.7); }
body.skin-sea .ht { background: rgba(4,40,64,.7); border-color: rgba(127,232,255,.18); }
body.skin-sea .ht:hover:not(:disabled) { border-color: rgba(127,232,255,.5); }
body.skin-sea .ht.on { background: linear-gradient(180deg, rgba(14,80,110,.85), rgba(4,34,56,.88)); border-color: var(--sea-aqua); box-shadow: 0 0 2vw -.6vw rgba(127,232,255,.6); }
body.skin-sea .ht-text b { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .ht-text small { color: rgba(214,248,255,.6); }
body.skin-sea .ht.on .ht-state { color: #053049; background: linear-gradient(180deg, #ffffff, #8fe9f5); }
body.skin-sea .ht.soon .ht-state { color: var(--sea-coral-soft); border-color: rgba(255,171,160,.4); }
body.skin-sea .hub-tab { font-family: var(--sea-round); color: rgba(214,248,255,.55); }
body.skin-sea .hub-tab:hover { color: var(--sea-ice); }
body.skin-sea .hub-tab[aria-current] { color: var(--sea-aqua); text-shadow: 0 0 .8vw rgba(127,232,255,.6); }
body.skin-sea .hub-tab[aria-current]::after { background: var(--sea-aqua); box-shadow: 0 0 .6vw rgba(127,232,255,.8); }
body.skin-sea .hub-tab:focus-visible { outline-color: var(--sea-aqua); }
body.skin-sea .hub-go:disabled { opacity: .35; }

/* ================= the lobby: a nuclear submarine's control room ================= */
/* (the room's art is in sea.js: SUB) */
body[data-room="sub"] .lx-sign { left: 3cqw; top: 3.4%; --ts: 4.4cqw; }
body[data-room="sub"] .lx-panel { left: 2.6cqw; top: 14%; width: 27.5cqw; --rw: 2.5cqw; --rh: 3.2cqw; }
body[data-room="sub"] .lx-panel.lx-join { left: auto; right: 2.6cqw; top: 9%; width: 21cqw; --qr: 17cqw; }

/* the sign: stencilled on the hull, under a red work light */
body.skin-sea .lx-title { font-family: "Black Ops One", var(--sea-round); font-weight: 400; letter-spacing: .04em; color: #d6dcc0; -webkit-text-stroke: 0; background: none;
  text-shadow: 0 .2cqw 0 #050a07, 0 0 1.4cqw rgba(255,70,50,.25); filter: none; animation: none; }
body.skin-sea .lx-rule { background: #c8b45a; box-shadow: none; }
body.skin-sea .lx-credit { font-family: "Black Ops One", var(--sea-round); font-weight: 400; color: #c8b45a; text-shadow: none; animation: none; }

/* the console: gunmetal, screwed to the bulkhead */
body.skin-sea .lx-panel { font-family: "Share Tech Mono", monospace; border: 2px solid #2c3d32; border-radius: 1.2cqw;
  background:
    radial-gradient(circle at .9cqw .9cqw, #4a5e4c .2cqw, #121a16 .32cqw, transparent .36cqw),
    radial-gradient(circle at calc(100% - .9cqw) .9cqw, #4a5e4c .2cqw, #121a16 .32cqw, transparent .36cqw),
    radial-gradient(circle at .9cqw calc(100% - .9cqw), #4a5e4c .2cqw, #121a16 .32cqw, transparent .36cqw),
    radial-gradient(circle at calc(100% - .9cqw) calc(100% - .9cqw), #4a5e4c .2cqw, #121a16 .32cqw, transparent .36cqw),
    linear-gradient(180deg, #1c2822, #0e1612);
  box-shadow: inset 0 0 0 1px #050a07, inset 0 1px 0 rgba(255,255,255,.06), 0 2.4cqw 4.6cqw -1.6cqw rgba(0,0,0,.85); }
body.skin-sea .lx-k { color: #8dffbe; font-weight: 400; letter-spacing: .26em; text-shadow: 0 0 .5cqw rgba(77,255,154,.4); }
body.skin-sea .lx-url { color: #d6f5e0; font-family: "Share Tech Mono", monospace; font-weight: 400; letter-spacing: .02em; }
body.skin-sea .lx-bulbs { display: none; }
body.skin-sea .lx-row { gap: 1.6cqw; justify-content: space-between; }

/* the sonar: the four reels become the letters on a scope. While it's searching the letters are
   gone and the sweep runs fast; each letter pings onto the screen as its reel lands */
body.skin-sea .lx-machine { position: relative; flex: none; width: 15cqw; aspect-ratio: 1; margin: 0; padding: 0; gap: .25cqw; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #0b3a2e 0, #042a22 58%, #021a14 100%);
  box-shadow: inset 0 0 0 .3cqw #121a16, inset 0 0 0 .5cqw #3a4e3c, inset 0 0 2cqw rgba(0,0,0,.85), 0 0 1.8cqw rgba(77,255,154,.22); }
body.skin-sea .lx-machine::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, rgba(110,255,190,.5), rgba(110,255,190,0) 70deg, transparent 360deg); animation: sub-sweep 3.2s linear infinite; }
body.skin-sea .lx-machine::after { inset: 0; height: auto; top: 0; margin: 0; z-index: 2; opacity: 1; border-radius: 50%; box-shadow: none; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 2.4cqw, rgba(110,255,190,.2) 2.4cqw 2.5cqw),
    linear-gradient(90deg, transparent 49.7%, rgba(110,255,190,.2) 49.7% 50.3%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(110,255,190,.2) 49.7% 50.3%, transparent 50.3%); }
body.skin-sea .lx-panel.spinning .lx-machine::before { animation-duration: .7s; }
@keyframes sub-sweep { to { transform: rotate(360deg); } }
body.skin-sea .lx-reel { z-index: 1; background: none; box-shadow: none; border-radius: 0; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent 22%, #000 34%, #000 66%, transparent 78%); mask: linear-gradient(180deg, transparent 22%, #000 34%, #000 66%, transparent 78%); }
body.skin-sea .lx-reel::after { display: none; }
body.skin-sea .lx-strip b { font-family: "Share Tech Mono", monospace; font-weight: 400; font-size: calc(var(--rh) * .78); color: #b6ffe2;
  text-shadow: 0 0 .5cqw #6fffc4, 0 0 1.4cqw rgba(80,255,190,.6); }
body.skin-sea .lx-strip { transition: opacity .15s; }
body.skin-sea .lx-strip.spinning { opacity: 0; filter: none; }
body.skin-sea .lx-reel.thunk { animation: none; }
body.skin-sea .lx-reel.thunk .lx-strip b { animation: sub-ping .9s ease-out; }
@keyframes sub-ping { 0% { color: #fff; transform: scale(1.45); text-shadow: 0 0 1cqw #fff, 0 0 2.6cqw #6fffc4, 0 0 4cqw rgba(80,255,190,.9); } 100% { transform: none; } }
body.skin-sea .lx-panel.win { animation: sub-win .45s ease-in-out 4 alternate; }
@keyframes sub-win { to { border-color: #4dff9a; box-shadow: inset 0 0 0 1px #050a07, 0 0 3cqw rgba(77,255,154,.35); } }
body.skin-sea .lx-panel.win .lx-reel { animation: none; }

/* the big red button (the lever, restyled): under a hazard-striped guard; press it and the code re-rolls */
body.skin-sea .lx-lever { flex: none; width: 7.4cqw; height: 9cqw; cursor: pointer; border-radius: 50%; }
body.skin-sea .lx-lever .base, body.skin-sea .lx-lever .arm { display: none; }
body.skin-sea .lx-lever::before { content: ""; position: absolute; left: 50%; top: 3.9cqw; width: 7.2cqw; height: 7.2cqw; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, transparent 0 56%, #0a0a0a 56.5% 60%, transparent 60.5%), repeating-conic-gradient(#e8c21a 0 15deg, #121212 15deg 30deg);
  box-shadow: inset 0 0 0 .25cqw #0a0a0a, 0 .5cqw 1cqw rgba(0,0,0,.6); }
body.skin-sea .lx-lever::after { content: "RE-ROLL"; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 400 .9cqw/1 "Black Ops One", sans-serif; letter-spacing: .14em; color: #e8c21a; }
body.skin-sea .lx-lever .knob { left: 50%; top: 3.9cqw; width: 4.6cqw; height: 4.6cqw;
  transform: translate(-50%, calc(-50% + var(--pull, 0) * .55cqw));
  background: radial-gradient(circle at 36% 28%, #ff9a8a 0, #ff3b2f 26%, #c41a12 62%, #7a0a06 100%);
  box-shadow: 0 calc((1 - var(--pull, 0)) * .55cqw) 0 #5a0604, 0 calc((1 - var(--pull, 0)) * .55cqw + .5cqw) 1cqw rgba(0,0,0,.6), inset 0 -.3cqw .5cqw rgba(0,0,0,.35), 0 0 1.6cqw rgba(255,59,47,.35); }
body.skin-sea .lx-lever:hover .knob, body.skin-sea .lx-lever.held .knob { filter: brightness(1.12); box-shadow: 0 calc((1 - var(--pull, 0)) * .55cqw) 0 #5a0604, 0 0 2.4cqw rgba(255,59,47,.7); }
body.skin-sea .lx-lever:focus-visible { outline: 2px solid #e8c21a; outline-offset: 3px; }

/* the room's moving parts (inside its art) */
.sub-blink { animation: sub-blink 2.2s steps(1) infinite; }
@keyframes sub-blink { 50% { opacity: .25; } }
.sub-beacon { transform-box: fill-box; transform-origin: 50% 30%; animation: sub-beacon 2.2s ease-in-out infinite; }
@keyframes sub-beacon { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* the periscope's contacts drift across one at a time (the timings are set per contact in sea.js) */
.sub-sil { transform: translateX(var(--x0)); opacity: 0; animation: sub-parade linear infinite both; }
@keyframes sub-parade { 0% { transform: translateX(var(--x0)); opacity: 0; } 2%, 20% { opacity: 1; } 22% { transform: translateX(var(--x1)); opacity: 0; } 100% { transform: translateX(var(--x1)); opacity: 0; } }
.sub-tumble { transform-box: fill-box; transform-origin: 50% 50%; animation: sub-tumble 44s linear infinite; }
@keyframes sub-tumble { to { transform: rotate(360deg); } }
.sub-flicker { animation: sub-flicker 4s steps(1) infinite; }
@keyframes sub-flicker { 0%, 90%, 100% { opacity: .04; } 92% { opacity: .12; } 94% { opacity: .02; } }
.sub-needle { transform-box: fill-box; transform-origin: 50% 100%; animation: sub-needle 3.4s ease-in-out infinite alternate; }
@keyframes sub-needle { from { transform: rotate(-40deg); } to { transform: rotate(35deg); } }
.sub-feedrays { animation: sub-feed 7s ease-in-out infinite alternate; }
@keyframes sub-feed { to { opacity: .2; } }

/* ================= the game screens ================= */
/* answering: an oxygen gauge with a brass bezel */
body.skin-sea .ring-wrap::before { content: ""; position: absolute; inset: -.9vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 63%, #6e3d12 63.6%, #ffe6a8 65.4%, #d9973f 67.4%, #b06d26 69.5%, #6e3d12 71.2%, transparent 71.8%); filter: drop-shadow(0 .6vw 1vw rgba(0,10,20,.6)); }
body.skin-sea .ring-bg { fill: rgba(4,40,64,.78); stroke: rgba(127,232,255,.16); }
body.skin-sea .ring-fg { stroke: var(--sea-aqua); stroke-width: 4; filter: drop-shadow(0 0 4px rgba(127,232,255,.9)); }
body.skin-sea .ring-fg.urgent { stroke: var(--sea-coral); filter: drop-shadow(0 0 5px rgba(255,122,107,.9)); }
body.skin-sea #ring-num { font-family: var(--sea-round); font-weight: 500; }
body.skin-sea .ring-num small, body.skin-sea .pot-mult small { color: rgba(191,246,255,.6); }
body.skin-sea .pot-mult b { font-family: var(--sea-round); font-weight: 600; color: var(--sea-gold); text-shadow: 0 .15vw 0 rgba(90,50,0,.5), 0 0 1vw rgba(255,212,107,.45); }
body.skin-sea .ans-progress span { background: rgba(4,40,64,.62); border-color: rgba(127,232,255,.2); color: rgba(214,248,255,.6); font-family: var(--sea-round); font-weight: 500; }
body.skin-sea .ans-progress span::before { border-color: rgba(214,248,255,.55); }
body.skin-sea .ans-progress span.done { color: #fff; border-color: var(--sea-line); }
body.skin-sea .ans-progress span.done::before { border-color: #fff; background: radial-gradient(circle at 32% 30%, #fff 0 22%, #7fe8ff 60%, #1f86a3); box-shadow: 0 0 .6vw var(--sea-aqua); }

/* the prompt: a riveted porthole panel; the tubes are aqua light */
body.skin-sea .tube rect { stroke: var(--sea-aqua); filter: drop-shadow(0 0 .3vw rgba(127,232,255,.9)); rx: 2vw; }
body.skin-sea .prompt-card { background-color: transparent; background-image: var(--sea-rivets), linear-gradient(175deg, rgba(160,240,255,.14), rgba(9,64,94,.86) 30%, rgba(4,34,56,.92));
  border-radius: 2vw; box-shadow: 0 2vw 4vw -1vw rgba(0,10,20,.85), 0 0 6vw -1.4vw rgba(127,232,255,.28), inset 0 1px 0 rgba(255,255,255,.18); }
body.skin-sea .prompt-k { color: var(--sea-coral-soft); text-shadow: 0 0 .6vw rgba(255,122,107,.5); font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .prompt-text { font-family: var(--sea-round); font-weight: 600; letter-spacing: -.01em; color: var(--sea-pearl); }

/* the answers: bubbles of sea glass, catching the light on top */
body.skin-sea .answer-card { background-color: transparent; background-image: var(--sea-glass); border-radius: 2.4vw; backdrop-filter: blur(6px);
  box-shadow: inset 0 0 2.4vw rgba(127,232,255,.12), inset 0 1px 0 rgba(255,255,255,.22), 0 1.6vw 3.4vw -1vw rgba(0,10,20,.75); }
/* a curved glint along the top-left, like light on a bubble */
body.skin-sea .answer-card::before { content: ""; position: absolute; left: 4%; top: .55vw; width: 30%; height: 2.4vw; border-radius: 50%; pointer-events: none;
  border-top: .22vw solid rgba(255,255,255,.42); -webkit-mask: linear-gradient(90deg, #000, transparent 85%); mask: linear-gradient(90deg, #000, transparent 85%); }
body.skin-sea .answer-text { font-family: var(--sea-round); font-weight: 500; color: var(--sea-pearl); }
body.skin-sea .answer-text.empty { color: rgba(214,248,255,.4); }
body.skin-sea .answer-name { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .answer-votes { color: rgba(214,248,255,.6); }
body.skin-sea .ans-rail { background: var(--sea-aqua); box-shadow: 0 0 .6vw var(--sea-aqua); }
/* the winner turns to treasure */
body.skin-sea .answer-card.winner { box-shadow: inset 0 0 2.4vw rgba(255,212,107,.18), 0 1.6vw 3.4vw -1vw rgba(0,10,20,.8), 0 0 4.4vw -.6vw rgba(255,212,107,.6); }
body.skin-sea .answer-card.winner .tube rect { stroke: #ffe39a; filter: drop-shadow(0 0 .4vw #ffd46b) drop-shadow(0 0 1.2vw rgba(255,212,107,.7)); }
body.skin-sea .answer-card.winner .answer-votes { color: var(--sea-gold); }
body.skin-sea .answer-card.tie .tube rect { stroke: var(--sea-coral-soft); filter: drop-shadow(0 0 .5vw var(--sea-coral)); }
body.skin-sea .answer-card.loser { transform: translateY(.8vw) scale(.97); }
body.skin-sea .x-mark line { stroke: var(--sea-coral); filter: drop-shadow(0 0 .5vw #ff5a4a) drop-shadow(0 0 1.4vw rgba(255,90,74,.6)); }
/* vs: a bubble between them */
body.skin-sea .vs { display: grid; place-items: center; width: 4.6vw; height: 4.6vw; border-radius: 50%; font-family: var(--sea-round); font-weight: 700; font-size: 1.8vw;
  color: #fff; text-shadow: 0 .1vw 0 rgba(0,40,60,.6); border: 1px solid rgba(225,252,255,.8);
  background: radial-gradient(circle at 50% 50%, rgba(10,70,100,.82) 0 55%, rgba(40,150,190,.6) 82%, rgba(225,252,255,.5) 100%);
  box-shadow: 0 0 1.6vw rgba(127,232,255,.45); position: relative; animation: sea-surface .9s cubic-bezier(.2,.8,.2,1) .4s both, sea-bob 4s ease-in-out 1.3s infinite; }
/* the glint sits on the rim, clear of the letters */
body.skin-sea .vs::after { content: ""; position: absolute; left: 14%; top: 10%; width: 40%; height: 40%; border-radius: 50%; pointer-events: none;
  border-top: .22vw solid rgba(255,255,255,.75); border-left: .22vw solid rgba(255,255,255,.35); border-right: .22vw solid transparent; border-bottom: .22vw solid transparent; transform: rotate(-12deg); }
/* voting: one bubble per voter */
body.skin-sea .vote-status { background: rgba(4,40,64,.7); border-color: var(--sea-line); font-family: var(--sea-round); }
body.skin-sea .vote-k { color: var(--sea-aqua); font-weight: 600; }
body.skin-sea .vote-dots i { width: .75vw; height: .75vw; background: transparent; border: 1px solid rgba(214,248,255,.5); }
body.skin-sea .vote-dots i.on { border-color: #fff; background: radial-gradient(circle at 32% 30%, #fff 0 22%, #7fe8ff 60%, #1f86a3); box-shadow: 0 0 .7vw var(--sea-aqua); }

/* standings: the rails are lit aqua, the leader gets a beam of sunlight */
body.skin-sea .towers::after, body.skin-sea .chip-table::after { background: var(--sea-aqua); box-shadow: 0 0 .5vw var(--sea-aqua), 0 0 1.4vw rgba(127,232,255,.5); }
body.skin-sea .tw::before { background: linear-gradient(180deg, rgba(210,252,255,.28), rgba(160,235,250,.08) 70%, transparent); }
body.skin-sea .tw-name { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .tw-rank { color: rgba(214,248,255,.5); }
body.skin-sea .tw.lead .tw-name, body.skin-sea .tw.lead .tw-rank { color: var(--sea-gold); }
body.skin-sea .tw.lead .tw-label::before { color: #3a2208; background: linear-gradient(180deg, #fff3c4, #e9b43a); }

/* the chip values: a sea-glass tag with a gold doubloon */
body.skin-sea .chip-val { font-family: var(--sea-round); font-weight: 600; color: var(--sea-gold); background: rgba(4,40,64,.82); border-color: var(--sea-line); }
body.skin-sea .chip-val::before { background: radial-gradient(circle at 36% 30%, #fff8d8 0 14%, #ffd46b 40%, #b8801c 100%); box-shadow: inset 0 0 0 1px rgba(110,61,18,.6), inset 0 0 0 .18vw rgba(255,230,168,.35); }
body.skin-sea .tw.lead .chip-val { color: #3a2208; background: linear-gradient(180deg, #fff3c4, #e9b43a); }

/* the final: a sunbeam finds the winner, the gold sinks down around them */
body.skin-sea .spotlight { background: linear-gradient(180deg, rgba(210,252,255,.32), rgba(160,235,250,.1) 55%, transparent 78%); }
body.skin-sea .winner-name { font-family: var(--sea-round); font-weight: 700; background: linear-gradient(180deg, #fffaf0 0%, #ffe39a 55%, #e9b43a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .2vw 0 rgba(90,50,0,.5)) drop-shadow(0 0 1.4vw rgba(255,212,107,.45)); }
body.skin-sea .winner-guy { filter: drop-shadow(0 0 2vw rgba(127,232,255,.45)); }
body.skin-sea .marquee { background: var(--sea-rivets), linear-gradient(180deg, rgba(14,80,110,.8), rgba(4,34,56,.85)); border: 2px solid var(--sea-brass); border-radius: 1.4vw; }
body.skin-sea .marquee .mb { background: #0e4a62; }
body.skin-sea .marquee.lit .mb { background: #fff; box-shadow: 0 0 .4vw var(--sea-aqua), 0 0 1vw rgba(127,232,255,.7); }
body.skin-sea .final-hint { color: rgba(214,248,255,.7); font-family: var(--sea-round); }
/* confetti: gold coins and pearls, sinking, turning as they go */
body.skin-sea .confetti i { width: .9vw; height: .9vw; border-radius: 50%; opacity: 1;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 12%, currentColor 36%, rgba(120,70,0,.55) 100%) !important; color: var(--c, #ffd46b); }
body.skin-sea .confetti i:nth-child(3n) { color: #ffffff; background: radial-gradient(circle at 34% 30%, #fff 0 18%, #e6f4f6 50%, #9fb8c4) !important; width: .7vw; height: .7vw; }
body.skin-sea .confetti i:nth-child(3n+1) { background: radial-gradient(circle at 34% 30%, #fff8d8 0 14%, #ffd46b 40%, #b8801c 100%) !important; }

/* Bad Art at the bottom of the sea: each drawing in a brass porthole */
body.skin-sea .dg-board { padding: 1.2vw; border-radius: 2.4vw;
  background: var(--sea-rivets), linear-gradient(135deg, #6e3d12, #ffe6a8 18%, #d9973f 36%, #fff0c8 52%, #b06d26 70%, #e9b46a 86%, #6e3d12);
  box-shadow: inset 0 0 0 .2vw #4a2a0c, inset 0 0 0 .55vw rgba(255,230,168,.35), 0 2.2vw 3.2vw -1.4vw rgba(0,10,20,.8), 0 0 3vw -.6vw rgba(127,232,255,.35); }
body.skin-sea #dg-canvas { border-radius: 1.4vw; background: radial-gradient(120% 90% at 50% 34%, #f6feff, #dff6fb 60%, #c4eaf3); box-shadow: inset 0 .3vw 1vw rgba(0,40,60,.35); }
body.skin-sea #s-draw[data-sub="reveal"] .dg-board { box-shadow: inset 0 0 0 .2vw #4a2a0c, inset 0 0 0 .55vw rgba(255,230,168,.35), 0 2.2vw 3.2vw -1.4vw rgba(0,10,20,.8), 0 0 4vw rgba(255,212,107,.7); }
body.skin-sea .dg-label { color: var(--sea-aqua); border-bottom-color: rgba(127,232,255,.25); font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .dg-got li, body.skin-sea .dg-artist { background: linear-gradient(180deg, rgba(14,80,110,.92), rgba(4,34,56,.94)); box-shadow: inset 0 0 0 1px var(--sea-line), 0 0 1.6vw -.5vw rgba(127,232,255,.6); }
body.skin-sea .dg-place { color: #053049; background: radial-gradient(circle at 32% 28%, #fff 0, #c6f5fd 40%, #5fd0e6); }
body.skin-sea .dg-name { font-family: var(--sea-round); font-weight: 600; }
body.skin-sea .dg-pts { color: var(--sea-gold); }
body.skin-sea .dg-artist { box-shadow: inset 0 0 0 1px rgba(255,171,160,.7), 0 0 1.6vw -.5vw rgba(255,122,107,.6); }
body.skin-sea .dg-artist .dg-place { color: #4a0e08; background: radial-gradient(circle at 32% 28%, #fff 0, #ffc9c1 40%, #ff7a6b); }
body.skin-sea .dg-wrong s { text-decoration-color: rgba(255,122,107,.85); }

/* Odd Duck at the bottom of the sea: a row of brass portholes, the odd one glowing coral */
body.skin-sea #s-odd .oo-title { font-size: 3.2vw; } body.skin-sea #s-odd .oo-title.long { font-size: 2.8vw; }
body.skin-sea .oo-board { padding: .55vw; border-radius: 1.5vw;
  background: linear-gradient(135deg, #6e3d12, #ffe6a8 18%, #d9973f 36%, #fff0c8 52%, #b06d26 70%, #e9b46a 86%, #6e3d12);
  box-shadow: inset 0 0 0 .14vw #4a2a0c, 0 1.2vw 2vw -1vw rgba(0,10,20,.8), 0 0 2vw -.6vw rgba(127,232,255,.35); }
body.skin-sea .oo-board canvas { border-radius: 1vw; background: radial-gradient(120% 90% at 50% 34%, #f6feff, #dff6fb 60%, #c4eaf3); box-shadow: inset 0 .2vw .7vw rgba(0,40,60,.35); }
body.skin-sea .oo-letter { left: .9vw; top: .9vw; color: #053049; background: radial-gradient(circle at 32% 28%, #fff 0, #c6f5fd 40%, #5fd0e6); }
body.skin-sea .oo-name, body.skin-sea .oo-voter { font-family: var(--sea-round); }
body.skin-sea .oo-name b { color: var(--sea-coral-soft); }
body.skin-sea .oo-voters { left: .7vw; right: .7vw; bottom: .7vw; }
body.skin-sea .oo-card.is-odd .oo-board { box-shadow: inset 0 0 0 .14vw #4a2a0c, 0 1.2vw 2vw -1vw rgba(0,10,20,.8), 0 0 3.4vw rgba(255,122,107,.95); }

/* the big beats: the washes, and the one-shots */
body.skin-sea .flash.pink { background: radial-gradient(70% 60% at 50% 42%, rgba(255,122,107,.3), rgba(255,122,107,.08) 55%, transparent 80%); }
body.skin-sea .flash.gold { background: radial-gradient(70% 60% at 50% 42%, rgba(255,212,107,.32), rgba(127,232,255,.08) 55%, transparent 80%); }
body.skin-sea .oneshot { background: rgba(2,18,34,.84); }
body.skin-sea .os-rays { opacity: .5;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(127,232,255,.0) 0 3vw, rgba(127,232,255,.35) 3.4vw, rgba(127,232,255,0) 4.2vw 7vw); animation: sea-ripple 2.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 50%); mask: radial-gradient(circle, transparent 8%, #000 50%); }
@keyframes sea-ripple { from { transform: scale(1); } to { transform: scale(1.18); } }
body.skin-sea .os-word { font-family: var(--sea-round); font-weight: 700; text-shadow: 0 .06em 0 #031a2e, 0 0 .3em rgba(127,232,255,.35); }
body.skin-sea .os-name { font-family: var(--sea-round); }
body.skin-sea .os-name::before { color: var(--sea-coral); }

@media (prefers-reduced-motion: reduce) {
  .sea-sun, .sea-caustics, .sea-rays i, .sea-band, .sea-b, .sea-whale, .sea-snow i, .sea-bubbles i, .pib-breath { animation: none !important; }
  .sea-whale, .sea-bubbles, .pib-breath { display: none; }
  body.skin-sea .gx-neon, body.skin-sea .sq-title, body.skin-sea .lx-title, body.skin-sea .vs { animation: none !important; }
}