/* source: css/style.css */
/* ==========================================================================
   深海奇遇 · 鲸鱼娘大冒险  —  设计系统
   视觉方向：深海墨蓝为底，珍珠白与鲸蓝色为光，珊瑚橙 / 星辉金 / 幻境紫做点缀。
   ========================================================================== */

/* ---------- 变量 ---------- */
:root{
  --ink-950:#02080f;
  --ink-900:#04101f;
  --ink-850:#061627;
  --ink-800:#081d31;
  --ink-700:#0b2740;
  --ink-600:#123654;

  --pearl:#eaf6ff;
  --pearl-dim:rgba(234,246,255,.68);
  --pearl-faint:rgba(234,246,255,.38);

  --teal:#6ee7ff;
  --teal-deep:#2fbfe0;
  --brand:#4d6bfe;
  --brand-soft:#8fa4ff;
  --gold:#ffd76e;
  --coral:#ff8f7a;
  --rose:#ff6b8a;
  --violet:#b388ff;

  --line:rgba(122,214,255,.16);
  --line-strong:rgba(122,214,255,.34);

  --r-xl:30px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:10px;

  --font-display:"Yuanti SC","YouYuan","Hiragino Sans GB","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --font-num:"DIN Alternate","Avenir Next Condensed","Helvetica Neue",monospace;

  --shadow-panel:
    0 40px 90px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(122,214,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.9,.28,1);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% -10%, #0a2f4d 0%, #051427 45%, #01050c 100%);
  color:var(--pearl);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
button{font:inherit;color:inherit;}
h1,h2,h3,p,ul{margin:0;}

/* ---------- 舞台 ---------- */
#app{position:fixed;inset:0;overflow:hidden;}
#stage{
  position:fixed;
  left:50%; top:50%;
  width:960px; height:540px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  border-radius:26px;
  overflow:clip;
  background:#02080f;
  box-shadow:
    0 0 0 1px rgba(122,214,255,.14),
    0 50px 120px -40px rgba(0,0,0,.95),
    0 0 140px -20px rgba(77,107,254,.35);
  opacity:0;
  animation:stage-in 900ms var(--ease-out) 80ms forwards;
}
@keyframes stage-in{ to{opacity:1;} }

#game{
  display:block;
  width:960px; height:540px;
  background:#04101f;
}

/* ---------- 画面滤镜 ---------- */
.stage-fx{position:absolute;inset:0;pointer-events:none;z-index:2;}
.fx-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(1,6,14,.55) 100%);
  mix-blend-mode:multiply;
}
.fx-grain{
  position:absolute;inset:-20%;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.7'/></svg>");
  animation:grain-shift 7s steps(6) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)} 40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,2%)} 80%{transform:translate(2%,-1%)} 100%{transform:translate(0,0)}
}

/* ---------- 界面容器 ---------- */
#ui{position:absolute;inset:0;z-index:3;pointer-events:none;}
#ui button,
#ui .btn,
#ui input,
#ui .switch{pointer-events:auto;}

.is-hidden{display:none !important;}

/* ==========================================================================
   HUD
   ========================================================================== */
.hud{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease-out);}
.hud.is-on{opacity:1;}

.hud__left{
  position:absolute;left:22px;top:18px;display:flex;flex-direction:column;gap:10px;
}
.hud__center{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;width:280px;
}
.hud__right{
  position:absolute;right:20px;top:16px;display:flex;align-items:center;gap:10px;
}

