/* Phone interface (landscape, touch): loaded for everybody, but every rule is scoped by html.mobile (set by mobile/mobileMode.js), so the PC interface is untouched.
   Sizes follow the screen HEIGHT (a phone in landscape is short): --mslot / --mbtn. Safe areas (notch, Dynamic Island, rounded corners) are --sal / --sar / --sat / --sab.
   Same palette, bevels and gold rims as the PC HUD (base.css tokens); only the layout changes. */
html.mobile {
  --ui-z: 1; /* the size of the interface (80 .. 120 %), set by mobile/mobilePrefs.js; the safe areas divide by it so they stay real pixels once zoomed */
  --sal: calc(var(--sal-raw, env(safe-area-inset-left, 0px)) / var(--ui-z)); --sar: calc(var(--sar-raw, env(safe-area-inset-right, 0px)) / var(--ui-z));
  --sat: calc(var(--sat-raw, env(safe-area-inset-top, 0px)) / var(--ui-z)); --sab: calc(var(--sab-raw, env(safe-area-inset-bottom, 0px)) / var(--ui-z));
  --mgap: 8px;
  --vh: 1vh; /* the visible height unit: dvh where it exists (iOS Safari's toolbars change the viewport), else vh */
  --mslot: clamp(42px, calc(13.2 * var(--vh)), 60px);
  --mbtn: clamp(40px, calc(11.4 * var(--vh)), 54px);
  --mjoy: clamp(84px, calc(25 * var(--vh)), 112px);
  --mbarh: calc(var(--mslot) + 40px);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: manipulation;
}
@supports (height: 1dvh) { html.mobile { --vh: 1dvh; } }
html.mobile #hud > * { zoom: var(--ui-z); } /* the whole phone HUD, sheets and panels follow the size setting */
html.mobile body { position: fixed; inset: 0; overscroll-behavior: none; }
html.mobile #game canvas { touch-action: none; }
html.mobile button, html.mobile .slot, html.mobile .gf-tile { touch-action: manipulation; }
html.mobile #tooltip { display: none !important; } /* hover tooltips have no meaning under a finger: the sheets show the detail */

