:root {
  --water: #08703f;
  --navy: #2b0b4f;
  --wood: #c98f5e;
  --wood-dark: #8c5a34;
  --wood-deep: #5b3a24;
  --signal: #e8392b;
  --yellow: #ffd23f;
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='rgba(190,255,150,0.07)' stroke='rgba(190,255,150,0.5)' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M241.0 245.3Q207.2 305.9 192.5 304.0Q177.7 302.1 165.2 255.6Q152.6 209.2 184.1 186.8Q215.6 164.5 245.2 174.7Q274.9 184.8 241.0 245.3Z'/%3E%3Cpath d='M459.0 176.1Q483.2 197.2 469.0 245.6Q454.8 294.0 438.3 302.5Q421.9 311.0 402.3 243.5Q382.6 176.0 408.7 165.5Q434.7 154.9 459.0 176.1Z'/%3E%3Cpath d='M249.8 250.1Q283.6 189.5 287.8 189.1Q291.9 188.8 310.8 255.9Q329.8 323.1 300.4 337.0Q271.1 351.0 243.5 330.8Q215.9 310.6 249.8 250.1Z'/%3E%3Cpath d='M152.9 259.0Q165.5 305.5 132.6 325.7Q99.8 346.0 80.9 327.6Q62.1 309.2 67.7 254.7Q73.3 200.2 76.0 198.3Q78.7 196.5 109.5 204.5Q140.3 212.6 152.9 259.0Z'/%3E%3Cpath d='M308.1 -145.6Q337.4 -159.5 368.9 -156.4Q400.4 -153.3 410.0 -120.1Q419.5 -86.9 395.3 -49.8Q371.0 -12.6 345.6 -7.8Q320.3 -3.0 293.3 -16.1Q266.3 -29.2 272.5 -80.4Q278.7 -131.6 308.1 -145.6Z'/%3E%3Cpath d='M308.1 354.4Q337.4 340.5 368.9 343.6Q400.4 346.7 410.0 379.9Q419.5 413.1 395.3 450.2Q371.0 487.4 345.6 492.2Q320.3 497.0 293.3 483.9Q266.3 470.8 272.5 419.6Q278.7 368.4 308.1 354.4Z'/%3E%3Cpath d='M65.8 182.9Q63.1 184.7 28.2 185.3Q-6.8 185.9 -31.0 164.8Q-55.3 143.7 -45.3 112.7Q-35.4 81.7 -5.0 70.4Q25.4 59.1 48.9 75.4Q72.5 91.7 70.5 136.4Q68.6 181.0 65.8 182.9Z'/%3E%3Cpath d='M565.8 182.9Q563.1 184.7 528.2 185.3Q493.2 185.9 469.0 164.8Q444.7 143.7 454.7 112.7Q464.6 81.7 495.0 70.4Q525.4 59.1 548.9 75.4Q572.5 91.7 570.5 136.4Q568.6 181.0 565.8 182.9Z'/%3E%3Cpath d='M-53.9 318.9Q-37.4 310.4 6.2 315.9Q49.7 321.4 68.6 339.8Q87.4 358.2 83.7 382.7Q80.1 407.2 57.7 422.1Q35.3 437.0 -13.1 421.8Q-61.5 406.6 -71.0 373.4Q-80.5 340.2 -75.4 333.8Q-70.3 327.5 -53.9 318.9Z'/%3E%3Cpath d='M446.1 318.9Q462.6 310.4 506.2 315.9Q549.7 321.4 568.6 339.8Q587.4 358.2 583.7 382.7Q580.1 407.2 557.7 422.1Q535.3 437.0 486.9 421.8Q438.5 406.6 429.0 373.4Q419.5 340.2 424.6 333.8Q429.7 327.5 446.1 318.9Z'/%3E%3Cpath d='M350.1 13.2Q375.5 8.4 411.7 42.7Q447.8 76.9 437.9 107.9Q428.0 138.9 402.0 149.4Q375.9 159.9 350.2 157.3Q324.4 154.6 324.6 86.3Q324.7 18.0 350.1 13.2Z'/%3E%3Cpath d='M350.1 513.2Q375.5 508.4 411.7 542.7Q447.8 576.9 437.9 607.9Q428.0 638.9 402.0 649.4Q375.9 659.9 350.2 657.3Q324.4 654.6 324.6 586.3Q324.7 518.0 350.1 513.2Z'/%3E%3Cpath d='M-89.9 -40.4Q-65.6 -77.5 -17.3 -62.3Q31.1 -47.1 25.0 -2.2Q19.0 42.7 -11.4 54.0Q-41.8 65.3 -78.0 31.1Q-114.1 -3.2 -89.9 -40.4Z'/%3E%3Cpath d='M-89.9 459.6Q-65.6 422.5 -17.3 437.7Q31.1 452.9 25.0 497.8Q19.0 542.7 -11.4 554.0Q-41.8 565.3 -78.0 531.1Q-114.1 496.8 -89.9 459.6Z'/%3E%3Cpath d='M410.1 -40.4Q434.4 -77.5 482.7 -62.3Q531.1 -47.1 525.0 -2.2Q519.0 42.7 488.6 54.0Q458.2 65.3 422.0 31.1Q385.9 -3.2 410.1 -40.4Z'/%3E%3Cpath d='M410.1 459.6Q434.4 422.5 482.7 437.7Q531.1 452.9 525.0 497.8Q519.0 542.7 488.6 554.0Q458.2 565.3 422.0 531.1Q385.9 496.8 410.1 459.6Z'/%3E%3Cpath d='M347.7 176.1Q373.4 178.8 393.0 246.3Q412.7 313.8 407.5 320.2Q402.4 326.5 370.9 323.4Q339.4 320.3 320.5 253.2Q301.5 186.0 311.7 179.7Q321.9 173.5 347.7 176.1Z'/%3E%3Cpath d='M179.4 25.0Q166.8 51.3 124.7 64.1Q82.5 76.8 59.0 60.5Q35.4 44.2 41.5 -0.7Q47.6 -45.6 70.0 -60.5Q92.3 -75.4 142.2 -38.4Q192.0 -1.4 179.4 25.0Z'/%3E%3Cpath d='M179.4 525.0Q166.8 551.3 124.7 564.1Q82.5 576.8 59.0 560.5Q35.4 544.2 41.5 499.3Q47.6 454.4 70.0 439.5Q92.3 424.6 142.2 461.6Q192.0 498.6 179.4 525.0Z'/%3E%3Cpath d='M251.5 157.4Q221.9 147.2 203.7 104.1Q185.4 61.1 198.0 34.7Q210.6 8.3 233.4 -0.1Q256.2 -8.6 283.2 4.5Q310.2 17.6 310.0 85.9Q309.9 154.2 299.7 160.5Q289.5 166.8 285.3 167.1Q281.2 167.5 251.5 157.4Z'/%3E%3Cpath d='M251.5 657.4Q221.9 647.2 203.7 604.1Q185.4 561.1 198.0 534.7Q210.6 508.3 233.4 499.9Q256.2 491.4 283.2 504.5Q310.2 517.6 310.0 585.9Q309.9 654.2 299.7 660.5Q289.5 666.8 285.3 667.1Q281.2 667.5 251.5 657.4Z'/%3E%3Cpath d='M176.1 175.4Q144.6 197.8 113.7 189.7Q82.9 181.7 84.9 137.1Q86.8 92.4 129.0 79.7Q171.1 66.9 189.3 110.0Q207.6 153.1 176.1 175.4Z'/%3E%3Cpath d='M-21.1 248.5Q-6.9 200.1 28.1 199.5Q63.1 198.9 57.5 253.4Q51.9 307.9 8.3 302.4Q-35.3 296.9 -21.1 248.5Z'/%3E%3Cpath d='M478.9 248.5Q493.1 200.1 528.1 199.5Q563.1 198.9 557.5 253.4Q551.9 307.9 508.3 302.4Q464.7 296.9 478.9 248.5Z'/%3E%3Cpath d='M106.0 386.0Q109.7 361.5 142.6 341.2Q175.4 321.0 190.1 322.9Q204.8 324.8 232.4 345.0Q260.0 365.2 253.8 416.4Q247.6 467.6 224.8 476.1Q202.0 484.5 152.1 447.5Q102.3 410.5 106.0 386.0Z'/%3E%3C/g%3E%3C/svg%3E");
  --display: "Lilita One", "Trebuchet MS", sans-serif;
  --body: "Fredoka", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: #fff;
  background: var(--water);
  min-height: 100vh;
}

