:root{font-family:system-ui,-apple-system,'Noto Sans TC',sans-serif;color:#f1f1dd;background:#091c27;--gold:#dfc58a;--mint:#a5dbc1;--panel:#102a2dec;--line:#476260;--muted:#a2bcb6;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select{font:inherit}button{min-width:44px;min-height:44px;border:1px solid #69807877;border-radius:8px;background:#153438;color:#e7edda;padding:9px 14px;cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){background:#27514c;border-color:#c8cf9d}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e7c783;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button.selected,button[aria-pressed=true]{background:#406251;border-color:var(--gold);box-shadow:inset 0 0 0 1px #ddc69355}.primary{background:#dbc891;color:#233531;border-color:#f4e3b6;font-weight:750}.primary:hover:not(:disabled){background:#f0dfad}.secondary{background:#193b3b;border-color:#8ba89a}.icon-button,.round-button{padding:0;width:44px;height:44px;display:grid;place-items:center;font-size:22px}.round-button{border-radius:50%}.text-button{background:transparent;border:none;padding:5px 9px;font-size:11px;color:#d7d8b5}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--gold);font-weight:750}.small-label{font-size:10px;color:var(--muted)}[hidden]{display:none!important}#game-shell,#world{position:absolute;inset:0;width:100%;height:100%}#world{display:block;touch-action:none;outline:none}#loading,#fatal{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#24453d,#081b29 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:100}#loading .sigil{font-size:70px;color:var(--gold)}#loading h1{font-size:32px;letter-spacing:10px;margin:14px}#loading p{color:var(--muted);font-size:13px}progress{height:5px;width:230px;accent-color:var(--gold)}#hub{position:absolute;inset:0;pointer-events:none}.hub-heading{position:absolute;left:5vw;top:8vh;max-width:50%;text-shadow:0 2px 15px #091c27}.hub-heading h1{font-size:clamp(35px,5vw,70px);letter-spacing:8px;line-height:1.1;margin:15px 0}.hub-heading h1 span{display:block;font-size:12px;letter-spacing:5px;margin:12px 0 24px}.hub-heading>p{font-size:14px;color:#dbe4cc}.hub-story{font-size:12px;line-height:2;color:#c6d4be;margin-top:28px}.hub-panel{pointer-events:auto;position:absolute;right:24px;top:24px;bottom:24px;width:370px;max-width:43%;overflow:auto;padding:22px;background:linear-gradient(140deg,#173b36ee,#10252fe8);border:1px solid #7e947a66;border-radius:14px;box-shadow:0 18px 80px #0004;scrollbar-width:thin;scrollbar-color:#718b72 transparent}.hub-panel>header,.loadout-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.hub-panel #hero-roster{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:15px 0}.hub-panel #hero-roster button{padding:5px 2px;min-height:72px;font-size:10px;background:#0b202b88}.hub-panel #hero-roster button.selected{background:#476148cc}.hub-panel #hero-roster img{width:45px;height:45px;object-fit:contain;display:block;margin:auto}.hero-summary>div:first-child{display:flex;align-items:center;gap:12px}.hero-summary h2{font-size:26px;letter-spacing:1px;margin:5px 0}.hero-summary>div>span{font-size:11px;color:var(--mint)}.hero-summary p{font-size:12px;line-height:1.7;color:#cad5c2;margin:6px 0 12px}.signature-description{background:#071f2855;border-left:2px solid var(--gold);padding:9px 11px;margin-bottom:16px}.signature-description b{display:block;font-size:12px;color:#ebdcae;margin-bottom:5px}.signature-description span{font-size:11px;line-height:1.7;display:block}.loadout-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:7px 0}.loadout-grid label{font-size:11px;color:#c3d2bd;display:flex;align-items:center;justify-content:space-between;gap:8px}.loadout-grid select{padding:7px;background:#0d292e;color:#e5ebd4;border:1px solid #648076;border-radius:6px;min-height:40px;font-size:11px}.check-label{justify-content:flex-start!important}input[type=checkbox]{width:18px;height:18px;accent-color:#a6cfac}.skill-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.skill-chips button{font-size:10px;padding:6px 9px;min-height:34px}.tool-permissions{display:flex;align-items:center;flex-wrap:wrap;font-size:10px;gap:5px 9px;color:#bdcbb8}.tool-permissions label{display:flex;align-items:center;gap:2px;min-height:32px}.tool-permissions input{width:15px;height:15px}.inline-feedback{font-size:10px;line-height:1.7;color:#e0d8b1;margin:10px 0;min-height:18px}.hub-launch{display:grid;grid-template-columns:1fr;gap:7px}.hub-launch button{font-size:12px}.fiction-note{font-size:9px;line-height:1.7;color:#9bb0a9;margin:13px 0 0}#hub-audio{pointer-events:auto;position:absolute;left:24px;bottom:24px}#battle-ui{position:absolute;inset:0;pointer-events:none}#battle-ui button,#joystick,#minimap{pointer-events:auto}.battle-top{position:absolute;left:20px;right:20px;top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:14px;padding:8px 10px;background:linear-gradient(90deg,#112d2be0,#132a2ed0);border:1px solid #9cb19355;border-radius:10px}.core-side{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.core-side b{font-size:11px;white-space:nowrap}.core-side span{font-size:10px;color:#d7e0c8}.core-side meter{height:12px;flex:1;min-width:40px;max-width:200px}.battle-score{text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:260px;font-size:11px}.battle-score>b{color:var(--gold)}.battle-score small{flex-basis:100%;font-size:9px;color:#b9d5c4}.hero-hud{position:absolute;left:22px;top:84px;display:flex;align-items:center;gap:8px;background:#102b2cd9;padding:7px;border:1px solid #647d6f55;border-radius:10px}.hero-hud img{width:44px;height:44px;object-fit:contain}.hero-hud>div{width:105px;font-size:11px}.hero-hud span{font-size:9px;color:var(--gold);margin-left:6px}.hero-hud meter{display:block;width:100%;height:8px;margin-top:5px}#hero-energy{accent-color:#7dbad5}#minimap{position:absolute;right:24px;top:90px;width:144px;height:84px;background:#0d2630b8;border:1px solid #627e7d66;border-radius:8px;touch-action:none}#objective-toast{position:absolute;top:85px;left:50%;transform:translateX(-50%);font-size:12px;color:#e8dda9;background:#12322cdd;padding:8px 14px;border-radius:20px;opacity:0;transition:opacity .2s;max-width:45%;text-align:center}#objective-toast.visible{opacity:1}#tutorial-card{pointer-events:auto;position:absolute;top:84px;left:50%;transform:translateX(-50%);width:330px;max-width:45%;padding:12px 15px;background:#f0e8ccf2;color:#253c37;border:1px solid #e8cf91;border-radius:10px;box-shadow:0 8px 30px #0002}#tutorial-card>span{display:block;font-size:9px;letter-spacing:1px;color:#6b775f;margin-bottom:5px}#tutorial-card>b{font-size:14px}#tutorial-card p{font-size:11px;line-height:1.7;margin:6px 0}#tutorial-card>div{display:flex;justify-content:space-between}#tutorial-card .text-button{color:#486651;font-size:9px;min-height:30px}#event-caption{position:absolute;bottom:165px;left:50%;transform:translateX(-50%);max-width:45%;padding:6px 10px;font-size:12px;color:#f2e2ad;text-shadow:0 1px 4px #000;text-align:center}#aim-message{position:absolute;bottom:175px;right:25px;max-width:290px;padding:8px 12px;background:#102a36ed;border:1px solid #8da6a9;border-radius:7px;font-size:11px}#aim-cancel{position:absolute;bottom:95px;left:53%;transform:translateX(-50%);border-radius:24px;border:2px solid #d69b8d;background:#543731ef;color:#ffe4d6;z-index:8;min-width:95px}#aim-cancel.hot{background:#bd5c4c;box-shadow:0 0 0 8px #d46b5040}#joystick{position:absolute;left:34px;bottom:28px;width:132px;height:132px;touch-action:none;user-select:none;border-radius:50%;background:#102d3270;border:1px solid #accbb04d}.stick-ring{position:absolute;inset:19px;border:1px solid #c4d3ba44;border-radius:50%}#stick-knob{position:absolute;width:48px;height:48px;border-radius:50%;left:41px;top:41px;background:radial-gradient(circle at 35% 30%,#bed4baaa,#5d897777);border:1px solid #e3e3c477;box-shadow:0 4px 15px #0003;pointer-events:none}#joystick>span{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:#a9c5b5;pointer-events:none}.tactical-tools{position:absolute;left:190px;bottom:25px;display:flex;gap:7px}.tactical-tools button{width:53px;height:57px;padding:3px;font-size:20px;background:#102d30e0}.tactical-tools span{display:block;font-size:9px;margin-top:3px}.combat-tools{position:absolute;right:28px;bottom:26px;width:235px;height:150px}.ability{touch-action:none;position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:7px;background:radial-gradient(circle at 35% 20%,#3f6656,#173a3c);box-shadow:0 4px 18px #0004;user-select:none}.ability small{font-size:10px;color:#d9d0ac;min-height:13px}.ability>span{font-size:11px}.ability.signature{width:82px;height:82px;right:0;top:0;border:2px solid #e1c58b}.ability.small{width:58px;height:58px;left:28px;top:0;border-color:#84a9a7}#tool-rally{left:0;top:74px}.attack{position:absolute;width:72px;height:72px;right:48px;bottom:0;border-radius:50%;border:2px solid #b6c9bb;background:#294d45;font-size:13px}.ability.cooldown{background:#182a30;color:#8caaa4}.ability.invalid{border-color:#b2786c}#respawn-banner{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:#122d32eb;padding:20px 30px;border:1px solid #a5c0a077;border-radius:12px;text-align:center;font-size:15px}#renderer-note{position:absolute;left:8px;bottom:3px;font-size:8px;color:#bad0c066}#intro,#result,#rotate-prompt{position:absolute;inset:0;z-index:20;background:#071d25a8;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}#intro>div{max-width:550px;padding:35px;border:1px solid #afbc9077;background:#102f2cdc;border-radius:12px}#intro h2{font-size:28px;font-weight:600}#intro p{line-height:2;font-size:14px;color:#cedcc3}.result-card{width:560px;max-width:90%;max-height:90%;overflow:auto;background:#15342feb;border:1px solid #d4c48b88;border-radius:18px;padding:30px;text-align:left}.result-card h2{font-size:35px;margin:12px 0}.result-card>p{font-size:13px;line-height:1.8;color:#c8d6bf}#result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}#result-stats>div{background:#08202977;border-radius:8px;padding:12px;font-size:10px;color:#acc5b8}#result-stats b{display:block;font-size:24px;color:var(--gold);margin:7px 0}#result-learning{font-size:12px;line-height:1.8;padding:12px;border-left:2px solid var(--gold);background:#243f3666}.result-actions{display:flex;gap:9px;margin-top:20px}.result-actions button{flex:1;font-size:12px}#rotate-prompt{z-index:60;background:#102a2ff5;flex-direction:column}#rotate-prompt>span{font-size:60px;color:var(--gold)}#rotate-prompt h2{font-size:20px}#rotate-prompt p{font-size:12px;color:#b9cfbf}#modal-backdrop{position:absolute;inset:0;z-index:40;background:#06151c99;display:flex;justify-content:center;align-items:center;padding:20px;pointer-events:auto}#modal{width:590px;max-width:94vw;max-height:90vh;background:linear-gradient(145deg,#193a33,#102834);border:1px solid #91a88a88;border-radius:14px;box-shadow:0 25px 80px #0005;display:flex;flex-direction:column}#modal>header{padding:18px 21px 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #6e897355}#modal h2{font-size:22px;margin:7px 0}#modal-content{overflow:auto;padding:18px 21px;font-size:12px;line-height:1.8}#modal-footer{padding:12px 21px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #6e897355}#modal-footer:empty{display:none}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.option-card{padding:12px;border:1px solid #67857966;border-radius:9px;background:#0e2b30;font-size:11px}.option-card b{display:block;font-size:15px;color:#e5d9a8}.option-card p{font-size:10px;line-height:1.7;color:#bdd0c1}.option-card button{width:100%;font-size:11px}.stat-delta{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #67857944;font-size:12px}.stat-delta b{color:#e3d6a7}.reason{padding:8px 11px;background:#472f2c66;border-left:2px solid #cb9c89;font-size:11px;color:#e3c8b8}.receipt{padding:12px;background:#3d665744;border:1px solid #9fcca266;border-radius:9px;color:#cee8c0}.menu-list{display:grid;gap:8px}.menu-list button{text-align:left}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;gap:15px}.setting-row input[type=range]{width:160px;accent-color:#d8c48a}.setting-row select{padding:9px;background:#183b39;border:1px solid #769582;color:#eee7cc;border-radius:6px}.learning-block{padding:12px;border:1px solid #74927b44;background:#0a242c77;border-radius:8px;margin:9px 0}.learning-block b{color:var(--gold)}.learning-block p{margin:6px 0;color:#c6d7c3}.learning-block a{color:#abdcc7}.plan-details{margin:12px 0;padding:12px;background:#08212a88;border-radius:8px}.plan-details p{margin:4px 0}#toast{position:absolute;bottom:190px;left:50%;transform:translateX(-50%);z-index:70;max-width:70%;padding:10px 16px;background:#0a252ded;border:1px solid #a5bc9f88;border-radius:24px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s}#toast.visible{opacity:1}
@media(max-height:600px){.hub-panel{top:12px;bottom:12px;right:12px;padding:12px 15px;width:340px}.hub-heading{top:8vh;left:4vw}.hub-heading h1{font-size:40px}.hub-story{margin-top:14px;font-size:11px}.hub-panel #hero-roster{margin:9px 0;gap:4px}.hub-panel #hero-roster button{min-height:58px}.hub-panel #hero-roster img{width:34px;height:34px}.hero-summary h2{font-size:22px}.hero-summary p{font-size:10px}.signature-description{margin-bottom:8px;padding:6px 9px}.loadout-heading{margin-top:8px}.battle-top{top:7px;left:10px;right:10px;padding:5px 8px;gap:9px}.hero-hud{top:66px;left:13px;padding:4px}.hero-hud img{height:35px;width:35px}.hero-hud>div{width:85px}.hero-hud .icon-button{width:36px;min-width:36px}#minimap{top:68px;right:14px;width:105px;height:61px}#tutorial-card{top:65px;padding:8px 11px;width:290px;max-width:44%}#tutorial-card>b{font-size:12px}#tutorial-card p{font-size:10px;margin:4px 0}#tutorial-card .text-button{font-size:8px;min-height:28px}#objective-toast{top:65px;font-size:10px}#joystick{width:112px;height:112px;left:22px;bottom:17px}#stick-knob{left:31px;top:31px}.tactical-tools{left:150px;bottom:14px;gap:5px}.tactical-tools button{width:45px;height:49px;font-size:17px}.tactical-tools span{font-size:8px}.combat-tools{right:18px;bottom:16px;width:202px;height:132px}.ability.signature{width:72px;height:72px}.ability.small{width:51px;height:51px;left:25px}#tool-rally{top:65px;left:0}.attack{width:63px;height:63px;right:38px}.ability>span{font-size:10px}#event-caption{bottom:142px;font-size:11px}#aim-message{bottom:153px;font-size:10px}#aim-cancel{bottom:77px;left:53%;min-height:44px}#modal{max-height:94vh}#modal>header{padding:11px 17px 8px}#modal h2{font-size:18px}#modal-content{padding:12px 17px}#modal-footer{padding:9px 17px}.result-card{padding:20px;max-height:94%}.result-card h2{font-size:26px;margin:9px 0}#result-stats{margin:10px 0}#result-stats>div{padding:8px}#result-stats b{font-size:20px}#toast{bottom:150px}}
@media(max-width:700px) and (orientation:landscape){.core-side b{font-size:9px}.core-side span{font-size:9px}.battle-score{max-width:170px;font-size:10px;gap:6px}.battle-score small{font-size:8px}.hero-hud>div{width:65px}.hero-hud img{width:30px}.tactical-tools{left:138px;gap:3px}.tactical-tools button{width:44px;min-width:44px;padding:2px}.combat-tools{right:10px;width:174px}.ability.small{left:3px}#tool-rally{left:-14px}#joystick{left:14px}.hub-panel{max-width:49%;width:330px}.hub-heading{max-width:47%}.hub-heading h1{font-size:30px;letter-spacing:4px}.hub-heading>p{font-size:11px}.hub-heading h1 span{font-size:9px;letter-spacing:3px}.hub-story{font-size:10px}#tutorial-card{max-width:42%;left:51%}.hero-hud .icon-button{display:none}#minimap{width:85px;height:50px}.card-grid{gap:6px}.option-card{padding:8px}}
@media(orientation:portrait){.hub-heading{top:20px;left:20px;max-width:90%}.hub-heading h1{font-size:35px;letter-spacing:6px;margin:9px 0}.hub-heading h1 span{font-size:9px;margin:8px 0}.hub-heading>p,.hub-story{display:none}.hub-panel{left:14px;right:14px;top:160px;bottom:16px;width:auto;max-width:none;padding:16px}.hub-panel #hero-roster img{width:40px;height:40px}.hub-panel #hero-roster button{min-height:62px}#hub-audio{left:auto;right:17px;top:23px;bottom:auto}.battle-top{gap:5px}.core-side b{display:none}.battle-score{max-width:130px}.hero-hud{top:80px}.tactical-tools{left:50%;transform:translateX(-50%);bottom:155px}.combat-tools{right:12px;bottom:15px;width:185px}#joystick{left:14px;bottom:22px;width:112px;height:112px}#stick-knob{left:31px;top:31px}#tutorial-card{top:150px;max-width:90%;width:330px}#minimap{width:105px;height:61px}#event-caption{bottom:230px;max-width:85%}#aim-message{bottom:215px;max-width:80%}#aim-cancel{bottom:210px;left:50%}.card-grid{grid-template-columns:1fr}.option-card p{font-size:11px}.result-actions{flex-direction:column}#result-stats{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Tactical choices stay readable while the battle is paused. */
#modal-content button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;min-height:48px;margin:8px 0;padding:12px 14px;text-align:left;border:1px solid #4b6864;border-radius:10px;background:#183b3c;color:#f5ecd6}#modal-content button:disabled{opacity:.48;cursor:not-allowed}#modal-content button small{font-size:12px;line-height:1.5;color:#b6cac0}.choice-card{padding:10px 0;border-bottom:1px solid #42615d}.choice-card h3{margin:4px 0;font-size:15px}.choice-card p{font-size:13px}.skill-chip{display:inline-flex;align-items:center;min-height:44px;padding:5px 9px;border:1px solid #7a8d78;border-radius:9px;font-size:12px}.ability.unavailable{filter:saturate(.4);opacity:.66}#aim-cancel.active{background:#a14848;border-color:#ffb8a0}#modal-content label{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:20px}#modal-content details{font-size:12px;color:#bbcbc0;margin-top:18px}#modal-content summary{min-height:44px;padding-top:12px;cursor:pointer}.hero-hud .icon-button{min-width:44px;min-height:44px}
.advanced-loadout{margin:12px 0;font-size:12px;color:#b6cac0}.advanced-loadout summary{cursor:pointer;min-height:44px;padding:12px 0;line-height:1.5}.loadout-grid{grid-template-columns:1fr!important}.loadout-grid label{min-width:0}.loadout-grid select{width:100%;max-width:100%;font-size:11px}.hub-launch{position:sticky;bottom:-22px;background:#102a2d;padding:12px 0;z-index:2}.hub-panel{padding-bottom:12px}
.pad-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.pad-selector button{margin:0!important;text-align:center!important;align-items:center!important}.ability{position:relative;isolation:isolate}.ability:after{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#e5ca83 var(--cooldown,0deg),#adc8aa22 0);mask:radial-gradient(transparent 65%,#000 67%);pointer-events:none}.ability span{max-width:100%;font-weight:650;line-height:1.3}.ability small{font-size:10px;white-space:nowrap}.combat-tools .signature{box-shadow:0 4px 16px #071b2980,inset 0 0 16px #c4b46d20}.combat-tools .attack{box-shadow:0 3px 16px #071b2980}.tactical-tools button{box-shadow:0 2px 8px #071b2960}.tactical-tools button span{white-space:nowrap}
#practice-target-label{position:absolute;z-index:4;transform:translate(-50%,-100%);padding:7px 12px;border:1px solid #f3d68e;border-radius:7px;color:#fff2c7;background:#163638ed;font-size:13px;font-weight:700;pointer-events:none;box-shadow:0 3px 16px #0007;white-space:nowrap}#practice-target-label:after{content:'';position:absolute;bottom:-8px;left:calc(50% - 6px);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #f3d68e}
@media(max-width:700px) and (orientation:landscape){#recenter{display:grid!important;min-width:44px;min-height:44px}.hero-hud{max-width:190px}.hero-hud img{width:34px;height:40px}.hero-hud>div{min-width:75px}}
.ui-icon{display:block;width:23px;height:23px;flex:none;pointer-events:none}.tactical-tools .ui-icon{margin:auto auto 3px;color:#d9c895}.ability .ui-icon{width:21px;height:21px;margin:0 auto 3px;color:#e4ce8c}.ability.signature .ui-icon{width:26px;height:26px}.ability.signature span{font-size:12px}.ability.small span{font-size:11px}.ability.small .ui-icon{width:18px;height:18px;margin-bottom:1px}@media(max-height:420px){.ability .ui-icon{display:none}.tactical-tools .ui-icon{width:18px;height:18px}}
/* Preserve the deliberate thumb-pad layout; cooldown ring is absolute within it. */
.combat-tools .ability{position:absolute}
.product-guide{font-size:12px;color:#b6cac0;border-bottom:1px solid #7b8a6d40;padding-bottom:6px;margin:8px 0}.product-guide summary{min-height:44px;display:list-item;cursor:pointer;padding:12px 0}.product-guide p{line-height:1.7}.product-guide a{color:#e1ce97;display:inline-block;min-height:44px;padding:12px 0}.product-guide small{display:block;font-size:10px;line-height:1.6}
#tutorial-card .text-button{min-height:44px!important;font-size:10px!important}#objective-toast{pointer-events:none;min-height:44px;border:1px solid #d8b87599;z-index:5}#objective-toast.visible{pointer-events:auto}
#game-shell.danger:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 0 70px #b3444145}.battle-top,.hero-hud,.combat-tools,.tactical-tools,#joystick{z-index:3}
#result-stats>div{min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center}#result-stats span{font-size:11px;color:#b5c8ba}.result-card{overflow:auto}
@media(max-height:500px) and (orientation:landscape){#tutorial-card{top:62px;padding:6px 10px;width:300px;max-width:43%}#tutorial-card p{display:none}#tutorial-card>span{font-size:8px;margin-bottom:2px}#tutorial-card>b{display:block;font-size:12px;line-height:1.3}#tutorial-card>div{margin-top:0}#tutorial-card .text-button{padding:3px 6px;font-size:10px!important}#tutorial-card #tutorial-help{min-width:64px}}
/* Cancel occupies the existing attack-pad footprint while aiming: never the central ground target. */
.combat-tools #aim-cancel{left:auto;right:48px;bottom:0;transform:none;width:72px;height:72px;min-width:0;border-radius:50%;padding:6px;font-size:12px;line-height:1.3}.combat-tools #aim-cancel:not([hidden])~#attack-button{visibility:hidden}@media(max-height:600px){.combat-tools #aim-cancel{right:38px;bottom:0;width:63px;height:63px;left:auto}}

/* BF-G505: only the interactive battlefield owns gestures. Reading panels retain zoom. */
#battle-ui button { touch-action: manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
#world, #joystick, #battle-ui [data-ability] { touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
#battle-ui { overscroll-behavior:contain; }
#modal-content, .product-guide { -webkit-user-select:text; user-select:text; touch-action:pan-y pinch-zoom; }

/* BF-G502/503 — coherent thumb controls and separated planning decisions. */
.combat-tools { right:max(18px,env(safe-area-inset-right)); bottom:max(18px,env(safe-area-inset-bottom)); width:210px; height:190px; }
.combat-tools .attack { width:82px;height:82px;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:radial-gradient(circle at 35% 25%,#42675e,#183c3e);border:2px solid #f0d79a; }
.combat-tools .attack .ui-icon {display:block;width:27px;height:27px;color:#ffe3a4;}
.combat-tools .attack span {font-size:15px;font-weight:800}.combat-tools .attack small{font-size:11px;color:#e5e3cd}
.combat-tools .ability.signature {right:5px;top:0;width:68px;height:68px;}
.combat-tools #tool-aegis {left:25px;top:17px;width:56px;height:56px;}
.combat-tools #tool-rally {left:9px;top:98px;width:56px;height:56px;}
.combat-tools .ability .ui-icon {display:block;width:19px;height:19px;margin:0 0 2px;}
.combat-tools .ability.signature .ui-icon {width:23px;height:23px;}
.combat-tools .ability span {font-size:11px;line-height:1.15;white-space:nowrap;}
.combat-tools .ability small {font-size:11px;line-height:1.2;margin-top:2px;}
.combat-tools .ability[data-state=aiming] {border-color:#fff2aa;box-shadow:0 0 0 4px #edcd6955;background:#416b58;}
.combat-tools .ability[data-state=cooldown] small {font-size:17px;font-weight:800;color:#e3e6e3;}
.combat-tools .ability[data-state=energy] {border-color:#8cb7df;filter:none;}
.combat-tools .ability[data-state=energy] small {color:#add4ff;}
.combat-tools .ability[data-state=locked] small {color:#f2a99a;}
.combat-tools .ability[data-state=active] {border-color:#a5e8c6;box-shadow:0 0 0 2px #87cbae44;}
.combat-tools #aim-cancel {right:0;bottom:0;width:82px;height:82px;left:auto;background:#692e3c;border:2px solid #f3a58f;font-size:13px;font-weight:750;}
.combat-tools #aim-cancel.active {background:#a13e4a;box-shadow:0 0 0 4px #f0a88b55;}
#attack-status {position:absolute;right:max(18px,env(safe-area-inset-right));bottom:220px;width:220px;text-align:right;font-size:11px;line-height:1.5;color:#f2ead5;text-shadow:0 2px 3px #07191f;pointer-events:none;}
.tactical-tools {left:46%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);gap:10px;align-items:stretch;}
.tactical-tools #build-button {width:62px;height:54px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;}
.tactical-tools #upgrade-button {width:118px;height:54px;display:grid;grid-template-columns:24px 1fr;grid-template-rows:22px 18px;column-gap:3px;padding:6px 10px;text-align:left;}
.tactical-tools #upgrade-button .ui-icon {grid-row:1/3;width:22px;height:22px;margin:auto;}
.tactical-tools button span {font-size:13px;line-height:1.2;margin:0;font-weight:750;}
.tactical-tools #upgrade-button small {font-size:11px;white-space:nowrap;color:#c5d6cb;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.tactical-tools #upgrade-button.available {border-color:#e7c580;background:#315446;}
.tactical-tools .ui-icon {display:block;width:21px;height:21px;margin:0;}
#loadout-button,#query-button {display:none!important;}
#teleport-button {position:fixed;left:50%;bottom:95px;transform:translateX(-50%);width:90px;height:48px;font-size:12px;}
#hero-energy-value {display:block;font-size:10px;color:#a6d8e1;white-space:nowrap;}
#joystick {width:108px;height:108px;left:max(20px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));}
#stick-knob {left:29px;top:29px;}
.lesson-highlight {outline:3px solid #f3d28b;outline-offset:3px;}
#aim-message {left:auto;right:18px;bottom:220px;transform:none;max-width:240px;font-size:12px;background:#143835ec;border:1px solid #e5cb8b;padding:6px 9px;z-index:5;}
#battle-ui:has(#aim-message:not([hidden])) #attack-status {visibility:hidden;}
#modal {width:min(760px,94vw);max-height:92dvh;display:flex;flex-direction:column;}
#modal>header {flex:0 0 auto;}#modal-content {min-height:0;overflow:auto;overscroll-behavior:contain;}#modal>footer {flex:0 0 auto;padding-top:10px;}
#modal-footer #planning-return {min-width:160px;float:right;}
.planning-balance {display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:0 0 9px;color:#d9c58f;}
.planning-balance span {font-size:12px;color:#afcabe;}
#modal-content .planning-tabs {display:flex;gap:8px;border-bottom:1px solid #4d6a5c;padding-bottom:8px;margin-bottom:14px;position:sticky;top:0;background:#102c2d;z-index:2;}
#modal-content .planning-tabs button {width:auto;flex:1;align-items:center;text-align:center;min-height:44px;margin:0;padding:10px;font-size:13px;}
#modal-content button[aria-pressed=true] {background:#42624c;border-color:#edcf8a;}
#modal-content .unit-selector {display:flex;gap:6px;flex-wrap:wrap;}
#modal-content .unit-selector button {width:auto;flex:1 0 130px;min-height:44px;margin:0;padding:8px;font-size:12px;text-align:center;align-items:center;}
.upgrade-focus {margin-top:14px;padding:16px;border:1px solid #6b806b;border-radius:12px;background:#1d3d38;}
.upgrade-focus h3 {font-size:18px;margin:6px 0 14px;}.upgrade-focus p {font-size:13px;}
.upgrade-deltas {display:grid;grid-template-columns:1fr 1fr;gap:12px;}.upgrade-deltas p {display:flex;flex-direction:column;gap:6px;margin:0;padding:10px;border-radius:8px;background:#102f2f;}.upgrade-deltas b{font-size:19px;color:#f1d79a;}.upgrade-deltas span{color:#bcd0c3;font-size:12px;}
.growth-path {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.growth-card {padding:14px;background:#1b3c37;border:1px solid #607760;border-radius:12px;display:flex;flex-direction:column;}.growth-card h3{font-size:19px;line-height:1.3;margin:8px 0;}.growth-card p{font-size:13px;line-height:1.6;}.growth-card .growth-cost{color:#edd193;margin-top:auto;}
#modal-content .growth-card button.primary,#modal-content .upgrade-focus button.primary{background:#dcc891;color:#23372e;align-items:center;text-align:center;font-weight:750;}
.purchase-receipt {padding:10px 12px;border-radius:8px;background:#356049;color:#e3f6df;font-size:13px;}
@media(max-width:700px) and (orientation:landscape){
 .combat-tools{right:max(12px,env(safe-area-inset-right));bottom:14px;width:192px;height:178px;}
 .combat-tools .attack,.combat-tools #aim-cancel{width:76px;height:76px;right:0;bottom:0;}
 .combat-tools .ability.signature{width:64px;height:64px;right:4px;top:0;}
 .combat-tools #tool-aegis{width:52px;height:52px;left:18px;top:14px;}.combat-tools #tool-rally{width:52px;height:52px;left:4px;top:94px;}
 .combat-tools .ability span{font-size:11px;}.combat-tools .ability small{font-size:10px;}.combat-tools .ability[data-state=cooldown] small{font-size:16px;}
 .tactical-tools{left:45%;bottom:18px;gap:7px;}.tactical-tools #build-button{width:56px;height:50px;}.tactical-tools #upgrade-button{width:109px;height:50px;padding:4px 7px;}
 #attack-status{right:12px;bottom:204px;width:205px;font-size:10px;}#aim-message{right:12px;bottom:204px;max-width:210px;}
 #joystick{left:16px;bottom:18px;width:104px;height:104px;}#stick-knob{left:27px;top:27px;}
 #modal{max-height:94dvh;}#modal>header{padding-bottom:6px;}#modal>header h2{font-size:18px;}#modal>footer{padding-top:6px;}
 .growth-card{padding:11px;}.growth-card h3{font-size:17px;}.hero-hud>div{width:84px;}.hero-hud .icon-button{display:grid;}
}
.battle-top{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top));}
.hero-hud{left:max(18px,env(safe-area-inset-left));}#minimap{right:max(18px,env(safe-area-inset-right));}
#modal{max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);}
@media(orientation:portrait){.tactical-tools{left:50%;bottom:214px;}#attack-status{bottom:220px;}.growth-path{grid-template-columns:1fr;}}
/* Non-reading combat overlays cannot invoke native iOS text-selection menus. */
#battle-ui,#battle-ui * { -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; }
#practice-target-label[data-action=move] {pointer-events:auto;touch-action:manipulation;min-height:44px;cursor:pointer;}
@media(max-height:500px) and (orientation:landscape){#tutorial-card[data-stage=move] p{display:block;font-size:11px;line-height:1.35;margin:4px 0;max-width:260px;}#tutorial-card[data-stage=move]{max-width:290px;}}
#modal-backdrop{height:var(--viewport-height,100dvh);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
#modal{max-height:calc(var(--viewport-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);}
#modal-content{-webkit-overflow-scrolling:touch;}
#modal button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;}
.planning-summary{display:flex;align-items:center;gap:14px;margin-bottom:12px;}.planning-summary .planning-balance{flex:0 0 auto;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;}#modal-content .planning-summary .planning-tabs{position:static;flex:1;margin:0;padding:0;border:0;}
.unit-upgrade-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:start;}
#modal-content .unit-upgrade-layout .unit-selector{display:flex;flex-direction:column;gap:6px;}
#modal-content .unit-upgrade-layout .unit-selector button{flex:0 0 auto;width:100%;}
.unit-upgrade-layout .upgrade-focus{margin:0;}
@media(max-height:500px) and (orientation:landscape){
 #modal[data-planning]:not([data-planning=""]) > header{padding:4px 12px;min-height:48px;}#modal[data-planning]:not([data-planning=""]) > header .eyebrow{display:none;}#modal[data-planning]:not([data-planning=""]) h2{margin:2px 0;font-size:17px;}
 #modal[data-planning]:not([data-planning=""]) #modal-content{padding:8px 12px;}#modal[data-planning]:not([data-planning=""]) #modal-footer{padding:5px 12px;}
 .planning-summary{gap:10px;margin-bottom:8px;}.planning-summary .planning-balance{font-size:12px;}.planning-summary .planning-balance span{display:none;}
 #modal-content .planning-summary .planning-tabs button{padding:7px;min-height:44px;font-size:12px;}
 .unit-upgrade-layout{grid-template-columns:122px minmax(0,1fr);gap:10px;}
 #modal-content .unit-upgrade-layout .unit-selector button{padding:5px;font-size:11px;line-height:1.3;}
 .unit-upgrade-layout .upgrade-focus{padding:8px 10px;}.unit-upgrade-layout .upgrade-focus>.eyebrow{display:none;}
 .unit-upgrade-layout .upgrade-focus h3{font-size:15px;margin:0 0 6px;line-height:1.4;}
 .unit-upgrade-layout .upgrade-deltas{gap:8px;}.unit-upgrade-layout .upgrade-deltas p{padding:5px 8px;gap:0;}.unit-upgrade-layout .upgrade-deltas b{font-size:17px;line-height:1.4;}
 .unit-upgrade-layout .upgrade-focus>p{font-size:12px;margin:5px 0;line-height:1.3;}
 #modal-content .unit-upgrade-layout #unit-upgrade{min-height:44px;padding:7px;margin:5px 0 0;font-size:13px;}
 #modal-content .purchase-receipt{padding:5px 8px;margin:0 0 7px;font-size:12px;}
}

/* Guidance repair: one visible next action, out of the centre-ground view. */
#game-shell.tutorial-active #tutorial-card{left:auto;right:12px;top:65px;transform:none;width:238px;max-width:36%;padding:7px 9px;background:#102d30f5;color:#fff4ce;border:1px solid #cdeef1;box-shadow:0 2px 8px #0006}
#game-shell.tutorial-active #tutorial-card>b{display:block;font-size:13px;line-height:1.35}
#game-shell.tutorial-active #tutorial-card p{display:block!important;font-size:11px;line-height:1.35;margin:4px 0;color:#d9eeee}
#game-shell.tutorial-active #tutorial-card>span{font-size:9px;color:#bad8d8;margin-bottom:3px}
#game-shell.tutorial-active #tutorial-card>div{display:flex;justify-content:space-between;gap:3px;margin:0}
#game-shell.tutorial-active #tutorial-card .text-button{color:#e3eeee;padding:0 5px;min-height:44px}
#game-shell.tutorial-active #practice-target-label[data-action=move]{font-size:11px;min-height:44px;padding:5px 8px;border:2px solid #8cf7ff;background:#082c38f5;color:#fff;box-shadow:0 2px 5px #0008}
#modal .lesson-highlight{outline:3px solid #8cf7ff;outline-offset:2px;box-shadow:0 0 0 5px #082c38}
@media(max-width:700px) and (orientation:landscape){#game-shell.tutorial-active #tutorial-card{right:8px;width:218px;max-width:34%;top:64px}#game-shell.tutorial-active #tutorial-card>b{font-size:12px}#game-shell.tutorial-active #tutorial-card p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.lesson-highlight{animation:none!important}}

.guided-loadout{display:grid;grid-template-columns:1fr 1fr;gap:8px}.guided-loadout button{text-align:left;padding:7px;min-height:55px}.guided-loadout small{font-size:10px;display:block;line-height:1.3}.equipped-summary,.lesson-checklist,.swap-preview{margin:5px 0!important;font-size:11px;line-height:1.4!important}.lesson-checklist{color:#b6fcff;font-weight:700}#apply-lesson-loadout{font-size:12px;flex:1}#modal-footer:has(#apply-lesson-loadout) #planning-return{font-size:11px}

/* Transaction UI is not reading prose; do not let rapid taps select it. */
#modal[data-planning]:not([data-planning=""]){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#modal[data-planning]:not([data-planning=""]) details p,#modal[data-planning]:not([data-planning=""]) details a,#modal input,#modal textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Transient messages use the scoreboard strip, never the central impact area. */
#toast{top:12px;bottom:auto;max-width:56%;padding:8px 14px;font-size:12px;line-height:1.35}
@media(max-width:700px){#toast{top:12px;font-size:11px;max-width:53%;padding:7px 10px}}

/* Combat experience v2: compact etched-glass HUD; the world remains the focus. */
:root{--panel:#102e35dd;--line:#89c6bf55;--gold:#f0d69b;--mint:#9ce7d2}
.battle-top{background:linear-gradient(100deg,#0b2635dc,#123a40b8,#0b2635dc);border:1px solid #a9d9cb55;box-shadow:0 3px 12px #06182433;border-radius:14px;min-height:44px}
.hero-hud{background:linear-gradient(120deg,#10323de0,#153f40b8);border:1px solid #b2e0d15c;box-shadow:0 3px 10px #041a2426;border-radius:12px}
#attack-status{background:#0b2936b8;border:1px solid #8bcac833;border-radius:7px;padding:3px 7px;color:#e5f7ee;text-shadow:none}
.ability,.attack{border:1px solid #d6dfc17d;background:radial-gradient(circle at 34% 25%,#437977e8,#143843ef 72%);box-shadow:inset 0 1px 0 #e8f4da55,0 3px 9px #06192744}
.ability.signature{border-color:#eed5a5;background:radial-gradient(circle at 35% 23%,#738470ef,#254c53ef 75%)}
.attack{background:radial-gradient(circle at 34% 24%,#718668ee,#2c5153f2 73%);border-color:#f3deb2}
.ability[data-state=cooldown]{filter:none;background:#17333bdd;color:#bbd4d3}
.ability[data-state=ready]{box-shadow:inset 0 0 0 2px #a6e2cd20,0 3px 9px #06192744}
.ability>span,.attack>span{font-weight:750;letter-spacing:.3px}.ability>small,.attack>small{font-variant-numeric:tabular-nums}
#game-shell.tutorial-active #tutorial-card{background:linear-gradient(115deg,#123c43eb,#163640cc);border:1px solid #a7e0d27d;border-left:3px solid #9ff1df;border-radius:11px;padding:7px 47px 7px 10px;box-shadow:0 4px 14px #071b282b;min-height:67px}
#game-shell.tutorial-active #tutorial-card>span{font-size:9px;letter-spacing:.7px;color:#b2ddce}
#game-shell.tutorial-active #tutorial-card>b{font-size:12px;line-height:1.35;color:#f4e4bd}
#game-shell.tutorial-active #tutorial-card p{display:block!important;font-size:11px;line-height:1.35;max-height:2.7em;overflow:hidden;margin:3px 0 0;color:#e2f1eb}
#game-shell.tutorial-active #tutorial-card>div{display:contents}
#game-shell.tutorial-active #tutorial-help{position:absolute;right:2px;top:50%;transform:translateY(-50%);width:44px;min-height:44px;padding:2px;font-size:10px;border-left:1px solid #a7d6cb35;border-radius:0;color:#bff4e4}
#game-shell.tutorial-active #tutorial-skip{display:none}
#event-caption{background:#103340c9;border:1px solid #a3d3ca44;border-radius:9px;padding:5px 9px;color:#e4f3df;text-shadow:none;font-size:11px;max-width:44%;pointer-events:none}
#event-caption:empty{display:none}
.hub-panel{background:linear-gradient(140deg,#12363ce8,#102b3ade);border:1px solid #bddcca66;box-shadow:0 12px 34px #04172044}
.hub-panel #hero-roster button{border-radius:9px;border-color:#9ac8b64d;background:#153640a8}
.hub-panel #hero-roster button[aria-pressed=true]{border-color:#f0daa2;background:linear-gradient(135deg,#607969,#284c53);box-shadow:inset 0 0 0 1px #f8e1a64d}
#hub-skills{display:flex;flex-wrap:wrap;gap:4px}#hub-skills .skill-chip{font-size:10px;padding:5px 7px;min-height:44px;border-radius:7px;background:#244d51;border:1px solid #a4d2c45c;color:#eaf0d4}
@media(max-height:600px) and (orientation:landscape){
 .battle-top{top:6px;left:10px;right:10px;height:44px;min-height:44px;padding:3px 7px;gap:8px;border-radius:11px}.battle-top .icon-button{height:44px;width:44px;min-height:44px;flex-shrink:0}
 .core-side meter{height:5px}.battle-score{font-size:10px;gap:3px}.battle-score small{font-size:8px}
 .hero-hud{top:57px;left:10px;padding:5px 7px;max-width:175px;min-height:54px}.hero-hud img{width:30px;height:34px}.hero-hud>div{width:83px}.hero-hud b{font-size:11px}.hero-hud small{font-size:9px}.hero-hud meter{height:4px}.hero-hud .icon-button{width:44px;min-width:44px;height:44px;min-height:44px;flex-shrink:0}
 #game-shell.tutorial-active #tutorial-card{top:57px;right:10px;width:244px;max-width:37%;min-height:67px}
 #minimap{top:57px;right:12px;width:84px;height:49px;border-radius:8px;opacity:.9}
 #joystick{width:100px;height:100px;left:17px;bottom:13px;background:#12384138;border:1px solid #b0ddd136}#stick-knob{left:25px;top:25px}
 .tactical-tools{left:132px;bottom:13px;gap:6px}.tactical-tools button{width:47px;height:47px;min-height:44px;background:#123a43ce;border-color:#a7cfc36b;border-radius:10px}.tactical-tools span{font-size:10px}.tactical-tools small{font-size:8px}
 .combat-tools{right:12px;bottom:12px;width:202px;height:145px}.ability.signature{right:0;top:0;width:64px;height:64px}.ability.small{left:28px;top:19px;width:58px;height:58px}#tool-rally{left:0;top:auto;bottom:0;width:58px;height:58px}.attack{right:18px;bottom:0;width:70px;height:70px}
 .ability>span{font-size:11px}.ability>small{font-size:9px}.attack>span{font-size:15px}.attack>small{font-size:10px}
 #attack-status{right:12px;top:116px;bottom:auto;max-width:38%;font-size:10px;line-height:1.3}
 #event-caption{bottom:64px;left:50%;max-width:35%;font-size:10px;padding:4px 7px}
 #aim-message{bottom:164px;font-size:11px;background:#11323de6;max-width:40%;border:1px solid #d8d6a96b}
 #objective-toast{top:57px;max-width:34%;padding:6px 9px;font-size:10px}
 .result-card{display:flex;flex-direction:column;padding:14px 18px}.result-actions{position:sticky;bottom:-14px;background:#12363cf5;padding:7px 0;margin-top:8px}#result-stats{gap:6px;margin:8px 0}#result-stats>div{padding:5px}#result-stats b{margin:3px 0}
}
.hub-launch{display:flex;gap:6px;flex-wrap:wrap}.hub-launch #start-tutorial{flex-basis:100%}.hub-launch #start-battle,.hub-launch #start-tactics{flex:1;font-size:11px}
@media(max-height:600px) and (orientation:landscape){.tactical-tools{transform:none!important;left:132px!important}}
#practice-target-label{max-width:172px;white-space:normal;line-height:1.25;font-size:11px;padding:5px 8px;min-height:44px}

/* BF-ROLE-ULT-001: distinct ultimate, not an extra tiny icon among small skills. */
.combat-tools{width:260px;height:164px;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
.combat-tools .ability.signature{right:76px;left:auto;top:24px;width:60px;height:60px}
.combat-tools #tool-aegis{right:144px;left:auto;top:45px;width:56px;height:56px}
.combat-tools #tool-rally{left:0;top:auto;bottom:0;width:56px;height:56px}
.combat-tools .attack{right:42px;bottom:0;width:72px;height:72px}
.combat-tools .ultimate{right:0;top:0;width:70px;height:70px;border:2px solid #f2d58e;background:radial-gradient(circle at 35% 22%,#795c3b,#322e43 75%);box-shadow:0 0 0 3px #d7bc6c22,inset 0 0 15px #e1b64b20}
.ultimate em{display:block;font-style:normal;letter-spacing:2px;font-size:9px;color:#f9d994}.ultimate span{font-size:11px}.ultimate small{font-size:9px}
.ultimate[data-state=locked]{border-color:#777d80;box-shadow:none;background:#23323c;color:#b6c1c9}
.combat-tools #aim-cancel{right:42px;bottom:0;width:72px;height:72px}
@media(max-width:460px){.combat-tools{width:245px;height:164px}.combat-tools .ultimate{width:66px;height:66px}.combat-tools .ability.signature{right:71px}.combat-tools #tool-aegis{right:138px}}
/* Role glyphs communicate tool, support and ultimate identity without hover. */
.combat-tools .ultimate{position:absolute;overflow:visible}
.combat-tools .ultimate em{position:absolute;top:-7px;left:18px;right:18px;line-height:13px;border:1px solid #f0d28a88;border-radius:5px;background:#292e39;color:#ffe5a3;letter-spacing:1px}
.combat-tools .ultimate .role-ability-icon{width:22px;height:22px;margin:1px auto 0}
.combat-tools .role-ability-icon{filter:drop-shadow(0 1px 1px #001a22)}
.combat-tools [data-hero=asgard] .role-ability-icon{color:#b1e5ff}.combat-tools [data-hero=odin] .role-ability-icon{color:#b3ffe0}.combat-tools [data-hero=mimir] .role-ability-icon{color:#ffd0c4}.combat-tools [data-hero=sindri] .role-ability-icon{color:#e5ceff}.combat-tools [data-hero=tyr] .role-ability-icon{color:#ffe8a1}.combat-tools [data-hero=heimdall] .role-ability-icon{color:#fff3b1}.combat-tools [data-hero=freyr] .role-ability-icon{color:#ffe0b8}.combat-tools [data-hero=midgard] .role-ability-icon{color:#c1e4ff}

/* Single bounded original pictorial atlas; line glyph remains on decode failure. */
.combat-tools .ability .skill-picture{position:relative;display:block;width:30px;height:30px;margin:0 auto;overflow:hidden;border-radius:7px;flex:none}
.combat-tools .ultimate .skill-picture{width:32px;height:32px}
.skill-picture .skill-fallback{position:absolute;inset:0;width:100%;height:100%}
.skill-picture .skill-paint{display:none;position:absolute;inset:0;background-image:url('./assets/ui/role-skill-icons-v1.png');background-size:600% 400%;background-position:var(--skill-x) var(--skill-y);background-repeat:no-repeat}
.skill-atlas-ready .skill-paint{display:block}.skill-atlas-ready .skill-fallback{visibility:hidden}
.combat-tools .ability[data-state=cooldown] .skill-paint,.combat-tools .ability[data-state=locked] .skill-paint{filter:saturate(.3) brightness(.65)}
/* Keep all three readable tiers within existing thumb-sized hit areas. */
.combat-tools .ability{gap:0;padding:3px}
.combat-tools #tool-aegis .skill-picture{width:24px;height:24px}
.combat-tools .ability.signature .skill-picture{width:26px;height:26px}
.combat-tools .ultimate .skill-picture{width:30px;height:30px}
.combat-tools .ability>span{line-height:12px}
.combat-tools .ability>small{line-height:10px;min-height:10px;margin-top:1px;font-size:10px}

#recenter.detached{white-space:pre-line;font-size:11px;line-height:15px;border-color:#f2d58e;background:#554b2d;color:#fff1b8}

.platform-home{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;color:#d8e8df;background:#102b35cc;border:1px solid #88b9ab66;border-radius:10px;text-decoration:none;margin-bottom:16px;font-size:13px;pointer-events:auto}

.job-preview{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;border:1px solid #a8baaa44;border-radius:12px;background:#102832}.job-preview figure{margin:0;text-align:center}.job-preview img{width:82px;height:90px;object-fit:contain}.job-preview figcaption{font-size:11px;color:#d6e6db}

/* Native 390px portrait inspection: keep labels inside their hit areas and out of planning buttons. */
.combat-tools .attack{padding:4px;gap:1px;}
.combat-tools .attack .ui-icon{width:24px;height:24px;flex:none;}
.combat-tools .attack span{line-height:18px;}
.combat-tools .attack small{font-size:10px;line-height:12px;white-space:nowrap;}
@media(orientation:portrait){#attack-status{bottom:280px;width:220px;}#aim-message{bottom:280px;}#event-caption{bottom:325px;}}
/* Explicit locale controls; never shrink the existing combat hit targets. */
.game-language{font:600 11px/1.2 system-ui;min-width:52px;min-height:36px;max-width:76px;border:1px solid #a5bdac88;border-radius:8px;background:#163536;color:#f5ead4;padding:5px;touch-action:manipulation}
.game-language:disabled{opacity:.55}.hub-panel>header{flex-wrap:wrap}.battle-top>.game-language{flex:0 0 auto;min-width:46px;max-width:54px}
html[lang="en"] .ability>span{font-size:10px;line-height:1.05;white-space:normal;overflow-wrap:normal}
html[lang="en"] .ability.small{width:64px;height:64px}html[lang="en"] .ability.small .skill-picture{width:20px;height:20px}
html[lang="en"] .ability.small>small{font-size:9px;line-height:10px}html[lang="en"] .planning-tabs button{white-space:normal}
html[lang="en"] .hub-launch button{white-space:normal;line-height:1.25}html[lang="en"] .hero-hud>div{width:118px}
html[lang="en"] #tutorial-card p{font-size:11px;line-height:1.35;max-height:68px;overflow:auto}html[lang="en"] .tactical-tools button>span{font-size:10px}
@media(max-width:700px){html[lang="en"] .battle-top{gap:5px}html[lang="en"] .core-side b{font-size:9px}.battle-top>.game-language{padding:4px;min-width:42px;max-width:48px}}
/* Desktop keyboard affordances do not replace thumb controls on touch devices. */
.skill-keycap{display:none;position:absolute;left:-5px;top:-7px;min-width:20px;padding:1px 4px;border:1px solid #c5ddcf;border-bottom-width:3px;border-radius:4px;background:#132e35;color:#f3f4e8;font:700 10px/14px system-ui;pointer-events:none;z-index:4}
@media(hover:hover) and (pointer:fine){.skill-keycap{display:block}}
.control-binding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.control-binding-grid label,.control-mode{display:grid;gap:5px;font-size:13px}.control-binding-grid select,.control-mode select{width:100%;min-width:0;min-height:42px;background:#122e35;color:#f3f4e8;border:1px solid #799c94;border-radius:6px;padding:8px}#control-error{color:#ffd0a8;min-height:1.5em}
@media(hover:hover) and (pointer:fine){#joystick:after{content:attr(data-keys);position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font:700 10px/14px system-ui;white-space:nowrap;color:#e8efdf;text-shadow:0 1px 3px #001a20;pointer-events:none}}