/* A separate touch HUD: real hit areas, never a scaled-down desktop bar. */
#mobile-controls{display:none}
body.touch #mobile-controls{display:block;position:fixed;inset:0;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
body.touch #mobile-controls .mobile-control{position:absolute;transform:translate(-50%,-50%);margin:0;min-width:0;min-height:0;padding:0;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:auto;opacity:var(--control-opacity,.9);font-family:Pixel,sans-serif;transition:transform .08s,background .12s,border-color .12s,box-shadow .12s;box-shadow:0 3px 0 #101d24e6,inset 0 0 0 2px #ffffff2e;border:2.5px solid var(--skill-ring,#d9e7d1);color:#fff9de;background:var(--skill-bg,#1d332ce8);border-radius:50%;isolation:isolate;overflow:hidden}
body.touch #mobile-controls .mobile-control:active{transform:translate(-50%,-50%) scale(.95)}
body.touch #mobile-controls .mobile-control:is(:disabled,[aria-disabled="true"]){opacity:.48;border-style:solid;filter:saturate(.32)}
body.touch #mobile-controls .mobile-control small{position:absolute;bottom:2px;left:2px;right:2px;text-align:center;color:#f9f4df;font:9px/10px Pixel,sans-serif;pointer-events:none;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
body.touch #mobile-controls .mobile-icon{display:grid;place-items:center;transform:translateY(-2px);pointer-events:none;z-index:1}
body.touch #mobile-controls .mobile-icon img{image-rendering:pixelated}
body.touch #mobile-controls .mobile-skill[data-type=fire]{--skill-ring:#ff8c4a;--skill-bg:#3d2118eb}
body.touch #mobile-controls .mobile-skill[data-type=water]{--skill-ring:#5ec2ff;--skill-bg:#172f44eb}
body.touch #mobile-controls .mobile-skill[data-type=grass]{--skill-ring:#68dc7e;--skill-bg:#1a3625eb}
body.touch #mobile-controls .mobile-skill[data-type=electric]{--skill-ring:#ffe156;--skill-bg:#3b3316eb}
body.touch #mobile-controls .mobile-skill[data-type=ice]{--skill-ring:#88f0ff;--skill-bg:#18353eeb}
body.touch #mobile-controls .mobile-skill[data-type=psychic],body.touch #mobile-controls .mobile-skill[data-type=fairy]{--skill-ring:#ff86bd;--skill-bg:#3a1d32eb}
body.touch #mobile-controls .mobile-skill[data-type=ghost],body.touch #mobile-controls .mobile-skill[data-type=dark],body.touch #mobile-controls .mobile-skill[data-type=poison]{--skill-ring:#bc85ff;--skill-bg:#281c3deb}
body.touch #mobile-controls .mobile-skill[data-type=dragon]{--skill-ring:#52e5e8;--skill-bg:#17313deb}
body.touch #mobile-controls .mobile-skill[data-type=fighting],body.touch #mobile-controls .mobile-skill[data-type=ground],body.touch #mobile-controls .mobile-skill[data-type=rock]{--skill-ring:#e4a158;--skill-bg:#382819eb}
body.touch #mobile-controls .mobile-skill[data-type=flying],body.touch #mobile-controls .mobile-skill[data-type=steel]{--skill-ring:#a8d8f0;--skill-bg:#1f323eeb}
body.touch #mobile-controls .mobile-skill::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(#09111de6 var(--cooldown,0%),transparent 0);z-index:2;pointer-events:none}
body.touch #mobile-controls .mobile-cd{position:absolute;z-index:3;color:#fff;font:20px/1 Pixel,sans-serif;text-shadow:0 1px 3px #000,1px 1px 0 #10202b;pointer-events:none}
body.touch #mobile-controls .mobile-count{position:absolute;bottom:2px;right:4px;z-index:3;padding:0 3px;border-radius:5px;background:#0e1b20d9;border:1px solid #fff1bb59;font:11px/13px Pixel;color:#fff4c2;text-shadow:1px 1px #000}
body.touch #mobile-controls .ultimate{--skill-ring:#ffe184;--skill-bg:#5e4819f0;border-width:3px;box-shadow:0 3px 0 #2e2412,inset 0 0 0 2px #ffea9c66,0 0 12px #ffd8594d}
body.touch #mobile-controls .talent{--skill-ring:#9ad8f5;--skill-bg:#23374be8;border-radius:50%}
body.touch #mobile-controls .mobile-item{background:#182f2ae8;border-color:#b2c8b6;border-radius:50%}
body.touch #mobile-controls .mobile-item:not(.mobile-mega){border-radius:50%;border-color:#c2d8bc;background:#1a332df0;box-shadow:0 3px 0 #0f221ce0,inset 0 0 0 2px #e8f2d726}
body.touch #mobile-controls .mobile-item .mobile-icon{transform:translateY(-2px)}
body.touch #mobile-controls .mobile-item-cd{position:absolute;inset:14px 0 auto;text-align:center;z-index:3;color:#fff9d2;font:11px Pixel,sans-serif;text-shadow:1px 1px #203943,-1px -1px #203943;pointer-events:none}
body.touch #mobile-controls .mobile-item.item-cooling .mobile-icon{opacity:.35}
body.touch #mobile-controls .mobile-item.item-cooling::before{content:'';position:absolute;inset:0;background:conic-gradient(#0c1824d8 var(--cooldown,0%),transparent 0);border-radius:50%;pointer-events:none;z-index:2}
body.touch #mobile-controls .mobile-item .mobile-count{bottom:2px;right:4px;font-size:10px;line-height:12px;min-width:12px;text-align:center;color:#fff1bb;text-shadow:1px 1px 2px #000}
body.touch #mobile-controls .mobile-mega{border-radius:50%;border-color:#d8b4ff;background:radial-gradient(circle at 35% 30%,#4e2f6be8,#251a3ae8);box-shadow:0 3px 0 #1a1128,inset 0 0 0 2px #f3d5ff40}
body.touch #mobile-controls .mobile-mega.mega-ready{border-color:#ffe898;box-shadow:0 3px 0 #1a1128,0 0 12px #d98eff80,inset 0 0 0 2px #a6f0ff66}
body.touch #mobile-controls .mobile-mega.mega-active{border-color:#ff9de6;box-shadow:0 0 14px #ff78d4a6,inset 0 0 0 2px #fff6}
body.touch #mobile-controls .learnable{border-color:#ffe184;opacity:1;background:#756527}
body.touch #mobile-controls .mobile-stick{border-radius:50%;border:2px solid #e4eed1a0;background:#12251f70;box-shadow:inset 0 0 0 5px #d8e8c71c,0 2px 3px #0003;overflow:visible}
body.touch #mobile-controls .mobile-stick .stick-disc{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,transparent 39%,#e3eec526 40% 42%,transparent 43%)}
body.touch #mobile-controls .mobile-stick i{display:block;width:40%;height:40%;border:2px solid #eef1d2c9;background:#d3e2c254;box-shadow:0 2px 0 #091e1d80;border-radius:50%;pointer-events:none}
body.touch #mobile-controls .mobile-stick[data-control=aim] i{background:#f0bc4866;border-color:#ffe39d}
body.touch #mobile-controls .mobile-stick small{bottom:-17px;font-size:10px;letter-spacing:1px}
body.touch #mobile-controls .mobile-stick.pressed,body.touch #mobile-controls .aiming{opacity:1;border-color:#fff2a8;box-shadow:0 0 0 3px #ffdc6c4d,inset 0 0 0 2px #ffe29a59}
body.touch #mobile-controls .mobile-cancel{top:24%;left:50%;width:52px;height:52px;border-radius:50%;font:30px/1 Pixel;background:#411d29ee;border-color:#fb9d98;z-index:4}
body.touch #mobile-controls .mobile-cancel.selected{background:#c84948;box-shadow:0 0 0 6px #ffbcb350}
body.touch .mobile-cast-label{position:absolute;top:calc(24% + 34px);left:50%;transform:translateX(-50%);max-width:260px;padding:4px 9px;border-radius:999px;background:#12231fe6;color:#fff4cc;text-align:center;font:12px/1.1 Pixel;pointer-events:none}
body.touch #hud .hud-bottom{position:static;inset:auto;width:auto;min-width:0;transform:none!important;pointer-events:none}
body.touch #skills,body.touch #quickbar,body.touch #controls-hint{display:none!important}
body.touch #hud #learn-button{position:fixed;top:64px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:48px;height:44px;min-width:48px;padding:6px;z-index:3}
body.touch #hud #learn-button kbd{display:none}
body.touch #hud .vitals{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:226px;min-width:0;padding:5px 7px;gap:5px;transform:none!important}
body.touch #hud #hud-portrait{width:38px;height:42px;flex:none}
body.touch #hud .vital-head{gap:4px}
body.touch #hud .vital-head strong{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:130px}
body.touch #hud .vital-head .tag{font-size:10px;white-space:nowrap}
body.touch #hud .held-icons{display:none}
body.touch #hud .vital-values{min-width:0;flex:1}
body.touch #hud .vitals{grid-template-columns:38px minmax(0,1fr)}
body.touch #hud .vital-head{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:0}
body.touch #hud .meter.hp{height:12px;margin:3px 0}
body.touch #hud .meter.xp{height:4px;margin:0}
body.touch #hud .meter.xp::before,body.touch #hud .meter.hp::before{display:none}
body.touch #hud .mission{top:max(9px,env(safe-area-inset-top));left:50%;bottom:auto;width:auto;padding:3px 9px;transform:translateX(-50%)!important;font-size:12px}
body.touch #hud .mission #clock{font-size:20px}
body.touch #hud .mission-line,body.touch #hud #mission-kind{display:none}
body.touch #hud .minimap-box{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:auto;width:148px;padding:4px;transform:none!important;display:flex;flex-direction:column;align-items:flex-end}
body.touch #hud #minimap{width:76px;height:76px;align-self:flex-end}
body.touch #hud .hud-tools{display:flex!important;gap:3px;width:100%;margin-top:4px}
body.touch #hud .hud-tools button{width:44px;height:44px;min-width:44px;padding:5px;flex:1;position:relative}
body.touch #hud .hud-tools kbd,body.touch #hud #vision-label{display:none}
body.touch #hud #bag-count{font:10px Pixel;position:absolute;bottom:1px;right:2px;white-space:nowrap}
body.touch #hud .hud-tools .bag-fill{display:none}
body.touch #hud #stealth-label{position:fixed;left:max(10px,env(safe-area-inset-left));top:72px;bottom:auto;width:auto;max-width:220px;font-size:11px;padding:3px 7px;transform:none}
body.touch #hud #prompt{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);width:auto;max-width:var(--mobile-prompt-width,calc(100vw - 550px));min-height:48px;padding:10px 12px;text-align:center;font:14px/1.2 Pixel;border:2px solid #f0d77c;border-radius:10px;background:#172e28ef;touch-action:none;pointer-events:auto;z-index:3}
body.touch #hud #prompt small,body.touch #hud #prompt kbd{display:none}
body.touch #hud #region-banner{top:76px;font-size:15px}
body.touch #hud .level-banner{top:145px;font-size:15px}
@media(orientation:portrait){
  body.touch #hud .vitals{width:calc(100vw - 170px)}
  body.touch #hud .vitals{grid-template-columns:minmax(0,1fr)}
  body.touch #hud #hud-portrait{display:none}
  body.touch #hud .vital-head strong{max-width:105px}
  body.touch #hud .mission{left:12px;top:92px;transform:none!important}
  body.touch #hud #stealth-label{top:65px;max-width:calc(100vw - 175px)}
  body.touch #hud #learn-button{left:50%;top:145px}
  body.touch #hud #prompt{bottom:300px;max-width:80vw}
  body.touch #hud #region-banner{top:150px}
  body.touch #hud .level-banner{top:218px}
}
@media(max-height:360px) and (orientation:landscape){
  body.touch #hud #minimap{width:58px;height:58px}
  body.touch #hud .minimap-box{width:210px;flex-direction:row;align-items:center;gap:4px}
  body.touch #hud .hud-tools{width:138px;margin:0}
  body.touch #hud #daynight-chip,body.touch #hud #risk-chip{display:none}
  body.touch #hud #stealth-label{top:65px}
  body.touch #hud #prompt{max-width:180px;top:88px;bottom:auto;max-height:64px;overflow:hidden}
}

/* Compact status, a readable map and a labelled learning action. */
body.touch #hud .vitals{width:190px;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto;padding:5px 7px;gap:0 5px;min-height:0}
body.touch #hud #hud-portrait{width:30px;height:34px;grid-row:1;align-self:center}
body.touch #hud .vital-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px;margin:0;line-height:1}
body.touch #hud .vital-head strong{grid-column:auto;max-width:none;font-size:12px;line-height:14px}
body.touch #hud .vital-head .tag{font-size:9px;line-height:14px}
body.touch #hud .meter.hp{height:12px;border-width:1px;margin:2px 0 3px;overflow:hidden}
body.touch #hud .meter.hp b{top:0;right:3px;font-size:9px;line-height:10px}
body.touch #hud .meter.xp{height:3px;border-width:1px;margin:0;box-sizing:border-box}
body.touch #hud #debuffs{position:absolute;top:calc(100% + 4px);left:0;max-width:220px;gap:3px;margin:0}
body.touch #hud #debuffs .status-chip{padding:2px 4px;min-height:18px;gap:3px;font-size:10px;background:#172c2de8;box-shadow:0 1px 2px #0005}
body.touch #hud #debuffs .status-chip svg{width:12px;height:12px}
body.touch #hud #debuffs .status-chip b{font-size:10px}
body.touch #hud .minimap-box{display:grid;grid-template-columns:96px 44px;gap:4px;align-items:stretch;width:auto;min-width:0;padding:4px}
body.touch #hud #map-button{width:96px;height:auto;min-height:0;padding:0;flex:none}
body.touch #hud #minimap{width:96px;height:96px;max-width:none;margin:0;border-width:1px}
body.touch #hud .minimap-caption{height:16px;font-size:10px}
body.touch #hud .hud-tools{display:grid!important;grid-template-columns:44px;grid-template-rows:1fr 1fr;gap:4px;width:44px;min-width:0;margin:0;align-self:stretch}
body.touch #hud .hud-tools button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:44px;min-width:44px;height:auto;min-height:44px;padding:4px;grid-column:auto;grid-row:auto}
body.touch #hud .hud-tools svg{width:20px;height:20px;flex:none}
body.touch #hud .hud-tools .tool-label{display:block;font:9px/1 Pixel,var(--mono)}
body.touch #hud #bag-count{position:static;font:10px/1 Pixel,var(--mono);letter-spacing:-.3px}
body.touch #hud #learn-button{display:flex;justify-content:center;gap:7px;width:auto;min-width:134px;height:44px;padding:7px 10px;margin:0;font:12px/1 Pixel,var(--mono)}
body.touch #hud #learn-button svg{width:16px;height:16px}
body.touch #hud #learn-button .learn-pending{min-width:20px;padding:3px 4px;border-radius:4px;background:#674e17;color:#fff2bb;font:12px/1 Pixel,var(--mono)}
body.touch #hud #learn-button:active{transform:translateX(-50%)}
body.touch #hud #stealth-label{top:76px}
body.touch .choice-progress{font-size:11px;margin-bottom:8px}
@media(orientation:landscape){
  body.touch #hud #learn-button{top:auto;bottom:max(14px,env(safe-area-inset-bottom));left:50%;right:auto}
  body.touch #hud .mission{font-size:11px;padding:2px 7px}
  body.touch #hud .mission #clock{font-size:18px}
}
@media(orientation:landscape) and (min-height:361px){
  body.touch:has(#learn-button:not([hidden])) #hud #prompt{bottom:max(68px,calc(env(safe-area-inset-bottom) + 54px))}
}
@media(orientation:portrait){
  body.touch #hud .vitals{width:calc(100vw - 174px);grid-template-columns:minmax(0,1fr)}
  body.touch #hud #hud-portrait{display:none}
  body.touch #hud #stealth-label{top:76px}
  body.touch #hud #learn-button{top:145px;bottom:auto}
}
@media(max-height:360px) and (orientation:landscape){
  body.touch #hud .minimap-box{grid-template-columns:64px 92px;align-items:center}
  body.touch #hud #map-button{width:64px}
  body.touch #hud #minimap{width:64px;height:64px}
  body.touch #hud .hud-tools{grid-template-columns:44px 44px;grid-template-rows:44px;width:92px;align-self:center}
  body.touch #hud .hud-tools button{height:44px}
  body.touch #hud .minimap-caption{height:14px;font-size:9px}
}
@media(orientation:landscape){
  body.touch #modal[data-panel=choices]{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  body.touch #modal[data-panel=choices] .dialog{width:min(900px,100%);padding:10px 12px;scrollbar-width:thin;scrollbar-color:#b9a66d #172326}
  body.touch #modal[data-panel=choices] .dialog-head{align-items:center;margin:0 0 7px;padding-bottom:7px;gap:8px}
  body.touch #modal[data-panel=choices] h2{font-size:18px;margin:3px 0 0}
  body.touch #modal[data-panel=choices] .eyebrow{font-size:9px;letter-spacing:.08em}
  body.touch #modal[data-panel=choices] .dialog-sub{display:none}
  body.touch #modal[data-panel=choices] .close{min-height:44px;padding:6px 10px}
  body.touch #modal[data-panel=choices] kbd{display:none}
  body.touch #modal[data-panel=choices] .choice-progress{min-height:24px;padding:4px 8px;margin-bottom:7px}
  body.touch #modal[data-panel=choices] .choices{grid-template-columns:repeat(var(--choice-count,3),minmax(0,1fr));gap:7px}
  body.touch #modal[data-panel=choices] .choice{min-height:0;padding:8px;gap:5px}
  body.touch #modal[data-panel=choices] .choice-icon{height:28px}
  body.touch #modal[data-panel=choices] .choice-icon img,body.touch #modal[data-panel=choices] .choice-icon svg{width:28px;height:28px}
  body.touch #modal[data-panel=choices] .choice strong{font-size:14px;line-height:18px}
  body.touch #modal[data-panel=choices] .choice small{font-size:12px;line-height:16px}
  body.touch #modal[data-panel=choices] .choice .kind{font-size:9px;letter-spacing:0;line-height:12px}
  body.touch #modal[data-panel=choices] .choice-meta{font-size:10px;line-height:12px}
  body.touch #modal[data-panel=choices] .dialog-actions{margin-top:8px;padding-top:7px}
  body.touch #modal[data-panel=choices] .dialog-actions button{min-height:44px;padding:6px 12px}
}
@media(orientation:portrait){
  body.touch:has(#learn-button:not([hidden])) #hud #region-banner{top:202px}
  body.touch:has(#learn-button:not([hidden])) #hud .level-banner{top:264px}
}