:root{color-scheme:dark;--ink:#eee9d9;--gold:#e7b967;--panel:#121826d8;--edge:#96826470}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;overflow:hidden;margin:0;background:#11131c;color:var(--ink);font-family:Trebuchet MS,system-ui,-apple-system,Segoe UI,sans-serif;user-select:none}button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit}button:active{transform:scale(.96);filter:brightness(1.18)}[hidden]{display:none!important}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(#080c1b80,transparent 27%,transparent 76%,#070914a8),radial-gradient(ellipse at center,transparent 37%,#050711a8 100%)}.topline{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px max(15px,env(safe-area-inset-right)) 10px;pointer-events:none}.branding{display:flex;gap:9px;align-items:center;filter:drop-shadow(0 2px 3px #000)}.sigil{font-size:35px;color:var(--gold);text-shadow:0 0 12px #e8a756cc}.branding b{display:block;font-family:Georgia,serif;letter-spacing:1.1px;font-size:17px}.branding b span{color:var(--gold)}.branding small{display:block;font-size:9px;letter-spacing:2.2px;color:#b8b6b8;margin-top:3px}.topActions{display:flex;gap:7px;align-items:center;pointer-events:auto}.flag{font-size:10px;letter-spacing:1px;color:#d4c5a4;border:1px solid #d0bd8250;background:#151a29c9;padding:7px 10px;border-radius:5px}.topActions button{background:#1e2333d8;border:1px solid #af9a775f;border-radius:5px;min-width:43px;padding:6px 9px}.topActions #pauseBtn{font-weight:900}#bossHud{position:absolute;z-index:5;width:min(475px,48vw);top:78px;left:50%;transform:translateX(-50%);pointer-events:none;text-shadow:0 2px 4px #000}.bossLabel{display:flex;justify-content:space-between;align-items:end;gap:10px}.bossLabel small{display:block;letter-spacing:2px;color:#d99e8a;font-size:9px}.bossLabel b{font:700 19px Georgia,serif;color:#f3e3cc}.bossIcon{color:#e4a678;font-size:22px}.bossLabel #bossPhase{color:#f1b8a0;font-size:10px;letter-spacing:1px;border:1px solid #f1b8a05c;padding:4px 7px}.bossBar{height:12px;margin-top:8px;background:#281e2a;border:1px solid #b89476;box-shadow:0 0 0 3px #111823a3;overflow:hidden}.bossBar>div{height:100%;width:100%;background:linear-gradient(90deg,#9a3143,#d55a4c 65%,#f1a068);transition:width .13s}.bossMini{display:flex;justify-content:space-between;margin-top:6px;font-size:9px;letter-spacing:1px;color:#ddc9b5}#heroHud{position:absolute;z-index:5;top:100px;left:17px;width:244px;max-width:31vw;background:var(--panel);border:1px solid var(--edge);border-radius:9px;padding:10px 12px;box-shadow:0 8px 26px #0005;pointer-events:none}.heroHead{display:flex;gap:8px;align-items:center;margin-bottom:9px}.portrait{display:grid;place-items:center;background:linear-gradient(145deg,#3d536e,#18293c);color:#ffe5a5;font-size:21px;width:39px;height:39px;border:1px solid #caad7190;border-radius:5px}.heroHead b{display:block;font-size:11px;letter-spacing:.8px}.heroHead span{font-size:9px;color:#aeaab3}.stat{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:9px}.stat>span{width:18px;font-weight:900;color:#dccfbe}.stat strong{min-width:58px;text-align:right;font-size:9px;color:#eee9dc}.meter{flex:1;height:8px;background:#181f28;border:1px solid #555b61;border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;width:100%;transition:width .15s}.hp i{background:linear-gradient(90deg,#b63c4b,#ec7778)}.mp i{background:linear-gradient(90deg,#3969a9,#69a7e0)}.stamina i{background:linear-gradient(90deg,#49875d,#a9d292)}.objective{border-top:1px solid #8d866456;margin-top:11px;padding-top:8px;color:#d9c99b;font-size:10px;line-height:1.4}#warning{position:absolute;z-index:5;top:29%;left:50%;transform:translateX(-50%);background:#401b29df;border:1px solid #f06b62;color:#ffe0ce;letter-spacing:1.4px;font-size:11px;padding:8px 16px;border-radius:5px;font-weight:800;opacity:0;transition:opacity .1s;text-align:center;pointer-events:none;white-space:nowrap}#warning.show{opacity:1;animation:warningBlink .4s infinite alternate}@keyframes warningBlink{to{background:#8f2a36f3}}#hitText{position:absolute;top:37%;left:52%;z-index:6;transform:translate(-50%,-10px);color:#f8ddae;font:900 25px Georgia,serif;text-shadow:0 3px 9px #000;opacity:0;pointer-events:none;transition:.15s}#hitText.show{opacity:1;transform:translate(-50%,0)}#toast{position:absolute;z-index:6;top:47%;left:50%;transform:translate(-50%,-14px);opacity:0;transition:.15s;background:#151825d9;padding:7px 15px;border:1px solid #9e8c70;border-radius:6px;pointer-events:none;font-size:11px}#toast.show{opacity:1;transform:translate(-50%,0)}#hudBottom{position:absolute;z-index:4;left:50%;bottom:9px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;white-space:nowrap;color:#dad1bfab;font-size:10px;letter-spacing:.2px}.helpInline b{color:#f3dba9}.helpInline span{color:#847a81}.demoTag{font-size:8px;letter-spacing:1.1px;color:#afa59b99}#touchControls{position:absolute;inset:0;z-index:7;pointer-events:none}#joystick{position:absolute;bottom:22px;left:max(26px,env(safe-area-inset-left));height:118px;width:118px;pointer-events:auto;touch-action:none;display:grid;place-items:center}.joyCircle{position:absolute;inset:0;border-radius:50%;background:#2c35447a;border:2px solid #a29c8a84;box-shadow:0 6px 20px #0007,inset 0 0 20px #131720c9;display:grid;place-items:center}.joyCircle:after{content:'✣';font-size:34px;color:#97908b59}#knob{position:absolute;width:52px;height:52px;border:2px solid #ddd0b6b8;background:linear-gradient(140deg,#a5a79c,#464d58);border-radius:50%;box-shadow:0 4px 15px #000a;pointer-events:none;z-index:2;transform:translate(0,0)}#buttons{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:24px;display:flex;gap:10px;align-items:end;pointer-events:auto}.action{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#263349de;border:2px solid #8792a4a3;border-radius:50%;width:64px;height:64px;box-shadow:0 4px 10px #080a14c7,inset 0 0 13px #ffffff18}.action>span{font-size:25px;line-height:1.2}.action small{font-size:9px;letter-spacing:.4px;font-weight:850}.action.attack{height:89px;width:89px;border-color:#ebc48b;background:radial-gradient(circle at top left,#a46442,#5c2931 66%,#302132)}.action.attack>span{font-size:36px}.action.skill{border-color:#b2a6df;background:radial-gradient(circle at top left,#695b96,#2f2953)}.action:disabled{opacity:.5;filter:grayscale(.6)}.modal{position:fixed;inset:0;z-index:20;background:#080a13bd;display:flex;justify-content:center;align-items:center;padding:18px;backdrop-filter:blur(3px)}.modalCard{width:min(540px,94vw);border:1px solid #ad9367;background:radial-gradient(ellipse at 50% 10%,#303147,#141927 68%);box-shadow:0 0 0 5px #111827,0 16px 65px #000c;padding:30px 35px;text-align:center;border-radius:6px;max-height:92vh;overflow:auto}.modalEyebrow{font-size:10px;letter-spacing:2.4px;color:#d8b781;font-weight:800}.modal h1{font:700 clamp(25px,4vw,43px) Georgia,serif;letter-spacing:1px;margin:8px 0 10px}.modal h1 em{color:#eebd7b;font-style:normal}.modal p{font-size:13px;line-height:1.6;color:#c6c6d0;max-width:430px;margin:0 auto 17px}.modal #modalDetails{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:15px 0 22px;font-size:11px}.modal #modalDetails>div{border:1px solid #83776070;background:#191e2d;padding:7px 9px;border-radius:4px}.modal #startBtn{border:1px solid #f3cd8f;background:linear-gradient(115deg,#8f6336,#c59959,#896132);color:#101521;padding:12px 24px;font-weight:900;letter-spacing:1.1px;box-shadow:0 5px 20px #0009;border-radius:3px}.modal #startBtn span{margin-left:12px}.disclaimer{display:block;font-size:9px;color:#9d9ca8;margin-top:16px}#error{z-index:40;position:absolute;inset:0;background:#210c17;padding:40px}#error p{max-width:700px}@media(max-width:850px){.topline{padding-top:6px}.branding b{font-size:12px}.branding small{font-size:7px}.sigil{font-size:22px}.flag{display:none}#bossHud{top:42px;left:54%;width:min(340px,48vw)}.bossLabel b{font-size:12px}.bossLabel small,.bossMini{font-size:7px}.bossBar{height:9px;margin-top:5px}#heroHud{top:77px;left:7px;max-width:170px;padding:6px 8px}.heroHead{margin-bottom:4px;gap:5px}.portrait{width:28px;height:28px;font-size:14px}.heroHead b{font-size:9px}.heroHead span{font-size:8px}.stat{margin-top:4px}.objective{margin-top:5px;padding-top:5px;font-size:8px}#hudBottom{display:none}#joystick{bottom:8px;left:18px;width:88px;height:88px}#knob{width:40px;height:40px}#buttons{bottom:9px;right:15px;gap:6px}.action{width:51px;height:51px}.action>span{font-size:19px}.action small{font-size:7px}.action.attack{height:68px;width:68px}.action.attack>span{font-size:27px}.modalCard{padding:18px 20px}.modal p{font-size:12px}.modal h1{margin:7px 0}}@media(max-width:490px){.branding small{letter-spacing:.5px}.branding b{font-size:11px}.topActions button{min-width:32px;padding:5px}#bossHud{top:56px;left:58%;width:48vw}#bossHud .bossLabel b{font-size:10px}.bossIcon{font-size:13px}#bossPhase{display:none}.bossMini{display:none}#heroHud{top:111px;max-width:125px}.objective{display:none}.stat strong{min-width:36px;font-size:7px}.heroHead b{font-size:7px}.heroHead span{font-size:6px}#buttons{right:8px;gap:4px}.action{width:43px;height:43px}.action.attack{width:58px;height:58px}#joystick{width:74px;height:74px;left:10px}.modal #modalDetails{font-size:9px;gap:4px}}@media(max-height:380px){#heroHud{top:65px;max-width:147px}.objective{display:none}.modalCard{padding:11px 20px}.modal h1{font-size:26px;margin:4px 0}.modal p{margin-bottom:6px}.modal #modalDetails{margin:7px 0}.modal #startBtn{padding:8px 16px}.disclaimer{margin-top:5px}#bossHud{top:39px}}

/* v0.2 · mobile/tablet landscape, immersive HUD and target lock */
html,body{height:100%;height:100dvh;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;width:100vw;touch-action:none}
#scene{height:100%;height:100dvh}
.topline{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(7px,env(safe-area-inset-top))}
.topActions #fullscreenBtn{border-color:#d2ae7380;font-weight:800;white-space:nowrap}
.topActions #fullscreenBtn.active{background:#50634d;border-color:#cde2a4}
.bossTags{display:flex;align-items:center;gap:7px}
.lockStatus{color:#ffdd97;font-size:10px;font-weight:900;letter-spacing:1.2px;padding:4px 8px;background:#53331eb3;border:1px solid #e6bb72;box-shadow:0 0 10px #efc27133;border-radius:4px;white-space:nowrap}
#buttons .action.lock{background:radial-gradient(circle at 30% 20%,#395a64,#1c2c41);border-color:#8eb5bb;order:-1}
#buttons .action.lock.locked{background:radial-gradient(circle at 30% 20%,#be8447,#463421);border-color:#f9c877;box-shadow:0 0 0 3px #e6b66a36,0 0 16px #eabf765c}
#buttons .action.lock.locked>span{color:#ffe7ac}
#orientationOverlay{display:none;position:fixed;inset:0;z-index:99;background:radial-gradient(circle at center,#323a55,#0c0f19 75%);padding:30px 24px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:12px;color:#f4e6ce;overflow:auto}
#orientationOverlay h2{font-family:Georgia,serif;font-size:clamp(20px,5vw,28px);margin:2px 0;letter-spacing:.8px;color:#f4d5a0}
#orientationOverlay p{max-width:340px;line-height:1.6;font-size:13px;color:#cdc7cb;margin:0}
#orientationOverlay small{font-size:11px;color:#9b9da7;max-width:300px;line-height:1.4}
#orientationOverlay button{border:1px solid #e9c383;border-radius:6px;padding:14px 18px;min-height:48px;background:linear-gradient(120deg,#99632d,#d3a45d);color:#17151a;font-size:13px;font-weight:900;box-shadow:0 7px 22px #0009}
.rotatePhone{height:90px;position:relative;display:flex;justify-content:center;align-items:center}
.rotatePhone>span:first-child{display:block;font-size:88px;line-height:1;color:#f0d0a0;transform:rotate(-90deg)}
.rotatePhone .rotateArrow{font-size:34px;position:absolute;right:-35px;top:27px;color:#e7b967;animation:rotateHint 2s ease-in-out infinite}
@keyframes rotateHint{50%{transform:rotate(55deg)}}
@media (orientation:portrait) and (pointer:coarse){#orientationOverlay{display:flex}}
/* Short landscape screens: minimize furniture; preserve large thumb targets. */
@media (orientation:landscape) and (pointer:coarse){
 .topline{padding-top:max(4px,env(safe-area-inset-top))}
 #joystick{bottom:max(10px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));width:clamp(92px,13vh + 40px,130px);height:clamp(92px,13vh + 40px,130px)}
 #buttons{bottom:max(10px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right));gap:clamp(5px,1.25vw,11px)}
 #buttons .action{width:clamp(53px,13vh,76px);height:clamp(53px,13vh,76px)}
 #buttons .action.attack{width:clamp(69px,18vh,100px);height:clamp(69px,18vh,100px)}
 #buttons .action small{font-size:clamp(8px,1.5vh,10px)}
 #buttons .action>span{font-size:clamp(21px,5vh,32px)}
 #buttons .action.attack>span{font-size:clamp(27px,7vh,40px)}
 #bossHud{top:clamp(38px,10vh,78px)}
 #heroHud{top:clamp(62px,16vh,100px)}
 .topActions button{min-height:34px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:430px){
 .branding b{font-size:11px}.branding small{display:none}.sigil{font-size:20px}
 #bossHud{left:57%;width:39vw;top:39px}
 .bossLabel b{font-size:11px}.bossLabel small{font-size:7px}.bossMini{display:none}
 .lockStatus{font-size:8px;padding:3px 4px}
 #heroHud{left:max(6px,env(safe-area-inset-left));top:67px;width:148px;max-width:24vw;padding:6px}
 .heroHead b{font-size:9px}.heroHead span{font-size:7px}
 .objective{display:none}
 .topActions .fs-label{display:none}
 #warning{top:22%;font-size:10px;max-width:70vw;white-space:normal}
 #buttons .action{width:56px;height:56px}
 #buttons .action.attack{width:76px;height:76px}
 #joystick{width:100px;height:100px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-width:700px){
 .bossTags #bossPhase{display:none}
 .lockStatus{font-size:7px}
 #bossHud{left:60%;width:44vw}
 #heroHud{max-width:135px}
 #buttons .action{width:50px;height:50px}
 #buttons .action.attack{width:66px;height:66px}
 #joystick{width:85px;height:85px}
}
@media (prefers-reduced-motion:reduce){.rotatePhone .rotateArrow{animation:none}}

/* v0.4 - free-floating joystick and MOBA-like right-hand skill cluster.
   Safe-area aware and intentionally self-contained for future mobile UI tuning. */
#touchControls{isolation:isolate}
#joyZone{position:absolute;left:0;bottom:0;width:min(42vw,430px);height:min(64dvh,370px);touch-action:none;pointer-events:auto;overflow:visible}
#joystick{position:absolute;left:28%;top:60%;bottom:auto;width:clamp(90px,17vh,125px);height:clamp(90px,17vh,125px);transform:translate(-50%,-50%);pointer-events:none;touch-action:none;transition:opacity .13s;opacity:1}
#joystick.idle{opacity:.34}
#knob{transition:none}
#buttons{--btnSize:clamp(49px,12.8vh,69px);position:absolute;right:max(15px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:calc(var(--btnSize)*4.35);height:calc(var(--btnSize)*3.55);display:block;pointer-events:none}
#buttons .action{position:absolute;order:initial;touch-action:none;pointer-events:auto;display:flex;width:var(--btnSize);height:var(--btnSize);padding:0;line-height:1;border-radius:50%;overflow:visible;transition:filter .1s}
#buttons .action>span{font-size:clamp(19px,4.4vh,29px);line-height:1;pointer-events:none}
#buttons .action small{font-size:clamp(8px,1.75vh,10px);line-height:1.15;pointer-events:none}
#buttons .action.attack{width:calc(var(--btnSize)*1.34);height:calc(var(--btnSize)*1.34);right:0;bottom:2%;box-shadow:0 0 0 3px #f0c48032,0 5px 13px #0009}
#buttons .action.attack>span{font-size:clamp(29px,6.5vh,43px)}
#buttons .action.s1{right:36%;bottom:13%;background:radial-gradient(circle at 30% 20%,#348f9e,#173d60 77%);border-color:#77e4ea}
#buttons .action.s2{right:36%;bottom:54%;background:radial-gradient(circle at 30% 20%,#6a5bab,#2e295d 77%);border-color:#aca3ff}
#buttons .action.ultimate{right:2%;bottom:74%;background:radial-gradient(circle at 30% 20%,#b680b0,#532d64 76%);border-color:#f7bae6;box-shadow:0 0 13px #fcbafa5b,0 5px 12px #0008}
#buttons .action.dodge{right:73%;bottom:1%;background:radial-gradient(circle at 30% 20%,#4d7481,#263c52 78%);border-color:#90b6c7}
#buttons .action.lock{right:76%;bottom:57%;width:calc(var(--btnSize)*.80);height:calc(var(--btnSize)*.80);background:radial-gradient(circle at 30% 20%,#476470,#1d2d3f);border-color:#a3c6d5}
#buttons .action.lock small{font-size:8px}
#buttons .action .cd{position:absolute;inset:0;border-radius:50%;display:none;align-items:center;justify-content:center;background:#101522ca;color:#f8e6cb;font-size:clamp(15px,3.3vh,22px);font-style:normal;font-weight:900;text-shadow:0 2px 3px #000;pointer-events:none;border:1px solid #bfb3ac80}
#buttons .action.cooldown .cd{display:flex}
#buttons .action:disabled{opacity:.72;filter:saturate(.56)}
#buttons .action:active{transform:scale(.93)}
#weaponBtn{border-color:#8fdce688;white-space:nowrap}
@media (orientation:landscape) and (pointer:coarse){
 #joystick{width:clamp(84px,22vh,118px);height:clamp(84px,22vh,118px);top:60%;left:30%;bottom:auto}
 #joyZone{width:min(41vw,420px);height:60dvh}
 #buttons{--btnSize:clamp(49px,13.2vh,68px);width:calc(var(--btnSize)*4.35);height:calc(var(--btnSize)*3.55);right:max(11px,env(safe-area-inset-right));bottom:max(13px,env(safe-area-inset-bottom));gap:0}
 #buttons .action{width:var(--btnSize);height:var(--btnSize)}
 #buttons .action.attack{width:calc(var(--btnSize)*1.34);height:calc(var(--btnSize)*1.34)}
 #buttons .action.lock{width:calc(var(--btnSize)*.80);height:calc(var(--btnSize)*.80)}
 .topActions #weaponBtn{min-height:31px;padding:5px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:390px){
 #buttons{--btnSize:clamp(46px,14vh,54px);bottom:max(9px,env(safe-area-inset-bottom))}
 #joystick{width:93px;height:93px}
 #weaponLabel{font-size:9px}
 #buttons .action small{font-size:7px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-width:700px){
 #buttons{--btnSize:clamp(44px,13vh,52px)}
 #buttons .action{width:var(--btnSize);height:var(--btnSize)}
 #buttons .action.attack{width:calc(var(--btnSize)*1.34);height:calc(var(--btnSize)*1.34)}
 #buttons .action.lock{width:calc(var(--btnSize)*.80);height:calc(var(--btnSize)*.80)}
 #joystick{width:85px;height:85px}
}
@media (pointer:fine){#joyZone{opacity:.18;pointer-events:none}#buttons{opacity:.82}}
@media (orientation:landscape) and (pointer:coarse) and (max-width:760px){
 .bossTags #bossPhase{display:none!important}
 #bossHud .bossLabel b{font-size:11px;white-space:nowrap}
 #bossHud .bossIcon{font-size:15px}
 #bossHud .lockStatus{font-size:7px;padding:2px 4px;letter-spacing:0}
 #bossHud .bossLabel{gap:4px}
}

/* v0.6 — mobile thumb feedback / multi-pointer action responsiveness */
#buttons .action{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;will-change:transform}
#buttons .action.touching{transform:scale(.91);filter:brightness(1.34) saturate(1.18);box-shadow:0 0 0 3px #fff4,0 0 22px #e5b8788c}
#buttons .action.buffered:not(:disabled){box-shadow:0 0 0 3px #c7eff49a,0 0 15px #addde6aa}
#buttons .action.attack.touching{box-shadow:0 0 0 4px #ffe09b9e,0 0 24px #edb973af}
#joyZone,#buttons,#buttons button{-webkit-tap-highlight-color:transparent;touch-action:none}

/* v0.7 — stagger/break readability, small-screen accessibility, soft impact flash. */
.staggerLabel{display:flex;justify-content:space-between;gap:9px;margin-top:8px;font-size:9px;font-weight:800;letter-spacing:1px;color:#f5d996}
.staggerLabel #staggerState{color:#ddd6c6;font-size:9px;letter-spacing:.3px}
.staggerBar{height:8px;margin-top:4px;background:#252839;border:1px solid #9c8b5d92;border-radius:4px;overflow:hidden}
#staggerFill{height:100%;width:0;background:linear-gradient(90deg,#987e39,#eed16e,#fff1b5);transition:width .14s ease;box-shadow:0 0 12px #ffdd74aa}
#staggerFill.broken{background:linear-gradient(90deg,#f8bb63,#fff0ae)}
#staggerFill.immune{background:linear-gradient(90deg,#566274,#a0a8b7);box-shadow:none}
#breakBanner{position:absolute;z-index:6;top:32%;left:50%;transform:translate(-50%,-5px) scale(.9);opacity:0;pointer-events:none;white-space:nowrap;text-align:center;font:900 clamp(14px,3.0vw,26px) Georgia,serif;letter-spacing:1.4px;color:#ffe6a6;text-shadow:0 2px 3px #090a12,0 0 16px #eab34e;transition:opacity .1s,transform .14s}
#breakBanner:before{content:'⚡ STAGGER BREAK';display:block}
#breakBanner:after{content:'BOSS DOWN · +25% DAMAGE';display:block;font:800 clamp(8px,1.5vw,12px) Trebuchet MS,system-ui,sans-serif;letter-spacing:1px;margin-top:3px;color:#fff9d2}
#breakBanner.active{opacity:1;transform:translate(-50%,0) scale(1)}
#impactFlash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 55% 45%,#ffeacb22 5%,transparent 65%)}
#soundBtn[aria-pressed=false]{color:#999;opacity:.78}
@media(orientation:landscape) and (pointer:coarse) and (max-height:430px){
 .staggerLabel{font-size:7px;margin-top:5px}.staggerLabel #staggerState{font-size:7px}
 .staggerBar{height:6px;margin-top:3px}
 #breakBanner{top:32%;left:54%;font-size:clamp(13px,3vw,18px)}
 .topActions #soundBtn{min-width:31px;padding:4px 6px}
}
@media(orientation:landscape) and (pointer:coarse) and (max-width:700px){
 .staggerLabel #staggerState{font-size:6px;letter-spacing:0}
 .staggerLabel{font-size:7px}
}
@media(prefers-reduced-motion:reduce){#breakBanner{transition:none}#impactFlash{display:none}}

/* v0.8: keep endurance HP and AI stance readable on landscape phones,
   without the attack warning obscuring the boss health/stagger bars. */
#bossIntent{font-variant-numeric:tabular-nums}
@media (orientation:landscape) and (pointer:coarse) and (max-height:430px){
  #bossHud .bossMini{display:flex;margin-top:3px;font-size:7px;gap:8px}
  #bossIntent{max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #bossHp{white-space:nowrap;font-weight:800;color:#f1ceb2}
  #warning{top:37%;left:54%}
}

/* v1.0 Eldermere Fasa A: HUD for town only; arena controls remain isolated. */
.inTown #bossHud,.inTown #breakBanner,.inTown #heroHud,.inTown #buttons,.inTown #weaponBtn,.inTown #warning{display:none!important}
#townHud,#townMinimap,#townPrompt,#townButtons{display:none}
.inTown #townHud,.inTown #townMinimap,.inTown #townButtons{display:block}
#townHud{position:fixed;z-index:5;top:clamp(45px,10vh,75px);left:max(12px,env(safe-area-inset-left));width:min(305px,39vw);pointer-events:none;background:#172c2ac9;border:1px solid #adc79777;border-radius:9px;padding:12px 13px;box-shadow:0 7px 24px #0007;text-shadow:0 1px 2px #000}
.townHudTitle{display:flex;align-items:center;gap:6px;color:#f0d79a;font-family:Georgia,serif;font-size:14px;white-space:nowrap}
.townHudTitle small{font-family:system-ui,sans-serif;font-size:8px;color:#a4deb5;padding:3px 5px;border-radius:4px;border:1px solid #89c6a466;margin-left:auto;letter-spacing:.5px}
#townDistrict{font-size:12px;font-weight:900;color:#e8dfce;margin-top:8px}
#townGuide{font-size:10px;line-height:1.5;color:#c6d6bd;margin-top:4px}
#townMinimap{position:fixed;z-index:5;top:clamp(47px,10vh,75px);right:max(13px,env(safe-area-inset-right));width:151px;padding:5px 7px 6px;background:#132c2cc9;border:1px solid #8bc4a377;border-radius:8px;box-shadow:0 5px 20px #0009;text-align:center;pointer-events:none}
#townMinimap canvas{width:136px;height:108px;display:block;border:1px solid #a7c1ae55;border-radius:4px}
#townMinimap span{display:block;color:#c7e5d3;font-size:7px;letter-spacing:.6px;margin-top:3px}
.inTown #townPrompt:not([hidden]){display:flex}
#townPrompt{position:fixed;z-index:8;bottom:22%;left:50%;transform:translateX(-50%);flex-direction:column;align-items:center;gap:2px;background:#15312fea;border:1px solid #a0c8a5;border-radius:8px;padding:9px 16px;white-space:nowrap;pointer-events:none;box-shadow:0 9px 22px #0009}
#townPromptLabel{font-weight:900;font-size:11px;color:#f3e8c6}#townPromptHelp{font-size:9px;color:#c3d4be}
#townButtons{position:absolute;z-index:7;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:195px;height:130px;pointer-events:none}
#townButtons .townAction{position:absolute;pointer-events:auto;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;border:2px solid #b9c9b7;color:#f3e4c5;background:radial-gradient(circle at 30% 25%,#496f69,#1b393d);box-shadow:0 6px 17px #0009;width:69px;height:69px}
#townButtons .townAction span{font-size:26px}#townButtons .townAction small{font-size:8px;font-weight:900}#townButtons .townAction.interact{right:0;bottom:4px;width:89px;height:89px;border-color:#e9ce94;background:radial-gradient(circle at 30% 25%,#927952,#3e4234)}
#townButtons .townAction.run{right:101px;bottom:25px}#townButtons .townAction:disabled{opacity:.5;filter:grayscale(.6)}#townButtons .townAction.touching{transform:scale(.91);filter:brightness(1.35)}
.townMenuPanel{position:fixed;z-index:22;inset:0;display:grid;place-items:center;background:#0c151ad9;padding:12px;backdrop-filter:blur(3px)}
.townMenuCard{width:min(480px,92vw);max-height:90dvh;overflow-y:auto;background:linear-gradient(135deg,#273939,#15222c);border:1px solid #b3a27b;border-radius:12px;box-shadow:0 15px 40px #000d;padding:17px;color:#e5e2d5}
.townMenuCard header{display:flex;justify-content:space-between;align-items:center;font:800 18px Georgia,serif;color:#e9cf96;letter-spacing:1px}.townMenuCard header button{background:none;border:1px solid #8f9684;border-radius:6px;padding:5px 10px}
.townTabs{display:flex;gap:7px;margin:13px 0}.townTabs button{flex:1;min-height:40px;background:#243c3f;border:1px solid #647978;border-radius:6px;font-size:11px;font-weight:900}.townTabs button.selected{border-color:#d9ba73;background:#5b5842;color:#fff1c8}
#townMenuBody h3{font-size:13px;color:#eee4cb}#townMenuBody p{font-size:11px;line-height:1.6;color:#b3c5c3}.townMenuCard footer{border-top:1px solid #55716a;font-size:9px;margin-top:15px;padding-top:10px;color:#afc4bc}
.itemRow{display:flex;align-items:center;gap:12px;border:1px solid #5b7063;background:#263c3a;border-radius:7px;padding:12px}.itemRow>span{font-size:25px}.itemRow b,.itemRow small{display:block}.itemRow small{font-size:10px;color:#aebfb6}.itemRow i{margin-left:auto;font-size:10px}.statRow{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #ffffff18;font-size:11px;gap:10px}.statRow b{text-align:right;color:#e9deb7}
#returnTownBtn{margin:9px 6px 0;padding:10px 17px;min-height:37px;border-radius:5px;background:#355349;border:1px solid #a2d4ba;color:#e2f5e9;font-size:11px;font-weight:900}
@media(pointer:coarse) and (orientation:landscape){
 #townHud{top:42px;left:max(6px,env(safe-area-inset-left));width:min(240px,32vw);padding:7px 9px}
 .townHudTitle{font-size:clamp(10px,1.7vw,13px)}.townHudTitle small{font-size:6px}#townDistrict{font-size:11px;margin-top:3px}#townGuide{font-size:8px;line-height:1.3;margin-top:2px}
 #townMinimap{top:42px;right:max(6px,env(safe-area-inset-right));width:112px;padding:3px}#townMinimap canvas{width:104px;height:83px}#townMinimap span{font-size:6px}
 #townButtons{bottom:max(8px,env(safe-area-inset-bottom));right:max(9px,env(safe-area-inset-right));width:160px;height:105px}
 #townButtons .townAction{width:58px;height:58px}#townButtons .townAction.interact{width:76px;height:76px}#townButtons .townAction.run{right:80px;bottom:16px}#townButtons .townAction span{font-size:23px}#townPrompt{bottom:19%;padding:6px 9px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:360px){.inTown #townHud{top:35px;width:27vw}#townMinimap{top:35px}.townHudTitle small{display:none}#townGuide{display:none}#townPrompt{bottom:22%}}

.inTown #hudBottom{display:none!important}

/* Town artwork appears behind the start screen, never the boss arena. */
.townIntro #bossHud,.townIntro #heroHud,.townIntro #buttons,.townIntro #hudBottom,.townIntro #townButtons{display:none!important}

/* v1.0.1: per-scene palette, outdoor daylight / cozy indoor, boss remains dark. */
.inTown #shade,.townIntro #shade{
 background:linear-gradient(180deg,#fff7d909 0%,transparent 25%,transparent 83%,#38502210 100%);
}
.inTown .branding b,.townIntro .branding b{text-shadow:0 2px 3px #30402b}
.inTown #townHud,.inTown #townMinimap{
 background:#264a38db;border-color:#d6e6aa9c;box-shadow:0 5px 20px #25402a70;
}
.inInterior #townHud,.inInterior #townMinimap{background:#4b3829e8;border-color:#e1ba88a8}
.inInterior #townHudTitle{color:#ffe6b4}
#sceneTransition{position:fixed;inset:0;z-index:16;pointer-events:none;opacity:0;background:#fff5cc}
#sceneTransition.play{animation:sceneTransfer .52s ease-in-out both}
@keyframes sceneTransfer{0%{opacity:0}28%{opacity:.89}60%{opacity:.70}100%{opacity:0}}


#npcBubbleLayer{position:fixed;inset:0;z-index:12;pointer-events:none}
.npcBubble{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:28px;max-width:88px;padding:2px 6px;border-radius:999px;border:1px solid #efe3be;background:#fff7ddf0;color:#5e4633;font:700 8px/1.05 system-ui,sans-serif;letter-spacing:.1px;box-shadow:0 2px 7px #0005;white-space:nowrap;transform:translate(-50%,-50%)}
.npcBubble::after{content:'';position:absolute;left:50%;bottom:-4px;width:7px;height:7px;background:inherit;border-right:1px solid #efe3be;border-bottom:1px solid #efe3be;transform:translateX(-50%) rotate(45deg)}
.npcBubble.buyer{background:#eef8e9f2;color:#36563b;border-color:#cae4c6}
.npcBubble.buyer::after{border-right-color:#cae4c6;border-bottom-color:#cae4c6}
@media(pointer:coarse) and (orientation:landscape){.npcBubble{font-size:7px;padding:2px 5px;max-width:72px}}

#fountainFxLayer{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:none}

/* Three.js v1.1 — unobtrusive engine/model verification in Town and Boss. */
#engineStatus{position:fixed;z-index:14;left:max(12px,env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));padding:5px 9px;font:800 9px/1.2 ui-monospace,monospace;letter-spacing:.7px;border:1px solid #e0b16d;color:#f8e7bc;background:#2c3738da;border-radius:6px;pointer-events:none;max-width:44vw}
#engineStatus[data-mode="ok"]{border-color:#a1d3b6;color:#c3f6d7}
#engineStatus[data-mode="fallback"]{border-color:#b96c4b;color:#ffdcb2}
.new3DEngine #weaponBtn{display:none!important}
@media(pointer:coarse) and (orientation:landscape){#engineStatus{font-size:7px;bottom:max(3px,env(safe-area-inset-bottom));left:calc(8px + env(safe-area-inset-left));max-width:37vw;padding:3px 5px}}