/* Touch HUD only. Desktop presentation and Xbox bindings retain their existing rules. */
.touch-only{display:none}
:root{--touch-safe-top:env(safe-area-inset-top,0px);--touch-safe-right:env(safe-area-inset-right,0px);--touch-safe-bottom:env(safe-area-inset-bottom,0px);--touch-safe-left:env(safe-area-inset-left,0px)}
.touch #hud{inset:auto;top:var(--touch-view-top,0px);left:var(--touch-view-left,0px);width:var(--touch-view-width,100vw);height:var(--touch-view-height,100dvh);z-index:6;--pad-right:calc(var(--touch-safe-right) + 14px);--pad-bottom:calc(var(--touch-safe-bottom) + 14px);--attack-size:60px;--attack-gap:8px}
.touch #game{inset:auto;top:var(--touch-view-top,0px);left:var(--touch-view-left,0px);width:var(--touch-view-width,100vw);height:var(--touch-view-height,100dvh)}
.touch #hud [data-action],.touch #joystick,.touch #aimstick{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
.touch #hud .touch-only{display:block}
.touch #hud kbd{display:none}
.touch #actions{left:auto;right:var(--pad-right);bottom:calc(var(--pad-bottom) + 54px);transform:none;display:grid;grid-template-columns:repeat(3,var(--attack-size));grid-template-rows:var(--attack-size);gap:var(--attack-gap);isolation:isolate}
.touch #actions button{--action-color:#d8c29b;width:var(--attack-size);height:var(--attack-size);margin:0;padding:5px 3px 6px;border:1px solid #a18b66;border-bottom:2px solid #79694f;border-radius:13px;background:linear-gradient(160deg,#263039,#111b23 80%);box-shadow:inset 0 1px 0 #fff2,0 3px 9px #0009;gap:3px;color:#fff8ed;opacity:1}
.touch #actions [data-action=melee]{grid-column:1;grid-row:1}
.touch #actions [data-action=ranged]{grid-column:2;grid-row:1;--action-color:#c4d8d4;border-color:#92a9a3}
.touch #actions [data-action=special]{grid-column:3;grid-row:1;--action-color:#f4d791;border-color:#d4b474;background:linear-gradient(155deg,#4a3d29,#211e19 80%);height:calc(var(--attack-size) + 4px);margin-top:-4px}
.touch #actions .action-icon{width:24px;height:24px;color:var(--action-color);flex:none;filter:drop-shadow(0 1px 2px #000)}
.touch #actions [data-action=special] .action-icon{width:18px;height:18px}
.touch #actions .action-label,.touch #actions .touch-action-label{font-size:12px;font-weight:750;line-height:1.1;letter-spacing:.3px;max-width:none;text-shadow:0 1px 3px #000}
.touch #actions #special-label,.touch #actions b{display:none}
.touch #actions #cooldown{display:block;font:700 10px/1 system,sans-serif;color:#fff2bf;letter-spacing:.2px}
.touch #actions .cooldown-track{position:absolute;left:8px;right:8px;bottom:4px;height:2px;border-radius:2px;background:#000b;overflow:hidden}
.touch #actions .cooldown-track i{display:block;width:100%;height:100%;background:#f2d08b;transform-origin:left;transition:transform .08s linear}
.touch #actions .cooling{background:#24231f;border-color:#bca776}
.touch #hud [data-action].active{filter:brightness(1.4);transform:scale(.95);box-shadow:0 0 0 3px #fff3,0 2px 5px #000}
.touch #hud .utility{right:var(--pad-right);bottom:var(--pad-bottom);left:auto;display:flex;gap:10px}
.touch #hud .utility button{height:44px;width:64px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #7a827e;border-radius:10px;background:#142027ed;box-shadow:0 3px 0 #03090e,0 4px 14px #000b;color:#fff8ed;font-size:11px;font-weight:700;letter-spacing:.1px;line-height:1}
.touch #hud .utility [data-action=interact]{width:88px;border-color:#7d9483;background:#142027ed}
.touch #hud .utility .action-icon{width:16px;height:16px;color:#ccedf5}
.touch #hud .utility [data-action=interact] .action-icon{display:none}
.touch #hud .utility small{font-size:9px;font-weight:600;color:#b6c9b5;line-height:1}
.touch #hud .utility .available{border-color:#d1d6a0;background:#23352e;box-shadow:0 0 0 3px #caff3c25,0 4px 14px #000b}
.touch #joystick{display:block;pointer-events:auto;position:absolute;left:calc(var(--touch-safe-left) + 12px);bottom:var(--pad-bottom);width:96px;height:96px;border:1px solid #abb5a899;border-radius:50%;background:#111e27bb;box-shadow:inset 0 0 0 13px #31465270,0 4px 18px #0009}
.touch #joystick span,.touch #aimstick span{position:absolute;left:50%;top:50%;width:36px;height:36px;border:1px solid #e0d9bd;border-radius:50%;background:linear-gradient(145deg,#82938d,#435c60);transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 2px 6px #0008}
.touch #joystick .stick-label{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#f0fbff;font-size:11px;line-height:1;letter-spacing:1px;font-weight:800;pointer-events:none;text-shadow:0 1px 2px #000}
.touch #aimstick{display:block;pointer-events:auto;position:absolute;right:calc(var(--pad-right) + var(--attack-size) + var(--attack-gap));bottom:calc(var(--pad-bottom) + 78px + var(--attack-size) + var(--attack-gap));width:var(--attack-size);height:var(--attack-size);border:2px solid #88aab7;border-radius:50%;background:#10232deb;box-shadow:0 4px 14px #0009}
.touch #aimstick span{width:28px;height:28px;top:50%;background:#52788a}
.touch #aimstick small{position:absolute;left:0;right:0;bottom:8px;transform:none;text-align:center;font-size:13px;font-weight:800;letter-spacing:.7px;color:#e3f5fc;pointer-events:none}
.touch #joystick.active,.touch #aimstick.active{border-color:#fff;background:#254456f5}
.touch #hud .status-panel{top:calc(var(--touch-safe-top) + 10px);left:calc(var(--touch-safe-left) + 12px)}
.touch #hud .objective{top:calc(var(--touch-safe-top) + 14px);right:var(--pad-right)}
.touch #hud #boss-hud{top:calc(var(--touch-safe-top) + 124px)}
.touch #hud #interaction{bottom:calc(var(--pad-bottom) + 132px);left:50%;transform:translateX(-50%);max-width:92%;font-size:14px;font-weight:700;letter-spacing:.2px;text-align:center;background:#10222ff5;color:#ffefbf;border-color:#ddc48c}
.touch #network-status{bottom:auto;top:calc(var(--touch-safe-top) + 106px);font-size:11px;left:50%;transform:translateX(-50%);max-width:90%}
.touch-landscape.touch #hud{--attack-size:56px;--attack-gap:8px;--pad-right:calc(var(--touch-safe-right) + 16px);--pad-bottom:calc(var(--touch-safe-bottom) + 16px)}
.touch-landscape.touch #actions{grid-template-columns:repeat(3,var(--attack-size));grid-template-rows:var(--attack-size)}
.touch-landscape.touch #actions [data-action=melee]{grid-column:1;grid-row:1}
.touch-landscape.touch #actions [data-action=ranged]{grid-column:2;grid-row:1}
.touch-landscape.touch #actions [data-action=special]{grid-column:3;grid-row:1}
.touch-landscape.touch #aimstick{right:calc(var(--pad-right) + 3 * var(--attack-size) + 2 * var(--attack-gap) + 14px);bottom:calc(var(--pad-bottom) + 2px)}
.touch-landscape.touch #joystick{width:88px;height:88px}
.touch-landscape.touch #hud .status-panel{width:186px;padding:8px 10px}
.touch-landscape.touch .companions,.touch-landscape.touch .objective{display:none}
.touch-landscape.touch #hud .hp-track{margin-top:5px;height:12px}
.touch-landscape.touch #hud .resources{margin-top:5px}
.touch-landscape.touch #hud #boss-hud{top:calc(var(--touch-safe-top) + 12px);width:32%;max-width:300px}
.touch-landscape.touch #hud #interaction{bottom:calc(var(--pad-bottom) + 126px);left:60%;font-size:13px;padding:5px 9px}
.touch-landscape.touch #network-status{top:calc(var(--touch-safe-top) + 76px)}
@media(max-width:350px){.touch #hud{--attack-size:56px;--attack-gap:6px;--pad-right:calc(var(--touch-safe-right) + 10px)}.touch #joystick{width:86px;height:86px;left:calc(var(--touch-safe-left) + 10px)}}
/* Gesture policy applies to the live battlefield, including gaps between buttons. */
.touch #aimstick{display:none!important}
.touch.playing,.touch.playing #game,.touch.playing #hud{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.journal-notes{max-height:45vh;overflow:auto;text-align:left;padding:0 12px}.journal-notes strong{font-size:12px;color:#e4c47c}.journal-notes p{font-size:14px;line-height:1.5}