/* ===========================================================================
   MOBILE

   Two audiences, deliberately separated:

     html.ym-mobile      A real phone or tablet (detected in index.html's
                         <head> before first paint). Gets the mobile CLIENT:
                         the whole viewport is the game, the UI is summoned
                         from a drawer, panels are bottom sheets.

     ≤1024px, non-touch  A merely-narrowed desktop window. Gets the old fluid
                         single-column fallback and nothing else. The previous
                         version of this file applied the phone treatment here
                         too, which meant dragging a desktop window narrow
                         handed a mouse user the touch layout.

   Desktop at ≥1025px is untouched by this file.
   =========================================================================== */

/* ===========================================================================
   PART 1 — THE MOBILE CLIENT  (html.ym-mobile)
   =========================================================================== */

html.ym-mobile {
    /* One height to trust. mobile.js overwrites --ym-vh with the exact
       visualViewport height, which is the only value that accounts for the
       soft keyboard; dvh handles the URL bar and is the pre-JS fallback. */
    --ym-vh: 100vh;
    --ym-sat: env(safe-area-inset-top, 0px);
    --ym-sar: env(safe-area-inset-right, 0px);
    --ym-sab: env(safe-area-inset-bottom, 0px);
    --ym-sal: env(safe-area-inset-left, 0px);
    --ym-hud-z: 30;
}
@supports (height: 100dvh) {
    html.ym-mobile { --ym-vh: 100dvh; }
}

/* Lock the document. A game shell must not rubber-band, must not scroll, and
   must not let a stray drag pull the address bar around. */
html.ym-mobile,
html.ym-mobile body {
    height: var(--ym-vh);
    max-height: var(--ym-vh);
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: manipulation;
    margin: 0;
    padding: 0;
}

/* ── The page becomes the game ───────────────────────────────────────────────
   These mirror layout.css's `body.immersive` rules rather than relying on the
   class, so the shell is correct even if mobile.js never runs. */
html.ym-mobile > body > header,
html.ym-mobile > body > footer,
html.ym-mobile #action-progress,
html.ym-mobile #version-badge,
html.ym-mobile #status,
html.ym-mobile #sidebar,
html.ym-mobile #below-viewport-row,
html.ym-mobile #coord-widget,
html.ym-mobile #immersive-btn,
html.ym-mobile #immersive-hint,
html.ym-mobile #rail-more-wrap,
html.ym-mobile #login-status-bar {
    display: none !important;
}

html.ym-mobile #main-content {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

html.ym-mobile #game-content-wrapper,
html.ym-mobile #game-and-sidebar,
html.ym-mobile #game-area,
html.ym-mobile #game-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

html.ym-mobile #canvas-wrap {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000;
    z-index: 1;
}

/* The canvas is the input surface: the browser must not claim pans, pinches,
   double-tap zoom, long-press callouts or text selection on it. */
html.ym-mobile #game-canvas {
    display: block;
    border: 0 !important;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

html.ym-mobile button,
html.ym-mobile .rail-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Rail tooltips are a hover affordance and there is no hover on a phone —
   they just sit there stuck open after a tap. (Note the class: the element is
   `.rail-tooltip`, a child of each rail button, not an `#id`.) */
html.ym-mobile .rail-tooltip { display: none !important; }

/* Hover styling is a lie on touch — it sticks after a tap. */
@media (hover: none) {
    html.ym-mobile .rail-btn:hover { background: rgba(20, 17, 11, 0.78) !important; }
    html.ym-mobile .ability-btn:hover { transform: none; }
}

/* ===========================================================================
   PART 1a — HUD LAYOUT (budgeted for 844×390 landscape)

     ┌──────────────────────────────────────────────────────┐
     │ [unit frames]                            ( minimap ) │
     │                     world                            │
     │ [≡][bag][chat]            [abilities] [run] [centre] │
     └──────────────────────────────────────────────────────┘
   =========================================================================== */

/* Vitals: the existing #unit-frames (player + target) is already exactly the
   compact HP/level/portrait readout a phone wants. Shrink, don't rebuild. */
