/* Forest Frontier v0.10.0-rc37 — centralized viewport and density system. */

:root{
  --ff-viewport-width:100vw;
  --ff-viewport-height:100dvh;
  --ff-layout-height:100dvh;
  --ff-density-factor:1;
  --ff-topbar-rendered-height:74px;
  --ff-bottom-nav-rendered-height:64px;
  --ff-battle-dock-rendered-height:190px;

  --ff-app-inline:12px;
  --ff-app-top:10px;
  --ff-app-bottom:18px;
  --ff-panel-padding:13px;
  --ff-panel-radius:12px;
  --ff-section-gap:10px;
  --ff-card-gap:10px;
  --ff-card-padding:12px;
  --ff-control-height:44px;
  --ff-compact-control-height:38px;
  --ff-tab-height:40px;
  --ff-nav-height:64px;
  --ff-nav-button-height:48px;
  --ff-topbar-padding-y:10px;
  --ff-topbar-padding-x:12px;
  --ff-topbar-gap:10px;
  --ff-topbar-margin:10px;
  --ff-brand-size:39px;
  --ff-brand-title-size:30px;
  --ff-heading-size:24px;
  --ff-modal-padding:14px;
  --ff-modal-card-padding:20px;
  --ff-battle-card-min:250px;
  --ff-battle-scene-min:84px;
  --ff-battle-action-height:62px;
  --ff-battle-stage-gap:7px;
  --ff-battle-dock-gap:8px;
}

html[data-ui-density="compact"]{
  --ff-app-inline:8px;
  --ff-app-top:7px;
  --ff-app-bottom:12px;
  --ff-panel-padding:10px;
  --ff-panel-radius:10px;
  --ff-section-gap:7px;
  --ff-card-gap:7px;
  --ff-card-padding:10px;
  --ff-control-height:42px;
  --ff-compact-control-height:36px;
  --ff-tab-height:38px;
  --ff-nav-height:58px;
  --ff-nav-button-height:44px;
  --ff-topbar-padding-y:7px;
  --ff-topbar-padding-x:9px;
  --ff-topbar-gap:7px;
  --ff-topbar-margin:7px;
  --ff-brand-size:34px;
  --ff-brand-title-size:25px;
  --ff-heading-size:21px;
  --ff-modal-padding:10px;
  --ff-modal-card-padding:16px;
  --ff-battle-card-min:214px;
  --ff-battle-scene-min:70px;
  --ff-battle-action-height:54px;
  --ff-battle-stage-gap:5px;
  --ff-battle-dock-gap:6px;
}

html[data-ui-density="ultra"]{
  --ff-app-inline:5px;
  --ff-app-top:4px;
  --ff-app-bottom:8px;
  --ff-panel-padding:8px;
  --ff-panel-radius:9px;
  --ff-section-gap:5px;
  --ff-card-gap:5px;
  --ff-card-padding:8px;
  --ff-control-height:40px;
  --ff-compact-control-height:34px;
  --ff-tab-height:36px;
  --ff-nav-height:54px;
  --ff-nav-button-height:42px;
  --ff-topbar-padding-y:5px;
  --ff-topbar-padding-x:7px;
  --ff-topbar-gap:5px;
  --ff-topbar-margin:5px;
  --ff-brand-size:30px;
  --ff-brand-title-size:21px;
  --ff-heading-size:19px;
  --ff-modal-padding:7px;
  --ff-modal-card-padding:13px;
  --ff-battle-card-min:168px;
  --ff-battle-scene-min:54px;
  --ff-battle-action-height:48px;
  --ff-battle-stage-gap:4px;
  --ff-battle-dock-gap:4px;
}

html,body{min-height:var(--ff-viewport-height,100dvh)}
body.theme-ashen{
  --ui-control-height:var(--ff-tab-height);
  --ui-bottom-nav-height:var(--ff-nav-height);
  min-height:var(--ff-viewport-height,100dvh);
  padding-bottom:calc(var(--ff-nav-height) + env(safe-area-inset-bottom));
}

body.theme-ashen .app{
  width:min(calc(100% - (var(--ff-app-inline) * 2)),1180px)!important;
  min-height:calc(var(--ff-viewport-height) - var(--ff-nav-height) - env(safe-area-inset-bottom));
  padding-top:var(--ff-app-top)!important;
  padding-bottom:calc(var(--ff-nav-height) + env(safe-area-inset-bottom) + var(--ff-app-bottom))!important;
}

