/* ============================================================
   WENDEE THE MERMAID — styles
   ============================================================ */
:root{
  --deep:    #0b3a5c;
  --mid:     #1673a0;
  --shallow: #7fd0e8;
  --sand:    #f0d9a8;
  --coralpk: #f2778f;
  --hud:     #eafaff;
  --hud-dim: #bfe9f5;
  --accent:  #ffd166;

  /* Wendee's look (driven by the Grotto) */
  --w-hair:      #2e1d29;
  --w-hair-hi:   #4d3345;
  --w-hair-line: #6e4a63;
  --w-tail1:     #2fbfa8;
  --w-tail2:     #66dfc8;
  --w-tail3:     #7fe8d4;
  --w-top:       #f28cb1;
  --w-top-hi:    #f8a8c4;
  --w-star:      #f2946b;
}

html,body{ margin:0; padding:0; }
*{ -webkit-tap-highlight-color: transparent; }   /* no blue flash on mobile tap */
body{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  min-height:100dvh;
  background:#062a44;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* full-bleed canvas : the world's viewBox adapts to the screen ratio (no distortion) */
.wnd-game{
  position:relative;
  width:100vw;  height:100vh;
  width:100dvw; height:100dvh;
  user-select:none; -webkit-user-select:none;
  /* a hold-to-swim is a long-press on the SVG scene — stop Android Chrome / iOS
     from popping their image "Download · Share · Print" callout menu over it */
  -webkit-touch-callout:none;
  touch-action:none;
  cursor:pointer;
  outline:none;
}
.wnd-game:focus-visible{ box-shadow:inset 0 0 0 3px var(--shallow); }
.wnd-game svg{ width:100%; height:100%; display:block; }

/* ---------- HUD ---------- */
.wnd-hud{
  position:absolute; top:16px; left:64px;
  display:flex; gap:24px;
  font-size:11px; letter-spacing:.22em;
  color:var(--hud-dim);
  pointer-events:none;
  text-shadow:0 1px 3px rgba(4,30,50,.75), 0 0 10px rgba(4,30,50,.4);
}
.wnd-hud b{
  display:block; margin-top:3px;
  font-size:17px; letter-spacing:.08em;
  color:var(--hud); font-weight:700;
}
/* start/dead screens : the 💎 pill is wide — keep the score clear of it */
.wnd-game:not(.playing) .wnd-hud{ left:170px; }

/* life gauge */
.wnd-life{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:min(230px, 30%);
  pointer-events:none;
  text-align:center;
}
.wnd-life .lbl{
  font-size:10px; letter-spacing:.3em; color:var(--hud-dim);
  margin-bottom:5px; text-shadow:0 1px 3px rgba(4,30,50,.75), 0 0 10px rgba(4,30,50,.4);
}
.wnd-life .bar{
  height:14px; border-radius:9px;
  background:rgba(6,32,52,.55);
  border:1.5px solid rgba(234,250,255,.55);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(3,20,35,.4);
}
.wnd-life .fill{
  height:100%; width:100%;
  border-radius:7px;
  background:linear-gradient(90deg,#ff5f7a,#ff9d6c,#ffd166);
  transition:width .25s ease, filter .25s ease;
}
.wnd-life.low .fill{ animation:wndPulse .7s ease-in-out infinite alternate; }
@keyframes wndPulse{ from{filter:brightness(.85)} to{filter:brightness(1.35)} }

/* power-up badges */
.wnd-fx{
  position:absolute; top:64px; right:18px;
  display:flex; flex-direction:column; gap:6px;
  align-items:flex-end;
  pointer-events:none;
}
.wnd-fx .badge{
  font-size:11px; letter-spacing:.14em;
  color:var(--hud);
  background:rgba(8,42,66,.72);
  border:1px solid rgba(234,250,255,.4);
  border-radius:20px;
  padding:5px 12px;
  backdrop-filter:blur(2px);
}

/* round control buttons, top right : ⏸ pause · 🔊 sfx · 🎵 music · ⛶ fullscreen
   pause & sfx only while playing; music & fullscreen always */
.wnd-mute{
  position:absolute; top:14px; right:108px;
  width:38px; height:38px;
  border:1px solid rgba(234,250,255,.5);
  border-radius:50%;
  background:rgba(8,42,66,.5);
  color:var(--hud);
  font-size:16px; line-height:1;
  cursor:pointer;
  display:none;
  transition:transform .2s ease, opacity .2s ease;
}
.wnd-mute:hover{ transform:scale(1.1); }
.wnd-game.playing .wnd-mute{ display:block; }
.wnd-mute.music{ right:62px; display:block; z-index:12; }
.wnd-pause{
  position:absolute; top:14px; right:154px;
  width:38px; height:38px;
  border:1px solid rgba(234,250,255,.5);
  border-radius:50%;
  background:rgba(8,42,66,.5);
  color:var(--hud);
  font-size:15px; line-height:1;
  cursor:pointer;
  display:none;
  transition:transform .2s ease;
}
.wnd-pause:hover{ transform:scale(1.1); }
.wnd-game.playing .wnd-pause{ display:block; }

/* fullscreen toggle : outermost slot, right of music. Always visible — start,
   pause, dead and during play — so a player who lands mid-run with the mobile
   address bar showing can always dismiss it, and always get back out. Hidden
   only where the Fullscreen API is unavailable (e.g. iOS Safari). */
.wnd-full{
  position:absolute; top:14px; right:16px; z-index:12;
  width:38px; height:38px;
  border:1px solid rgba(234,250,255,.5);
  border-radius:50%;
  background:rgba(8,42,66,.5);
  color:var(--hud);
  font-size:17px; line-height:1;
  cursor:pointer;
  display:block;
  transition:transform .2s ease, opacity .2s ease;
}
.wnd-full:hover{ transform:scale(1.1); }
.wnd-full.unsupported{ display:none !important; }

/* share button + fallback menu (bottom right) — start & dead screens */
.wnd-share{ display:none; }
.wnd-game:not(.playing) .wnd-share{ display:block; }
.wnd-share-btn{
  position:absolute; bottom:14px; right:16px; z-index:12;
  border:1px solid rgba(234,250,255,.5);
  border-radius:24px;
  padding:12px 20px;
  background:rgba(8,42,66,.6);
  color:var(--hud);
  font-family:inherit;
  font-size:12px; letter-spacing:.18em; line-height:1;
  cursor:pointer;
  transition:transform .2s ease;
}
.wnd-share-btn:hover{ transform:scale(1.12); }
.wnd-share-menu{
  position:absolute; bottom:66px; right:16px; z-index:12;
  display:flex; flex-direction:column; gap:6px;
  background:rgba(8,42,66,.94);
  border:1px solid rgba(234,250,255,.4);
  border-radius:12px;
  padding:10px;
  box-shadow:0 8px 24px rgba(3,20,35,.5);
}
.wnd-share-menu.hidden{ display:none; }
.wnd-share-menu a, .wnd-share-menu button{
  font-family:inherit;
  font-size:11px; letter-spacing:.15em;
  color:var(--hud); text-decoration:none;
  background:rgba(127,208,232,.12);
  border:none; border-radius:8px;
  padding:8px 14px;
  cursor:pointer; text-align:left;
}
.wnd-share-menu a:hover, .wnd-share-menu button:hover{ background:rgba(127,208,232,.3); }

/* premium / oceans button : top left in every state — full pill on menus, bare emoji in game */
.wnd-prem{
  position:absolute; top:14px; left:16px; z-index:12;
  border:1px solid rgba(255,209,102,.55);
  border-radius:24px;
  padding:11px 18px;
  background:rgba(8,42,66,.6);
  color:var(--accent);
  font-family:inherit;
  font-size:12px; letter-spacing:.15em; line-height:1;
  cursor:pointer;
  transition:transform .2s ease;
}
.wnd-prem:hover{ transform:scale(1.08); }
.wnd-prem .plabel{ margin-left:7px; }
.wnd-game.playing .wnd-prem{
  width:38px; height:38px; padding:0;
  border-radius:50%;
  font-size:16px;
}
.wnd-game.playing .wnd-prem .plabel{ display:none; }

/* profile button : bottom left, mirrors the share pill; hidden while playing */
.wnd-profile-btn{
  position:absolute; bottom:14px; left:16px; z-index:12;
  border:1px solid rgba(234,250,255,.5);
  border-radius:24px;
  padding:12px 20px;
  background:rgba(8,42,66,.6);
  color:var(--hud);
  font-family:inherit;
  font-size:12px; letter-spacing:.18em; line-height:1;
  cursor:pointer;
  transition:transform .2s ease;
  display:none;
}
.wnd-profile-btn:hover{ transform:scale(1.12); }
.wnd-game:not(.playing) .wnd-profile-btn{ display:block; }

/* ---------- profile modal ---------- */
.wnd-modal{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,24,40,.62);
  /* keep the card clear of notches & the home indicator (viewport-fit=cover) */
  padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
          max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  box-sizing:border-box;
}
.wnd-modal.hidden{ display:none; }
.wnd-modal-card{
  width:min(560px, 94%);
  max-height:92%;
  overflow-y:auto;
  /* the game container sets touch-action:none — re-allow finger scrolling here,
     or the pay button / activation input are unreachable on short phone screens */
  touch-action:pan-y;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:rgba(8,42,66,.97);
  border:1px solid rgba(127,208,232,.4);
  border-radius:16px;
  padding:16px 18px 14px;
  color:var(--hud);
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 14px 40px rgba(2,14,26,.6);
}
/* never flex-shrink inside the scrollable card : shrunken panels used to spill
   their content over the footer (pay button / activation input overlapping) */
.wnd-modal-card > *{ flex-shrink:0; }
.mhead{ display:flex; align-items:center; gap:10px; }
.mtitle{ flex:1; font-size:13px; letter-spacing:.22em; color:var(--hud); }
.langsel{
  font-family:inherit; font-size:11px; letter-spacing:.05em;
  color:var(--hud);
  background:rgba(127,208,232,.1);
  border:1px solid rgba(127,208,232,.3);
  border-radius:8px;
  padding:6px 8px;
  cursor:pointer;
}
.langsel option{ color:#16324a; background:#eafaff; }
.mclose{
  width:30px; height:30px;
  border:1px solid rgba(234,250,255,.4); border-radius:50%;
  background:transparent; color:var(--hud);
  font-size:13px; cursor:pointer;
}
.mtabs{ display:flex; gap:5px; }
.mtabs .tab{
  flex:1;
  font-family:inherit; font-size:9.5px; letter-spacing:.08em;
  color:var(--hud-dim);
  background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.25);
  border-radius:10px;
  padding:9px 4px;
  cursor:pointer;
}
.mtabs .tab.sel{ background:rgba(127,208,232,.28); color:var(--hud); border-color:rgba(127,208,232,.55); }
.mpanel{ display:none; min-height:190px; }
.mpanel.active{ display:block; }

/* grotto */
.preview{ text-align:center; margin-bottom:8px; }
.preview svg{ width:min(240px,70%); height:auto; }
.swrow{ display:flex; align-items:center; gap:12px; padding:7px 2px; }
.swlbl{ width:110px; font-size:10px; letter-spacing:.2em; color:var(--hud-dim); }
.sws{ display:flex; gap:9px; flex-wrap:wrap; }
.uname{
  font-family:inherit; font-size:12px; letter-spacing:.08em;
  color:var(--hud);
  background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.3);
  border-radius:9px;
  padding:8px 12px;
  width:min(180px, 50%);
  outline:none;
}
.uname:focus{ border-color:var(--accent); }
.uname::placeholder{ color:rgba(191,233,245,.5); }
.sw{
  position:relative;
  width:27px; height:27px; border-radius:50%;
  border:2px solid rgba(234,250,255,.35);
  cursor:pointer; padding:0;
}
.sw.sel{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,209,102,.35); }
.sw.lock{ opacity:.55; }
.sw.lock::after{
  content:'💎';
  position:absolute; right:-5px; top:-7px;
  font-size:11px;
}