html.ym-mobile #unit-frames {
    position: absolute !important;
    top: calc(6px + var(--ym-sat)) !important;
    left: calc(6px + var(--ym-sal)) !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    max-width: calc(100vw - 150px - var(--ym-sal) - var(--ym-sar));
    z-index: var(--ym-hud-z);
}
html.ym-mobile #unit-frames .unit-frame {
    transform: scale(0.82);
    transform-origin: top left;
    max-width: 168px;
}

/* Minimap: a small dial top-right. Tapping it opens the zone map sheet. */
html.ym-mobile #minimap-container {
    position: absolute !important;
    top: calc(6px + var(--ym-sat)) !important;
    right: calc(6px + var(--ym-sar)) !important;
    left: auto !important;
    width: 96px !important;
    height: 96px !important;
    padding: 0 !important;
    z-index: var(--ym-hud-z);
}
html.ym-mobile #minimap-canvas { width: 94px !important; height: 94px !important; }
html.ym-mobile #minimap-compass,
html.ym-mobile #minimap-region,
html.ym-mobile #minimap-nearby-count,
html.ym-mobile #minimap-toggle-btn { display: none !important; }

/* Rail: reduced to the menu button + the two hot buttons, laid out along the
   bottom-left edge. Everything else lives in #ym-drawer. */
html.ym-mobile #left-rail {
    position: absolute !important;
    left: calc(6px + var(--ym-sal)) !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(6px + var(--ym-sab)) !important;
    flex-direction: row !important;
    gap: 6px !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: var(--ym-hud-z);
}
html.ym-mobile .rail-btn {
    width: 52px !important;
    min-height: 48px !important;
    padding: 5px 0 3px !important;
}
html.ym-mobile .rail-btn-label { font-size: 9px !important; letter-spacing: 0.06em !important; }
html.ym-mobile .rail-btn-icon img { width: 20px; height: 20px; }
html.ym-mobile .ym-tile-glyph {
    font-size: 19px;
    line-height: 20px;
    display: block;
    text-align: center;
}

/* Abilities + run + recentre, bottom-right. */
html.ym-mobile #ability-bar {
    position: absolute !important;
    left: auto !important;
    right: calc(112px + var(--ym-sar)) !important;
    bottom: calc(6px + var(--ym-sab)) !important;
    transform: none !important;
    gap: 6px !important;
    z-index: var(--ym-hud-z);
}
html.ym-mobile .ability-btn { width: 48px !important; height: 48px !important; }
html.ym-mobile .ability-glyph { line-height: 48px !important; }
html.ym-mobile #ability-cast {
    bottom: calc(62px + var(--ym-sab)) !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: 150px !important;
}
html.ym-mobile #run-orb {
    top: auto !important;
    left: auto !important;
    right: calc(58px + var(--ym-sar)) !important;
    bottom: calc(6px + var(--ym-sab)) !important;
    width: 48px !important;
    height: 48px !important;
    z-index: var(--ym-hud-z);
}
/* Recentre-camera button (created by game-input.js alongside drag-to-pan). */
html.ym-mobile #ym-recentre-btn {
    position: absolute;
    right: calc(6px + var(--ym-sar));
    bottom: calc(6px + var(--ym-sab));
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(200, 160, 80, 0.45);
    border-radius: 50%;
    background: rgba(14, 22, 8, 0.78);
    color: #d8cba4;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    z-index: var(--ym-hud-z);
    opacity: 0.35;
    transition: opacity 140ms ease-out;
}
/* Only earns its keep once the camera has actually been dragged off-centre. */
html.ym-mobile body.ym-panned #ym-recentre-btn { opacity: 1; }

/* Keep the world's middle clear: these are decorative or desktop-only. */
/* Centre the sub-zone banner: its desktop anchoring put it under the minimap,
   which on a phone is exactly where the minimap now is. */
html.ym-mobile #subzone-label {
    top: calc(8px + var(--ym-sat)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    font-size: 12px !important;
    max-width: 52vw;
    text-align: center;
}
html.ym-mobile #party-hud { transform: scale(0.85); transform-origin: top left; }
html.ym-mobile #self-effects-bar { transform: scale(0.85); transform-origin: bottom left; }

/* ===========================================================================
   PART 1b — THE DRAWER
   =========================================================================== */

