/* Mobile mode, touch controls and gamepad prompts. Linked last. Everything for phones is scoped to body.mobile and the
   mobile elements (#mHud, #mCluster, #mTouch, #mSheet, #mCard, #mRotate); the gamepad focus ring and glyph badges
   apply only under body.pad (a gamepad in use). Desktop layouts are untouched by this file.
   The game's global button rules are very specific (button:not(...) chains), so mobile rules start from #ui. */

/* ============ gamepad (desktop and mobile) ============ */
body.pad .pad-focus { outline: 3px solid #ffd66c !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(20, 12, 4, .7), 0 0 18px rgba(255, 207, 106, .75) !important; z-index: 5; }
body.pad #hudCluster .akey, body.pad #hudCluster .bkey, body.pad #hudCluster #tpBtn .akey { top: 2px; left: 2px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #14100cdd; border: 1px solid #d4a24c; color: #ffe6a6; font: 700 10px/14px Georgia, serif; text-align: center; }
#overlay .pad-menu { display: none; }
body.pad #overlay .pad-menu { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; }
body.pad #ui #overlay .pad-menu .mbtn { width: auto; min-width: 110px; min-height: 44px; }

/* ============ the item, skill and stat card (touch and gamepad) ============ */
#mCard { position: fixed; z-index: 95; top: 64px; bottom: 12px; width: min(420px, 46vw); display: flex; flex-direction: column; pointer-events: auto;
  background: linear-gradient(#1d1611f6, #0d0a08f8); border: 1px solid #9a7741; border-radius: 12px; box-shadow: 0 12px 40px #000c, inset 0 0 0 1px #000; color: #e7ddc7; }
#mCard.hidden { display: none; }
#mCard.right { right: max(12px, env(safe-area-inset-right)); }
#mCard.left { left: max(12px, env(safe-area-inset-left)); }
body:not(.mobile) #mCard { top: 12vh; bottom: auto; max-height: 76vh; }
body.mobile #mCard { top: calc(var(--m-st) + 12px); bottom: calc(var(--m-sb) + 12px); }
body.mobile #mCard.right { right: max(12px, var(--m-sr)); }
body.mobile #mCard.left { left: max(12px, var(--m-sl)); }
#mCard .m-card-body { flex: 1; overflow-y: auto; padding: 14px 16px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#mCard .m-tip { font-size: 15px; line-height: 1.3; }
#mCard .m-tip .tt-name { font-size: 18px; }
#mCard .m-tip .tt-skill-icon { float: right; width: 52px; height: 52px; margin: 0 0 6px 8px; border-radius: 6px; }
#mCard .m-compare { margin-top: 12px; padding-top: 10px; border-top: 1px solid #6e5034; display: grid; gap: 10px; }
#mCard .m-compare .tt-col { font-size: 14px; }
#mCard .m-compare .tt-compare-label { color: #bfa46c; font: 700 12px Cinzel, Georgia, serif; text-transform: uppercase; margin-bottom: 4px; }
#mCard .m-card-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #4a3a28; }
#mCard .m-card-acts:empty { display: none; }
#ui #mCard button.m-act { flex: 1 1 calc(50% - 8px); min-width: 0; min-height: 46px; margin: 0; padding: 6px 10px; border: 1px solid #98703c; border-image: none; border-radius: 8px; background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 15px/1.1 Cinzel, Georgia, serif; text-shadow: 0 1px 2px #000; }
#ui #mCard button.m-act.main { background: linear-gradient(#7e4c22, #3d200c); border-color: #e0b45c; color: #fff3d0; }
#ui #mCard button.m-act.warn { background: linear-gradient(#7a2718, #3a0e08); border-color: #e0896a; }
#ui #mCard button.m-card-x { position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 2px solid #a87a3b; border-image: none; border-radius: 50%; background: linear-gradient(#61301d, #260b07); color: #f2d18e; font: 700 20px/1 Georgia, serif; }
#mCard .m-slotpick { margin-top: 12px; }
#mCard .m-slotgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
#ui #mCard button.m-slotbtn { flex: none; min-height: 58px; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; font: 600 10px/1 Georgia, serif; }
#ui #mCard button.m-slotbtn img { width: 32px; height: 32px; border-radius: 4px; }
#ui #mCard button.m-slotbtn.on { border-color: #ffd66c; box-shadow: 0 0 10px #ffcf6a88; }
#ui #mCard button.m-slotbtn.primary { grid-row: span 2; }

/* ============ key bindings (desktop Controls section) ============ */
#overlay .menubox.keybinds { width: min(960px, 96vw); max-height: 94vh; overflow-y: auto; }
#overlay .keybinds .kb-note { margin: 0 auto 10px; max-width: 640px; color: #c9b995; font-size: 15px; }
#overlay .keybinds .kb-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px 22px; text-align: left; }
#overlay .keybinds h3 { min-height: 0; margin: 8px 0 4px; padding: 0 0 4px; background: none; border-bottom: 1px solid rgba(214, 170, 92, .3); color: #e7c675; font: 700 14px Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
#overlay .keybinds .kb-row { display: grid; grid-template-columns: 1fr 78px 78px; gap: 6px; align-items: center; min-height: 32px; font-size: 15px; color: #eadfc4; }
#ui #overlay button.kb-key { margin: 0; min-height: 28px; height: 28px; padding: 0 6px; border: 1px solid #98703c; border-image: none; border-radius: 5px; background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 13px/1 Georgia, serif; }
#ui #overlay button.kb-key.empty { color: #8a7a60; }
#ui #overlay button.kb-key.live { background: #7e4c22; border-color: #ffd66c; color: #fff; }
#overlay .keybinds .kb-foot { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 12px; }
#ui #overlay button.kb-reset { margin: 0; min-height: 40px; padding: 0 16px; border: 1px solid #98703c; border-image: none; border-radius: 6px; background: linear-gradient(#43301e, #21170f); color: #ffe6a6; }
#ui #overlay button.kb-reset:disabled { opacity: .45; }

/* ============ mobile mode ============ */
/* The phone HUD's geometry: src/mobile/geometry.js computes it from the measured screen and src/mobile/index.js sets these
   on body (inline, so they win), the same numbers the canvas minimap uses. The values here only stand in until then. */
body.mobile { --m-sl: env(safe-area-inset-left, 0px); --m-sr: env(safe-area-inset-right, 0px); --m-st: env(safe-area-inset-top, 0px); --m-sb: env(safe-area-inset-bottom, 0px);
  --m-w: 100vw; --m-h: 100vh; --m-orb: clamp(74px, 22vh, 98px); --m-attack: clamp(76px, 22vh, 94px); --m-skill: clamp(50px, 14vh, 62px); --m-r: calc(var(--m-attack) / 2 + var(--m-skill) / 2 + 24px);
  --m-mini: clamp(84px, 25vh, 118px); --m-mini-t: calc(var(--m-st) + 8px); --m-mini-r: calc(var(--m-sr) + 8px); --m-btn-w: 50px; --m-btn-r: calc(var(--m-mini-r) + var(--m-mini) + 9px);
  --m-cl-r: calc(var(--m-sr) + 10px); --m-cl-b: calc(var(--m-sb) + 6px); --m-row-c: 50%; /* the bottom row's centre */
  --m-card-b: calc(var(--m-st) + 64px); /* the vitals card's bottom edge (top 4 + height 60) */
  --m-bar: 52px; touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.mobile #game { touch-action: none; }
body.mobile #tooltip, body.mobile #cursorItem, body.mobile #skillGhost { display: none !important; }
#mSafeDebug { position: fixed; z-index: 200; top: calc(var(--m-st, 0px) + 5px); left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 5px; background: rgba(5, 3, 2, .8); color: #f5d992; font: 600 10px/1.2 Georgia, serif; pointer-events: none; white-space: nowrap; }

/* The desktop HUD gives way to the touch HUD. */
body.mobile #hud, body.mobile #dawnlightBtn, body.mobile #picker, body.mobile #lootHidden { display: none !important; }
body.mobile #hirelingCard { top: calc(var(--m-st) + 128px); left: calc(var(--m-sl) + 6px); transform: scale(.55); transform-origin: top left; }
body.mobile #buffs { top: calc(var(--m-st) + 98px); left: calc(var(--m-sl) + 10px); max-width: 220px; transform: scale(.72); transform-origin: top left; pointer-events: none; }
body.mobile #topbar.unit-card { top: calc(var(--m-st) + 4px); left: 46%; transform: translateX(-50%) scale(.58); transform-origin: top center; pointer-events: none; }
/* The card is drawn at .58: bigger debuff icons stay legible (name line gives up 3px). */
body.mobile #tbName { font-size: 13px; line-height: 17px; }
body.mobile #tbLine { height: 22px; }
body.mobile .tb-debuff { width: 21px; height: 21px; }
body.mobile #tbDebuffs { height: 21px; max-width: 80%; }
body.mobile .tb-debuff em { font-size: 12px; line-height: 13px; }
body.mobile #tbBar { margin-top: 1px; }
body.mobile #msgs { top: calc(var(--m-st) + 100px); bottom: auto; max-width: min(460px, 52vw); font-size: 14px; line-height: 1.25; padding: 3px 10px; pointer-events: none; }
body.mobile #msgs > div:nth-last-child(n+3) { display: none; }
body.mobile #overlay .mhelp td:first-child { white-space: nowrap; color: #e7c675; padding-right: 12px; }
body.mobile #overlay .mhelp td { font-size: 14px; padding: 3px 0; vertical-align: top; }
body.mobile #areaTitle { top: 18%; font-size: 26px; }
body.mobile #banner { top: 26%; transform: translateX(-50%) scale(.7); }
body.mobile .combat-level, body.mobile .combat-combo { transform: translateX(-50%) scale(.7); }
body.mobile #ui #voiceSubtitle { top: auto; bottom: calc(var(--m-sb) + 74px); max-width: min(420px, 52vw); font-size: 14px; }
body.mobile.m-sheet #ui #voiceSubtitle { display: none; } /* a full-screen menu is open: the line is heard, not laid over the menu */
body.mobile #voiceBubble { display: none; }
body.mobile .hud-decorate { top: auto; bottom: calc(var(--m-sb) + 120px); transform: translateX(-50%) scale(.85); }
/* The quest tracker, collapsed to one line under the hero plate: the tracked quest and its next step. */
body.mobile #questUI .quest-panel { top: calc(var(--m-st) + 62px); left: calc(var(--m-sl) + 8px); right: auto; width: min(320px, 38vw); max-height: none; padding: 0; overflow: hidden; border-radius: 8px; background: rgba(18, 13, 10, .82); }
body.mobile #questUI .quest-panel > header { display: none; }
body.mobile #ui #questUI .quest-panel .tracker-block { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 30px; margin: 0; padding: 5px 10px; border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none; text-align: left; white-space: nowrap; overflow: hidden; }
body.mobile #questUI .quest-panel .tracker-block .tracker-title { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
body.mobile #questUI .quest-panel .tracker-block .tracker-title small, body.mobile #questUI .quest-panel .tracker-block .q-progress { display: none; }
body.mobile #questUI .quest-panel .tracker-block .tracker-marker-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; opacity: .85; }
body.mobile #questUI .quest-panel .tracker-block ~ .tracker-block { display: none; }
body.mobile.m-sheet #questUI .quest-panel, body.mobile.m-sheet #hirelingCard { visibility: hidden; }
body.mobile #questUI .quest-panel:not(:has([data-track])) { display: none; }
body.mobile #questUI #discoveryStack { top: 28%; transform: translateX(-50%) scale(.6); transform-origin: top center; }
body.mobile #questUI .quest-log { inset: calc(var(--m-st) + 8px) 8px 8px; width: auto; max-height: none; transform: none; }
body.mobile #questUI .quest-modal { padding: 8px; }
body.mobile #questUI .quest-dialog { max-height: calc(100vh - 16px - var(--m-st) - var(--m-sb)); overflow-y: auto; padding: 8px 16px 12px; }
body.mobile #questUI .quest-dialog > header { min-height: 44px; }
body.mobile #questUI .quest-dialog > header h2 { font-size: 20px; margin: 0; }
body.mobile #questUI .quest-dialog button, body.mobile #questUI .quest-dialog .waypoint-row { min-height: 44px; }
body.mobile #questUI #rewardCard { transform: translate(-50%, -50%) scale(.8); }

/* Dialogs and overlays sized for a phone held sideways. */
body.mobile #overlay:not(.hidden) { z-index: 90; } /* menus, the loot filter, death and victory above the touch HUD and menus */
body.mobile #overlay .menubox { max-height: calc(100vh - 16px); overflow-y: auto; }
body.mobile #overlay.menu .menubox:not(.keybinds) { transform: scale(.82); transform-origin: center; max-height: calc((100vh - 16px) / .82); }
body.mobile #overlay .zoomrows { display: none; }
body.mobile .service-modal > *, body.mobile .challenge-modal > *, body.mobile .hireling-captain-modal > *, body.mobile #housingUI > * { max-height: calc(100vh - 16px); overflow-y: auto; }
body.mobile .service-modal, body.mobile .challenge-modal, body.mobile .hireling-captain-modal { padding: 8px; }
/* ============ phone title: hero select and Choose Your Hero (mtitle; src/mobile/title.js) ============ */
/* Both screens fill the overlay over the painted title background, inside the safe area. The desktop shows the same
   screens, styled in title.css (.mt-desk), where the glyph shapes (the masks below take them) live for both layouts.
   Glyphs, crest ribbons, the plus and the pill icons are CSS placeholders: their painted versions are in the art
   ledger (art/production/art_needed_curated.json, group "Phone title"). */
body.mobile #overlay .mt-home, body.mobile #overlay .mt-create { --mt-gold: #e2b65f; --mt-line: rgba(214, 168, 88, .72); --mt-ink: #f3e3bd;
  position: absolute; inset: 0; z-index: 1; display: grid; box-sizing: border-box; width: auto; max-height: none; margin: 0; overflow: hidden; transform: none; zoom: 1; touch-action: none;
  padding: calc(var(--m-st) + 8px) calc(var(--m-sr) + 14px) calc(var(--m-sb) + 6px) calc(var(--m-sl) + 14px);
  color: var(--mt-ink); font: 15px/1.3 'EB Garamond', Georgia, serif; text-align: left; }
body.mobile #overlay .mt-home > *, body.mobile #overlay .mt-create > * { zoom: 1; min-width: 0; }
body.mobile #overlay .mt-home::before, body.mobile #overlay .mt-create::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 5, 2, .64), rgba(10, 5, 2, .2) 30%, rgba(10, 5, 2, .3) 66%, rgba(6, 3, 1, .84)); }
body.mobile #overlay .mt-home .embers, body.mobile #overlay .mt-create .embers { z-index: -1; }
body.mobile #overlay .mt-ico, body.mobile #overlay .mt-glyph { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* One colour per class: the crest ribbon, the emblem and the glow behind the art. --fx/--fy/--z frame the head and
   shoulders of hero_<class>.webp on a hero card (the face's place in the painting, and how far to zoom in). */
body.mobile #overlay [data-cls="warrior"] { --crest: #a52a1e; --crest2: #561009; --crest-glow: rgba(196, 72, 40, .4); --fx: 59%; --fy: .035; --z: 3.1; }
body.mobile #overlay [data-cls="mage"] { --crest: #2d58b8; --crest2: #11286a; --crest-glow: rgba(72, 112, 222, .4); --fx: 45%; --fy: .09; --z: 3.1; }
body.mobile #overlay [data-cls="ranger"] { --crest: #2f8342; --crest2: #113d1b; --crest-glow: rgba(72, 164, 84, .36); --fx: 33%; --fy: .09; --z: 3.1; }
body.mobile #overlay [data-cls="rogue"] { --crest: #7a35a8; --crest2: #36104f; --crest-glow: rgba(152, 72, 204, .38); --fx: 70%; --fy: .045; --z: 3.1; }
body.mobile #overlay .mt-rule { position: relative; display: block; width: 80%; height: 9px; margin: 2px auto 0;
  background: linear-gradient(90deg, transparent, var(--mt-gold) 28%, var(--mt-gold) 72%, transparent) center / 100% 1px no-repeat; }
body.mobile #overlay .mt-rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff3b8, #d49a2a); box-shadow: 0 0 6px rgba(255, 190, 80, .8); }
body.mobile #ui #overlay button.mt-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 44px; min-height: 44px; min-width: 44px; margin: 0; padding: 0 17px 0 13px;
  border: 1px solid var(--mt-line); border-image: none; border-radius: 22px; background: linear-gradient(180deg, rgba(56, 37, 20, .94), rgba(19, 12, 7, .95));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 222, 150, .14); color: #f5e2b2; font: 700 12.5px/1 Cinzel, Georgia, serif; letter-spacing: .07em;
  text-shadow: 0 1px 2px #000; transform: none; filter: none; transition: filter .15s, transform .12s; }
body.mobile #ui #overlay button.mt-pill .mt-ico { color: var(--mt-gold); }
body.mobile #ui #overlay button:is(.mt-pill, .mt-arrow, .mt-card, .mt-play, .mt-more, .mt-del, .mt-dice, .mt-go):active { transform: scale(.96); filter: brightness(1.15); }

/* ----- the hero select ----- */
body.mobile #overlay .mt-home { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 4px; }
body.mobile #overlay .mt-home .mt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.mobile #overlay .mt-home .mt-brand { display: flex; flex-direction: column; align-items: center; width: clamp(150px, 46vh, 228px); }
body.mobile #overlay .mt-home .mt-logo { display: block; width: 100%; height: auto; margin: -2px 0 0; aspect-ratio: 1536 / 440; object-fit: cover; object-position: 50% 50%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .8)); pointer-events: none; }
body.mobile #overlay .mt-home .mt-tagline { margin: 0; color: #eed08f; font: 700 8.5px/1.25 Cinzel, Georgia, serif; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .85); }
body.mobile #overlay .mt-home .mt-pills { display: flex; gap: 10px; padding-top: 2px; }
body.mobile #overlay .mt-home .mt-roster { position: relative; min-height: 0; overflow: hidden; }
body.mobile #overlay .mt-home .mt-track { display: flex; gap: var(--mt-gap, 12px); height: 100%; transition: transform .36s cubic-bezier(.22, .8, .24, 1); }
body.mobile #overlay .mt-home .mt-roster.dragging .mt-track { transition: none; }
body.mobile #overlay .mt-home .mt-page { flex: 0 0 100%; display: flex; gap: var(--mt-gap, 12px); box-sizing: border-box; height: 100%; padding: 3px 0 8px; }
body.mobile #overlay .mt-home .mt-page.off { visibility: hidden; }
body.mobile #ui #overlay .mt-home .mt-card { position: relative; flex: 0 0 var(--mt-card-w, 150px); width: var(--mt-card-w, 150px); height: 100%; min-height: 0; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--mt-line); border-image: none; border-radius: 12px; background: linear-gradient(180deg, #221710, #0c0806); color: var(--mt-ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .55); text-align: left; text-shadow: none; transform: none; filter: none; }
/* A saved hero: the head and shoulders over the class colour, the crest ribbon, name, level, where it returns, PLAY and ⋯. */
body.mobile #overlay .mt-hero .mt-art { position: absolute; left: 0; right: 0; top: 0; height: 66%; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 44%, var(--crest-glow), transparent 72%), linear-gradient(180deg, #1c130c, #0d0906); }
body.mobile #overlay .mt-hero .mt-art img { position: absolute; left: 0; top: calc(var(--fy) * var(--z) * -100%); width: 100%; height: calc(var(--z) * 100%); max-width: none;
  object-fit: cover; object-position: var(--fx) 0; pointer-events: none; }
