*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#23251f;color:#f2e6c8;font-family:Arial,sans-serif;touch-action:none;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;user-select:none}button:focus-visible,a:focus-visible{outline:3px solid #f6c950;outline-offset:4px}#game{height:100dvh;position:relative;overflow:hidden;background:#58594c}#arena{width:100%;height:100%;display:block}.grain{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#111813c9 0%,transparent 27%,transparent 64%,#10160ec7 100%)}header{position:absolute;left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));top:max(23px,env(safe-area-inset-top));display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.brand{font-family:Impact,'Arial Narrow',sans-serif;line-height:.9;font-size:30px;color:#f7eac9;text-decoration:none;letter-spacing:-1px;transform:rotate(-3deg)}.brand span{color:#ed663f;margin-left:3px}.brand small{display:block;letter-spacing:2px;font:8px Arial;margin-top:9px}.place{font-size:10px;letter-spacing:3px;padding-top:6px;text-align:center}.place b{display:block;font:24px Impact,'Arial Narrow',sans-serif;letter-spacing:1px;margin-top:7px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ed7147;margin-right:8px}.tools{display:flex;gap:7px}.tools button{background:#20271fcc;border:1px solid #a99f7d66;border-radius:3px;width:37px;height:37px;font-weight:bold}.tools button[aria-pressed=false]{opacity:.45}.screen{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none}.intro-card{pointer-events:auto;width:450px;margin-left:8%;padding:30px 0}.eyebrow{font-size:10px;letter-spacing:3px;color:#e8bc75;font-weight:700;margin-bottom:18px}h1{font:clamp(44px,6.7vw,96px)/.94 Impact,'Arial Narrow',sans-serif;letter-spacing:1px;margin:0 0 22px;text-shadow:0 4px 30px #0008}h1 em{font-style:normal;color:#f26b42}.intro-card p{font-size:15px;line-height:1.6;color:#e6dfc9;margin-bottom:23px}.tags{display:flex;gap:8px;margin-bottom:27px}.tags span{border:1px solid #d9d0aa55;padding:7px 9px;font-size:9px;font-weight:bold;letter-spacing:1px}.primary{width:100%;padding:19px 22px;background:#ea653d;color:#191f19;border:1px solid #f28a61;border-bottom:4px solid #993d28;border-radius:3px;font-weight:900;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#ff7d50}.primary:active{transform:translateY(2px)}.quiet{display:block;background:transparent;border:0;border-bottom:1px solid #b0aa8d55;padding:10px 0;margin:9px auto 0;font-size:12px;color:#d7d0b9}.intro-card .device-note{font-size:11px;color:#babca7;line-height:1.7;margin-top:18px}.scene-stamp{position:absolute;bottom:46px;right:40px;transform:rotate(-4deg);border:2px solid #d3c4a97a;padding:12px 20px;text-align:center;color:#e6d4b0}.scene-stamp b{font:23px Impact;display:block}.scene-stamp span{font-size:8px;letter-spacing:2px}#hud{position:absolute;top:100px;left:max(28px,env(safe-area-inset-left));right:28px;display:flex;justify-content:space-between;pointer-events:none}.healthbox{width:min(300px,38vw)}.fighter-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;margin-bottom:8px}.fighter-label span{font-size:9px;letter-spacing:0;color:#d2d2ba}.bar{height:13px;background:#231b16d9;border:1px solid #c5bfa058;padding:2px;transform:skew(-8deg)}.bar i{display:block;background:linear-gradient(90deg,#94994d,#d0cf74);height:100%;width:100%;transition:width .15s}.rage{height:4px;background:#211d16b3;margin-top:7px}.rage i{display:block;background:#ef794b;width:0;height:100%;transition:width .2s}.healthbox small{font-size:8px;letter-spacing:1px;color:#dfac7b;display:block;margin-top:6px}.healthbox small span{color:#bcb79f;float:right;letter-spacing:0}.round{text-align:right;display:flex;flex-direction:column}.round small{font-size:9px;letter-spacing:2px}.round b{font:32px Impact;margin-top:4px}.round span{font-size:8px;letter-spacing:2px;color:#c7c5ae}#callout{position:absolute;top:29%;left:0;width:100%;text-align:center;font:36px Impact;letter-spacing:2px;text-shadow:2px 3px #141b16;pointer-events:none;color:#f4d592}#combo{position:absolute;right:35px;top:37%;pointer-events:none;text-align:right;color:#f7d078;transform:rotate(-6deg)}#combo b{font:55px Impact;display:block}#combo span{font-size:10px;letter-spacing:2px}#controls{position:absolute;inset:0;pointer-events:none}#stick{position:absolute;left:max(36px,env(safe-area-inset-left));bottom:max(40px,env(safe-area-inset-bottom));width:134px;height:134px;pointer-events:auto;touch-action:none}.ring{width:100%;height:100%;border:1px solid #e4d7ae66;border-radius:50%;background:#1d271b80;box-shadow:inset 0 0 25px #1118;display:grid;place-items:center}.ring>span{color:#dbd2b54a;font-size:72px;pointer-events:none}#knob{position:absolute;left:39px;top:39px;width:56px;height:56px;border-radius:50%;background:#aaa88b66;border:1px solid #f5e4b699;box-shadow:0 5px 15px #0005}.actionpad{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));width:255px;height:155px;pointer-events:none}.actionpad button{pointer-events:auto;position:absolute;border-radius:50%;background:#253023c7;border:1px solid #d7c69b80;box-shadow:0 4px 0 #1118,inset 0 0 20px #0c130b3d;display:flex;align-items:center;justify-content:center;flex-direction:column;touch-action:none}.actionpad button b{font-size:23px}.actionpad button small{font-size:7px;letter-spacing:.7px;margin-top:3px}.actionpad button.active{filter:brightness(1.6);transform:translateY(3px)}#attack{width:92px;height:92px;left:88px;top:55px;background:#dc6037dd;border-color:#ffa175;color:#ffedc9}#attack b{font:24px Impact;letter-spacing:1px}#block{width:65px;height:65px;left:91px;top:-20px}#special{width:65px;height:65px;right:0;top:16px}#special.ready{box-shadow:0 0 20px #f69b4c99;border-color:#ffc16d}#tip{position:absolute;bottom:17px;text-align:center;left:230px;right:320px;color:#d1c9ad;font-size:10px;pointer-events:none}#menu{background:#0b140be0;backdrop-filter:blur(6px);justify-content:center;pointer-events:auto;z-index:6}.menu-card{width:min(440px,88%);max-height:92dvh;overflow:auto;padding:25px 10px;text-align:center}.menu-card h2{font:53px Impact;margin:0 0 14px}.menu-card p{font-size:13px;line-height:1.5;color:#c6c9b3}.secondary{background:#d8c8a5;color:#27291e;border:0;border-bottom:3px solid #8d8269;padding:15px;width:100%;margin-top:12px;font-weight:bold;letter-spacing:1px}.menu-card details{margin-top:20px;font-size:11px;color:#aaa}.menu-card details p{text-align:left;font-size:11px}#stats{display:flex;justify-content:space-around;margin:20px 0;font-size:10px;color:#b9bda7}#stats b{display:block;font:28px Impact;color:#e6cea2;margin-bottom:5px}#load{position:absolute;inset:0;display:grid;place-items:center;background:#25291f;color:#e7cea0;z-index:20;letter-spacing:2px;font-size:12px}.hidden{display:none!important}
@media(max-width:700px) and (orientation:portrait){header{left:18px;right:18px;top:22px;gap:8px}.brand{font-size:24px}.brand small{font-size:6px}.place{display:none}.tools button{width:31px;height:31px}#hud{left:18px;right:18px;top:88px}.healthbox{width:58vw}.round b{font-size:27px}.intro-card{margin:0 23px;width:calc(100% - 46px);align-self:flex-end;margin-bottom:65px;padding:22px;background:linear-gradient(90deg,#1b241ae8,#1b241a77);border-left:2px solid #d66d41}h1{font-size:57px}.intro-card p{font-size:13px}.tags{gap:5px;margin-bottom:19px}.tags span{font-size:8px;padding:6px}.scene-stamp{display:none}.eyebrow{font-size:8px;letter-spacing:2px}.intro-card .device-note{font-size:9px;margin-bottom:0}.primary{padding:17px 13px;font-size:12px}#stick{width:112px;height:112px;left:24px;bottom:66px}#knob{left:28px;top:28px}.actionpad{transform:scale(.82);transform-origin:bottom right;right:15px;bottom:49px}#tip{left:16px;right:16px;bottom:18px;font-size:8px;line-height:1.5}#callout{font-size:29px;top:30%}#combo{top:43%;right:19px}#combo b{font-size:40px}}
@media(max-height:520px) and (orientation:landscape){header{top:12px;left:18px;right:18px}.brand{font-size:23px}.place b{font-size:18px}.tools button{width:30px;height:30px}#hud{top:67px;left:18px;right:18px}.healthbox{width:240px}.intro-card{margin-left:6%;width:340px;padding:50px 0 0}h1{font-size:47px;margin-bottom:12px}.eyebrow{margin-bottom:10px;font-size:8px}.intro-card p{font-size:11px;margin:10px 0}.tags{margin-bottom:13px}.tags span{font-size:7px}.primary{padding:12px 15px;font-size:11px}.intro-card .device-note{font-size:8px;margin-top:8px}.quiet{font-size:10px;padding:7px}.scene-stamp{bottom:24px;right:24px}.scene-stamp b{font-size:19px}#stick{width:94px;height:94px;bottom:27px;left:25px}#knob{width:44px;height:44px;left:25px;top:25px}.actionpad{transform:scale(.72);transform-origin:bottom right;right:18px;bottom:20px}#tip{bottom:10px;left:150px;right:215px;font-size:8px}.menu-card{padding:15px 10px}.menu-card h2{font-size:35px}.menu-card .eyebrow{margin-bottom:5px}#stats{margin:8px 0}.round b{font-size:25px}}
@media (prefers-reduced-motion:reduce){.bar i,.rage i{transition:none}}
@media(min-height:650px) and (min-width:701px){.intro-card{padding-top:80px}h1{font-size:clamp(44px,6.2vw,86px)}}
/* Clean combat HUD; combo selection is available in pause menu. */
#kick{left:12px;top:55px;width:70px;height:70px;background:#715a31e0;border-color:#d2b778}
#special{width:76px;height:76px}#special small{font-size:6px;letter-spacing:0}#special.cooling{opacity:.55}#special.ready{border-color:#eec184;box-shadow:0 0 12px #e7a25244}
#controls.transforming{opacity:.35;pointer-events:none}
.dragon-mode .fighter-label>b{color:#f5d88e}
#comboStyle{width:100%;margin-bottom:12px;background:#182219e8;border:1px solid #cfb57b77;padding:12px;color:#f2dfb4;font-size:11px;min-height:44px;border-radius:3px;text-align:left}
#comboStyle:disabled{cursor:default;color:#f2d78f}
@media(max-height:520px) and (orientation:landscape){#callout{top:39%;font-size:21px}}
/* Keep the game surface stationary; no change to layout, art or control sizes. */
body{position:fixed;inset:0}
#game,#game *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#menu .menu-card,#menu .menu-card *{touch-action:pan-y}
#menu button{touch-action:none}