/* Touch / small-screen layer. Every rule is scoped so desktop is unchanged. */
#kTouch{display:none}
body.k-touch #kTouch{display:block}
#kTouch .kt-joy{position:fixed;left:14px;bottom:14px;width:110px;height:110px;border-radius:50%;border:2px solid rgba(214,174,82,.7);background:rgba(20,26,22,.35);z-index:var(--z-hud-top,19);touch-action:none;-webkit-user-select:none;user-select:none}
#kTouch .kt-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(214,174,82,.55);border:1px solid rgba(240,210,130,.9);pointer-events:none}
#kTouch .kt-btns{position:fixed;right:12px;bottom:128px;display:flex;flex-direction:column;gap:6px;z-index:var(--z-hud-top,19)}
#kTouch .kt-btn{min-width:44px;height:44px;border-radius:50%;border:1px solid rgba(214,174,82,.8);background:rgba(20,26,22,.6);color:#eac887;font:600 12px Grenze Gotisch,Georgia,serif;padding:0 6px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#kTouch .kt-btn[aria-pressed="true"]{background:rgba(214,174,82,.7);color:#1a1a12}
body.k-touch #world{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.k-joy #world{touch-action:none}
@media (pointer:coarse){
 button,select,.hud-action,[role="button"]{min-height:40px}
 input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}
}
@media (max-width:820px){
 #mmorpgUtilities{display:grid!important;grid-template-columns:repeat(2,1fr);gap:3px;max-width:150px;transform-origin:top right;font-size:12px}
 #mmorpgUtilities button,#mmorpgUtilities a{min-height:32px;padding:2px 4px;font-size:12px}
 .hud-bottom .hud-action{width:44px!important;min-width:44px;height:44px!important;min-height:44px;padding:0}
 .hud-bottom .hud-caption{display:none}
 #mmorpgMinimap{width:100px!important;height:100px!important}
 #mmorpgMinimap canvas{width:100%!important;height:100%!important}
 #mmorpgQuest,#mmorpgChat{max-width:calc(100vw - 150px);font-size:12px}
 #mmorpgWindow{width:calc(100% - 8px)!important;max-width:calc(100% - 8px)!important;left:4px!important}
 #kTouch .kt-joy{bottom:56px}
 #kTouch .kt-btns{bottom:170px}
}

