:root{--ink:#101b29;--paper:#f4f0de;--lime:#dceaac;--muted:#a6b0bd;--red:#ff563f}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:none}button{font:inherit;border:0;cursor:pointer;touch-action:none}button:focus-visible{outline:3px solid white;outline-offset:5px}[hidden]{display:none!important}#game,#scene{position:absolute;inset:0;width:100%;height:100%;height:100dvh}#scene{display:block}#vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 30%,#07101b66 100%)}#damage,#flash{pointer-events:none;position:absolute;inset:0;opacity:0;z-index:5}#damage{box-shadow:inset 0 0 90px #ff3025}#flash{background:#ffc4aa}#hud{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(26px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:24px;text-shadow:0 2px 10px #0008}.brand{font-weight:950;font-style:italic;font-size:27px;letter-spacing:-1.5px;line-height:1}.brand span{color:var(--lime)}.brand small{display:block;font-size:7px;font-style:normal;letter-spacing:1.5px;margin-top:10px;color:#d1d7dc}.score{margin-left:auto;display:grid;text-align:right;gap:3px}.score>span,.score small{font-size:8px;letter-spacing:1.6px;color:#c9d3da}.score strong{font-size:29px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:1px}.vitals{width:150px;padding-top:1px}.vitals>div:first-child{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin-bottom:8px}.vitals small{font-size:7px;letter-spacing:1.4px;display:block;margin-top:9px;color:#d4dce2}.meter{height:5px;background:#ffffff25;border-radius:2px;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:var(--lime);transition:width .15s}.utility{width:31px;height:31px;background:#172536aa;border:1px solid #ffffff3c;color:var(--paper);border-radius:50%;font-size:13px}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#08111eef 0%,#0d192ad9 30%,#0d192a20 68%,transparent);z-index:10}.menu-copy{position:absolute;left:max(6.5%,env(safe-area-inset-left));top:15%;width:55%}.eyebrow{font-size:9px;letter-spacing:3px;font-weight:700;color:var(--lime);display:flex;align-items:center;gap:9px}.eyebrow i{height:6px;width:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 12px #dceaac55}h1{font-size:clamp(52px,9vw,122px);letter-spacing:-.075em;line-height:1;margin:19px 0 18px;font-weight:950;font-style:italic;white-space:nowrap}h1 span{color:var(--lime)}h1 sup{font-style:normal;font-size:10px;letter-spacing:0;vertical-align:top;margin-left:12px;display:inline-block;margin-top:8px;border:1px solid #ffffff50;border-radius:50%;padding:5px}.tagline{font-size:clamp(18px,2.8vw,34px);font-weight:700;line-height:1.15;margin:0 0 15px;letter-spacing:-.7px}.description{font-size:11px;color:#b6c1cd;margin-bottom:24px}.primary{height:48px;min-width:230px;padding:0 24px;background:var(--lime);color:var(--ink);font-size:11px;letter-spacing:1.5px;font-weight:900;display:flex;align-items:center;justify-content:space-between;gap:35px;box-shadow:0 5px 25px #0003}.primary span{font-size:22px}.primary:active{transform:scale(.97);background:#eefacb}.primary:disabled{opacity:.5}.menu-meta{display:flex;gap:17px;font-size:7px;letter-spacing:1.4px;color:#94a4b4;margin-top:20px}.menu-meta span+span{border-left:1px solid #72839266;padding-left:17px}.character-caption{position:absolute;right:9%;bottom:18%;display:grid;text-align:right;gap:5px;transform:rotate(-3deg)}.character-caption span{font-size:7px;letter-spacing:2.4px;color:var(--lime)}.character-caption b{font-size:30px;letter-spacing:-1px;font-style:italic}.character-caption small{font-size:10px;color:#b2becd}.sound{position:absolute;right:5%;top:7%;background:none;color:#dce6eb;border:1px solid #ffffff30;padding:8px 12px;font-size:8px;letter-spacing:1px}.location{position:absolute;bottom:6%;left:6.5%;font-size:7px;letter-spacing:2px;color:#8e9faf}.location span{margin-left:23px;color:#b9c6d1}#joystick{position:absolute;left:max(34px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));width:118px;height:118px;border:1px solid #e2edf735;border-radius:50%;background:radial-gradient(circle,#17283f55,#15243830);touch-action:none}.joy-ring{position:absolute;inset:19px;border:1px dashed #e1ebf93b;border-radius:50%}#knob{position:absolute;left:37px;top:37px;width:44px;height:44px;border-radius:50%;background:#eaf2e9ad;border:1px solid #fff7;box-shadow:0 4px 18px #0003}#joystick small{position:absolute;bottom:-18px;width:100%;text-align:center;font-size:7px;letter-spacing:2px;color:#c5d0da}#controls{position:absolute;inset:0;pointer-events:none}#controls button,#joystick{pointer-events:auto}.right-controls{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));right:max(29px,env(safe-area-inset-right));display:flex;align-items:flex-end;gap:25px}.right-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%}#attack{width:99px;height:99px;color:#142335;background:var(--lime);box-shadow:0 0 0 6px #dceaac15,0 7px 24px #0005;border:2px solid #f3ffcc}#attack svg{width:41px;height:41px;margin-bottom:3px}#attack span{font-size:9px;letter-spacing:1.2px;font-weight:900}#attack:active,#attack.pressed{transform:scale(.92);background:#fff6da}#ability{position:relative;width:75px;height:75px;background:#172334de;color:var(--lime);border:2px solid #dceaac55;margin-bottom:5px;box-shadow:0 0 0 4px #14223660}#ability svg{width:31px;height:31px}#ability span{font-size:7px;letter-spacing:1.5px;margin-top:3px}#ability small{position:absolute;bottom:-21px;font-size:8px;color:var(--paper);letter-spacing:1px;white-space:nowrap}#ability:disabled{color:#abb5c0}#ability.ready{background:#dcf3a7;color:#142335;box-shadow:0 0 24px #d9fda750;animation:ready 1s infinite alternate}#ability.active{border-color:var(--red);color:var(--red)}@keyframes ready{to{box-shadow:0 0 0 7px #d9fda720,0 0 30px #d9fda755}}#callout{position:absolute;top:25%;left:20%;width:60%;text-align:center;font-size:clamp(15px,2.8vw,29px);font-weight:900;font-style:italic;letter-spacing:1px;color:var(--lime);text-shadow:0 3px 15px #000;opacity:0;transition:opacity .2s;pointer-events:none}#combo{position:absolute;bottom:12%;left:40%;width:20%;font-size:10px;letter-spacing:2px;text-align:center;color:#ecf6e9;pointer-events:none}#powerTimer{position:absolute;left:37%;width:26%;bottom:7%;text-align:center}#powerTimer b{font-size:8px;letter-spacing:3px;color:#ff7b65}#powerTimer .meter{margin-top:8px}#powerBar{background:var(--red)}.popup{position:absolute;font-weight:900;font-style:italic;color:var(--lime);font-size:18px;text-shadow:0 2px 8px #000;pointer-events:none;animation:scorePop .8s ease-out forwards}@keyframes scorePop{from{transform:translate(-50%,-20%);opacity:1}to{transform:translate(-50%,-180%);opacity:0}}.modal{display:flex;align-items:center;justify-content:center;background:#08111cd9;backdrop-filter:blur(9px)}.card{width:min(420px,75vw);text-align:center}.card .eyebrow{justify-content:center}.card h2{font-size:52px;letter-spacing:-3px;font-style:italic;margin:16px 0}.card h2 span{color:var(--lime)}.card p{font-size:12px;line-height:1.6;color:#b9c5ce}.card .primary{margin:19px auto}.card small{font-size:8px;letter-spacing:1px;color:#aab6c2}.result{display:flex;justify-content:center;align-items:baseline;gap:10px}.result strong{font-size:42px;font-variant-numeric:tabular-nums}.result span{font-size:9px;letter-spacing:2px}#rotate{display:none;position:absolute;inset:0;background:#111c2b;z-index:100;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate .phone-icon{font-size:76px;color:var(--lime)}#rotate h2{font-style:italic;font-size:30px;letter-spacing:-1px}#rotate p{color:#a7b5c2;font-size:13px;line-height:1.7}#rotate b{margin-top:40px;color:var(--lime);font-size:21px;font-style:italic}#loadingError{position:absolute;inset:20%;z-index:110;background:#162537;padding:35px;line-height:1.8} @media(orientation:portrait){#rotate{display:flex}}@media(max-height:420px){.menu-copy{top:11%}h1{margin:15px 0}.description{margin:12px 0 18px;font-size:10px}.menu-meta{margin-top:15px}.primary{height:42px}.tagline{font-size:21px}.character-caption{bottom:18%}#hud{top:13px}.card h2{font-size:40px;margin:10px 0}.card .primary{margin:12px auto}}@media(max-height:340px){.description,.menu-meta,.location{display:none}.menu-copy{top:10%}.brand small{display:none}#joystick{width:95px;height:95px}#knob{left:25px;top:25px}#attack{width:83px;height:83px}#ability{width:65px;height:65px}}

/* A compact quality control stays outside the touch combat area. */
.quality-setting>span{font-size:8px;letter-spacing:1.5px;color:#aebeca;display:block;margin-bottom:8px}.quality-options{display:inline-flex;gap:3px;padding:3px;background:#0a1725a8;border:1px solid #d6e4ed22;border-radius:6px}.quality-options button{background:transparent;color:#bac8d2;font-size:11px;padding:7px 11px;border-radius:3px}.quality-options button.selected{background:#dceaac;color:#142233}.menu-quality{position:absolute;bottom:5%;right:5%;text-align:right}.card .quality-setting{margin:13px 0}.character-caption{bottom:24%}#vignette{background:radial-gradient(ellipse at 50% 42%,transparent 45%,#07101b55 100%)}@media(max-height:370px){.menu-quality{bottom:4%}.quality-options button{padding:5px 8px;font-size:10px}.quality-setting>span{margin-bottom:4px}.character-caption{bottom:27%}.card .quality-setting{margin:6px 0}.card p{margin:7px 0;font-size:11px}.card h2{font-size:33px;margin:7px 0}}