body.theme-ashen .topbar{
  gap:var(--ff-topbar-gap)!important;
  margin-bottom:var(--ff-topbar-margin)!important;
  padding:var(--ff-topbar-padding-y) var(--ff-topbar-padding-x)!important;
  border-radius:var(--ff-panel-radius)!important;
}
body.theme-ashen .title-row{gap:clamp(6px,var(--ff-topbar-gap),10px)!important}
body.theme-ashen .brand-rune{
  width:var(--ff-brand-size)!important;
  height:var(--ff-brand-size)!important;
  flex-basis:var(--ff-brand-size)!important;
  background-size:calc(var(--ff-brand-size) - 7px)!important;
}
body.theme-ashen .brand-copy h1{
  font-size:var(--ff-brand-title-size)!important;
  line-height:1!important;
}
body.theme-ashen .world-tagline{font-size:clamp(7px,calc(var(--ff-brand-title-size) * .31),9px)!important}
body.theme-ashen .top-actions{gap:clamp(4px,var(--ff-section-gap),8px)!important}
body.theme-ashen .top-summary{gap:clamp(3px,calc(var(--ff-section-gap) - 2px),7px)!important}
body.theme-ashen .top-summary>span{
  min-height:calc(var(--ff-control-height) - 12px)!important;
  padding:clamp(4px,var(--ff-topbar-padding-y),7px) clamp(6px,var(--ff-topbar-padding-x),10px)!important;
  font-size:clamp(9px,calc(var(--ff-brand-title-size) * .4),12px)!important;
}
body.theme-ashen .client-refresh-button{
  min-height:var(--ff-compact-control-height)!important;
  padding:5px clamp(7px,var(--ff-topbar-padding-x),12px)!important;
}

body.theme-ashen .panel,
body.theme-ashen .screen-panel{
  border-radius:var(--ff-panel-radius)!important;
}
body.theme-ashen .screen-panel{padding:var(--ff-panel-padding)!important}
body.theme-ashen .screen.active>.screen-panel{
  min-height:max(0px,calc(var(--ff-viewport-height) - var(--ff-topbar-rendered-height) - var(--ff-bottom-nav-rendered-height) - var(--ff-app-top) - var(--ff-topbar-margin) - var(--ff-app-bottom)));
}
body.theme-ashen .content-heading{gap:var(--ff-section-gap)!important;margin-bottom:var(--ff-section-gap)!important}
body.theme-ashen .content-heading>span{font-size:var(--ff-heading-size)!important}
body.theme-ashen .section-tabs,
body.theme-ashen .hero-tabs,
body.theme-ashen .path-tabs,
body.theme-ashen .inventory-mode-tabs{
  gap:max(3px,calc(var(--ff-section-gap) - 4px))!important;
  margin-bottom:calc(var(--ff-section-gap) + 1px)!important;
  padding:max(3px,calc(var(--ff-section-gap) - 4px))!important;
  border-radius:var(--ff-panel-radius)!important;
}
body.theme-ashen .section-tab,
body.theme-ashen .hero-tab,
body.theme-ashen .path-tab-button,
body.theme-ashen .inventory-mode-tab{
  min-height:var(--ff-tab-height)!important;
  padding:6px 5px!important;
}
body.theme-ashen .primary,
body.theme-ashen .secondary,
body.theme-ashen .danger,
body.theme-ashen .menu-button,
body.theme-ashen .equip-button{
  min-height:var(--ff-control-height);
}
body.theme-ashen .compact-button{min-height:var(--ff-compact-control-height)!important}