/* Mobile pass: stop the off-canvas hidden dock widening the layout viewport (mobile Chrome zooms out to fit it) */
@media (max-width:820px),(pointer:coarse){
 html,body{overflow-x:hidden;max-width:100vw}
 html body #mmorpgUtilities.k-dock-hidden{display:none!important}
}
@media (max-width:480px){
 /* portrait phone: lift joystick/buttons above the two hotbar rows so they never cover slots */
 #kTouch .kt-joy{bottom:256px}
 #kTouch .kt-btns{bottom:256px;flex-direction:row}
}
/* touch controls must not float over open book windows / panels */
body.k-touch:has(#mmorpgOverlay[data-open="true"]) #kTouch,body.k-touch:has(#mmorpgLegacy[data-open="true"]) #kTouch,body.k-touch:has(#bankPanel:not([hidden])) #kTouch{display:none}
@media (max-height:420px) and (orientation:landscape){
 /* landscape phone: compact controls sit above the single hotbar row, tracker folds away so it never eats joystick touches */
 #kTouch .kt-joy{width:84px;height:84px;left:8px;bottom:96px}
 #kTouch .kt-knob{width:36px;height:36px;margin:-18px 0 0 -18px}
 #kTouch .kt-btns{bottom:96px;right:8px;flex-direction:row}
 html body #kTracker{display:none}
}

/* ===== Leftovers pass: touch targets, minimap/location, landscape, toasts, journal headings ===== */
/* (1) modal close buttons: >=44px hit area on touch / small screens (visual stays compact via inset ring) */
@media (pointer:coarse),(max-width:820px){
 html body #mmorpgOverlay #mmorpgWindow #mmorpgClose,html body #mmorpgWindow[data-subpanel="merchant"] #mmorpgClose,html body #mmorpgWindow #mmorpgClose{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
 html body #bankPanel .k-bank-close,html body #townServicePanel .k-svc-close,html body #kWorldMap header .k-wm-close,.khelp-close{min-width:44px!important;min-height:44px!important}
 html body #bankPanel .k-bank-close,html body #townServicePanel .k-svc-close{width:44px!important;height:44px!important}
}
/* (2) minimap vs location panel: location sits directly under the smaller minimap, never overlapping */
@media (max-width:820px){
 #mmorpgMinimap{top:70px!important;right:8px!important}
 #mmorpgZone{top:176px!important;right:8px!important;width:76px!important;height:76px!important;padding:4px!important;font-size:11px!important}
}
/* (4) toasts: slim, narrow, top-centre strip clear of the NPC labels around the player */
html body div#kMessages{left:50%!important;transform:translateX(-50%);top:92px!important;bottom:auto!important;width:min(300px,calc(100vw - 200px))!important;max-height:56px!important;font-size:13px!important;line-height:1.25;padding:2px 8px;text-align:center;pointer-events:none}
@media (max-width:820px){
 html body div#kMessages{top:66px!important;width:min(260px,calc(100vw - 180px))!important;max-height:48px!important;font-size:12px!important}
}
/* (3) landscape phone (e.g. 812x375): shrink HUD chrome so the playfield stays visible */
@media (max-height:420px) and (orientation:landscape){
 #mmorpgMinimap{width:72px!important;height:72px!important;top:44px!important}
 #mmorpgZone{top:122px!important;width:60px!important;height:60px!important;font-size:10px!important}
 #mmorpgQuest{display:none!important}
 html body div#kMessages{top:44px!important;width:min(260px,calc(100vw - 340px))!important}
 .hud-bottom .hud-action{width:44px!important;min-width:44px;height:44px!important;min-height:44px}
}
@media (max-height:420px) and (orientation:landscape){
 #mmorpgZone{top:122px!important;bottom:auto!important;right:40px!important;width:auto!important;height:auto!important;min-width:0;border-radius:8px!important;padding:2px 8px!important;flex-direction:row!important;gap:5px}
 #mmorpgZone .k-zone-label{display:none!important}
 #kTouch .kt-btns{right:44px!important;bottom:70px!important}
}

/* Joystick hidden until the player touches the world (touch.js reveals it). Buttons stay visible. */
#kTouch .kt-joy{opacity:0;pointer-events:none;transition:opacity .25s}
#kTouch.k-joy-live .kt-joy{opacity:1;pointer-events:auto}

/* #777 390px pass: phone portrait only (max-width:480px). Desktop and landscape rules above are untouched. */
@media (max-width:480px){
 /* Touch buttons and joystick step aside while any modal dialog (book window, abilities/hotbar panel, legacy panel) is open,
    so Menu / Loot / Run never sit over its tiles. Visibility only: nothing is removed from the DOM. */
 body.k-touch:has([aria-modal="true"][data-open="true"]) #kTouch .kt-btns,body.k-touch:has([aria-modal="true"][data-open="true"]) #kTouch .kt-joy{visibility:hidden}
 /* Verify-email banner: a full-width strip above the launcher row instead of a centred top bar, so it never covers the
    top-left portrait, HP/mana/XP bars or the "Choose Your Adventurer" title. Still fixed, still dismissible. */
 html body .k-verify-banner{top:auto!important;bottom:214px;left:8px;right:8px;transform:none;max-width:none;width:auto;font-size:13px;line-height:1.3;padding:6px 10px;flex-wrap:wrap}
 html body .k-verify-banner button{min-height:44px}
 /* Character and abilities tiles stop short of the right-edge dock collapse tab. */
 html body #mmorpgCharacterPanel,html body #mmorpgSpellbook{padding-right:56px}
 /* "All other windows" (legacy panel) opens under the top HUD row as a scrollable sheet, clear of the launcher row and the account header. */
 html body #mmorpgLegacy[data-open="true"]{top:56px;bottom:auto;left:8px;right:8px;width:auto;max-height:calc(100dvh - 120px);overflow:auto;z-index:var(--z-window-base,1000)}
 body:has(#mmorpgLegacy[data-open="true"]) .k-lore-button,body:has(#mmorpgLegacy[data-open="true"]) .k-feat-button,body:has(#mmorpgLegacy[data-open="true"]) .k-mg-button{visibility:hidden}
}
body[data-input-modal] #kTouch{display:none}