:root{--whale-50: #f2fbff;--whale-100: #dcf3fe;--whale-200: #b9e6fb;--whale-300: #8ed4f4;--whale-400: #62beec;--whale-500: #3e9fd6;--whale-600: #2b7cb0;--whale-belly: #fdfaf3;--whale-blush: #ffb3c7;--whale-eye: #1f3d52;--sea-sky: #b9f0f2;--sea-surface: #8fe3ea;--sea-shallow: #5cc9dc;--sea-mid: #33a6c8;--sea-deep: #1f7fa8;--sea-abyss: #14567c;--sea-floor: #e8dcc0;--sea-godray: rgba(255, 251, 224, .34);--acc-mint: #7fe3c4;--acc-shrimp: #ffa585;--acc-fish: #ffd98e;--acc-star: #ffc46b;--acc-bubble: #d8f6ff;--acc-sparkle: #ffe98a;--acc-clam: #f7c9dc;--acc-pearl: #fff6e8;--acc-krill: #ff9fb2;--acc-jelly: #c3b5f5;--acc-kelp: #9ad86f;--acc-moon: #b8c6ff;--sem-xp: #ffc96b;--sem-xp-hi: #ffe6a8;--sem-startle: #ff9a8b;--sem-good: #7fe3c4;--sem-rare: #c3b5f5;--sem-legend: #ffe98a;--glass-thin-bg: rgba(255, 255, 255, .16);--glass-thin-stroke: rgba(255, 255, 255, .4);--glass-thin-blur: 14px;--glass-thick-bg: rgba(255, 255, 255, .72);--glass-thick-stroke: rgba(255, 255, 255, .9);--glass-thick-blur: 28px;--glass-ink: #14567c;--glass-ink-soft: #4a8aab;--soft-lift: 0 10px 24px -8px rgba(15, 74, 106, .42), 0 2px 6px -2px rgba(15, 74, 106, .28);--soft-lift-lg: 0 24px 60px -18px rgba(15, 74, 106, .55), 0 6px 16px -6px rgba(15, 74, 106, .3);--soft-inner: inset 0 2px 3px rgba(255, 255, 255, .75), inset 0 -3px 8px rgba(20, 86, 124, .16);--soft-press: inset 0 3px 8px rgba(20, 86, 124, .28), inset 0 -1px 2px rgba(255, 255, 255, .4);--soft-glow-xp: 0 0 16px rgba(255, 201, 107, .65);--font-display: "Baloo 2", "Jua", "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;--font-ui: "Jua", "Baloo 2", "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;--t-xs: clamp(.66rem, .6rem + .25vw, .78rem);--t-sm: clamp(.78rem, .7rem + .3vw, .92rem);--t-md: clamp(.92rem, .84rem + .35vw, 1.08rem);--t-lg: clamp(1.12rem, 1rem + .5vw, 1.35rem);--t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);--t-hero: clamp(2.4rem, 1.6rem + 4vw, 4.6rem);--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 20px;--s-6: 24px;--s-8: 32px;--s-10: 40px;--s-12: 48px;--r-sm: 10px;--r-md: 16px;--r-lg: 22px;--r-xl: 30px;--r-2xl: 40px;--r-full: 999px;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-squish: cubic-bezier(.34, 1.56, .64, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-tap: 90ms;--dur-fast: .18s;--dur-base: .28s;--dur-slow: .52s;--dur-ceremony: 1.2s;--z-hud: 10;--z-toast: 30;--z-scrim: 40;--z-sheet: 50;--z-title: 60;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}:root[data-time=night]{--sea-sky: #2b3f6b;--sea-surface: #33507f;--sea-shallow: #2a4a78;--sea-mid: #223d68;--sea-deep: #1a2f52;--sea-abyss: #101d38;--sea-godray: rgba(190, 210, 255, .18);--glass-thin-bg: rgba(180, 205, 255, .12);--glass-thin-stroke: rgba(200, 220, 255, .28);--glass-thick-bg: rgba(28, 44, 78, .78);--glass-thick-stroke: rgba(150, 180, 235, .35);--glass-ink: #eaf2ff;--glass-ink-soft: #9fb6d8;--soft-inner: inset 0 2px 3px rgba(255, 255, 255, .18), inset 0 -3px 8px rgba(0, 0, 0, .28);--soft-lift: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35)}@media(hover:none),(pointer:coarse){:root{--glass-thin-blur: 7px;--glass-thick-blur: 14px}}@media(prefers-reduced-motion:reduce){:root{--dur-tap: 0ms;--dur-fast: 0ms;--dur-base: 0ms;--dur-slow: 0ms;--dur-ceremony: 0ms}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;height:100dvh;overflow:hidden;background:#14567c;font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none;user-select:none}#stage,#stage canvas{position:fixed;inset:0;width:100%;height:100%;height:100dvh;display:block}.ui-root{position:fixed;inset:0;height:100dvh;z-index:var(--z-hud);pointer-events:none;padding:calc(var(--safe-t) + var(--s-4)) calc(var(--safe-r) + var(--s-4)) calc(var(--safe-b) + var(--s-4)) calc(var(--safe-l) + var(--s-4));color:var(--glass-ink)}.hud-card,.glass-btn,.action-btn,.sheet,.combo,.toast,.depth-gate,.photo-bar{background:var(--glass-thin-bg);border:1px solid var(--glass-thin-stroke);-webkit-backdrop-filter:blur(var(--glass-thin-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-thin-blur)) saturate(1.4);box-shadow:var(--soft-lift),var(--soft-inner)}.ui-root,.hud-card,.glass-btn,.action-btn,.sheet,.combo,.toast,.depth-gate,.photo-bar,.status-name,.status-size,.status-sub,.sheet-title,.sheet-sub,.toggle,.combo-label,.xp-track,.joystick-base{transition:background-color .9s var(--ease-out),border-color .9s var(--ease-out),color .9s var(--ease-out),box-shadow .9s var(--ease-out)}.glass-btn,.action-btn,.pill-btn{transition:transform var(--dur-tap) var(--ease-squish),background-color .9s var(--ease-out),border-color .9s var(--ease-out),color .9s var(--ease-out),box-shadow var(--dur-tap) var(--ease-out)}.hud-status{position:absolute;top:calc(var(--safe-t) + var(--s-4));left:calc(var(--safe-l) + var(--s-4));display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4) var(--s-2) var(--s-2);border-radius:var(--r-xl);min-width:232px;transform-origin:top left;transition:transform var(--dur-base) var(--ease-squish);background:linear-gradient(165deg,#ffffff6b,#ffffff38);border-color:#ffffffa6;box-shadow:var(--soft-lift),inset 0 1px #fffc,var(--soft-inner)}:root[data-time=night] .hud-status{background:linear-gradient(165deg,#283c6480,#1c2c4e61);border-color:#96b4eb73}.hud-status[data-pop=true]{transform:scale(1.07)}.status-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:var(--r-full);display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--whale-100),var(--whale-300));border:2px solid rgba(255,255,255,.85);box-shadow:var(--soft-inner),0 4px 10px -4px #0f4a6a80,0 0 0 1px #2e86a826;overflow:hidden}#avatar-canvas{width:52px;height:52px;display:block}.status-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}.status-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2)}.status-name{font-family:var(--font-ui);font-size:var(--t-md);letter-spacing:.01em;text-shadow:0 1px 0 rgba(255,255,255,.5);white-space:nowrap}.chip{font-family:var(--font-display);font-weight:800;font-size:var(--t-xs);line-height:1;padding:4px 9px 3px;border-radius:var(--r-full);white-space:nowrap}.chip-level{color:#6b4300;background:linear-gradient(160deg,var(--sem-xp-hi),var(--sem-xp));box-shadow:0 2px 6px -2px #b88014b3,inset 0 1px #fffc}.xp-track{position:relative;height:9px;border-radius:var(--r-full);background:#14567c38;box-shadow:var(--soft-press);overflow:hidden}.xp-fill{position:absolute;inset:0;width:0%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--sem-xp),var(--sem-xp-hi));box-shadow:var(--soft-glow-xp);transition:width var(--dur-base) var(--ease-out)}.xp-shine{position:absolute;inset:0 0 auto;height:45%;border-radius:var(--r-full);background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);pointer-events:none}.status-sub{font-size:var(--t-xs);color:var(--glass-ink-soft);font-family:var(--font-display);font-weight:600}.status-size{color:var(--glass-ink);font-weight:800;font-variant-numeric:tabular-nums}.status-xp{font-variant-numeric:tabular-nums}.hp-row{display:flex;align-items:center;gap:6px;margin-top:1px}.hp-heart{font-size:.72em;line-height:1;color:#ff6b81;text-shadow:0 1px 0 rgba(255,255,255,.5);flex:0 0 auto}.hp-track{position:relative;flex:1 1 auto;height:8px;border-radius:var(--r-full);background:#14567c38;box-shadow:var(--soft-press);overflow:hidden}.hp-fill{position:absolute;inset:0;width:100%;border-radius:var(--r-full);background:linear-gradient(90deg,#4fc98a,#86e6a8);box-shadow:inset 0 1px #ffffff73;transition:width var(--dur-fast) var(--ease-out)}.hp-fill[data-low=true]{animation:hp-pulse .85s var(--ease-in-out) infinite}@keyframes hp-pulse{0%,to{opacity:1}50%{opacity:.5}}.reduce-motion .hp-fill[data-low=true]{animation:none}@media(prefers-reduced-motion:reduce){.hp-fill[data-low=true]{animation:none}}.hp-text{font-size:var(--t-xs);color:var(--glass-ink-soft);font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto}.hud-topright{position:absolute;top:calc(var(--safe-t) + var(--s-4));right:calc(var(--safe-r) + var(--s-4));display:flex;gap:var(--s-2)}.glass-btn{pointer-events:auto;width:46px;height:46px;padding:0;border-radius:var(--r-lg);display:grid;place-items:center;cursor:pointer;color:var(--glass-ink);transition:transform var(--dur-tap) var(--ease-squish),box-shadow var(--dur-tap) var(--ease-out)}.glass-btn svg{width:21px;height:21px;fill:currentColor}.glass-btn:hover{transform:translateY(-2px) scale(1.04)}.glass-btn:active{transform:scale(.92);box-shadow:var(--soft-press)}.combo{position:absolute;top:calc(var(--safe-t) + var(--s-4));left:50%;display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4);border-radius:var(--r-full);opacity:0;transform:translate(-50%,-16px) scale(.86);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-squish)}.combo[data-active=true]{opacity:1;transform:translate(-50%) scale(1)}.combo-x{font-family:var(--font-display);font-weight:800;font-size:var(--t-lg);line-height:1;color:#6b4300;background:linear-gradient(160deg,var(--sem-xp-hi),var(--sem-xp));padding:4px 10px 3px;border-radius:var(--r-full);font-variant-numeric:tabular-nums}.combo-label{font-size:var(--t-sm);color:var(--glass-ink)}.depth-gate{position:absolute;left:50%;bottom:calc(var(--safe-b) + var(--s-12) + var(--s-8));display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s-2) var(--s-6) var(--s-3);border-radius:var(--r-lg);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,10px) scale(.94);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-squish)}.depth-gate[data-show=true]{opacity:1;transform:translate(-50%) scale(1)}.depth-gate-chev{color:var(--glass-ink-soft);line-height:0;animation:depth-chev 1.8s var(--ease-out) infinite}.depth-gate-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.depth-gate-name{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);color:var(--glass-ink)}.depth-gate-sub{font-size:var(--t-sm);color:var(--glass-ink-soft)}@keyframes depth-chev{0%,to{transform:translateY(0);opacity:.7}50%{transform:translateY(3px);opacity:1}}.toast-stack{position:absolute;top:22%;left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}.toast{padding:var(--s-3) var(--s-6);border-radius:var(--r-full);font-size:var(--t-lg);font-family:var(--font-ui);white-space:nowrap;background:var(--glass-thick-bg);border-color:var(--glass-thick-stroke);-webkit-backdrop-filter:blur(var(--glass-thick-blur)) saturate(1.5);backdrop-filter:blur(var(--glass-thick-blur)) saturate(1.5);animation:toast-in var(--dur-slow) var(--ease-squish) both,toast-out var(--dur-base) var(--ease-out) 1.9s both}.toast strong{font-family:var(--font-display);font-weight:800;color:#b88014}@keyframes toast-in{0%{opacity:0;transform:translateY(14px) scale(.8)}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px) scale(.96)}}.joystick-zone{position:absolute;left:0;bottom:0;width:min(52vw,380px);height:min(46vh,340px);pointer-events:auto}.joystick{position:absolute;width:132px;height:132px;left:0;top:0;opacity:0;transition:opacity var(--dur-fast) var(--ease-out);transform:translate(-50%,-50%)}.joystick[data-active=true]{opacity:1}.joystick-base{position:absolute;inset:0;border-radius:var(--r-full);background:var(--glass-thin-bg);border:1.5px solid var(--glass-thin-stroke);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--soft-press)}.joystick-knob{position:absolute;width:58px;height:58px;left:50%;top:50%;margin:-29px 0 0 -29px;border-radius:var(--r-full);background:radial-gradient(circle at 36% 30%,var(--whale-100),var(--whale-400) 72%);box-shadow:var(--soft-lift),inset 0 2px 4px #ffffffb3,inset 0 -4px 8px #14567c4d;will-change:transform}@media(hover:hover)and (pointer:fine){.joystick-zone{display:none}}.action-cluster{position:absolute;right:calc(var(--safe-r) + var(--s-5));bottom:calc(var(--safe-b) + var(--s-6));display:flex;align-items:flex-end;gap:var(--s-3)}.action-btn{pointer-events:auto;position:relative;padding:0;border-radius:var(--r-full);display:grid;place-items:center;cursor:pointer;color:#fff;overflow:hidden;transition:transform var(--dur-tap) var(--ease-squish),filter var(--dur-fast) var(--ease-out)}.action-btn svg{width:42%;height:42%;fill:currentColor;filter:drop-shadow(0 2px 3px rgba(15,74,106,.4));z-index:1}.action-btn:before{content:"";position:absolute;left:12%;top:8%;width:62%;height:46%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.9),rgba(255,255,255,.25) 55%,transparent 72%);pointer-events:none;z-index:0}.action-btn:active{transform:scale(.88)}.action-btn[disabled]{filter:saturate(.35) brightness(1.08);cursor:default}.action-dash{width:82px;height:82px;background:radial-gradient(circle at 34% 26%,#ffe6a8,#ffb24d 60%,#f38b2e);border-color:#ffffffb3;box-shadow:var(--soft-lift),inset 0 3px 5px #ffffffb3,inset 0 -5px 12px #b4621459}.action-song{width:60px;height:60px;background:radial-gradient(circle at 34% 26%,#e8dcff,#b9a6f2 60%,#9a84e0);border-color:#ffffffb3;box-shadow:var(--soft-lift),inset 0 3px 5px #ffffffa6,inset 0 -5px 12px #5a42a059}.action-dash{--charge: 0}.action-dash:after{content:"";position:absolute;inset:-5px;border-radius:var(--r-full);pointer-events:none;opacity:0;transition:opacity .12s var(--ease-out);background:conic-gradient(from -90deg,#fff6cf calc(var(--charge) * 360deg),transparent 0);-webkit-mask:radial-gradient(transparent 58%,#000 61%);mask:radial-gradient(transparent 58%,#000 61%)}.action-dash[data-charging=true]:after{opacity:.95}.action-dash[data-charged=true]{box-shadow:var(--soft-lift),inset 0 3px 5px #ffffffb3,inset 0 -5px 12px #b4621459,0 0 0 3px #fff2b0f2,0 0 20px 5px #ffdc78d9;animation:dash-ready .5s var(--ease-out) infinite alternate}@keyframes dash-ready{0%{filter:brightness(1)}to{filter:brightness(1.2)}}.action-cool{position:absolute;inset:0;border-radius:var(--r-full);background:#14567c73;pointer-events:none;--p: 0;-webkit-mask:conic-gradient(#000 calc(var(--p) * 360deg),transparent 0);mask:conic-gradient(#000 calc(var(--p) * 360deg),transparent 0)}.scrim{position:fixed;inset:0;z-index:var(--z-scrim);background:#0c344e59;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}.scrim[data-open=true]{opacity:1;pointer-events:auto}.sheet{position:fixed;z-index:var(--z-sheet);left:50%;bottom:0;width:min(440px,94vw);max-height:calc(100dvh - var(--s-4));overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--s-3) var(--s-6) calc(var(--safe-b) + var(--s-6));border-radius:var(--r-2xl) var(--r-2xl) 0 0;background:var(--glass-thick-bg);border-color:var(--glass-thick-stroke);-webkit-backdrop-filter:blur(var(--glass-thick-blur)) saturate(1.5);backdrop-filter:blur(var(--glass-thick-blur)) saturate(1.5);box-shadow:var(--soft-lift-lg);transform:translate(-50%,100%);transition:transform var(--dur-slow) var(--ease-squish);pointer-events:auto;text-align:center}.sheet[data-open=true]{transform:translate(-50%)}@media(min-width:720px)and (min-height:620px){.sheet{bottom:50%;border-radius:var(--r-2xl);padding-bottom:var(--s-6);transform:translate(-50%,calc(50% + 40px)) scale(.94);opacity:0}.sheet[data-open=true]{transform:translate(-50%,50%) scale(1);opacity:1}}@media(max-height:600px)and (min-width:560px){.sheet{left:50%;top:50%;bottom:auto;width:min(780px,94vw);max-height:calc(100dvh - var(--s-3));border-radius:var(--r-2xl);padding:var(--s-4) var(--s-6);text-align:left;transform:translate(-50%,-46%) scale(.96);opacity:0;display:grid;grid-template-columns:1.35fr 1fr;column-gap:var(--s-6);row-gap:var(--s-3);align-content:start}.sheet[data-open=true]{transform:translate(-50%,-50%) scale(1);opacity:1}.sheet-handle{display:none}.sheet-title,.sheet-sub{grid-column:1 / -1;margin:0;text-align:left}.sheet-stats,.tabs,.tab-panel{grid-column:1;margin:0}.skin-section,.codex-section{margin:0}.sheet-actions{grid-column:2;grid-row:3;flex-direction:column;margin:0}.sheet-toggles{grid-column:2;grid-row:4;margin:0}}.sheet-handle{width:44px;height:5px;border-radius:var(--r-full);background:var(--glass-ink-soft);opacity:.35;margin:0 auto var(--s-4)}.sheet-title{margin:0 0 var(--s-1);font-size:var(--t-xl);font-family:var(--font-ui);font-weight:400;color:var(--glass-ink)}.sheet-sub{margin:0 0 var(--s-5);font-size:var(--t-sm);color:var(--glass-ink-soft)}.sheet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-bottom:var(--s-5)}.stat-tile{padding:var(--s-3) var(--s-2);border-radius:var(--r-md);background:#14567c12;box-shadow:var(--soft-press)}.stat-tile .v{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--t-lg);color:var(--glass-ink);font-variant-numeric:tabular-nums}.stat-tile .k{display:block;font-size:var(--t-xs);color:var(--glass-ink-soft);margin-top:2px}.tabs{display:flex;gap:var(--s-1);padding:4px;margin-bottom:var(--s-4);border-radius:var(--r-full);background:#14567c17;box-shadow:var(--soft-press)}.tab{pointer-events:auto;flex:1;padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-full);background:transparent;cursor:pointer;font-family:var(--font-ui);font-size:var(--t-sm);color:var(--glass-ink-soft);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.tab[data-active=true]{color:var(--glass-ink);background:linear-gradient(180deg,#fffffff2,#e2f3fbd9);box-shadow:var(--soft-lift)}.tab-panel{display:none}.tab-panel[data-open=true]{display:block;animation:tab-in var(--dur-base) var(--ease-out) both}@keyframes tab-in{0%{opacity:0;transform:translateY(6px)}}.codex-section{margin-bottom:var(--s-5);text-align:left}.codex-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-2)}.codex-tile{pointer-events:auto;position:relative;aspect-ratio:1;display:grid;place-items:center;padding:2px;border:1px solid rgba(255,255,255,.55);border-radius:var(--r-md);cursor:pointer;overflow:hidden;background:linear-gradient(170deg,#8fe3ea8c,#33a6c88c);box-shadow:var(--soft-lift),inset 0 2px 3px #ffffff80;transition:transform var(--dur-tap) var(--ease-squish)}.codex-tile:hover{transform:translateY(-2px) scale(1.05)}.codex-tile:active{transform:scale(.93)}.codex-tile[data-kind=predator] .codex-img{width:100%;height:100%;object-fit:contain}.codex-img{display:block;max-width:100%;max-height:100%;image-rendering:auto}.codex-tile[data-locked=true]{background:#14567c1a;border-color:#ffffff40;box-shadow:var(--soft-press);cursor:default}.codex-tile[data-locked=true]:hover{transform:none}.codex-q{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--glass-ink-soft);opacity:.5}.codex-detail{margin-top:var(--s-3);min-height:3.1em;display:flex;flex-direction:column;gap:2px;text-align:center}.codex-name{font-size:var(--t-md);color:var(--glass-ink)}.codex-note{font-size:var(--t-xs);color:var(--glass-ink-soft);line-height:1.45}.skin-section{margin-bottom:var(--s-5);text-align:left}.skin-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s-2)}.skin-title{font-size:var(--t-sm);color:var(--glass-ink)}.skin-count{font-family:var(--font-display);font-weight:700;font-size:var(--t-xs);color:var(--glass-ink-soft);font-variant-numeric:tabular-nums}.skin-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-2)}.skin-swatch{pointer-events:auto;position:relative;aspect-ratio:1;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer;padding:0;overflow:hidden;box-shadow:var(--soft-lift),inset 0 2px 4px #fff6;transition:transform var(--dur-tap) var(--ease-squish),border-color var(--dur-fast) var(--ease-out)}.skin-swatch:hover{transform:translateY(-2px) scale(1.06)}.skin-swatch:active{transform:scale(.92)}.skin-swatch:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-18%;height:52%;border-radius:var(--r-full);background:var(--belly)}.skin-swatch[data-active=true]{border-color:var(--sem-xp);box-shadow:var(--soft-lift),0 0 0 3px #ffc96b59,var(--soft-glow-xp)}.skin-swatch[data-locked=true]{filter:saturate(.55) brightness(.72) contrast(.9);cursor:default}.skin-swatch[data-locked=true]:before{content:"🔒";position:absolute;inset:0;display:grid;place-items:center;font-size:.85em;z-index:1;filter:saturate(0) brightness(1.6)}.skin-swatch[data-locked=true]:hover{transform:none}.skin-note{margin:var(--s-2) 0 0;min-height:1.2em;font-size:var(--t-xs);color:var(--glass-ink-soft);text-align:center}.sheet-actions{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}.sheet-actions .pill-btn{flex:1}.pill-btn{pointer-events:auto;font-family:var(--font-ui);font-size:var(--t-md);white-space:nowrap;padding:var(--s-3) var(--s-5);border-radius:var(--r-full);border:1px solid rgba(255,255,255,.7);cursor:pointer;color:var(--glass-ink);background:linear-gradient(180deg,#ffffffeb,#e6f5fccc);box-shadow:var(--soft-lift),inset 0 2px 3px #ffffffe6;transition:transform var(--dur-tap) var(--ease-squish),box-shadow var(--dur-tap) var(--ease-out)}.pill-btn:hover{transform:translateY(-2px)}.pill-btn:active{transform:scale(.95);box-shadow:var(--soft-press)}.pill-primary{color:#fff;border-color:#ffffff8c;background:linear-gradient(180deg,var(--whale-300),var(--whale-500));box-shadow:var(--soft-lift),inset 0 2px 4px #ffffff8c,inset 0 -4px 10px #14567c4d;text-shadow:0 1px 2px rgba(15,74,106,.35)}.pill-lg{font-size:var(--t-lg);padding:var(--s-4) var(--s-10)}.sheet-toggles{display:flex;flex-direction:column;gap:var(--s-3);text-align:left}.toggle{pointer-events:auto;display:flex;align-items:center;gap:var(--s-3);cursor:pointer;font-size:var(--t-sm);color:var(--glass-ink)}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle-track{position:relative;width:48px;height:28px;flex:0 0 48px;border-radius:var(--r-full);background:#14567c2e;box-shadow:var(--soft-press);transition:background var(--dur-fast) var(--ease-out)}.toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:var(--r-full);background:#fff;box-shadow:0 2px 5px #0f4a6a66;transition:transform var(--dur-fast) var(--ease-squish)}.toggle input:checked+.toggle-track{background:linear-gradient(90deg,var(--whale-400),var(--whale-300))}.toggle input:checked+.toggle-track .toggle-thumb{transform:translate(20px)}.toggle-label{flex:1}.title-veil{position:fixed;inset:0;z-index:var(--z-title);display:grid;place-items:center;pointer-events:auto;background:radial-gradient(ellipse 60% 42% at 50% 42%,rgba(255,251,224,.32),transparent 70%),radial-gradient(ellipse at 50% 38%,#b9f0f238,#0f4a6a9e 92%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}.title-veil[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}.title-inner{text-align:center;padding:var(--s-6);animation:title-rise .9s var(--ease-squish) both}@keyframes title-rise{0%{opacity:0;transform:translateY(24px) scale(.94)}}.title-logo{margin:0 0 var(--s-3);line-height:.86;font-family:var(--font-display);font-weight:800;font-size:var(--t-hero);letter-spacing:-.02em;display:flex;flex-direction:column;align-items:center;animation:logo-float 5.2s var(--ease-in-out) infinite}@keyframes logo-float{0%,to{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.6deg)}}@media(prefers-reduced-motion:reduce){.title-logo{animation:none}}.reduce-motion .title-logo{animation:none}.title-logo-main{color:#fff;text-shadow:0 4px 0 var(--whale-500),0 0 22px rgba(255,255,255,.55),0 10px 30px rgba(15,74,106,.6)}.title-logo-sub{color:var(--sem-xp);font-size:.62em;letter-spacing:.06em;text-shadow:0 3px 0 #c98a1e,0 0 18px rgba(255,210,120,.5),0 8px 24px rgba(15,74,106,.5)}.title-tag{margin:0 0 var(--s-8);font-size:var(--t-md);color:#ffffffe6;text-shadow:0 2px 8px rgba(15,74,106,.6)}.title-hint{margin:var(--s-6) 0 0;font-size:var(--t-xs);color:#ffffffbf}.hint-touch{display:none}@media(hover:none),(pointer:coarse){.hint-keys{display:none}.hint-touch{display:block}}.title-hint kbd{font-family:var(--font-display);font-weight:700;background:#fff3;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-sm);padding:2px 7px;margin:0 1px}@media(max-height:600px){.title-inner{padding:var(--s-3)}.title-logo{margin-bottom:var(--s-2)}.title-tag{margin-bottom:var(--s-5)}.title-hint{margin-top:var(--s-3)}}.photo-bar{position:absolute;left:50%;bottom:calc(var(--safe-b) + var(--s-6));transform:translate(-50%,140%);display:flex;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-full);transition:transform var(--dur-slow) var(--ease-squish);pointer-events:auto}.photo-bar[data-open=true]{transform:translate(-50%)}.ui-root[data-photo=true] .hud-status,.ui-root[data-photo=true] .hud-topright,.ui-root[data-photo=true] .action-cluster,.ui-root[data-photo=true] .combo,.ui-root[data-photo=true] .joystick-zone{opacity:0;transition:opacity var(--dur-base) var(--ease-out);pointer-events:none}@media(max-width:460px){.ui-root{padding:calc(var(--safe-t) + var(--s-2)) calc(var(--safe-r) + var(--s-2)) calc(var(--safe-b) + var(--s-2)) calc(var(--safe-l) + var(--s-2))}.hud-status{top:calc(var(--safe-t) + var(--s-2));left:calc(var(--safe-l) + var(--s-2));min-width:0;max-width:calc(100vw - var(--safe-l) - var(--safe-r) - 116px);gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1);border-radius:var(--r-lg)}.status-avatar,#avatar-canvas{width:42px;height:42px;flex-basis:42px}.status-name{overflow:hidden;text-overflow:ellipsis}.hud-topright{top:calc(var(--safe-t) + var(--s-2));right:calc(var(--safe-r) + var(--s-2))}.glass-btn{width:42px;height:42px}.action-cluster{right:calc(var(--safe-r) + var(--s-3));bottom:calc(var(--safe-b) + var(--s-5));gap:var(--s-2)}.action-dash{width:76px;height:76px}.action-song{width:56px;height:56px}.joystick-zone{width:58vw;height:min(40dvh,280px)}.toast{max-width:calc(100vw - var(--s-8));white-space:normal;text-align:center}.sheet{width:100vw;padding-left:var(--s-4);padding-right:var(--s-4)}.sheet-sub,.sheet-stats,.skin-section,.codex-section,.sheet-actions{margin-bottom:var(--s-3)}}@media(max-height:460px){.hud-status{min-width:190px;padding:var(--s-1) var(--s-3) var(--s-1) var(--s-1)}.status-avatar,#avatar-canvas{width:40px;height:40px;flex-basis:40px}.action-dash{width:66px;height:66px}.action-song{width:50px;height:50px}}