html.ym-mobile #ym-drawer {
    position: absolute;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(8px + var(--ym-sat)) calc(8px + var(--ym-sar))
             calc(62px + var(--ym-sab)) calc(8px + var(--ym-sal));
    background: rgba(8, 6, 4, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 140ms ease-out;
}
html.ym-mobile #ym-drawer.open { opacity: 1; }

html.ym-mobile #ym-drawer-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-width: 100%;
    max-height: 100%;
    /* overflow-x must be stated: setting only overflow-y makes the other axis
       compute to `auto` too, which drew a horizontal scrollbar across the
       bottom of the grid. */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 10px;
    background: linear-gradient(180deg, rgba(38, 32, 20, 0.96), rgba(20, 17, 11, 0.96));
    border: 1px solid rgba(200, 160, 80, 0.45);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}
html.ym-mobile #ym-drawer-grid .rail-btn { width: 100% !important; }

/* Portrait is narrower: fewer columns, more rows. */
@media (orientation: portrait) {
    html.ym-mobile #ym-drawer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================================================
   PART 1c — BOTTOM SHEETS

   One treatment for every panel, instead of the per-modal !important width
   overrides this file used to carry. Each panel keeps its OWN existing
   show/hide mechanism — this only changes where it sits and how big it is.
   =========================================================================== */

html.ym-mobile #ui-panel,
html.ym-mobile #left-hud-panel,
html.ym-mobile #chat-window,
html.ym-mobile #crafting-panel,
html.ym-mobile #tanning-panel,
html.ym-mobile #trade-panel,
html.ym-mobile #player-trade-panel,
html.ym-mobile #bank-panel,
html.ym-mobile #auction-panel,
html.ym-mobile #courier-panel,
html.ym-mobile #letter-composer-panel,
html.ym-mobile #mail-dispatch-panel,
html.ym-mobile #party-panel,
html.ym-mobile #band-panel,
html.ym-mobile #compendium-panel,
html.ym-mobile #leaderboard-panel,
html.ym-mobile #economy-panel,
html.ym-mobile #dialogue-panel,
html.ym-mobile #controls-panel,
html.ym-mobile #bug-report-panel,
html.ym-mobile #map-panel,
html.ym-mobile #zone-map-panel,
html.ym-mobile .equipment-select-modal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 76vh !important;
    max-height: calc(var(--ym-vh) * 0.76) !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 10px 10px 0 0 !important;
    padding-bottom: calc(8px + var(--ym-sab)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* !important is load-bearing: without it #chat-window kept its HUD-layer
       z-index of 25 and the rail buttons drew straight over its input row. */
    z-index: var(--z-modal, 2000) !important;
}

/* theme.css widens the left HUD to a fixed 520px when the Skills section is
   active, with !important and a `:has()` selector that outspecifies the sheet
   block above ((1,3,0) vs (1,1,1)) — so it has to be beaten explicitly, not
   just come later in the cascade. Both spellings of the section class are
   covered because theme.css and layout.css disagree about which one it is. */
html.ym-mobile #left-hud-panel:has(.hud-section[data-section="skills"].active),
html.ym-mobile #left-hud-panel:has(.left-hud-section[data-section="skills"].active) {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* News and Server Status live inside #sidebar, which is hidden wholesale on
   mobile — so their drawer buttons toggled a body class that changed nothing
   visible. Let their own panel through (and only theirs) as a sheet. */
html.ym-mobile body.latest-updates-open #sidebar,
html.ym-mobile body.server-status-open #sidebar,
html.ym-mobile body.latest-updates-open #below-viewport-row,
html.ym-mobile body.server-status-open #below-viewport-row {
    display: contents !important;
}
html.ym-mobile body.latest-updates-open #rw-activity-panel,
html.ym-mobile body.server-status-open #rw-activity-panel,
html.ym-mobile body.latest-updates-open #server-status-panel,
html.ym-mobile body.server-status-open #latest-updates-panel {
    display: none !important;
}
html.ym-mobile body.latest-updates-open #latest-updates-panel,
html.ym-mobile body.server-status-open #server-status-panel {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(var(--ym-vh) * 0.7) !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    padding-bottom: calc(8px + var(--ym-sab)) !important;
    overflow-y: auto !important;
    z-index: var(--z-modal, 2000);
}

