/* ============================================================
   ihnmims.com  —  Frutiger Aero / Y2K theme
   plain modern CSS: custom props, glassmorphism, animations
   ============================================================ */

:root{
  --aqua:        #12b3ef;
  --aqua-lite:   #7fe3ff;
  --aqua-deep:   #0079c2;
  --sky:         #d8f6ff;
  --green:       #8fdc4a;
  --green-deep:  #4ea81f;
  --glass-bg:    rgba(255,255,255,.16);
  --glass-brd:   rgba(255,255,255,.55);
  --glass-shadow:0 8px 30px rgba(0,60,100,.35);
  --ink:         #063857;
  --ink-soft:    #0a5a86;
  --radius:      20px;
  --font:        "Segoe UI", Frutiger, "Frutiger Linotype", Tahoma, Verdana, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:var(--font);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='7' fill='rgba(180,240,255,.5)' stroke='white' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='2.5' fill='white'/%3E%3C/svg%3E") 14 14, auto;
}

/* ---------- background layers ---------- */
.bg-water, .bg-light{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
}
.bg-water{
  background:url("assets/tileablewater.gif") repeat;
  background-size:560px auto;
  animation:drift 90s linear infinite;
}
.bg-light{
  z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(0,50,90,.35), rgba(0,50,90,0) 60%),
    linear-gradient(180deg, rgba(120,225,255,.25), rgba(0,90,150,.25));
  mix-blend-mode:screen;
}
@keyframes drift{ from{ background-position:0 0; } to{ background-position:560px 1120px; } }

/* ---------- rising bubbles ---------- */
#bubbleField{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bubble{
  position:absolute; bottom:-60px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.15) 40%, rgba(120,225,255,.08) 60%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 0 8px rgba(255,255,255,.6);
  animation:rise linear forwards;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0) scale(.6); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translateY(-52vh) translateX(22px) scale(1); }
  100%{ transform:translateY(-108vh) translateX(-18px) scale(1.05); opacity:0; }
}