/* The whole page is the ocean. Rounded light cells drift slowly, like the game's water. */
body::before {
  content: "";
  position: fixed; top: -500px; left: -500px; right: 0; bottom: 0; z-index: -1;
  background-image: var(--tile);
  background-size: 500px 500px;
  animation: caustic 90s linear infinite;
  pointer-events: none;
}
@keyframes caustic { to { transform: translate(500px, 500px); } }

/* ---------- Sky ---------- */
.sky {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #070216 0%, #160a33 36%, #3a1560 68%, #7a2f62 88%, #c4533b 100%);
}
.moon {
  position: absolute; top: 34px; right: 8%; z-index: 1; width: 150px; height: 150px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(176, 150, 84, .5) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 64%, rgba(176, 150, 84, .45) 0 13%, transparent 14%),
    radial-gradient(circle at 72% 26%, rgba(176, 150, 84, .38) 0 6%, transparent 7%),
    radial-gradient(circle at 30% 72%, rgba(176, 150, 84, .38) 0 7%, transparent 8%),
    radial-gradient(circle at 40% 35%, #fffbe0, #f7e7a1 70%, #e6cf78);
  box-shadow: 0 0 60px 24px rgba(255, 236, 160, .32), 0 0 170px 80px rgba(255, 214, 120, .16);
}
.stars { position: absolute; inset: 0 0 35% 0; z-index: 0; pointer-events: none; }
.star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff; animation: star 3.4s ease-in-out var(--d) infinite; }
@keyframes star { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.cloud { position: absolute; z-index: 1; opacity: .9; animation: cloud-drift 90s linear infinite alternate; }
.cloud.c1 { top: 70px; left: 4%; width: 190px; }
.cloud.c2 { top: 210px; right: 6%; width: 140px; animation-duration: 120s; }
.cloud.c3 { top: 250px; left: 14%; width: 110px; animation-duration: 100s; animation-direction: alternate-reverse; }
@keyframes cloud-drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.bats { position: absolute; z-index: 2; top: 70px; left: 0; width: 170px; animation: bats 30s linear infinite; }
@keyframes bats { from { transform: translateX(-180px); } to { transform: translateX(105vw); } }
.bats .wl, .bats .wr { transform-box: fill-box; animation: flap .42s ease-in-out infinite alternate; }
.bats .wl { transform-origin: 100% 60%; }
.bats .wr { transform-origin: 0% 60%; animation-name: flap-r; }
@keyframes flap { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } }
@keyframes flap-r { from { transform: rotate(24deg); } to { transform: rotate(-18deg); } }
.ghost { position: absolute; z-index: 2; width: 58px; opacity: .85; animation: ghost-float 6s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(190, 255, 190, .55)); }
.ghost.g1 { left: 6%; top: 190px; }
.ghost.g2 { right: 25%; top: 118px; width: 40px; animation-delay: -3s; opacity: .7; }
@keyframes ghost-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
.islands { position: absolute; left: 0; bottom: 0; width: 100%; height: 130px; z-index: 1; }