body.mobile #overlay .mt-hero .mt-crest { position: absolute; z-index: 2; top: -1px; right: 9px; width: 24px; height: 36px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75)); }
body.mobile #overlay .mt-hero .mt-crest::before, body.mobile #overlay .mt-hero .mt-crest::after { content: ''; position: absolute; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
body.mobile #overlay .mt-hero .mt-crest::before { inset: 0; background: linear-gradient(180deg, #f6d98a, #a8752b); }
body.mobile #overlay .mt-hero .mt-crest::after { inset: 0 2px 2.5px; background: linear-gradient(180deg, var(--crest), var(--crest2)); }
body.mobile #overlay .mt-hero .mt-crest .mt-glyph { position: absolute; z-index: 1; left: 50%; top: 7px; width: 14px; height: 14px; margin-left: -7px; color: #f8e3ac; }
body.mobile #overlay .mt-hero .mt-difftag { position: absolute; z-index: 2; top: 7px; left: 7px; max-width: calc(100% - 50px); box-sizing: border-box; padding: 3px 7px; overflow: hidden;
  border: 1px solid rgba(255, 186, 110, .65); border-radius: 9px; background: rgba(70, 18, 8, .88); color: #ffdca6; font: 700 9px/1.1 Cinzel, Georgia, serif; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
body.mobile #overlay .mt-hero .mt-difftag[hidden] { display: none; }
body.mobile #overlay .mt-hero .mt-info { position: absolute; left: 0; right: 0; bottom: 0; top: 48%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 9px 9px;
  background: linear-gradient(180deg, rgba(13, 9, 6, 0), rgba(13, 9, 6, .9) 30%, #0d0906 52%); }
body.mobile #overlay .mt-hero .mt-name { margin: 0; overflow: hidden; color: #f8e4b4; font: 700 13px/1.2 Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
body.mobile #overlay .mt-hero .mt-name.long { font-size: 11.5px; letter-spacing: .03em; }
body.mobile #overlay .mt-hero .mt-lvl { margin: 1px 0 0; overflow: hidden; color: #dcc69b; font: 12.5px/1.2 Georgia, serif; white-space: nowrap; text-overflow: ellipsis; }
body.mobile #overlay .mt-hero .mt-loc { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(214, 168, 88, .32); color: #baa887;
  font: 11.5px/1.2 Georgia, serif; white-space: nowrap; }
