:root{
  --cream:#fffaf3; --cream2:#fdf2e4; --cream3:#f8e7d3;
  --ink:#3b2f2f; --ink2:#7a6a63; --line:#f0dfcd;
  --candy:#ff7aa2; --candy2:#ffb3c7; --mint:#5fd0a4; --mint2:#b8f0da;
  --lav:#a78bfa; --lav2:#ddd0ff; --butter:#ffd479; --butter2:#ffefc2;
  --card-a:0.15; --radius:22px; --shadow:0 10px 26px rgba(196,152,120,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--cream);color:var(--ink);
  font:15px/1.6 "PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}

/* ---- page background: our own picture (desktop) ---- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:#fffaf3 url("bg.jpg") center center / cover no-repeat fixed}
@media (max-width:820px){
  .sky{background:#fffaf3 url("bg-mobile.jpg") center top / cover no-repeat}
}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);
  background:rgba(255,250,243,.62);border-bottom:1px solid rgba(255,255,255,0.20)}
.bar{display:flex;align-items:center;gap:18px;height:66px}
.logo{font-size:21px;font-weight:800;letter-spacing:.5px;white-space:nowrap}
.logo em{font-style:normal;color:var(--candy)}
.menu{display:flex;gap:4px;margin-left:10px;flex:1;flex-wrap:wrap}
.menu a{padding:8px 13px;border-radius:12px;font-weight:700;font-size:14.5px;color:var(--ink2);transition:.15s}
.menu a:hover{background:#fff3e8;color:var(--ink)}
.menu a.on{background:#ffe4ec;color:#d94a76}
.head-right{display:flex;align-items:center;gap:10px}
.pill{font-size:12px;font-weight:700;color:#1c7f60;background:#d9f7ea;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
.btn-line{border:1.6px solid var(--candy2);color:#d94a76;font-weight:700;
  padding:7px 15px;border-radius:12px;font-size:14px;background:rgba(255,255,255,0.25)}
.btn-line:hover{background:#fff0f5}

/* ---- shell ---- */
.main{max-width:900px;margin-left:auto;margin-right:auto;padding-top:26px;padding-bottom:46px;min-height:60vh}

/* framed, centered panel used by every page */
.panel{background:rgba(255,255,255,var(--card-a));backdrop-filter:blur(16px) saturate(1.15);border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow);padding:24px 26px;margin-bottom:18px}
.panel .h1{margin-top:0}
.panel .stat{background:rgba(255,255,255,calc(var(--card-a) * .73));box-shadow:none;border-color:#f4e4d2}
.center{text-align:center}
.center .h1,.center .sub{text-align:center}
.grid3{max-width:760px;margin:0 auto}
.center .empty{padding:30px 10px}

/* ---- hero stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:rgba(255,255,255,calc(var(--card-a) * .93));backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:26px;font-weight:800;letter-spacing:.5px}
.stat span{font-size:12.5px;color:var(--ink2);font-weight:600}
.stat.pink b{color:#e35c8a}.stat.mint b{color:#25a97e}
.stat.lav b{color:#7c5cf0}.stat.butter b{color:#c98a12}

/* ---- card ---- */
.card{background:rgba(255,255,255,calc(var(--card-a) * 1.13));backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.card+.card{margin-top:16px}

/* ---- tabs ---- */
.tabs{display:flex;gap:6px;background:rgba(255,255,255,calc(var(--card-a) * .87));backdrop-filter:blur(8px);padding:6px;border-radius:16px;width:max-content}
.tabs button{border:0;background:transparent;color:var(--ink2);font-weight:700;font-size:14px;
  padding:9px 18px;border-radius:12px;cursor:pointer;transition:.15s;font-family:inherit}
.tabs button.on{background:rgba(255,255,255,calc(var(--card-a) * 1.8));color:#d94a76;box-shadow:0 3px 10px rgba(210,150,150,.18)}

/* ---- search ---- */
.toolrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 14px}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,calc(var(--card-a) * 1.33));backdrop-filter:blur(8px);border:1.6px solid rgba(255,255,255,0.25);border-radius:14px;padding:9px 14px}
.search input{border:0;outline:0;flex:1;font:inherit;background:transparent;color:var(--ink)}
.search:focus-within{border-color:var(--candy2);box-shadow:0 0 0 4px #ffe6ee}

/* ---- rank list ---- */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:56px minmax(120px,1fr) 110px 92px 92px;
  align-items:center;gap:10px;padding:13px 8px;border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0}