/* 生命 */
.hearts{display:flex;gap:7px;height:26px;}
.heart{width:26px;height:26px;display:block;transition:transform .25s var(--ease-bounce),opacity .25s;}
.heart svg{width:100%;height:100%;overflow:visible;}
.heart path{fill:url(#heartGrad);stroke:rgba(255,255,255,.55);stroke-width:1.1;transition:fill .3s;}
.heart.is-empty{transform:scale(.88);opacity:.9;}
.heart.is-empty path{fill:rgba(234,246,255,.07);stroke:rgba(200,240,255,.5);stroke-width:1.6;}
.heart.is-empty svg{filter:drop-shadow(0 0 6px rgba(120,220,255,.35));}
.heart.is-hit{animation:heart-hit .45s var(--ease-out);}
@keyframes heart-hit{
  0%{transform:scale(1.5) rotate(-8deg);filter:brightness(2)}
  60%{transform:scale(.86) rotate(4deg)}
  100%{transform:scale(.82)}
}

/* 珍珠计数 */
.pearl-counter{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px 5px 9px;border-radius:999px;
  background:linear-gradient(180deg, rgba(10,36,60,.92), rgba(6,22,39,.92));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px -10px #000;
  width:max-content;
  font-family:var(--font-num);
  font-size:16px;letter-spacing:.04em;
}
.pearl-counter__icon{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff, #bfe9ff 38%, #7fd0f2 62%, #3b9ed4 100%);
  box-shadow:0 0 10px rgba(110,231,255,.85), inset 0 -2px 3px rgba(0,60,100,.5);
}
.pearl-counter__num{color:#fff;font-weight:700;min-width:1.6ch;text-align:right;}
.pearl-counter__sep{color:var(--pearl-faint);}
.pearl-counter__total{color:var(--pearl-dim);font-size:13px;}

/* 关卡名 + 进度 */
.level-chip{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.16em;
  color:rgba(234,246,255,.78);
  padding:5px 16px;border-radius:999px;
  background:rgba(4,16,31,.55);
  border:1px solid rgba(122,214,255,.14);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.progress{
  position:relative;width:100%;height:6px;border-radius:999px;
  background:rgba(4,16,31,.62);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);
  border:1px solid rgba(122,214,255,.10);
}
.progress__fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#2f7fe0,#6ee7ff 60%,#c8f7ff);
  box-shadow:0 0 12px rgba(110,231,255,.8);
  transition:width .18s linear;
}
.progress__tail{
  position:absolute;top:50%;left:0%;width:16px;height:16px;
  transform:translate(-50%,-50%) scaleX(-1);
  background:radial-gradient(circle at 40% 40%, #ffffff, #9fe9ff 55%, #4d9bfe);
  clip-path:polygon(0 50%,62% 8%,100% 50%,62% 92%);
  filter:drop-shadow(0 0 6px rgba(110,231,255,.9));
  transition:left .18s linear;
}

/* 图标按钮 */
.icon-btn{
  width:42px;height:42px;padding:0;border-radius:14px;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(180deg, rgba(14,44,72,.92), rgba(6,22,39,.92));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 20px -12px #000;
  transition:transform .18s var(--ease-bounce), border-color .2s, box-shadow .2s;
}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:var(--pearl);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.icon-btn svg rect,.icon-btn svg path[fill]{fill:var(--pearl);stroke:none;}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 10px 24px -12px #000,0 0 18px -4px rgba(110,231,255,.5);}
.icon-btn:active{transform:scale(.94);}
.icon-btn.is-off{opacity:.45;}
.icon-btn.is-off .wave{display:none;}

/* 碎片槽 */
.frag-track{display:flex;gap:6px;margin-right:6px;}
.frag{
  width:16px;height:18px;opacity:.28;transition:opacity .4s, transform .4s var(--ease-bounce), filter .4s;
  clip-path:polygon(50% 0,100% 34%,76% 100%,24% 100%,0 34%);
  background:linear-gradient(180deg,#fff5cf,#ffd76e 45%,#ff9f43);
}
.frag.is-on{opacity:1;filter:drop-shadow(0 0 8px rgba(255,215,110,.95)) drop-shadow(0 0 18px rgba(255,159,67,.6));}
.frag.is-pop{animation:frag-pop .7s var(--ease-bounce);}
@keyframes frag-pop{
  0%{transform:scale(2.4) rotate(-18deg);filter:brightness(3)}
  100%{transform:scale(1) rotate(0);}
}

/* 鲸鱼娘 dock */
.whale-dock{
  position:absolute;right:18px;bottom:14px;
  width:118px;height:118px;pointer-events:none;
}
.whale-face{
  width:118px;height:118px;display:block;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.6));
  transition:transform .3s var(--ease-bounce);
}
.whale-dock.is-happy .whale-face{transform:scale(1.06);}
.whale-dock.is-hurt .whale-face{animation:shake .4s;}

/* 气泡对话 */
.bubble{
  position:absolute;right:80px;bottom:76px;
  width:max-content;max-width:234px;
  padding:11px 16px;
  border-radius:18px 18px 6px 18px;
  background:linear-gradient(165deg, rgba(14,48,78,.96), rgba(6,24,42,.96));
  border:1px solid rgba(122,214,255,.30);
  box-shadow:0 18px 40px -18px #000, 0 0 26px -10px rgba(110,231,255,.5), inset 0 1px 0 rgba(255,255,255,.10);
  transform-origin:100% 100%;
  animation:bubble-in .3s var(--ease-bounce) both;
}
.bubble[hidden]{display:none;}
.bubble__text{
  font-size:13.5px;line-height:1.55;color:var(--pearl);
  letter-spacing:.02em;white-space:pre-line;
}
@keyframes bubble-in{
  from{opacity:0;transform:translateY(8px) scale(.84);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.bubble--gold{border-color:rgba(255,215,110,.65);box-shadow:0 0 30px -6px rgba(255,215,110,.7), 0 18px 40px -18px #000;}

/* 横幅（镜像反转等） */
.banner{
  position:absolute;left:50%;top:96px;transform:translateX(-50%);
  padding:9px 26px;border-radius:999px;
  font-family:var(--font-display);font-size:15px;letter-spacing:.18em;
  color:#1a0d2e;
  background:linear-gradient(180deg,#f0dcff,#c9a5ff 60%,#a273ff);
  box-shadow:0 0 30px -4px rgba(179,136,255,.85), inset 0 1px 0 rgba(255,255,255,.7);
  animation:banner-in .45s var(--ease-bounce) both;
  white-space:nowrap;
}
.banner[hidden]{display:none;}
@keyframes banner-in{
  from{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.9);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}

/* ==========================================================================
   通用屏幕
   ========================================================================== */
.screen{
  position:absolute;inset:0;
  opacity:0;
  animation:screen-in .5s var(--ease-out) forwards;
}
@keyframes screen-in{ to{opacity:1;} }

/* ---------- 标题页 ---------- */
.screen--title{
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:30px 42px 26px;
  background:
    linear-gradient(100deg, rgba(2,8,15,.92) 0%, rgba(3,14,26,.72) 38%, rgba(3,14,26,.06) 66%, transparent 100%);
}
.title-top{display:flex;justify-content:space-between;align-items:center;}
.title-top__settings{opacity:.75;transition:opacity .2s, transform .18s var(--ease-bounce);}
.title-top__settings:hover{opacity:1;}
.title-top__settings svg{width:19px;height:19px;stroke-width:1.7;}
.brand-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(234,246,255,.62);
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(122,214,255,.22);
  background:rgba(4,16,31,.5);
}
.brand-chip__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 10px var(--teal);
  animation:blink-dot 2.4s ease-in-out infinite;
}
@keyframes blink-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

.title-main{align-self:center;max-width:560px;}
.title-kicker{
  font-family:var(--font-num);
  font-size:12px;letter-spacing:.55em;
  color:rgba(110,231,255,.72);
  margin-bottom:14px;
  animation:rise-in .8s var(--ease-out) .15s both;
}
.title-logo{display:flex;flex-direction:column;gap:6px;}
.title-logo__main{
  position:relative;
  font-family:var(--font-display);
  font-size:84px;line-height:1;font-weight:700;
  letter-spacing:.06em;
  background:linear-gradient(178deg,#ffffff 6%,#d7f4ff 38%,#6ee7ff 72%,#4d9bfe 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(77,155,254,.55));
  animation:rise-in .9s var(--ease-out) .22s both;
}
.title-logo__main::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(200,247,255,.28);
  z-index:-1;
}
.title-logo__sub{
  font-family:var(--font-display);
  font-style:normal;
  font-size:25px;letter-spacing:.42em;font-weight:400;
  color:rgba(234,246,255,.82);
  padding-left:5px;
  animation:rise-in .9s var(--ease-out) .32s both;
}
@keyframes rise-in{
  from{opacity:0;transform:translateY(22px);filter:blur(6px);}
  to{opacity:1;transform:translateY(0);filter:blur(0);}
}
.title-desc{
  margin:20px 0 26px;
  font-size:14px;line-height:1.85;
  color:rgba(234,246,255,.58);
  letter-spacing:.05em;
  animation:rise-in .9s var(--ease-out) .42s both;
}
.title-menu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:rise-in .9s var(--ease-out) .52s both;}

.title-foot{
  display:flex;align-items:center;gap:22px;
  font-size:12px;color:rgba(234,246,255,.42);
  animation:rise-in .9s var(--ease-out) .62s both;
}
.title-foot__note{margin-left:auto;letter-spacing:.1em;color:rgba(234,246,255,.28);}
.key-hint{display:inline-flex;align-items:center;gap:5px;}
kbd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  font-family:var(--font-num);font-size:11px;font-weight:700;
  color:rgba(234,246,255,.8);
  background:linear-gradient(180deg,rgba(24,58,90,.9),rgba(10,32,54,.9));
  border:1px solid rgba(122,214,255,.24);
  border-bottom-width:2px;
  border-radius:6px;
}

/* ---------- 按钮 ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;
  font-family:var(--font-display);
  font-size:17px;font-weight:700;letter-spacing:.06em;
  padding:13px 30px;border-radius:999px;
  color:#03121f;
  background:linear-gradient(180deg,#b6f6ff 0%,#6ee7ff 42%,#3f9bfb 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -3px 0 rgba(6,40,74,.35),
    0 14px 30px -12px rgba(77,155,254,.85),
    0 0 0 1px rgba(150,240,255,.35);
  transition:transform .18s var(--ease-bounce), box-shadow .22s, filter .22s;
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:1px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 46%);
  opacity:.7;pointer-events:none;
}
.btn:hover{transform:translateY(-3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(6,40,74,.35),0 20px 40px -14px rgba(77,155,254,.95),0 0 0 1px rgba(180,250,255,.6),0 0 34px -6px rgba(110,231,255,.75);}
.btn:active{transform:translateY(0) scale(.955);filter:brightness(.96);}
.btn:focus-visible{outline:2px solid rgba(200,247,255,.9);outline-offset:4px;}
.btn__arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-bounce);}
.btn:hover .btn__arrow{transform:translateX(4px);}
.btn--lg{font-size:19px;padding:16px 36px;}

.btn--ghost{
  color:var(--pearl);
  background:linear-gradient(180deg,rgba(20,52,82,.72),rgba(8,26,45,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(122,214,255,.22);
  backdrop-filter:blur(6px);
}
.btn--ghost::after{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 50%);}
.btn--ghost:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(122,214,255,.5),0 16px 34px -16px #000,0 0 30px -8px rgba(110,231,255,.45);
}
.btn--danger{color:#ffd7d2;}
.btn--danger:hover{box-shadow:0 0 0 1px rgba(255,143,122,.6),0 0 26px -6px rgba(255,107,138,.6);}
.btn--round{
  width:44px;height:44px;padding:0;border-radius:14px;
  color:var(--pearl);
  background:linear-gradient(180deg,rgba(20,52,82,.85),rgba(8,26,45,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 1px rgba(122,214,255,.22);
}
.btn--round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- 通用面板 ---------- */
.screen--overlay{
  display:grid;place-items:center;
  background:rgba(2,8,15,.62);
  backdrop-filter:blur(10px) saturate(.9);
  animation:screen-in .32s var(--ease-out) forwards;
  pointer-events:auto;
}
.panel{
  position:relative;
  width:min(560px,86%);
  padding:34px 38px 30px;
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(36,86,132,.55), transparent 62%),
    linear-gradient(180deg, rgba(9,29,48,.97), rgba(4,14,26,.98));
  border:1px solid rgba(122,214,255,.20);
  box-shadow:var(--shadow-panel);
  animation:panel-in .48s var(--ease-bounce) both;
  text-align:center;
}
@keyframes panel-in{
  from{opacity:0;transform:translateY(26px) scale(.94);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* 结局页保留主角可见 */
.screen--overlay.screen--win{
  background:rgba(2,8,15,.34);
  backdrop-filter:blur(2px) saturate(1.05);
}
.panel__head{margin-bottom:22px;}
.panel__head h2{font-family:var(--font-display);font-size:30px;letter-spacing:.18em;font-weight:700;}
.panel__head p{margin-top:8px;font-size:13px;color:var(--pearl-faint);letter-spacing:.14em;}
.panel__eyebrow{
  font-family:var(--font-num);font-size:11px;letter-spacing:.5em;
  color:rgba(110,231,255,.8);margin-bottom:12px;
}
.panel__eyebrow--danger{color:rgba(255,143,122,.9);}
.panel__title{font-family:var(--font-display);font-size:26px;letter-spacing:.1em;}
.panel__note{margin-top:16px;font-size:13.5px;line-height:1.8;color:var(--pearl-dim);}
.panel__actions{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:11px;justify-content:center;
}

.menu-col{display:flex;flex-direction:column;gap:11px;align-items:stretch;}
.menu-col .btn{width:100%;}

/* 暂停页鲸鱼娘 */
.panel--pause{padding-bottom:24px;}
.pause-whale{
  position:absolute;right:-62px;bottom:-16px;
  width:104px;height:104px;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
  transition:transform .25s var(--ease-bounce);
}
.pause-whale:hover{transform:translateY(-4px) rotate(-3deg);}
.pause-whale:active{transform:scale(.94);}
.pause-whale canvas{width:100%;height:100%;}

/* ---------- 星级 ---------- */
.stars{display:flex;justify-content:center;gap:14px;margin:18px 0 6px;}
.star{
  width:38px;height:38px;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:rgba(234,246,255,.10);
  transition:background .3s, filter .3s;
}
.star.is-on{
  background:linear-gradient(180deg,#fff6d0,#ffd76e 45%,#ff9f43);
  filter:drop-shadow(0 0 12px rgba(255,215,110,.9));
  animation:star-pop .6s var(--ease-bounce) both;
}
@keyframes star-pop{
  0%{transform:scale(0) rotate(-60deg);}
  70%{transform:scale(1.25) rotate(8deg);}
  100%{transform:scale(1) rotate(0);}
}

/* ---------- 统计 ---------- */
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-top:22px;
}
.stat{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 6px;border-radius:var(--r-md);
  background:rgba(4,16,31,.6);
  border:1px solid rgba(122,214,255,.10);
}
.stat__k{font-size:11px;letter-spacing:.18em;color:var(--pearl-faint);}
.stat__v{font-family:var(--font-num);font-size:19px;color:#fff;letter-spacing:.03em;}

/* ---------- 选择海域 ---------- */
.screen--select{
  display:flex;flex-direction:column;
  padding:26px 34px 22px;
  background:linear-gradient(180deg,rgba(2,8,15,.72),rgba(2,8,15,.86));
}
.select-foot{
  margin-top:16px;text-align:center;
  font-size:11.5px;letter-spacing:.16em;color:rgba(234,246,255,.34);
}
.sub-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.sub-head__text h2{font-family:var(--font-display);font-size:26px;letter-spacing:.2em;}
.sub-head__text p{margin-top:5px;font-size:12px;color:var(--pearl-faint);letter-spacing:.1em;}
.frag-meter{margin-left:auto;display:flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:rgba(4,16,31,.6);border:1px solid rgba(122,214,255,.14);
  font-size:12px;letter-spacing:.14em;color:var(--pearl-dim);}
.frag-meter .frag{width:13px;height:15px;}

.level-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  flex:1;align-content:center;align-items:center;
}
.level-card{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(10,32,52,.95),rgba(4,14,26,.98));
  border:1px solid rgba(122,214,255,.18);
  box-shadow:0 24px 50px -30px #000;
  cursor:pointer;
  transition:transform .28s var(--ease-bounce), border-color .25s, box-shadow .3s;
  text-align:left;
  padding:0;
  animation:card-in .6s var(--ease-out) both;
}
.level-card:nth-child(1){animation-delay:.05s;}
.level-card:nth-child(2){animation-delay:.13s;}
.level-card:nth-child(3){animation-delay:.21s;}
@keyframes card-in{from{opacity:0;transform:translateY(20px) scale(.96);}to{opacity:1;transform:none;}}
.level-card:hover{transform:translateY(-6px);border-color:rgba(122,214,255,.5);box-shadow:0 30px 60px -28px #000,0 0 44px -14px rgba(110,231,255,.5);}
.level-card__preview{display:block;width:100%;height:140px;}
.level-card__body{padding:14px 16px 16px;}
.level-card__idx{
  font-family:var(--font-num);font-size:11px;letter-spacing:.4em;
  color:rgba(110,231,255,.75);
}
.level-card__name{
  margin-top:6px;
  font-family:var(--font-display);font-size:19px;letter-spacing:.08em;color:#fff;
}
.level-card__desc{margin-top:6px;font-size:12px;line-height:1.6;color:var(--pearl-faint);}
.level-card__foot{
  margin-top:12px;display:flex;align-items:center;gap:8px;
  padding-top:11px;border-top:1px solid rgba(122,214,255,.10);
}
.level-card__stars{display:flex;gap:4px;}
.level-card__stars .star{width:14px;height:14px;}
.level-card__lock{
  margin-left:auto;font-size:11px;letter-spacing:.16em;color:rgba(234,246,255,.4);
}
.level-card.is-locked{cursor:not-allowed;filter:saturate(.25) brightness(.62);}
.level-card.is-locked:hover{transform:none;border-color:rgba(122,214,255,.18);box-shadow:0 24px 50px -30px #000;}
.level-card__badge{
  position:absolute;top:12px;left:12px;
  padding:4px 11px;border-radius:999px;
  font-size:10.5px;letter-spacing:.18em;
  background:rgba(4,16,31,.78);
  border:1px solid rgba(122,214,255,.3);
  color:rgba(200,247,255,.9);
}
.level-card__badge--new{background:linear-gradient(180deg,#ffe9a8,#ffc65c);color:#3a2400;border-color:transparent;}

/* ---------- 设置 ---------- */
.setting{
  display:grid;grid-template-columns:1fr 200px 44px;
  align-items:center;gap:16px;
  padding:14px 4px;
  border-bottom:1px solid rgba(122,214,255,.08);
  text-align:left;
}
.setting:last-of-type{border-bottom:0;}
.setting label{font-size:14px;color:var(--pearl-dim);letter-spacing:.06em;}
.setting--action{grid-template-columns:1fr auto;gap:14px;}
.setting__hint{margin-top:4px;font-size:11px;color:var(--pearl-faint);}
.setting__guide{min-height:36px;padding:7px 13px;font-size:12px;}
.setting output{font-family:var(--font-num);font-size:14px;color:#fff;text-align:right;}
.setting input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,#3f9bfb,#6ee7ff);
  outline:none;cursor:pointer;
}
.setting input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#bfe9ff 55%,#4d9bfe);
  box-shadow:0 0 12px rgba(110,231,255,.9);cursor:pointer;
}
.setting input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#bfe9ff 55%,#4d9bfe);
  box-shadow:0 0 12px rgba(110,231,255,.9);
}
.switch{
  justify-self:end;width:52px;height:28px;border-radius:999px;border:1px solid rgba(122,214,255,.24);
  background:rgba(4,16,31,.8);cursor:pointer;padding:0;position:relative;
  transition:background .25s, border-color .25s;
}
.switch i{
  position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(234,246,255,.6);
  transition:transform .25s var(--ease-bounce), background .25s;
}
.switch[aria-checked=true]{background:linear-gradient(90deg,#3f9bfb,#6ee7ff);border-color:transparent;}
.switch[aria-checked=true] i{transform:translateX(24px);background:#fff;}

/* ---------- 玩法说明 ---------- */
.howto-list{
  list-style:none;padding:0;margin:0 0 18px;
  display:grid;gap:10px;
}
.howto-list li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--pearl-dim);
  padding:10px 14px;border-radius:var(--r-md);
  background:rgba(4,16,31,.55);
  border:1px solid rgba(122,214,255,.08);
  text-align:left;
}
.howto-list li>div{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.howto-list li span{margin-left:auto;color:rgba(234,246,255,.5);font-size:12.5px;}
.howto-section{margin-top:17px;text-align:left;}
.howto-section h3{display:flex;align-items:center;gap:8px;margin:0 0 9px;color:#f7fbff;font-size:13px;letter-spacing:.04em;}
.howto-section h3 span{display:inline-grid;place-items:center;width:25px;height:20px;border:1px solid #8ce7ff99;border-radius:7px;color:var(--teal);font-size:10px;letter-spacing:.08em;}
.howto-goals,.howto-boss{display:grid;gap:7px;}
.howto-goals p,.howto-boss p{margin:0;color:var(--pearl-dim);font-size:12.5px;line-height:1.65;}
.howto-goals b,.howto-boss b{color:var(--teal);font-weight:700;margin-right:5px;}
.howto-boss{padding:10px 12px;border:1px solid #ffc96a66;border-radius:10px;background:linear-gradient(100deg,#4c304455,#102d5444);}

/* ---------- 触屏控制 ---------- */
#touch{position:absolute;inset:0;z-index:4;pointer-events:none;display:none;}
#touch.is-on{display:block;}
.touch-pad,.touch-actions{position:absolute;bottom:20px;display:flex;gap:14px;pointer-events:none;}
.touch-pad{left:22px;}
.touch-actions{right:24px;}
.tbtn{
  pointer-events:auto;
  width:64px;height:64px;border-radius:50%;
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--pearl);
  background:linear-gradient(180deg,rgba(20,52,82,.62),rgba(8,26,45,.62));
  border:1px solid rgba(122,214,255,.3);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -12px #000, inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .12s, background .15s;
  touch-action:none;
}
.tbtn:active{transform:scale(.92);background:rgba(110,231,255,.35);}
.tbtn--jump{width:78px;height:78px;font-size:15px;letter-spacing:.1em;
  background:linear-gradient(180deg,rgba(110,231,255,.45),rgba(77,107,254,.45));}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  .title-logo__main{font-size:64px;}
  .title-logo__sub{font-size:20px;letter-spacing:.3em;}
  .level-grid{gap:12px;}
  .level-card__preview{height:100px;}
}
@media (pointer:coarse){
  .title-foot__note{display:none;}
}
/* 菜单页轻提示 */
.toast{
  position:absolute;left:50%;bottom:70px;transform:translateX(-50%);
  padding:10px 24px;border-radius:999px;
  background:linear-gradient(165deg,rgba(14,48,78,.96),rgba(6,24,42,.96));
  border:1px solid rgba(122,214,255,.32);
  box-shadow:0 18px 40px -18px #000,0 0 26px -10px rgba(110,231,255,.5);
  font-size:13.5px;letter-spacing:.05em;color:var(--pearl);
  pointer-events:none;z-index:6;white-space:nowrap;
  animation:toast-in .3s var(--ease-bounce) both;
}
.toast[hidden]{display:none;}
@keyframes toast-in{
  from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.9);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .fx-grain{display:none;}
}
body.reduce-motion .fx-grain{display:none;}
body.reduce-motion *{animation-duration:.01ms !important;transition-duration:.08s !important;}

/* The HTML hidden attribute must win over component display declarations. */
[hidden]{display:none!important;}

/* source: css/illustrated.css */
/* Pearl, shell-gold and sapphire: illustrated ocean presentation. */
:root {
  --line: rgba(169,219,255,.36);
  --line-strong: rgba(201,234,255,.72);
  --font-display: "STKaiti", "KaiTi", "Yuanti SC", "PingFang SC", serif;
  --pearl-faint: rgba(222,240,255,.66);
}
body { background: radial-gradient(ellipse at 50% 10%,#154b77,#06162f 65%,#020815); }
#stage { border-radius: 14px; box-shadow: 0 0 0 1px #8ac6ed50,0 25px 100px #0009; }
.fx-grain { opacity: .022; }
.fx-vignette { background: radial-gradient(ellipse at center,transparent 50%,#020d2b55); }
.screen--title {
  padding: 22px 40px 21px;
  background: linear-gradient(90deg,rgba(3,18,49,.86),rgba(4,24,61,.55) 33%,rgba(4,24,61,.05) 60%,transparent);
}
.title-top { align-self: start; }
.brand-chip {
  border: 0; border-radius: 0; background: none; padding: 5px 0;
  font-size: 10px; letter-spacing: .2em; color: #d4efff;
  text-shadow: 0 1px 7px #001632;
}
.brand-chip__dot { width: 5px; height: 5px; background: #ffe3a2; box-shadow: 0 0 9px #ffdf9f; }
.title-top__settings { border-radius: 50%; opacity: 1; }
.title-main { align-self: center; max-width: 365px; padding-bottom: 4px; }
.title-kicker { font-size: 9px; letter-spacing: .29em; color: #bde3ff; margin-bottom: 12px; }
.title-logo { gap: 5px; width: 300px; text-align: center; }
.title-logo__main {
  font-size: 82px; letter-spacing: .12em; line-height: 1.08;
  background: linear-gradient(170deg,#fff 25%,#e7f7ff 60%,#9ecbff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 1px #175ab0) drop-shadow(0 0 17px #538fffaa);
}
.title-logo__sub { font-size: 26px; letter-spacing: .25em; padding-left: 0; color: #f0f7ff; text-shadow: 0 2px 7px #00265c; }
.title-desc { margin: 15px 0 20px; font-size: 12px; line-height: 1.85; letter-spacing: .06em; color: #dbedff; text-shadow: 0 1px 5px #001734; }
.title-menu { flex-direction: column; align-items: stretch; width: 292px; gap: 11px; }
.title-menu .btn { justify-content: flex-start; min-height: 48px; padding: 9px 22px; font-size: 20px; letter-spacing: .14em; }
.title-menu .btn--primary { min-height: 57px; font-size: 23px; }
.title-menu .btn > span:not(.menu-symbol):not(.menu-chevron) { flex: 1; text-align: center; }
.menu-symbol { width: 30px; height: 30px; flex: 0 0 30px; font-size: 29px; line-height: 30px; text-align: center; color: #e1e8ff; }
svg.menu-symbol { fill: #c7dfff44; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary .menu-symbol { color: #9c6b45; fill: #ffe3c6; }
.menu-chevron { flex: 0 0 18px; font-family: sans-serif; font-size: 28px; line-height: 20px; color: #b6dfff; }
.title-foot { gap: 15px; color: #d4e6f7; font-size: 10px; text-shadow: 0 1px 4px #00142c; }
.title-foot__note { color: #e2f0ff; font-size: 10px; letter-spacing: .12em; }
.btn--primary {
  color: #192b50; border: 1px solid #fff3c3;
  background: linear-gradient(180deg,#fff9dc 0%,#ffedb6 44%,#f6cf7e 100%);
  box-shadow: inset 0 0 0 3px #fff8dc80,inset 0 -3px 0 #d6a45666,0 0 0 2px #ceac6999,0 5px 20px #efcb6d4d;
  text-shadow: 0 1px #fff9d0;
}
.btn--primary:hover { box-shadow: inset 0 0 0 3px #fff9dcbb,0 0 0 2px #f9dca3,0 0 30px #ffde8f88; filter: brightness(1.05); }
.btn--ghost,.btn--round,.icon-btn {
  color: #f2f7ff;
  background: linear-gradient(175deg,#5188c15c,#0a285dce 60%,#173c77d9);
  border: 1px solid #addbff9e;
  box-shadow: inset 0 1px 2px #e0f2ff77,inset 0 0 14px #7cbbff33,0 3px 14px #00163866;
}
.btn--ghost:hover,.btn--round:hover,.icon-btn:hover { border-color: #e1f5ff; background-color: #407bb477; }
.btn--danger { color: #ffcabf; }
.btn:focus-visible,.level-card:focus-visible,.icon-btn:focus-visible,.switch:focus-visible,.tbtn:focus-visible { outline: 3px solid #ffe6a3; outline-offset: 4px; }
.screen--overlay { background: rgba(2,14,41,.48); backdrop-filter: blur(7px) saturate(1.1); }
.panel {
  border: 1px solid #c9eaffb8;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 0,#6199d14d,transparent 65%),linear-gradient(155deg,#153c69f5,#092448f5 70%,#153562f5);
  box-shadow: inset 0 0 0 4px #7cc4ff12,inset 0 0 35px #77baff1a,0 0 0 5px #adddff13,0 24px 80px #0008;
}
.panel::before {
  content: '✧'; display: block; position: absolute; left: 50%; top: -17px; transform: translateX(-50%);
  width: 56px; height: 30px; line-height: 30px; font-size: 26px; color: #ffe6ae;
  background: #183f6a; border: 1px solid #b9e0ff; border-radius: 50%;
}
.panel__head h2,.panel__title { text-shadow: 0 2px 8px #388bcc70; }
.panel__note { color: #d0e5fa; }
.panel__eyebrow { color: #d7edff; }
.panel__eyebrow--danger { color: #ffb7ab; }
.stat { background: #0a214b88; border-color: #a5d4ff33; border-radius: 12px; }
.stat__k { color: #b2cce5; }
.setting { border-color: #a2d4ff24; }
.setting label { color: #e0edfc; }
.screen--select { padding: 28px 40px 24px; background: linear-gradient(180deg,#02143699,#08295580 40%,#02102cdd); }
.sub-head { margin-bottom: 15px; }
.sub-head__text h2 { font-size: 30px; color: #f0f8ff; text-shadow: 0 2px 12px #a3d6ff55; }
.sub-head__text p { color: #c9def1; }
.level-grid { gap: 22px; align-items: center; }
.level-card {
  border: 1px solid #b6dfffaa; border-radius: 24px 24px 18px 18px;
  background: linear-gradient(160deg,#235082ee,#0b244fee);
  box-shadow: inset 0 0 0 4px #aedaff12,0 14px 28px #00102788;
}
.level-card__preview { height: 160px; border-bottom: 1px solid #add9ff77; object-fit: cover; }
.level-card__body { padding: 17px 18px; }
.level-card__idx { font-size: 9px; letter-spacing: .24em; color: #b6d9fa; }
.level-card__name { font-size: 24px; color: #eef8ff; margin-top: 5px; }
.level-card__desc { color: #c7d9ed; font-size: 11px; min-height: 35px; }
.level-card__foot { border-color: #b5dbff3b; margin-top: 10px; }
.level-card__stars .star { width: 20px; height: 20px; }
.level-card__lock { color: #d0e0f1; font-size: 10px; letter-spacing: .05em; }
.level-card.is-locked { filter: saturate(.6) brightness(.83); }
.level-card__badge { background: #0a285bd9; border-color: #c0e0ff99; padding: 5px 11px; font-size: 9px; }
.level-card__badge--new { background: linear-gradient(#fff3ce,#f4ca76); color: #513715; }
.level-card:nth-child(2) { --line-strong: #ddbaff; }
.level-card:nth-child(3) { --line-strong: #82b7ff; }
.level-card:hover { border-color: #fff0b9; box-shadow: 0 0 0 3px #e7dca71c,0 18px 38px #00152b99,0 0 24px #c2e8ff44; }
.frag-meter { border-color: #b8ddff66; color: #d9eaff; background: #082452bb; }
.select-foot { color: #c5ddf3; margin-top: 18px; }
.hud__left { left: 20px; top: 18px; gap: 9px; padding: 10px 15px; border: 1px solid #c6e9ff77; border-radius: 20px; background: linear-gradient(135deg,#153c6ec9,#071d47b3); box-shadow: inset 0 1px 1px #d2ecff66,0 4px 16px #00113055; }
.hearts { gap: 6px; }
.heart { filter: drop-shadow(0 1px 4px #e66ba177); }
.pearl-counter { padding: 2px 0; border: 0; background: none; box-shadow: none; }
.pearl-counter__icon { width: 19px; height: 19px; background: radial-gradient(circle at 30% 23%,#fff 4%,#ffdef4 23%,#b6d9ff 50%,#9e8be7 75%,#6dc4f4); border: 1px solid #d9f5ff; }
.level-chip { color: #f2f7ff; border-color: #c1e7ff99; background: linear-gradient(#234f80dd,#102b53dd); font-size: 15px; text-shadow: 0 1px 4px #00132c; }
.progress { height: 7px; border-color: #c2e7ff88; background: #071d47cc; }
.progress__fill { background: linear-gradient(90deg,#428cfb,#83e9fa,#e7ffff); }
.bubble { border-color: #c2e5ffb3; background: linear-gradient(160deg,#255582f2,#102d57f5); box-shadow: inset 0 1px #fff3,0 8px 25px #00122b88; }
.bubble__text { color: #f1f7ff; }
.bubble--gold { border-color: #ffe3a3; }
.banner { border: 1px solid #eee2ff; color: #2e2154; box-shadow: 0 0 0 3px #bdb1ff33,0 5px 24px #30156666; }
.tbtn { border: 2px solid #bcdeffbd; background: radial-gradient(circle at 35% 25%,#a1d6ff66,#173773a3 65%); box-shadow: inset 0 1px 10px #cee6ff70,0 5px 20px #00143e99; }
.tbtn--jump { background: radial-gradient(circle at 35% 25%,#ddf6ff88,#2457acb3 70%); }
@media (max-width:820px) {
  .title-logo__main { font-size: 82px; }
  .title-logo__sub { font-size: 26px; }
  .level-grid { gap: 22px; }
  .level-card__preview { height: 160px; }
}
@media (prefers-reduced-motion:reduce) { .btn:hover,.level-card:hover { transform: none; } }
body.reduce-motion .btn:hover,body.reduce-motion .level-card:hover { transform: none; }
/* Keep empty fragment slots legible against bright water. */
.frag-track { padding: 8px 10px; margin-right: 0; border: 1px solid #b8ddff88; border-radius: 14px; background: #0a2458ba; box-shadow: inset 0 1px #e6f6ff33; }
.frag:not(.is-on) { opacity: .7; background: linear-gradient(#c3d7ec,#698db5); }
@media (pointer:coarse) {
  .title-menu { gap: 8px; }
  .title-menu .btn { min-height: 60px; }
  .title-menu .btn--primary { min-height: 64px; }
  .title-desc { margin: 12px 0 15px; }
  .title-foot .key-hint { display: none; }
  .title-foot__note { display: block; margin-left: 0; }
}

/* source: css/reference-world.css */
/* Whole-game reference art direction, v2. Coordinates use the 960×540 stage. */
:root{--font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
#stage{border-radius:4px;}
.asset-loader{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 30%,#164d86,#061b46 65%,#030e27);color:#e0f4ff;font-size:13px;letter-spacing:.12em;}
.asset-loader strong{font-size:24px;letter-spacing:.24em;font-weight:500;}
.loading-shell{font-size:64px;color:#ccedff;animation:loading-pulse 1.5s ease-in-out infinite;text-shadow:0 0 30px #62b9ff;}
@keyframes loading-pulse{50%{opacity:.4;transform:scale(.85) rotate(30deg);}}
.reference-title .screen--title{display:block;padding:0;background:none;animation:none;opacity:1;}
.reference-title .title-main{padding:0;max-width:none;}
.reference-title .title-kicker,.reference-title .title-logo,.reference-title .title-desc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.reference-title .title-menu{position:absolute;left:62px;top:190px;width:218px;height:250px;display:block;animation:none;}
.reference-title .title-menu .btn{position:absolute;left:0;top:60px;width:218px;min-height:0;height:42px;padding:0;border:0;border-radius:28px;background:transparent;box-shadow:none;color:transparent;text-shadow:none;letter-spacing:0;transform:none;filter:none;transition:box-shadow .2s,background .2s;}
.reference-title .title-menu .btn::after{display:none;}
.reference-title .title-menu .btn span{opacity:0;}
.reference-title .title-menu #btnStart{left:-7px;top:0;width:230px;height:49px;}
.reference-title .title-menu #btnSelect{top:110px;}
.reference-title .title-menu #btnCollection{top:160px;}
.reference-title .title-menu #btnSettingsTitle{top:210px;}
.reference-title .title-menu .btn:hover{background:#b4e8ff1a;box-shadow:inset 0 0 0 2px #dcf7ffaa,0 0 23px #a4d9ff99;}
.reference-title .title-menu #btnStart:hover{background:#fff6d526;box-shadow:inset 0 0 0 2px #fff9e8cc,0 0 24px #ffe6a599;}
.reference-title .title-menu .btn:active{background:#a6d9ff33;}
.reference-title .title-menu .btn.is-unavailable{background:#06163e66;}
.title-help{position:absolute;right:20px;bottom:16px;border:1px solid #d6efffb3;border-radius:24px;background:#123a6bd9;color:#eff8ff;padding:8px 14px;font-size:15px;cursor:pointer;pointer-events:auto;box-shadow:inset 0 1px #fff5,0 0 14px #66b7ff55;}
.title-help span{font-size:11px;margin-left:7px;letter-spacing:.08em;}
.title-help:hover{background:#29609ed9;}
.title-help:focus-visible{outline:3px solid #ffe8a8;outline-offset:3px;}
/* A map of three illustrated worlds, rather than dashboard cards. */
.screen--select{padding:22px 28px;background:linear-gradient(180deg,#02123145,#05224c66 55%,#031c41d9);}
.screen--select .sub-head{position:relative;z-index:2;margin:0;}
.sub-head__text h2{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:.08em;}
.sub-head__text p{font-size:11px;letter-spacing:.07em;}
.select-guide{position:absolute;left:-40px;bottom:0;width:320px;height:460px;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 0 13px #7ebeff77);}
.guide-caption{position:absolute;left:28px;bottom:34px;z-index:1;transform:rotate(-7deg);font-size:16px;font-weight:600;line-height:1.8;color:white;text-shadow:0 2px 5px #0a3060,0 0 10px #75aaff;}
.map-route{position:absolute;left:245px;top:178px;width:680px;height:100px;overflow:visible;pointer-events:none;}
.map-route path{stroke:#c8eeff;stroke-width:2.5;stroke-dasharray:4 8;fill:none;filter:drop-shadow(0 0 4px #68caff);}
.level-grid{position:absolute;left:243px;right:24px;top:80px;height:260px;gap:10px;align-content:start;align-items:start;}
.level-card,.level-card.is-locked{position:relative;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;filter:none;padding:0;animation:map-in .6s ease-out both;}
@keyframes map-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.level-card:nth-child(2){margin-top:10px;}
.level-card:hover,.level-card.is-locked:hover{background:none;box-shadow:none;border:0;transform:translateY(-4px);}
.level-card__preview{position:relative;width:100%;height:168px;border:0;object-fit:contain;mask-image:radial-gradient(ellipse 49% 49% at center,#000 86%,transparent 100%);filter:drop-shadow(0 0 8px #96dbff77);}
.level-card.is-selected .level-card__preview{filter:brightness(1.13) drop-shadow(0 0 14px #bce8ff);}
.level-card.is-locked .level-card__preview{filter:saturate(.55) brightness(.72);}
.level-card__body{padding:0;text-align:center;}
.level-card__idx{position:absolute;left:0;top:155px;z-index:2;width:32px;height:32px;line-height:32px;border-radius:50%;background:linear-gradient(#6dcbff,#1944ad);border:2px solid #e0f9ff;color:white;font-size:0;letter-spacing:0;box-shadow:0 0 12px #72baff;}
.level-card__idx::after{content:'1';font-size:20px;font-weight:700;}
.level-card:nth-child(2) .level-card__idx::after{content:'2';}
.level-card:nth-child(3) .level-card__idx::after{content:'3';}
.level-card__name{position:relative;margin:0 0 0 13px;padding:6px 5px;border-radius:22px 10px;background:linear-gradient(180deg,#edfaff,#92caffdd);border:1px solid #e1f8ff;color:#102d65;font-size:19px;font-weight:800;letter-spacing:.04em;text-shadow:0 1px #fff8;box-shadow:0 0 10px #85c9ff77;}
.level-card__desc{display:none;}
.level-card__foot{justify-content:center;gap:8px;padding:0;margin-top:9px;border:0;flex-wrap:wrap;}
.level-card__stars{gap:7px;}
.level-card__stars .star{width:23px;height:23px;}
.level-card__lock{flex-basis:100%;margin:0;font-size:10px;color:#d9eaff;}
.level-card__badge{top:112px;left:auto;right:10px;z-index:3;padding:4px 8px;border:1px solid #c5e7ff;border-radius:10px;background:#0c285bd9;font-size:10px;letter-spacing:.05em;}
.level-card__badge--new{color:#1a3670;background:#e4f6ff;}
.selection-detail{position:absolute;left:244px;right:25px;bottom:35px;height:148px;display:grid;grid-template-columns:205px 1fr;gap:15px;padding:13px 17px 13px 13px;border-radius:25px 15px 30px 15px;border:2px solid #dff7ff;background:linear-gradient(120deg,#d2f4fff2,#85c7f1ed);box-shadow:0 0 0 4px #c9efff1f,0 0 24px #7ac4ff55;color:#163369;}
#selectionPreview{width:205px;height:118px;border:1px solid #f2fbff;border-radius:16px;object-fit:cover;}
.selection-kicker{font-size:9px;font-weight:700;letter-spacing:.14em;color:#3e6da2;}
.selection-copy h3{font-size:23px;font-weight:800;margin:3px 0 5px;}
.selection-copy>p:not(.selection-kicker){font-size:11px;line-height:1.65;max-width:370px;color:#294c7d;}
#selectionStats{font-size:10px;color:#2c5991;margin-top:6px;}
#btnEnterLevel{position:absolute;right:15px;bottom:12px;font-size:16px;padding:9px 20px;min-width:155px;}
#btnEnterLevel:disabled{filter:grayscale(.85);opacity:.7;cursor:not-allowed;transform:none;}
.select-foot{position:absolute;left:244px;right:25px;bottom:13px;margin:0;color:#d3eaff;font-size:9px;letter-spacing:.07em;}
/* Live HUD matches the reference: portrait and hearts left, counters right. */
.hud__left{left:15px;top:14px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;width:235px;height:90px;display:block;}
.hud-portrait{position:absolute;left:0;top:0;width:76px;height:76px;filter:drop-shadow(0 0 5px #72baffaa);}
.hearts{position:absolute;left:88px;top:35px;height:27px;gap:5px;}
.heart{width:27px;height:27px;}
.hud__center{left:104px;top:19px;transform:none;width:350px;align-items:flex-start;gap:6px;}
.level-chip{border:0;border-radius:0;padding:0 0 6px;background:none;font-size:20px;font-weight:800;color:#fff;text-shadow:0 2px 2px #184679,0 0 6px #448dff;letter-spacing:.04em;backdrop-filter:none;border-bottom:1px solid #c9efffa3;}
.progress{width:175px;height:4px;position:absolute;top:57px;left:0;opacity:.85;}
.progress__tail{width:11px;height:11px;}
.hud__right{top:18px;right:15px;gap:8px;}
.pearl-counter,.hud-clock{display:flex;align-items:center;gap:6px;height:31px;border-radius:20px;padding:3px 10px;border:1px solid #bee5ff99;background:linear-gradient(#356cb2c9,#0b2d6ac9);box-shadow:inset 0 1px #ffffff55;font-size:17px;font-weight:700;}
.pearl-counter__icon{width:21px;height:21px;}
.pearl-counter__total,.pearl-counter__sep{display:none;}
.pearl-counter__num::before{content:'× ';font-size:12px;font-weight:400;}
.hud-clock{font-family:var(--font-num);min-width:88px;justify-content:center;}
.hud-clock>span:first-child{font-size:22px;}
.frag-track{position:absolute;right:1px;top:48px;padding:4px 8px;border-radius:12px;gap:5px;}
.frag-track .frag{width:11px;height:13px;}
.icon-btn{width:38px;height:38px;border-radius:50%;}
.whale-dock{width:86px;height:86px;right:13px;bottom:12px;}
.whale-face{width:86px;height:86px;}
.bubble{right:73px;bottom:61px;padding:10px 14px;border:2px solid #d9f6ff;border-radius:25px 25px 5px 25px;background:linear-gradient(#e8fbfff5,#b9dffff5);box-shadow:0 0 20px #6ac2ff66;color:#1a3c77;}
.bubble__text{font-size:12px;font-weight:600;color:#173b72;}
.banner{top:108px;font-size:13px;letter-spacing:.1em;}
.boss-hud{position:absolute;left:294px;top:13px;width:365px;padding:4px 12px 7px;background:linear-gradient(#0a1545dc,#0a164677);border-radius:12px;color:#e8e3ff;text-shadow:0 1px 3px #020c2c;}
.boss-hud[hidden]{display:none;}
.boss-hud__title{font-weight:800;font-size:15px;letter-spacing:.04em;display:flex;justify-content:space-between;}
.boss-hud__title span{font-size:10px;align-self:center;color:#bcbdfb;}
.boss-hud__track{height:12px;margin-top:6px;border:1px solid #d4baff;border-radius:9px;background:#10142f;box-shadow:0 0 8px #ab64ff55,inset 0 0 0 2px #552b7e;overflow:hidden;}
#bossHealth{height:100%;width:100%;border-radius:9px;background:linear-gradient(#f0b4ff,#bc4bff 50%,#6e25d5);box-shadow:0 0 10px #db81ff;transition:width .3s;}
.boss-hud p{text-align:center;color:#c9c6ee;font-size:10px;margin-top:4px;}
#stage:has(.boss-hud:not([hidden])) .hud__center{top:91px;left:20px;}
#stage:has(.boss-hud:not([hidden])) .level-chip{font-size:13px;}
#stage:has(.boss-hud:not([hidden])) .progress{display:none;}
/* Portrait-led menus and bubbles continue the same illustration language. */
.screen--overlay{background:#03143455;backdrop-filter:blur(4px) saturate(1.12);}
.panel{border:2px solid #d6f3ff;border-radius:34px 22px 38px 22px;background:radial-gradient(ellipse at 20% 0,#b8e5ff66,transparent 65%),linear-gradient(135deg,#5a9bcee8,#205394f2 75%,#5186bce8);box-shadow:inset 0 0 0 4px #cbebff1f,0 0 0 5px #7fc7f32b,0 0 28px #7abbff44,0 20px 60px #020c2d88;}
.panel::before{background:#507fb7;color:#e8f8ff;border:2px solid #d7f5ff;}
.panel__head h2,.panel__title{font-family:var(--font-display);font-size:27px;font-weight:800;letter-spacing:.1em;}
.panel__head p,.panel__note{color:#e2f0ff;}
.panel--pause{width:360px;padding:30px 32px 26px;transform:translateX(110px);}
.panel--clear{width:470px;transform:translateX(95px);}
.panel--pause .btn{font-size:16px;}
.menu-col{gap:10px;}
.menu-col .btn--ghost{background:linear-gradient(#78c5f9c9,#236ca9da);border-color:#e1f8ff;box-shadow:inset 0 1px 4px #e0f3ff99;}
.screen-portrait{position:absolute;left:20px;bottom:-30px;width:430px;height:510px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 15px #8acfff66);pointer-events:none;}
.pause-whale{right:-35px;bottom:-20px;width:90px;height:90px;}
.stat{background:#143f7b55;border:1px solid #c5e5ff66;}
.stat__k{color:#deeeff;}
.setting label{color:#f1f8ff;}
.howto-list li{background:#0c38764d;border-color:#a4d3ff55;}
.howto-tips p{color:#e0eeff;}
.screen--collection{padding:24px 32px;background:linear-gradient(100deg,#06153255,#071e4be8);}
.collection-guide{position:absolute;left:-12px;bottom:-20px;width:400px;height:450px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 14px #6cbcff66);}
.collection-meter{margin-left:auto;font-size:13px;letter-spacing:.08em;color:#d5eaff;}
.collection-list{position:absolute;left:370px;right:40px;top:105px;display:grid;gap:10px;}
.achievement{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid #adceff8c;background:linear-gradient(100deg,#b3daffeb,#e9f7ffeb);border-radius:14px;color:#254775;}
.achievement-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(#4f88d1,#1b3c83);border:1px solid #b8dcff;color:#b4d7ff;font-size:27px;}
.achievement h3{font-size:14px;}
.achievement p{font-size:10px;margin-top:3px;color:#4f6f9a;}
.achievement-state{margin-left:auto;white-space:nowrap;font-size:10px;color:#7183a4;}
.achievement.is-earned{background:linear-gradient(100deg,#fff1cceb,#edfbffeb);border-color:#f9e7b7;}
.achievement.is-earned .achievement-state{color:#248460;font-weight:700;}
.achievement.is-earned .achievement-icon{color:#ffe396;}
.btn--primary{font-family:var(--font-display);font-weight:800;}
@media(max-width:820px){.level-grid{gap:10px;}.level-card__preview{height:168px;}.title-logo__main{font-size:82px;}}
@media(pointer:coarse){.reference-title .title-menu .btn{min-height:0;}.title-help{bottom:10px;}.hud__right{gap:5px;}.icon-btn{width:48px;height:48px;}.frag-track{top:57px;}.whale-dock{display:none;}.tbtn{width:74px;height:74px;}.tbtn--jump{width:86px;height:86px;}.title-help{min-height:44px;}.panel--pause .btn{min-height:46px;}}
@media(prefers-reduced-motion:reduce){.loading-shell{animation:none;}}
body.reduce-motion .loading-shell{animation:none;}
/* Reference lettering is part of the original art; hotspots must not blur it. */
.reference-title .title-menu .btn{backdrop-filter:none;-webkit-backdrop-filter:none;}
.level-card__stars .star:not(.is-on){background:#102d59;filter:drop-shadow(0 0 1px #e1f3ff) drop-shadow(0 0 2px #b2d9ff);}
.screen--select .level-card__stars .star{clip-path:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 2 4.1 8.9 9.7 1.2-7.1 6.8 1.9 9.7-8.6-4.8-8.6 4.8 1.9-9.7-7.1-6.8 9.7-1.2Z' fill='%23112f61' stroke='%23c7eaff' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;}
.screen--select .level-card__stars .star.is-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 2 4.1 8.9 9.7 1.2-7.1 6.8 1.9 9.7-8.6-4.8-8.6 4.8 1.9-9.7-7.1-6.8 9.7-1.2Z' fill='%23ffd365' stroke='%23fff1c9' stroke-width='1.5'/%3E%3C/svg%3E");}
@media(pointer:coarse){.icon-btn{width:62px;height:62px;}.frag-track{top:69px;}.selection-copy>p:not(.selection-kicker){font-size:13px;}.selection-copy h3{font-size:22px;}#selectionStats{font-size:11px;}}
#stage:not(.reference-title) .screen--title{display:flex;align-items:center;}
#stage:not(.reference-title) .title-menu{gap:7px;}
#stage:not(.reference-title) .title-menu .btn{min-height:40px;padding:6px 20px;font-size:17px;}
#stage:not(.reference-title) .title-menu .btn--primary{min-height:48px;}
#stage:not(.reference-title) .title-desc{margin:8px 0 12px;}
#stage:not(.reference-title) .title-kicker{margin-bottom:6px;}
.screen--win{background:linear-gradient(90deg,transparent,#08255555 55%,#071f4a99);backdrop-filter:none;}
.win-portrait{position:absolute;left:-15px;bottom:-45px;width:460px;height:570px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 18px #91d2ff66);}
.panel--win{position:absolute;left:432px;top:58px;width:480px;padding:25px 26px 24px;}
.panel--win .panel__title{font-size:24px;letter-spacing:.04em;}
.panel--win .panel__note{font-size:12px;line-height:1.85;margin-top:12px;}
.panel--win .stat-row{gap:7px;margin-top:17px;}
.panel--win .stat{padding:10px 4px;}
.panel--win .stat__k{font-size:10px;}
.panel--win .stat__v{font-size:17px;}
.panel--win .panel__actions{margin-top:19px;gap:10px;}
.panel--win .btn{font-size:15px;padding:11px 24px;}

/* Available even when the game script fails to download. */
.loader-retry{color:#e0f4ff;font-size:14px;letter-spacing:normal;visibility:hidden;animation:show-loader-retry 0s 12s forwards;}
@keyframes show-loader-retry{to{visibility:visible;}}

/* source: css/adventure.css */
/* Playable interaction, movement feedback and companion conversations. */
.hud-avatar-button{position:absolute;left:0;top:0;width:76px;height:76px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;}
.hud-avatar-button:focus-visible,.dock-talk:focus-visible{outline:3px solid #ffe7a8;outline-offset:3px;}
.hud-avatar-button:hover{filter:drop-shadow(0 0 6px #e2f8ff);}
.dock-talk{position:relative;border:0;padding:0;background:none;color:#eaf7ff;cursor:pointer;width:86px;height:86px;}
.dock-talk span{position:absolute;left:13px;right:13px;bottom:0;border:1px solid #cfedff;border-radius:12px;background:#194878;font-size:9px;padding:2px 0;}
.title-talk{position:absolute;right:165px;bottom:16px;border:1px solid #e3e5ff;border-radius:24px;background:#133c76da;color:#f1f8ff;padding:9px 14px;cursor:pointer;font-size:12px;box-shadow:inset 0 1px #fff5,0 0 16px #80adff44;}
.title-talk:hover{background:#3f69a6e6;transform:translateY(-2px);}
.title-talk:focus-visible{outline:3px solid #ffe6a7;outline-offset:4px;}
.adventure-hud{position:absolute;left:20px;top:103px;max-width:270px;}
#hudObjective{padding:6px 10px;border-left:2px solid #c1e9ff;border-radius:0 10px 10px 0;background:linear-gradient(90deg,#072751c9,#0e3b674d);color:#eff8ff;font-size:11px;line-height:1.5;text-shadow:0 1px 4px #09264e;}
.dash-indicator{margin-top:7px;display:flex;align-items:center;gap:9px;color:#dff4ff;font-size:10px;text-shadow:0 1px 3px #002756;}
.dash-indicator>i{position:relative;display:block;width:67px;height:5px;border:1px solid #c9f6ff99;border-radius:4px;background:#09285caa;overflow:hidden;}
#dashFill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#5bd4e9,#d5faff);box-shadow:0 0 6px #89edff;}
#stage:has(.boss-hud:not([hidden])) .adventure-hud{top:126px;}
.interaction-prompt{position:absolute;left:50%;bottom:123px;transform:translateX(-50%);padding:9px 22px;border-radius:20px;border:1px solid #fff0c7;background:linear-gradient(#234e7dee,#102a54ee);color:#fff0c7;font-size:13px;box-shadow:0 0 17px #ffd36f44;white-space:nowrap;}
.interaction-prompt[hidden]{display:none;}
.touch-pad,.touch-actions{align-items:flex-end;gap:10px;}
.tbtn--small{width:50px;height:50px;font-size:12px;}
.tbtn--dash{width:64px;height:64px;font-size:13px;}
.tbtn--attack{width:58px;height:58px;font-size:14px;color:#d9fbff;border-color:#8ce9ff88;box-shadow:inset 0 1px 10px #8ce9ff55,0 0 18px #65dfff44;}
.tbtn:disabled{opacity:.38;filter:saturate(.4);cursor:default;}
.screen--talk{background:rgba(2,17,47,.7);backdrop-filter:blur(7px);}
.panel--talk{width:640px;padding:23px 26px 24px;min-height:367px;text-align:left;}
.panel--talk .panel__eyebrow{text-align:center;margin-bottom:19px;letter-spacing:.3em;font-size:10px;}
.talk-portrait{position:absolute;left:25px;top:80px;width:170px;height:170px;}
.talk-portrait canvas{width:170px;height:170px;filter:drop-shadow(0 0 12px #8dd9ff44);}
.talk-portrait>span{position:absolute;right:0;top:-15px;color:#ffc2dc;font-size:43px;opacity:0;pointer-events:none;}
.talk-portrait.is-reacting>span{animation:affection-rise .9s ease-out both;}
.talk-portrait.is-reacting canvas{animation:companion-bob .55s ease-out;}
@keyframes affection-rise{0%{opacity:0;transform:translateY(15px) scale(.5)}35%{opacity:1;transform:translateY(-3px) scale(1)}100%{opacity:0;transform:translateY(-34px) scale(.85)}}
@keyframes companion-bob{35%{transform:translateY(-8px) rotate(-3deg)}70%{transform:translateY(1px) rotate(2deg)}}
.panel--talk h2,.talk-context,.talk-line,.talk-topics,.talk-footer{margin-left:190px;}
.panel--talk h2{font-size:26px;letter-spacing:.1em;color:#f1fbff;}
.talk-context{font-size:10px;color:#c6e7ff;margin-top:6px;letter-spacing:.07em;}
.talk-line{font-size:14px;line-height:1.85;color:#f0f7ff;min-height:106px;margin-top:15px;}
.talk-topics{display:flex;gap:8px;flex-wrap:wrap;}
.talk-topics .btn{font-size:12px;padding:10px 13px;letter-spacing:.02em;}
.talk-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:12px;}
.talk-footer>span{font-size:11px;color:#d3eafa;}
.talk-footer .btn{font-size:13px;padding:10px 24px;}
.collection-list{left:347px;right:30px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#screen-collection{overflow-y:auto;}
.panel--settings{max-height:calc(100% - 24px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;}
.achievement{position:relative;min-height:83px;padding:10px 10px 18px;gap:9px;}
.achievement h3{font-size:12px;}
.achievement p{font-size:9px;line-height:1.5;}
.achievement-icon{flex:0 0 32px;width:32px;height:34px;font-size:23px;}
.achievement-state{position:absolute;right:10px;bottom:6px;font-size:9px;}
.panel--howto{width:min(650px,calc(100% - 32px));height:512px;max-height:calc(100% - 24px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:22px 28px 16px;pointer-events:auto;}
.panel--howto .panel__head{margin-bottom:4px;}
.panel--howto .panel__head .panel__eyebrow{margin-bottom:7px;}
.panel--howto .panel__head>p:last-child{font-size:12px;color:#cce9ff;}
.howto-chapter-status{display:block;margin-top:8px;color:#8fdfff;font:700 10px var(--font-num);letter-spacing:.16em;}
.howto-jump{display:none;}
.howto-body{position:relative;min-height:0;overflow-y:auto;padding:0 6px 6px 0;scroll-behavior:smooth;}
.howto-section{margin-top:15px;scroll-margin-top:8px;}
.howto-section h3{font-size:12px;margin-bottom:7px;}
.howto-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:0;}
.howto-list li{min-height:39px;padding:7px 9px;gap:5px;font-size:11px;}
.howto-list li span{font-size:10px;line-height:1.35;}
.howto-goals,.howto-boss{gap:5px;}
.howto-goals p,.howto-boss p{font-size:11px;line-height:1.55;}
.howto-body::-webkit-scrollbar{width:5px;}
.howto-body::-webkit-scrollbar-thumb{background:#9ddfff66;border-radius:5px;}
.howto-levels,.howto-explore{display:grid;gap:6px;}
.howto-levels p,.howto-explore p{margin:0;color:#e0eeff;font-size:11px;line-height:1.55;}
.howto-levels b,.howto-explore b{color:var(--teal);margin-right:5px;}
.howto-footer{display:flex;align-items:center;justify-content:center;gap:9px;padding-top:12px;}
.howto-footer .btn{min-width:92px;font-size:12px;padding:9px 14px;}
.howto-footer .btn[disabled]{opacity:.42;cursor:default;transform:none;}
@media(pointer:coarse){.panel--howto{grid-template-rows:auto auto minmax(0,1fr) auto;width:calc(100% - 28px);height:520px;max-height:calc(100% - 16px);padding:16px 16px 12px;}.howto-jump{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0 2px;padding:8px 10px;border:1px solid #b7e5ff88;border-radius:11px;background:#1a4c7eec;color:#f2f9ff;font-size:11px;box-shadow:0 5px 12px #09284c66;}.howto-jump select{min-width:145px;padding:7px 25px 7px 9px;border:1px solid #c6ecff99;border-radius:8px;color:#eaf7ff;background:#0b315bd9;font-size:11px;outline:none;}.howto-jump select:focus-visible{outline:2px solid #ffe6a3;outline-offset:2px;}.howto-list{grid-template-columns:1fr;gap:6px;}.howto-list li{min-height:40px;padding:8px 9px;}.howto-list li span{font-size:11px;}.howto-goals p,.howto-boss p,.howto-levels p,.howto-explore p{font-size:11px;}.howto-section{margin-top:14px;scroll-margin-top:54px;}.howto-footer{gap:6px;padding-top:9px;}.howto-footer .btn{min-width:0;flex:1;min-height:44px;padding:8px 7px;}.panel--howto .btn{min-height:44px;}.setting--sensitivity{grid-template-columns:minmax(0,1fr) minmax(160px,1fr) auto;}.setting--sensitivity .setting__hint{max-width:230px;line-height:1.45;}}
.screen--boss-tutorial{background:rgba(2,17,47,.72);backdrop-filter:blur(7px);}
.panel--boss-tutorial{width:min(560px,calc(100% - 32px));height:calc(100% - 24px);max-height:516px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;padding:18px 22px 14px;transform:none;}
.boss-tutorial__header{position:relative;padding-right:40px;}
.boss-tutorial__close{position:absolute;right:0;top:0;min-width:34px;min-height:34px;border:1px solid #cceaff;border-radius:10px;background:#12345a;color:#f5faff;font-size:22px;cursor:pointer;}
.boss-tutorial__body{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:3px 5px 5px 0;}
.boss-tutorial__body:focus-visible{outline:2px solid #cceaff;outline-offset:-2px;}
.panel--boss-tutorial .panel__title{margin-bottom:10px;}
.boss-tutorial__line{margin:0 0 15px;padding:9px 12px;border-left:2px solid #ffe29a;border-radius:0 9px 9px 0;background:#12345a;color:#fff4d3;font-size:13px;line-height:1.6;}
.boss-tutorial__steps{display:grid;gap:8px;margin-bottom:12px;}
.boss-tutorial__step{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:start;padding:9px 10px;border:1px solid #a4d3ff55;border-radius:10px;background:#0c38764d;color:#eef8ff;font-size:12px;line-height:1.5;}
.boss-tutorial__step b{display:grid;place-items:center;width:25px;height:25px;border:1px solid #ffe29a;border-radius:50%;color:#ffe29a;font-size:12px;}
.boss-tutorial__step strong{color:#fff4d3;}
.boss-tutorial__hint{margin:0 0 12px;padding:8px 10px;border:1px solid #ffc7a6aa;border-radius:9px;background:#542d3e99;color:#ffe8df;font-size:11px;line-height:1.5;}
.panel--boss-tutorial .panel__actions{gap:8px;flex-wrap:wrap;margin-top:0;padding-top:10px;}
.panel--boss-tutorial .btn:focus-visible,.boss-tutorial__close:focus-visible{outline:2px solid #ffe29a;outline-offset:2px;}
@media(pointer:coarse){.panel--boss-tutorial{width:calc(100% - 34px);height:calc(100% - 16px);max-height:524px;padding:14px 18px 10px;transform:none;}.boss-tutorial__step{font-size:max(14px,calc(var(--touch-min-size,62px)*.28));}.boss-tutorial__line{font-size:max(14px,calc(var(--touch-min-size,62px)*.28));}.boss-tutorial__hint{font-size:max(14px,calc(var(--touch-min-size,62px)*.28));}.panel--boss-tutorial .btn,.boss-tutorial__close{min-height:var(--touch-min-size,44px);}.boss-tutorial__close{min-width:var(--touch-min-size,44px);}.boss-tutorial__header{padding-right:var(--touch-min-size,44px);}}
@media(pointer:coarse){.title-talk{bottom:10px;min-height:44px;padding:9px 15px;}.adventure-hud{top:98px;max-width:250px;}#hudObjective{font-size:11px;}.touch-pad{gap:9px;}.touch-actions{gap:7px;}.tbtn--small{width:54px;height:54px;font-size:12px;}.tbtn--dash{width:64px;height:64px;}.tbtn--attack{width:58px;height:58px;}.talk-topics .btn{min-height:45px;}.talk-footer .btn{min-height:44px;}}
@media(prefers-reduced-motion:reduce){.talk-portrait.is-reacting>span,.talk-portrait.is-reacting canvas{animation:none;}}
body.reduce-motion .talk-portrait.is-reacting>span,body.reduce-motion .talk-portrait.is-reacting canvas{animation:none;}
.interaction-prompt{bottom:166px;}
.tbtn:disabled{opacity:.65;color:#dceaff;background:linear-gradient(#294b73b3,#142d51b3);border-color:#b6d7f08c;}
.tbtn--dash:not(:disabled){box-shadow:inset 0 1px 10px #dcf5ff70,0 0 18px #8ddfff55;}
.tbtn--attack:active{transform:scale(.9);filter:brightness(1.25);}
@media(pointer:coarse){.tbtn--small{width:62px;height:62px;}}
#game:focus{outline:none;}
#game:focus-visible{outline:2px solid #c3edff88;outline-offset:-3px;}
/* Review fixes: readable auxiliary text and aligned, contained map cards. */
.talk-context{display:inline-block;color:#f5faff;background:#12345a;padding:4px 8px;border-radius:7px;font-size:12px;line-height:1.5;letter-spacing:.03em;}
.dash-indicator{display:inline-flex;color:#f5faff;background:#12345a;padding:5px 8px;border-radius:8px;font-size:12px;text-shadow:none;}
.panel--win{top:26px;left:420px;width:500px;padding:20px 22px;}
.panel--win .panel__note{color:#f5faff;background:#12345a;padding:10px;border-radius:10px;font-size:14px;line-height:1.65;max-height:150px;overflow:auto;}
.stat{background:#12345a;}
.stat__k,.panel--win .stat__k{color:#f5faff;font-size:12px;letter-spacing:.04em;}
.panel--win .panel__actions{flex-wrap:wrap;gap:8px;margin-top:14px;}
.panel--win .btn{font-size:14px;padding:9px 14px;min-height:38px;}
#btnFindFragments[hidden]{display:none;}
.level-grid{top:78px;height:254px;align-items:start;}
.level-card,.level-card:nth-child(2){height:250px;margin-top:0;display:flex;flex-direction:column;}
.level-card__preview{height:142px;flex:0 0 142px;}
.level-card__body{height:108px;flex:0 0 108px;width:100%;}
.level-card__idx{top:129px;}
.level-card__name{font-size:18px;}
.level-card__foot{margin-top:6px;gap:4px;}
.level-card__stars .star{width:21px;height:21px;}
.level-card__lock{font-size:12px;line-height:18px;color:#f5faff;}
.level-card:hover,.level-card.is-locked:hover{transform:none;}
.asset-warning{position:absolute;z-index:110;left:50%;top:12px;transform:translateX(-50%);width:650px;padding:10px 13px;border-radius:12px;background:#143454;color:#fff4d3;border:1px solid #ffe2a0;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 18px #0007;}
.asset-warning[hidden]{display:none;}
.asset-warning span{flex:1;}.asset-warning button{border:1px solid #cceaff;border-radius:7px;background:#214f7b;color:#fff;padding:7px 10px;cursor:pointer;}
@media(max-width:820px){.screen--select .level-card__preview{height:142px;}}

#stage.assets-pending>.screen,#stage.assets-pending>#game{visibility:hidden;}

/* source: css/mobile.css */
#viewportSafeArea{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);visibility:hidden;pointer-events:none;}
.mobile-view-tools{position:fixed;z-index:120;left:50%;bottom:max(6px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 16px);}
.mobile-view-tools[hidden],.mobile-view-note[hidden]{display:none;}
.mobile-view-tools button{flex:none;min-width:96px;min-height:44px;padding:8px 12px;border:1px solid #cceaff;border-radius:14px;color:#f5faff;background:#12345a;font-size:12px;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 10px #00142b66;}
.mobile-view-tools button:focus-visible{outline:3px solid #ffe2a2;outline-offset:2px;}
#mobileViewStatus{color:#f5faff;background:#12345a;font-size:11px;border-radius:8px;line-height:1.4;max-width:126px;}
#mobileViewStatus:empty{display:none;}
.mobile-view-note{position:fixed;z-index:110;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;padding:7px 12px;border:1px solid #9bcaf3;border-radius:12px;color:#f5faff;background:#12345a;font-size:12px;line-height:1.5;text-align:center;pointer-events:none;}
.mobile-device .tbtn{min-width:var(--touch-min-size,62px);min-height:var(--touch-min-size,62px);}
.mobile-device #stage{box-shadow:0 0 0 1px #7ccaff44,0 0 35px #03152b;}

.howto-touch{display:none;}
.mobile-device .howto-keyboard{display:none;}
.mobile-device .howto-touch{display:grid;}

/* Tutorial modals own their footer; keep the floating fullscreen tool from covering actions. */
body:has(#stage[data-screen="boss-tutorial"]) .mobile-view-tools,
body:has(#stage[data-screen="howto"]) .mobile-view-tools{display:none;}