/* ============================================================
   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;
}

.wnd-game{
  position:relative;
  width:min(960px, 96vw);
  aspect-ratio: 3 / 2;
  max-height:94vh;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  cursor:pointer;
  outline:none;
}
.wnd-game:focus-visible{ box-shadow:0 0 0 3px var(--shallow); border-radius:14px; }
.wnd-game svg{ width:100%; height:100%; display:block; border-radius:14px; }

/* ---------- HUD ---------- */
.wnd-hud{
  position:absolute; top:16px; left:66px;
  display:flex; gap:24px;
  font-size:11px; letter-spacing:.22em;
  color:var(--hud-dim);
  pointer-events:none;
  text-shadow:0 1px 4px rgba(4,30,50,.6);
}
.wnd-hud b{
  display:block; margin-top:3px;
  font-size:17px; letter-spacing:.08em;
  color:var(--hud); font-weight:700;
}

/* 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 4px rgba(4,30,50,.6);
}
.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 : SFX, music, pause */
.wnd-mute{
  position:absolute; top:14px; right:16px;
  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;
  transition:transform .2s ease, opacity .2s ease;
}
.wnd-mute:hover{ transform:scale(1.1); }
.wnd-mute.music{ right:62px; }
.wnd-pause{
  position:absolute; top:14px; left:16px;
  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; }

/* share button + fallback menu (bottom right) — dead screen only */
.wnd-share{ display:none; }
.wnd-share.show{ 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); }

/* 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);
  border-radius:14px;
}
.wnd-modal.hidden{ display:none; }
.wnd-modal-card{
  width:min(560px, 94%);
  max-height:92%;
  overflow-y:auto;
  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);
}
.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:6px; }
.mtabs .tab{
  flex:1;
  font-family:inherit; font-size:10.5px; letter-spacing:.12em;
  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 .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 */
.worldbox{ text-align:center; padding:44px 0; }
.wtitle{ font-size:12px; letter-spacing:.3em; color:var(--hud-dim); margin-bottom:12px; }
.wsoon{ font-size:15px; letter-spacing:.2em; color:var(--hud); }

/* 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; }
.restore{ display:flex; gap:8px; justify-content:center; align-items:center; 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); }

/* 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);
  border-radius:14px;
  text-align:center;
  transition:opacity .35s ease;
  padding:0 20px;
}
.wnd-overlay.hidden{ opacity:0; pointer-events:none; visibility:hidden; }
.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); }
.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;
}
.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:12.5px; line-height:1.75; letter-spacing:.04em;
  color:var(--hud);
  text-align:center;
}
.wnd-fact .fk{
  display:block;
  font-size:9.5px; letter-spacing:.35em;
  color:var(--shallow);
  margin-bottom:6px;
}
@media (max-height: 500px){
  .wnd-fact{ font-size:11px; 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); }

.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; border-radius:14px;
  pointer-events:none;
  mix-blend-mode:multiply; opacity:.55;
  background-size:160px 160px;
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape){
  .wnd-grain{ border-radius:0; }
}
/* backdrop blurs are costly on mobile GPUs */
@media (hover: none) and (pointer: coarse){
  .wnd-overlay{ backdrop-filter:none; }
  .wnd-fx .badge{ backdrop-filter:none; }
}

/* damage vignette (radial gradient + opacity only : GPU-cheap) */
.wnd-hurt{
  position:absolute; inset:0; border-radius:14px;
  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; }

/* ---------- mobile : fill the screen in landscape ---------- */
@media (hover: none) and (pointer: coarse) and (orientation: landscape){
  .wnd-game{
    width:100dvw; height:100dvh;
    max-height:none; aspect-ratio:auto;
  }
  .wnd-game svg{ border-radius:0; }
  .wnd-overlay{ border-radius:0; }
  .wnd-hurt{ border-radius:0; }
}
.wnd-game:fullscreen{
  width:100vw; height:100vh;
  max-height:none; aspect-ratio:auto;
}
.wnd-game:fullscreen svg{ border-radius:0; }
@media (max-height: 500px){
  .wnd-hud{ gap:14px; top:10px; left:60px; }
  .wnd-life{ top:12px; }
  .wnd-hint{ display:none; }
  .wnd-pause{ 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; }
}