/* Chat is the one panel that is VISIBLE by default on desktop — it is a
   permanent sidebar there. On a phone it has to start off-screen and slide up
   on demand, driven by the body.mobile-chat-open toggle game-input.js already
   owns. (transform is `none !important` in the block above, so it has to be
   re-enabled here explicitly.) */
html.ym-mobile #chat-window {
    transform: translateY(100%) !important;
    transition: transform 180ms ease-out;
    will-change: transform;
}
html.ym-mobile body.mobile-chat-open #chat-window {
    transform: translateY(0) !important;
}

/* `hidden` must win over the display rules below it. The UA stylesheet's
   [hidden]{display:none} is a single-element selector and loses to
   `html.ym-mobile #ym-drawer{display:flex}` — which left the drawer an
   invisible, full-screen, tap-swallowing sheet over the whole game. */
html.ym-mobile [hidden] { display: none !important; }

/* A grab bar at the top edge, so swipe-to-dismiss is discoverable. */
html.ym-mobile #ui-panel::before,
html.ym-mobile #left-hud-panel::before,
html.ym-mobile #chat-window::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: 5px auto 3px;
    border-radius: 2px;
    background: rgba(200, 160, 80, 0.5);
    flex: 0 0 auto;
}

/* The soft keyboard would otherwise hide the chat input under itself.
   body.ym-keyboard is set by mobile.js from the visualViewport delta. */
html.ym-mobile body.ym-keyboard #chat-window {
    max-height: calc(var(--ym-vh) - 12px) !important;
}

/* Modal wrappers are the backdrop; tapping one dismisses the sheet it holds. */
html.ym-mobile [role="dialog"] {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Wide inner layouts collapse to one column inside a sheet. This is where the
   old per-modal overrides now live — once, by shape rather than by id. */
html.ym-mobile .craft-group-grid,
html.ym-mobile .economy-grid { grid-template-columns: 1fr !important; }
html.ym-mobile #leaderboard-tabs { grid-template-columns: repeat(3, 1fr) !important; }
html.ym-mobile .craft-tabs,
html.ym-mobile #courier-tabs { flex-wrap: wrap !important; gap: 6px !important; }
html.ym-mobile .craft-tab-btn,
html.ym-mobile .courier-tab-btn {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
}
html.ym-mobile .courier-card-top { flex-direction: column !important; align-items: flex-start !important; }
html.ym-mobile .courier-card-actions,
html.ym-mobile #letter-composer-actions,
html.ym-mobile #mail-dispatch-actions { flex-direction: column !important; }
html.ym-mobile .courier-card-actions button,
html.ym-mobile #letter-composer-actions button,
html.ym-mobile #courier-compose-btn,
html.ym-mobile #mail-dispatch-actions button { width: 100% !important; }
html.ym-mobile .mail-dispatch-attachment-row { flex-wrap: wrap !important; }
html.ym-mobile .mail-dispatch-attachment-row select { min-width: 60% !important; }
html.ym-mobile #crafting-items {
    display: block !important;
    padding: 8px !important;
    overflow-x: hidden !important;
}
/* Chat's children are sized for a tall desktop sidebar: header + tabs +
   channel strip + a fixed-height log + input row came to 270px inside a 231px
   sheet, and the overflow spilled off the TOP — the tab row was sliced in half
   and the input row sat under the rail. Re-flow it as a proper column where
   the log is the only part that flexes, and the sheet itself never scrolls. */
html.ym-mobile #chat-window {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
/* The "Chat & Social" title bar and its collapse caret are redundant here —
   the sheet has a grab handle, a backdrop and a Chat button that opened it.
   Reclaiming those 28px is what lets the input row fit above the bottom edge
   on a 304px-tall browser viewport. */