.msave{
  display:block;
  margin:14px auto 4px;
  padding:10px 32px;
  font-size:11px;
}

/* local leaderboard */
.lblist{ list-style:none; margin:8px 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.lblist li{
  display:flex; align-items:baseline; gap:10px;
  font-size:12.5px; letter-spacing:.08em;
  background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.18);
  border-radius:10px;
  padding:9px 14px;
}
.lblist .rank{ color:var(--accent); width:18px; }
.lblist .sc{ font-weight:700; }
.lblist .woc{ font-size:13px; line-height:1; }
.lblist .meta{ margin-left:auto; font-size:10.5px; color:var(--hud-dim); }
.lblist li.new{ border-color:var(--accent); }
.lblist li.new .meta::after{ content:' ★'; color:var(--accent); }
.lbempty{ text-align:center; font-size:11.5px; letter-spacing:.15em; color:var(--hud-dim); padding:40px 0; }

/* world */
.wtitle{ font-size:11px; letter-spacing:.3em; color:var(--hud-dim); text-align:center; margin:6px 0 10px; }
.wmine{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.08em;
  background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.2);
  border-radius:10px;
  padding:9px 14px; margin-bottom:10px;
}
.wmine b{ color:var(--accent); }
.wfilterrow{ display:flex; justify-content:center; margin-bottom:10px; }
.wfilter{
  font:inherit; font-size:11.5px; letter-spacing:.08em;
  color:var(--accent); background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.28); border-radius:10px;
  padding:7px 30px 7px 14px; cursor:pointer; text-align:center;
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.wfilter option{ color:#0b3a5c; }
.whint{ font-size:11px; letter-spacing:.06em; color:var(--hud-dim); line-height:1.6; text-align:center; }
.wstatus{ text-align:center; font-size:11px; letter-spacing:.12em; color:var(--accent); margin-top:10px; min-height:16px; }

/* pass panel */
.ptitle{ font-size:14px; letter-spacing:.25em; text-align:center; margin:6px 0 10px; color:var(--accent); }
.plist{ list-style:none; margin:0; padding:0 8px; display:flex; flex-direction:column; gap:8px; font-size:12px; letter-spacing:.05em; line-height:1.5; }
.ponce{ text-align:center; font-size:10px; letter-spacing:.15em; color:var(--hud-dim); margin:12px 0 4px; }
#panelPass .wnd-btn{ display:block; margin:8px auto 0; }
.psoon{ text-align:center; font-size:11px; letter-spacing:.12em; color:var(--accent); margin-top:10px; }
.psoon.hidden{ display:none; }

/* transaction result modal (back from Stripe checkout) */
.wnd-tx{ z-index:60; }
.txcard{ max-width:420px; align-items:center; text-align:center; gap:10px; padding:24px 20px 18px; }
.txicon{ font-size:44px; line-height:1; }
.txtitle{ font-size:14px; letter-spacing:.24em; }
.txmsg{ margin:0; font-size:12px; line-height:1.7; }
.txkey{
  font-size:15px; letter-spacing:.12em; color:var(--accent);
  background:rgba(127,208,232,.12);
  border:1px dashed rgba(127,208,232,.45);
  border-radius:10px;
  padding:10px 14px;
  user-select:all; -webkit-user-select:all;
}
.txnote{ margin:0; font-size:10.5px; letter-spacing:.08em; opacity:.75; }
.txkey.hidden, .txnote.hidden{ display:none; }
.restore{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:14px; }
.restore .rinput{ width:min(240px, 58%); }
.rbtn{
  font-family:inherit; font-size:10.5px; letter-spacing:.15em;
  color:var(--hud);
  background:rgba(127,208,232,.12);
  border:1px solid rgba(127,208,232,.3);
  border-radius:9px;
  padding:10px 14px;
  cursor:pointer;
}
.rbtn:hover{ background:rgba(127,208,232,.3); }

/* oceans panel */
.oceanlist{ display:flex; flex-direction:column; gap:8px; padding:2px 6px; }
.ocean{
  display:flex; align-items:center; gap:12px;
  font-family:inherit; font-size:12.5px; letter-spacing:.08em; text-align:left;
  color:var(--hud);
  background:rgba(127,208,232,.08);
  border:1px solid rgba(127,208,232,.22);
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
}
.ocean .oic{ font-size:20px; }
.ocean .onm{ flex:1; }
.ocean.sel{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,209,102,.3); }
.ocean .ochk{ color:var(--accent); }
.ocean.lock{ opacity:.45; cursor:default; }
.premchip{
  font-size:13px;
  padding:2px 8px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(255,209,102,.25),rgba(245,184,61,.18));
  border:1px solid rgba(255,209,102,.5);
}
.soonchip{
  font-size:9px; letter-spacing:.2em;
  color:var(--hud-dim);
  border:1px solid rgba(191,233,245,.35);
  border-radius:8px;
  padding:3px 8px;
}