body.theme-ashen .bottom-nav{
  min-height:var(--ff-nav-height)!important;
  padding:4px max(var(--ff-app-inline),env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(var(--ff-app-inline),env(safe-area-inset-right))!important;
  gap:max(2px,calc(var(--ff-section-gap) - 5px))!important;
}
body.theme-ashen .nav-button{
  min-height:var(--ff-nav-button-height)!important;
  padding:3px 2px!important;
  gap:1px!important;
}
body.theme-ashen .nav-glyph{min-height:18px!important;font-size:clamp(16px,calc(var(--ff-nav-button-height) * .42),20px)!important;line-height:18px!important}

/* All dialog-like surfaces use the real visual viewport and remain centered. */
body.theme-ashen .drawer{height:var(--ff-viewport-height)!important}
body.theme-ashen .inventory-inline-detail,
body.theme-ashen .inventory-detail-card{
  max-height:calc(var(--ff-viewport-height) - var(--ff-bottom-nav-rendered-height) - 18px)!important;
}

/* Shared density pass for all main screens. */
body.theme-ashen .map-chapters-stack,
body.theme-ashen .map-list,
body.theme-ashen .activity-map-list,
body.theme-ashen .quest-list,
body.theme-ashen .ruins-floor-list,
body.theme-ashen .inventory-workspace,
body.theme-ashen .inventory-list-pane,
body.theme-ashen .inventory-equipment-panel,
body.theme-ashen .hero-dashboard,
body.theme-ashen .hero-profile-shell,
body.theme-ashen .hero-data-column,
body.theme-ashen .hero-visual-column{
  gap:var(--ff-card-gap)!important;
}
body.theme-ashen .map-card,
body.theme-ashen .activity-map-card,
body.theme-ashen .ruins-floor-card,
body.theme-ashen .hero-settings-section,
body.theme-ashen .hero-overview-card{
  padding:var(--ff-card-padding)!important;
}
body.theme-ashen .map-section-head,
body.theme-ashen .map-chapter-summary,
body.theme-ashen .inventory-section-heading,
body.theme-ashen .hero-primary-stats-head,
body.theme-ashen .hero-combat-details-head,
body.theme-ashen .ruins-screen-head{
  gap:var(--ff-section-gap)!important;
}

/* Battle consumes the available height first; secondary chrome compresses before actions. */
body.theme-ashen.screen-battle-active .battle-screen{
  padding-bottom:calc(var(--ff-battle-dock-rendered-height) + var(--ff-battle-dock-gap))!important;
}
body.theme-ashen.screen-battle-active .battle-panel{
  min-height:max(0px,calc(var(--ff-viewport-height) - var(--ff-topbar-rendered-height) - var(--ff-bottom-nav-rendered-height) - var(--ff-battle-dock-rendered-height) - var(--ff-app-top) - var(--ff-topbar-margin) - var(--ff-battle-dock-gap)))!important;
  padding:var(--ff-panel-padding)!important;
}
body.theme-ashen .ruins-run-notice,
body.theme-ashen .tutorial-notice,
body.theme-ashen .trial-battle-banner{
  margin:var(--ff-section-gap) 0!important;
  padding:calc(var(--ff-card-padding) - 3px) var(--ff-card-padding)!important;
}
body.theme-ashen .battle-stage{
  gap:var(--ff-battle-stage-gap)!important;
  margin:var(--ff-section-gap) 0!important;
  padding:max(3px,calc(var(--ff-section-gap) - 3px))!important;
}
body.theme-ashen .battle-stage .combatant{
  min-height:var(--ff-battle-card-min)!important;
  padding:var(--ff-card-padding)!important;
}
body.theme-ashen .combat-scene .figure{min-height:var(--ff-battle-scene-min)!important}
body.theme-ashen .hero-combat-scene .figure,
body.theme-ashen .enemy-combat-scene .figure{max-height:calc(var(--ff-battle-card-min) * .47)!important}
body.theme-ashen .combat-mechanics-status{
  gap:max(4px,calc(var(--ff-section-gap) - 3px))!important;
  margin:var(--ff-section-gap) 0!important;
  padding:calc(var(--ff-card-padding) - 3px) var(--ff-card-padding)!important;
}
body.theme-ashen .battle-action-row button,
body.theme-ashen .battle-main-action{
  height:var(--ff-battle-action-height)!important;
  min-height:var(--ff-battle-action-height)!important;
  max-height:none!important;
}

/* Map / Path */
body.theme-ashen .map-card,
body.theme-ashen .activity-map-card{min-height:var(--ff-control-height)!important}
body.theme-ashen .chapter-atmosphere-card{margin-bottom:var(--ff-section-gap)!important;padding:var(--ff-card-padding)!important}
body.theme-ashen .map-chapter-section{margin-bottom:var(--ff-section-gap)!important}

/* Ruins */
body.theme-ashen .ruins-screen-panel{padding-bottom:calc(var(--ff-bottom-nav-rendered-height) + var(--ff-app-bottom))!important}
body.theme-ashen .ruins-floor-card{gap:var(--ff-section-gap)!important}
body.theme-ashen .ruins-route-map{max-height:calc(var(--ff-viewport-height) - var(--ff-topbar-rendered-height) - var(--ff-bottom-nav-rendered-height) - 120px)}

/* Patrol */

/* Inventory and runes */
body.theme-ashen .inventory-category-toolbar,
body.theme-ashen .inventory-section-heading,
body.theme-ashen .inventory-sale-toolbar{gap:var(--ff-section-gap)!important}
body.theme-ashen .inventory-icon-grid{gap:max(4px,calc(var(--ff-card-gap) - 1px))!important}
body.theme-ashen .inventory-icon-cell{min-height:calc(var(--ff-control-height) + 18px)!important}
body.theme-ashen .rune-vault-panel,
body.theme-ashen .inventory-equipment-panel{padding:var(--ff-card-padding)!important}

/* Shop */

/* Hero */

/* Compact phones: keep the header in one row and spend height on gameplay/content. */
@media(max-width:479px){
  html[data-ui-density="compact"] body.theme-ashen .top-actions,
  html[data-ui-density="ultra"] body.theme-ashen .top-actions{
    grid-template-columns:auto auto!important;
    grid-template-areas:"summary utilities"!important;
    align-items:center!important;
    justify-items:end!important;
  }
  html[data-ui-density="compact"] body.theme-ashen .top-utility-actions,
  html[data-ui-density="ultra"] body.theme-ashen .top-utility-actions{gap:4px!important}
  html[data-ui-density="compact"] body.theme-ashen .developer-toggle-label,
  html[data-ui-density="ultra"] body.theme-ashen .developer-toggle-label{display:none!important}
  html[data-ui-density="compact"] body.theme-ashen .version,
  html[data-ui-density="ultra"] body.theme-ashen .version{display:none!important}
  html[data-ui-density="ultra"] body.theme-ashen .world-tagline,
  html[data-ui-density="ultra"] body.theme-ashen .client-refresh-label{display:none!important}
  html[data-ui-density="ultra"] body.theme-ashen .client-refresh-button{width:32px!important;padding:4px!important}
  html[data-ui-density="ultra"] body.theme-ashen .developer-toggle{transform:scale(.82)!important;transform-origin:right center!important}
  html[data-ui-density="ultra"] body.theme-ashen #topGoldUnit{display:none!important}

  html[data-ui-density="compact"] body.theme-ashen .content-heading>small,
  html[data-ui-density="ultra"] body.theme-ashen .content-heading>small{font-size:9px!important}
  html[data-ui-density="ultra"] body.theme-ashen .content-heading{align-items:center!important}
  html[data-ui-density="ultra"] body.theme-ashen .content-heading>small{max-width:44%;line-height:1.1!important}
  html[data-ui-density="compact"] body.theme-ashen .enemy-level,
  html[data-ui-density="compact"] body.theme-ashen .enemy-tier,
  html[data-ui-density="ultra"] body.theme-ashen .enemy-level,
  html[data-ui-density="ultra"] body.theme-ashen .enemy-tier{min-height:19px!important;padding:2px 4px!important;font-size:9px!important}
  html[data-ui-density="compact"] body.theme-ashen .enemy-trait,
  html[data-ui-density="ultra"] body.theme-ashen .enemy-trait{margin-bottom:4px!important;padding:4px 5px!important;font-size:8.5px!important}
  html[data-ui-density="ultra"] body.theme-ashen .battle-atmosphere{margin:4px 0!important;padding:5px 7px 5px 20px!important;font-size:9px!important}
  html[data-ui-density="ultra"] body.theme-ashen .combat-mechanics-line,
  html[data-ui-density="ultra"] body.theme-ashen .crushing-charge-row{font-size:9px!important}

  html[data-ui-density="compact"] body.theme-ashen .map-card,
  html[data-ui-density="compact"] body.theme-ashen .activity-map-card{padding:9px!important}
  html[data-ui-density="ultra"] body.theme-ashen .map-card,
  html[data-ui-density="ultra"] body.theme-ashen .activity-map-card{padding:7px!important;min-height:42px!important}
  html[data-ui-density="ultra"] body.theme-ashen .map-card small,
  html[data-ui-density="ultra"] body.theme-ashen .activity-map-card small{margin-top:2px!important;font-size:9px!important}

  html[data-ui-density="compact"] body.theme-ashen .inventory-icon-cell{min-height:58px!important}
  html[data-ui-density="ultra"] body.theme-ashen .inventory-icon-cell{min-height:52px!important}
  html[data-ui-density="ultra"] body.theme-ashen .inventory-category-button{min-height:34px!important;padding:5px!important}
}

/* Short landscape devices use scrolling rather than unsafe global scaling. */
html[data-ui-orientation="landscape"][data-ui-density="compact"] body.theme-ashen .screen.active>.screen-panel,
html[data-ui-orientation="landscape"][data-ui-density="ultra"] body.theme-ashen .screen.active>.screen-panel{min-height:0!important}
html[data-ui-orientation="landscape"][data-ui-density="ultra"] body.theme-ashen .topbar{position:relative}

/* The virtual keyboard must not trigger a second layout squeeze. */
html[data-ui-keyboard="open"] body.theme-ashen .bottom-nav{transform:translateY(110%);pointer-events:none}
html[data-ui-keyboard="open"] body.theme-ashen .app{padding-bottom:var(--ff-app-bottom)!important}

@media(prefers-reduced-motion:reduce){
  body.theme-ashen .bottom-nav{transition:none!important}
}