html.ym-mobile #chat-header { display: none !important; }
html.ym-mobile #chat-tabs,
html.ym-mobile #chat-channel-strip,
html.ym-mobile #chat-input-row { flex: 0 0 auto !important; }
html.ym-mobile #chat-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;   /* without this a flex child refuses to shrink */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
html.ym-mobile .chat-tab-content.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
html.ym-mobile #chat-box {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 48px !important;
    overflow-y: auto !important;
}
html.ym-mobile #chat-input { min-height: 44px; font-size: 16px; /* <16px makes iOS zoom the page */ }
html.ym-mobile input,
html.ym-mobile textarea,
html.ym-mobile select { font-size: 16px !important; }

/* The inventory grid is the one place a phone really wants bigger cells. */
html.ym-mobile #ui-panel .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important;
}
html.ym-mobile .inventory-slot { min-height: 52px !important; }

/* Close buttons must be thumb-sized, not mouse-sized. */
html.ym-mobile .btn-panel-close,
html.ym-mobile .unit-frame-close {
    min-width: 40px !important;
    min-height: 40px !important;
}

/* ===========================================================================
   PART 1d — LOGIN / CHARACTER SELECT / ROTATE HINT
   =========================================================================== */

html.ym-mobile #login-screen {
    padding: calc(8px + var(--ym-sat)) 8px calc(8px + var(--ym-sab));
    overflow-y: auto;
}
html.ym-mobile #login-title-block { margin-bottom: 8px !important; }
html.ym-mobile #login-game-title { font-size: 26px !important; line-height: 1.1 !important; }
html.ym-mobile #login-subtitle { font-size: 12px !important; }
html.ym-mobile #login-form {
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
    padding: 14px 16px 16px !important;
}
html.ym-mobile #login-form h2 { font-size: 15px !important; margin-bottom: 12px !important; }
html.ym-mobile #login-form input { padding: 10px !important; margin-bottom: 9px !important; }
html.ym-mobile #login-form button { padding: 11px !important; min-height: 44px; }

/* In landscape the title and the form compete for ~300px of height — put them
   side by side instead of stacked. */
@media (orientation: landscape) {
    html.ym-mobile #login-screen {
        flex-direction: row !important;
        /* `safe` centre: when the content is TALLER than the box, overflow
           spills toward the start edge where scrolling can still reach it.
           Plain `center` overflows both ends equally and clips the top of the
           form — the login/register tabs — with no way to scroll to them. */
        align-items: safe center !important;
        justify-content: safe center !important;
        gap: 18px !important;
        overflow-y: auto !important;
    }
    html.ym-mobile #login-title-block {
        margin-bottom: 0 !important;
        flex: 0 1 auto;
        min-width: 0;
    }
    html.ym-mobile #login-form { flex: 0 0 auto; }
    html.ym-mobile #character-select-panel { width: min(580px, 74vw) !important; }
}

/* A landscape phone is only ~300-390 px tall; the form has to earn every one
   of them or it overflows before the guest button is reachable. */
@media (orientation: landscape) and (max-height: 450px) {
    html.ym-mobile #login-game-title { font-size: 21px !important; }
    html.ym-mobile #login-subtitle { font-size: 11px !important; }
    html.ym-mobile #login-form { padding: 9px 12px 11px !important; width: min(320px, 46vw) !important; }
    html.ym-mobile #login-form input { padding: 7px 9px !important; margin-bottom: 6px !important; }
    html.ym-mobile #login-form button { padding: 8px !important; min-height: 40px; }
    html.ym-mobile .login-tab { padding: 7px 4px !important; }
    html.ym-mobile #guest-disclaimer { font-size: 10px !important; margin: 5px 0 0 !important; }
}

html.ym-mobile #ym-rotate-hint {
    position: absolute;
    left: 50%;
    bottom: calc(66px + var(--ym-sab));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 88vw;
    padding: 9px 10px 9px 13px;
    background: rgba(18, 15, 9, 0.93);
    border: 1px solid rgba(200, 160, 80, 0.5);
    color: #e0d2ac;
    font-family: Georgia, serif;
    font-size: 13px;
    line-height: 1.3;
    z-index: 950;
}
html.ym-mobile #ym-rotate-hint .ym-rotate-glyph { font-size: 19px; }
html.ym-mobile #ym-rotate-dismiss {
    min-width: 34px;
    min-height: 34px;
    background: none;
    border: 0;
    color: #b8a87c;
    font-size: 15px;
    cursor: pointer;
}