/* footer */
.mfoot{
  font-family:inherit;
  font-size:11px; letter-spacing:.18em;
  color:#2b1a38;
  background:linear-gradient(135deg,#ffd166,#f5b83d);
  border:none; border-radius:12px;
  padding:12px 10px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(245,184,61,.3);
}
.mfoot:hover{ filter:brightness(1.06); }

@media (max-height: 500px){
  .wnd-modal-card{ max-height:96%; gap:8px; padding:12px 14px 10px; }
  .mpanel{ min-height:120px; }
  .preview svg{ width:150px; }
}

/* ---------- overlays ---------- */
.wnd-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:13px;
  background:rgba(7,36,58,.66);
  backdrop-filter: blur(3px);
  text-align:center;
  transition:opacity .35s ease;
  padding:0 20px;
  /* taps fall through the dim backdrop to the creatures in the scene
     (species cards) — the message boxes & buttons below stay clickable */
  pointer-events:none;
}
.wnd-overlay > *{ pointer-events:auto; }
.wnd-overlay.hidden{ opacity:0; pointer-events:none; visibility:hidden; }
.wnd-overlay.hidden > *{ pointer-events:none; }

/* decorative layers drawn ABOVE the creatures must not swallow their taps —
   the abyss darkness rect covers the whole scene and was eating every click */