body.mobile #overlay .mt-hero .mt-loc img { flex: none; width: 9px; height: 13px; object-fit: contain; }
body.mobile #overlay .mt-hero .mt-loc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.mobile #overlay .mt-hero .mt-acts { display: flex; gap: 6px; margin-top: 8px; }
body.mobile #ui #overlay .mt-hero button.mt-play { flex: 1 1 auto; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0 6px; border: 1px solid #e3b65c; border-image: none; border-radius: 8px;
  background: linear-gradient(180deg, #93582a, #4e270d); box-shadow: inset 0 1px rgba(255, 222, 150, .38), 0 3px 8px rgba(0, 0, 0, .5); color: #fff3d2;
  font: 700 13.5px/1 Cinzel, Georgia, serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 2px #1a0800; transform: none; filter: none; }
body.mobile #ui #overlay .mt-hero button.mt-more { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0 0 4px; border: 1px solid rgba(214, 168, 88, .6); border-image: none;
  border-radius: 8px; background: rgba(24, 16, 10, .92); color: #f2d99c; font: 700 20px/1 Georgia, serif; letter-spacing: 0; text-shadow: none; transform: none; filter: none; }
body.mobile #ui #overlay .mt-hero.menu-open button.mt-more { border-color: #ffd66c; color: #fff4d8; font-size: 16px; padding: 0; }
/* The ⋯ menu covers the card above its buttons: the difficulty (the desktop's list) and Delete hero. */
body.mobile #overlay .mt-hero .mt-menu { position: absolute; z-index: 3; left: 0; right: 0; top: 0; bottom: 61px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 10px 9px; background: linear-gradient(180deg, #16100a, #0d0906); border-bottom: 1px solid rgba(214, 168, 88, .3); }
body.mobile #overlay .mt-hero .mt-menu[hidden] { display: none; }
body.mobile #overlay .mt-hero .mt-menu-name { margin: 0 0 2px; overflow: hidden; color: #f8e4b4; font: 700 11.5px/1.2 Cinzel, Georgia, serif; letter-spacing: .06em; text-align: center;
  text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
body.mobile #overlay .mt-hero .mt-menu-diff { display: grid; gap: 4px; }
body.mobile #overlay .mt-hero .mt-menu-diff span { color: #cdb88d; font: 700 9.5px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
body.mobile #ui #overlay .mt-hero .mt-menu select { width: 100%; height: 44px; min-height: 44px; box-sizing: border-box; margin: 0; padding: 0 28px 0 10px; appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(214, 168, 88, .65); border-radius: 8px; color: #f3e0b6; font: 600 13px Cinzel, Georgia, serif; opacity: 1;
  background: rgba(8, 5, 2, .85) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23e0b460' stroke-width='1.6'/></svg>") no-repeat right 10px center; }
body.mobile #ui #overlay .mt-hero button.mt-del { height: 44px; min-height: 44px; margin: 0; padding: 0 8px; border: 1px solid rgba(226, 132, 100, .75); border-image: none; border-radius: 8px;
  background: linear-gradient(180deg, #6e2718, #34110a); color: #ffd6c4; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .06em; text-shadow: 0 1px 2px #000; transform: none; filter: none; }
/* Create New Hero, and the empty slots that fill out the first page (a faint plus: nothing is locked). */
body.mobile #ui #overlay .mt-home button.mt-new, body.mobile #ui #overlay .mt-home button.mt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 10px; text-align: center; cursor: pointer; }
body.mobile #ui #overlay .mt-home button.mt-new { background: radial-gradient(ellipse 90% 60% at 50% 42%, rgba(124, 74, 28, .48), transparent 70%), linear-gradient(180deg, #1e140c, #0b0705); }
body.mobile #ui #overlay .mt-home button.mt-empty { border-style: dashed; border-color: rgba(214, 168, 88, .4); background: rgba(12, 8, 5, .6); box-shadow: inset 0 0 18px rgba(0, 0, 0, .5); }
body.mobile #overlay .mt-plus { position: relative; flex: none; box-sizing: border-box; width: 60px; height: 60px; border: 2px solid #dcae5a; border-radius: 50%;
  box-shadow: 0 0 18px rgba(240, 170, 60, .35), inset 0 0 14px rgba(240, 170, 60, .22); }
body.mobile #overlay .mt-plus::before, body.mobile #overlay .mt-plus::after { content: ''; position: absolute; left: 50%; top: 50%; border-radius: 2px; background: #f2d186; box-shadow: 0 0 6px rgba(255, 200, 100, .6); }
body.mobile #overlay .mt-plus::before { width: 26px; height: 3px; margin: -1.5px 0 0 -13px; }
body.mobile #overlay .mt-plus::after { width: 3px; height: 26px; margin: -13px 0 0 -1.5px; }
body.mobile #overlay .mt-empty .mt-plus { width: 42px; height: 42px; border: 1px solid rgba(220, 174, 90, .45); box-shadow: none; }
body.mobile #overlay .mt-empty .mt-plus::before { width: 16px; height: 2px; margin: -1px 0 0 -8px; background: rgba(242, 209, 134, .5); box-shadow: none; }
body.mobile #overlay .mt-empty .mt-plus::after { width: 2px; height: 16px; margin: -8px 0 0 -1px; background: rgba(242, 209, 134, .5); box-shadow: none; }
body.mobile #overlay .mt-home :is(.mt-new, .mt-empty) b { color: #f6e0ab; font: 700 12.5px/1.25 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 3px #000; }
body.mobile #overlay .mt-home :is(.mt-new, .mt-empty) small { color: #bda983; font: italic 12px/1.25 Georgia, serif; }
body.mobile #overlay .mt-home .mt-empty b { color: rgba(232, 210, 162, .68); font-size: 11.5px; }
body.mobile #overlay .mt-home .mt-empty small { color: rgba(192, 172, 132, .6); }
/* Arrows and dots under the cards (swipe pages too); past seven pages the dots become "3 / 9". */
body.mobile #overlay .mt-home .mt-pager { justify-self: center; display: flex; align-items: center; gap: 12px; height: 46px; }
body.mobile #ui #overlay .mt-home button.mt-arrow { width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0 0 3px; border: 1px solid var(--mt-line); border-image: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #3d2917, #140c07 75%); box-shadow: 0 3px 10px rgba(0, 0, 0, .55); color: #f5d992; font: 700 26px/1 Georgia, serif; text-shadow: none; transform: none; filter: none; }
body.mobile #ui #overlay .mt-home button.mt-arrow:disabled { opacity: .32; box-shadow: none; }
body.mobile #overlay .mt-home .mt-dots { display: flex; align-items: center; gap: 8px; min-width: 8px; }
body.mobile #overlay .mt-home .mt-dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(232, 204, 146, .32); }
body.mobile #overlay .mt-home .mt-dot.on { width: 9px; height: 9px; background: #f5d27c; box-shadow: 0 0 8px rgba(255, 190, 80, .85); }
body.mobile #overlay .mt-home .mt-count { color: #e9cf95; font: 700 12px/1 Cinzel, Georgia, serif; letter-spacing: .08em; white-space: nowrap; }
/* The cloud save chip takes the bottom-left corner, beside the pager; its notes appear at the top centre. */
body.mobile #overlay.titlescr .cloud-chip { top: auto; right: auto; left: calc(var(--m-sl) + 14px); bottom: calc(var(--m-sb) + 7px); zoom: 1; box-sizing: border-box; min-height: 44px; gap: 7px;
  max-width: max(150px, calc(50vw - var(--mt-pager-w, 150px) / 2 - 26px - var(--m-sl))); padding: 5px 14px 5px 10px; font-size: 12.5px; }
body.mobile #overlay.titlescr .cloud-chip b { font-size: 11.5px; }
body.mobile #overlay.titlescr .cloud-chip[data-state="paused"] { width: auto; padding-left: 40px; row-gap: 0; align-content: center; }
body.mobile #overlay.titlescr .cloud-chip[data-state="paused"] .cloud-chip-icon { left: 11px; top: 50%; margin-top: -8px; }
body.mobile #overlay.titlescr .cloud-toast { top: calc(var(--m-st) + 10px); left: var(--mt-free-l, 30%); right: var(--mt-free-r, 30%); margin: 0 auto; zoom: 1; width: max-content;
  max-width: calc(100% - var(--mt-free-l, 30%) - var(--mt-free-r, 30%)); box-sizing: border-box; font-size: 13px; line-height: 1.35; pointer-events: none; }

/* ----- Choose Your Hero ----- */
body.mobile #overlay .mt-create { grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 8px; }
body.mobile #overlay .mt-create .mt-ctop { position: relative; display: flex; justify-content: center; min-height: 44px; }
body.mobile #ui #overlay .mt-create button.mt-back { position: absolute; left: 0; top: 0; padding: 0 17px 0 11px; }
body.mobile #overlay .mt-chev { font: 700 22px/1 Georgia, serif; margin-top: -3px; }
body.mobile #overlay .mt-create .mt-heading { display: flex; flex-direction: column; align-items: center; padding: 0 118px; }
body.mobile #overlay .mt-create .mt-heading h1 { margin: 0; font: 700 25px/1.08 Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, #fff3c4, #e8b25a 52%, #b0621f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85)); }
body.mobile #overlay .mt-create .mt-heading .mt-rule { width: min(260px, 70%); margin-top: 3px; }
body.mobile #overlay .mt-create .mt-heading p { margin: 1px 0 0; color: #ecd08f; font: 700 9.5px/1.2 Cinzel, Georgia, serif; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
body.mobile #overlay .mt-create .mt-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; padding: 4px 0 2px; }
body.mobile #ui #overlay .mt-create .ccard.mt-class { position: relative; isolation: isolate; width: auto; min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid rgba(214, 168, 88, .5); border-radius: 12px; background: radial-gradient(ellipse 85% 55% at 50% 30%, var(--crest-glow), transparent 75%), linear-gradient(180deg, #1c130c, #0b0705);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .6); text-align: center; cursor: pointer; transform: none; filter: brightness(.78) saturate(.86); transition: filter .18s, box-shadow .18s, border-color .18s, transform .18s; }
body.mobile #ui #overlay .mt-create .ccard.mt-class::before, body.mobile #ui #overlay .mt-create .ccard.mt-class::after { content: none; display: none; }
body.mobile #ui #overlay .mt-create .ccard.mt-class.sel { border-color: #ffd46a; filter: none; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 214, 108, .95), 0 0 22px rgba(255, 176, 56, .6), 0 10px 22px rgba(0, 0, 0, .6); }
body.mobile #overlay .mt-class .mt-class-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; pointer-events: none; }
body.mobile #overlay .mt-class .mt-class-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 8px 9px; background: linear-gradient(180deg, rgba(11, 7, 5, 0), rgba(11, 7, 5, .88) 26%, #0b0705 58%); }
body.mobile #overlay .mt-class .mt-emblem { display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; margin: 0 auto 6px; transform: rotate(45deg); border: 2px solid #e6b85c;
  background: radial-gradient(circle at 50% 40%, var(--crest), var(--crest2)); box-shadow: 0 0 10px rgba(240, 180, 80, .55), inset 0 0 6px rgba(0, 0, 0, .6); }
body.mobile #overlay .mt-class .mt-emblem .mt-glyph { width: 15px; height: 15px; transform: rotate(-45deg); color: #fbe7b3; }
body.mobile #overlay .mt-class h3 { margin: 0; color: #f9e2a6; font: 700 16px/1.1 Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 3px #000; }
body.mobile #overlay .mt-class .mt-class-tag { min-height: 0; margin: 3px 0 0; overflow: hidden; color: #dccaa5; font: italic 12px/1.25 Georgia, serif; white-space: nowrap; text-overflow: ellipsis; }
body.mobile #overlay .mt-class .mt-hr { display: block; width: 72%; height: 1px; margin: 6px auto 5px; background: linear-gradient(90deg, transparent, rgba(226, 178, 96, .85), transparent); }
body.mobile #overlay .mt-class .mt-skills { min-height: 2.9em; margin: 0; color: #f1c86e; font: 700 9.5px/1.45 Cinzel, Georgia, serif; letter-spacing: .05em; text-wrap: balance; }
body.mobile #overlay .mt-class .mt-skills span { white-space: nowrap; }
body.mobile #overlay .mt-class .mt-skills b { margin-left: 5px; color: rgba(241, 200, 110, .6); font-weight: 400; }
/* The name (person icon, the field, the dice), the difficulty and CREATE HERO. */
body.mobile #overlay .mt-create .mt-namebar { display: flex; align-items: center; gap: 10px; }
body.mobile #overlay .mt-namefield { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 0; height: 48px; padding: 0 2px 0 15px;
  border: 1px solid var(--mt-line); border-radius: 24px; background: rgba(12, 8, 5, .92); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .45); }
body.mobile #overlay .mt-namefield > .mt-ico { width: 17px; height: 17px; color: #d9b36a; }
body.mobile #ui #overlay .mt-namefield input { flex: 1 1 auto; width: 0; min-width: 0; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; outline: none; background: none; box-shadow: none;
  color: #f7e7c5; font: 17px/1.2 Georgia, serif; letter-spacing: .03em; user-select: text; -webkit-user-select: text; }
body.mobile #ui #overlay .mt-namefield input::placeholder { color: #928571; }
body.mobile #ui #overlay .mt-namefield button.mt-dice { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 1px solid rgba(214, 168, 88, .55);
  border-image: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3d2917, #140c07 75%); color: #f2cf82; transform: none; filter: none; }
body.mobile #overlay .mt-dice .mt-ico { width: 22px; height: 22px; }
body.mobile #overlay .mt-dice.rolled .mt-ico { animation: mt-roll .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes mt-roll { from { transform: rotate(-200deg) scale(.7); } to { transform: none; } }
body.mobile #overlay .mt-namefield.mt-need { border-color: #e0896a; animation: mt-need .5s; }
@keyframes mt-need { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
body.mobile #overlay .mt-diffsel { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
body.mobile #overlay .mt-diffsel span { color: #cdb88d; font: 700 9px/1 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
body.mobile #ui #overlay .mt-diffsel select { height: 32px; min-height: 0; margin: 0; padding: 0 12px; appearance: none; -webkit-appearance: none; border: 1px solid rgba(214, 168, 88, .45); border-radius: 8px;
  background: rgba(8, 5, 2, .82); color: #d9c49a; font: 600 13px Cinzel, Georgia, serif; opacity: .9; }
body.mobile #ui #overlay .mt-create button.mt-go { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 48px; min-height: 48px; margin: 0; padding: 0 22px 0 28px;
  border: 1px solid #ffe08a; border-image: none; border-radius: 24px; background: linear-gradient(180deg, #f7d27a, #d9962f 52%, #99601a);
  box-shadow: 0 0 18px rgba(255, 186, 72, .5), 0 5px 14px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 250, 220, .7); color: #2b1405; font: 700 15px/1 Cinzel, Georgia, serif;
  letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px rgba(255, 236, 190, .55); transform: none; filter: none; }