/* ============================================================
   glass / gloss primitives
   ============================================================ */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 30px rgba(0,80,130,.18);
  position:relative;
  overflow:hidden;
}
/* the signature top gloss sweep */
.glass::before{
  content:""; position:absolute; left:0; right:0; top:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* ---------- chrome / aqua title text ---------- */
.chrome-text{
  font-weight:800; letter-spacing:.5px; margin:0; line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#bff0ff 35%,#12b3ef 55%,#0079c2 72%,#ffffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.7)) drop-shadow(0 3px 6px rgba(0,60,110,.45));
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.chrome-text .dot{ color:#8fdc4a; -webkit-text-fill-color:#8fdc4a; }

/* ============================================================
   glossy aqua buttons  (Web 2.0 / Aqua)
   ============================================================ */
.aqua-btn{
  --h:#eafcff; --a:var(--aqua); --b:var(--aqua-deep);
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:.7em 1.4em; border:none; border-radius:999px;
  font-family:var(--font); font-weight:700; font-size:1rem; color:#fff;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--h) 0%, var(--a) 48%, var(--b) 100%);
  box-shadow:0 3px 0 rgba(0,60,100,.35), 0 6px 14px rgba(0,80,140,.4),
             inset 0 1px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(0,60,110,.35);
  text-shadow:0 -1px 0 rgba(0,60,110,.5);
  transition:transform .08s ease, filter .15s ease;
}
.aqua-btn .sheen{
  position:absolute; left:6%; right:6%; top:5%; height:42%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  pointer-events:none;
}
.aqua-btn:hover{ filter:brightness(1.08) saturate(1.1); }
.aqua-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,60,100,.35), inset 0 2px 6px rgba(0,50,90,.5); }
.aqua-btn.sm{ font-size:.9rem; padding:.5em 1.1em; }
.aqua-btn.xs{ font-size:.78rem; padding:.4em .8em; }
.aqua-btn.green{ --h:#f0ffe0; --a:var(--green); --b:var(--green-deep); text-shadow:0 -1px 0 rgba(30,80,0,.5); }

/* ============================================================
   splash / click-to-enter
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px;
  background:radial-gradient(90% 90% at 50% 30%, rgba(20,160,225,.35), rgba(0,40,80,.7));
  backdrop-filter:blur(4px);
  transition:opacity .8s ease, visibility .8s;
}
#splash.gone{ opacity:0; visibility:hidden; }
.splash-card{ text-align:center; padding:34px 30px 28px; max-width:440px; width:100%; animation:pop .6s cubic-bezier(.2,1.3,.4,1) both; }
.splash-welcome{ max-width:260px; width:70%; border-radius:10px; margin-bottom:12px; box-shadow:0 4px 12px rgba(0,50,90,.4); }
.splash-card .chrome-text{ font-size:clamp(2.4rem,9vw,3.6rem); }
.splash-sub{ color:var(--ink-soft); font-weight:600; margin:.5em 0 1.3em; }
.splash-card .aqua-btn{ font-size:1.15rem; padding:.85em 1.8em; animation:pulse 2.2s ease-in-out infinite; }
.splash-fine{ margin-top:1.2em; font-size:.8rem; color:var(--ink-soft); }
@keyframes pop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

/* ============================================================
   layout
   ============================================================ */
#site{ position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:22px 16px 60px; }
#site.hidden{ display:none; }

.site-header{ text-align:center; margin-bottom:16px; }
.welcome-banner{ max-width:340px; width:82%; border-radius:12px; box-shadow:0 6px 20px rgba(0,50,90,.45); border:2px solid rgba(255,255,255,.7); }
.site-title{ font-size:clamp(2.6rem,10vw,5rem); margin:.15em 0 .1em; }

/* marquee */
.marquee{
  margin:10px auto 0; max-width:760px; overflow:hidden; white-space:nowrap;
  border-radius:999px; padding:6px 0; font-weight:600; color:var(--ink-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15));
  border:1px solid var(--glass-brd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--glass-shadow);
}
.marquee-track{ display:inline-block; padding-left:100%; animation:scroll 34s linear infinite; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* nav */
.nav-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:12px; margin:16px 0; }

/* columns */
.columns{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
.col-main, .col-side{ display:flex; flex-direction:column; gap:18px; }

/* panels */
.panel{ padding:22px 22px 24px; }
.panel.tight{ padding:16px 16px 18px; }
.panel-title{
  margin:0 0 .7em; font-size:1.25rem; color:var(--aqua-deep);
  text-shadow:0 1px 0 rgba(255,255,255,.9); letter-spacing:.3px;
}
.panel p{ line-height:1.6; margin:.5em 0; }
.muted{ color:var(--ink-soft); }
.tiny{ font-size:.78rem; }
.center{ text-align:center; }

/* the waving cool guy tucked in the about panel */
.coolguy{ float:right; width:78px; margin:0 -4px 6px 12px; filter:drop-shadow(0 4px 6px rgba(0,50,90,.4)); }

/* hit counter odometer */
.counter-wrap{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.counter-label{ font-weight:600; color:var(--ink-soft); }
.odometer{
  font-family:"Courier New", monospace; font-weight:700; letter-spacing:3px; font-size:1.3rem;
  color:#8dff6a; background:#04121b; padding:6px 12px; border-radius:8px;
  border:2px solid #0a2c3f; box-shadow:inset 0 2px 8px rgba(0,0,0,.8), 0 0 12px rgba(60,255,140,.25);
}

/* link list */
.link-list{ list-style:none; padding:0; margin:.5em 0; display:grid; gap:8px; }
.link-list a{
  display:block; padding:9px 14px; border-radius:12px; text-decoration:none; font-weight:600; color:var(--aqua-deep);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
  border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .1s ease, filter .1s ease;
}
.link-list a:hover{ transform:translateX(4px); filter:brightness(1.05); color:var(--aqua-deep); }
.webring{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; flex-wrap:wrap; }
.webring-name{ font-weight:700; color:var(--green-deep); text-shadow:0 1px 0 rgba(255,255,255,.9); }

/* guestbook */
.gb-form{ display:flex; flex-direction:column; gap:10px; }
.gb-row{ display:flex; gap:10px; flex-wrap:wrap; }
.gb-row .aqua-input{ flex:1 1 140px; }
.aqua-input{
  font-family:var(--font); font-size:.95rem; color:var(--ink); padding:10px 12px; border-radius:12px; width:100%;
  background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 6px rgba(0,60,110,.18); outline:none; resize:vertical;
}
.aqua-input:focus{ box-shadow:inset 0 2px 6px rgba(0,60,110,.25), 0 0 0 3px rgba(18,179,239,.4); }
.gb-entries{ margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.gb-entry{
  padding:10px 12px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
  border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.gb-entry .gb-who{ font-weight:700; color:var(--aqua-deep); }
.gb-entry .gb-when{ font-size:.72rem; color:var(--ink-soft); float:right; }
.gb-entry .gb-text{ margin:.25em 0 0; line-height:1.45; }

/* side scenes */
.scene{ display:flex; gap:8px; align-items:flex-end; justify-content:center; flex-wrap:wrap; }
.scene img{ max-width:120px; filter:drop-shadow(0 4px 6px rgba(0,50,90,.35)); }
.reef-img{ width:100%; border-radius:12px; }
.bubbles-cluster{ position:absolute; right:8px; bottom:4px; width:44px; opacity:.9; }

/* status LEDs */
.status-list{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-weight:600; color:var(--ink-soft); }
.led{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; vertical-align:middle;
  box-shadow:0 0 6px currentColor, inset 0 1px 1px rgba(255,255,255,.8); }
.led.on{ background:#4dff7a; color:#4dff7a; }
.led.blink{ background:#ffd23c; color:#ffd23c; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* footer */
.site-footer{ margin-top:22px; padding:18px; text-align:center; }
.buttons88{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.buttons88 img{ height:31px; border:1px solid rgba(255,255,255,.6); border-radius:3px; }
.btn88{
  width:88px; height:31px; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:9px; font-weight:700; line-height:1.1; border-radius:3px; padding:2px; color:#fff;
  border:1px solid rgba(255,255,255,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.btn88.made{ background:linear-gradient(180deg,#33c1f0,#0079c2); }
.btn88.netscape{ background:linear-gradient(180deg,#2b2b2b,#000); }
.btn88.res{ background:linear-gradient(180deg,#8fdc4a,#4ea81f); }
.btn88.valid{ background:linear-gradient(180deg,#ff9d3c,#e0631f); }
.copy{ margin:14px 0 0; font-size:.82rem; color:var(--ink-soft); }
.copy a{ color:var(--aqua-deep); font-weight:700; text-decoration:none; }

/* ============================================================
   floating critters
   ============================================================ */
.floaties{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.floaty{ position:fixed; filter:drop-shadow(0 6px 8px rgba(0,50,90,.4)); will-change:transform; }

.f-dolphin{ width:120px; top:16%; left:-140px; animation:swimRight 26s linear infinite; }
.f-goldfish{ width:70px; top:64%; right:-90px; animation:swimLeft 34s linear infinite; }
.f-plane{ width:110px; top:6%; left:-130px; animation:flyRight 40s linear infinite; }
.f-glider{ width:80px; top:40%; right:-100px; animation:flyLeft 55s linear infinite; }
.f-orange{ width:86px; bottom:8%; left:3%; animation:spin 18s linear infinite, bobY 6s ease-in-out infinite; }
.f-surfer{ width:120px; bottom:-6px; right:2%; animation:bobY 4.5s ease-in-out infinite; }
.f-hermit{ width:84px; bottom:0; left:-100px; animation:crawlRight 48s linear infinite; }
.f-ant{ width:70px; top:50%; left:-90px; animation:crawlRight 60s linear infinite; animation-delay:-20s; }

@keyframes swimRight{ 0%{ transform:translateX(0) translateY(0) scaleX(1); } 50%{ transform:translateX(60vw) translateY(-30px) scaleX(1);} 100%{ transform:translateX(120vw) translateY(10px) scaleX(1); } }
@keyframes swimLeft{ 0%{ transform:translateX(0) scaleX(-1);} 50%{ transform:translateX(-55vw) translateY(24px) scaleX(-1);} 100%{ transform:translateX(-120vw) scaleX(-1);} }
@keyframes flyRight{ from{ transform:translateX(0) translateY(0);} to{ transform:translateX(130vw) translateY(-24px);} }
@keyframes flyLeft{ from{ transform:translateX(0) scaleX(-1);} to{ transform:translateX(-130vw) translateY(30px) scaleX(-1);} }
@keyframes crawlRight{ from{ transform:translateX(0);} to{ transform:translateX(120vw);} }
@keyframes spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@keyframes bobY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* ============================================================
   music player
   ============================================================ */
#player{
  position:fixed; left:18px; bottom:18px; z-index:40; width:320px; max-width:calc(100vw - 36px);
  padding:12px 14px 14px;
}
#player[hidden]{ display:none; }
.player-top{ display:flex; align-items:center; gap:10px; }
.player-meta{ flex:1; min-width:0; }
.track-title{ font-weight:800; color:var(--aqua-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-title .bitcrush{ color:var(--green-deep); font-weight:700; font-size:.85em; }
.track-artist{ font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-btn{
  flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; color:#fff; font-size:1rem;
  background:linear-gradient(180deg,#eafcff,#12b3ef 48%,#0079c2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(0,80,140,.4);
}
.pp-btn.small{ width:34px; height:34px; font-size:.9rem; }
.pp-btn:active{ transform:translateY(1px); }
#viz{ width:100%; height:46px; margin-top:8px; border-radius:8px; background:rgba(4,18,27,.55); display:block; }
.vol{ width:100%; margin-top:8px; accent-color:var(--aqua); }

/* cursor bubble trail */
#trailCanvas{ position:fixed; inset:0; z-index:50; pointer-events:none; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:820px){
  .columns{ grid-template-columns:1fr; }
  .f-plane, .f-glider, .f-ant{ display:none; }
  #player{ left:10px; right:10px; bottom:10px; width:auto; }
}

/* accessibility: calm everything down if requested */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .bg-water{ animation:none; }
  .marquee-track{ animation:none; padding-left:0; }
  .floaty{ display:none; }
}

/* ============================================================
   GAME SERVERS — homepage section + hub + detail pages
   ============================================================ */

/* green accent variants */
.chrome-text.green{
  background:linear-gradient(180deg,#ffffff 0%,#e4ffca 32%,#8fdc4a 54%,#4ea81f 72%,#ffffff 100%);
  -webkit-background-clip:text; background-clip:text;
}
.panel-title.green{ color:var(--green-deep); }

/* homepage game-servers section */
.server-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:.6em 0 1em; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-weight:600; font-size:.85rem;
  color:var(--ink-soft); background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2));
  border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.chip.soon{ opacity:.8; }
.hub-btn{ font-size:1.05rem; }

/* ---------- shared sub-page layout ---------- */
.subpage{ position:relative; z-index:2; max-width:1000px; margin:0 auto; padding:28px 16px 60px; }
.subpage.narrow{ max-width:760px; }
.subpage-header{ text-align:center; margin-bottom:22px; position:relative; }
.subpage-header .chrome-text{ font-size:clamp(2.2rem,8vw,3.8rem); margin:.1em 0; }
.subpage-sub{ color:var(--ink-soft); font-weight:600; margin:.3em 0 0; }
.back-link{
  position:absolute; left:0; top:6px; z-index:5; text-decoration:none; font-weight:700; color:var(--aqua-deep);
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2)); padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); font-size:.85rem;
}
.back-link:hover{ filter:brightness(1.06); }
.subpage-foot{ text-align:center; color:var(--ink-soft); font-size:.82rem; margin-top:26px; }
.subpage-foot a{ color:var(--aqua-deep); font-weight:700; text-decoration:none; }

/* ---------- server cards (hub) ---------- */
.servers-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.server-card{ padding:20px; display:flex; flex-direction:column; gap:12px; }
.server-card.featured{ box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 2px rgba(143,220,74,.5); }
.card-head{ display:flex; align-items:center; gap:12px; }
.card-icon{ font-size:2.2rem; filter:drop-shadow(0 3px 4px rgba(0,50,90,.4)); }
.card-title{ flex:1; }
.card-title h2{ margin:0; font-size:1.35rem; color:var(--aqua-deep); text-shadow:0 1px 0 rgba(255,255,255,.9); }
.theme-zomboid .card-title h2{ color:var(--green-deep); }
.status-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; color:var(--green-deep); }
.status-badge.soon{ color:#b9871f; }
.card-desc{ margin:0; line-height:1.5; color:var(--ink); }
.stat-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.stat-chips span{
  font-size:.75rem; font-weight:600; color:var(--ink-soft); padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.7);
}
.connect-mini{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.mono-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.details-btn{ align-self:flex-start; margin-top:2px; }
.soon-card{ opacity:.9; }

/* monospace connect codes */
.mono{
  font-family:"Courier New",monospace; font-weight:700; color:#8dff9e;
  background:#04121b; padding:4px 9px; border-radius:7px; border:1px solid #0a2c3f;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7); font-size:.85rem; word-break:break-all;
}
.mono.big{ font-size:1.05rem; padding:8px 14px; }
.mono[data-copy]{ cursor:pointer; position:relative; }
.mono[data-copy]:hover{ filter:brightness(1.18); }
.mono[data-copy].copied::after{
  content:"copied!"; position:absolute; left:50%; top:-2em; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:.68rem; font-family:var(--font); padding:2px 8px; border-radius:6px; white-space:nowrap;
}

/* ---------- zomboid detail ---------- */
.connect-card{ padding:22px; text-align:center; margin-bottom:18px; }
.connect-label{ font-size:.8rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--green-deep); margin-bottom:12px; }
.connect-rows{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.connect-field{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cf-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); }
.connect-note{ margin:16px 0 0; color:var(--ink-soft); font-size:.9rem; }

.stat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.stat-tile{ padding:14px 8px; text-align:center; display:flex; flex-direction:column; gap:4px; }
.st-val{ font-size:1.5rem; font-weight:800; color:var(--green-deep); text-shadow:0 1px 0 rgba(255,255,255,.9); }
.st-key{ font-size:.72rem; font-weight:600; color:var(--ink-soft); }

.ruleset{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.ruleset li{
  line-height:1.5; padding:10px 14px 10px 34px; border-radius:12px; position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.18));
  border:1px solid rgba(255,255,255,.65); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.ruleset li::before{ content:"✚"; position:absolute; left:12px; top:10px; color:var(--green-deep); font-weight:800; }
.steps{ margin:0; padding-left:1.4em; display:grid; gap:9px; line-height:1.55; }
.steps li::marker{ color:var(--green-deep); font-weight:800; }

/* zomboid page: warm the water background slightly toward green */
body.theme-zomboid-page .bg-light{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(30,90,10,.35), rgba(30,90,10,0) 60%),
    linear-gradient(180deg, rgba(150,225,120,.22), rgba(20,120,40,.22));
}

@media (max-width:520px){
  .stat-tiles{ grid-template-columns:repeat(2,1fr); }
  .back-link{ position:static; display:inline-block; margin-bottom:10px; }
}

/* mini music player (sub-pages) */
.mini-player{
  position:fixed; left:16px; bottom:16px; z-index:40; display:flex; align-items:center; gap:10px;
  padding:8px 12px 8px 8px; max-width:calc(100vw - 32px);
}
.mini-player .mp-meta{ min-width:0; }
.mp-title{ font-weight:800; font-size:.9rem; color:var(--aqua-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-sub{ font-size:.66rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); }
.mp-viz{ width:88px; height:28px; border-radius:6px; background:rgba(4,18,27,.5); display:block; flex:none; }
body.theme-zomboid-page .mp-title{ color:var(--green-deep); }

/* aqua-accent variants (Palworld page) */
.connect-label.aqua{ color:var(--aqua-deep); }
.st-val.aqua{ color:var(--aqua-deep); }
.ruleset.aqua li::before{ color:var(--aqua-deep); }
.steps.aqua li::marker{ color:var(--aqua-deep); }

/* ============ decorative game sprites (server sub-pages) ============ */
.svr-floaties{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.svr-floaty{
  position:fixed; width:120px; height:auto; image-rendering:auto;
  filter:drop-shadow(0 8px 10px rgba(0,20,40,.4));
  opacity:.96; will-change:transform;
}
@keyframes svr-bob   { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes svr-bob2  { 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-10px) rotate(2deg) } }
@keyframes svr-sway  { 0%,100%{ transform:translateX(0) rotate(-3deg) } 50%{ transform:translateX(18px) rotate(3deg) } }
@keyframes svr-hover { 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(-18px) scale(1.03) } }

/* zombies — slow, uneasy shamble */
.svr-floaty.z-1{ left:2.5vw;  bottom:5vh;  width:118px; animation:svr-sway 5.5s ease-in-out infinite; }
.svr-floaty.z-2{ right:3vw;   top:16vh;    width:132px; animation:svr-bob2 6.5s ease-in-out infinite; }
.svr-floaty.z-3{ left:3vw;    top:22vh;    width:126px; animation:svr-sway 7s   ease-in-out infinite .6s; }
.svr-floaty.z-4{ right:2.5vw; bottom:8vh;  width:104px; animation:svr-bob  4.8s ease-in-out infinite; }

/* pals — light, floaty drift */
.svr-floaty.p-1{ right:2vw;   top:13vh;    width:210px; animation:svr-hover 5s ease-in-out infinite; }
.svr-floaty.p-2{ left:2.5vw;  bottom:7vh;  width:150px; animation:svr-bob   4.6s ease-in-out infinite .3s; }
.svr-floaty.p-3{ left:3vw;    top:24vh;    width:120px; animation:svr-bob2  6s   ease-in-out infinite; }

/* hub — one of each, opposite corners */
.svr-floaty.hub-pal{ left:2.5vw;  bottom:7vh; width:150px; animation:svr-hover 5s ease-in-out infinite; }
.svr-floaty.hub-zed{ right:3vw;   bottom:8vh; width:118px; animation:svr-sway  6s ease-in-out infinite; }

/* pal collage showcase */
.pal-showcase{
  display:block; width:100%; max-width:520px; margin:4px auto 6px; border-radius:14px;
  border:2px solid rgba(255,255,255,.7);
  box-shadow:0 8px 22px rgba(0,40,70,.28), inset 0 1px 0 rgba(255,255,255,.9);
}

/* keep sprites out of the way on narrow screens, and respect reduced motion */
@media (max-width:1024px){ .svr-floaty.z-3,.svr-floaty.p-3{ display:none; } }
@media (max-width:820px){ .svr-floaties{ display:none; } }
@media (prefers-reduced-motion: reduce){ .svr-floaty{ animation:none !important; } }

/* ============ gif icons (replacing emoji) ============ */
.card-icon-gif{
  width:52px; height:52px; flex:none; object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,50,90,.4));
}
.st-gif{
  display:block; height:42px; width:auto; max-width:70px; margin:0 auto 2px;
  object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,50,90,.35));
}
/* minecraft "grass block" — pixel-art cube, no emoji */
.mc-block{
  width:48px; height:48px; flex:none; border-radius:5px; position:relative;
  background:
    radial-gradient(2px 2px at 30% 60%, rgba(0,0,0,.18) 60%, transparent 61%),
    radial-gradient(2px 2px at 62% 78%, rgba(0,0,0,.18) 60%, transparent 61%),
    radial-gradient(2px 2px at 48% 45%, rgba(255,255,255,.25) 60%, transparent 61%),
    linear-gradient(#8fdc4a 0 30%, #7a5233 30% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.28),
    inset 3px 3px 0 rgba(255,255,255,.28),
    inset -3px -4px 0 rgba(0,0,0,.18),
    0 3px 4px rgba(0,50,90,.4);
  image-rendering:pixelated;
}

/* ============ public message board ============ */
.board-intro{ margin:.2em 0 1em; }
/* honeypot — hidden from humans, catches bots */
.hp{ position:absolute !important; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.gb-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#gbStatus{ min-height:1em; }
.gb-live{
  font-size:.62rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--green-deep); vertical-align:middle; margin-left:.4em;
  animation:gblive 1.8s ease-in-out infinite;
}
.gb-live.off{ color:#b06; animation:none; }
@keyframes gblive{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ============ minecraft page (grass-green theme) ============ */
body.theme-minecraft-page .bg-light{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(110% 70% at 50% 120%, rgba(60,150,30,.38), rgba(60,150,30,0) 60%),
    linear-gradient(180deg, rgba(140,220,110,.24), rgba(40,140,50,.24));
}
body.theme-minecraft-page .mp-title{ color:var(--green-deep); }

/* minecraft floaties (reuse the svr-floaty base + bob/sway keyframes) */
.svr-floaty.mc-1{ left:2.5vw; bottom:5vh;  width:120px; animation:svr-bob   4.8s ease-in-out infinite; }        /* steve */
.svr-floaty.mc-2{ right:3vw;  top:13vh;    width:92px;  animation:svr-bob2  6.5s ease-in-out infinite; }        /* creeper */
.svr-floaty.mc-3{ left:3vw;   top:22vh;    width:112px; animation:svr-hover 5.4s ease-in-out infinite .4s; }    /* shulker */
.svr-floaty.mc-4{ right:2.5vw; bottom:8vh; width:118px; animation:svr-sway  6s   ease-in-out infinite; }        /* bat */
/* hub: a creeper alongside the pal + zombie */
.svr-floaty.hub-mc{ right:3vw; top:14vh; width:88px; animation:svr-bob2 6.5s ease-in-out infinite; }

/* ============================================================
   THE FISHING HOLE — 49 species, 3 depths, live leaderboard
   Frutiger Aero: glass, gloss, caustics, god rays, lens flare
   ============================================================ */

/* ---- rarity tiers (shared by status, feed, board, tacklebox) ---- */
.theme-fishing-page{
  --t-junk:#9fb0bb;      --t-junk-glow:rgba(159,176,187,.5);
  --t-common:#d9f2ff;    --t-common-glow:rgba(217,242,255,.6);
  --t-uncommon:#8dff9e;  --t-uncommon-glow:rgba(141,255,158,.65);
  --t-rare:#5cc8ff;      --t-rare-glow:rgba(92,200,255,.7);
  --t-epic:#c79bff;      --t-epic-glow:rgba(199,155,255,.75);
  --t-treasure:#ffd166;  --t-treasure-glow:rgba(255,209,102,.8);
  --t-legendary:#ff8a4c; --t-legendary-glow:rgba(255,138,76,.85);
  --t-mythic:#ff7ae0;    --t-mythic-glow:rgba(255,122,224,.9);
}

/* ---- per-zone water palette (set on <body data-zone>) ---- */
.theme-fishing-page{ --sky1:#cdf1ff; --sky2:#8fd8f5; --w1:#39b4e0; --w2:#0f6ea8; --w3:#064a7a; --glow:#bfefff; }
.theme-fishing-page[data-zone="reef"]{  --sky1:#d6f7f1; --sky2:#7fdcd0; --w1:#1fb9ad; --w2:#0b7f8c; --w3:#054e63; --glow:#a8fff0; }
.theme-fishing-page[data-zone="abyss"]{ --sky1:#4a6b93; --sky2:#22406b; --w1:#123a63; --w2:#08203f; --w3:#020d1f; --glow:#7ad7ff; }
.theme-fishing-page[data-night="1"]{ --sky1:#2b3f63; --sky2:#16273f; }
.theme-fishing-page[data-night="1"][data-zone="abyss"]{ --sky1:#1c2b46; --sky2:#0c1729; }

.svr-floaty.fh-1{ right:2vw;  top:12vh;   width:130px; animation:svr-sway 7s ease-in-out infinite; }
.svr-floaty.fh-2{ left:2.5vw; bottom:6vh; width:110px; animation:svr-bob  5s ease-in-out infinite; }
.svr-floaty.fh-3{ left:3vw;   top:20vh;   width:100px; animation:svr-bob2 6.5s ease-in-out infinite .4s; }

/* ============ angler bar + zone picker ============ */
.angler-bar{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:16px;
}
.angler-field{ flex:0 0 auto; min-width:190px; }
.angler-field label{
  display:block; font-size:.66rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;
}
#anglerName{
  width:100%; font-family:var(--font); font-size:.95rem; font-weight:700; color:var(--ink);
  padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.75);
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  box-shadow:inset 0 2px 5px rgba(0,60,110,.14), 0 1px 0 rgba(255,255,255,.8);
}
#anglerName:focus{ outline:2px solid var(--aqua); outline-offset:1px; }

.zone-picker{ display:flex; gap:9px; flex:1; flex-wrap:wrap; }
.zone-btn{
  flex:1; min-width:132px; text-align:left; cursor:pointer; position:relative; overflow:hidden;
  padding:9px 13px; border-radius:13px; font-family:var(--font);
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .1s ease, filter .15s ease;
}
.zone-btn::before{ /* gloss sweep */
  content:""; position:absolute; left:0; right:0; top:0; height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0)); pointer-events:none;
}
.zone-btn:hover:not(:disabled){ filter:brightness(1.06); }
.zone-btn:active:not(:disabled){ transform:translateY(1px); }
.zone-btn.on{
  border-color:rgba(255,255,255,.95);
  background:linear-gradient(180deg,#eafcff 0%,var(--aqua) 55%,var(--aqua-deep) 100%);
  box-shadow:0 3px 0 rgba(0,60,100,.3), 0 6px 14px rgba(0,80,140,.35), inset 0 1px 0 rgba(255,255,255,.9);
}
.zone-btn.on .z-name{ color:#fff; text-shadow:0 -1px 0 rgba(0,60,110,.5); }
.zone-btn.on .z-sub{ color:rgba(255,255,255,.85); }
.zone-btn.locked{ opacity:.5; cursor:not-allowed; filter:grayscale(.6); }
.z-name{ display:block; font-weight:800; font-size:.92rem; color:var(--ink); }
.z-sub{ display:block; font-size:.68rem; color:var(--ink-soft); margin-top:1px; }

/* ============ layout ============ */
.fish-layout{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:18px; }
@media(min-width:900px){ .fish-layout{ grid-template-columns:1.55fr 1fr; align-items:start; } }
.fish-side{ display:grid; gap:14px; }
.board-panel{ display:flex; flex-direction:column; }

/* ============ the pond ============ */
.fish-game{ padding:16px; }
.pond{
  position:relative; height:clamp(240px,40vh,340px); border-radius:16px; overflow:hidden;
  border:2px solid rgba(255,255,255,.72); cursor:pointer; user-select:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85), inset 0 -26px 50px rgba(0,50,95,.45),
             0 8px 24px rgba(0,40,70,.3);
  transition:box-shadow .5s ease;
}
.pond-sky{
  position:absolute; inset:0 0 60% 0; overflow:hidden;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 78%,var(--w1) 100%);
  transition:background .6s ease;
}
/* the Frutiger sun + lens flare */
.sun{
  position:absolute; right:16%; top:10%; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #fff 0 32%, rgba(255,255,255,.85) 46%, rgba(255,247,200,.35) 62%, rgba(255,247,200,0) 78%);
  box-shadow:0 0 34px 12px rgba(255,252,220,.55);
  animation:sunbreathe 6s ease-in-out infinite;
}
@keyframes sunbreathe{ 0%,100%{ transform:scale(1); opacity:.95 } 50%{ transform:scale(1.07); opacity:1 } }
[data-night="1"] .sun{
  background:radial-gradient(circle at 42% 38%, #fff 0 40%, rgba(220,235,255,.7) 55%, rgba(200,225,255,0) 75%);
  box-shadow:0 0 26px 8px rgba(200,225,255,.4);
}
/* god rays */
.godray{
  position:absolute; top:-30%; width:38px; height:170%; transform-origin:top center;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 78%);
  filter:blur(5px); opacity:.55; pointer-events:none;
}
.godray.g1{ right:22%; transform:rotate(9deg);  animation:sway1 9s ease-in-out infinite; }
.godray.g2{ right:34%; transform:rotate(-5deg); animation:sway2 11s ease-in-out infinite; width:26px; opacity:.4; }
.godray.g3{ right:12%; transform:rotate(15deg); animation:sway1 13s ease-in-out infinite reverse; width:20px; opacity:.35; }
@keyframes sway1{ 0%,100%{ transform:rotate(9deg) } 50%{ transform:rotate(13deg) } }
@keyframes sway2{ 0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(-1deg) } }

.pond-water{
  position:absolute; inset:40% 0 0 0; overflow:hidden;
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%),
    linear-gradient(180deg,var(--w1) 0%,var(--w2) 55%,var(--w3) 100%);
  transition:background .6s ease;
}
/* animated caustics — the signature Frutiger water shimmer */
.caustics{
  position:absolute; inset:-20%; opacity:.28; mix-blend-mode:screen; pointer-events:none;
  background:
    repeating-linear-gradient(58deg,  rgba(255,255,255,.55) 0 2px, rgba(255,255,255,0) 2px 26px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.45) 0 2px, rgba(255,255,255,0) 2px 32px);
  animation:caustic 14s linear infinite;
}
@keyframes caustic{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(-16px,10px,0) scale(1.06); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
/* surface shimmer band */
.pond-water::after{
  content:""; position:absolute; left:0; right:0; top:0; height:16px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 10px, rgba(255,255,255,0) 10px 30px);
  animation:surfaceflow 6s linear infinite; opacity:.7;
}
@keyframes surfaceflow{ to{ transform:translateX(-30px); } }

.ripple{
  position:absolute; left:50%; top:14%; width:60px; height:14px; margin-left:-30px;
  border:2px solid rgba(255,255,255,.42); border-radius:50%; opacity:0;
  animation:rippleout 4s ease-out infinite;
}
.ripple.r2{ animation-delay:1.3s; left:32%; top:36%; }
.ripple.r3{ animation-delay:2.6s; left:68%; top:54%; }
@keyframes rippleout{ 0%{ transform:scale(.3); opacity:.7 } 100%{ transform:scale(2.4); opacity:0 } }

/* drifting fish silhouettes */
.silhouette{
  position:absolute; width:34px; height:11px; border-radius:50% 20% 20% 50%;
  background:rgba(2,22,42,.34); pointer-events:none; opacity:.6;
}
.silhouette::after{
  content:""; position:absolute; right:-7px; top:1px; border:5px solid transparent;
  border-left-color:rgba(2,22,42,.34);
}
.silhouette.s1{ top:30%; animation:swim 17s linear infinite; }
.silhouette.s2{ top:56%; transform:scale(.7); animation:swim 23s linear infinite 4s; }
.silhouette.s3{ top:74%; transform:scale(1.3); animation:swim 29s linear infinite 9s; opacity:.4; }
@keyframes swim{ 0%{ left:-14% } 100%{ left:106% } }
[data-zone="abyss"] .silhouette{ background:rgba(120,220,255,.22); box-shadow:0 0 10px rgba(120,220,255,.35); }
[data-zone="abyss"] .silhouette::after{ border-left-color:rgba(120,220,255,.22); }

.pond-coral{ position:absolute; left:6px; bottom:0; width:112px; opacity:.85; pointer-events:none; }
.pond-bubbles{ position:absolute; right:12px; bottom:0; width:44px; opacity:.7; pointer-events:none; }
[data-zone="abyss"] .pond-coral{ filter:brightness(.45) hue-rotate(190deg); }

.depth-tag{
  position:absolute; left:10px; top:9px; z-index:3; font-size:.62rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.85;
  padding:3px 9px; border-radius:999px; background:rgba(2,30,55,.4);
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px);
}
[data-zone="shallows"] .depth-tag::after{ content:"the shallows · 0-8 ft"; }
[data-zone="reef"]     .depth-tag::after{ content:"the reef · 20-60 ft"; }
[data-zone="abyss"]    .depth-tag::after{ content:"the abyss · 3000 ft"; }

/* rig */
.rig{ position:absolute; left:50%; top:0; transform:translateX(-50%) translateY(-120%); transition:transform .55s cubic-bezier(.3,1.4,.5,1); pointer-events:none; z-index:2; }
.rig.out{ transform:translateX(-50%) translateY(0); }
.rig .line{ width:2px; height:clamp(80px,18vh,124px); margin:0 auto; background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.3)); }
.bobber{
  width:20px; height:20px; margin:-2px auto 0; border-radius:50%;
  background:linear-gradient(180deg,#fff 0 42%, #e2402f 42% 100%);
  border:1.5px solid rgba(0,40,70,.5); box-shadow:0 2px 6px rgba(0,30,60,.55), inset 0 1px 0 rgba(255,255,255,.9);
  animation:bobfloat 2.4s ease-in-out infinite;
}
@keyframes bobfloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.bobber.dip{ animation:bobdip .26s ease-in-out infinite; }
@keyframes bobdip{ 0%,100%{ transform:translateY(0) scale(1) } 50%{ transform:translateY(12px) scale(.88) } }

.fish-shadow{
  position:absolute; bottom:22%; left:-14%; width:70px; height:19px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,22,42,.6), rgba(0,22,42,0));
  opacity:0; transition:opacity .5s; z-index:1;
}
.fish-shadow.show{ opacity:1; animation:fishpass 3.2s linear infinite; }
@keyframes fishpass{ 0%{ left:-14% } 100%{ left:104% } }

.pond.splash .pond-water{ animation:splashflash .26s ease-in-out 3; }
@keyframes splashflash{ 50%{ filter:brightness(1.5) saturate(1.2); } }
.pond.caught{ box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 0 60px var(--glow), 0 8px 30px rgba(0,40,70,.4); }

/* sparkle burst on a landed fish */
.burst{ position:absolute; left:50%; top:52%; width:0; height:0; pointer-events:none; z-index:5; }
.burst span{
  position:absolute; width:7px; height:7px; border-radius:50%; left:0; top:0;
  background:radial-gradient(circle at 35% 35%, #fff, var(--glow) 60%, rgba(255,255,255,0));
  box-shadow:0 0 8px var(--glow);
  animation:burstout 1.15s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes burstout{
  0%  { transform:translate(0,0) scale(.4); opacity:1 }
  70% { opacity:.9 }
  100%{ transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0 }
}

/* status text */
.pond-status{
  position:absolute; left:0; right:0; bottom:12px; text-align:center; z-index:4;
  font-weight:800; font-size:clamp(.95rem,2.6vw,1.18rem); color:#fff; padding:0 12px;
  text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 16px rgba(0,60,110,.7);
}
.pond-status.alert{ color:#ffe98a; animation:statuspulse .5s ease-in-out infinite alternate; }
.pond-status.lose{ color:#ffc2b8; }
@keyframes statuspulse{ to{ transform:scale(1.06) } }
.pond-status.win{ color:var(--t-common); }
.pond-status.win.t-uncommon{ color:var(--t-uncommon); text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 18px var(--t-uncommon-glow); }
.pond-status.win.t-rare     { color:var(--t-rare);      text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 20px var(--t-rare-glow); }
.pond-status.win.t-epic     { color:var(--t-epic);      text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 22px var(--t-epic-glow); }
.pond-status.win.t-treasure { color:var(--t-treasure);  text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 22px var(--t-treasure-glow); }
.pond-status.win.t-legendary{ color:var(--t-legendary); text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 26px var(--t-legendary-glow); animation:statuspulse .6s ease-in-out infinite alternate; }
.pond-status.win.t-mythic   { color:var(--t-mythic);    text-shadow:0 2px 5px rgba(0,25,50,.9), 0 0 30px var(--t-mythic-glow); animation:mythicshift 1.6s linear infinite; }
@keyframes mythicshift{ 0%{ filter:hue-rotate(0) } 100%{ filter:hue-rotate(360deg) } }
.pond-status.win.t-junk{ color:var(--t-junk); }

/* ============ reeling — vertical water column ============ */
.reel-wrap{ margin-top:14px; }
.reel-label{ font-size:.78rem; color:var(--ink-soft); text-align:center; margin-bottom:9px; }
.reel-tip{ font-size:.74rem; color:var(--ink-soft); text-align:center; margin-top:8px; font-style:italic; min-height:1.1em; }
.reel-stage{ display:flex; gap:14px; justify-content:center; align-items:stretch; }

.reel-column{
  position:relative; width:74px; height:210px; border-radius:14px; overflow:hidden; flex:none;
  background:linear-gradient(180deg, var(--w1) 0%, var(--w2) 52%, var(--w3) 100%);
  border:2px solid rgba(255,255,255,.7);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7), inset 0 -14px 26px rgba(0,30,60,.5), 0 5px 14px rgba(0,40,70,.3);
}
.reel-column::after{ /* caustic shimmer inside the column */
  content:""; position:absolute; inset:-20%; opacity:.22; mix-blend-mode:screen; pointer-events:none;
  background:repeating-linear-gradient(58deg, rgba(255,255,255,.5) 0 2px, rgba(255,255,255,0) 2px 22px);
  animation:caustic 10s linear infinite;
}
.reel-depth{ position:absolute; inset:0; pointer-events:none; }
.reel-depth span{ position:absolute; left:0; right:0; height:1px; background:rgba(255,255,255,.18); }
.reel-depth span:nth-child(1){ top:25%; } .reel-depth span:nth-child(2){ top:50%; } .reel-depth span:nth-child(3){ top:75%; }

/* the net you steer */
.reel-bar{
  position:absolute; left:5px; right:5px; bottom:40%; height:24%; border-radius:9px; z-index:2;
  background:linear-gradient(180deg, rgba(233,255,240,.55), rgba(141,255,158,.3));
  border:1.5px solid rgba(190,255,205,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 10px rgba(141,255,158,.35);
  transition:background .1s, box-shadow .1s;
}
.reel-bar.hot{
  background:linear-gradient(180deg, rgba(180,255,200,.85), rgba(60,220,110,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 20px rgba(141,255,158,.9);
}
/* the fish, swimming its own way */
.reel-fish{
  position:absolute; left:50%; bottom:50%; width:34px; height:34px; margin:0 0 -17px -17px; z-index:3;
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(255,255,255,.95), rgba(180,235,255,.35) 55%, rgba(180,235,255,0) 72%);
  filter:drop-shadow(0 2px 5px rgba(0,20,40,.6));
  transition:filter .12s;
}
.rf-icon{ font-size:1.25rem; line-height:1; }
.reel-fish.caught{ filter:drop-shadow(0 0 9px var(--glow)) drop-shadow(0 2px 5px rgba(0,20,40,.6)); }

/* gauges */
.gauges{ display:flex; gap:10px; align-items:stretch; }
.gauge{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.g-label{ font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); order:2; }
.g-track{
  position:relative; width:15px; height:190px; border-radius:9px; overflow:hidden; order:1;
  background:rgba(4,30,50,.4); border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 2px 5px rgba(0,20,40,.5);
}
.g-fill{ position:absolute; left:0; right:0; bottom:0; height:0%; transition:height .08s linear; border-radius:9px 9px 0 0; }
.g-fill.prog{ background:linear-gradient(180deg,#b6ffc8,#3ecf72); box-shadow:0 0 10px rgba(141,255,158,.6); }
.g-fill.tens{ background:linear-gradient(180deg,#9fe7a4,#63c96f); }
.g-fill.tens.warn{ background:linear-gradient(180deg,#ffe484,#f0b429); }
.g-fill.tens.danger{ background:linear-gradient(180deg,#ff9d8e,#e8402c); animation:tenseblink .26s steps(2) infinite; }
.g-fill.stam{ background:linear-gradient(180deg,#cfe6f5,#8fb6cf); opacity:.85; }
@keyframes tenseblink{ 50%{ opacity:.45 } }

.reel-wrap[data-tier="epic"]      .reel-fish{ background:radial-gradient(circle at 36% 32%, #fff, var(--t-epic) 55%, rgba(199,155,255,0) 74%); }
.reel-wrap[data-tier="treasure"]  .reel-fish{ background:radial-gradient(circle at 36% 32%, #fff, var(--t-treasure) 55%, rgba(255,209,102,0) 74%); }
.reel-wrap[data-tier="legendary"] .reel-fish{ background:radial-gradient(circle at 36% 32%, #fff, var(--t-legendary) 55%, rgba(255,138,76,0) 74%); }
.reel-wrap[data-tier="mythic"]    .reel-fish{ background:radial-gradient(circle at 36% 32%, #fff, var(--t-mythic) 55%, rgba(255,122,224,0) 74%); animation:mythicshift 1.4s linear infinite; }

/* ============ controls + stats ============ */
.fish-controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.fish-hint{ font-size:.84rem; color:var(--ink-soft); font-style:italic; }
.fish-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.fstat{
  text-align:center; padding:10px 6px; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.fs-val{ display:block; font-size:1.18rem; font-weight:800; color:var(--aqua-deep); }
.fs-key{ display:block; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }

/* ============ live feed + leaderboard ============ */
.live-feed{ display:flex; flex-direction:column; gap:6px; max-height:290px; overflow-y:auto; padding-right:3px; }
.feed-empty{ font-size:.84rem; color:var(--ink-soft); text-align:center; padding:20px 8px; font-style:italic; }
.feed-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:5px 9px; align-items:center;
  padding:7px 11px; border-radius:10px; font-size:.82rem;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.55); border-left:3px solid var(--t-common);
}
.feed-row.new{ animation:feedin .7s ease-out; }
@keyframes feedin{ 0%{ transform:translateY(-8px); opacity:0; box-shadow:0 0 20px var(--glow) } 100%{ transform:none; opacity:1 } }
.feed-row.mine{ background:linear-gradient(180deg,rgba(180,240,255,.6),rgba(180,240,255,.2)); }
.fr-icon{ font-size:1.15rem; grid-row:span 2; }
.fr-main{ min-width:0; }
.fr-fish{ font-weight:700; }
.fr-w{ font-weight:800; color:var(--aqua-deep); white-space:nowrap; }
.fr-t{ grid-column:2/4; font-size:.66rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }
.feed-row.t-junk{ border-left-color:var(--t-junk); }
.feed-row.t-common{ border-left-color:var(--t-common); }
.feed-row.t-uncommon{ border-left-color:var(--t-uncommon); }
.feed-row.t-rare{ border-left-color:var(--t-rare); }
.feed-row.t-epic{ border-left-color:var(--t-epic); box-shadow:0 0 12px var(--t-epic-glow); }
.feed-row.t-treasure{ border-left-color:var(--t-treasure); box-shadow:0 0 12px var(--t-treasure-glow); }
.feed-row.t-legendary{ border-left-color:var(--t-legendary); box-shadow:0 0 14px var(--t-legendary-glow); }
.feed-row.t-mythic{ border-left-color:var(--t-mythic); box-shadow:0 0 16px var(--t-mythic-glow); }

.top-tabs{ display:flex; gap:5px; margin-bottom:10px; }
.top-tab{
  flex:1; cursor:pointer; font-family:var(--font); font-size:.74rem; font-weight:800;
  padding:6px 8px; border-radius:999px; color:var(--ink-soft);
  border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.12));
}
.top-tab.on{
  color:#fff; text-shadow:0 -1px 0 rgba(0,60,110,.5); border-color:rgba(255,255,255,.9);
  background:linear-gradient(180deg,#eafcff 0%,var(--aqua) 52%,var(--aqua-deep) 100%);
  box-shadow:0 2px 0 rgba(0,60,100,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
.top-list{ display:flex; flex-direction:column; gap:5px; }
.top-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  padding:7px 11px; border-radius:10px; font-size:.82rem;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.55);
}
.tr-rank{ font-size:.95rem; font-weight:800; min-width:22px; }
.tr-name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tr-fish{ grid-column:2; grid-row:2; font-size:.72rem; color:var(--ink-soft); }
.tr-val{ font-weight:800; color:var(--aqua-deep); white-space:nowrap; }
.top-row.t-epic{ box-shadow:0 0 10px var(--t-epic-glow); }
.top-row.t-legendary{ box-shadow:0 0 12px var(--t-legendary-glow); }
.top-row.t-mythic{ box-shadow:0 0 14px var(--t-mythic-glow); }

.global-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.global-stats > div{
  text-align:center; padding:9px 4px; border-radius:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.6);
}
.global-stats span{ display:block; font-weight:800; font-size:1.02rem; color:var(--aqua-deep); }
.global-stats small{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }

/* ============ tacklebox ============ */
.tacklebox{ display:grid; gap:16px; margin-top:12px; }
.tb-zone-head{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:5px;
}
.tb-zone-count{ color:var(--aqua-deep); }
.tb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:9px; }
.tb-item{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 7px; border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.65); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  border-top:3px solid var(--t-common); text-align:center;
}
.tb-item.locked{ opacity:.4; filter:grayscale(1); border-top-color:var(--t-junk); }
.tb-item.t-junk{ border-top-color:var(--t-junk); }
.tb-item.t-uncommon{ border-top-color:var(--t-uncommon); }
.tb-item.t-rare{ border-top-color:var(--t-rare); }
.tb-item.t-epic{ border-top-color:var(--t-epic); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 12px var(--t-epic-glow); }
.tb-item.t-treasure{ border-top-color:var(--t-treasure); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 12px var(--t-treasure-glow); }
.tb-item.t-legendary{ border-top-color:var(--t-legendary); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 14px var(--t-legendary-glow); }
.tb-item.t-mythic{ border-top-color:var(--t-mythic); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 16px var(--t-mythic-glow); }
.tb-icon{ font-size:1.6rem; line-height:1.1; }
.tb-name{ font-weight:700; font-size:.78rem; line-height:1.2; }
.tb-meta{ font-size:.64rem; color:var(--ink-soft); }
.tb-tier{ font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); opacity:.75; }
.tb-actions{ margin-top:14px; }
.aqua-btn.ghost{ --h:#eef7fb; --a:#b9d6e3; --b:#8fb3c4; text-shadow:none; color:var(--ink); }

@media (max-width:520px){
  .fish-stats{ grid-template-columns:repeat(2,1fr); }
  .tb-grid{ grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); }
  .angler-field{ min-width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .caustics,.ripple,.bobber,.sun,.godray,.silhouette,.pond-water::after,
  .fish-shadow.show,.pond-status.alert,.pond-status.win.t-mythic,.burst span{ animation:none !important; }
}

/* ============================================================
   THE MOVIES — watch party theater
   ============================================================ */
.theme-movies-page{ --curtain:#3a1220; --gold:#ffd166; --screen:#04101c; }
.theme-movies-page .bg-light{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%),
    radial-gradient(110% 70% at 50% 120%, rgba(90,20,50,.4), rgba(90,20,50,0) 60%),
    linear-gradient(180deg, rgba(120,190,225,.22), rgba(40,20,60,.3));
}
.movies-banner{ display:block; margin:0 auto .4em; max-width:250px; width:70%;
  border-radius:6px; box-shadow:0 4px 14px rgba(0,30,60,.4); }
.title-gif{ height:1.4em; vertical-align:-.32em; margin-left:.3em; }
.svr-floaty.mv-1{ left:2.5vw; bottom:6vh; width:120px; animation:svr-bob 5.4s ease-in-out infinite; }
.svr-floaty.mv-2{ right:3vw;  top:14vh;   width:104px; animation:svr-bob2 6.6s ease-in-out infinite; }
.svr-floaty.mv-3{ left:3vw;   top:22vh;   width:82px;  animation:svr-hover 5s ease-in-out infinite .3s; }

/* ---------- theater ---------- */
.theater{ padding:16px; margin-bottom:18px; }
.theater-top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.lobby-badge{ display:flex; align-items:center; gap:8px; }
.lb-label{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.lobby-code{
  font-family:ui-monospace,Consolas,monospace; font-size:1.15rem; font-weight:800; letter-spacing:.16em;
  color:#fff; padding:4px 12px; border-radius:9px; cursor:pointer;
  background:linear-gradient(180deg,#2a5f7d,#0b3550);
  border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.theater-now{ flex:1; min-width:150px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theater-actions{ display:flex; align-items:center; gap:9px; }
.sync-dot{ font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.sync-dot.ok{ color:var(--green-deep); } .sync-dot.warn{ color:#b9780a; } .sync-dot.bad{ color:#c8393b; }

.screen{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--screen); border:2px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 60px rgba(0,0,0,.75), 0 10px 30px rgba(0,20,45,.45);
}
.film{ width:100%; height:100%; display:block; background:#000; border:0; }
.screen-idle{ position:absolute; inset:0; display:grid; place-items:center; gap:6px; align-content:center; color:#cfe6f5; }
.screen-idle img{ max-width:190px; width:52%; opacity:.9; }
.screen-idle p{ margin:0; font-size:.88rem; opacity:.8; }
.screen-veil{
  position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; z-index:4;
  background:rgba(3,14,26,.72); color:#fff; font-weight:800; backdrop-filter:blur(3px);
}

.theater-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.seek-wrap{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:3px; }
.seek{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:5px; cursor:pointer;
  background:linear-gradient(180deg,rgba(4,30,50,.45),rgba(4,30,50,.28));
  border:1px solid rgba(255,255,255,.5);
}
.seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 34% 32%,#fff,var(--aqua) 48%,var(--aqua-deep));
  border:1.5px solid #fff; box-shadow:0 1px 4px rgba(0,40,80,.6);
}
.seek::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:1.5px solid #fff;
  background:var(--aqua); box-shadow:0 1px 4px rgba(0,40,80,.6);
}
.time-read{ font-family:ui-monospace,Consolas,monospace; font-size:.7rem; color:var(--ink-soft); text-align:center; }
.theater-note{ font-size:.76rem; color:var(--ink-soft); font-style:italic; margin:9px 0 0; text-align:center; }

.theater-cols{ display:grid; gap:14px; margin-top:16px; }
@media(min-width:760px){ .theater-cols{ grid-template-columns:1.6fr 1fr; } }
.mini-title{ font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 8px; }
.qcount{ color:var(--aqua-deep); }
.queue-list{ display:flex; flex-direction:column; gap:5px; max-height:190px; overflow-y:auto; }
.q-empty{ font-size:.82rem; color:var(--ink-soft); font-style:italic; padding:12px 4px; text-align:center; }
.q-item{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center;
  padding:6px 10px; border-radius:9px; font-size:.82rem;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.55);
}
.q-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.q-by{ font-size:.66rem; color:var(--ink-soft); }
.q-x{ border:0; background:transparent; cursor:pointer; font-size:1.05rem; color:var(--ink-soft); line-height:1; }
.q-x:hover{ color:#c8393b; }
.yt-add{ display:flex; gap:7px; margin-top:9px; }
.yt-add input{
  flex:1; min-width:0; font-family:var(--font); font-size:.85rem; padding:7px 11px; border-radius:999px;
  border:1px solid rgba(255,255,255,.7); color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));
  box-shadow:inset 0 2px 5px rgba(0,60,110,.13);
}
.crowd{ display:flex; flex-wrap:wrap; gap:6px; }
.viewer{
  font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.18));
  border:1px solid rgba(255,255,255,.65); color:var(--ink);
}
.viewer.me{ background:linear-gradient(180deg,#eafcff,var(--aqua)); color:#fff; text-shadow:0 -1px 0 rgba(0,60,110,.5); }
.viewer.host::before{ content:"\2605 "; color:var(--gold); }

/* ---------- lobby door ---------- */
.door-row{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:12px; }
.door-field label{ display:block; font-size:.64rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.door-field input{
  font-family:var(--font); font-size:.95rem; font-weight:700; color:var(--ink);
  padding:8px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.75); min-width:150px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  box-shadow:inset 0 2px 5px rgba(0,60,110,.14);
}
#joinCode{ text-transform:uppercase; letter-spacing:.18em; min-width:120px; font-family:ui-monospace,Consolas,monospace; }
.door-or{ font-size:.8rem; color:var(--ink-soft); font-style:italic; padding-bottom:9px; }
.door-err{ color:#c8393b; font-size:.84rem; font-weight:700; margin:9px 0 0; min-height:1.1em; }

/* ---------- now showing ---------- */
.marquee-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:12px; }
.reel-card{
  display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.65); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.reel-art{ position:relative; display:grid; place-items:center; height:112px; border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg,#123047,#06182a); border:1px solid rgba(255,255,255,.4); }
.reel-art img{ max-height:86px; opacity:.95; }
.reel-year{ position:absolute; right:7px; bottom:6px; font-size:.66rem; font-weight:800; color:var(--gold);
  background:rgba(0,0,0,.5); padding:2px 7px; border-radius:5px; }
.reel-card h3{ margin:0; font-size:1rem; }
.reel-blurb{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.4; }
.reel-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.68rem; color:var(--ink-soft); }
.pd-tag{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--green-deep); }
.reel-actions{ display:flex; gap:7px; margin-top:2px; }

/* ---------- jellyfin ---------- */
.jelly-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.jelly-gif{ width:96px; flex:none; }
.jelly-copy{ flex:1; min-width:220px; }
.jelly-list{ list-style:none; padding:0; margin:10px 0; display:grid; gap:6px; }
.jelly-list li{ font-size:.87rem; padding-left:20px; position:relative; }
.jelly-list li::before{ content:"\25B8"; position:absolute; left:4px; color:var(--aqua-deep); font-weight:800; }
.jelly-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }

@media (max-width:560px){
  .theater-bar{ gap:6px; }
  .door-field input{ min-width:120px; }
  .marquee-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* volume — local to each viewer, never synced to the room */
.vol-wrap{ display:flex; align-items:center; gap:6px; }
.vol-slider{
  -webkit-appearance:none; appearance:none; width:82px; height:6px; border-radius:4px; cursor:pointer;
  background:linear-gradient(180deg,rgba(4,30,50,.45),rgba(4,30,50,.28));
  border:1px solid rgba(255,255,255,.5);
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 34% 32%,#fff,var(--aqua) 48%,var(--aqua-deep));
  border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,40,80,.6);
}
.vol-slider::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:1.5px solid #fff;
  background:var(--aqua); box-shadow:0 1px 3px rgba(0,40,80,.6);
}
@media(max-width:560px){ .vol-slider{ width:60px; } }

/* The hidden attribute must always win — several components set an author-level
   `display` (grid/block), which otherwise overrides the UA stylesheet and leaves
   "hidden" elements (the buffering veil, idle screen, inactive player) painted. */
[hidden]{ display:none !important; }

/* ---------- fresh-season banner (server sub-pages) ---------- */
.fresh-banner{
  display:flex; align-items:center; gap:16px; padding:16px 20px; margin-bottom:18px;
  border:1px solid rgba(255,255,255,.7);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.14)),
    radial-gradient(120% 140% at 0% 0%, rgba(141,255,158,.30), rgba(141,255,158,0) 60%);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.9), 0 0 22px rgba(141,255,158,.22);
}
.fresh-gif{ width:82px; flex:none; filter:drop-shadow(0 5px 8px rgba(0,40,70,.35)); }
.fresh-copy{ min-width:0; }
.fresh-tag{
  display:inline-block; font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#0a4a1c; padding:3px 10px; border-radius:999px; margin-bottom:6px;
  background:linear-gradient(180deg,#d6ffdd,#8dff9e);
  border:1px solid rgba(255,255,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.fresh-copy h2{ margin:0 0 4px; font-size:1.06rem; line-height:1.25; color:var(--ink); }
.fresh-copy p{ margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-soft); }
@media(max-width:520px){
  .fresh-banner{ flex-direction:column; text-align:center; }
  .fresh-gif{ width:66px; }
}

/* "fresh world" flag on a server hub card */
.card-flag{
  display:inline-block; font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#0a4a1c; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:2px;
  background:linear-gradient(180deg,#d6ffdd,#8dff9e); border:1px solid rgba(255,255,255,.8);
}

/* ---------- variant tag on a server card (modded / vanilla) ---------- */
.card-tag{
  display:inline-block; font-size:.56rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--aqua-deep); padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  border:1px solid rgba(255,255,255,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.server-chips .chip small{
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aqua-deep); opacity:.85; margin-left:3px;
}
/* the actual server-list icon, shown so players recognise it */
.server-icon-preview{
  width:84px; height:84px; flex:none; border-radius:10px; object-fit:cover;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 5px 14px rgba(0,30,60,.4), inset 0 1px 0 rgba(255,255,255,.9);
  image-rendering:auto;
}
@media(max-width:520px){ .server-icon-preview{ width:66px; height:66px; } }