.row .no{font-weight:800;font-size:15px;color:#b9a79d;font-variant-numeric:tabular-nums}
.row .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .pt{font-weight:800;color:#e35c8a;text-align:right;font-variant-numeric:tabular-nums}
.row .sub{font-size:12.5px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.row.t1 .no,.row.t2 .no,.row.t3 .no{color:#e0a11a}
.row.t1 .nm::before{content:"👑 ";font-size:13px}
.row.t2 .nm::before{content:"🥈 ";font-size:13px}
.row.t3 .nm::before{content:"🥉 ";font-size:13px}
.empty{padding:34px;text-align:center;color:var(--ink2)}

/* ---- hall / shop / donate grids ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{border-radius:var(--radius);padding:18px;border:1px solid rgba(255,255,255,0.23);background:rgba(255,255,255,var(--card-a));backdrop-filter:blur(12px);
  box-shadow:var(--shadow);transition:.15s;display:block}
.tile:hover{transform:translateY(-2px)}
.tile h3{margin:0 0 4px;font-size:16px}
.tile p{margin:0;font-size:13px;color:var(--ink2)}
.tile.pink{background:linear-gradient(180deg,rgba(255,240,245,calc(var(--card-a) * 1.47)),rgba(255,255,255,calc(var(--card-a) * .87)))}
.tile.mint{background:linear-gradient(180deg,rgba(234,250,243,calc(var(--card-a) * 1.47)),rgba(255,255,255,calc(var(--card-a) * .87)))}
.tile.lav{background:linear-gradient(180deg,rgba(241,236,255,calc(var(--card-a) * 1.47)),rgba(255,255,255,calc(var(--card-a) * .87)))}
.tile.butter{background:linear-gradient(180deg,rgba(255,248,228,calc(var(--card-a) * 1.47)),rgba(255,255,255,calc(var(--card-a) * .87)))}

.price{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.price b{font-size:22px;color:#e35c8a}
.price span{font-size:12.5px;color:var(--ink2)}
.feats{margin:12px 0 0;padding:0;list-style:none;font-size:13.5px;color:#5c4f4a}
.feats li{padding:3px 0}
.feats li::before{content:"✓ ";color:var(--mint);font-weight:800}

/* ---- faq ---- */
.faq{border:1px solid rgba(255,255,255,0.23);border-radius:18px;background:rgba(255,255,255,calc(var(--card-a) * 1.13));backdrop-filter:blur(12px);overflow:hidden}
.faq+.faq{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:800;display:flex;
  justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--candy);font-weight:800}
.faq[open] summary::after{content:"－"}
.faq p{margin:0;padding:0 18px 16px;color:var(--ink2);font-size:14px}

/* ---- misc ---- */
.h1{font-size:24px;font-weight:800;margin:4px 0 4px}
.sub{color:var(--ink2);font-size:14px;margin:0 0 18px}
.foot{border-top:1px solid var(--line);padding:18px 0 26px;margin-top:10px}
.foot-in{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink2)}
.tabbar{display:none}
.note{font-size:12.5px;color:var(--ink2);margin-top:10px}

/* ---- phone ---- */
@media (max-width:820px){
  .menu{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:44px minmax(90px,1fr) 86px;gap:6px}
  .row .sub.m,.row .sub.w{display:none}
  .main{padding-bottom:78px}
  .foot{padding-bottom:76px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(255,250,243,.96);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);padding:8px 6px;justify-content:space-around}
  .tabbar a{font-size:12.5px;font-weight:700;color:var(--ink2);padding:6px 12px;border-radius:12px}
  .tabbar a.on{color:#d94a76;background:#ffe4ec}
  .bar{height:60px}
  .logo{font-size:18px}
  .h1{font-size:21px}
}


/* ================= theme + settings ================= */
body.dark{
  --cream:#0e1218; --cream2:#151a23; --cream3:#1b2230;
  --ink:#e9eff8; --ink2:#98a7ba; --line:#27323f;
  --shadow:0 10px 26px rgba(0,0,0,.45);
}
body.dark .sky{filter:brightness(.30) saturate(.72)}
body.dark .topbar{background:rgba(14,18,24,.66);border-bottom-color:#232d3a}
body.dark .pill{background:#12332a;color:#4fd1a5}
body.dark .btn-line{background:rgba(255,255,255,.07);border-color:#482e38;color:#ff9dbb}
body.dark .menu a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
body.dark .menu a.on{background:#2a1a22;color:#ff9dbb}
body.dark .tabs button.on{color:#ff9dbb}
body.dark .row:hover{background:rgba(255,255,255,.07)}
body.dark .tabbar{background:rgba(14,18,24,.92);border-top-color:#232d3a}
body.dark .tabbar a{color:var(--ink2)}
body.dark .tabbar a.on{background:#2a1a22;color:#ff9dbb}
body.dark .search input{color:var(--ink)}
body.dark .faq summary,body.dark .h1,body.dark .row .nm{color:var(--ink)}
body.dark .stat b{color:inherit}
body.dark .badge,body.dark .foot{color:var(--ink2)}

.gear{
  width:34px;height:34px;border-radius:11px;border:1.4px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.35);color:#8b6b62;font-size:16px;line-height:1;
  cursor:pointer;transition:.15s;display:grid;place-items:center;
}
.gear:hover{background:rgba(255,255,255,.6)}
body.dark .gear{background:rgba(255,255,255,.08);border-color:#3a4756;color:#c6d3e3}

.settings{
  position:fixed;top:74px;right:16px;z-index:60;width:258px;padding:16px 16px 12px;
  border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  border:1px solid var(--line);box-shadow:0 20px 46px rgba(120,90,70,.24);
}
body.dark .settings{background:rgba(18,23,31,.96);box-shadow:0 20px 46px rgba(0,0,0,.55)}
.set-h{font-weight:800;font-size:15px;margin-bottom:14px;color:var(--ink)}
.set-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13.5px}
.set-row label{width:80px;flex:none;color:var(--ink2);font-weight:700}
.seg{display:flex;gap:4px;background:rgba(0,0,0,.06);padding:3px;border-radius:11px}
body.dark .seg{background:rgba(255,255,255,.07)}
.seg button{border:0;background:transparent;color:var(--ink2);font:inherit;font-weight:700;
  padding:6px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.on{background:#fff;color:#d94a76;box-shadow:0 2px 8px rgba(0,0,0,.08)}
body.dark .seg button.on{background:#2b3547;color:#ff9dbb}
#alpha{flex:1;accent-color:#ff7aa2;height:4px}
#alphaVal{width:38px;text-align:right;font-size:12.5px;color:var(--ink2)}
.set-foot{font-size:11.5px;color:var(--ink2);margin-top:4px;opacity:.85}

/* ================= player record modal (click a row) ================= */
.pmodal-mask{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(60,40,32,.45);backdrop-filter:blur(3px)}
.pmodal-mask.on{display:flex}
.pmodal-card{position:relative;width:100%;max-width:560px;max-height:82vh;overflow:auto;
  background:var(--cream);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 24px 60px rgba(120,80,60,.28);padding:20px 18px 16px;animation:pmodalIn .22s ease}
@keyframes pmodalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.pmodal-x{position:absolute;top:10px;right:12px;border:0;background:#ffe4ec;color:#d94a76;font-size:18px;
  width:30px;height:30px;border-radius:50%;cursor:pointer;line-height:1;font-family:inherit}
.pmodal-x:hover{background:#ffd3e0}
.pmodal-head{margin-bottom:12px;padding-right:34px}
.pmodal-name{font-size:19px;font-weight:800;color:var(--ink)}
.pmodal-sub{font-size:12.5px;color:var(--ink2);font-weight:600}
.pmodal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pg-item{background:rgba(255,255,255,calc(var(--card-a) * 1.5));border:1px solid var(--line);border-radius:13px;
  padding:9px 6px;text-align:center}
.pg-item b{display:block;font-size:16px;font-weight:800;color:#d94a76}
.pg-item span{font-size:11px;color:var(--ink2);font-weight:600}
.pmodal-sec{font-size:13px;font-weight:800;margin:6px 0 8px;color:var(--ink)}
.pmodal-empty{color:var(--ink2);font-size:13px;text-align:center;padding:18px 0}
.pmodal-tbl{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,calc(var(--card-a) * 1.2))}
.pmodal-tbl table{width:100%;border-collapse:collapse;font-size:12.5px}
.pmodal-tbl th{position:sticky;top:0;background:#fff4ea;color:var(--ink2);font-weight:700;
  padding:7px 9px;text-align:left;white-space:nowrap;z-index:1}
.pmodal-tbl td{padding:7px 9px;border-top:1px solid #f7ece1;white-space:nowrap;color:var(--ink)}
.pm-win{color:#1c7f60;font-weight:800}
.pm-lose{color:#c0392b;font-weight:800}
.pm-void{color:#c98a12;font-weight:800}
.pm-detail{border:1px solid var(--candy2);background:#fff0f5;color:#d94a76;font-weight:700;font-size:12px;
  padding:4px 10px;border-radius:9px;cursor:pointer;font-family:inherit;transition:.15s}
.pm-detail:hover{background:#ffe4ec}
.pm-back{border:0;background:rgba(255,122,162,.16);color:#d94a76;font-weight:700;font-size:12.5px;
  padding:5px 12px;border-radius:9px;cursor:pointer;font-family:inherit;margin-bottom:8px}
.pm-back:hover{background:rgba(255,122,162,.28)}
.pmodal-kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:12px;font-size:12.5px}
.pmodal-kv div{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:10px;background:rgba(255,255,255,calc(var(--card-a) * 1.2))}
.pmodal-kv span{color:var(--ink2);white-space:nowrap}
.pmodal-kv b{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;text-align:right}
body.dark .pm-detail{background:#2a1a22;border-color:#482e38;color:#ff9dbb}
body.dark .pm-back{background:#2a1a22;color:#ff9dbb}
body.dark .pmodal-kv div{background:#1a212c}

/* ---- 对局玩家明细表（14 列） ---- */
.pmt-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,calc(var(--card-a) * 1.2))}
.pmt{width:100%;border-collapse:collapse;font-size:12px;min-width:680px}
.pmt th{position:sticky;top:0;background:#fff4ea;color:var(--ink2);font-weight:700;
  padding:7px 8px;text-align:left;white-space:nowrap;z-index:1}
.pmt td{padding:6px 8px;border-top:1px solid #f7ece1;white-space:nowrap;color:var(--ink)}
body.dark .pmt-wrap{background:#1a212c}
body.dark .pmt th{background:#1a212c}
body.dark .pmt td{border-top-color:#232d3a}
body.dark .pmodal-card{background:#11161e}
body.dark .pg-item{background:#1a212c}
body.dark .pmodal-tbl th{background:#1a212c}
body.dark .pmodal-tbl td{border-top-color:#232d3a}
body.dark .pmodal-x{background:#2a1a22;color:#ff9dbb}
@media (max-width:520px){
  .pmodal-grid{grid-template-columns:repeat(2,1fr)}
  .pmodal-tbl td:nth-child(1){font-size:11.5px}
}

/* 2026-10-22: optional wallpaper; original desktop/mobile backgrounds remain default. */
body.ocean-bg .sky{background-image:url("ocean-20261022.png");background-position:62% center;background-attachment:scroll}
.rank-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.rank-heading .h1{margin-bottom:2px}
.rank-note,.data-line,.search-count{color:var(--ink2);font-size:12px}
.rank-note{margin:0}.data-line{min-height:24px;margin-bottom:16px}
.pill.is-stale{background:#fff0d5;color:#946315}
body.dark .pill.is-stale{background:#3b2d19;color:#ffd479}
button{font-family:inherit;cursor:pointer}button:disabled{opacity:.65;cursor:wait}
.row:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--candy);outline-offset:3px}
.row{cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 58px}
.row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.modal-open{overflow:hidden}
.pmodal-card{overscroll-behavior:contain;scrollbar-gutter:stable}
.search input{min-width:0;width:100%}
.settings{width:min(320px,calc(100vw - 24px))}
.search-count{white-space:nowrap}
@media(max-width:820px){
 .bar{gap:8px}.head-right{gap:6px;margin-left:auto}.bg-toggle{font-size:12px;padding:6px 9px;white-space:nowrap}
 .head-right>.btn-line[href="#/login"]{display:none}.head-right .pill{display:none}
 body.ocean-bg .sky{background-position:72% center;background-attachment:scroll}
 .main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
 .tabbar{padding-bottom:env(safe-area-inset-bottom)}
 .rank-heading{align-items:flex-start}.rank-heading button{flex:none;font-size:12px;padding:7px 10px}
 .stat{padding:12px 10px}.stat b{font-size:20px}.panel{padding:18px 14px}
 .pmodal-card{max-height:calc(100dvh - 32px)}
}
@media(prefers-reduced-motion:reduce){
 body:not(.ocean-bg) *, .pmodal-card, button, a{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Ocean motion uses the same image; all effects remain behind page content. */
.sky{overflow:hidden;isolation:isolate}
.ocean-fx{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden}
body.ocean-bg .ocean-fx{display:block}
body.ocean-bg .sky{transform-origin:68% 56%;animation:ocean-camera 14s ease-in-out infinite alternate;will-change:transform}
.ocean-glow,.ocean-rays,.ocean-caustics{position:absolute;pointer-events:none;mix-blend-mode:screen}
.ocean-glow{inset:-10%;opacity:.26;
 background:radial-gradient(ellipse at 27% 9%,rgba(164,235,255,.36),transparent 52%),radial-gradient(ellipse at 78% 78%,rgba(105,195,255,.20),transparent 45%);
 animation:ocean-glimmer 5s ease-in-out infinite alternate}
.ocean-rays{inset:-18%;opacity:.24;transform-origin:70% 0;
 background:repeating-conic-gradient(from 185deg at 70% -12%,transparent 0deg 12deg,rgba(210,249,255,.19) 15deg 17deg,transparent 21deg 30deg);
 animation:ocean-rays 9s ease-in-out infinite alternate}
.ocean-caustics{inset:48% -8% -15%;opacity:.14;
 background:repeating-radial-gradient(ellipse at 40% 20%,transparent 0 30px,rgba(179,238,255,.22) 32px 34px,transparent 38px 80px);
 transform:rotate(-9deg);animation:ocean-caustics 8s ease-in-out infinite alternate}
.ocean-bubble{position:absolute;left:var(--x);top:110%;width:var(--s);height:var(--s);
 border-radius:50%;border:1.5px solid rgba(230,253,255,.85);box-shadow:inset -2px -2px 5px rgba(65,151,209,.24),0 0 9px rgba(178,235,255,.32);opacity:0;
 background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.70),rgba(176,234,255,.08) 38%,transparent 68%);
 animation:ocean-bubble var(--duration) linear var(--delay) infinite;will-change:transform}
@keyframes ocean-camera{from{transform:scale(1.035) translate3d(-.6%,.35%,0)}to{transform:scale(1.085) translate3d(.6%,-.35%,0)}}
@keyframes ocean-glimmer{from{opacity:.22;transform:translate3d(-2%,0,0)}to{opacity:.52;transform:translate3d(2%,-2%,0)}}
@keyframes ocean-rays{from{transform:rotate(-2deg) translate3d(-1%,0,0);opacity:.28}to{transform:rotate(2deg) translate3d(1%,0,0);opacity:.52}}
@keyframes ocean-caustics{from{transform:rotate(-9deg) translate3d(-2%,0,0);opacity:.10}to{transform:rotate(-7deg) translate3d(2%,-3%,0);opacity:.18}}
@keyframes ocean-bubble{0%{opacity:0;transform:translate3d(0,0,0) scale(.8)}10%{opacity:.78}85%{opacity:.65}100%{opacity:0;transform:translate3d(var(--drift),-135vh,0) scale(1.12)}}
body.scene-paused .sky,body.scene-paused .ocean-fx *{animation-play-state:paused!important}
/* Phone classification also covers landscape and narrow/coarse-pointer phones. */
html.phone-view #backgroundToggle{display:none!important}
html.phone-view body .sky{background-image:url("bg-mobile.jpg");background-position:center top;background-attachment:scroll;animation:none!important;transform:none!important;will-change:auto}
html.phone-view .ocean-fx{display:none!important}
@media(max-width:1024px){.ocean-bubble:nth-of-type(n+5){display:none}}
/* Explicitly selecting the ocean scene starts its animation; phone guard stays authoritative. */

/* Keep decoration layers above the wallpaper, below every page control. */
body.ocean-bg .ocean-fx{z-index:1;display:block}
html.phone-view .ocean-fx{display:none!important}
html.phone-view body .sky{animation:none!important;transform:none!important}

/* Puppet layers: actual girl/whales/fish move independently of the aquarium. */
.ocean-puppet-canvas,.puppet-fallback{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
body.ocean-bg .sky.puppet-ready{background-image:url("ocean-plate-puppet-20261022.png");animation:none;transform:none;will-change:auto}
body.ocean-bg .puppet-ready .ocean-puppet-canvas,body.ocean-bg .puppet-ready .puppet-fallback{display:block}
body.ocean-bg .ocean-fx{z-index:2}
.puppet-fallback{object-fit:cover;object-position:62% 50%;transform-origin:74% 85%}
.puppet-fallback-1{animation:puppet-root-breathe 4.5s ease-in-out infinite alternate}
.puppet-fallback-2{animation:puppet-root-swim 6s ease-in-out infinite alternate}
@keyframes puppet-root-breathe{from{transform:translateY(0) rotate(-.4deg)}to{transform:translateY(-5px) rotate(.4deg)}}
@keyframes puppet-root-swim{from{transform:translate(-6px,0) rotate(-.7deg)}to{transform:translate(6px,-3px) rotate(.7deg)}}
body.scene-paused .puppet-fallback{animation-play-state:paused!important}
@media(max-width:820px){.puppet-fallback{object-position:72% 50%}}
html.phone-view body .sky{background-image:url("bg-mobile.jpg")!important}
html.phone-view .ocean-puppet-canvas,html.phone-view .puppet-fallback{display:none!important}

/* User request: fish move, character stays still in both GPU and fallback paths. */
body.ocean-bg .sky{animation:none;transform:none;will-change:auto}
.puppet-fallback-1{animation:none!important;transform:none!important}