.hero-inner {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 0 auto; padding: 50px 24px 96px; text-align: center;
}
h1 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.2rem, 11.5vw, 7.6rem); line-height: 1; letter-spacing: .01em;
  color: #ff9a2e;
  -webkit-text-stroke: clamp(6px, 1.1vw, 11px) #2b0b4f;
  paint-order: stroke fill;
  filter: drop-shadow(0 .07em 0 #16042e) drop-shadow(0 0 22px rgba(255, 138, 31, .4));
  animation: drop .9s cubic-bezier(.3, 1.5, .5, 1) both;
}
h1 span { display: inline-block; }
.lede {
  max-width: 36ch; margin: 22px auto 0;
  font-size: 1.3rem; font-weight: 500; line-height: 1.45; color: #ecdfff;
  animation: rise .7s ease-out .3s both;
}
.t-youtube { color: #ff8a8a; font-weight: 600; }
@keyframes drop { from { opacity: 0; transform: translateY(-50px) scale(.94); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; animation: rise .7s ease-out .45s both; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-weight: 600; font-size: 1.1rem; text-decoration: none;
  padding: 13px 28px; border-radius: 999px; border: 4px solid #fff;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn svg { width: 22px; height: 22px; }
.btn.primary { color: #2b0b4f; background: linear-gradient(#ffb04a, #ff6a00); box-shadow: 0 5px 0 #b84300; }
.btn.white { color: #ffd9a8; background: linear-gradient(#3a2260, #241044); box-shadow: 0 5px 0 #0f0522; }
.btn.sand { color: #f3e8ff; background: linear-gradient(#8a4fd8, #5a2a9e); box-shadow: 0 5px 0 #34165f; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn:focus-visible, .card:focus-visible { outline: 4px solid #ffd9a8; outline-offset: 4px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  padding: 9px 20px 9px 16px; background: rgba(26, 10, 52, .92); color: #ffe9c7; border: 3px solid #ff8a1f;
  border-radius: 999px; font-weight: 500; box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
  animation: rise .7s ease-out .6s both;
}
.live-pill strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--signal); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 57, 43, .55); }
  100% { box-shadow: 0 0 0 11px rgba(232, 57, 43, 0); }
}

/* ---------- Harbor ---------- */
.harbor { position: relative; height: 470px; overflow: hidden; }
.harbor::before { /* water fades lighter toward the horizon */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 0;
  background: linear-gradient(rgba(170, 255, 205, .34), rgba(170, 255, 205, 0));
}
.harbor > svg, .harbor > div { position: absolute; }
.sparks { inset: 0; z-index: 0; pointer-events: none; }
.spark {
  position: absolute; width: var(--w); height: 3px; border-radius: 3px; background: #d9ffb0; opacity: 0;
  animation: twinkle 3.6s ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scaleX(.4); } 50% { opacity: .85; transform: scaleX(1); } }

