/* =====================================================================
   AETHERIA — touch.css: the touch control scheme (js/touch.js, AE.Touch).
   Every rule hangs on html.ae-touch (the new scheme), html.ae-touchdev (touch input, both schemes: section 4) or on
   #ae-touch (which exists only on touch devices): a desktop never gets any of them, so nothing here applies there (the
   only unconditional rules style elements a desktop never shows: .w-help .hs-touch, .sk-xcap, .w-menu .tt-set). Positions
   come from the --tt-* variables touch.js layout() writes on <html> (CSS px, viewport coordinates). Colours: the Mana
   theme tokens (theme_mana.css), with fallbacks.
   Classes on <html>: ae-touch, ae-port / ae-land, ae-short (height <= 500), ae-lefty, ae-tt-off (not playing),
   ae-tt-blocked (modal / dead), ae-typing, ae-pspop (Corvo popover open), ae-drawer, ae-tf-top / ae-tf-compact /
   ae-tf-on (target frame), ae-log-1..3 (log lines), ae-pf-hide, ae-mm-compact / ae-mm-scale, ae-tt-fixed.
   ===================================================================== */

/* ---------- 1. the console: a viewport-sized frame; its slots, orbs and Corvo strip are placed one by one ---------- */
html.ae-touch .console { left: 0; top: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; padding: 0; isolation: auto; }
html.ae-touch .console .con-row,
html.ae-touch .console .con-plate,
html.ae-touch .console .belt,
html.ae-touch .console .skills { position: static; display: block; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
html.ae-touch .console .con-plate::before,
html.ae-touch .console .con-plate::after { content: none; display: none; }
html.ae-touch .console :is(.menu-btns, .con-div, .pots, .key, .sk-rmb) { display: none; }
/* XP: a thin line along the bottom edge, never a touch target (it ran under the joystick band) */
html.ae-touch .console .xp { position: absolute; left: 0; right: 0; top: auto; bottom: env(safe-area-inset-bottom, 0px); height: 4px; margin: 0; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; z-index: 1; }
html.ae-touch .console .xp-txt { display: none; }

/* skill slots 1-6: the cluster around Attack */
html.ae-touch .console .sk[data-slot="0"] { --x: var(--tt-h1-x); --y: var(--tt-h1-y); --d: var(--tt-h1-d); }
html.ae-touch .console .sk[data-slot="1"] { --x: var(--tt-h2-x); --y: var(--tt-h2-y); --d: var(--tt-h2-d); }
html.ae-touch .console .sk[data-slot="2"] { --x: var(--tt-h3-x); --y: var(--tt-h3-y); --d: var(--tt-h3-d); }
html.ae-touch .console .sk[data-slot="3"] { --x: var(--tt-h4-x); --y: var(--tt-h4-y); --d: var(--tt-h4-d); }
html.ae-touch .console .sk[data-slot="4"] { --x: var(--tt-h5-x); --y: var(--tt-h5-y); --d: var(--tt-h5-d); }
html.ae-touch .console .sk[data-slot="5"] { --x: var(--tt-h6-x); --y: var(--tt-h6-y); --d: var(--tt-h6-d); }
html.ae-touch .console .sk[data-slot] {
  position: absolute; z-index: 2;
  left: calc(var(--x) - var(--d) / 2); top: calc(var(--y) - var(--d) / 2); width: var(--d); height: var(--d);
  border-radius: 50%; opacity: var(--tt-alpha, .85);      /* round, as the layout model's circles (8 px apart) */
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
html.ae-touch .console .sk[data-slot].down { opacity: 1; transform: scale(.94); border-color: var(--mn-gold, #e2b65a); }
html.ae-touch .console .sk[data-slot] .sk-img { width: calc(var(--d) * .7); height: calc(var(--d) * .7); border-radius: 8px; }
html.ae-touch .console .sk[data-slot] .sk-cd { border-radius: inherit; }
html.ae-touch .console .sk[data-slot] .sk-cdt { font-size: 18px; }
html.ae-touch .console .sk[data-slot] .sk-lock img { width: 18px; height: 22px; }
html.ae-touch .console .sk[data-slot] .sk-lv { font-size: 10px; }
html.ae-touch .console .sk.empty::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 26px/1 var(--f-ui, sans-serif); color: var(--mn-gold-mid, #c9953a); pointer-events: none; }
/* aiming, finger back on the button: release = cancel */
html.ae-touch .sk.tt-cancel { border-color: var(--mn-rose-deep, #b23a52) !important; }
html.ae-touch .sk.tt-cancel::after { content: "\2715"; position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; font: 800 24px/1 var(--f-ui, sans-serif); color: #fff; background: rgba(178, 58, 82, .6); border-radius: inherit; pointer-events: none; }

/* the orbs are the quick potion buttons (count badge, cooldown ring drawn by touch.js: .tt-orbcd) */
html.ae-touch .console .orb.hp { --x: var(--tt-orbhp-x); --y: var(--tt-orbhp-y); }
html.ae-touch .console .orb.mp { --x: var(--tt-orbmp-x); --y: var(--tt-orbmp-y); }
html.ae-touch .console .orb {
  position: absolute; z-index: 2; left: calc(var(--x) - 28px); top: calc(var(--y) - 28px); width: 56px; height: 56px; margin: 0; border-radius: 50%;
  touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
html.ae-touch .console .orb.down { transform: scale(.94); }
html.ae-touch .console .orb-m { display: none; }
html.ae-touch .console .orb-v { font-size: 11px; }
html.ae-touch .console .orb-pot { display: block; bottom: -9px; padding: 2px 6px 1px; font-size: max(12px, calc(10px * var(--txt))); }
html.ae-touch .console .orb .tt-orbcd { position: absolute; inset: 6%; z-index: 2; border-radius: 50%; pointer-events: none; }

/* the Corvo strip: one 44-px button in the row's Corvo place; its 4 options open below (portrait) / above (landscape) */
html.ae-touch .console .pet-strip { left: calc(var(--tt-raven-x) - 22px); top: calc(var(--tt-raven-y) - 22px); right: auto; bottom: auto !important; padding: 0; gap: 0; background: none; border: 0; box-shadow: none; z-index: 3; }
html.ae-touch .console .pet-strip .ps-one {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fffdf6, var(--mn-well, #efe1c0) 70%, #e2cc9c); border: 2px solid var(--mn-gold-mid, #c9953a);
}
html.ae-touch .console .pet-strip .ps-one img { width: 28px; height: 28px; margin: 6px; }
html.ae-touch .console .pet-strip .ps-opt { min-height: 44px; }
html.ae-touch.ae-port .console .pet-strip .ps-pop { top: calc(100% + 6px); bottom: auto; left: 0; right: auto; }
html.ae-touch.ae-land .console .pet-strip .ps-pop { bottom: calc(100% + 6px); top: auto; right: 0; left: auto; }
html.ae-touch.ae-land.ae-lefty .console .pet-strip .ps-pop { left: 0; right: auto; }

/* ---------- 2. target frame, game log, quest tracker, minimap, party frames ---------- */
html.ae-touch.ae-port .hud-tc { top: var(--tt-tf-top); bottom: auto; left: 10px; right: 10px; transform: none; }
html.ae-touch.ae-port .hud-tc .tf { width: min(335px, 100%); }
html.ae-touch.ae-tf-compact .hud-tc .tf { padding: 3px 8px 5px; }
html.ae-touch.ae-tf-compact .hud-tc :is(.tf-lvl, .tf-tags) { display: none; }
html.ae-touch.ae-tf-compact .hud-tc .tf-top { margin-bottom: 2px; }

/* the game log: 1-3 lines between the target frame and the orbs, never a touch target (history: the drawer, step B) */
html.ae-touch .chat { left: var(--tt-log-x); right: auto; bottom: calc(100% - var(--tt-log-y)); width: var(--tt-log-w); }
html.ae-touch .chat-btn { display: none; }
html.ae-touch .chat:not(.open) .chat-l { max-height: none; overflow: hidden; padding: 0; background: none; border: 0; box-shadow: none; pointer-events: none; }
html.ae-touch .chat:not(.open) .ln { pointer-events: none; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ae-touch.ae-log-1 .chat:not(.open) .ln:nth-last-child(n+2),
html.ae-touch.ae-log-2 .chat:not(.open) .ln:nth-last-child(n+2),
html.ae-touch.ae-log-3 .chat:not(.open) .ln:nth-last-child(n+3) { display: none; }
/* the players' chat: its last line on top of the log box (2+ lines); the "Chat" and online pills: the row and the drawer */
html.ae-touch #ae-net :is(.nu-on, .nu-cbtn) { display: none !important; }
html.ae-touch #ae-net .nu-chat:not(.open) { left: var(--tt-log-x); right: auto; top: var(--tt-log-top); bottom: auto; width: var(--tt-log-w); }
html.ae-touch #ae-net .nu-chat:not(.open) .nu-head { display: none; }      /* a touch laptop (hover): no channel tabs over the log */
html.ae-touch #ae-net .nu-chat:not(.open) .nu-log { max-height: 18px; overflow: hidden; }
html.ae-touch #ae-net .nu-chat:not(.open) .nu-ln { display: none; pointer-events: none; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ae-touch:is(.ae-log-2, .ae-log-3) #ae-net .nu-chat:not(.open) .nu-ln:last-child:not(.old) { display: block; }

/* portrait: the quest tracker under the row (it steps aside while the target frame uses that band) */
html.ae-touch.ae-port .hud-tr .qt { position: absolute; top: var(--tt-qt-top); right: 0; width: 156px; max-height: 72px; overflow: hidden; }
html.ae-touch.ae-port.ae-tf-top.ae-tf-on .hud-tr .qt { display: none; }
/* phone landscape: the minimap alone; if the cluster still reaches it, no coordinates / clock, then a smaller minimap */
html.ae-touch.ae-land.ae-short .hud-tr :is(.mm-name, .qt) { display: none; }
html.ae-touch.ae-mm-compact .hud-tr .mm-info { display: none; }
html.ae-touch.ae-mm-scale .hud-tr .mm { transform: scale(.8); transform-origin: 100% 0; }

/* party frames (#ae-social, a layer above #ui): compact rows, hero-safe width, the room touch.js measured */
html.ae-touch body #ae-social .as-party-frames { left: var(--tt-pf-left); top: var(--tt-pf-top); width: var(--tt-pf-w); max-height: var(--tt-pf-maxh); overflow-x: hidden; overflow-y: auto; gap: 4px; scrollbar-width: none; }
html.ae-touch body #ae-social .as-member { min-height: 30px; padding: 3px 7px; }
html.ae-touch body #ae-social .as-member :is(small, .as-meter.as-mana) { display: none; }
html.ae-touch body #ae-social .as-member .as-meter { margin: 2px 0 0; }
html.ae-touch.ae-pf-hide body #ae-social .as-party-frames,
html.ae-touch.ae-drawer body #ae-social :is(.as-party-frames, .as-floating, .as-pk) { visibility: hidden; }
/* Party: the drawer; PvP: the row (online_pvp.js also hides its pill and zone badge in the scheme) */
html.ae-touch body #ae-social :is(.as-party-toggle, .as-zone, .as-pvp-toggle) { display: none !important; }

/* ---------- 3. the #ae-touch layer (inside #ui, above the HUD, below the windows) ---------- */
#ae-touch { display: none; }
html.ae-touch #ae-touch { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; font-family: var(--f-ui, sans-serif); }
html.ae-touch.ae-tt-off #ae-touch { display: none; }
html.ae-touch.ae-tt-blocked #ae-touch > :not(.tt-drawer):not(.tt-scrim) { opacity: .35; }
html.ae-touch.ae-tt-blocked #ae-touch * { pointer-events: none !important; }
html.ae-touch.ae-typing #ae-touch,
html.ae-touch.ae-typing .console :is(.sk[data-slot], .orb, .pet-strip) { visibility: hidden; }
html.ae-touch.ae-pspop #ae-touch > :is(.tt-btn, .tt-zone, .tt-row, .tt-stick) { visibility: hidden; }
#ae-touch .tt-probe { position: fixed; inset: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); visibility: hidden; pointer-events: none; }

#ae-touch :is(.tt-btn, .tt-zone, .tt-tile, .tt-dx, .tt-scrim) {
  pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#ae-touch .tt-zone { position: absolute; }
#ae-touch .tt-btn {
  position: absolute; display: grid; place-items: center; padding: 0; margin: 0; width: 44px; height: 44px; border-radius: 50%;
  color: var(--mn-ink, #3b2a1f); font-family: var(--f-ui, sans-serif);
  background: radial-gradient(circle at 50% 40%, #fffdf6, var(--mn-well, #efe1c0) 70%, #e2cc9c);
  border: 2px solid var(--mn-gold-mid, #c9953a);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi, #fff4c2), inset 0 2px 6px rgba(138, 95, 30, .3);
  filter: drop-shadow(0 1px 2px rgba(59, 42, 31, .6));
  opacity: var(--tt-alpha, .85);
}
#ae-touch .tt-btn::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }      /* 4-px hit slop */
#ae-touch .tt-btn.down { opacity: 1; border-color: var(--mn-gold, #e2b65a); transform: scale(.94); box-shadow: inset 0 0 0 1px var(--mn-gold-hi, #fff4c2), 0 0 0 3px rgba(255, 217, 138, .6); }
#ae-touch .tt-btn svg { display: block; width: 24px; height: 24px; }
#ae-touch .tt-btn img.tt-ic { width: 26px; height: 26px; }
#ae-touch .tt-atk { border-width: 3px; box-shadow: inset 0 0 0 1px var(--mn-gold-hi, #fff4c2), 0 0 0 3px var(--mn-gold, #e2b65a), 0 3px 8px rgba(74, 46, 20, .35); }
#ae-touch .tt-atk img.tt-ic { width: 46%; height: 46%; }
#ae-touch .tt-atk.tt-shake { animation: shake .25s steps(4); }
#ae-touch .tt-cyc svg { width: 26px; height: 26px; }
#ae-touch .tt-pick.dim { opacity: .45; }
#ae-touch .tt-cap {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 1px 6px; white-space: nowrap; pointer-events: none;
  font: 700 11px/1.2 var(--f-num, sans-serif); color: var(--mn-ink, #3b2a1f);
  background: var(--mn-paper-hi, #fffaf0); border: 1px solid var(--mn-gold-mid, #c9953a); border-radius: 999px;
}
/* Extra (the right-mouse skill): the skill slot look, with its cooldown sweep */
#ae-touch .tt-h7 .sk-img { width: 70%; height: 70%; border-radius: 8px; }
#ae-touch .tt-h7 .sk-cd { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
#ae-touch .tt-h7 .sk-cdt { font: 800 18px/1 var(--f-num, sans-serif); color: #fffaf0; text-shadow: 0 1px 2px #3b2a1f, 0 0 3px #3b2a1f; }
#ae-touch .tt-h7.locked .sk-img { filter: grayscale(1) brightness(.6); }

/* joystick (a faint ring where it starts; floating: centred on the thumb) */
#ae-touch .tt-stick {
  position: absolute; border-radius: 50%; pointer-events: none; opacity: .28;
  background: radial-gradient(circle, rgba(255, 250, 236, .32), rgba(255, 250, 236, .1) 68%, rgba(201, 149, 58, .18));
  border: 2px solid rgba(201, 149, 58, .8); box-shadow: 0 0 0 1px rgba(255, 244, 194, .5);
}
#ae-touch .tt-stick.on { opacity: calc(var(--tt-alpha, .85) * .9); }
#ae-touch .tt-knob {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 38%, #fffdf6, var(--mn-well, #efe1c0) 70%, #e2cc9c);
  border: 2px solid var(--mn-gold-mid, #c9953a); box-shadow: 0 2px 6px rgba(74, 46, 20, .45);
}

/* utility row */
#ae-touch .tt-row { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#ae-touch .tt-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; pointer-events: none;
  font: 800 11px/18px var(--f-num, sans-serif); color: #fff; text-align: center;
  background: var(--mn-rose-deep, #b23a52); border: 1px solid #fffaf0; border-radius: 999px;
}
#ae-touch .tt-pvp { --tt-hold: 0; }
#ae-touch .tt-pvp::after {           /* hold-to-turn-on ring */
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--mn-rose-deep, #b23a52) calc(var(--tt-hold) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%);
}
#ae-touch .tt-pvp.on { color: #fff; background: radial-gradient(circle at 50% 40%, #f4a4b0, #c2475e 70%, #8e2a3e); border-color: #8e2a3e; animation: ttPvp 1.2s ease-in-out infinite; }
@keyframes ttPvp { 0%, 100% { box-shadow: 0 0 0 2px rgba(178, 58, 82, .55); } 50% { box-shadow: 0 0 0 7px rgba(178, 58, 82, .12); } }

/* aim preview: ground ring / direction arrow (world positions from AE.R.worldToClient) */
#ae-touch .tt-aim { position: absolute; inset: 0; pointer-events: none; }
#ae-touch .tt-ring { position: absolute; display: none; border-radius: 50%; border: 2px solid rgba(255, 228, 150, .95); background: radial-gradient(ellipse, rgba(255, 217, 138, .08), rgba(255, 217, 138, .3)); box-shadow: 0 0 10px rgba(255, 217, 138, .7); }
#ae-touch .tt-arrow {
  position: absolute; display: none; height: 14px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 228, 150, .1), rgba(255, 228, 150, .92));
  clip-path: polygon(0 35%, calc(100% - 14px) 35%, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, calc(100% - 14px) 65%, 0 65%);
  filter: drop-shadow(0 0 3px rgba(255, 217, 138, .9));
}
#ae-touch .tt-hint {
  position: absolute; left: 50%; top: 60%; display: none; transform: translateX(-50%); padding: 3px 10px; white-space: nowrap;
  font: 700 12px/1.2 var(--f-ui, sans-serif); color: var(--mn-ink, #3b2a1f);
  background: rgba(255, 250, 236, .92); border: 1px solid var(--mn-gold-mid, #c9953a); border-radius: 999px;
}
#ae-touch .tt-hint.warn { color: #fff; background: var(--mn-rose-deep, #b23a52); }
#ae-touch :is(.tt-ring, .tt-arrow, .tt-hint).on { display: block; }

/* the menu drawer: bottom sheet (portrait), side panel (landscape) */
#ae-touch .tt-scrim { position: absolute; inset: 0; background: rgba(59, 42, 31, .38); }
#ae-touch .tt-drawer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-height: 70vh; display: flex; flex-direction: column; pointer-events: auto;
  color: var(--mn-ink, #3b2a1f);
  background: var(--mn-paper-tex, none) 0 0 / 256px 256px, linear-gradient(180deg, var(--mn-paper-hi, #fffaf0), var(--mn-paper-2, #f1e2bf));
  border-top: 2px solid var(--mn-gold-mid, #c9953a); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 24px rgba(74, 46, 20, .35);
  padding: 0 calc(8px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(8px + env(safe-area-inset-left, 0px));
}
html.ae-land #ae-touch .tt-drawer { left: auto; top: 0; width: min(360px, 46vw); max-height: none; border-top: 0; border-left: 2px solid var(--mn-gold-mid, #c9953a); border-radius: 18px 0 0 18px; padding-top: env(safe-area-inset-top, 0px); }
html.ae-land.ae-lefty #ae-touch .tt-drawer { right: auto; left: 0; border-left: 0; border-right: 2px solid var(--mn-gold-mid, #c9953a); border-radius: 0 18px 18px 0; }
#ae-touch .tt-dh { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 0 0 10px; }
#ae-touch .tt-dt { font: 700 calc(18px * var(--txt-h, 1))/1 var(--f-title, serif); color: var(--mn-gold-deep, #8a5f1e); text-transform: uppercase; letter-spacing: .04em; }
#ae-touch .tt-dx { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff4f4, #f2b0ba 45%, #c25a6e); border: 2px solid var(--mn-gold-mid, #c9953a); }
#ae-touch .tt-dx img { width: 18px; height: 18px; }
#ae-touch .tt-db { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 4px 4px 12px; }
html.ae-land #ae-touch .tt-db { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ae-touch .tt-tile {
  position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px;
  font: 600 12.5px/1.15 var(--f-ui, sans-serif); color: var(--mn-ink, #3b2a1f); text-align: center; touch-action: pan-y;
  background: linear-gradient(180deg, #fffdf6, #fbf0d6 45%, #f0dcae); border: 1.5px solid var(--mn-gold-mid, #c9953a); border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(74, 46, 20, .25);
}
#ae-touch .tt-tile.down { border-color: var(--mn-gold, #e2b65a); background: linear-gradient(180deg, #fffbe6, #ffe7a8); transform: scale(.97); }
#ae-touch .tt-tile .tt-ic { display: block; width: 26px; height: 26px; }
#ae-touch .tt-tile .tt-ic svg { display: block; width: 26px; height: 26px; }
#ae-touch .tt-tile .tt-badge { top: 4px; right: 6px; }
#ae-touch .tt-tile.dim { opacity: .5; }

/* ---------- 4. windows, sheets, chat, menu and help on touch (step B; html.ae-touchdev = touch input, both schemes) ---------- */
/* fingers, not keys: no key letters; the touch hints instead of the mouse ones (a touch laptop has hover, so by class) */
html.ae-touchdev :is(kbd.key, .win-k) { display: none; }
html.ae-touchdev .hint-mouse { display: none; }
html.ae-touchdev .hint-touch { display: inline; }
/* close buttons and window buttons >= 44 px (28-36 px before) */
html.ae-touchdev .win-x { width: 44px; height: 44px; }
html.ae-touchdev .win-x img { width: 18px; height: 18px; }
html.ae-touchdev .win-h { min-height: 48px; }
html.ae-touchdev :is(.win, .sheet) .btn, html.ae-touchdev .btn.sm { min-height: 44px; }
html.ae-touchdev .btn.sm { min-width: 44px; }                                    /* the shop's ×5 (42 px) */
html.ae-touchdev .som-language-button { min-height: 44px; }                      /* Esc menu: Português / English (34 px) */
/* the round amulet / ring sockets (29-36 px on phones): a 44-px touch circle around them, nothing drawn */
html.ae-touchdev .w-inv .slot:is([data-slot="amuleto"], [data-slot="anel1"], [data-slot="anel2"])::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%; border-radius: 50%; }
html.ae-touchdev .w-skills .sk-bar { --sk: 44px; }
html.ae-touchdev .chaos-ex .btn.chaos-st { width: 44px; min-width: 44px; height: 44px; }      /* Goblin, Asas 1: the jewel steppers */
@media (max-width: 760px) { html.ae-touchdev .chaos-ex { grid-template-columns: minmax(0, 1fr); } }
html.ae-touchdev body #ae-net .nu-x { width: 44px; height: 44px; font-size: 18px; }
html.ae-touchdev body #ae-net .nu-chat.open :is(.nu-tab, .nu-ch, .nu-send) { height: 44px; min-height: 44px; }
html.ae-touchdev body #ae-net .nu-list .btn { min-height: 44px; }
html.ae-touchdev body #ae-social :is(.as-close, .as-card-x) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
html.ae-touchdev body #ae-social .as-button { min-height: 44px; }
/* text fields: 16 px at least (iOS zooms the page into a smaller one) */
html.ae-touchdev body #ae-net .nu-inp { height: 44px; font-size: max(16px, calc(14px * var(--txt))); }
html.ae-touchdev .vault-in { height: 44px; font-size: max(16px, calc(13px * var(--txt))); }
/* the hero's PK / combat pill and the party frames step aside for a window, the item sheet, the open chat / online list /
   ranking or the game log (#ae-social is above #ui and #ae-net) */
html.ae-touchdev #ui:has(> .wins > .win:not(.hide), > .sheet:not(.hide), > .hud > .chat.open) ~ #ae-social :is(.as-pk, .as-party-frames),
html.ae-touchdev #ae-net:has(> .nu-chat.open, > .nu-rank:not(.nu-hide), > .nu-list:not(.nu-hide)) ~ #ae-social :is(.as-pk, .as-party-frames) { visibility: hidden; }
/* the online list (#ae-net, under #ui): above the touch controls while open, a panel at the top centre */
html.ae-touchdev body #ae-net:has(> .nu-list:not(.nu-hide)) { z-index: 3; }
html.ae-touch body #ae-net .nu-list { top: calc(8px + env(safe-area-inset-top)) !important; left: 50%; right: auto !important; transform: translateX(-50%); width: min(340px, calc(100vw - 16px)); max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
html.ae-touchdev body #ae-net .win-k { display: none; }

/* the touch scheme's help (ui.js buildHelpWin): .hs-touch only there; Mouse / Teclado / Inventário on desktop; the old Toque
   rows for the Clássico scheme */
.w-help .hs-touch { display: none; }
html.ae-touch .w-help .hs-touch { display: block; }
html.ae-touchdev .w-help .hs-desk, html.ae-touch .w-help .hs-classic { display: none; }
.w-help .hs-touch dt kbd { white-space: nowrap; }

/* Esc menu: "Controles de toque" (ui.js touchRows) */
.w-menu .tt-set { display: flex; flex-direction: column; gap: 7px; }

/* K window: the right-mouse skill is the "Extra" button of the touch scheme (caption instead of the mouse icon) */
.sk-xcap { display: none; }
html.ae-touch .w-skills .sk-rmbs.hint-mouse { display: grid; }
html.ae-touch .w-skills :is(.skr-rmbb, .skr-rmbt).hint-mouse { display: inline-flex; align-items: center; justify-content: center; }
html.ae-touch .w-skills :is(.skr-rmbb, .skr-rmbt) .kms { display: none; }
html.ae-touch .w-skills :is(.skr-rmbb, .skr-rmbt) .sk-xcap { display: inline; }
html.ae-touch .w-skills .sk-rmbs .sk-xcap {
  display: block; position: absolute; left: 50%; bottom: -8px; z-index: 5; transform: translateX(-50%); padding: 1px 5px; pointer-events: none;
  font: 700 10px/1.2 var(--f-num, sans-serif); color: var(--mn-ink, #3b2a1f); white-space: nowrap;
  background: var(--mn-paper-hi, #fffaf0); border: 1px solid var(--mn-gold-mid, #c9953a); border-radius: 999px;
}

/* the game log opened from the drawer ("Mensagens do jogo"): a panel at the top, its own button closes it */
html.ae-touch .chat.open { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); bottom: auto; width: auto; max-width: 560px; margin: 0 auto; pointer-events: auto; }
html.ae-touch .chat.open .chat-btn { display: grid; position: absolute; top: 4px; right: 4px; z-index: 2; width: 44px; height: 44px; margin: 0; }
html.ae-touch .chat.open .chat-l { max-height: min(50vh, 360px); padding-right: 48px; }
html.ae-touch .chat.open .ln { font-size: max(13px, calc(13px * var(--txt))); line-height: 1.35; white-space: normal; }
#ui:has(> .hud > .chat.open) > #ae-touch .tt-row { visibility: hidden; }

/* phones sideways (touch, height <= 500 px, any width): the Inventário's paper doll beside the bag, cells sized to fit the
   height (inventory.css's short-wide layout); the set name and the hint step aside (the bag fits without scrolling) */
@media (orientation: landscape) and (max-height: 500px) {
  html.ae-touchdev .win.w-inv { --cell: clamp(26px, min(calc((50vw - 48px) / 8), calc((100dvh - 114px - env(safe-area-inset-bottom)) / 8)), 44px); }
  html.ae-touchdev .w-inv .win-h { height: 44px; flex-shrink: 0; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .win-b { display: grid; grid-template-columns: repeat(2, calc(8 * var(--cell) + 4px)); column-gap: 24px; justify-content: center; align-content: start; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .inv-identity { grid-area: 1 / 1; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .doll { grid-area: 2 / 1; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .inv-foot { grid-area: 3 / 1; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .inv-set { grid-area: 4 / 1; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .inv-hint { grid-area: 5 / 1; align-self: start; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .inv-bag-head { grid-area: 1 / 2; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv .grid { grid-area: 2 / 2 / span 4; align-self: start; }
  html.ae-touchdev #ui:not(.vaulting) .w-inv :is(.inv-set, .inv-hint) { display: none; }
}
/* phones sideways (touch, height <= 500 px; ui.js isNarrow): the full-screen window sheets of the narrow layout (style.css
   @media (max-width: 760px), inventory.css, quests.css, theme_mana.css, net.js), plus the side notches */
@media (min-width: 761px) and (max-height: 500px) {
  html.ae-touchdev .win { position: absolute; inset: 0 !important; left: 0 !important; top: 0 !important; width: auto !important; max-width: none; max-height: none; border-left: 0; border-right: 0; border-radius: 0; }
  html.ae-touchdev .win.pop { animation: fadeIn .16s steps(3); }
  html.ae-touchdev .pnl.win::after { display: none; }
  html.ae-touchdev .win-h { height: 48px; border-radius: 0; padding-top: env(safe-area-inset-top); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(6px + env(safe-area-inset-right)); cursor: default; }
  html.ae-touchdev .win-t { font-size: calc(18px * var(--txt-h)); }
  html.ae-touchdev .win-b { padding: 10px calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); }
  html.ae-touchdev .only-narrow { display: inline-flex; }
  html.ae-touchdev .shop-list { max-height: none; }
  html.ae-touchdev .w-menu .win-b { max-width: 460px; width: 100%; margin: 0 auto; }
  html.ae-touchdev :is(.w-char, .w-quest, .w-dialog, .w-warp, .w-shop, .w-skills, .w-chaos, .w-help, .w-admin) .win-b > * { max-width: 760px; margin-left: auto; margin-right: auto; }
  html.ae-touchdev .qw-list { max-height: none; }
  html.ae-touchdev .dlq-row { min-height: 40px; }
  /* Baú: vault left, bag right (style.css / inventory.css narrow landscape) */
  html.ae-touchdev #ui.vaulting .win.w-vault { bottom: 0 !important; right: 50% !important; }
  html.ae-touchdev #ui.vaulting .win.w-inv { top: 0 !important; left: 50% !important; --cell: clamp(18px, min(calc((50vw - 44px) / 8), calc((100dvh - 120px) / 8)), 38px); }
  html.ae-touchdev #ui.vaulting :is(.w-inv .doll, .w-inv .inv-hint, .w-inv .inv-identity, .w-inv .inv-set, .w-vault .shop-top) { display: none; }
  html.ae-touchdev #ui.vaulting :is(.w-vault, .w-inv) .win-b { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  html.ae-touchdev #ui.vaulting .w-vault .win-b { padding-left: calc(10px + env(safe-area-inset-left)); }
  html.ae-touchdev #ui.vaulting .w-inv .win-b { padding-right: calc(10px + env(safe-area-inset-right)); }
  html.ae-touchdev #ui.vaulting .w-inv .inv-bag-head { margin-top: 0; }
  /* Goblin do Caos */
  html.ae-touchdev .w-chaos .win-b > * { max-width: 560px; }
  html.ae-touchdev .chaos-pick { max-height: 120px; }
  html.ae-touchdev .chaos-pk { width: 48px; height: 48px; }
  html.ae-touchdev .btn.chaos-go { min-height: 46px; }
  /* ranking (#ae-net): a full-screen window too (net.js centres it with a transform) */
  html.ae-touchdev body #ae-net .nu-rank { transform: none; max-height: none; inset: 0; width: auto; border-radius: 0; }
  /* a full-screen window covers the party frames */
  html.ae-touchdev #ui:has(> .wins > .win:not(.hide), > .sheet:not(.hide)) ~ #ae-social .as-party-frames { visibility: hidden; }
  /* Party / trade windows (#ae-social): the whole height; the trade's grids shorter and its footer on one line */
  html.ae-touchdev body #ae-social .as-window { max-height: calc(100dvh - 12px); }
  html.ae-touchdev body #ae-social .as-window-head { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  html.ae-touchdev body #ae-social .as-trade-grid { width: min(100%, 256px); }
  html.ae-touchdev body #ae-social .as-trade-footer { flex-wrap: nowrap; padding: 6px 12px; }
  html.ae-touchdev body #ae-social .as-trade-status { width: auto; flex: 1 1 auto; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #ae-touch .tt-pvp.on { animation: none; box-shadow: 0 0 0 3px rgba(178, 58, 82, .6); }
  #ae-touch .tt-atk.tt-shake { animation: none; }
  #ae-touch :is(.tt-btn, .tt-tile).down, html.ae-touch .console :is(.sk[data-slot], .orb).down { transform: none; }
}