body.mobile #ui #overlay .mt-create button.mt-go .mt-chev { font-size: 24px; }
/* Typing on a phone: the name bar rides at the top of what the keyboard leaves visible; the rest dims. */
body.mobile #overlay .mt-create.mt-typing::after { content: ''; position: fixed; inset: 0; z-index: 4; background: rgba(6, 3, 1, .64); }
body.mobile #overlay .mt-create.mt-typing .mt-namebar { position: fixed; z-index: 5; top: calc(var(--mt-vv-top, 0px) + var(--m-st) + 8px); left: calc(var(--m-sl) + 14px); right: calc(var(--m-sr) + 14px);
  padding: 8px; border: 1px solid var(--mt-line); border-radius: 32px; background: rgba(20, 13, 8, .97); box-shadow: 0 10px 28px rgba(0, 0, 0, .7); }
body.mobile #overlay .mt-create.mt-typing .mt-diffsel { display: none; }

/* ----- Settings from the title (the touch menus' list in a window) and the Account panel on a phone ----- */
body.mobile .mt-tset { z-index: 110; padding: calc(var(--m-st) + 8px) calc(var(--m-sr) + 12px) calc(var(--m-sb) + 8px) calc(var(--m-sl) + 12px); }
body.mobile .mt-tset .service-frame { width: min(760px, 100%); max-height: 100%; padding: 2px 16px 10px; }
body.mobile .mt-tset .service-frame > header { align-items: center; padding: 4px 0 8px; }
body.mobile .mt-tset .service-frame > header h2 { margin: 0; font-size: 20px; }
body.mobile .mt-tset .service-scroll { padding: 8px 6px 4px 0; }
body.mobile #ui :is(.mt-tset, .cloud-modal) .ui-close { width: 44px !important; height: 44px !important; }
/* The Account panel opened from the title's pill: unzoomed and inside the safe area, so all of it fits a phone. */
body.mobile .cloud-modal { padding: calc(var(--m-st) + 8px) calc(var(--m-sr) + 12px) calc(var(--m-sb) + 8px) calc(var(--m-sl) + 12px); }
body.mobile .cloud-modal .cloud-frame { zoom: 1; width: min(800px, 100%); max-height: 100%; }
body.mobile .mt-tset .m-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 24px; color: #eadfc4; }
body.mobile .mt-tset .m-settings h3 { margin: 2px 0 4px; color: #e7c675; font: 700 13px Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
body.mobile .mt-tset .m-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; border-bottom: 1px solid #3a2e20; font-size: 16px; }
body.mobile #ui #mTitleSettings button.m-set-btn { min-width: 96px; height: 44px; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid #98703c; border-image: none; border-radius: 8px;
  background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 14px/1 Cinzel, Georgia, serif; }