.mist {
  inset: -10px -10% auto -10%; height: 220px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 28% 42% at 14% 45%, rgba(210, 255, 200, .22), transparent),
    radial-gradient(ellipse 34% 40% at 52% 58%, rgba(210, 255, 200, .16), transparent),
    radial-gradient(ellipse 26% 44% at 86% 40%, rgba(210, 255, 200, .2), transparent);
  animation: mist 38s ease-in-out infinite alternate;
}
@keyframes mist { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.glow { animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 60% { opacity: .7; } 75% { opacity: 1; } }
.yacht svg, .booth, .dock { filter: brightness(.86) saturate(.95); }
.booth { width: 170px; height: auto; }
.booth.b1 { left: 14%; top: 24px; }
.booth.b2 { right: 17%; top: 40px; width: 140px; }
.booth { animation: bob-s 6s ease-in-out infinite; }
.booth.b2 { animation-delay: -3s; }

.island { left: -24px; top: 120px; width: 340px; height: auto; }
.dock { right: -26px; top: 170px; width: 400px; height: auto; }
.yacht {
  top: 62px; left: 50%;
  width: min(700px, 92vw); margin-left: calc(min(700px, 92vw) / -2);
  animation: sail 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.yacht svg { display: block; width: 100%; height: auto; transform-origin: 50% 88%; animation: bob 7s ease-in-out infinite; }
@keyframes sail { from { transform: translateX(70vw); } to { transform: none; } }
@keyframes bob { /* starts and ends level, so there is no jump when it arrives */
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(.8deg); }
  75% { transform: translateY(2px) rotate(-.8deg); }
}
@keyframes bob-s { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.ripple { transform-box: fill-box; transform-origin: center; animation: ripple 4s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.92); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }

/* ---------- Streams ---------- */
main { position: relative; max-width: 1180px; margin: 0 auto; padding: 8px 24px 70px; }
.bar { scroll-margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 48px; }
.bar h2, .plank {
  margin: 0; padding: 4px 30px 8px; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.3rem); color: #fff3d6; text-shadow: 0 3px 0 var(--wood-deep);
  background: repeating-linear-gradient(90deg, var(--wood) 0 44px, #bd824f 44px 46px);
  border: 4px solid #6b4326; border-radius: 14px; box-shadow: 0 6px 0 var(--wood-deep);
}
.status { margin: 0; padding: 6px 16px; background: rgba(26, 10, 52, .9); color: #ffe9c7; border: 2px solid rgba(255, 138, 31, .55); border-radius: 999px; font-weight: 500; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 52px 30px; }

/* Each stream is a wooden booth sign on two posts */
.card {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: 10px; color: #fff; text-decoration: none; font: inherit; cursor: pointer;
  background:
    radial-gradient(circle 2.6px at 5px 5px, #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at calc(100% - 5px) 5px, #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at 5px calc(100% - 5px), #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at calc(100% - 5px) calc(100% - 5px), #4a2f1c 96%, transparent) no-repeat,
    repeating-linear-gradient(90deg, var(--wood) 0 40px, #bd824f 40px 42px);
  border: 4px solid #6b4326; border-radius: 18px;
  box-shadow: 0 7px 0 var(--wood-deep), 0 22px 30px rgba(0, 50, 110, .35);
  animation: float 6s ease-in-out var(--fd, 0s) infinite;
  transition: translate .2s;
}
.card:nth-child(2n) { --fd: -2s; }
.card:nth-child(3n) { --fd: -4s; }
.card:hover { translate: 0 -6px; }
.enter .card { animation: pop .7s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i, 0) * 110ms) backwards, float 6s ease-in-out var(--fd, 0s) infinite; }
@keyframes pop { from { opacity: 0; translate: 0 60px; scale: .9; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.card::before, .card::after {
  content: ""; position: absolute; top: -30px; width: 18px; height: 36px; z-index: -1;
  background: linear-gradient(90deg, #6d4426, var(--wood-deep)); border-radius: 6px 6px 0 0;
}
.card::before { left: 16%; }
.card::after { right: 16%; }
.ring {
  position: absolute; top: -18px; right: -14px; width: 42px; height: 42px; border-radius: 50%; rotate: 16deg;
  background: conic-gradient(var(--signal) 0 25%, #fff 0 50%, var(--signal) 0 75%, #fff 0);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36%); mask: radial-gradient(circle, transparent 0 34%, #000 36%);
}

.thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 3px solid #fff; background: var(--water) var(--tile); background-size: 250px 250px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff;
}
.chip.live { top: 8px; left: 8px; background: var(--signal); border: 2px solid #fff; }
.chip.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.8s ease-out infinite; }
.chip.views { bottom: 8px; right: 8px; background: rgba(26, 10, 52, .92); }

.info {
  flex: 1; margin-top: 10px; padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 10px;
}
.creator { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.4rem; letter-spacing: .01em; text-shadow: 0 0 8px rgba(255, 255, 255, .25); }
.title {
  margin: 0; color: #e6dcf7; line-height: 1.4; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; font-weight: 600; color: #2b0b4f;
  background: linear-gradient(#ffb04a, #ff6a00); border: 3px solid #fff; border-radius: 999px;
  box-shadow: 0 4px 0 #b84300; transition: transform .15s, box-shadow .15s;
}
.watch svg { width: 14px; height: 14px; }
.card:hover .watch { transform: translateY(-2px); box-shadow: 0 6px 0 #b84300; }

.empty {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 28px 32px;
  background: linear-gradient(160deg, #2e1a55, #190b35); color: #e6dcf7; border: 8px solid var(--wood-dark); border-radius: 18px;
  box-shadow: 0 7px 0 var(--wood-deep);
}
.empty svg { width: 76px; height: 76px; flex-shrink: 0; animation: bob-s 4s ease-in-out infinite; }
.empty strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: #fff; margin-bottom: 6px; }
.empty span { display: block; max-width: 52ch; line-height: 1.5; }


/* ---------- Platform tabs ---------- */
.bar { margin-bottom: 26px; }
.tabs { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 52px; }
.tab {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  padding: 9px 18px 9px 14px; border-radius: 999px; border: 4px solid #fff;
  color: #f3e8ff; background: linear-gradient(#8a4fd8, #5a2a9e); box-shadow: 0 5px 0 #34165f;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.tab svg { width: 24px; height: 24px; }
.tab .count { min-width: 26px; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .9rem; text-align: center; }
.tab:hover { transform: translateY(-3px); filter: brightness(1.05); }
.tab[aria-selected="true"] { color: #2b0b4f; background: linear-gradient(#ffb04a, #ff6a00); box-shadow: 0 5px 0 #b84300; transform: translateY(0); }
.tab[aria-selected="true"] .count { background: rgba(43, 11, 79, .16); }
.tab:focus-visible { outline: 4px solid #ffd9a8; outline-offset: 3px; }



/* ---------- FISH! ---------- */
[hidden] { display: none !important; }
body.modal-open { overflow: hidden; }
.btn.fish {
  font-family: var(--display); font-weight: 400; font-size: 1.3rem; letter-spacing: .05em; color: #0a3a12; cursor: pointer;
  background: linear-gradient(#b4ff7a, #3fcf3f); box-shadow: 0 5px 0 #1f8a24, 0 0 22px rgba(120, 255, 90, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  animation: fish-wiggle 4.5s ease-in-out 2s infinite;
}
.btn.fish svg { width: 30px; height: 18px; }
.btn.fish:hover { animation: none; }
@keyframes fish-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-4deg); } 94% { transform: rotate(4deg); } 97% { transform: rotate(-3deg); } }
.btn.sm { padding: 9px 20px; font-size: 1rem; }

.fish-modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 4, 38, .8); backdrop-filter: blur(3px);
  animation: fade-in .25s ease-out both;
}
@keyframes fade-in { from { opacity: 0; } }
.fish-card {
  position: relative; width: min(470px, 100%); padding: 12px;
  background: repeating-linear-gradient(90deg, var(--wood) 0 40px, #bd824f 40px 42px);
  border: 4px solid #6b4326; border-radius: 20px;
  box-shadow: 0 8px 0 var(--wood-deep), 0 30px 50px rgba(0, 20, 60, .5);
  animation: card-in .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(40px) scale(.92); } }
.fish-close {
  position: absolute; top: -16px; right: -12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  font: 600 1.7rem/1 var(--body); color: #fff; cursor: pointer;
  background: linear-gradient(#ff705b, #cf2e1f); border: 4px solid #fff; box-shadow: 0 4px 0 #8f1d12;
}
.fish-close:hover { filter: brightness(1.1); }
.fish-close:focus-visible, .fish-card .btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.fish-scene {
  position: relative; aspect-ratio: 400 / 240; border-radius: 12px; overflow: hidden; border: 3px solid #fff;
  background:
    linear-gradient(180deg, #0d0526 0%, #5c2766 44.5%, rgba(92, 39, 102, 0) 44.6%),
    var(--tile) 0 0 / 200px 200px var(--water);
}
.fish-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.fish-svg * { transform-box: fill-box; }

/* the line is cast from the rod tip and the bobber lands */
.fish-svg .rig { transform-box: view-box; transform-origin: 134px 12px; animation: cast .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes cast { from { transform: scale(.04); } 65% { transform: scale(1.05); } to { transform: scale(1); } }
.fish-svg .rp { opacity: 0; animation: ripple 1.8s ease-out .8s infinite; }
.fish-svg .rp.r2 { animation-delay: 1.7s; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } }

.fish-svg .shadow { opacity: 0; transform-box: view-box; transform: translate(340px, 152px); }
.is-biting .shadow { opacity: 1; animation: swim 1.2s ease-out forwards; }
@keyframes swim { from { transform: translate(340px, 152px); } to { transform: translate(240px, 140px); } }
.is-biting .bobber { animation: nibble .55s ease-in-out infinite; }
@keyframes nibble { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(8px); } 55% { transform: translateY(1px); } 80% { transform: translateY(9px); } }
.is-biting .rp { animation-duration: .9s; }

.is-caught .rig, .is-caught .shadow, .is-caught .rp { opacity: 0; animation: none; transition: opacity .15s; }
.fish-svg .catch-line { opacity: 0; }
.is-caught .catch-line { opacity: 1; transition: opacity .3s .7s; }
.fish-svg .fishG { opacity: 0; transform-box: view-box; transform: translate(238px, 128px) rotate(0deg) scale(.4) translate(-8px, -36px); }
.is-caught .fishG { animation: leap 1.15s cubic-bezier(.25, .8, .3, 1) forwards; }
@keyframes leap {
  0% { opacity: 0; transform: translate(238px, 128px) rotate(0deg) scale(.4) translate(-8px, -36px); }
  12% { opacity: 1; }
  38% { opacity: 1; transform: translate(214px, 36px) rotate(-45deg) scale(.7) translate(-8px, -36px); }
  100% { opacity: 1; transform: translate(182px, 27px) rotate(90deg) scale(.62) translate(-8px, -36px); }
}
.fish-svg .sway { transform-box: view-box; transform-origin: 8px 36px; }
.is-caught .sway { animation: sway 2.2s ease-in-out 1.2s infinite alternate; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.fish-svg .splash circle { opacity: 0; }
.is-caught .splash circle { animation: splash .8s ease-out forwards; }
@keyframes splash { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* nothing biting: the line comes back empty */
.is-empty .rig { animation: reel .9s ease-in forwards; }
@keyframes reel { from { transform: scale(1); opacity: 1; } to { transform: scale(.04); opacity: 1; } }
.is-empty .rp { animation: none; opacity: 0; }

.fish-board {
  margin-top: 12px; padding: 16px 18px 18px; text-align: center;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 12px;
}
.fish-board h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.8rem; letter-spacing: .01em; }
.fish-board p { margin: 8px 0 0; color: #e6dcf7; line-height: 1.45; overflow-wrap: anywhere; }
.fish-kicker { display: inline-block; margin-bottom: 8px; padding: 2px 14px; border: 2px solid #fff; border-radius: 999px; font-size: .85rem; font-weight: 600; color: #fff; }
.fish-kicker.youtube { background: #ff0033; }
.fish-kicker.twitch { background: #9146ff; }
.fish-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; }
.fish-actions:empty { display: none; }


/* ---------- Live donations page ---------- */
.live-main { position: relative; max-width: 1100px; margin: 0 auto; padding: 60px 24px 100px; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 30px; margin-bottom: 84px; }
.stat-board {
  display: flex; align-items: center; gap: 16px; padding: 20px 18px;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 10px;
}
.stat-icon { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }
.stat-icon svg { width: 38px; height: 38px; }
.stat-board > div:last-child { min-width: 0; }
.stat-num { display: block; font-family: var(--display); font-size: 2rem; overflow-wrap: anywhere; line-height: 1.05; text-shadow: 0 0 10px rgba(255, 255, 255, .25); font-variant-numeric: tabular-nums; }
.stat-label { display: block; color: var(--yellow); font-weight: 600; }
.stat-note { display: block; margin-top: 2px; color: #b9a8d6; font-size: .82rem; }

.live-main .bar { justify-content: center; margin-bottom: 40px; }
.status .dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.dot.off { background: #9aa7b2; animation: none; }

.feed-wrap {
  max-width: 860px; margin: 0 auto; padding: 10px; border: 4px solid #6b4326; border-radius: 18px;
  background: repeating-linear-gradient(90deg, var(--wood) 0 40px, #bd824f 40px 42px);
  box-shadow: 0 7px 0 var(--wood-deep), 0 22px 30px rgba(0, 50, 110, .35);
}
.feed {
  list-style: none; margin: 0; padding: 6px 18px; min-height: 120px;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 10px;
}
.feed:empty { display: none; }
.don { display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-bottom: 2px dashed rgba(255, 255, 255, .14); border-radius: 8px; }
.don:last-child { border-bottom: 0; }
.amt {
  flex-shrink: 0; min-width: 124px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 14px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  font-family: var(--display); font-size: 1.2rem; letter-spacing: .01em; color: var(--on); background: var(--tier);
}
.amt svg { width: 18px; height: 18px; }
.who { flex: 1; min-width: 0; color: #e6dcf7; line-height: 1.4; overflow-wrap: anywhere; }
.who b { color: #fff; font-weight: 600; }
.wow { display: inline-block; margin-left: 6px; padding: 0 9px; border-radius: 999px; background: var(--tier); color: var(--on); font-size: .8rem; font-weight: 600; }
.don time { flex-shrink: 0; color: #b9a8d6; font-size: .9rem; }
.don.fresh { animation: don-in .7s cubic-bezier(.2, .9, .3, 1.2) both, don-glow 2.6s ease-out both; }
@keyframes don-in { from { opacity: 0; transform: translateY(-26px) scale(.96); } }
@keyframes don-glow { 0% { background: var(--glow); } 100% { background: transparent; } }
.don.tier-huge .amt, .don.tier-big .amt { animation: amt-pop 2.2s ease-in-out infinite; }
@keyframes amt-pop { 0%, 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 0 var(--glow); } 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 0 0 7px transparent; } }

.feed-empty {
  display: flex; align-items: center; gap: 24px; padding: 30px 28px; color: #e6dcf7;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 10px;
}
.feed-empty svg { width: 70px; height: 70px; flex-shrink: 0; animation: bob-s 4s ease-in-out infinite; }
.feed-empty strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: #fff; margin-bottom: 4px; }
.feed-empty span { display: block; line-height: 1.5; }

@media (max-width: 600px) {
  .don { flex-wrap: wrap; row-gap: 8px; }
  .who { order: 3; flex-basis: 100%; }
  .don time { margin-left: auto; }
  .feed-empty { flex-direction: column; text-align: center; }
}


/* ---------- Gift link page ---------- */
.gift-main { position: relative; max-width: 720px; margin: 0 auto; padding: 70px 24px 90px; text-align: center; }
.member.gift { width: 400px; margin: 0 auto; }
.gift-loading { color: #ffe9c7; font-weight: 600; padding: 40px 0; }
.gift-buoy { width: 72px; height: 72px; margin-bottom: 6px; animation: bob-s 4s ease-in-out infinite; }
.gift-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.gift-actions .btn { font-size: 1rem; padding: 10px 22px; }
.gift-note { min-height: 1.4em; margin: 14px 0 0; color: #b9a8d6; font-size: .92rem; }
.gift-share { margin: 46px 0 0; padding: 8px 18px; display: inline-block; border: 2px solid rgba(255, 138, 31, .55); border-radius: 999px; background: rgba(26, 10, 52, .9); color: #ffe9c7; }
.gift-share b { color: #fff; }


/* ---------- Stream alerts maker ---------- */
.maker-main { position: relative; max-width: 900px; margin: 0 auto; padding: 60px 24px 100px; }
/* the form must hold still while people type in it, so no floating */
.member.maker { width: 100%; animation: pop .7s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.maker .board { align-items: stretch; text-align: left; padding: 26px 26px 28px; }
.maker .board h3 { margin: 0; text-align: center; }
.maker .board .bio { text-align: center; margin-bottom: 20px; }
.maker-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
.field { display: flex; flex-direction: column; gap: 6px; color: #e6dcf7; font-weight: 500; }
.field.wide { grid-column: 1 / -1; }
.maker-form input[type="text"], .maker-form input[type="number"], .maker-form select, .result input {
  width: 100%; padding: 10px 14px; font: inherit; color: #fff; background: #120726;
  border: 2px solid #5a3a8a; border-radius: 10px;
}
.maker-form input:focus, .maker-form select:focus, .result input:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.maker-form input[type="range"] { width: 100%; accent-color: #ff8a1f; }
.row { display: flex; gap: 10px; align-items: stretch; }
.row .btn { padding: 8px 20px; font-size: 1rem; flex-shrink: 0; }
.check { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; color: #e6dcf7; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: #ff8a1f; }
.found { min-height: 1.3em; font-size: .92rem; color: #b9a8d6; }
.found.good { color: #8bf26a; }
.found.bad { color: #ff9a8a; }
.result { margin-top: 24px; padding-top: 20px; border-top: 2px dashed rgba(255, 255, 255, .16); }
.result-label { display: block; margin-bottom: 8px; color: var(--yellow); font-weight: 600; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.maker-steps, .maker-preview { margin-top: 70px; text-align: center; }
.maker-steps .plank, .maker-preview .plank { display: inline-block; margin-bottom: 28px; }
.maker-steps ol {
  max-width: 640px; margin: 0 auto; padding: 22px 28px 22px 48px; text-align: left; line-height: 1.6; color: #e6dcf7;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 14px;
}
.maker-steps li + li { margin-top: 8px; }
.maker-steps b { color: #fff; }
.preview {
  position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 16 / 9; border: 4px solid #6b4326; border-radius: 16px; overflow: hidden;
  background: #1c2b3a repeating-conic-gradient(#243749 0 25%, #1c2b3a 0 50%) 0 0 / 28px 28px;
  box-shadow: 0 7px 0 var(--wood-deep);
}
.preview iframe { width: 1280px; height: 720px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .55)); background: transparent; }
.preview-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #b9a8d6; font-weight: 500; font-size: 1.1rem; }
.preview-empty b { color: #fff; }
.preview-empty[hidden] { display: none; }
.preview-controls { margin-top: 22px; }
.preview-note { margin-top: 14px; color: #b9a8d6; }
@media (max-width: 640px) { .maker-form { grid-template-columns: 1fr; } .row { flex-wrap: wrap; } }

/* ---------- Boardwalk footer ---------- */
.boardwalk {
  padding: 34px 24px 40px; text-align: center; font-weight: 500; color: #3d2514;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 50%, rgba(0, 0, 0, .16) 50% calc(50% + 3px), transparent calc(50% + 3px)),
    repeating-linear-gradient(90deg, var(--wood) 0 70px, #8f5d37 70px 74px);
  border-top: 12px solid var(--wood-dark); box-shadow: inset 0 4px 0 #e2b185;
}

/* ---------- Team page ---------- */
.page-fade { position: relative; height: 0; }
.page-fade::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; pointer-events: none;
  background: linear-gradient(rgba(170, 255, 205, .34), rgba(170, 255, 205, 0));
}
.team-main { position: relative; max-width: 1180px; margin: 0 auto; padding: 56px 24px 100px; }
.crew-section + .crew-section { margin-top: 84px; }
.section-head { display: flex; justify-content: center; margin-bottom: 52px; }
.crew-section .empty { max-width: 560px; margin: 0 auto; }
.crew { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 32px; }

.member, .stat {
  position: relative; isolation: isolate; width: 320px; max-width: 100%;
  padding: 10px; border: 4px solid #6b4326; border-radius: 18px;
  background:
    radial-gradient(circle 2.6px at 5px 5px, #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at calc(100% - 5px) 5px, #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at 5px calc(100% - 5px), #4a2f1c 96%, transparent) no-repeat,
    radial-gradient(circle 2.6px at calc(100% - 5px) calc(100% - 5px), #4a2f1c 96%, transparent) no-repeat,
    repeating-linear-gradient(90deg, var(--wood) 0 40px, #bd824f 40px 42px);
  box-shadow: 0 7px 0 var(--wood-deep), 0 22px 30px rgba(0, 50, 110, .35);
  animation: pop .7s cubic-bezier(.2, .9, .3, 1.2) calc(var(--i, 0) * 110ms) backwards, float 6s ease-in-out var(--fd, 0s) infinite;
}
.member:nth-child(2n), .stat:nth-child(2n) { --fd: -2s; }
.member:nth-child(3n), .stat:nth-child(3n) { --fd: -4s; }
.member::before, .member::after, .stat::before, .stat::after {
  content: ""; position: absolute; top: -30px; width: 18px; height: 36px; z-index: -1;
  background: linear-gradient(90deg, #6d4426, var(--wood-deep)); border-radius: 6px 6px 0 0;
}
.member::before, .stat::before { left: 16%; }
.member::after, .stat::after { right: 16%; }
.board {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px 22px; min-height: 100%;
  background: linear-gradient(160deg, #2e1a55, #190b35); border: 3px solid #0a0420; border-radius: 10px;
}
.avatar {
  width: 116px; height: 116px; padding: 7px; border-radius: 50%;
  background: repeating-conic-gradient(var(--signal) 0 22.5deg, #fff 0 45deg);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
}
.avatar img, .avatar .initial {
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; display: block;
}
.avatar .initial {
  display: grid; place-items: center; font-family: var(--display); font-size: 2.8rem; color: #fff;
  background: var(--water) var(--tile); background-size: 200px 200px; text-shadow: 0 3px 0 rgba(11, 63, 134, .5);
}
.badge {
  position: relative; z-index: 1; margin-top: -14px; padding: 3px 15px; border: 3px solid #fff; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.badge.gold { color: #5b3a24; background: linear-gradient(#ffe56f, #f2b300); }
.badge.blue { background: linear-gradient(#ffb04a, #ff6a00); }
.badge.green { background: linear-gradient(#6be06b, #2fa83a); }
.badge.red { background: linear-gradient(#ff705b, #cf2e1f); }
.badge.purple { background: linear-gradient(#b58cff, #7c4dff); }
.board h3 { margin: 14px 0 2px; font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: .01em; text-shadow: 0 0 8px rgba(255, 255, 255, .25); }
.role { margin: 0; color: var(--yellow); font-weight: 600; }
.bio { margin: 10px 0 0; color: #e6dcf7; line-height: 1.45; font-size: .95rem; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 20px; }
.icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 0 #9bb9cf; transition: transform .15s, box-shadow .15s;
}
.icon svg { width: 24px; height: 24px; }
.icon:hover { transform: translateY(-3px); box-shadow: 0 6px 0 #9bb9cf; }
.icon:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.boardwalk a { color: #3d2514; font-weight: 600; }

@media (max-width: 1100px) {
  .island, .dock { display: none; }
  .booth.b1 { left: 4%; } .booth.b2 { right: 4%; }
}
@media (max-width: 720px) {
  .hero-inner { padding: 38px 20px 80px; }
  .lede { font-size: 1.12rem; }
  .harbor { height: 300px; }
  .yacht { top: 40px; }
  .booth { display: none; }
  .moon { width: 96px; height: 96px; right: 6%; top: 22px; }
  .ghost.g2 { display: none; }
  .cloud.c1 { width: 120px; top: 30px; }
  .cloud.c2, .cloud.c3 { display: none; }
  .birds { display: none; }
  .empty { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}