#game-root { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); height: var(--app-height, 100dvh); }
#gameCanvas { touch-action: none; -webkit-touch-callout: none; }
.mobile-panel-close { display: none; }
#mobile-play-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; border: 1px solid #b39255; border-radius: 12px; color: #f5e4c1; background: linear-gradient(140deg, #342719, #110e0a); box-shadow: 0 24px 80px #000b; }
#mobile-play-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
#mobile-play-dialog h2 { font-size: 24px; margin: 10px 0 16px; }
#mobile-play-dialog p { line-height: 1.7; font-size: 14px; }
#mobile-play-dialog .mobile-dialog-eyebrow { font-size: 12px; color: #c9aa70; }
.mobile-dialog-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.mobile-dialog-actions button, #mobile-fullscreen-button, #mobile-rotate-notice button, #mobile-aim-notice button, .mobile-panel-close { min-height: 44px; padding: 8px 12px; border: 1px solid #a78550; border-radius: 5px; background: #302415; color: #f9e5bf; font: inherit; touch-action: manipulation; }
#mobile-enter-fullscreen { background: #836133; }
#mobile-fullscreen-button { position: absolute; z-index: 100; top: calc(4px + var(--safe-top)); left: calc(6px + var(--safe-left)); font-size: 12px; }
#mobile-rotate-notice, #mobile-aim-notice { position: absolute; z-index: 105; left: 50%; top: calc(52px + var(--safe-top)); transform: translateX(-50%); max-width: calc(100% - 24px); width: max-content; border: 1px solid #a78550; border-radius: 6px; padding: 6px 8px; background: #21190feb; color: #f6dfb4; font-size: 12px; }
#mobile-rotate-notice:not([hidden]), #mobile-aim-notice:not([hidden]) { display: flex; align-items: center; gap: 8px; }
#mobile-aim-notice { top: auto; bottom: calc(var(--mobile-hud-height, 84px) + 10px); }
#mobile-rotate-notice button, #mobile-aim-notice button { font-size: 12px; flex-shrink: 0; }
.mobile-layout { --steam-widget-height: 0px; }
.mobile-layout { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(190, 151, 83, 0.18); }
.mobile-layout input, .mobile-layout textarea { -webkit-user-select: text; user-select: text; }
.mobile-action-description { white-space: pre-line; line-height: 1.5; padding: 8px; font-size: 13px; color: #f5dfa9; }
.mobile-layout #mercenary-menu { max-width: calc(100vw - 24px); max-height: calc(var(--app-height) - 24px); overflow-y: auto; }
#game-root.mobile-layout #steam-widget-wrap { display: none; }
.mobile-layout #char-select-screen { padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left)); bottom: 0; }
.mobile-layout .char-select-shell { max-height: calc(var(--app-height) - 16px - var(--safe-top) - var(--safe-bottom)); }
.mobile-layout #create-character-dialog { max-height: calc(var(--app-height) - 16px); }
.mobile-layout input, .mobile-layout select, .mobile-layout textarea { font-size: 16px; }
.mobile-layout button, .mobile-layout label, .mobile-layout .inv-item { touch-action: manipulation; }
.mobile-layout .menu-btn, .mobile-layout .slot-btn, .mobile-layout .field-input { min-height: 44px; }
.mobile-layout #game-ui-canvas { font-size: 13px; }
.mobile-layout #bottom-ui { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: var(--mobile-hud-height) !important; transform: none !important; grid-template-columns: 68px minmax(0, 1fr) 68px; padding: 3px max(6px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(6px, var(--safe-left)); gap: 6px; }
.mobile-layout .orb { width: 58px; height: 58px; }
.mobile-layout .orb-text { font-size: 11px; }
.mobile-layout .gargoyle { display: none; }
.mobile-layout #bottom-orb-left, .mobile-layout #bottom-orb-right { padding: 0; }
.mobile-layout .center-console { gap: 3px; min-width: 0; width: 100%; }
.mobile-layout .console-row.top { position: absolute; right: calc(92px + var(--safe-right)); top: calc(4px + var(--safe-top) - var(--app-height) + var(--mobile-hud-height)); gap: 5px; }
.mobile-layout .ui-btn { min-width: 54px; height: 44px; font-size: 12px; padding: 4px 6px; }
.mobile-layout #console-row-bottom { gap: 5px; width: 100%; justify-content: flex-start; overflow-x: auto; padding: 2px; }
.mobile-layout .hotkey-slot { min-width: 44px; width: 44px; height: 48px; flex: 0 0 44px; padding: 2px; }
.mobile-layout .hotkey-slot > span:not(.hotkey-icon-text) { font-size: 10px; bottom: 1px; right: 2px; }
.mobile-layout #interact-slot { min-width: 48px; }
.mobile-layout #exp-bar-wrap { left: max(8px, var(--safe-left)) !important; right: max(8px, var(--safe-right)) !important; bottom: var(--safe-bottom) !important; height: 5px !important; width: auto !important; transform: none !important; }
.mobile-layout #exp-bar-text { display: none; }
.mobile-layout #in-game-toolbar { top: calc(4px + var(--safe-top)) !important; right: calc(6px + var(--safe-right)) !important; left: auto !important; width: auto !important; transform: none !important; padding: 0; }
.mobile-layout #active-character { display: none; }
.mobile-layout .save-exit-btn { min-width: 80px; width: 80px; height: 44px; padding: 4px; font-size: 10px; }
.mobile-layout #top-ui-container { inset: calc(54px + var(--safe-top)) max(8px, var(--safe-right)) calc(var(--mobile-hud-height) + 8px) max(8px, var(--safe-left)) !important; height: auto !important; }
.mobile-layout #char-panel, .mobile-layout #inv-panel, .mobile-layout #skill-panel { inset: 0 !important; width: min(600px, 100%) !important; height: 100% !important; max-height: 100% !important; margin: 0 auto; transform: none !important; overflow: auto !important; overscroll-behavior: contain; touch-action: pan-y; padding: 12px; background: #15110afa; z-index: 50; }
.mobile-layout .top-ui-panel-inner { width: 100% !important; height: auto !important; max-height: none !important; transform: none !important; flex-shrink: 0; }
.mobile-layout .mobile-panel-close { display: block; position: sticky; top: 0; margin-left: auto; z-index: 6; flex-shrink: 0; }
.mobile-layout #quest-panel { left: calc(82px + var(--safe-left)) !important; top: calc(-50px - var(--safe-top)) !important; width: min(230px, 29vw) !important; height: 44px !important; padding: 4px !important; transform: none !important; overflow: hidden; border: 0; font-size: 11px; }
.mobile-layout #quest-panel-title, .mobile-layout #control-text, .mobile-layout #buff-text { display: none; }
.mobile-layout #quest-text { font-size: 11px; line-height: 1.3; margin: 0; }
.mobile-layout #enemy-status-panel { display: none !important; }
.mobile-layout .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); grid-auto-rows:56px; max-height:none; overflow:visible; flex-shrink:0; }
.mobile-layout #quest-panel.has-beginner-guide { display:block !important; width:min(310px,calc(100vw - 110px)) !important; height:auto !important; max-height:none; overflow:visible; background:#15110ae8; }
.mobile-layout #quest-panel.has-beginner-guide #town-beginner-guide { font-size:11px; }
.mobile-layout .inv-item { min-height: 52px; }
.mobile-layout .stat-btn { min-width: 44px; min-height: 44px; }
.mobile-layout #skill-panel { width:100% !important; flex-direction:column; overflow:hidden !important; touch-action:pan-x pan-y; }
.mobile-layout #skill-panel > .top-ui-panel-inner { flex:1; min-height:0; height:0 !important; }
.mobile-layout #inventory-action-menu { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(300px, calc(100vw - 32px)); max-height: calc(var(--app-height) - 24px); overflow-y: auto; z-index: 200; }
.mobile-layout .inventory-action-btn, .mobile-layout .tower-selection-enter-btn, .mobile-layout .tower-selection-close-btn { min-height: 44px; }
.mobile-layout .tower-selection-action-btn { min-height: 44px; height: auto; padding: 8px; }
.mobile-layout #item-tooltip { display: none !important; }
.mobile-layout .chat-panel { bottom: calc(var(--mobile-hud-height) + 5px); left: max(6px, var(--safe-left)); max-width: min(320px, 60vw); }
.mobile-layout .chat-toggle { min-height: 44px; min-width: 48px; }
.mobile-layout .chat-log { max-height: 54px; font-size: 11px; }
.mobile-layout .chat-input { width: min(240px, 50vw); font-size: 16px; }
.mobile-layout .tower-selection-overlay, .mobile-layout .mercenary-menu-overlay { padding: max(8px, var(--safe-top)) max(8px, var(--safe-right)) max(8px, var(--safe-bottom)) max(8px, var(--safe-left)); }
.mobile-layout .tower-selection-panel, .mobile-layout .mercenary-menu-panel { max-height: calc(var(--app-height) - 16px); overflow-y: auto; }
.mobile-layout .tower-selection-panel { overflow: hidden; }
.mobile-layout .tower-selection-header { flex-shrink: 0; }
.mobile-layout .tower-selection-list { min-height: 0; grid-auto-rows: max-content; }
.mobile-layout .tower-selection-card { min-width: 0; min-height: 0; }
.mobile-layout .tower-selection-card-scene { flex: 0 0 120px; }
.mobile-layout .tower-selection-card-body { flex: 0 0 auto; min-height: min-content; }
.mobile-layout #notification { max-width: 80%; font-size: 16px; }
@media (orientation: landscape) and (max-height: 540px) {
  .mobile-layout .tower-selection-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 8px; }
  .mobile-layout .tower-selection-card { min-height: 0; }
  .mobile-layout .tower-selection-card-scene { height: 64px; flex: 0 0 64px; }
  .mobile-layout .tower-selection-card-body { padding: 8px; gap: 5px; }
  .mobile-layout .tower-selection-card-name { font-size: 17px; }
  .mobile-layout .tower-selection-card-theme { display: none; }
  .mobile-layout .tower-selection-card-actions { flex-direction: row; gap: 6px; }
  .mobile-layout .tower-selection-action-btn { flex: 1; font-size: 12px; }
  .mobile-layout .tower-selection-population { margin: 0; }
  .mobile-layout .intro-note { display: none; }
  .mobile-layout .char-select-layout .slot-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-layout .slot-item.empty { min-height: 130px; }
  .mobile-layout .slot-portrait { height: 105px; }
  .mobile-layout .char-select-shell { padding: 12px; }
  .mobile-layout .char-select-header h1 { font-size: 23px; }
  .mobile-layout .char-select-header p { font-size: 11px; }
  .mobile-layout #create-character-dialog { width: min(740px, calc(100vw - 24px)); }
  .mobile-layout #create-character-form { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 18px; padding: 14px; }
  .mobile-layout .create-dialog-heading { grid-column: 1 / -1; margin: 0; }
  .mobile-layout #create-character-form > .field-label, .mobile-layout #create-character-form > .field-input { grid-column: 1; }
  .mobile-layout .appearance-fieldset { grid-column: 2; grid-row: 2 / 7; }
  .mobile-layout .appearance-option canvas { height: 68px; }
  .mobile-layout .appearance-option { padding: 4px; }
  .mobile-layout .appearance-hint { display: none; }
  .mobile-layout #create-character-btn { grid-column: 1; }
  .mobile-layout #create-character-status { grid-column: 1 / -1; margin: 0; }
}
@media (orientation: portrait) {
  .mobile-layout #bottom-ui { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 4px; }
  .mobile-layout .orb { width: 44px; height: 44px; }
  .mobile-layout #console-row-bottom { justify-content: flex-start; }
  .mobile-layout #quest-panel { display: none !important; }
  .mobile-layout .console-row.top { right: calc(90px + var(--safe-right)); gap: 3px; }
  .mobile-layout .ui-btn { min-width: 45px; font-size: 11px; }
}