body.mobile .mt-tset .m-stepper { display: flex; align-items: center; gap: 10px; }
body.mobile #ui #mTitleSettings .m-stepper button.m-set-btn { min-width: 48px; font-size: 20px; }
body.mobile .mt-tset .m-stepper b { min-width: 52px; color: #ffe6a6; font: 700 16px Cinzel, Georgia, serif; text-align: center; }
body.mobile .mt-tset .m-howto { margin: 10px 0 4px; color: #b8a58b; font: 14px/1.4 Georgia, serif; }
@media (prefers-reduced-motion: reduce) {
  body.mobile #overlay .mt-home .mt-track, body.mobile #ui #overlay .mt-create .ccard.mt-class { transition: none; }
  body.mobile #overlay .mt-dice.rolled .mt-ico, body.mobile #overlay .mt-namefield.mt-need { animation: none; }
}

/* ----- the touch layer, joystick and aim marker ----- */
#mTouch { position: fixed; inset: 0; z-index: 1; pointer-events: auto; touch-action: none; }
body:not(.m-play) #mTouch, body.mobile.m-sheet #mTouch, #mTouch[hidden] { display: none; }
#mTouch .m-joy-rest { position: absolute; left: calc(var(--m-sl) + 38px); bottom: calc(var(--m-sb) + 30px); width: 116px; height: 116px; border-radius: 50%; border: 2px dashed rgba(232, 214, 181, .22); background: radial-gradient(circle, rgba(20, 14, 10, .18), rgba(20, 14, 10, 0) 70%); pointer-events: none; }
#mTouch .m-joy-rest::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(232, 214, 181, .14); }
#mTouch .m-joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(240, 214, 160, .55); background: radial-gradient(circle, rgba(30, 22, 14, .45), rgba(12, 8, 6, .25)); box-shadow: 0 0 18px rgba(0, 0, 0, .5); pointer-events: none; }
#mTouch .m-joy.hidden { display: none; }
#mTouch .m-joy-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6dfae, #a8783c 60%, #5b3a18); box-shadow: 0 3px 10px #000a; }
#mAim { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#mAim.hidden, body:not(.mobile) #mAim { display: none; }
#mAim .m-aim-line { position: absolute; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 214, 108, 0), rgba(255, 214, 108, .85)); }
#mAim .m-aim-ring { position: absolute; border-radius: 50%; border: 3px solid rgba(255, 214, 108, .95); background: rgba(255, 190, 80, .18); box-shadow: 0 0 14px rgba(255, 180, 60, .6); }
#mAim.foe .m-aim-ring { border-color: #ff7a52; background: rgba(255, 90, 60, .22); }
#mAim.cancel .m-aim-ring, #mAim.cancel .m-aim-line { opacity: .3; }

/* ----- the HUD ----- */
#mHud { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
body:not(.m-play) #mHud, body:not(.m-play) #mCluster, body.mobile.m-sheet #mHud, body.mobile.m-sheet #mCluster, #mHud[hidden], #mCluster[hidden] { display: none; }
#ui #mHud button, #ui #mCluster button { margin: 0; padding: 0; min-height: 0; border: 0; border-image: none; background: none; color: #f3e3bd; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; font-family: Cinzel, Georgia, serif; }
#ui #mHud button:active, #ui #mCluster button:active { transform: none; }
/* Potions sit side by side at the bottom centre; a long press opens the belt above them. */
#ui #mHud .m-pot { position: absolute; bottom: calc(var(--m-sb) + 6px); width: 50px; height: 50px; border-radius: 50%; border: 2px solid #9a7741; background: radial-gradient(circle at 50% 40%, #2c2118, #0d0a08); box-shadow: 0 3px 10px #000a; display: grid; place-items: center; }
#mHud .m-pot-life { right: calc(50% + 6px); }
#mHud .m-pot-mana { left: calc(50% + 6px); }
#mHud .m-pot img { width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
#mHud .m-pot.empty img { filter: grayscale(1) brightness(.5); }
#mHud .m-count { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #120d0a; border: 1px solid #9a7741; color: #ffe6a6; font: 700 12px/18px Georgia, serif; text-align: center; }
#mHud .m-count:empty { display: none; }
#ui #mHud button.down { filter: brightness(1.35); transform: scale(.94); }
#mHud .m-belt { position: absolute; bottom: calc(var(--m-sb) + 64px); left: var(--m-row-c, 50%); transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border-radius: 12px; background: #120d0aee; border: 1px solid #9a7741; box-shadow: 0 8px 20px #000c; pointer-events: auto; }
#mHud .m-belt.hidden { display: none; }
#ui #mHud .m-belt-slot { position: relative; width: 50px; height: 50px; border-radius: 8px; border: 1px solid #765938; background: #0e0b09; }
#mHud .m-belt-slot img { width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
#mHud .m-belt-slot.empty { opacity: .45; }
/* Menu buttons to the left of the minimap (which the canvas draws in the corner), town portal beneath it. */
#mHud .m-top { position: absolute; top: calc(var(--m-st) + 8px); right: calc(var(--m-sr) + var(--m-mini) + 22px); display: flex; gap: 6px; }
#ui #mHud .m-btn { position: relative; width: 46px; height: 46px; border-radius: 9px; border: 1px solid #7e6038; background: #1b1510e6; box-shadow: 0 3px 8px #0008; display: grid; place-items: center; }
#mHud .m-btn img { width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
#ui #mHud .m-btn.on { border-color: #ffd66c; box-shadow: 0 0 10px #ffcf6a88; }
#mHud .m-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #a4140c; border: 1px solid #ffd66c; color: #fff3d4; font: 700 11px/16px Georgia, serif; text-align: center; }
#mHud .m-badge:empty { display: none; }
#mHud .m-tp { position: absolute !important; top: calc(var(--m-st) + var(--m-mini) + 30px); right: calc(var(--m-sr) + 12px); }
#mHud .m-tp .m-count { right: -6px; bottom: -6px; }
/* The context button (mobilehud, 2026-09-26): a round 54 px button with an icon for what is in reach (src/mobile/icons.js:
   a grab hand for picking up, opening and using; talk, enter, a Watchfire and the Dawnlight each their own), no text (its
   aria-label has the verb and the name; the world labels the target). It sits up and left of the skill arc, clear of it,
   placed from the cluster's own numbers. */
#ui #mHud .m-context { --m-ctx-R: calc(var(--m-r) + var(--m-skill) / 2 + 35px); position: absolute;
  right: calc(var(--m-cl-r) + var(--m-attack) / 2 - var(--m-ctx-R) * cos(215deg) - 27px); bottom: calc(var(--m-cl-b) + var(--m-attack) / 2 - var(--m-ctx-R) * sin(215deg) - 27px);
  width: 54px; height: 54px; border-radius: 50%; border: 2px solid #e0b45c; background: radial-gradient(circle at 50% 36%, #8a5426, #3d200c 74%); box-shadow: 0 4px 12px #000b, 0 0 12px #e8a63255; display: grid; place-items: center; color: #fff3d0; }
#mHud .m-context.hidden { display: none; }
#mHud .m-ctx-icon { display: grid; place-items: center; width: 30px; height: 30px; pointer-events: none; }
#mHud .m-ctx-icon svg { width: 30px; height: 30px; }
#mHud .m-context[data-icon="hand"] .m-ctx-icon svg { width: 32px; height: 32px; }
#mHud .m-context.cooling { filter: grayscale(.7) brightness(.8); }
#mHud .m-glyph, #mCluster .m-glyph { display: none; }
body.pad #mHud .m-context .m-glyph { display: block; position: absolute; left: -7px; top: -7px; width: 24px; height: 24px; border-radius: 50%; background: #2a8a3a; border: 1px solid #b8f0b0; color: #fff; font: 700 13px/22px Georgia, serif; text-align: center; }
body.pad #mHud .m-context .m-glyph::before { content: 'A'; }

/* ----- the right-thumb cluster ----- */
#mCluster { position: fixed; z-index: 13; right: var(--m-cl-r); bottom: var(--m-cl-b); width: var(--m-attack); height: var(--m-attack); pointer-events: none; }
#ui #mCluster .m-sk { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px solid #a8864a; background: radial-gradient(circle at 50% 40%, #33271d, #0e0b09); box-shadow: 0 4px 12px #000b, inset 0 0 10px #000; overflow: hidden; }
#ui #mCluster .m-attack { width: var(--m-attack); height: var(--m-attack); margin: calc(var(--m-attack) / -2); border: 3px solid #e0b45c; box-shadow: 0 5px 16px #000c, 0 0 18px #e8a63244, inset 0 0 12px #000; }
#ui #mCluster .m-sk:not(.m-attack) { width: var(--m-skill); height: var(--m-skill); margin: calc(var(--m-skill) / -2); transform: translate(calc(var(--m-r) * cos(var(--a))), calc(var(--m-r) * sin(var(--a)))); }
#mCluster .m-s0 { --a: 168deg; } #mCluster .m-s1 { --a: 206deg; } #mCluster .m-s2 { --a: 244deg; } #mCluster .m-s3 { --a: 282deg; }
#mCluster .m-sk img { position: absolute; inset: 6%; width: 88%; height: 88%; border-radius: 50%; object-fit: cover; pointer-events: none; }
/* Class basic-attack art is circle-safe and carries no baked frame, so it can use the button's existing gold rim. */
#mCluster .m-sk.m-class-attack img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
#mCluster .m-sk.empty { opacity: .5; border-style: dashed; }
#mCluster .m-sk.nomana img { filter: grayscale(.4) brightness(.55) sepia(.3) hue-rotate(180deg); }
#mCluster .m-cd { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(#090706c8 var(--cooldown, 0%), transparent 0); }
#ui #mCluster .m-sk.down { filter: brightness(1.3); border-color: #ffe39a; }
#ui #mCluster .m-sk.m-attack.down { transform: scale(.95); }
#ui #mCluster .m-page { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; transform: translate(calc(var(--m-r) * -1.58), calc(var(--m-attack) * .3)); border-radius: 50%; border: 2px solid #7e6038; background: #1b1510ee; box-shadow: 0 3px 8px #0009; display: grid; place-items: center; grid-auto-flow: column; align-content: center; justify-content: center; }
#mCluster .m-page b { color: #ffe6a6; font: 700 18px/1 Cinzel, Georgia, serif; }
#mCluster .m-page small { color: #b8a58b; font: 12px/1 Georgia, serif; align-self: end; margin-bottom: 1px; }
#ui #mCluster .m-page.has-more { border-color: #d4a24c; }
#ui #mCluster .m-page.down { filter: brightness(1.3); }

/* ----- the rotate card (portrait) ----- */
#mRotate { display: none; }
body.mobile.m-portrait #mRotate { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 40%, #2a1a10, #070403); pointer-events: auto; touch-action: none; }
#mRotate .m-rotate-card { max-width: 320px; text-align: center; color: #e8dcc0; font: 17px/1.4 'EB Garamond', Georgia, serif; }
#mRotate h2 { margin: 18px 0 6px; color: #f2d297; font: 700 22px/1.2 Cinzel, Georgia, serif; }
#mRotate .m-rotate-phone { display: block; margin: 0 auto; width: 58px; height: 96px; border: 4px solid #e0b45c; border-radius: 12px; box-shadow: 0 0 20px #e8a63255; animation: m-turn 2.4s ease-in-out infinite; }
@keyframes m-turn { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }

/* ----- the touch menus ----- */
#mSheet { display: none; }
body.mobile #mSheet.open { position: fixed; inset: 0; z-index: 30; display: block; pointer-events: auto; background: radial-gradient(ellipse at 50% 0%, #2a1e14, #0b0806 70%); }
#mSheet .m-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--m-bar) + var(--m-st)); padding: var(--m-st) calc(var(--m-sr) + 56px) 0 calc(var(--m-sl) + 6px); display: flex; align-items: stretch; border-bottom: 1px solid #6e5034; background: linear-gradient(#241a12, #120d0a); }
#mSheet .m-tabs { flex: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
#ui #mSheet .m-tab { position: relative; flex: 1 0 auto; min-width: 64px; margin: 4px 0 0; padding: 0 10px; min-height: 0; height: auto; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-bottom: 0; border-image: none; border-radius: 9px 9px 0 0; background: none; color: #bfa98a; font: 700 13px/1 Cinzel, Georgia, serif; }
#ui #mSheet .m-tab img { width: 26px; height: 26px; object-fit: contain; pointer-events: none; }
#ui #mSheet .m-tab.active { color: #fff0cc; border-color: #9a7741; background: linear-gradient(#4a3520, #1c140e); }
#ui #mSheet .m-tab-service { color: #ffe6a6; }
#ui #mSheet .m-tab[hidden] { display: none; }
#mSheet .m-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: #a4140c; color: #fff3d4; font: 700 10px/16px Georgia, serif; text-align: center; font-style: normal; }
#mSheet .m-badge:empty { display: none; }
#ui #mSheet .m-close { position: absolute; top: calc(var(--m-st) + 4px); right: calc(var(--m-sr) + 6px); width: 46px; height: 46px; min-height: 46px; margin: 0; padding: 0; border: 2px solid #a87a3b; border-image: none; border-radius: 50%; background: linear-gradient(#61301d, #260b07); color: #f2d18e; font: 700 20px/1 Georgia, serif; }
#mSheet .m-body { position: absolute; left: calc(var(--m-sl) + 8px); right: calc(var(--m-sr) + 8px); top: calc(var(--m-bar) + var(--m-st) + 6px); bottom: calc(var(--m-sb) + 6px); }
#mSheet .m-pane { position: absolute; inset: 0; display: none; }
body.m-tab-inventory #mInv { display: block; }
body.m-bag #mInv { display: block; left: calc(min(400px, 48vw) + 10px); }
body.m-tab-settings #mSettings { display: block; overflow-y: auto; }
body.m-tab-skills #mLoadout { display: block; bottom: auto; height: 88px; }
#mSheet .m-hand { position: absolute; z-index: 3; left: 50%; top: -2px; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-radius: 22px; background: #3d200cf2; border: 1px solid #e0b45c; color: #fff3d0; font: 14px Georgia, serif; white-space: nowrap; }
#mSheet .m-hand.hidden { display: none; }
#ui #mSheet .m-hand button, #ui #mSheet .m-chip { margin: 0; min-height: 36px; padding: 0 12px; border: 1px solid #98703c; border-image: none; border-radius: 18px; background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 12px/1 Cinzel, Georgia, serif; }
#ui #mSheet .m-chip.on { border-color: #ffd66c; }

/* The game's windows inside the sheet: no frame art or side tabs, full size, scrolling. */
body.mobile.m-sheet #characterWindow { position: fixed !important; z-index: 31 !important; left: calc(var(--m-sl) + 8px) !important; right: calc(var(--m-sr) + 8px) !important; top: calc(var(--m-bar) + var(--m-st) + 6px) !important; bottom: calc(var(--m-sb) + 6px) !important; width: auto !important; height: auto !important; transform: none !important; }
body.mobile.m-tab-skills #characterWindow { top: calc(var(--m-bar) + var(--m-st) + 100px) !important; }
body.mobile.m-tab-inventory #characterWindow, body.mobile #backpackWindow { display: none !important; }
body.mobile.m-sheet #characterWindow .cw-tabs, body.mobile.m-sheet #characterWindow .cw-nameplate, body.mobile.m-sheet #characterWindow .cw-close { display: none; }
body.mobile.m-sheet #characterWindow .cw-frame { border: 1px solid #5e4628; border-image: none; border-radius: 10px; background: #100c09e6; box-shadow: none; }
body.mobile.m-sheet #characterWindow .cw-frame::before { display: none; }
body.mobile.m-sheet #characterWindow .cw-body { inset: 6px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.mobile.m-tab-skills .cw-skills { overflow: auto; }
body.mobile.m-tab-skills .cw-skills .tree { transform: none; margin: 6px auto 12px; }
body.mobile.m-tab-skills .cw-skills .hint { display: none; }
body.mobile.m-sheet #panelL:not(.hidden) { display: block !important; }
body.mobile.m-sheet #panelL { border: 1px solid #5e4628; border-image: none; border-radius: 10px; padding: 8px 10px 12px; background: #100c09ee; box-shadow: none; position: fixed !important; z-index: 31 !important; left: calc(var(--m-sl) + 8px) !important; top: calc(var(--m-bar) + var(--m-st) + 6px) !important; bottom: calc(var(--m-sb) + 6px) !important; right: auto !important; width: min(400px, 48vw) !important; height: auto !important; max-height: none !important; transform: none !important; overflow-y: auto; overscroll-behavior: contain; border-radius: 10px; }
body.mobile.m-sheet #panelL .ptitle .px { display: none; }
body.mobile.m-sheet #panelL .ptitle { min-height: 0; padding: 0 0 6px; margin: 0 0 6px; background: none; border-bottom: 1px solid #3a2e20; font-size: 15px; }
body.mobile.m-sheet #ui #panelL .vendor-tabs button, body.mobile.m-sheet #ui #panelL .stash-tabs button { min-height: 44px; }
body.mobile.m-sheet #panelL .hint { font-size: 12px; }
body.mobile.m-sheet #panelL .gi.m-selected, body.mobile #mInv .gi.m-selected, body.mobile #mInv .m-selected { outline: 2px solid #ffd66c; outline-offset: -2px; box-shadow: 0 0 12px #ffcf6aaa; z-index: 2; }

/* ============ phone Stats tab (the stats job; charHTML in src/ui/character.js) ============ */
body.mobile .st-hint { display: none; } /* Shift+click means nothing on touch */
/* The Character tab of the touch menus shows the Stats tab. Landscape phones (844x390, 932x430, also inside an iPhone's
   safe area) get two columns with no scrolling: on the left the level and XP bar, the attribute cards and the Stat Points
   badge; on the right the resistances in a strip, then the derived stats in two columns. The + buttons are 44 px touch
   targets. The desktop layout is at the end of ui-windows.css. */
body.mobile.m-tab-character #characterWindow .cw-stats { display: grid; grid-template-columns: minmax(296px, 42%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "xp res" "attrs derived" "pts derived"; gap: 8px 14px; padding: 1px 2px; }
body.mobile.m-tab-character .st-xp { grid-area: xp; gap: 6px; }
body.mobile.m-tab-character .st-lv { min-width: 44px; height: 42px; }
body.mobile.m-tab-character .st-lv b { font-size: 17px; }
body.mobile.m-tab-character .st-xp-bar { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; height: 42px; padding: 0 12px; border-radius: 10px; } /* the caption over the numbers */
body.mobile.m-tab-character .st-cap { font-size: 10px; }
body.mobile.m-tab-character .st-xp-num { font-size: 13px; }
body.mobile.m-tab-character .st-attrs { grid-area: attrs; grid-auto-rows: minmax(62px, 84px); align-content: center; gap: 6px; }
body.mobile.m-tab-character .st-attr { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 5px; min-height: 62px; padding: 2px 3px 2px 2px; }
body.mobile.m-tab-character .st-attr-ico { width: 44px; height: 44px; }
body.mobile.m-tab-character .st-name { font-size: 13px; letter-spacing: .02em; }
body.mobile.m-tab-character .st-attr .st-val { font-size: 21px; }
body.mobile.m-tab-character #characterWindow .st-plus { width: 44px; height: 44px; }
body.mobile.m-tab-character .st-points { grid-area: pts; flex-direction: column; align-self: end; gap: 3px; min-height: 0; }
body.mobile.m-tab-character .st-badge { font-size: 13px; padding: 4px 14px; }
body.mobile.m-tab-character .st-hint { font-size: 13px; }
body.mobile.m-tab-character .st-derived { grid-area: derived; align-content: start; column-gap: 12px; }
body.mobile.m-tab-character .st-row { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 6px; min-height: 30px; }
body.mobile.m-tab-character .st-derived.roomy .st-row { min-height: 34px; }
body.mobile.m-tab-character .st-derived.dense .st-row { min-height: 27px; }
body.mobile.m-tab-character .st-ico { width: 22px; height: 22px; }
body.mobile.m-tab-character .st-lbl, body.mobile.m-tab-character .st-row .st-val { font-size: 15.5px; }
body.mobile.m-tab-character .st-adds { font-size: 13.5px; }
/* The resistances: a strip of four beside the XP bar, each value and name to the right of its icon. */
body.mobile.m-tab-character .st-res { grid-area: res; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
body.mobile.m-tab-character .st-res-tile { grid-template: "ico val" auto "ico name" auto / 30px minmax(0, 1fr); column-gap: 4px; justify-items: start; align-content: center; height: 42px; padding: 2px 2px 2px 3px; }
body.mobile.m-tab-character .st-res-ico { grid-area: ico; width: 30px; height: 30px; margin: 0; }
body.mobile.m-tab-character .st-res-tile .st-val { grid-area: val; align-self: end; font-size: 15px; }
body.mobile.m-tab-character .st-res-name { grid-area: name; align-self: start; margin: 1px 0 0; font-size: 8px; letter-spacing: 0; }
@media (min-height: 420px) {
  body.mobile.m-tab-character .st-attrs { grid-auto-rows: minmax(62px, 100px); }
  body.mobile.m-tab-character .st-attr { grid-template-columns: 56px minmax(0, 1fr) auto; }
  body.mobile.m-tab-character .st-attr-ico { width: 56px; height: 56px; }
  body.mobile.m-tab-character .st-name { font-size: 14px; }
  body.mobile.m-tab-character .st-attr .st-val { font-size: 24px; }
}

/* The touch inventory: the doll, the backpack at a fitted cell size, the belt. */
#mInv .m-inv { height: 100%; display: flex; gap: 14px; }
#mInv .m-doll { flex: none; width: min(236px, 30vw); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1.25fr 1.25fr 1fr 1fr; gap: 6px; grid-template-areas: "neck head ring1" "weap body off" "weap body off" "hands waist feet" "ring2 . ."; }
#mInv .m-slot { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; border: 1px solid rgba(166, 119, 61, .78); border-radius: 6px; background: radial-gradient(circle at 50% 42%, rgba(70, 48, 30, .36), rgba(4, 3, 3, .82)); overflow: hidden; }
#mInv .m-slot img { max-width: 88%; max-height: 88%; object-fit: contain; pointer-events: none; }
#mInv .m-slot .m-ghost { opacity: .18; filter: grayscale(1) brightness(.7); }
#mInv .m-slot.bad { box-shadow: inset 0 0 0 2px #b04030; }
#mInv .s-head { grid-area: head; } #mInv .s-neck { grid-area: neck; } #mInv .s-weapon { grid-area: weap; } #mInv .s-body { grid-area: body; } #mInv .s-offhand { grid-area: off; }
#mInv .s-hands { grid-area: hands; } #mInv .s-waist { grid-area: waist; } #mInv .s-feet { grid-area: feet; } #mInv .s-ring1 { grid-area: ring1; } #mInv .s-ring2 { grid-area: ring2; }
#mInv .m-bagcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#mInv .m-baghead { align-self: stretch; display: flex; align-items: center; gap: 12px; min-height: 36px; color: #e8dcc0; font: 15px Georgia, serif; }
#mInv .m-gold { display: inline-flex; align-items: center; gap: 6px; color: #f3e1ad; font: 700 16px/1 Cinzel, Georgia, serif; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
#mInv .m-gold img { width: auto; height: 26px; }
#mInv .m-tps { color: #b8a58b; font-size: 13px; }
#mInv .m-baghead .m-chip { margin-left: auto !important; }
/* Sort (the owner's plate, icon only here; its name is in the aria-label) and the Keepsakes chip, on the right. */
#mInv .m-bagtools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#ui #mInv .m-sort { flex: none; width: 85px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: url('assets/gen/ui/backpack/sort.webp') center / contain no-repeat; }
#ui #mInv .m-sort:active { transform: scale(.96); filter: brightness(1.15); }
#mInv .m-bagrow { flex: 1; min-height: 0; display: flex; gap: 10px; align-self: stretch; justify-content: center; }
#mInv .m-inv.full .m-bagrow { justify-content: flex-end; }
#mInv .m-bagwrap { display: grid; place-items: start; min-height: 0; }
#mInv .m-beltrow { display: flex; flex-direction: column; gap: 6px; }
#mInv .m-bslot { position: relative; width: 46px; height: 46px; border: 1px solid #765938; border-radius: 6px; background: #0e0b09; display: grid; place-items: center; }
#mInv .m-bslot img { max-width: 80%; max-height: 80%; pointer-events: none; }
#mInv .m-bslot .bcnt { position: absolute; right: 2px; bottom: 1px; color: #ffe6a6; font: 12px Georgia, serif; }
/* The Keepsakes view (src/mobile/inventory.js keepsakesHTML): the satchel box (backpack.css draws its rim) with the
   owner's bag, the materials beside it (in a row under it when narrow) with their names, the Rune Verses banner under. */
#mInv .m-charmview { display: grid; grid-template-columns: max-content; grid-template-areas: "box" "mats" "banner"; align-content: start; gap: 10px; }
#mInv .m-charmview.wide { grid-template-columns: max-content 150px; grid-template-areas: "box mats" "banner banner"; }
#mInv .m-satchel { grid-area: box; }
#mInv .m-bag { flex: none; width: 58px; height: auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .7)); }
#mInv .m-satchel-main { display: flex; flex-direction: column; gap: 5px; }
#mInv .m-charm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
#mInv .m-charm-head b { color: #ecd294; font: 700 13px/1.1 Cinzel, Georgia, serif; letter-spacing: .09em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
#mInv .m-count { color: #dcc79b; font: 600 13px/1.1 Georgia, serif; font-variant-numeric: tabular-nums; }
#mInv .m-pouch { grid-area: mats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
#mInv .m-charmview.wide .m-pouch { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(44px, 1fr); }
#mInv .m-pouch .mat { min-width: 0; min-height: 44px; gap: 8px; padding: 0 10px; }
#mInv .m-pouch .mat img { flex: none; width: 30px; height: 30px; object-fit: contain; }
#mInv .m-pouch .mat b { color: var(--bp-ink); font: 700 17px/1 Cinzel, Georgia, serif; font-variant-numeric: tabular-nums; text-shadow: 0 2px 2px #000; }
#mInv .m-pouch .mat small { overflow: hidden; color: #b8a58b; font: 13px/1 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
#ui #mInv .m-verses { grid-area: banner; position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 104px 1px;
  border: 0; border-image: none; border-radius: 0; background: none; color: #f6e5b4; font: 700 17px/1 Cinzel, Georgia, serif; letter-spacing: .05em; text-shadow: 0 1px 2px #000, 0 0 6px #000; isolation: isolate; }
body.m-bag #mInv .m-bagwrap { place-items: start center; }

/* The mobile loadout strip above the skill tree. */
#mLoadout .m-lo-row { display: flex; align-items: flex-end; gap: 14px; padding: 2px 4px; }
#mLoadout .m-lo-group { display: flex; align-items: center; gap: 6px; }
#mLoadout .m-lo-group small { writing-mode: vertical-rl; transform: rotate(180deg); color: #bfa46c; font: 700 10px Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
#ui #mLoadout .m-lo { position: relative; width: 50px; height: 50px; min-height: 0; margin: 0; padding: 0; border: 2px solid #7e6038; border-image: none; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #33271d, #0e0b09); overflow: hidden; }
#ui #mLoadout .m-lo.primary { width: 58px; height: 58px; border-color: #e0b45c; }
#ui #mLoadout .m-lo.armed { border-color: #ffd66c; box-shadow: 0 0 12px #ffcf6acc; }
#mLoadout .m-lo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#mLoadout .m-lo b { color: #8a7a60; font: 700 20px/1 Georgia, serif; }
#mLoadout .m-lo-tools { margin-left: auto; display: flex; gap: 6px; }
#mLoadout .m-lo-hint { margin: 4px 6px 0; color: #b8a58b; font: 13px/1.2 Georgia, serif; }

/* Settings. */
#mSettings .m-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; padding: 4px 8px 16px; color: #eadfc4; }
#mSettings h3 { margin: 4px 0 6px; color: #e7c675; font: 700 14px Cinzel, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
#mSettings .m-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; border-bottom: 1px solid #3a2e20; font-size: 17px; }
#ui #mSettings .m-set-btn, #ui #mSettings .m-set-wide { margin: 0; min-width: 96px; min-height: 44px; padding: 0 14px; border: 1px solid #98703c; border-image: none; border-radius: 8px; background: linear-gradient(#43301e, #21170f); color: #ffe6a6; font: 700 14px/1 Cinzel, Georgia, serif; }
#ui #mSettings .m-set-wide { display: block; width: 100%; margin-bottom: 8px; min-height: 50px; }
#ui #mSettings .m-set-wide.danger { background: linear-gradient(#6a2a18, #2c0d06); }
#mSettings .m-stepper { display: flex; align-items: center; gap: 10px; }
#ui #mSettings .m-stepper .m-set-btn { min-width: 48px; font-size: 20px; }
#mSettings .m-stepper b { min-width: 52px; text-align: center; color: #ffe6a6; font: 700 16px Cinzel, Georgia, serif; }
#mSettings .m-howto { margin: 10px 0 12px; color: #b8a58b; font: 14px/1.4 Georgia, serif; }
#mSettings .m-set-pair { display: flex; gap: 10px; }
#ui #mSettings .m-set-pair .m-set-wide { flex: 1; margin: 0; }

/* ============ mhud: the phone HUD from the owner's mockup (2026-09-25) ============
   The vitals card (the level in a circle on the portrait's edge, the numbers on the left), the quest card with a › to
   the Journal, labeled Map / Journal / Inventory / Skills / Menu buttons with unread dots, the minimap's N and the line
   under it, the page swap and target lock above the thumb cluster, the belt handle between the potions and the town
   portal beside them. Chat has its own file (chat.css). Kept in this one section so parallel edits merge cleanly. */
/* The vitals card, condensed for phones (mobilehud, 2026-09-26): 212 x 60 at full size (about 22% less than the card
   at .9 it replaces), a 54 px portrait, tighter bars with their numbers at 11 and 10.5 px, 4 px inside the safe area. */
body.mobile #playerCard { top: calc(var(--m-st) + 4px); left: calc(var(--m-sl) + 4px); width: 212px; height: 60px; transform: none; }
body.mobile #playerCard .unit-portrait { top: 3px; width: 54px; height: 54px; border-width: 2px; }
body.mobile #pointsPip { left: 0; top: 3px; width: 54px; height: 54px; }
body.mobile #playerCard .unit-badge { left: auto; right: -5px; top: -4px; bottom: auto; transform: none; width: 23px; min-width: 0; height: 23px; padding: 0; border: 2px solid #d4a24c; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3d2c1b, #120d0a 75%); color: #ffe6a6; font: 700 11px/19px Georgia, serif; text-align: center; box-shadow: 0 2px 6px #000c; }
body.mobile #playerCard .unit-plate { inset: 3px 0 auto 30px; padding: 1px 8px 3px 29px; border-radius: 9px; }
body.mobile #playerCard .unit-name { font-size: 12px; line-height: 15px; }
body.mobile #playerCard .unit-bar { height: 14px; margin-top: 2px; }
body.mobile #playerCard .unit-bar.mana { height: 12px; margin-top: 2px; }
body.mobile #playerCard .unit-bar > span { place-items: center start; padding-left: 6px; font-size: 11px; letter-spacing: .01em; }
body.mobile #playerCard .unit-bar.mana > span { font-size: 10.5px; }
body.mobile #playerCard .unit-xp { height: 3px; margin-top: 3px; }
body.mobile #comboPips { top: 58px; left: 64px; }
body.mobile.m-narrow #playerCard { width: 204px; }
/* The quest card: the tracked quest's title in gold (main quests carry the tracker's flame mark), its current step in up
   to three lines, and the › (#mQuestMore, laid over the card's right edge by src/mobile/hud.js) that opens the Journal. */
body.mobile #questUI .quest-panel { top: calc(var(--m-card-b) + 4px); left: calc(var(--m-sl) + 4px); width: min(290px, 35vw); padding-right: 36px; border: 1px solid #9a774188; border-radius: 12px; background: linear-gradient(#1d150fe8, #0d0a08e8); box-shadow: 0 4px 12px #0009; }
body.mobile #ui #questUI .quest-panel .tracker-block { display: block; min-height: 0; padding: 6px 8px 7px 11px; white-space: normal; }
body.mobile #questUI .quest-panel .tracker-block .tracker-title { display: block; max-width: none; overflow: hidden; color: #f2c75c; font: 700 13px/1.3 Cinzel, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
body.mobile #questUI .quest-panel .tracker-block .tracker-marker-text { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #eadfc6; font: 13px/1.3 'EB Garamond', Georgia, serif; opacity: 1; white-space: normal; }
body.mobile #questUI .quest-panel .tracker-block:has(.q-return) .tracker-marker-text { display: none; }
body.mobile #questUI .quest-panel .tracker-block .q-return { margin-top: 3px; font-size: 13px; }
/* With nothing tracked the card shows the guide's Next step (src/guide.js via src/questui.js): its line, where to go and any
   level advice, trimmed to fit. */
body.mobile #questUI .quest-panel:has(.tracker-next) { display: block; }
body.mobile #questUI .quest-panel .tracker-next .tracker-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
body.mobile #questUI .quest-panel .tracker-next-where { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #d8cbac; font: 12.5px/1.3 'EB Garamond', Georgia, serif; white-space: normal; }
body.mobile #questUI .quest-panel .tracker-advice { display: block; margin-top: 4px; padding-top: 3px; overflow: hidden; font: 12px/1.3 'EB Garamond', Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
/* The quest card in the tracker's new look (src/questui/tracker.js; the desktop rules are in quest-tab.css): the tracked
   quest with its banner, its gold bar and its summary (or "Return to …" when it is ready) and any level advice; the other
   quests one line each, with their progress bar. No header, objective list or Completed row: the › opens the Journal. */
body.mobile #ui #questUI #questTracker { padding: 0 36px 0 0; border: 1px solid #9a774188; border-radius: 12px; background: linear-gradient(#1d150fe8, #0d0a08e8); box-shadow: 0 4px 12px #0009; }
body.mobile #ui #questUI #questTracker .qt-list { gap: 0; padding: 0; }
body.mobile #ui #questUI #questTracker .qt-card { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 5px 6px 6px 8px; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.mobile #ui #questUI #questTracker .qt-card + .qt-card { border-top: 1px solid #9a774140; }
body.mobile #ui #questUI #questTracker .qt-open { padding-left: 13px; }
body.mobile #ui #questUI #questTracker .qt-open::before { left: 4px; top: 7px; bottom: 7px; width: 3px; }
body.mobile #questUI #questTracker .qt-banner { width: 22px; margin-top: 1px; }
body.mobile #questUI #questTracker .qt-name { display: flex; }
body.mobile #questUI #questTracker .qt-name b { font: 700 13px/1.3 Cinzel, Georgia, serif; }
body.mobile #questUI #questTracker .qt-open .qt-name b { color: #f2c75c; }
body.mobile #questUI #questTracker .qt-name small, body.mobile #questUI #questTracker .qt-objs, body.mobile #questUI #questTracker .qt-done { display: none; }
body.mobile #questUI #questTracker .qt-open .qt-sum { display: -webkit-box; margin-top: 1px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #eadfc6; font: 13px/1.3 'EB Garamond', Georgia, serif; white-space: normal; }
body.mobile #questUI #questTracker .qt-card:not(.qt-open) .qt-sum { display: none; }
body.mobile #questUI #questTracker .qt-open:has(.q-return) .qt-sum { display: none; }
body.mobile #questUI #questTracker .qt-open .q-return { display: block; margin-top: 1px; color: #ffd45a; font: 13px/1.3 'EB Garamond', Georgia, serif; }
body.mobile #questUI #questTracker .qt-bar { margin-top: 3px; gap: 6px; }
body.mobile #questUI #questTracker .qt-bar em { font-size: 12px; }
body.mobile #questUI #questTracker .qt-check { width: 13px; height: 13px; }
/* First-time tips (src/tips.js, firsthour.css) show over the quest card, the guidance corner under the vitals card: clear of
   the thumbs, the messages, the context button and the voice subtitles. Touches pass through the card except its buttons. */
body.mobile #tipToast { left: calc(var(--m-sl) + 4px); top: calc(var(--m-card-b) + 4px); z-index: 19; width: min(290px, 35vw); }
body.mobile #tipToast .tip-card { padding: 7px 10px 6px 12px; background: linear-gradient(160deg, #271c11, #0d0906); pointer-events: none; }
body.mobile #ui #tipToast button { pointer-events: auto; }
body.mobile #tipToast header b { font-size: 13px; }
body.mobile #tipToast p { margin: 3px 0 4px; font-size: 13px; line-height: 1.3; }
body.mobile #ui #tipToast .tip-close { width: 36px; height: 36px; margin: -10px -10px -8px 0; font-size: 22px; line-height: 36px; }
body.mobile #ui #tipToast .tip-off { min-height: 28px; padding: 6px 0 2px; }
body.mobile.m-sheet #tipToast { visibility: hidden; }
#mQuestMore { display: none; }
body.mobile.m-play #ui #mQuestMore { position: fixed; z-index: 19; display: grid; place-items: center; width: 36px; min-height: 0; margin: 0; padding: 0 0 3px; border: 0; border-left: 1px solid #9a774166; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, #2a1d12d9, #3d2a16f2); color: #f2c75c; font: 700 24px/1 Georgia, serif; pointer-events: auto; touch-action: none; }
body.mobile.m-play #ui #mQuestMore[hidden], body.mobile.m-sheet #ui #mQuestMore, body.town-moment #ui #mQuestMore { display: none; }
body.mobile #ui #mQuestMore.down { filter: brightness(1.35); }
/* The buffs and the hireling card follow the quest card down (--m-quest-h is its height); messages and the target frame
   sit in the gap between the left column and the labeled buttons. */
body.mobile #buffs { top: calc(var(--m-card-b) + 9px + var(--m-quest-h, 0px)); left: calc(var(--m-sl) + 6px); }
body.mobile #hirelingCard { top: calc(var(--m-card-b) + 37px + var(--m-quest-h, 0px)); left: calc(var(--m-sl) + 4px); }
/* Messages: centred in the space between the quest card and the minimap, under the labeled buttons (and under the map's
   line when a short screen puts that line beside the map). */
body.mobile #msgs { --m-msg-l: calc(var(--m-sl) + 12px + min(290px, 35vw)); --m-msg-r: min(calc(var(--m-w) - var(--m-btn-r)), calc(var(--m-w) - var(--m-mini-r) - 154px));
  top: calc(var(--m-mini-t) + 56px); left: calc((var(--m-msg-l) + var(--m-msg-r)) / 2); max-width: min(380px, calc(var(--m-msg-r) - var(--m-msg-l))); }
body.mobile.m-where-beside #msgs { --m-msg-r: calc(var(--m-w) - var(--m-btn-r)); top: calc(var(--m-mini-t) + 72px); } /* (the line under the map, when there, keeps its column) */
body.mobile #topbar.unit-card { left: calc((var(--m-sl) + 222px + var(--m-w) - var(--m-btn-r) - 5 * var(--m-btn-w) - 4 * var(--m-btn-gap, 3px)) / 2); }
/* The labeled buttons, left of the minimap. */
body.mobile #mHud .m-top { top: calc(var(--m-mini-t) - 4px); right: var(--m-btn-r); gap: var(--m-btn-gap, 3px); }
body.mobile #ui #mHud .m-top .m-btn { width: var(--m-btn-w); height: 54px; padding: 3px 0 0; display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 10px; }
body.mobile.m-narrow #mHud .m-top .m-btn img { width: 29px; height: 29px; }
body.mobile.m-narrow #mHud .m-lab { font-size: 8.5px; letter-spacing: 0; }
body.mobile #mHud .m-top .m-btn img { width: 31px; height: 31px; }
body.mobile #mHud .m-lab { color: #eadbb8; font: 600 9.5px/1.1 Georgia, serif; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; }
body.mobile #mHud .m-top .m-badge { top: -5px; right: -4px; }
body.mobile #mHud .m-top .m-dot { display: block; width: 12px; min-width: 0; height: 12px; padding: 0; border: 2px solid #1a110a; background: #e0341f; box-shadow: 0 0 6px #ff5a3a; }
body.mobile #mHud .m-top .m-dot[hidden] { display: none; }
/* The square minimap (drawn on the canvas, src/minimap.js): an N just inside its top edge, and the area, tile coordinates,
   level and act under its frame. */
body.mobile #mHud .m-north { position: absolute; top: calc(var(--m-mini-t) + 3px); right: calc(var(--m-mini-r) + var(--m-mini) / 2 - 8px); width: 16px; height: 16px; border: 1px solid #a8844a; border-radius: 3px; background: #0c0907d9; color: #f2d297; font: 700 10px/14px Cinzel, Georgia, serif; font-style: normal; text-align: center; box-shadow: 0 1px 3px #000c; pointer-events: none; }
body.mobile #mHud .m-where { position: absolute; top: calc(var(--m-mini-t) + var(--m-mini) + 7px); right: calc(var(--m-mini-r) - 4px); max-width: min(300px, 40vw); font-size: 12px; line-height: 1.25; overflow: hidden; color: #f0dca8; text-align: right; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 5px #000; pointer-events: none; }
body.mobile #mHud .m-area { font: 700 12px/1.25 Cinzel, Georgia, serif; }
body.mobile #mHud .m-coords { margin-left: 5px; color: #d9c8a4; font: 12px/1.25 Georgia, serif; font-variant-numeric: tabular-nums; }
body.mobile #mHud .m-lvl { display: block; font: 10.5px/1.25 Georgia, serif; }
/* A short screen (src/mobile/geometry.js: the two lines would meet the target lock) puts the line beside the map, on one
   line under the labeled buttons. */
body.mobile.m-where-beside #mHud .m-where { top: calc(var(--m-mini-t) + 53px); right: var(--m-btn-r); max-width: calc(var(--m-w) - var(--m-btn-r) - var(--m-sl) - 230px); }
body.mobile.m-where-beside #mHud .m-lvl { display: inline; margin-left: 7px; }
body.mobile.m-map #mHud .m-north, body.mobile.m-map #mHud .m-where { display: none; }
/* Right thumb: the page swap (circling arrows, the page number on a small badge) above the arc's upper buttons. */
body.mobile #ui #mCluster .m-page { width: 44px; height: 44px; margin: -22px; transform: translate(calc(var(--m-r) * cos(244deg)), calc(var(--m-r) * sin(244deg) - var(--m-skill) / 2 - 26px)); color: #ffe6a6; }
body.mobile #mCluster .m-page svg { width: 25px; height: 25px; pointer-events: none; }
body.mobile #mCluster .m-page b { position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px; padding: 0 3px; border: 1px solid #9a7741; border-radius: 9px; background: #120d0a; color: #ffe6a6; font: 700 10px/15px Georgia, serif; text-align: center; }
/* The target lock beside it, above the arc's top button; lit while a foe is locked, whose ring pulses on the ground. */
body.mobile #ui #mCluster .m-lock { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; transform: translate(calc(var(--m-r) * cos(282deg)), calc(var(--m-r) * sin(282deg) - var(--m-skill) / 2 - 26px)); display: grid; place-items: center; border: 2px solid #7e6038; border-radius: 50%; background: #1b1510ee; box-shadow: 0 3px 8px #0009; color: #e8d5ae; }
body.mobile #mCluster .m-lock svg { width: 26px; height: 26px; pointer-events: none; }
body.mobile #ui #mCluster .m-lock.on { border-color: #ff7a52; background: radial-gradient(circle at 50% 40%, #5c2012, #1b0d08); color: #ffd6c2; box-shadow: 0 0 12px #ff6a3a99, 0 3px 8px #0009; }
body.mobile #ui #mCluster .m-lock.down { filter: brightness(1.3); }
#mLockMark { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#mLockMark.hidden, body:not(.mobile) #mLockMark, body.mobile:not(.m-play) #mLockMark { display: none; }
#mLockMark i { position: absolute; border: 2px dashed #ff7a52; border-radius: 50%; background: radial-gradient(ellipse, #ff6a3a00 55%, #ff6a3a33); box-shadow: 0 0 10px #ff6a3a88; animation: m-lock-pulse 1.1s ease-in-out infinite alternate; }
@keyframes m-lock-pulse { from { opacity: .55; } to { opacity: 1; } }
/* Bottom centre: the potions with the belt handle between them, the town portal beside them. */
body.mobile #ui #mHud .m-pot-life { right: auto; left: calc(var(--m-row-c) - 76px); }
body.mobile #ui #mHud .m-pot-mana { left: calc(var(--m-row-c) + 26px); }
body.mobile #ui #mHud .m-belt-handle { position: absolute; left: calc(var(--m-row-c) - 22px); bottom: calc(var(--m-sb) + 9px); width: 44px; height: 44px; display: grid; place-items: center; color: #ffe6a6; }
body.mobile #mHud .m-belt-handle i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #9a7741; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #33261b, #0e0b09); box-shadow: 0 2px 6px #000a; pointer-events: none; }
body.mobile #mHud .m-belt-handle svg { width: 18px; height: 18px; transition: transform .15s; }
body.mobile #mHud .m-belt-handle[aria-expanded="true"] i { border-color: #ffd66c; box-shadow: 0 0 8px #ffcf6a88; }
body.mobile #mHud .m-belt-handle[aria-expanded="true"] svg { transform: rotate(180deg); }
body.mobile #ui #mHud .m-tp { top: auto; right: auto; left: calc(var(--m-row-c) + 90px); bottom: calc(var(--m-sb) + 8px); }
/* ============ end mhud ============ */

/* ============ mobilehud: the phone HUD tightened (2026-09-26; src/mobile/hud.js, geometry.js, fade.js, icons.js) ============
   The quest card minimizes to a pill with the tracked quest's banner (remembered in the phone prefs), and the less
   important menus fade while the hero moves. */
/* The quest card's left column (its banner) minimizes it: a 44 px wide button over the column, with a small chevron chip
   under the banner. The › on the right edge takes 44 px to touch too (8 px of it over the card's padding). */
body.mobile.m-play #ui #mQuestMin { position: fixed; z-index: 20; display: flex; align-items: flex-end; justify-content: center; width: 44px; min-height: 0; margin: 0; padding: 0 0 5px 2px; border: 0; border-image: none; border-radius: 12px 0 0 12px;
  background: none; box-shadow: none; color: #f0cf86; pointer-events: auto; touch-action: none; transform: none; }
#mQuestMin i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #b98b4599; border-radius: 50%; background: #120c07e6; pointer-events: none; }
#mQuestMin svg { width: 12px; height: 12px; }
body.mobile.m-play #ui #mQuestMore::before { content: ''; position: absolute; top: 0; bottom: 0; left: -9px; width: 9px; }
/* Minimized: the pill in the card's place, the tracked quest's banner and a chevron to open it again (a dot when a quest is
   ready to hand in or a reward waits). */
body.mobile.m-quest-min #questUI .quest-panel { display: none !important; }
body.mobile.m-play #ui #mQuestPill { position: fixed; z-index: 19; top: calc(var(--m-card-b) + 4px); left: calc(var(--m-sl) + 4px); display: flex; align-items: center; gap: 3px; box-sizing: border-box; height: 44px; min-height: 0; min-width: 58px; margin: 0; padding: 0 8px 0 7px;
  border: 1px solid #9a774199; border-image: none; border-radius: 22px; background: linear-gradient(#1d150fe8, #0d0a08e8); box-shadow: 0 4px 12px #0009; color: #f2c75c; pointer-events: auto; touch-action: none; transform: none; }
#mQuestPill img { width: auto; height: 32px; pointer-events: none; }
#mQuestPill .m-pill-chev { display: grid; place-items: center; width: 16px; height: 16px; pointer-events: none; }
#mQuestPill .m-pill-chev svg { width: 15px; height: 15px; }
#mQuestPill .m-pill-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border: 2px solid #1a110a; border-radius: 50%; background: #f2c75c; box-shadow: 0 0 6px #ffcf6a; pointer-events: none; }
#mQuestPill .m-pill-dot[hidden] { display: none; }
body.mobile.m-play #ui :is(#mQuestMin, #mQuestPill)[hidden], body.mobile.m-sheet #ui :is(#mQuestMin, #mQuestPill), body.town-moment #ui :is(#mQuestMin, #mQuestPill) { display: none; }
body.mobile #ui #mQuestPill.down, body.mobile #ui #mQuestMin.down i { filter: brightness(1.35); }
/* Fading while the hero moves (body.m-fade, src/mobile/fade.js): the labeled buttons, the chat button and the quest card
   go to 40% in 0.2 s and come back when he stops (or at once when touched). Never the vitals card, the thumb cluster,
   the potions, the minimap and its line, the context button or messages, nor anything with news on it (a dot or a count,
   unread chat, a quest ready to hand in). */
body.mobile #mHud .m-top .m-btn, body.mobile #ui #chat .chat-btn, body.mobile #ui #questUI #questTracker, body.mobile #ui :is(#mQuestMore, #mQuestMin, #mQuestPill) { transition: opacity .2s ease-out; }
body.mobile.m-fade #mHud .m-top .m-btn:not(.m-alert), body.mobile.m-fade #ui #chat:not(.unread) .chat-btn,
body.mobile.m-fade:not(.m-quest-alert) #ui #questUI #questTracker, body.mobile.m-fade:not(.m-quest-alert) #ui :is(#mQuestMore, #mQuestMin, #mQuestPill) { opacity: .4; }
/* ============ end mobilehud ============ */

/* ============ landscape layouts for phones (2026-09-25) ============ */
/* Skills: each tree reads as a row, left to right by level (the desktop tree transposed), with the touch-button loadout
   beside it on the right instead of above, so the whole tab fits a landscape phone without scrolling. */
body.mobile.m-tab-skills #characterWindow { top: calc(var(--m-bar) + var(--m-st) + 6px) !important; right: calc(var(--m-sr) + 8px + min(340px, 38vw)) !important; }
body.m-tab-skills #mLoadout { display: block; left: auto; right: 0; top: 0; bottom: 0; width: calc(min(340px, 38vw) - 8px); height: auto; overflow-y: auto; }
#mLoadout .m-lo-row { flex-wrap: wrap; align-items: center; row-gap: 10px; }
#mLoadout .m-lo-tools { margin-left: 0; width: 100%; }
body.mobile.m-tab-skills .cw-skills { --tree-s: .96; display: flex; flex-direction: column; align-items: center; overflow: auto; }
body.mobile.m-tab-skills .cw-skills .skpts { margin: 2px 0 4px; font-size: 15px; }
body.mobile.m-tab-skills .cw-skills .tree { flex: none; width: calc(480px * var(--tree-s)); height: calc(330px * var(--tree-s)); margin: 0 auto 6px;
  transform: matrix(0, var(--tree-s), var(--tree-s), 0, calc(24 * var(--tree-s)), 0); transform-origin: 0 0; }
body.mobile.m-tab-skills .cw-skills .tree .sknode, body.mobile.m-tab-skills .cw-skills .tree .treehead { transform: matrix(0, 1, 1, 0, 0, 0); }
body.mobile.m-tab-skills .cw-skills .tree .treehead { top: 8px; width: 60px; margin-left: 14px; font-size: 10px; letter-spacing: .04em; line-height: 16px; }
@media (max-height: 370px) { body.mobile.m-tab-skills .cw-skills { --tree-s: .86; } }

/* ============ phone Skills tab: the Mage tree art (magetree, 2026-09-25) ============ */
/* Only a class with tree art (.sk-art, skilltree.css) is touched here. The landscape block above transposes the tree,
   so the column panels and link gems turn with it and run along each tree's row, while the emblems, like the skills,
   are turned back upright and sit at the start of their row, before its first skill. */
/* The emblem's spike pointed down its column; a row has nothing under it, so the phone shows the emblem down to a short
   stub under its gold rule, centred on the row. */
body.mobile.m-tab-skills .cw-skills .sk-art .tree .treehead { top: 6px; width: 72px; height: 74px; margin-left: -36px; background-size: 72px auto; }
body.mobile.m-tab-skills .cw-skills .sk-art .tree .treehead.named { background-size: 38px auto; background-position: center 2px; }
body.mobile.m-tab-skills .cw-skills .sk-art .tree .treehead.named span { top: 42px; font-size: 10px; line-height: 14px; }
body.mobile.m-tab-skills .cw-skills .sk-art .tree .treehead.named::after { top: 58px; left: 12px; right: 12px; }

/* ============ the quest log in the phone's Quests sheet (src/questui/log.js; the desktop layout is in quest-tab.css) ============
   The same two columns sized for a landscape phone: the list and the chosen quest scroll on their own, every control is a
   44 px touch target, and the header picture is shorter so the objectives and rewards come into view. */
body.mobile.m-sheet #characterWindow .cw-body.cw-quests { overflow: hidden; }
body.mobile .ql { grid-template-columns: minmax(212px, 33%) minmax(0, 1fr); column-gap: 14px; }
body.mobile .ql-side { padding-right: 10px; }
body.mobile .ql-side-head { padding: 2px 2px 6px; }
body.mobile .ql-side-head h2 { font-size: 22px; }
body.mobile .ql-diff { font-size: 10px; }
body.mobile .ql-group h3 { gap: 7px; margin-bottom: 6px; font-size: 12px; }
body.mobile .ql-group + .ql-group { margin-top: 6px; padding-top: 8px; }
body.mobile .ql-gi { width: 20px; height: 20px; }
body.mobile #ui #characterWindow .ql-card { min-height: 52px; gap: 8px; margin-bottom: 6px; padding: 4px 8px 4px 5px; }
body.mobile .ql-thumb { width: 64px; height: 40px; }
body.mobile .ql-mark { width: 22px; height: 24px; }
body.mobile .ql-mark-main img { width: 20px; height: 20px; }
body.mobile .ql-mark.ql-check, body.mobile .ql-gi.ql-check { width: 18px; height: 18px; }
body.mobile .ql-card-text b { font-size: 14px; }
body.mobile .ql-card-text small { font-size: 12px; }
body.mobile .ql-pin { width: 16px; }
body.mobile .ql-options { margin-top: 4px; padding-top: 6px; font-size: 13px; }
body.mobile .ql-options summary { font-size: 11px; line-height: 30px; }
body.mobile .ql-options select { min-height: 36px; }
body.mobile .ql-hero { height: 112px; }
body.mobile .ql-title { left: 10px; gap: 10px; }
body.mobile .ql-banner { width: 32px; margin-bottom: 2px; }
body.mobile .ql-kicker { margin-bottom: 2px; font-size: 10px; }
body.mobile .ql-kicker-icon { width: 14px; height: 16px; }
body.mobile .ql-title h2 { font-size: 22px; }
body.mobile .ql-meta { margin-top: 2px; font-size: 14px; }
body.mobile .ql-div-ornate { height: 20px; margin: 5px 0 7px; }
body.mobile .ql-div-plain { height: 10px; margin: 8px 0; }
body.mobile .ql-div-thin { height: 16px; margin: 8px 0; }
body.mobile .ql-copy { font-size: 15px; line-height: 1.35; }
body.mobile .ql-section h3 { margin-bottom: 6px; font-size: 12px; }
body.mobile .ql-objectives ol { gap: 5px; }
body.mobile .ql-obj { grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
body.mobile .ql-box { width: 17px; height: 17px; }
body.mobile .ql-obj > span > b { font-size: 14px; }
body.mobile .ql-obj > span > small, body.mobile .ql-obj time, body.mobile .ql-obj em { font-size: 12px; }
body.mobile .ql-progress i { width: 90px; }
body.mobile .ql-rewards ul { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
body.mobile .ql-tile { width: 50px; height: 50px; }
body.mobile .ql-tile img { width: 40px; height: 40px; }
body.mobile .ql-r-item .ql-tile img, body.mobile .ql-r-potion .ql-tile img { width: 36px; height: 36px; }
body.mobile .ql-q { width: 15px; height: 15px; font-size: 11px; }
body.mobile .ql-rv b, body.mobile .ql-r-xp .ql-rv b, body.mobile .ql-r-gold .ql-rv b { font-size: 14px; }
body.mobile .ql-rv small { font-size: 12px; }
body.mobile .ql-quote { padding: 0 8px; }
body.mobile .ql-quote p { font-size: 15px; }
body.mobile .ql-quote footer { font-size: 13px; }
body.mobile .ql-actions { gap: 10px; padding-top: 7px; }
body.mobile .ql-actions-note p { font-size: 14px; }
body.mobile #ui #characterWindow .ql-track { min-width: 0; height: 44px; padding: 0 16px; font-size: 14px; }
body.mobile #ui #characterWindow .ql-map { height: 44px; padding: 0 14px; font-size: 12px; }
body.mobile #ui #characterWindow .ql-abandon { height: 44px; }
body.mobile .ql-btn-icon { height: 20px; }