/* ---- portrait: ask to turn the phone -------------------------------------------------------------------------------------------------------- */
#rotate-hint { display: none; }
@media (orientation: portrait) {
  html.mobile #rotate-hint { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; text-align: center;
    background: radial-gradient(circle at 50% 40%, #5a3a1c, #1a0f07 75%); color: var(--text); }
  .rh-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
  .rh-card b { font-size: 22px; color: var(--gold); text-shadow: var(--outline); }
  .rh-card span { font-size: 14px; color: var(--muted); }
  .rh-phone { width: 46px; height: 78px; border: 4px solid var(--gold); border-radius: 10px; box-shadow: 0 0 0 2px var(--wood-dark); animation: rhTurn 2.2s ease-in-out infinite; }
}
@keyframes rhTurn { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* ---- the PC pieces a phone has no room for -------------------------------------------------------------------------------------------------- */
html.mobile .hudbtns, html.mobile .actionbar, html.mobile .teamframes, html.mobile .zone-title { display: none !important; }
html.mobile #hud { --pad: 8px; }
html.mobile .frames { left: calc(var(--sal) + 8px); top: calc(var(--sat) + 6px); width: clamp(170px, 26vw, 232px); gap: 4px; }
html.mobile .frame { padding: 5px 8px 6px 6px; gap: 6px; box-shadow: 0 0 0 2px var(--wood-dark), inset 0 0 0 1px var(--bronze-hi), inset 0 0 0 2px var(--wood), var(--drop); }
html.mobile .portrait { width: clamp(38px, calc(11 * var(--vh)), 48px); height: clamp(38px, calc(11 * var(--vh)), 48px); margin: 1px 0 7px 0; }
html.mobile .pt-lv { font-size: 10px; line-height: 13px; bottom: -7px; min-width: 22px; }
html.mobile .nameplate b { font-size: 12px; }
html.mobile .tinfo { font-size: 10px; }
html.mobile .bar { height: 13px; }
html.mobile .bar.mp { height: 11px; }
html.mobile .bar .btxt { font-size: 9.5px; }
html.mobile .pips i { width: 12px; height: 12px; }
html.mobile .resline { min-height: 12px; }
html.mobile .buffs { gap: 2px; }
html.mobile .st { font-size: 8.5px; padding: 0 3px; }
html.mobile .frames.arena .frame.target { top: calc(var(--sat) + 86px); }
html.mobile .frame.target { position: fixed; left: 50%; top: calc(var(--sat) + 50px); transform: translateX(-50%); width: clamp(150px, 24vw, 210px); padding: 5px 9px 6px; }
html.mobile .info { position: fixed; left: calc(var(--sal) + 14px); bottom: calc(var(--sab) + var(--mjoy) + 20px); font-size: 9px; padding: 1px 6px; opacity: 0.75; }
html.mobile .bottomright { position: static; }
html.mobile .topright { right: calc(var(--sar) + 8px); top: calc(var(--sat) + 6px); gap: 4px; }
html.mobile .minimap { width: clamp(96px, calc(27 * var(--vh)), 128px) !important; height: auto !important; border-radius: 9px; box-shadow: 0 0 0 1px var(--wood-dark), 0 0 0 3px #8a5a28, 0 0 0 4px var(--gold), 0 0 0 5px var(--wood-dark), 0 4px 10px rgba(0, 0, 0, 0.5); }
html.mobile .killfeed { margin-top: 2px; max-width: 34vw; }
html.mobile .kf { font-size: 10px; padding: 1px 8px; }
html.mobile .toast { font-size: 12px; padding: 5px 14px; max-width: 64vw; text-align: center; }
html.mobile #toasts { top: calc(var(--sat) + 96px); }
html.mobile .bottom { left: 50%; bottom: calc(var(--sab) + var(--mbtn) * 1.84 + 24px); }
html.mobile .mycast { width: clamp(150px, 24vw, 200px); height: 16px; }
html.mobile .mycast span { font-size: 10px; }

/* ---- the phone HUD -------------------------------------------------------------------------------------------------------------------------- */
.mhud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.mhud .interactive { pointer-events: auto; }
.mbtn { appearance: none; -webkit-appearance: none; font: inherit; color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none; }
.mbtn:active { transform: scale(0.93); filter: brightness(1.12); }
/* round bevelled glyph buttons: the PC window buttons, bigger */
.mhb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; width: var(--mbtn); height: var(--mbtn); padding: 0; border-radius: 50%; font-size: calc(var(--mbtn) * 0.5);
  background: radial-gradient(circle at 35% 25%, #fff3c4, #e0b968 45%, #a8743a); border: 2px solid var(--wood-dark); font-weight: 800;
  box-shadow: inset 0 0 0 1px #fff2b0, inset 0 -3px 4px rgba(91, 58, 24, 0.55), 0 0 0 1px var(--bronze), 0 3px 6px rgba(0, 0, 0, 0.55); transition: transform 0.08s, filter 0.1s; }
.mhb .glyph { --glyph-cut: #e9cf8c; width: 1em; height: 1em; filter: drop-shadow(0 1px 0 rgba(255, 244, 200, 0.7)); }
.mhb .mlabel { font-size: 9.5px; line-height: 1; margin-top: 1px; letter-spacing: 0.2px; text-shadow: 0 1px 0 rgba(255, 244, 200, 0.7); }
.mhb .mbadge { position: absolute; right: -2px; bottom: -3px; min-width: 16px; padding: 0 3px; font-size: 10px; line-height: 15px; text-align: center; color: #fff; text-shadow: var(--outline); border-radius: 8px; background: #3b2412; box-shadow: 0 0 0 1px var(--gold-lo); }
.mhb .mbadge:empty { display: none; }
.mhb.on { background: radial-gradient(circle at 35% 25%, #e8fff0, #7be39a 45%, #2e8a4c); box-shadow: inset 0 0 0 1px #d6ffe2, inset 0 0 0 2px #1d4a2a, 0 0 0 1px #3a8a2c, 0 0 12px rgba(95, 242, 160, 0.8); }
.mhb.dry { filter: grayscale(0.8) brightness(0.8); }
.mhb.qhp .glyph { color: #9d141c; }
.mhb.qmp .glyph { color: #174aa8; }
.mhb.qtarget .glyph, .mhb.qauto .glyph, .mhb.qscores .glyph, .mhb.qmount .glyph { color: #4a2f14; }
.mmenu { position: absolute; left: calc(var(--sal) + 14px + var(--mjoy) + 12px); bottom: calc(var(--sab) + 8px); display: grid; grid-template-columns: repeat(3, auto); gap: 5px; }
.mmenu .mhb { width: calc(var(--mbtn) + 4px); height: max(44px, calc(var(--mbtn) * 0.92)); border-radius: 13px; font-size: calc(var(--mbtn) * 0.38); }
.mmenu .mhb .mlabel { font-size: 9px; }
.mquick { position: absolute; right: calc(var(--sar) + 12px + var(--mjoy) + 12px); bottom: calc(var(--sab) + 10px + var(--mbarh) + 12px + (var(--mjoy) - var(--mbtn)) / 2); display: flex; gap: 8px; align-items: center; }

/* the two joysticks: left = move (like the keys), right = camera (like the mouse drag); one finger each, on their own element */
.mjoy { --ring: #c9a24a; position: absolute; width: var(--mjoy); height: var(--mjoy); border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; }
.mjoy-move { left: calc(var(--sal) + 14px); bottom: calc(var(--sab) + 12px); }
.mjoy-camera { --ring: #62b0f0; right: calc(var(--sar) + 12px); bottom: calc(var(--sab) + 10px + var(--mbarh) + 12px); }
.mjoy-base { position: absolute; inset: 0; border-radius: 50%; transition: filter 0.1s;
  background: radial-gradient(circle, rgba(30, 18, 9, 0.28), rgba(30, 18, 9, 0.6));
  box-shadow: 0 0 0 2px rgba(30, 16, 8, 0.85), 0 0 0 4px var(--ring), inset 0 0 0 2px rgba(255, 233, 160, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5); }
.mjoy.on .mjoy-base { filter: brightness(1.3); }
.mjoy-base i { position: absolute; width: 0; height: 0; border: 5px solid transparent; opacity: 0.7; }
.mjoy-n { left: 50%; top: 5%; margin-left: -5px; border-top-width: 0; border-bottom-color: var(--ring); }
.mjoy-s { left: 50%; bottom: 5%; margin-left: -5px; border-bottom-width: 0; border-top-color: var(--ring); }
.mjoy-w { top: 50%; left: 5%; margin-top: -5px; border-left-width: 0; border-right-color: var(--ring); }
.mjoy-e { top: 50%; right: 5%; margin-top: -5px; border-right-width: 0; border-left-color: var(--ring); }
.mjoy-knob { position: absolute; inset: 27%; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #4a2f14; font-size: calc(var(--mjoy) * 0.22); pointer-events: none; transition: transform 0.12s ease-out;
  background: radial-gradient(circle at 35% 25%, #fff3c4, #e0b968 45%, #a8743a); box-shadow: inset 0 0 0 1px #fff2b0, inset 0 -3px 4px rgba(91, 58, 24, 0.55), 0 0 0 2px var(--wood-dark), 0 3px 6px rgba(0, 0, 0, 0.55); }
.mjoy-camera .mjoy-knob { background: radial-gradient(circle at 35% 25%, #e6f5ff, #7fc1f0 45%, #2f6fb0); color: #123a66; box-shadow: inset 0 0 0 1px #d9efff, inset 0 -3px 4px rgba(18, 58, 102, 0.55), 0 0 0 2px var(--wood-dark), 0 3px 6px rgba(0, 0, 0, 0.55); }
.mjoy.on .mjoy-knob { transition: none; }
.mjoy-knob .glyph { width: 1em; height: 1em; }

/* action bar: same parchment plate and bevels as the PC bar, 5 big slots, a pager */
.mbar { --slot: var(--mslot); position: absolute; right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + 10px); display: flex; flex-direction: column; gap: 3px; padding: 6px 7px 4px; border-radius: 8px;
  background: repeating-linear-gradient(45deg, rgba(120, 90, 40, 0.07) 0 2px, transparent 2px 7px), linear-gradient(#f1e6ca, #d9c8a0 60%, #c9b583);
  box-shadow: 0 0 0 2px var(--wood-dark), 0 0 0 4px #8a5a28, 0 0 0 5px var(--gold), 0 0 0 7px var(--wood-dark), inset 0 0 0 1px #fff7da, inset 0 0 0 3px rgba(168, 116, 58, 0.55), 0 8px 18px rgba(0, 0, 0, 0.55); }
.mbar-main { display: flex; align-items: center; gap: 5px; }
.mslots { display: flex; gap: 5px; }
.mslot { position: relative; width: var(--mslot); height: var(--mslot); flex: none; }
.mslot .slot { width: 100%; height: 100%; border-radius: 8px; }
.mslot .slot .icon-wrap img { width: calc(var(--mslot) - 8px); height: calc(var(--mslot) - 8px); }
.mslot .slot .key { display: none; }
.mslot .slot .cdtext { font-size: 16px; }
.mslot .slot .badge { font-size: 12px; right: 4px; bottom: 2px; }
.mslot .slot:hover { box-shadow: 0 0 0 1px var(--wood-dark), inset 0 0 0 1px var(--bronze-hi), inset 0 0 0 2px #6b4421, inset 0 -4px 6px rgba(0, 0, 0, 0.45); } /* no sticky hover after a tap */
.mnum { position: absolute; left: 4px; top: 2px; z-index: 3; font-size: 9px; font-weight: 800; color: #fff6dc; text-shadow: var(--outline); pointer-events: none; opacity: 0.85; }
.mcost { position: absolute; left: 3px; bottom: 2px; z-index: 3; min-width: 14px; padding: 0 4px; font-size: 9.5px; line-height: 13px; font-weight: 800; color: #cfe6ff; text-align: center; border-radius: 7px; background: rgba(8, 24, 70, 0.82); box-shadow: 0 0 0 1px #3b82f6; pointer-events: none; }
.mcost:empty { display: none; }
.mslot.empty .slot { opacity: 0.55; }
.mpage { width: 34px; height: var(--mslot); flex: none; font-size: 26px; font-weight: 800; line-height: 1; color: #fff6dc; text-shadow: var(--outline); border: 0; border-radius: 8px; background: linear-gradient(#6b4421, #3b2412); box-shadow: 0 0 0 1px var(--wood-dark), inset 0 0 0 1px var(--bronze-hi); }
.mbar-foot { display: flex; align-items: center; justify-content: space-between; height: 20px; }
.mdots { display: flex; gap: 6px; padding-left: 40px; }
.mdots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(74, 47, 20, 0.35); box-shadow: 0 0 0 1px rgba(30, 16, 8, 0.5); }
.mdots i.on { background: var(--gold); box-shadow: 0 0 0 1px var(--wood-dark), 0 0 6px var(--gold); }
.mrow { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px; font-size: 11px; font-weight: 800; color: var(--ink); border: 1px solid #5b3a18; border-radius: 10px; background: linear-gradient(#f4e6bf, #cdb27a); }
.mrow .glyph { width: 11px; height: 11px; }

/* tap feedback on the 3D view */
.mtouch-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mtap { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--gold-hi); box-shadow: 0 0 8px rgba(241, 192, 74, 0.8); animation: mtap 0.5s ease-out forwards; }
.mtap.unit { border-color: #8be8a4; }
.mtap.hold { border-color: #ff9a94; animation-duration: 0.45s; }
@keyframes mtap { to { transform: scale(3.6); opacity: 0; } }

/* ---- PC windows and panels, as scrollable centred panels (Sprite, Journal, NPC dialogs, settings) ------------------------------------------- */
html.mobile .gfw { position: fixed; left: 50% !important; top: calc(var(--sat) + 6px) !important; transform: translateX(-50%); width: min(94vw, 100%) !important; max-width: calc(100vw - var(--sal) - var(--sar) - 16px);
  max-height: calc(100% - var(--sat) - var(--sab) - 12px); overflow: auto; -webkit-overflow-scrolling: touch; z-index: 60; }
html.mobile .gfw-btn { width: 34px; height: 34px; font-size: 16px; border-radius: 8px; }
html.mobile .gfw-help { display: none; }
html.mobile .gfw-head { position: sticky; top: 0; z-index: 2; cursor: default; padding: 5px 8px 5px 12px; }
html.mobile .panel.modal { max-height: calc(100% - var(--sat) - var(--sab) - 12px); overflow: auto; -webkit-overflow-scrolling: touch; }
html.mobile .settings { width: min(94vw, 600px); }
html.mobile .set-tabs .btn:nth-child(4) { display: none; } /* key bindings: a phone has no keyboard */
html.mobile .set-row { grid-template-columns: 1fr 170px; }
html.mobile .btn { min-height: 38px; }
html.mobile .menu .btn { min-height: 44px; }
html.mobile .minimap-box { width: auto; height: auto; }