/* ===========================================================================
   PART 2 — NARROWED DESKTOP WINDOW (≤1024px, no touch)

   The fluid single-column fallback only. A phone never reaches these rules —
   it matched html.ym-mobile above and got the real client instead.
   =========================================================================== */

@media (max-width: 1024px) {

    html:not(.ym-mobile) header { padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
    html:not(.ym-mobile) .logo { font-size: 19px !important; }
    html:not(.ym-mobile) nav {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        padding-bottom: 2px;
    }
    html:not(.ym-mobile) nav a { margin: 0 10px !important; font-size: 16px !important; white-space: nowrap; }

    html:not(.ym-mobile) #main-content { padding: 8px 10px !important; gap: 8px !important; }
    html:not(.ym-mobile) #status { padding: 5px 12px !important; font-size: 16px !important; margin-bottom: 6px !important; }

    html:not(.ym-mobile) #game-content-wrapper { flex-direction: column !important; gap: 8px !important; }
    html:not(.ym-mobile) #game-and-sidebar { flex-direction: column !important; gap: 0 !important; width: 100% !important; }
    html:not(.ym-mobile) #game-area { flex-direction: column !important; gap: 6px !important; align-items: stretch !important; }

    html:not(.ym-mobile) #sidebar > .sidebar-panel { display: none !important; }
    html:not(.ym-mobile) #sidebar { display: contents !important; }

    html:not(.ym-mobile) #game-container { width: 100% !important; }
    html:not(.ym-mobile) #canvas-wrap {
        width: 100% !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        max-width: 100vw !important;
    }
    html:not(.ym-mobile) #game-canvas { display: block; max-width: 100%; }

    html:not(.ym-mobile) #left-rail {
        left: 6px !important;
        top: 54px !important;
        gap: 6px !important;
        overflow-y: auto !important;
        max-height: calc(100% - 60px) !important;
        scrollbar-width: none !important;
    }
    html:not(.ym-mobile) #left-rail::-webkit-scrollbar { display: none !important; }

    html:not(.ym-mobile) #left-hud-panel {
        left: 56px !important;
        top: 46px !important;
        width: calc(100vw - 62px) !important;
        max-width: calc(100vw - 62px) !important;
        max-height: 70vh !important;
    }
    html:not(.ym-mobile) #ui-panel {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: auto !important;
        max-height: 60vh !important;
    }
    html:not(.ym-mobile) #minimap-container {
        width: 140px !important;
        height: 152px !important;
        padding: 4px !important;
        top: 6px !important;
        right: 6px !important;
    }
    html:not(.ym-mobile) #minimap-canvas { width: 120px !important; height: 120px !important; }

    html:not(.ym-mobile) #trade-panel { width: 100vw !important; max-width: 100vw !important; }
    html:not(.ym-mobile) #courier-panel,
    html:not(.ym-mobile) #letter-composer-panel,
    html:not(.ym-mobile) #mail-dispatch-panel,
    html:not(.ym-mobile) #leaderboard-panel,
    html:not(.ym-mobile) #economy-panel,
    html:not(.ym-mobile) .equipment-select-modal { width: 96vw !important; max-width: 96vw !important; }
    html:not(.ym-mobile) #crafting-panel { width: calc(100% - 2px) !important; max-height: 72vh !important; }
    html:not(.ym-mobile) .craft-group-grid { grid-template-columns: 1fr !important; }
    html:not(.ym-mobile) #controls-panel { width: 92vw !important; }

    html:not(.ym-mobile) #login-form { width: 80% !important; max-width: 320px !important; }
    html:not(.ym-mobile) #action-progress { width: 90vw !important; }
    html:not(.ym-mobile) footer { padding: 10px 14px !important; font-size: 16px !important; }
}

@media (max-width: 480px) {
    html:not(.ym-mobile) nav { display: none !important; }
    html:not(.ym-mobile) header { justify-content: center !important; }
    html:not(.ym-mobile) #leaderboard-tabs { grid-template-columns: repeat(3, 1fr) !important; }
    html:not(.ym-mobile) .economy-grid { grid-template-columns: 1fr !important; }
}