/* The world remains the same size. Only its controls and overlays adapt. */
#view, #view3d, #minimap { touch-action: none; }
#mobile-controls { display: none; }
body.mobile-ui { --safe-l: max(8px, env(safe-area-inset-left)); --safe-r: max(8px, env(safe-area-inset-right)); --safe-t: env(safe-area-inset-top, 0px); --safe-b: max(6px, env(safe-area-inset-bottom)); --mobile-top: calc(54px + var(--safe-t)); --mobile-bottom: calc(50px + var(--safe-b)); }
.mobile-ui #topbar, .mobile-ui #left, .mobile-ui #right, .mobile-ui #bottombar, .mobile-ui #minimap, .mobile-ui #hintbar, .mobile-ui #modal-root, .mobile-ui #tutor, .mobile-ui #hud3d { zoom: 1; }
.mobile-ui button, .mobile-ui .btn, .mobile-ui .tab, .mobile-ui .camp { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.mobile-ui [role="button"] { touch-action: manipulation; }
.mobile-ui button:focus-visible, .mobile-ui a:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.mobile-ui #topbar { height: var(--mobile-top); padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); gap: 6px; }
.mobile-ui #logo, .mobile-ui #dayring { display: none; }
.mobile-ui #datebox { min-width: 94px; flex: 0 0 94px; border: 0; padding: 0; }
.mobile-ui #datebox .d1 { font-size: 15px; }
.mobile-ui #datebox .d2 { font-size: 11px; max-width: 94px; }
.mobile-ui #resbar { overflow-x: auto; scrollbar-width: thin; min-width: 0; touch-action: pan-x; gap: 8px; padding: 3px; }
.mobile-ui #resbar .res { flex: 0 0 auto; min-width: 58px; height: 44px; padding: 3px; gap: 3px; }
.mobile-ui .res .v { font-size: 14px; }
.mobile-ui .res .r { display: block; font-size: 11px; }
.mobile-ui #speed { flex-shrink: 0; gap: 2px; }
.mobile-ui .tbtn { min-width: 44px; height: 44px; padding: 3px 7px; font-size: 14px; }
.mobile-ui #speed [data-act="music"], .mobile-ui #speed [data-act="speed"][data-arg="2"], .mobile-ui #speed [data-act="speed"][data-arg="5"] { display: none; }
.mobile-ui #speed [data-act="mobileSpeed"] { font-size: 14px; }
.mobile-ui .tbtn.turn { max-width: 104px; white-space: normal; }
.mobile-ui #ticker, .mobile-ui #ltoggle, .mobile-ui #rtoggle { display: none; }
.mobile-ui.game-started #mobile-controls { display: flex; position: fixed; z-index: 28; left: var(--safe-l); right: var(--safe-r); bottom: var(--safe-b); justify-content: space-between; gap: 8px; pointer-events: none; }
.mobile-panels, .mobile-camera { display: flex; gap: 5px; pointer-events: auto; }
#mobile-controls .btn { min-width: 44px; font-size: 13px; padding: 6px 10px; box-shadow: 2px 2px 0 var(--ink); }
#mobile-controls .btn[aria-expanded="true"] { color: var(--paper); background: var(--red); }
.mobile-ui #left, .mobile-ui #right, .mobile-ui #bottombar, .mobile-ui #minimap { display: none; }
.mobile-ui.mobile-commune #left { display: flex; }
.mobile-ui.mobile-plans #right { display: flex; }
.mobile-ui #left, .mobile-ui #right { top: calc(var(--mobile-top) + 8px); bottom: calc(var(--mobile-bottom) + 4px); height: auto; width: min(360px, calc(calc(var(--game-vw, 1vw) * 100) - var(--safe-l) - var(--safe-r) - 64px)); z-index: 24; margin: 0; }
.mobile-ui #left { left: var(--safe-l); }
.mobile-ui #right { right: var(--safe-r); overflow-y: auto; padding: 4px; background: var(--ink); }
.mobile-ui #right > * { flex-shrink: 0; }
.mobile-ui #left .phead { padding: 6px 8px; gap: 5px; }
.mobile-ui #left .phead { flex-shrink: 0; }
.mobile-ui #left .phead h2 { font-size: 19px; }
.mobile-ui #left .phead .sub { font-size: 11px; }
.mobile-ui #left .phead .walk3d { display: none; }
.mobile-ui .x { min-width: 44px; flex-shrink: 0; }
.mobile-ui .tabs { flex-shrink: 0; overflow-x: auto; }
.mobile-ui .tab { min-width: 64px; padding: 4px; font-size: 12px; }
.mobile-ui .tab img { width: 20px; height: 20px; }
.mobile-ui .pbody { min-height: 0; overscroll-behavior: contain; }
.mobile-ui .cats button { padding: 5px 8px; font-size: 13px; }
.mobile-ui .seg button { min-width: 44px; }
.mobile-ui .camp > span { display: block; }
.mobile-ui .camp { padding: 5px 2px; }
.camp-name { display: none; }
.mobile-ui .camp .camp-short { display: none; }
.mobile-ui .camp .camp-name { display: block; white-space: normal; font-size: 12px; }
.mobile-ui .camps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mobile-ui.mobile-actions #bottombar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); left: var(--safe-l); bottom: calc(var(--mobile-bottom) + 6px); transform: none; width: min(440px, calc(calc(var(--game-vw, 1vw) * 100) - 28px)); max-height: calc(calc(var(--game-vh, 1vh) * 100) - var(--mobile-top) - var(--mobile-bottom) - 20px); overflow-y: auto; z-index: 24; }
.mobile-ui #bottombar .bbtn { width: 100%; height: 62px; font-size: 12px; letter-spacing: 0; }
.mobile-ui #bottombar .key { display: none; }
.mobile-ui #bottombar .badge { right: 0; top: 0; }
.mobile-ui.mobile-map #minimap { display: block; --mmw: 192px; --mmh: 134px; right: var(--safe-r); bottom: calc(var(--mobile-bottom) + 6px); }
.mobile-ui #hintbar { top: calc(var(--mobile-top) + 8px); left: 50%; width: min(570px, calc(calc(var(--game-vw, 1vw) * 100) - var(--safe-l) - var(--safe-r) - 12px)); max-width: none; padding: 5px 8px; gap: 8px; }
.mobile-ui #hintbar > div { flex: 1; }
.mobile-ui #hintbar .small { font-size: 12px; }
.mobile-ui #hintbar button { flex-shrink: 0; }
.mobile-ui #toasts { top: calc(var(--mobile-top) + 8px); max-width: min(330px, calc(calc(var(--game-vw, 1vw) * 100) - 32px)); }
.mobile-ui #toasts.low { top: calc(var(--mobile-top) + 92px); }
.mobile-ui #toasts .toast:not(:last-child) { display: none; }
.mobile-ui #tooltip { display: none; }
.mobile-ui #modal-root { padding: calc(var(--safe-t) + 8px) var(--safe-r) var(--safe-b) var(--safe-l); }
.mobile-ui .modal, .mobile-ui .modal.wide, .mobile-ui .modal.narrow { width: min(960px, 100%); max-height: 100%; }
.mobile-ui .modal.narrow { width: min(680px, 100%); }
.mobile-ui .modal > .phead { flex-shrink: 0; padding: 6px 10px; }
.mobile-ui .modal > .phead h2 { font-size: 23px; }
.mobile-ui .modal .pbody { padding: 10px 12px; overflow: auto; }
.mobile-ui .modal .mfoot { flex-shrink: 0; flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
.mobile-ui .modal .row { flex-wrap: wrap; }
.mobile-ui .ttree { min-width: 760px; gap: 12px 18px; }
.mobile-ui .tqueue { flex-wrap: wrap; }
.mobile-ui .hall { flex-shrink: 0; }
/* The whole chamber scrolls, so hall artwork can never consume the voting area. */
.mobile-ui .modal:has(.hall) { display: block; overflow-y: auto; overscroll-behavior: contain; }
.mobile-ui .modal:has(.hall) > .phead { position: sticky; top: 0; z-index: 8; }
.mobile-ui .modal:has(.hall) .pbody { overflow: visible; }
.mobile-ui .hall canvas { height: 132px; }
.mobile-ui .hall .seats { overflow-x: auto; justify-content: flex-start; }
.mobile-ui .hall .seat { flex: 1 0 60px; }
.mobile-ui .hall .seat .pf { max-width: 48px; }
.mobile-ui .cgrid { grid-template-columns: 1fr; }
.mobile-ui .desktop-ui-scale { display: none; }
.mobile-ui #left #pbody::before { content: 'Swipe to scroll \00b7  Hold an item for details'; display: block; margin-bottom: 8px; font-size: 12px; color: var(--mute); }
.mobile-ui #title .tcard { margin: 0; width: 100%; max-height: calc(var(--game-vh, 1vh) * 100); overflow: auto; padding: 20px var(--safe-r) 20px var(--safe-l); }
.mobile-ui #title .ttl { font-size: clamp(32px, calc(var(--game-vw, 1vw) * 6), 54px); letter-spacing: 2px; }
.mobile-ui #title .tsub { margin: 8px 0 16px; font-size: 14px; letter-spacing: 3px; }
.mobile-ui #title .tbtns { flex-wrap: wrap; gap: 8px; }
.mobile-ui #title .btn { font-size: 16px; padding: 8px 16px; }
.mobile-ui #title .tlink { min-height: 44px; margin-top: 4px; }
.mobile-ui #title .foot { display: none; }
.mobile-ui #tutor { left: auto !important; right: var(--safe-r); top: auto !important; bottom: calc(var(--mobile-bottom) + 5px) !important; width: min(330px, calc(calc(var(--game-vw, 1vw) * 100) - 28px)) !important; max-height: calc(calc(var(--game-vh, 1vh) * 100) - var(--mobile-top) - var(--mobile-bottom) - 20px); overflow-y: auto; transform: none !important; padding: 8px; gap: 7px; }
.mobile-ui #tutor > img { width: 36px; height: 36px; }
.mobile-ui #tutor .story { font-size: 13px; line-height: 1.35; }
.mobile-ui #tutor .tt { font-size: 13px; letter-spacing: 0; }
.mobile-ui #tutor .row { flex-wrap: wrap; }
.mobile-ui.mobile-plans #tutor { right: auto; left: var(--safe-l) !important; }
.resource-details { line-height: 1.5; }
.resource-details .tt-row { display: flex; justify-content: space-between; gap: 16px; }
#touch-info[hidden] { display: none; }
#touch-info { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t, 0px) + 8px) var(--safe-r, 8px) var(--safe-b, 8px) var(--safe-l, 8px); background: rgba(8, 6, 14, .72); }
#touch-info > .paper { width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; }
#touch-info .phead, #touch-info .mfoot { flex-shrink: 0; }
#touch-info .pbody { font-size: 15px; line-height: 1.5; }
#touch-info .pbody b { color: var(--red3); }
#touch-info .story { font-size: 16px; }
#touch-info .tt-row { display: flex; justify-content: space-between; gap: 12px; }
.mobile-hold-hint { display: none; }
.mobile-ui .mobile-hold-hint { display: block; font-size: 13px; color: var(--mute); }
@media (max-width: 740px) {
  .mobile-ui #tutor { width: 250px !important; }
  .mobile-ui.mobile-actions #bottombar { width: 340px; }
}
.mobile-ui #hud3d { top: calc(var(--mobile-top) + 7px); width: calc(calc(var(--game-vw, 1vw) * 100) - var(--safe-l) - var(--safe-r)); gap: 4px; }
.mobile-ui #hud3d .h3btns { max-width: 100%; overflow-x: auto; }
.mobile-ui #hud3d .h3btns button { flex-shrink: 0; }
.mobile-ui #hud3d .h3title { display: none; }
.mobile-ui.in3d .mobile-camera { display: none; }
@media (prefers-reduced-motion: reduce) { .mobile-ui *, .mobile-ui *::before, .mobile-ui *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Native screen locking is preferred. This fallback also works in Safari and
   with the phone's system rotation lock enabled, without a blocking overlay. */
body.landscape-fallback { position: fixed; width: calc(var(--game-vw) * 100); height: calc(var(--game-vh) * 100); transform-origin: 0 0; transform: translateX(var(--screen-width)) rotate(90deg); overflow: hidden; }
body.landscape-fallback.mobile-ui { --safe-l: max(8px, env(safe-area-inset-top)); --safe-r: max(8px, env(safe-area-inset-bottom)); --safe-t: env(safe-area-inset-right, 0px); --safe-b: max(6px, env(safe-area-inset-left)); }