:root{--gold:#f5d08e;--pink:#f580b6;--ink:#100d1a;--line:#846048;--text:#f9e9cc;--muted:#b7a5bb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100d1a;color:var(--text);font-family:system-ui,-apple-system,sans-serif}body{background:radial-gradient(ellipse at 50% 0,#382035 0,#100d1a 65%);overscroll-behavior:none}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe2aa;outline-offset:3px}#app{width:min(1400px,100%);margin:auto;padding:0 28px 16px}.topbar{height:76px;display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none;font-family:Georgia,serif;font-size:30px}.brand span{font:800 16px system-ui;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:4px;color:#bca4b1;margin-top:4px}.top-actions{display:flex;align-items:center;gap:7px}.save-indicator{font-size:8px;letter-spacing:2px;color:#ae958f;margin-right:15px}.icon{height:36px;width:38px;border:1px solid #6c4b48;background:#271b2b;color:#dec4a6;border-radius:7px;font-size:20px}.icon.active{color:#ffe1a3;border-color:#e5b56f}.game-shell{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#181125;border:1px solid #ad8059;box-shadow:0 0 0 4px #29202a,0 26px 70px #0008;border-radius:8px}#game{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 75px #07051144}.overlay{position:absolute;inset:0;z-index:2;overflow:auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#120c22ee,#140c2099 55%,#140c2055);padding:28px}.overlay.hidden{display:none}.menu{width:100%;display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center}.eyebrow{font-size:9px;letter-spacing:4px;color:#f3b5c9;font-weight:700}.title{font-family:Georgia,serif;color:#ffe1a0;font-weight:900;font-size:clamp(36px,5.4vw,79px);line-height:.88;letter-spacing:-2px;margin:16px 0 12px;text-shadow:0 3px #8b3c62,0 7px 24px #0008}.subtitle{color:#d9b99f;letter-spacing:5px;font-size:10px;margin:0 0 18px}.intro{font-size:12px;line-height:1.8;color:#d7bfcf;max-width:350px}.menu-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;color:#d7c19a;font-size:9px;letter-spacing:1px}.menu-panel{border:1px solid #78515b;background:#150e21df;padding:19px;border-radius:12px;box-shadow:0 20px 40px #0004}.section-label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#bfa8b1;margin-bottom:8px}.heroes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-card{position:relative;overflow:hidden;border:1px solid #664757;color:#e6ccd8;background:linear-gradient(#3d25423b,#21172d);height:109px;border-radius:7px;text-align:left;padding:8px 10px}.hero-card.selected{border-color:#e8b56d;box-shadow:inset 0 0 0 1px #e8b56d}.hero-card canvas{position:absolute;right:0;top:0;height:109px;width:96px;image-rendering:pixelated}.hero-card b{position:absolute;left:10px;bottom:22px;font-size:10px;letter-spacing:1px}.hero-card small{position:absolute;left:10px;bottom:9px;font-size:8px;color:#c3a7b7}.hero-card .check{position:absolute;left:9px;top:7px;color:var(--gold);font-size:11px}.difficulties{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.difficulty{padding:8px 3px;border-radius:7px;border:1px solid #61434f;background:#27182e;color:#dac6d7}.difficulty.selected{background:#573044;border-color:#dfae71}.difficulty strong{display:block;font-size:10px;margin:3px 0}.difficulty small{font-size:7px;line-height:1.3;display:block;color:#c6b0bd}.mode-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;margin:11px 0}select{background:#2d2037;color:#f4dfca;border:1px solid #75525c;border-radius:6px;padding:6px;font-size:10px}.cta{width:100%;padding:13px 12px;border-radius:7px;background:linear-gradient(110deg,#ffe4a1,#edb265);border:1px solid #ffdb95;border-bottom:4px solid #99542e;color:#372034;font-weight:900;font-size:12px;letter-spacing:2px;box-shadow:0 5px 20px #dc975122}.secondary{width:100%;padding:9px;border:1px solid #795562;border-radius:6px;color:#e7c9d5;background:#352036;margin-top:8px;font-size:10px}.fine{font-size:8px;line-height:1.7;color:#ae94a6;text-align:center;margin:9px 0 0}.controls{display:flex;justify-content:space-between;gap:12px;margin-top:18px}.movement,.combat{display:flex;gap:8px}.touch{min-height:62px;width:74px;background:linear-gradient(#302438,#1c1728);color:#e9d4b5;border:1px solid #705248;border-bottom:4px solid #382933;border-radius:10px;font-size:22px;touch-action:none;user-select:none}.touch small{display:block;font:700 8px system-ui;letter-spacing:1px;color:#a492a7;margin-top:4px}.attack{background:linear-gradient(#7a3c58,#4c263e);border-color:#a86476}.magic{background:linear-gradient(#4a3877,#2b244d);border-color:#7d64a5}.pet{background:linear-gradient(#665139,#382e2a);border-color:#998167}.shield{background:linear-gradient(#31514f,#223536);border-color:#64867d}.touch.held,.touch:active{transform:translateY(2px);filter:brightness(1.35)}footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-top:16px}footer b{display:block;font-size:9px;color:#dab593;letter-spacing:2px}footer span{display:block;font-size:9px;margin-top:5px;color:#95849a}.swap{display:flex;align-items:center;gap:8px;border:1px solid #59404d;background:#211727;color:#d9b68d;border-radius:7px;font-size:22px;padding:6px 12px}.swap span{font-size:8px;letter-spacing:1px;margin:0;color:#d9b68d}.swap small{padding-left:8px;color:#aa8b9c}.dialog{width:min(480px,100%);background:#1b1028ef;border:1px solid #b88668;border-radius:12px;padding:25px;text-align:center;box-shadow:0 18px 60px #0008}.dialog h2{font-family:Georgia,serif;font-size:34px;margin:13px 0;color:#ffde98}.dialog p{font-size:12px;line-height:1.8;color:#d0b6ca}.result-stats{display:flex;gap:8px;justify-content:center;margin:15px 0}.result-stats div{background:#352137;padding:12px 18px;border-radius:8px;border:1px solid #684453}.result-stats b{display:block;color:#ffd79a;font-size:22px}.result-stats small{font-size:8px;letter-spacing:1px;color:#b89bae}.tutorial{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:12px 0}.tutorial div{background:#302035;padding:9px;border-radius:6px;font-size:11px}.tutorial small{display:block;font-size:9px;color:#bda4bb;margin-top:4px}#toast{position:absolute;bottom:28px;left:50%;transform:translate(-50%,12px);opacity:0;transition:.2s;z-index:4;border:1px solid #bf9364;background:#251527ed;color:#ffe2ad;border-radius:7px;padding:9px 15px;font-size:11px;white-space:nowrap;pointer-events:none}#toast.visible{opacity:1;transform:translate(-50%,0)}#loading{position:fixed;inset:0;background:#140e22;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .5s}#loading.hidden{opacity:0;pointer-events:none}.loading-crown{font-size:55px;color:#eabb73;animation:breathe 1s infinite alternate}#loading h1{font:900 32px Georgia;letter-spacing:4px;color:#ffe1a1}#loading p{font-size:12px;color:#bba2be}.loading-track{width:240px;background:#342038;height:3px;margin-top:15px}.loading-track i{display:block;width:0%;height:100%;background:#e8ba7b;transition:width .3s}@keyframes breathe{to{transform:translateY(-5px);opacity:.55}}#game-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0;background:#0e0916}.portrait-hint{display:none}

/* Viewport-sized arena; UI stays inside device safe areas. */
html,body{width:100%;height:100%;overflow:hidden;background:#100d1a}
#app,#app:fullscreen{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;padding:0;margin:0;overflow:hidden;background:#100d1a}
#app .game-shell,#app:fullscreen .game-shell{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#100d1a}
#game{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.topbar{position:absolute;top:calc(12px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));height:auto;z-index:6;pointer-events:none}
.brand,.top-actions{pointer-events:auto}.save-indicator{display:none}.top-actions{margin-left:auto}.icon{background:#201629cf;backdrop-filter:blur(6px)}
#app[data-scene=play] .brand{display:none}
#app[data-scene=play] .topbar{top:calc(clamp(65px,16vh,155px) + env(safe-area-inset-top))}
.overlay{padding:calc(64px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(36px + env(safe-area-inset-left));align-items:center}
.menu{width:min(1050px,100%);grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px)}
.menu-panel{padding:clamp(14px,2vw,26px)}.title{font-size:clamp(45px,7vw,100px)}.intro{font-size:13px}
.dialog{max-height:100%;overflow:auto}.menu-panel{max-height:100%;overflow:auto}
.controls{position:absolute;left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));z-index:5;margin:0;gap:18px;pointer-events:none;opacity:.87;display:none}
#app[data-scene=play] .controls{display:flex}.movement,.combat{gap:7px}.touch{pointer-events:auto;width:clamp(46px,5.6vw,76px);min-height:clamp(48px,9vh,72px);background-color:#251b32b8;box-shadow:0 3px 15px #0004;backdrop-filter:blur(5px)}.touch small{font-size:7px}
footer{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;padding:0;display:none}footer>div{display:none}#app[data-scene=play] footer{display:flex}.swap{background:#25172bcc;backdrop-filter:blur(6px);min-height:36px;padding:7px 11px}.swap span{font-size:8px}
#toast{bottom:calc(90px + env(safe-area-inset-bottom));max-width:75%;white-space:normal;text-align:center}
.rotate-prompt{position:absolute;inset:0;z-index:10;display:none;align-items:center;justify-content:center;background:#140d23f2;padding:24px;text-align:center}.rotate-prompt .turn{font-size:70px;color:#f3ce90;line-height:1}.rotate-prompt h2{font:700 28px Georgia;color:#ffdda1}.rotate-prompt p{font-size:13px;line-height:1.7;color:#cdb9cf}.rotate-prompt button{margin-top:12px}
@media(orientation:landscape) and (max-height:650px){
 .topbar{top:calc(8px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));right:calc(14px + env(safe-area-inset-right))}.brand{font-size:22px}.brand span{font-size:11px;letter-spacing:2px}.brand small{display:none}.icon{width:32px;height:32px;font-size:19px}
 .overlay{padding:calc(42px + env(safe-area-inset-top)) calc(28px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(28px + env(safe-area-inset-left));align-items:safe center}
 .menu{grid-template-columns:1fr 1fr;gap:clamp(18px,5vw,55px);max-width:950px;height:100%;align-items:center}.menu-copy{text-align:left}.eyebrow{font-size:8px;letter-spacing:2px}.title{font-size:clamp(40px,7vw,74px);margin:10px 0}.subtitle{font-size:9px;letter-spacing:3px;margin-bottom:12px}.intro{font-size:10px;line-height:1.6}.menu-meta{font-size:7px;gap:8px;margin-top:12px}
 .menu-panel{padding:11px;max-height:100%;overflow:auto}.hero-card,.hero-card canvas{height:70px}.hero-card canvas{width:70px}.hero-card b{font-size:9px}.hero-card small{font-size:7px}.section-label{font-size:7px;margin-bottom:4px}.difficulty{padding:4px}.difficulty strong{font-size:9px}.difficulty small{font-size:7px}.difficulties{margin-bottom:6px}.mode-row{margin:6px 0;font-size:9px}select{font-size:9px;padding:4px}.cta{padding:9px;font-size:10px}.secondary{padding:6px;font-size:9px;margin-top:5px}.fine{font-size:7px;margin-top:5px;line-height:1.4}
 .controls{left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));gap:12px}.movement,.combat{gap:5px}.touch{width:clamp(44px,5.7vw,61px);min-height:clamp(44px,11vh,59px);font-size:22px;border-radius:9px}.touch small{font-size:6px;margin-top:2px}.swap{font-size:19px;min-height:30px;padding:5px 9px}.swap span{font-size:7px}footer{bottom:calc(10px + env(safe-area-inset-bottom))}
 .dialog{padding:16px;width:min(620px,100%)}.dialog h2{font-size:26px;margin:8px 0}.dialog p{font-size:10px;margin:9px 0}.tutorial{grid-template-columns:repeat(4,1fr);gap:5px}.tutorial div{font-size:10px;padding:7px}.tutorial small{font-size:8px}.result-stats{margin:9px 0}.result-stats div{padding:8px 15px}.result-stats b{font-size:20px}
}
@media(orientation:landscape) and (max-height:420px){.intro,.menu-meta,.fine{display:none}.hero-card,.hero-card canvas{height:55px}.hero-card canvas{width:58px}.menu-panel{padding:8px}.title{font-size:clamp(35px,6vw,62px)}.subtitle{font-size:8px}.eyebrow{font-size:7px}.hero-card b{bottom:19px;font-size:8px}.hero-card small{bottom:8px}.menu-panel .section-label[style]{margin-top:7px!important}.overlay{padding-top:38px;padding-bottom:8px}.touch small{display:none}.touch{min-height:43px}.dialog p{font-size:9px;line-height:1.5}}
@media(orientation:portrait){
 .overlay{padding:calc(65px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));align-items:flex-start}.menu{grid-template-columns:1fr;gap:18px;max-width:440px}.menu-copy{text-align:center}.title{font-size:55px;margin:10px 0}.intro,.menu-meta{display:none}.menu-panel{padding:15px;max-height:none}.brand span{font-size:12px}.brand{font-size:25px}.brand small{font-size:7px}.icon{width:32px;height:32px}.topbar{left:12px;right:12px}.hero-card,.hero-card canvas{height:89px}.hero-card canvas{width:82px}.dialog{margin:auto}
}
@media(orientation:portrait){#app .rotate-prompt{display:flex}#app[data-scene=play] .controls,#app[data-scene=play] footer{visibility:hidden}}
@media(pointer:fine) and (min-width:1100px){.controls{opacity:.55}.controls:hover{opacity:1}}

#app[data-scene=play][data-paused=true] .controls,#app[data-scene=play][data-paused=true] footer{display:none}

/* The backing canvas now matches the viewport; scenery fills the expanded view. */
#game{object-fit:fill}

/* Full-screen two-side rhythm controls. */
#rhythm-input,#rhythm-hud{display:none}#app[data-scene=play][data-mode=rhythm] #rhythm-input{display:flex;position:absolute;inset:0;z-index:4}#rhythm-input button{width:50%;height:100%;border:0;background:transparent;color:#fff1c5;touch-action:none;user-select:none;position:relative;border-radius:0}#rhythm-input button span{position:absolute;top:52%;font-size:45px;opacity:.16;filter:drop-shadow(0 2px 6px #000)}#tap-left span{left:25px}#tap-right span{right:25px}#rhythm-input button[data-active=true]{background:linear-gradient(0deg,#ffcd8220,transparent 70%)}#rhythm-input button[data-active=true] span{opacity:.9;color:#ffdda0}#rhythm-input button[data-ready=true]{background:linear-gradient(0deg,#78f6ba38,transparent 70%)}#rhythm-input button[data-ready=true] span{color:#97ffcf;transform:scale(1.2)}#app[data-scene=play][data-mode=rhythm] .controls,#app[data-scene=play][data-mode=rhythm] footer,#app[data-mode=rhythm] #counter-layer{display:none}#app[data-scene=play][data-mode=rhythm] #rhythm-hud{display:block;position:absolute;bottom:calc(32px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(420px,60vw);z-index:5;pointer-events:none;text-align:center;padding:12px 18px;background:#180f29dc;border:1px solid #b28a62;border-radius:12px;box-shadow:0 5px 25px #0006}#rhythm-chain{font-size:9px;color:#d7bdd3;letter-spacing:2px;margin-bottom:5px}#rhythm-call{font:900 clamp(13px,2vw,20px) Georgia;color:#ffe3a5}#rhythm-hud[data-phase=window] #rhythm-call{color:#a0ffd1}#rhythm-hud small{display:block;font-size:8px;margin-top:8px;color:#d5c3d6}.timing-track{position:relative;height:12px;margin-top:10px;background:#35223e;border-radius:8px;overflow:hidden}.timing-window{position:absolute;inset:0 0 0 var(--window,55%);background:#7becb56b}.timing-track i{position:absolute;left:var(--marker,0%);top:0;bottom:0;width:4px;background:#fff4d1;box-shadow:0 0 10px #fff}.rhythm-start{margin-top:8px}#app[data-paused=true] #rhythm-input,#app[data-paused=true] #rhythm-hud{display:none!important}@media(orientation:portrait) and (pointer:coarse){#app[data-mode=rhythm] #rhythm-input,#app[data-mode=rhythm] #rhythm-hud{visibility:hidden}}@media(max-height:420px){#app[data-scene=play][data-mode=rhythm] #rhythm-hud{padding:7px 12px;bottom:22px;width:340px}.timing-track{margin-top:6px;height:9px}#rhythm-hud small{font-size:7px;margin-top:5px}#rhythm-input button span{font-size:32px}}

/* Arena-wide arcade timing rail. The target zone mirrors with the attack side. */
#app[data-scene=play][data-mode=rhythm] #rhythm-hud{left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:100%;padding:0;background:none;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 2px 2px #100b20)}
#rhythm-chain{font:900 10px monospace;letter-spacing:2px;margin-bottom:4px;color:#ebc5a0;text-shadow:2px 2px #221328}
#rhythm-call{font:900 clamp(14px,2.2vw,23px) monospace;letter-spacing:2px;color:#ffe8a3;text-shadow:2px 2px #6f334a,3px 3px #140e22}
#rhythm-hud small{font:800 8px monospace;letter-spacing:1px;color:#f0d5ba;margin:6px 16px 0;text-shadow:1px 2px #140e22}
.timing-track{height:26px;width:100%;margin:10px 0 0;border-radius:0;border:3px solid #edc17c;border-left-color:#b37a45;border-bottom-color:#84502e;background:repeating-linear-gradient(0deg,#28162e 0 4px,#352039 4px 8px);box-shadow:0 0 0 2px #25132b,inset 0 0 0 2px #110b20;overflow:hidden}
.timing-window{inset:0 0 0 var(--window,55%);border-left:3px solid #e4ffc3;background:repeating-linear-gradient(90deg,#75d6a775 0 12px,#4fbc9075 12px 24px);box-shadow:inset 0 3px #bafaca55,inset 0 -3px #235b59}
#rhythm-hud[data-side=left] .timing-window{inset:0 var(--window,55%) 0 0;border-left:0;border-right:3px solid #e4ffc3}
.timing-track i{left:clamp(0px,var(--marker,0%),calc(100% - 20px));width:20px;top:0;bottom:0;background:linear-gradient(#fff2ad 0 25%,#efb75d 25% 75%,#b57436 75%);border-left:2px solid #fff4c6;border-right:2px solid #8f5431;box-shadow:0 0 0 2px #28162e,0 0 12px #ffd28c;}
.timing-track i::after{content:'▶';font:900 12px monospace;font-style:normal;color:#4e2940;position:absolute;inset:0;display:grid;place-items:center}
#rhythm-hud[data-side=left] .timing-track i::after{content:'◀'}
#rhythm-hud:not([data-phase=cue]):not([data-phase=window]) .timing-track{opacity:.35}#rhythm-hud:not([data-phase=cue]):not([data-phase=window]) .timing-track i{visibility:hidden}
#rhythm-hud[data-phase=window] .timing-window{background:repeating-linear-gradient(90deg,#91f6c1b0 0 12px,#59d7a5b0 12px 24px)}
@media(max-height:420px){#app[data-scene=play][data-mode=rhythm] #rhythm-hud{width:100%;padding:0;bottom:calc(8px + env(safe-area-inset-bottom))}.timing-track{height:22px;margin-top:6px}#rhythm-chain{font-size:8px}#rhythm-hud small{font-size:7px;margin-top:4px}}



/* A continuously drawn energy stream; no texture tiles and no color in the miss region. */
.timing-track{height:26px;background:#17151dcc;box-shadow:0 0 0 2px #25132b,inset 0 0 0 2px #110b20}
.timing-window,#rhythm-hud[data-side=left] .timing-window,#rhythm-hud[data-phase=window] .timing-window{inset:0;border:0;background:none;box-shadow:none}
#rhythm-hud[data-side=left] .timing-window{transform:scaleX(-1)}
#energy-rail{display:block;width:100%;height:100%;image-rendering:pixelated}
#rhythm-hud[data-zone=critical] #rhythm-call{color:#ffce59}#rhythm-hud[data-zone=perfect] #rhythm-call{color:#9af6bb}#rhythm-hud[data-zone=counter] #rhythm-call{color:#9cdbff}
@media(max-height:420px){.timing-track{height:22px}}
@media(prefers-reduced-motion:reduce){#energy-rail{opacity:.85}}

/* Combat rewards stay above the timing rail; the existing top HUD remains intact. */
#reward-hud{display:none;position:absolute;z-index:6;bottom:calc(112px + env(safe-area-inset-bottom));left:4%;right:4%;align-items:end;justify-content:space-between;gap:12px;pointer-events:none;font:900 10px monospace;color:#ffe9c6;text-shadow:1px 2px #160d23}
#app[data-scene=play][data-paused=false] #reward-hud{display:flex}.reward-column{width:30%;max-width:300px}.reward-caption{display:flex;justify-content:space-between;font-size:9px;margin:5px 0}.reward-meter{height:13px;padding:2px;border:2px solid #ad8353;background:#14121bd9;box-shadow:0 0 0 2px #201324,inset 0 2px #0008}.reward-meter i{display:block;height:100%;width:0;transition:width .18s ease;background:linear-gradient(#fff1a6,#f1b73e 45%,#a9681f);box-shadow:0 0 12px #fbd04a88}.green .reward-meter{border-color:#79b890}.green .reward-meter i{background:linear-gradient(#c9ffca,#57df93 45%,#26724d);box-shadow:0 0 12px #5fee9d88}.reward-center{text-align:center;align-self:end;margin-bottom:0;white-space:nowrap}.reward-center strong{display:block;color:#ffdd84;font-size:11px}.reward-center small{display:block;color:#8ad7ff;font-size:10px;margin-top:6px}#ultimate{pointer-events:auto;touch-action:none;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:3px;border:2px solid #efc76f;background:linear-gradient(#654225,#2b1d26);color:#ffe5a4;font:900 11px monospace;box-shadow:0 0 14px #ffbb4a55,inset 0 1px #fff4c577}#ultimate:disabled{opacity:.45;box-shadow:none}#ultimate:not(:disabled){animation:ultimate-glow 1.2s ease-in-out infinite alternate}#ultimate b{font-size:13px}.pet-caption{font-size:11px;color:#9df5b5;margin-bottom:13px}.gold .reward-caption{color:#ffd479}.green .reward-caption{color:#8ff1ac}@keyframes ultimate-glow{to{box-shadow:0 0 22px #ffd45b99,inset 0 1px #fff4c577}}@media(max-height:420px){#reward-hud{bottom:calc(92px + env(safe-area-inset-bottom));left:3%;right:3%;gap:8px}.reward-column{width:29%}#ultimate{padding:6px 8px;font-size:9px;gap:6px}#ultimate b{font-size:11px}.reward-caption{font-size:8px;margin:4px 0}.reward-meter{height:11px}.pet-caption{font-size:9px;margin-bottom:10px}.reward-center strong{font-size:8px}.reward-center small{font-size:9px}}@media(orientation:portrait) and (pointer:coarse){#reward-hud{visibility:hidden}}@media(prefers-reduced-motion:reduce){#ultimate:not(:disabled){animation:none}.reward-meter i{transition:none}}

/* Compact resources are drawn directly under health in the arena HUD. */
#reward-hud,#app[data-scene=play][data-paused=false] #reward-hud{inset:0;bottom:0;left:0;right:0;display:none;gap:0;pointer-events:none}
#app[data-scene=play][data-paused=false] #reward-hud{display:block}.reward-column{width:0;max-width:none}.reward-caption,.reward-meter,.reward-center,.pet-caption{display:none}#ultimate{position:absolute;display:flex;justify-content:center;gap:4px;padding:0;border-width:1px;border-radius:4px;min-height:0;line-height:1;background:linear-gradient(#654225,#2b1d26)}#ultimate b{font-size:inherit}#ultimate span{font-size:inherit}

/* Frozen impact frame distinguishes the five timing outcomes. */
#rhythm-hud[data-result=critical]{--result-color:#ffd35d}#rhythm-hud[data-result=perfect]{--result-color:#67f5a0}#rhythm-hud[data-result=counter]{--result-color:#75d5ff}#rhythm-hud[data-result=miss]{--result-color:#ff657b}#rhythm-hud[data-result=timeout]{--result-color:#e288ff}
#rhythm-hud[data-result]:not([data-result=""]) .timing-track{border-color:var(--result-color);box-shadow:0 0 20px var(--result-color),inset 0 0 10px var(--result-color)}#rhythm-hud[data-result]:not([data-result=""]) #rhythm-call{color:var(--result-color);text-shadow:0 0 12px var(--result-color),2px 2px #160d23;animation:rail-result-pop .26s ease-out}#rhythm-hud[data-result=critical] .timing-track{animation:rail-critical-hit .26s ease-out}#rhythm-hud[data-result=perfect] .timing-track{animation:rail-normal-hit .26s ease-out}#rhythm-hud[data-result=counter] .timing-track{animation:rail-counter-hit .26s ease-out}#rhythm-hud[data-result=miss] .timing-track{animation:rail-miss-hit .26s ease-out}#rhythm-hud[data-result=timeout] .timing-track{animation:rail-timeout-hit .26s ease-out}
@keyframes rail-result-pop{0%{transform:scale(1.22)}100%{transform:scale(1)}}@keyframes rail-critical-hit{0%{transform:translateY(-5px) scaleY(1.4)}30%{transform:translateX(5px)}60%{transform:translateX(-3px)}100%{transform:none}}@keyframes rail-normal-hit{0%{transform:scaleY(1.25)}100%{transform:none}}@keyframes rail-counter-hit{0%{filter:brightness(2);transform:scaleY(1.2)}100%{filter:none;transform:none}}@keyframes rail-miss-hit{20%{transform:translateX(-7px)}50%{transform:translateX(7px)}80%{transform:translateX(-3px)}100%{transform:none}}@keyframes rail-timeout-hit{0%{filter:brightness(1.7)}60%{filter:brightness(.6)}100%{filter:none}}@media(prefers-reduced-motion:reduce){#rhythm-hud[data-result] .timing-track,#rhythm-hud[data-result] #rhythm-call{animation:none!important}}

/* The moving marker and its burst now share the energy canvas. */
.timing-track i,.timing-track i::after{display:none}

.weapon-choices{display:flex;gap:7px}.weapon-choice{flex:1;border:1px solid #855e67;border-radius:7px;background:#21152c;color:#eacbb3;padding:7px 3px;cursor:pointer}.weapon-choice.selected{border-color:#ffd188;background:#49303b;box-shadow:inset 0 0 10px #e8b65c22}.weapon-choice span{font-size:20px;display:block}.weapon-choice small{font-size:9px;font-weight:800}@media(max-height:500px){.weapon-choice{padding:4px 2px}.weapon-choice span{font-size:16px}.weapon-choice small{font-size:8px}}

/* Animation and material inspection; available from the start menu only. */
#dev-test{display:none}#app[data-scene=menu] #dev-test,#app[data-scene=dev] #dev-test{display:block;font-size:21px;color:#fbd58d}
#app[data-scene=dev] .game-shell{aspect-ratio:auto;min-height:calc(100dvh - 110px)}#app[data-scene=dev] #overlay{position:relative;padding:14px;background:#140f20;display:block}#app[data-scene=dev] #game,#app[data-scene=dev] .vignette{position:absolute;visibility:hidden}
.dev-panel{width:100%;max-width:1200px;margin:auto}.dev-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.dev-header small{font-size:9px;letter-spacing:2px;color:#c0a3b5}.dev-header h2{font:700 clamp(18px,3vw,28px) Georgia;margin:6px 0;color:#ffe1a0}.dev-header .secondary{width:auto;margin:0;white-space:nowrap;padding:10px}
.dev-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:16px}.dev-stage{border:1px solid #78515b;border-radius:10px;overflow:hidden;background:#171424}.dev-stage canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.dev-stage #dev-frame-label{padding:10px;text-align:center;font:11px monospace;color:#dfc4a6}.dev-settings{min-width:0}.dev-options{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.dev-options label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#c0a9b9;flex:1;min-width:105px}.dev-options select{min-height:36px;width:100%}.dev-buttons,.dev-clips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.dev-buttons button,.dev-clips button,.dev-frame{border:1px solid #775165;border-radius:6px;background:#302037;color:#e9d1bb;padding:10px;font:700 10px system-ui;min-height:36px}.dev-clips button.selected{border-color:#eec27c;background:#644034;color:#ffe3ab}.dev-note{font-size:10px;line-height:1.6;color:#ba9fae}.dev-strip{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:8px}.dev-frame{padding:0;min-width:105px;background:repeating-conic-gradient(#211c30 0% 25%,#171424 0% 50%) 50%/16px 16px}.dev-frame canvas{display:block;width:105px;height:119px;image-rendering:pixelated}.dev-frame span{display:block;padding:7px;background:#2b1a31;font:9px monospace}
@media(max-width:700px){.dev-layout{grid-template-columns:1fr}.dev-stage{max-height:48dvh}.dev-stage canvas{height:calc(48dvh - 34px);object-fit:contain}.dev-header small{font-size:7px}.dev-header .secondary{font-size:8px;padding:8px}}@media(max-height:500px) and (min-width:701px){.dev-layout{grid-template-columns:1.1fr 1fr;gap:10px}.dev-stage canvas{max-height:65dvh;object-fit:contain}.dev-options{margin:8px 0}.dev-clips button,.dev-buttons button{padding:7px;min-height:30px}.dev-header{margin-bottom:8px}}

/* Keep the development panel inside an actual scroll container on fixed-height phones. */
#app[data-scene=dev] #overlay{position:absolute;inset:0;width:100%;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:calc(58px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.dev-animation-picker{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:#e6c78f;font:800 11px system-ui}.dev-animation-picker select{flex:1;min-height:44px;font-size:14px;max-width:420px;background:#3b263e;border-color:#d0a26e}.dev-clips button{min-height:44px;touch-action:manipulation}
/* Compact room controls use the battle UI's scale. */
#utility-controls{display:none}
#app[data-scene=menu] .overlay{padding:0;background:none;display:block;overflow:hidden}
#app[data-scene=menu] .vignette{opacity:.3}
.character-home{position:absolute;inset:0;pointer-events:none;color:#ffe4bc;--bar-height:40px;--slot-size:min(60px,calc((100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 30px)/6))}
.character-home button,.character-home .room-panel{pointer-events:auto}
.character-sidebar{position:absolute;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));bottom:calc(var(--bar-height) + 8px + env(safe-area-inset-bottom));width:48%;overflow:auto}
.room-panel{min-height:100%;padding:12px;border:1px solid #bc8a6488;background:linear-gradient(140deg,#30152cda,#24162ad9);border-radius:6px;box-shadow:0 4px 16px #12071855;overflow:auto;font:11px monospace}
.room-panel>small{font-size:9px;letter-spacing:2px;color:#c99c77}.room-panel h2{font:700 16px Georgia;color:#ffe0a4;margin:6px 0 12px}
.room-panel .difficulties{gap:6px}.room-panel .difficulty{min-width:0;padding:7px 4px}.room-panel .difficulty span{font-size:18px}.room-panel .difficulty strong{font-size:11px}.room-panel .difficulty small{font-size:8px}.room-panel .cta{font-size:11px;padding:10px}.room-panel .secondary{width:100%;font-size:10px;padding:8px}
.bottom-tabs{position:absolute;left:0;right:0;bottom:0;height:calc(var(--bar-height) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:4px;padding:3px max(8px,env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:linear-gradient(#341c2bf2,#1d1424fa);border-top:1px solid #ae7c52;pointer-events:auto}
.bottom-tabs button{height:32px;flex:0 0 auto;min-width:0;padding:4px 10px;border:1px solid transparent;border-radius:4px;background:none;color:#ffdeb0;font:18px Georgia;box-shadow:none;white-space:nowrap}.bottom-tabs button span{font:700 10px monospace;margin-left:5px}.bottom-tabs .selected{border-color:#daa16c;background:linear-gradient(#89513b70,#4e273d77)}
.tab-tools{margin-left:auto;display:flex;align-items:center;gap:3px}#room-utility{display:flex;gap:3px}.bottom-tabs .icon{width:32px;padding:3px;font-size:18px}.bottom-tabs .icon.active{color:#ffe7a5;border-color:#a27a5e}
.room-hero-switch{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:calc(var(--bar-height) + 8px + env(safe-area-inset-bottom));display:flex;gap:4px}.room-hero-switch button{background:#291629bb;color:#d8b6a0;border:1px solid #94745f;border-radius:4px;padding:5px 10px;font:10px monospace}.room-hero-switch .selected{border-color:#ffe2a0;color:#ffe6b5}
.equipment-slots{position:absolute;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));bottom:calc(var(--bar-height) + 8px + env(safe-area-inset-bottom));display:grid;grid-template-rows:repeat(6,minmax(0,1fr));align-items:center;gap:6px}
.equipment-slot{position:relative;width:var(--slot-size);height:var(--slot-size);flex-shrink:0;display:grid;place-items:center;border:2px solid #af8256;border-radius:8px;background:radial-gradient(ellipse at 50% 30%,#7650447a,#211725dc 75%),linear-gradient(135deg,#6d4155,#271c2c);box-shadow:inset 0 0 0 2px #2c1628,inset 0 0 0 3px #c7a07055,inset 0 2px 12px #0009,0 3px 8px #16071666;color:#ca9c6e;cursor:pointer}
.equipment-slot:before,.equipment-slot:after{content:'◆';position:absolute;font-size:8px;color:#ddbd82;top:-5px;left:calc(50% - 4px)}.equipment-slot:after{top:auto;bottom:-5px}.equipment-slot svg{width:53%;height:53%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7;filter:drop-shadow(0 2px 1px #100716)}.equipment-slot span{position:absolute;left:calc(100% + 7px);font-size:10px;white-space:nowrap;text-shadow:0 1px 4px #000;background:#23152999;padding:3px 5px;border-radius:3px}.visible-slots span{top:calc(100% + 4px);left:50%;transform:translateX(-50%)}.equipment-slot.selected{border-color:#ffdf8e;box-shadow:0 0 15px #f7b74755,inset 0 0 12px #ce895f44}.equipment-slot.occupied{color:#ffe0a0}.equipment-slot i{position:absolute;right:4px;bottom:4px;font-size:9px}
.inventory-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0;color:#c0a3b5;min-height:100px}.inventory-empty svg{width:56px;height:56px;stroke:#b48c61;fill:none;stroke-width:1.2;opacity:.55;margin-bottom:16px}.inventory-empty strong{font:13px Georgia;color:#e6c29e}.inventory-empty p{font-size:11px;line-height:1.5}.inventory-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid #937356;border-radius:7px;background:#3c2639;color:#ffe1ac;margin:5px 0}.inventory-item svg{width:32px;fill:none;stroke:currentColor;stroke-width:1.5}.inventory-item small{margin-left:auto;font-size:9px}
.item-modal-backdrop{position:absolute;inset:0;background:#130a20a8;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:24px;z-index:9}.item-dialog{position:relative;width:min(360px,90%);max-height:85%;overflow:auto;text-align:center;padding:24px;border:2px solid #c89b65;border-radius:12px;background:linear-gradient(#47263f,#201626);box-shadow:0 12px 50px #0009}.item-dialog>svg{width:64px;height:64px;fill:none;stroke:#e6bc7d;stroke-width:1.5;display:block;margin:0 auto 12px}.item-dialog>small{font-size:10px;letter-spacing:2px;color:#bd9978}.item-dialog h2{font:16px Georgia;margin:12px}.item-dialog p{font-size:11px;color:#ccb2c2}.item-dialog .cta,.item-dialog .secondary{width:100%}.item-close{position:absolute;right:10px;top:10px;border:0;background:none;color:#ffdca0;padding:8px;font-size:14px}.item-stat{display:flex;justify-content:space-between;margin:8px 0;font-size:11px}

.settings-panel #settings-controls{display:flex;flex-direction:column;gap:8px}.settings-panel .icon{width:100%;height:34px;text-align:left;font:11px monospace;padding:8px;color:#ffe0b0;border:1px solid #a27a5e;border-radius:4px}.settings-panel .icon:disabled{opacity:.45;cursor:default}
#battle-pause{display:none;position:absolute;right:calc(15px + env(safe-area-inset-right));top:calc(85px + env(safe-area-inset-top));z-index:7;border:1px solid #b8986b;border-radius:6px;background:#21182caa;color:#ffdfa4;width:36px;height:36px;font-size:20px}#app[data-scene=play] #battle-pause{display:block}
@media(orientation:portrait){.room-panel{padding:8px}.room-panel .difficulties{flex-direction:column}.equipment-slot span{font-size:8px;padding:2px}.bottom-tabs button{padding:4px 6px}.bottom-tabs button span{font-size:9px}.character-sidebar{width:47%}}

/* Explicit centering avoids inherited button typography offsets. */
.bottom-tabs>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1;padding:0 10px}.bottom-tabs>button>i{display:block;font:normal 18px/1 Georgia}.bottom-tabs>button>span{display:block;margin:0;line-height:1}.bottom-tabs .icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}

/* Rolled equipment retains the same rarity treatment in every view. */
.rarity-item{border-color:var(--item-color,#eee8df)!important;background:var(--item-background,#25242b)!important;color:var(--item-color,#eee8df)}
.equipment-slot.occupied img{width:86%;height:86%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 3px #0009)}
.equipment-slot.occupied:before,.equipment-slot.occupied:after{color:var(--item-color)}
.equipment-slot.occupied.selected{box-shadow:0 0 12px var(--item-color),inset 0 0 0 2px #110d1c}
.inventory-items{display:flex;flex-direction:column;gap:5px}.inventory-item{margin:0;padding:6px;min-height:50px;text-align:left;font:11px monospace;gap:8px}.inventory-icon{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center}.inventory-icon img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.inventory-name{min-width:0;flex:1;overflow-wrap:anywhere}.inventory-name small{display:block;margin:4px 0 0;color:#d2bed4;font-size:9px}.inventory-item .item-equipped{font-size:8px;max-width:68px;text-align:right;white-space:normal;color:#f1e6d0}
.item-dialog>img{display:block;width:76px;height:76px;object-fit:contain;image-rendering:pixelated;margin:0 auto 10px;filter:drop-shadow(0 3px 8px #000b)}.item-dialog>small{color:var(--item-color);letter-spacing:0;line-height:1.5}.item-dialog h2{color:var(--item-color);line-height:1.3;overflow-wrap:anywhere}.item-stat{gap:12px;text-align:left;color:#d7d3e5;line-height:1.4}.item-stat b{white-space:nowrap;color:#f4e6b6}.item-dialog .cta,.item-dialog .secondary{font-size:10px;padding:9px}.item-close{color:var(--item-color)}
.room-profile{font:10px monospace;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #bc8a644d}.room-profile b{font-size:11px;color:#f1d6aa}.profile-gold{color:#f6d36e;font-size:10px}.profile-xp{height:5px;overflow:hidden;margin:7px 0 4px;border:1px solid #7585b4;background:#161523}.profile-xp i{height:100%;display:block;background:linear-gradient(90deg,#536abb,#a4d9ff);transition:width .25s}.room-profile>small{font-size:8px;color:#b9b2ca}.profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:9px;color:#d1c0d1;font-size:9px}#dev-loot-result{font:10px/1.5 monospace;min-height:16px;margin-top:5px;overflow-wrap:anywhere}#dev-give-item{font-size:10px;padding:9px}
@media(max-width:500px){.profile-stats{grid-template-columns:1fr}.inventory-item{flex-wrap:wrap}.inventory-item .item-equipped{max-width:none;margin-left:48px}.inventory-icon{width:32px;height:32px}.inventory-name{font-size:10px}.item-modal-backdrop{padding:12px}.item-dialog{width:min(360px,100%);max-height:94%;padding:18px}}

#app[data-scene=reward] #rhythm-input,#app[data-scene=reward] #rhythm-hud,#app[data-scene=reward] #reward-hud{display:none}
#app[data-scene=reward] .overlay{display:block;padding:0;background:none;pointer-events:none}
.reward-scene{position:absolute;inset:0;pointer-events:none}.reward-scene button,.chest-loot-panel{pointer-events:auto}
#reward-chest{position:absolute;background:none;border:0;color:#ffe2a0;font:700 9px monospace;text-shadow:0 2px 4px #000;display:flex;align-items:flex-start;justify-content:center;padding:12px 0 0;cursor:pointer}#reward-chest:disabled{cursor:default}
.chest-loot-panel{position:absolute;right:max(8px,env(safe-area-inset-right));top:21%;bottom:12%;width:31%;padding:12px;border:1px solid #b99263;background:#25162be8;border-radius:6px;overflow:auto;color:#ffe1ad;font:11px monospace}.chest-loot-panel h2{font:700 16px Georgia;margin:8px 0}.chest-loot-panel>small{font-size:9px;letter-spacing:1px;color:#cba879}.chest-loot-panel p{font:10px/1.5 monospace;color:#cdb4c6}.chest-loot-panel .cta,.chest-loot-panel .secondary{width:100%;font-size:10px;padding:8px}@keyframes loot-pop{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}

.chest-loot-panel{width:28%}

/* Character totals and equipment contributions live in their own tab. */
.character-values h3{font:700 11px monospace;color:#f2d1a0;margin:14px 0 6px}.character-stat-table{width:100%;border-collapse:collapse;table-layout:fixed;font:10px/1.4 monospace}.character-stat-table th:first-child{width:46%;text-align:left}.character-stat-table th,.character-stat-table td{padding:5px 4px;border-bottom:1px solid #bc8a642b;text-align:right;overflow-wrap:anywhere}.character-stat-table thead th{font-weight:400;font-size:9px;color:#bda9be}.character-stat-table tbody th{font-weight:400;color:#d9c7d4}.character-stat-table td{font-variant-numeric:tabular-nums;color:#c0b0c6}.character-stat-table .stat-items{color:#8fd9a7}.character-stat-table .stat-total{font-weight:700;color:#ffe0a8}@media(max-width:600px){.character-stat-table{font-size:9px}.character-stat-table th,.character-stat-table td{padding:5px 2px}.character-stat-table th:first-child{width:40%}.character-stat-table thead th{font-size:8px}.bottom-tabs>button{padding:0 6px;gap:4px}}
@media(max-width:500px){.bottom-tabs{gap:2px}.bottom-tabs>button{padding:0 4px;gap:3px}.bottom-tabs>button>i{font-size:16px}.bottom-tabs>button>span{font-size:8px}.bottom-tabs .icon{width:28px}.tab-tools,#room-utility{gap:2px}}

/* Compact, scrollable item details with a fixed edge close control. */
#app *{scrollbar-width:none}#app *::-webkit-scrollbar{display:none}
.item-dialog{width:min(350px,100%);max-height:calc(100% - 8px);padding:0;overflow:visible;text-align:left;border-radius:6px;display:flex;flex-direction:column}
.item-popup-scroll{padding:12px;overflow:auto;min-height:0;max-height:min(520px,calc(100dvh - 72px));overscroll-behavior:contain;border-radius:4px}
.item-popup-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.item-popup-header>div:last-child{min-width:0;flex:1}.item-popup-header h2{font:700 15px/1.25 Georgia;margin:0 0 4px;text-align:left}.item-popup-header small{font:9px/1.4 monospace;color:var(--item-color)}.item-popup-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center}.item-popup-icon img,.item-popup-icon svg{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.item-popup-icon svg{fill:none;stroke:var(--item-color);stroke-width:1.5}
.item-popup-stats{margin:5px 0 10px}.item-popup-stats .item-stat{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:baseline;margin:0;padding:4px 0;font:10px/1.4 monospace}.item-popup-stats .item-stat>span{overflow-wrap:anywhere}.item-popup-stats .item-stat>b{font-weight:700;text-align:right;white-space:nowrap}.item-delta{min-width:46px;text-align:right;white-space:nowrap;font-size:9px;font-variant-numeric:tabular-nums}.item-delta.positive{color:#78db95}.item-delta.negative{color:#ff7f8f}.item-delta.neutral{color:#968b9e}.item-popup-stats .missing-stat{color:#968b9e}
.item-dialog .item-close{position:absolute;right:-10px;top:-10px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid var(--item-color);border-radius:5px;background:var(--item-background);color:var(--item-color);box-shadow:0 2px 8px #0009;z-index:2;font:14px/1 monospace}.item-popup-scroll .cta{margin:2px 0 0;padding:8px;font-size:10px}
@media(max-width:500px){.item-popup-scroll{padding:10px}.item-popup-header{gap:8px}.item-popup-header h2{font-size:14px}.item-popup-stats .item-stat{gap:6px;font-size:9px}.item-delta{min-width:42px}}

/* Compact item grid; rarity frames and unread dots stay visible at any column count. */
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,54px);gap:6px;align-items:start}.inventory-grid .inventory-tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;min-height:0;height:auto;padding:5px;margin:0;border-radius:5px;overflow:visible}.inventory-grid .inventory-icon{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1}.inventory-grid .inventory-icon img{width:100%;height:100%;object-fit:contain}.item-new-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;background:#ff3e53;border:1px solid #ffd0d4;border-radius:50%;box-shadow:0 0 6px #ff3e5399;pointer-events:none}@media(max-width:500px){.inventory-grid{grid-template-columns:repeat(auto-fill,46px);gap:6px}.inventory-grid .inventory-tile{padding:4px}}

.character-sidebar{width:60%}
.item-level{position:absolute;bottom:2px;right:2px;padding:1px 3px;border-radius:2px;background:#130e20dc;color:#ffe7bd;font:700 8px/1.2 monospace;white-space:nowrap;pointer-events:none}

@font-face{font-family:RoyalSans;src:url("assets/fonts/royal-sans.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:RoyalSans;src:url("assets/fonts/royal-sans-bold.woff") format("woff");font-weight:700;font-display:swap}
.character-home,.character-home button,.character-home small,.character-home strong,.character-home h2,.character-home p,.character-home span,.character-home th,.character-home td,.character-home b,.character-home .item-stat,.character-home .item-level{font-family:RoyalSans,"Helvetica Neue",Arial,sans-serif!important}
.character-home .room-panel,.character-home .bottom-tabs>button{letter-spacing:0}

#app[data-scene]:not([data-scene="play"]) #overlay,#app[data-scene]:not([data-scene="play"]) #overlay button,#app[data-scene]:not([data-scene="play"]) #overlay p,#app[data-scene]:not([data-scene="play"]) #overlay h2,#app[data-scene]:not([data-scene="play"]) #overlay small{font-family:RoyalSans,"Helvetica Neue",Arial,sans-serif}

.difficulty-info{font-size:10px;line-height:1.5;color:#cfbacd;margin:8px 0;text-align:center}

.inventory-heading,.inventory-heading>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.inventory-heading h2{margin-right:auto}.inventory-count{font-size:11px;color:#cdb4c6;white-space:nowrap}.inventory-back{width:30px;height:30px;padding:0;font-size:20px}.chest-loot-list .inventory-grid{padding:6px 0}.chest-loot-list .inventory-tile{animation:loot-pop .3s ease-out}.reward-scene .item-modal-backdrop{pointer-events:auto}
/* Crafting shares the inventory's rarity frames, tiles and item dialogs. */
.character-sidebar.crafting-sidebar{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;overflow:hidden;background:#221625;border:1px solid #b3956b;border-radius:7px}
.crafting-window{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;height:100%;margin:0;padding:14px;overflow:hidden;background:linear-gradient(120deg,#231827f5,#352235f8);border:0;border-radius:7px}
.craft-left,.craft-right{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}.craft-left{padding-right:12px;border-right:1px solid #b3956b44}.craft-left::-webkit-scrollbar,.craft-right::-webkit-scrollbar{display:none}
.crafting-window h2{font-size:17px;margin:0 0 10px}.crafting-window h3{font-size:13px;margin:8px 0 4px}.crafting-window small{font-size:10px;line-height:1.5}.crafting-window p{font-size:11px;line-height:1.5;margin:8px 0;color:#ddd1df}
.craft-item-slot{width:68px;height:68px;background:var(--item-background,#1b1521);border:1px solid var(--item-color,#ad956e);border-radius:6px;padding:5px;display:grid;place-items:center}.craft-item-slot img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.craft-item-slot>span{font-size:28px;color:#d2b87d}
.craft-attributes{display:grid;gap:4px;margin-top:10px}.craft-attributes button{display:flex;justify-content:space-between;gap:8px;text-align:left;align-items:center;padding:7px;font-size:11px;color:#eadfe9;background:#171221aa;border:1px solid #78607866;border-radius:4px}.craft-attributes button.selected{border-color:#ffe09a;background:#53402b}.craft-attributes button b{white-space:nowrap;color:#edddbf}.craft-attributes button:disabled{opacity:.7;color:#b8a9c7}
.craft-resources{grid-template-columns:repeat(auto-fill,54px);gap:6px;align-content:start}.craft-resources .inventory-tile{width:54px;height:54px}.craft-resources .selected{box-shadow:0 0 0 2px #ffe6a6,0 0 12px var(--item-color)}.resource-empty .inventory-icon{opacity:.4}.resource-empty .item-level{color:#a095a7}
.craft-explanation{margin-top:12px;padding:9px;background:#100b17aa;border-radius:5px;font-size:11px}.craft-explanation .cta,.craft-imprint .secondary{width:100%;padding:8px;font-size:10px;margin-top:6px}.craft-explanation>small{display:block;color:#c8a6ac}.craft-result{color:#ffd580!important}.craft-imprint{margin-top:9px;padding:7px;border:1px solid #ffd57577;color:#ffd575;font-size:11px}.item-actions{display:flex;gap:8px}.item-actions>button{flex:1;padding:8px;font-size:10px}.item-actions>button:disabled,.craft-explanation>button:disabled{opacity:.4;cursor:default}.resource-description{font-size:12px;line-height:1.6;margin:4px 0 12px}.item-popup-scroll p{font-size:11px;line-height:1.5}.craft-right .inventory-heading h2{margin:0}.craft-right .inventory-heading{margin-bottom:10px}
@media(max-height:480px){.crafting-window{padding:9px;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.craft-item-slot{width:52px;height:52px}.craft-resources .inventory-tile{height:54px}.crafting-window h2{font-size:14px}.craft-attributes button{padding:5px}.bottom-tabs button{padding:5px 9px}}
.elite-enemy-choices{display:flex;gap:8px;margin:12px 0}.elite-enemy-choices button{flex:1;margin:0}.elite-enemy-choices .selected{border-color:#ffd575;background:#6d502e88;color:#ffe5a0}.dialog .difficulties{justify-content:center;margin:12px 0}.dialog .difficulties .difficulty{flex:1;min-width:0;padding:10px}.dialog .difficulties .difficulty strong{font-size:12px}.dialog .difficulties .difficulty span{font-size:22px}

.craft-slots{display:flex;align-items:center;gap:16px;margin-bottom:10px}.craft-slots .craft-item-slot{width:54px;height:54px}.craft-resource-slot:disabled{opacity:.5}.craft-attributes button span{color:inherit;line-height:1.4}.craft-attributes button:disabled{opacity:1;color:#b8a9c7;background:#231b30}.craft-attributes button.selected{color:#fff0cb}.craft-resource-empty{grid-column:1/-1;margin:0}.craft-right{max-width:100%}
.dismantle-stage{position:relative;height:132px;display:grid;place-items:center;overflow:hidden;margin:4px 0}.dismantle-item{width:76px;height:76px;animation:item-shatter .75s cubic-bezier(.3,.05,.8,.5) forwards}.dismantle-item img,.dismantle-item svg{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.dismantle-item svg{fill:none;stroke:var(--item-color);stroke-width:1.5}.dismantle-flash{position:absolute;left:50%;top:50%;width:14px;height:14px;border:2px solid var(--item-color);border-radius:50%;box-shadow:0 0 24px var(--item-color);animation:shatter-ring .7s .16s both}.dismantle-particle{position:absolute;left:50%;top:50%;width:4px;height:7px;background:var(--item-color);box-shadow:0 0 6px var(--item-color),0 0 12px var(--item-color);animation:shatter-spark .8s var(--delay) both}.dismantle-particle:nth-child(3n){width:3px;height:3px;background:#fff3cb}.dismantle-outcome{animation:shatter-rewards .28s .9s both;text-align:center}.dismantle-outcome>strong{font-size:12px;color:#f5dfb8}.dismantle-outcome .inventory-grid{justify-content:center;margin-top:10px}.dismantle-reward-labels p{display:flex;justify-content:space-between;gap:8px;text-align:left;margin:8px 0;font-size:11px}.dismantle-reward-labels b{color:#f5dfb8;white-space:nowrap}.dismantle-dialog .item-actions{animation:shatter-rewards .2s .9s both}
@keyframes item-shatter{0%{transform:scale(1);filter:brightness(1);opacity:1}20%{transform:translateX(-3px) rotate(-5deg)}35%{transform:translateX(4px) rotate(7deg);filter:brightness(2)}48%{transform:scale(1.15);filter:brightness(4);opacity:1}100%{transform:scale(.12) rotate(32deg);filter:brightness(1);opacity:0}}
@keyframes shatter-ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(12);opacity:0}}
@keyframes shatter-spark{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.2);opacity:0}}
@keyframes shatter-rewards{from{opacity:0;transform:translateY(8px);visibility:hidden}to{opacity:1;transform:translateY(0);visibility:visible}}
@media(max-width:500px){.craft-resources{grid-template-columns:repeat(auto-fill,46px)}.craft-resources .inventory-tile{width:46px;height:46px}.craft-attributes button{font-size:10px}.craft-slots{gap:10px}}
@media(prefers-reduced-motion:reduce){.dismantle-item,.dismantle-particle,.dismantle-flash{animation-duration:.01s;animation-delay:0s}.dismantle-outcome,.dismantle-dialog .item-actions{animation-delay:0s}}

.craft-item-header{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.craft-slots .craft-item-slot{flex-shrink:0}.craft-item-heading{min-width:0}.craft-item-heading h3{font-size:13px;line-height:1.3;margin:0 0 4px}.craft-item-heading small{font-size:9px;line-height:1.4}.craft-attributes button{display:grid;grid-template-columns:minmax(0,1fr) auto auto}.craft-roll-tier{font-size:9px;color:#d1b583;white-space:nowrap}.craft-result:empty{display:none}@media(max-width:500px){.craft-item-header{gap:6px}.craft-item-heading h3{font-size:11px}.craft-item-heading small{font-size:8px}.craft-slots .craft-item-slot{width:46px;height:46px}.craft-roll-tier{font-size:8px}}

/* Item and rewards share one stage; only the burst is clipped. */
.dismantle-stage{height:150px;overflow:visible;margin:6px 0}.dismantle-item,.dismantle-outcome{grid-area:1/1}.dismantle-burst{position:absolute;inset:-12px;overflow:hidden;pointer-events:none;animation:dismantle-jolt .38s .24s both}.dismantle-outcome{width:100%;animation:shatter-rewards .32s .82s both}.dismantle-outcome .inventory-grid{margin:8px 0 0;gap:12px}.dismantle-reward-labels{animation:shatter-rewards .3s .82s both}.dismantle-particle{animation:shatter-spark var(--duration) var(--delay) both}.dismantle-particle:nth-child(4n){width:2px;height:14px}.dismantle-particle:nth-child(7n){width:8px;height:8px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#fff4d4;box-shadow:0 0 16px var(--item-color)}.dismantle-flash{width:64px;height:64px;border:0;background:radial-gradient(circle,#fff8e9 0,#ffedbd 15%,var(--item-color) 28%,transparent 70%);box-shadow:none;animation:dismantle-flare .5s .25s both}.dismantle-shockwave{position:absolute;left:50%;top:50%;width:26px;height:26px;border:3px solid #fff0ce;border-radius:50%;box-shadow:0 0 15px var(--item-color),inset 0 0 8px var(--item-color);animation:shatter-ring .65s .27s both}.dismantle-item{animation:item-shatter .62s cubic-bezier(.3,.05,.8,.5) forwards}.dismantle-resource-modal{position:absolute;inset:0;z-index:10;pointer-events:none}.dismantle-resource-modal .item-modal-backdrop{background:#130a2080}.dismantle-dialog .item-actions{animation-delay:.82s}@keyframes dismantle-flare{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}18%{transform:translate(-50%,-50%) scale(2.8);opacity:1}100%{transform:translate(-50%,-50%) scale(3.7);opacity:0}}@keyframes dismantle-jolt{0%,100%{transform:translate(0)}20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}65%{transform:translate(-2px,1px)}}@media(prefers-reduced-motion:reduce){.dismantle-burst,.dismantle-shockwave,.dismantle-flash,.dismantle-particle{animation:none;display:none}.dismantle-item{animation-duration:.01s}.dismantle-outcome,.dismantle-reward-labels,.dismantle-dialog .item-actions{animation-delay:0s}}

.craft-slot-wrap{position:relative;flex-shrink:0;display:flex}.craft-slot-clear{position:absolute;top:-9px;left:-9px;z-index:1;width:26px;height:26px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#f9e9cc;font-size:17px;line-height:1;touch-action:manipulation}.craft-slot-clear:before{content:"";position:absolute;inset:4px;z-index:-1;border:1px solid #967258;border-radius:50%;background:#291c2d;box-shadow:0 1px 4px #0009}.craft-slot-clear:hover:before,.craft-slot-clear:active:before{background:#65354c;border-color:#f5d08e}

#app #rhythm-hud[data-phase=recover] .timing-track{opacity:1;background:#17151d}#rhythm-hud[data-phase=recover] #energy-rail{opacity:1}#rhythm-hud[data-phase=recover] .timing-window,#rhythm-hud[data-phase=duel] .timing-window{transform:none}#rhythm-hud[data-phase=recover]>small,#rhythm-hud[data-phase=duel]>small{visibility:hidden}

.chest-bonus{display:block;margin:4px 0 8px;color:#ffd47c;font-size:10px;letter-spacing:.5px}
/* Journey, saves and reward presentation. */
[hidden]{display:none!important}.inventory-icon{position:relative;isolation:isolate;overflow:visible}.inventory-icon>img,.inventory-icon>svg{position:relative;z-index:1}.item-rarity-glow{position:absolute;inset:-9%;z-index:0;background-image:var(--item-aura);background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;image-rendering:pixelated;opacity:.65;transform:rotate(var(--glow-rotation,0deg));animation:loot-aura 4s ease-in-out infinite;animation-delay:var(--glow-delay,0s);pointer-events:none}.inventory-tile .inventory-icon{overflow:visible}.chest-loot-list .inventory-tile{animation:none}.chest-loot-list .reward-new-item .inventory-tile{animation:loot-pop .32s ease-out}.reward-new-item{display:contents}.reward-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.reward-totals>div{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid #b3956b66;background:#160f2280;border-radius:6px}.reward-totals img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}.reward-totals b{font-size:19px;color:#f9dda6}.reward-totals span{font-size:10px}.settings-panel{min-height:100%}.settings-range{display:grid;grid-template-columns:1fr auto;gap:7px;margin:16px 0;font-size:12px}.settings-range input{grid-column:1/-1;width:100%;accent-color:#e6b574;min-height:25px}.settings-range output{color:#f2d9a9}.settings-check{display:flex;align-items:center;gap:9px;font-size:11px;margin:13px 0;line-height:1.5}.settings-check input{accent-color:#e6b574;width:18px;height:18px;flex-shrink:0}.dev-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.dev-form label{display:flex;flex-direction:column;gap:5px;font-size:11px}.dev-form input,.dev-form select{width:100%;min-height:32px;font-size:11px;background:#281b31;color:#f5dfc9;border:1px solid #8e6b69;border-radius:5px;padding:6px}.save-list{display:grid;gap:9px;margin:10px 0}.save-card{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:9px;border:1px solid #816271;border-radius:6px;padding:6px;background:#211729}.save-card.selected{border-color:#edbf7d;box-shadow:inset 0 0 16px #d3a56614}.save-card canvas{width:80px;height:110px;image-rendering:pixelated}.save-card h3{font-size:14px;color:#f6d699;margin:0 0 4px}.save-card small,.save-card p{font-size:10px;line-height:1.5}.save-card p{margin:6px 0;color:#c8b2c8}.save-actions{display:flex;gap:6px}.save-actions .secondary{margin:0;padding:7px;flex:1}.save-actions .icon{width:31px;height:31px;flex-shrink:0}#settings-modal{position:fixed;inset:0;z-index:12;pointer-events:none}#settings-modal .item-modal-backdrop{pointer-events:auto}.delete-actions{display:flex;gap:10px;align-items:center}.delete-actions .secondary{margin:0}.settings-back{width:29px;height:29px;font-size:20px}.settings-panel>.secondary{margin-top:12px}
#app[data-scene=creation] #overlay,#app[data-scene=levelup] #overlay{padding:0;background:none;display:block;overflow:hidden}#app[data-scene=creation] .vignette{opacity:.4}.creation-scene{position:absolute;inset:0}.royal-title{position:absolute;top:3%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:70%}.royal-title small{font-size:9px;letter-spacing:4px;color:#f2dbb4;text-shadow:0 2px 4px #120b28}.royal-title h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(33px,6vw,70px);line-height:1;margin:7px 0 3px;color:#ffe4a3;text-shadow:0 2px #9d6737,0 4px #543448,0 0 26px #be784666;font-weight:900;letter-spacing:1px}.royal-title>i{font-size:20px;color:#ffcf6f}.creation-hero-hit{position:absolute;top:30%;bottom:17%;width:23%;padding:0;background:none;border:0;color:#f9e7c9;touch-action:manipulation}.creation-hero-hit:after{content:"";position:absolute;bottom:1%;left:17%;right:17%;height:5%;border-radius:50%;background:#ffdf8900;transition:.25s}.creation-hero-hit.selected:after{background:#ffdf893a;box-shadow:0 0 18px #ffe1997a}.creation-hero-hit span{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:2px;text-shadow:0 2px 5px #1f112b;background:#21152a99;border:1px solid #d3a76d77;border-radius:5px;margin:0 auto;padding:4px;width:max-content;min-width:80px}#creation-princess{left:21.5%}#creation-prince{right:21.5%}.creation-form{position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);width:min(250px,26%);background:#221629dc;border:1px solid #bf9968;border-radius:8px;padding:10px;box-shadow:0 6px 20px #11082088}.creation-form label{font-size:10px;color:#ddc4d5;display:block;margin-bottom:4px}.creation-form input{background:#140e20;color:#ffe7ba;border:1px solid #907075;border-radius:5px;width:100%;font:13px RoyalSans,Arial;padding:7px;min-height:30px;text-align:center}.creation-form .cta{font-size:10px;letter-spacing:1px;margin-top:7px;padding:9px 5px}.creation-form .secondary{font-size:8px;padding:6px}.creation-difficulty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5%;background:radial-gradient(ellipse at center,#40253dec,#120c20f5);backdrop-filter:blur(5px)}.creation-difficulty h2{font-size:28px;color:#ffe0a1;margin:0 0 7px}.creation-difficulty p{font-size:12px;color:#ddc4d5}.creation-difficulty .difficulties{width:min(740px,90%);gap:14px;margin:22px 0}.creation-difficulty .difficulty{padding:20px 12px}.creation-difficulty .difficulty span{font-size:34px;color:#f9d5a0}.creation-difficulty .difficulty strong{font-size:17px;margin:10px 0}.creation-difficulty .difficulty small{font-size:10px;line-height:1.6}.creation-difficulty>.secondary{width:150px}.levelup-scene{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 35%,#170e2740)}.levelup-display{position:absolute;left:41%;right:3%;top:12%;bottom:20%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;isolation:isolate;animation:level-enter .65s ease-out both}.levelup-display small{font-size:10px;letter-spacing:3px;color:#ffeab8}.levelup-display h2{font-size:clamp(20px,3vw,36px);color:#ffe3a0;margin:10px 0;text-shadow:0 0 25px #e69e40}.levelup-display>strong{font:900 clamp(65px,12vw,145px) Georgia;color:#fff0bc;line-height:1;animation:level-number .85s .15s both;text-shadow:0 3px #9f613a,0 0 40px #f4c55f88}.levelup-display p{font-size:12px;color:#f3d9ad;margin:9px 0 0;text-shadow:0 2px 5px #21132c}.levelup-rays{position:absolute;inset:-8%;z-index:-1;background:#ffcf70;mask:url('assets/loot-glow.png') center/contain no-repeat;-webkit-mask:url('assets/loot-glow.png') center/contain no-repeat;opacity:.45;animation:level-rays 7s linear infinite}#levelup-continue{position:absolute;right:5%;bottom:7%;width:180px;pointer-events:auto;animation:loot-pop .35s ease-out both}
@keyframes loot-aura{0%,100%{transform:rotate(calc(var(--glow-rotation,0deg) - 8deg)) scale(.92);opacity:.52}50%{transform:rotate(calc(var(--glow-rotation,0deg) + 8deg)) scale(1.08);opacity:.76}}@keyframes level-enter{0%{opacity:0;transform:translateY(25px) scale(.8)}70%{opacity:1;transform:scale(1.04)}100%{transform:none}}@keyframes level-number{0%{opacity:0;transform:scale(2.1);filter:brightness(3)}55%{opacity:1;transform:scale(.88)}80%{transform:scale(1.09)}100%{transform:scale(1)}}@keyframes level-rays{to{transform:rotate(360deg)}}@media(max-height:450px){.creation-form{padding:6px;bottom:2%;width:24%}.creation-form .cta{padding:6px;font-size:8px}.creation-form input{padding:4px;min-height:24px;font-size:11px}.royal-title small{font-size:7px}.royal-title h1{margin:4px 0}.royal-title>i{font-size:14px}.creation-hero-hit span{font-size:10px}.creation-difficulty .difficulty{padding:10px 6px}.creation-difficulty .difficulty span{font-size:25px}.creation-difficulty .difficulty strong{font-size:13px}.save-card canvas{width:65px;height:90px}.save-card{grid-template-columns:65px 1fr}.settings-range{margin:10px 0}.levelup-display p{font-size:10px}.reward-totals img{width:32px;height:32px}.reward-totals b{font-size:15px}}@media(prefers-reduced-motion:reduce){.item-rarity-glow,.levelup-display,.levelup-display>strong,.levelup-rays{animation:none}.creation-hero-hit:after{transition:none}}

.creation-form{width:min(240px,22%)}

#app[data-scene=creation][data-fullscreen=true] .rotate-prompt{display:none}

.chest-loot-list .item-rarity-glow{animation:loot-aura 4s ease-in-out infinite,loot-aura-frames .5714286s steps(1,end) infinite;animation-delay:var(--glow-delay,0s),var(--glow-delay,0s)}
@keyframes loot-aura-frames{0%,100%{background-position:0 0}25%{background-position:100% 0}50%{background-position:0 100%}75%{background-position:100% 100%}}
@media(prefers-reduced-motion:reduce){.chest-loot-list .item-rarity-glow{animation:none}}

.item-unidentified{color:#d5bed9;font-size:12px;line-height:1.6}.item-unidentified-badge{position:absolute;top:0;left:0;z-index:3;background:#24182de8;border:1px solid #d5bc90;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;color:#ffe2a6;font-size:12px}

.item-actions{align-items:stretch}.item-actions>button{margin:0;min-width:0;display:flex;align-items:center;justify-content:center}

/* Let every item list fill its available width with compact, equal columns. */
.inventory-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(54px,5.6vw,68px)),1fr));gap:6px}
.inventory-grid .inventory-tile,.craft-resources .inventory-tile{width:100%;height:auto;aspect-ratio:1;padding:4px}
.crafting-window{gap:12px;padding:10px}.craft-left{padding-right:9px}
.craft-resource-empty{grid-column:1/-1}
.save-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
@media(max-height:500px){.inventory-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(52px,5.6vw,64px)),1fr));gap:5px}.inventory-grid .inventory-tile{padding:3px}.crafting-window{gap:8px;padding:8px}.craft-left{padding-right:7px}}
/* Element colors surround the action panel with the same sprite materials. */
#rhythm-hud[data-status]:not([data-status=""]){isolation:isolate;--status-color:#a5e9ff;border-color:var(--status-color);box-shadow:0 0 18px color-mix(in srgb,var(--status-color) 55%,transparent)}
#rhythm-hud[data-status=fire]{--status-color:#ff8538}#rhythm-hud[data-status=poison]{--status-color:#9dff58}#rhythm-hud[data-status=lightning]{--status-color:#ffe96d}
#rhythm-hud[data-status=ice] .timing-track{opacity:1}#rhythm-hud[data-status=ice] .timing-window{transform:none!important}
/* Sprite atlas: flames, dripping liquid, lightning and crystal fracture frames. */
#app #rhythm-hud .timing-track{overflow:visible}#app #rhythm-hud .timing-window{overflow:visible}#energy-rail{position:absolute;left:0;top:-28px;width:100%;height:76px}
#rhythm-hud[data-status]:not([data-status=""])::before{content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:inherit;background-image:url('assets/status-vfx-v2.png');background-size:800% 800%;background-repeat:no-repeat;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;clip-path:none;border:0;padding:5px;animation:status-sprite 0.65s step-end infinite;filter:drop-shadow(0 0 5px var(--status-color));opacity:.85}
#rhythm-hud[data-status=fire]::before{background-position-y:85.714%}#rhythm-hud[data-status=poison]::before{background-position-y:28.571%}#rhythm-hud[data-status=lightning]::before{background-position-y:42.857%;animation-duration:.45s}#rhythm-hud[data-status=ice]::before{background-position:0% 57.143%;animation:none}
@keyframes status-sprite{0%{background-position-x:0%}12.5%{background-position-x:14.286%}25%{background-position-x:28.571%}37.5%{background-position-x:42.857%}50%{background-position-x:57.143%}62.5%{background-position-x:71.429%}75%{background-position-x:85.714%}87.5%,100%{background-position-x:100%}}

@media(prefers-reduced-motion:reduce){#rhythm-hud[data-status]::before{animation:none!important}}
#rhythm-hud[data-status]:not([data-status=""])>small{min-height:24px}
.craft-browse-tabs{display:flex;gap:3px;flex-shrink:0;margin:0 0 7px;border-bottom:1px solid #b3956b55;padding-bottom:3px}.craft-browse-tabs button{flex:1;min-width:0;height:25px;padding:3px 6px;border:1px solid transparent;border-radius:4px;background:transparent;color:#cbb6ce;font-size:11px;line-height:1}.craft-browse-tabs button.selected{color:#ffe0aa;background:#8b65412b;border-color:#b3956b88}.craft-right>.inventory-heading:empty{display:none}.craft-map-bonuses{display:flex;gap:9px;align-items:center;white-space:nowrap;overflow-x:auto;flex-shrink:0;margin:8px 0 5px;padding:5px 0;border-top:1px solid #b3956b44;border-bottom:1px solid #b3956b44;font-size:10px;color:#cdb4cb}.craft-map-bonuses b{color:#f2d49d;font-weight:600}@media(max-height:480px){.craft-browse-tabs button{height:22px;font-size:10px}.craft-map-bonuses{gap:7px;font-size:9px}}
.craft-browse-tabs{position:sticky;top:0;z-index:3;background:#221625}

#app #rhythm-hud[data-phase=intro] .timing-track{opacity:1}#app #rhythm-hud[data-phase=intro] .timing-window{transform:none}#rhythm-hud[data-phase=intro]>small{visibility:hidden}

/* Illustrated royal character sheet. */
.character-values{padding:14px;background:linear-gradient(145deg,#382035ed,#201726f2);border-color:#c39c6c99;box-shadow:inset 0 0 28px #d19e5210,0 6px 22px #10081766}
.room-profile{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #c39c6c55}
.room-profile .profile-heading{position:relative;display:grid;grid-template-columns:1fr;place-items:center;gap:8px}
.profile-heading>.royal-level-badge{justify-self:center;margin-inline:auto}
.profile-heading>small{font-size:9px;letter-spacing:2px;color:#c4a58b}
.royal-level-badge{position:relative;width:104px;height:104px;flex-shrink:0;display:grid;place-items:center;isolation:isolate}
.royal-level-badge>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 3px 5px #12091c99)}
.royal-level-badge>div{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;padding-top:10px;color:#fff0c0;line-height:1}
.royal-level-badge small{font-size:8px;letter-spacing:1.4px;color:#d4b980}
.royal-level-badge strong{font:700 29px/1.05 Georgia!important;text-shadow:0 2px #623b40,0 0 9px #eabd6266}
.profile-gold{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:3px;color:#f5d78c;white-space:nowrap}
.profile-gold img{width:29px;height:29px;object-fit:contain;image-rendering:pixelated}.room-profile .profile-gold b{font-size:13px;color:#ffe7a5}.profile-gold small{font-size:8px;letter-spacing:1px;color:#c5a879}
.profile-xp-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#d5c4dc}.profile-xp-caption small{font-size:9px;font-variant-numeric:tabular-nums;color:#aacfe8}
/* Scale ornaments independently from the rails so wider panels do not enlarge the end caps. */
.profile-xp{position:relative;aspect-ratio:390/31.8;height:auto;margin:3px 0 2px;border:0;background:none;overflow:visible}
.profile-xp-art{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:2}
.profile-xp-art img{display:block;flex:none;height:100%;object-fit:fill;image-rendering:auto}
.profile-xp-art .xp-end{width:7%}.profile-xp-art .xp-center{width:7.04%}
.profile-xp-art .xp-rail{flex:1;align-self:stretch;background:url("assets/character-ui/xp-rail-v5.png") center/auto 100% repeat-x}
.profile-xp-channel{position:absolute;left:6.4%;right:6.4%;top:37%;height:27%;background:#101629;border-radius:2px;overflow:hidden;box-shadow:inset 0 2px 4px #000a}
.profile-xp-value{position:absolute;inset:0 7%;z-index:3;display:flex;align-items:center;justify-content:center;padding-top:1px;color:#fff;font-size:clamp(7px,1vw,9px);font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;pointer-events:none}
.profile-xp-channel i{display:block;height:100%;min-width:0;background:linear-gradient(180deg,#d0faff,#5cbfe3 38%,#6375d0 72%,#324a85);box-shadow:0 0 8px #89d8ff;transition:width .35s}
.character-stat-group{margin:10px 0 0;border:1px solid #bc95663b;border-radius:7px;overflow:hidden;background:#130e1c38}
.character-values .character-stat-group h3{display:flex;align-items:center;gap:8px;margin:0;padding:6px 9px;background:linear-gradient(90deg,#79523840,#5f3b5920);font-size:12px;color:#ffe2b2;border-bottom:1px solid #bc956630}
.character-stat-group h3 img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 2px #09071488)}
.character-stat-group h3 span{display:flex;flex-direction:column;gap:2px}.character-stat-group h3 small{font-size:8px;font-weight:400;color:#bfaac2}
.character-stat-table{font-size:11px;line-height:1.5}.character-stat-table thead th{font-size:9px;padding-top:6px;padding-bottom:6px;background:#120d181f}.character-stat-table th,.character-stat-table td{padding:6px;border-color:#bd996117}.character-stat-table th:first-child{width:46%}.character-stat-table tbody tr:nth-child(even){background:#c39c6c05}.character-stat-table tbody tr:last-child>*{border-bottom:0}.character-stat-table .stat-total{background:#d5a75609;color:#ffe5b6}
.levelup-display .royal-level-badge{width:clamp(110px,20vw,205px);height:clamp(110px,20vw,205px);animation:level-number .85s .15s both}.levelup-display .royal-level-badge strong{font-size:clamp(35px,6vw,63px)!important}.levelup-display .royal-level-badge small{font-size:clamp(8px,1.3vw,13px);letter-spacing:2px}.levelup-display .royal-level-badge>div{padding-top:10%}
@media(max-height:500px){.character-values{padding:10px}.royal-level-badge{width:86px;height:86px}.royal-level-badge strong{font-size:24px!important}.profile-xp{height:auto}.room-profile{margin-bottom:8px;padding-bottom:7px}.character-stat-group h3 img{width:28px;height:28px}.character-values .character-stat-group h3{padding:4px 7px}.character-stat-table th,.character-stat-table td{padding:5px}}
@media(max-width:600px){.character-values{padding:8px}.profile-heading>small{font-size:8px;letter-spacing:.5px}.profile-gold{grid-template-columns:23px auto;gap:1px 3px}.profile-gold img{width:23px;height:23px}.room-profile .profile-gold b{font-size:11px}.royal-level-badge{width:88px;height:88px}.royal-level-badge strong{font-size:25px!important}.character-stat-table{font-size:9px}.character-stat-table th,.character-stat-table td{padding:5px 3px}.character-stat-table th:first-child{width:40%}}
@media(prefers-reduced-motion:reduce){.profile-xp-channel i{transition:none}.levelup-display .royal-level-badge{animation:none}}
.profile-xp-channel{z-index:1}.profile-xp-channel i{box-shadow:inset 0 1px #d5faff80,0 0 7px #89d8ff}

/* Compact settings controls. */
#overlay .settings-panel{font-size:11px}#overlay .settings-panel>.secondary{min-height:28px;margin-top:6px;padding:5px 8px;font-size:11px}#overlay .settings-panel .settings-range{margin:8px 0;gap:4px;font-size:11px}#overlay .settings-panel .settings-check{margin:7px 0;font-size:10px;gap:5px}#overlay .settings-panel .settings-check input{width:15px;height:15px}#overlay .settings-panel .dev-form{gap:6px;margin:7px 0}#overlay .settings-panel .dev-form input,#overlay .settings-panel .dev-form select{min-height:27px;height:27px;padding:4px 6px;font-size:11px}

/* Keep progression controls outside the scrollable loot panel. */
.reward-scene #reward-actions{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px;max-width:60%;pointer-events:auto}
.reward-scene #reward-actions[hidden]{display:none}
.reward-scene #reward-actions button{width:auto;margin:0;padding:12px 20px;font-size:12px}

.item-tier{display:inline-block;margin-right:8px;font-size:9px;font-weight:400;color:#d1b583;vertical-align:baseline}.craft-attributes button{grid-template-columns:minmax(0,1fr) auto}@media(max-width:500px){.item-tier{font-size:8px;margin-right:6px}}

/* Larger reward panel with shared compact crafting tabs. */
.chest-loot-panel{top:16%;bottom:8%;width:36%;padding:9px;display:flex;flex-direction:column;overflow:hidden}
.reward-tabs{position:static;margin-bottom:6px;background:transparent}
.reward-panel-scroll{min-height:0;overflow:auto;overscroll-behavior:contain}
.reward-panel-scroll [hidden]{display:none}
.reward-panel-scroll small{font-size:9px;letter-spacing:.7px;color:#cba879}
.combat-report-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #b3956b33;font:10px/1.3 monospace;color:#ddccdc}
.combat-report-row b{color:#ffe0aa;font-variant-numeric:tabular-nums;white-space:nowrap}
.combat-report-row.report-sub{padding:3px 0 3px 9px;border:0;font-size:9px;color:#bba9c4}
@media(max-height:480px){.chest-loot-panel{top:13%;bottom:7%;padding:7px}.reward-tabs button{height:22px}.combat-report-row{padding:5px 0;font-size:9px}}

/* Map graphics are transparent; equipment alone gets the rarity aura. */
.inventory-tile.item-kind-map,.craft-item-slot.item-kind-map{background:transparent!important}
.item-popup-icon.inventory-icon{aspect-ratio:1;isolation:isolate}
.item-popup-icon .item-rarity-glow{inset:-9%}
.craft-item-slot{position:relative;isolation:isolate}
.craft-item-slot>.item-rarity-glow{inset:0}
.equipment-slot>.inventory-icon{position:relative;left:auto;top:auto;transform:none;width:86%;height:86%;min-height:0;padding:0;background:none;white-space:normal}
.equipment-slot.occupied .inventory-icon img{width:100%;height:100%}
.craft-item-slot>img{position:relative;z-index:1}

.discovery-map-icon img{width:clamp(90px,17vw,180px);height:clamp(90px,17vw,180px);object-fit:contain;filter:drop-shadow(0 5px 16px #0009)}.levelup-display .discovery-name{font-size:clamp(16px,2.5vw,28px);font-weight:700;color:#ffe6ae}.discovery-scene #levelup-continue{width:220px}
/* Shared developer screens: compact navigation, full available workspace. */
#overlay .tool-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;flex-wrap:nowrap}
#overlay .tool-header h2{font:700 18px/1.2 Georgia,serif;color:#ffe1a0;margin:0;min-width:0}
#overlay .tool-header .tool-back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 29px;width:29px;min-width:29px;height:29px;min-height:29px;padding:0;margin:0;font-size:20px;line-height:1}
#overlay:has(.tool-panel){padding:0;background:#191324;align-items:stretch}
#overlay .settings-panel.tool-panel{position:fixed;inset:0;z-index:9;width:100%;height:100%;padding:10px 12px;border-radius:0;overflow:auto;background:#191324}
#app[data-scene=dev] #overlay{position:absolute;inset:0;padding:8px 12px;overflow:auto}
#overlay .dev-panel{max-width:1100px;margin:0 auto;padding:0}
.dev-layout{grid-template-columns:minmax(0,1.15fr) minmax(260px,1fr);gap:12px;align-items:start}
.dev-preview-column{min-width:0}.dev-stage{max-height:none}.dev-stage canvas{width:100%;height:min(49dvh,360px);object-fit:contain}.dev-stage #dev-frame-label{padding:4px;font-size:10px}
.dev-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:6px 0}.dev-buttons button{padding:3px;min-height:29px;font-size:17px}.dev-buttons [aria-pressed=true]{border-color:#edc07e}
.dev-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;margin:0;padding:0;overflow:visible}.dev-frame{min-width:0;width:100%;padding:0;overflow:hidden}.dev-frame canvas{width:100%;height:auto}.dev-frame span{padding:3px;font-size:9px}.dev-frame.selected{border-color:#ffe1a0;box-shadow:inset 0 0 0 2px #ffe1a0;background-color:#69502c}
.dev-options{margin:0 0 6px}.dev-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:6px 0}.dev-clips button{padding:5px 3px;font-size:10px;min-height:32px;white-space:normal}
.dev-equipment-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin:6px 0;font-size:11px}
.dev-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(81px,8.4vw,102px)),1fr));gap:7px;padding:7px 3px}.dev-item-grid .inventory-tile{width:100%;height:auto;aspect-ratio:1;padding:6px}.dev-item-grid .inventory-icon{width:100%;height:100%}.dev-item-grid .inventory-icon img{width:100%;height:100%;object-fit:contain}.dev-item-grid .selected{outline:2px solid #ffe1a0;outline-offset:1px}
@media(max-width:700px){.dev-layout{grid-template-columns:1fr}.dev-stage canvas{height:29dvh}.dev-settings .dev-clips{grid-template-columns:repeat(3,minmax(0,1fr))}.dev-strip{max-height:15dvh}.dev-frame canvas{max-height:11dvh;object-fit:contain}.dev-layout{gap:8px}}
@media(max-height:500px) and (min-width:701px){.dev-stage canvas{height:49dvh}.dev-clips button{min-height:27px}.dev-frame canvas{max-height:20dvh;object-fit:contain}}

.creation-choice-prompt{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;display:flex;align-items:center;gap:12px;padding:12px 24px;border:0;background:none;box-shadow:none;color:#ffe5ad;text-align:center;pointer-events:none}.creation-choice-prompt strong{font:700 clamp(17px,2.6vw,29px) Georgia,serif;text-shadow:0 2px 4px #10091d;letter-spacing:.6px}.creation-choice-prompt span{color:#ffd071;font-size:27px}.creation-choice-prompt.has-choice{bottom:40%;padding:8px 18px}.creation-choice-prompt.has-choice strong{font-size:clamp(14px,2vw,22px)}@media(max-height:450px){.creation-choice-prompt{padding:8px 18px;bottom:5%}.creation-choice-prompt.has-choice{bottom:42%;padding:5px 14px}.creation-choice-prompt span{font-size:20px}}