#darkOverlay, #foreG, #popLayer, #buddyDolphin, #buddySword, #buddyFxG{ pointer-events:none; }

/* creatures are tappable while paused / on the game-over screen :
   a pulsing golden outline-glow says "touch me" (no hover on mobile) */
.wnd-game.paused #itemsLayer g[data-key],
.wnd-game:not(.playing) #itemsLayer g[data-key]{
  cursor:pointer;
  /* strong on purpose : the overlay backdrop dims the scene by ~66% */
  filter:drop-shadow(0 0 5px rgba(255,230,150,1)) drop-shadow(0 0 18px rgba(255,209,102,.9)) brightness(1.15);
  animation:wndTappable 1.5s ease-in-out infinite alternate;
}
@keyframes wndTappable{
  from{ filter:drop-shadow(0 0 4px rgba(255,230,150,.8)) drop-shadow(0 0 12px rgba(255,209,102,.6)) brightness(1.08); }
  to{   filter:drop-shadow(0 0 7px rgba(255,230,150,1))  drop-shadow(0 0 26px rgba(255,209,102,1))  brightness(1.25); }
}
@media (hover: hover){
  .wnd-game.paused #itemsLayer g[data-key]:hover,
  .wnd-game:not(.playing) #itemsLayer g[data-key]:hover{
    animation:none;
    filter:brightness(1.3) drop-shadow(0 0 7px rgba(255,224,130,1)) drop-shadow(0 0 18px rgba(255,209,102,.6));
  }
}

/* "tap a creature" hint on the pause / game-over overlays */
.taphint{ color:var(--accent) !important; opacity:.9; }

/* species card */
.spcard{
  position:relative;
  max-width:340px;
  align-items:center; text-align:center;
  gap:6px;
  padding:20px 22px 16px;
}
.spclose{ position:absolute; top:10px; right:10px; }
/* .wnd-game svg{width:100%} would win on class specificity — scope like .preview svg */
.spcard svg.spart{ width:150px; height:104px; }
.sptitle{ font-size:14px; letter-spacing:.22em; color:var(--accent); }
.sprole{
  font-size:10px; letter-spacing:.18em;
  color:var(--hud);
  background:rgba(127,208,232,.12);
  border:1px solid rgba(127,208,232,.3);
  border-radius:16px;
  padding:5px 12px;
}
.spfact{
  margin-top:8px;
  font-size:12.5px; line-height:1.7; letter-spacing:.04em;
  color:var(--hud);
}
.spfact .fk{
  display:block;
  font-size:9.5px; letter-spacing:.35em;
  color:var(--shallow);
  margin-bottom:6px;
}
.wnd-overlay .kicker{ font-size:10px; letter-spacing:.4em; color:var(--shallow); }
.wnd-overlay h1, .wnd-overlay h2{
  margin:0;
  font-family:"Arial Rounded MT Bold","Trebuchet MS","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-size:clamp(30px, 6vw, 52px);
  letter-spacing:.05em;
  color:var(--hud);
  text-shadow:0 3px 14px rgba(3,20,35,.55);
}
.wnd-overlay h1 span, .wnd-overlay h2 span{ color:var(--accent); }
/* end screen : the death cause plays second fiddle to the fun fact below it */
#overTitle{ font-size:clamp(19px, 3.8vw, 30px); }
.wnd-overlay p{ margin:0; font-size:11px; letter-spacing:.2em; color:var(--hud-dim); line-height:1.9; }
.wnd-overlay .legend{
  font-size:12.5px; letter-spacing:.06em; line-height:2.05;
  color:var(--hud);
  background:rgba(8,42,66,.5);
  border:1px solid rgba(234,250,255,.25);
  border-radius:12px;
  padding:10px 22px;
  text-align:left;
}
/* glow-color key : same hues as the in-game halos (#glowFood & co.) */
.legend .gsw{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  margin-right:8px; vertical-align:-1px;
}
.legend .g-food { background:#7df58c; box-shadow:0 0 9px 2px rgba(125,245,140,.65); }
.legend .g-bad  { background:#ff5a4a; box-shadow:0 0 9px 2px rgba(255,90,74,.65); }
.legend .g-power{ background:#7fd8ff; box-shadow:0 0 9px 2px rgba(127,216,255,.65); }
.legend .g-gold { background:#ffd166; box-shadow:0 0 9px 2px rgba(255,209,102,.65); }
.wnd-overlay .score-line{ font-size:14px; letter-spacing:.18em; color:var(--hud); }
.wnd-fact{
  max-width:min(540px, 84%);
  background:rgba(8,42,66,.55);
  border:1px solid rgba(127,208,232,.35);
  border-radius:12px;
  padding:12px 20px;
  font-size:15.5px; line-height:1.7; letter-spacing:.04em;
  color:var(--hud);
  text-align:center;
}
.wnd-fact .fk{
  display:block;
  font-size:11.5px; letter-spacing:.35em;
  color:var(--shallow);
  margin-bottom:6px;
}
@media (max-height: 500px){
  .wnd-fact{ font-size:13px; line-height:1.5; padding:8px 14px; }
}
.wnd-btn{
  margin-top:6px;
  padding:13px 34px;
  border:none; border-radius:26px;
  background:linear-gradient(135deg,#ff8fa8,#f2778f);
  color:#fff;
  font-family:inherit;
  font-size:12px; letter-spacing:.28em;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(242,119,143,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wnd-btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 26px rgba(242,119,143,.55); }
/* end-screen "submit score" — secondary (ocean-blue) so SWIM AGAIN stays the primary */
.wnd-submit{
  margin-top:10px; padding:9px 24px; font-size:10.5px; letter-spacing:.22em;
  background:linear-gradient(135deg,#7fd0e8,#3aa5c9);
  box-shadow:0 5px 14px rgba(58,165,201,.4);
}
.wnd-submit:hover{ box-shadow:0 8px 20px rgba(58,165,201,.55); }
.wnd-submit:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.oversubmit-status{ min-height:15px; margin-top:6px; font-size:11px; letter-spacing:.1em; color:var(--shallow); }

.wnd-hint{
  position:absolute; bottom:12px; left:0; right:0;
  text-align:center;
  font-size:9px; letter-spacing:.3em;
  color:#d5eef8;
  pointer-events:none;
  text-shadow:0 1px 4px rgba(4,30,50,.8);
}

/* paper grain : static bitmap tile, zero per-frame cost */
.wnd-grain{
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode:multiply; opacity:.55;
  background-size:160px 160px;
}
/* backdrop blurs are costly on mobile GPUs */
@media (hover: none) and (pointer: coarse){
  .wnd-overlay{ backdrop-filter:none; }
  .wnd-fx .badge{ backdrop-filter:none; }
  /* text inputs under 16px make iOS Safari force-zoom the page on focus,
     which wrecks the fixed fullscreen layout — keep them at 16px on touch */
  .uname{ font-size:16px; letter-spacing:.02em; }
}

/* damage vignette (radial gradient + opacity only : GPU-cheap) */
.wnd-hurt{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,70,90,0) 52%, rgba(255,70,90,.6) 100%);
  opacity:0; transition:opacity .5s ease;
  will-change:opacity;
}
.wnd-hurt.on{ opacity:1; transition:opacity .05s ease; }

.wnd-game:fullscreen{ width:100vw; height:100vh; }
@media (max-height: 500px){
  .wnd-hud{ gap:14px; top:10px; left:58px; }
  .wnd-life{ top:12px; }
  .wnd-hint{ display:none; }
  .wnd-pause{ top:10px; right:150px; }
  .wnd-mute{ top:10px; right:104px; }
  .wnd-mute.music{ right:58px; }
  .wnd-full{ top:10px; right:12px; }
  .wnd-prem{ top:10px; left:12px; }
}

/* ---------- mobile : ask for landscape in portrait ---------- */
.wnd-rotate{
  display:none;
  position:fixed; inset:0; z-index:50;
  background:#062a44;
  color:var(--hud);
  flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center;
  font-size:13px; letter-spacing:.25em; line-height:2;
}
.wnd-rotate .phone{
  font-size:64px;
  animation:wndRotate 1.6s ease-in-out infinite;
}
@keyframes wndRotate{
  0%,20%{ transform:rotate(0deg); }
  60%,100%{ transform:rotate(90deg); }
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait){
  .wnd-rotate{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .wnd-btn, .wnd-mute, .wnd-pause{ transition:none; }
  .wnd-life.low .fill{ animation:none; }
  .wnd-rotate .phone{ animation:none; }
  .wnd-game.paused #itemsLayer g[data-key],
  .wnd-game:not(.playing) #itemsLayer g[data-key]{ animation:none; }  /* static glow stays */
}