/* Forest Frontier v0.9.3 — readability audit and responsive item-card redesign.
   Principle: compactness comes from layout, gaps and information hierarchy,
   not from shrinking meaningful text below a readable mobile scale. */

:root {
  --ff-text-caption: 10px;
  --ff-text-small: 12px;
  --ff-text-base: 14px;
  --ff-text-button: 14px;
  --ff-text-item-title: 17px;
  --ff-icon-item-small: 48px;
  --ff-icon-item-medium: 58px;
  --ff-icon-item-large: 76px;
}

body.theme-ashen { font-size: var(--ff-text-base); }
body.theme-ashen .section-label,
body.theme-ashen .world-tagline,
body.theme-ashen .version,
body.theme-ashen .reward-item-kicker,
body.theme-ashen .item-detail-rarity { font-size: var(--ff-text-caption); }
body.theme-ashen .bar-label,
body.theme-ashen .combat-hp,
body.theme-ashen .enemy-stats,
body.theme-ashen .item-card-meta,
body.theme-ashen .reward-stat-line,
body.theme-ashen .item-detail-meta,
body.theme-ashen .base-note,
body.theme-ashen .battle-note { font-size: var(--ff-text-small); }
body.theme-ashen .primary,
body.theme-ashen .secondary,
body.theme-ashen .danger,
body.theme-ashen .equip-button,
body.theme-ashen .menu-button { font-size: var(--ff-text-button); }

/* Unified item icon scale. */
body.theme-ashen .item-icon-sm { width: var(--ff-icon-item-small); height: var(--ff-icon-item-small); }
body.theme-ashen .item-icon-md { width: var(--ff-icon-item-medium); height: var(--ff-icon-item-medium); }
body.theme-ashen .item-icon-lg { width: var(--ff-icon-item-large); height: var(--ff-icon-item-large); }
body.theme-ashen .item-card-name { font-size: var(--ff-text-item-title); line-height: 1.16; }
body.theme-ashen .reward-stat-comparison { font-size: 11px; line-height: 1.25; }
body.theme-ashen .item-summary-hint { font-size: 11px; }
body.theme-ashen .reward-resource small,
body.theme-ashen .reward-resource em,
body.theme-ashen .rune-stack-count small,
body.theme-ashen .rune-stack-copy small,
body.theme-ashen .rune-fuse-button small,
body.theme-ashen .ruins-summary-drop-row small,
body.theme-ashen .ruins-summary-group h4,
body.theme-ashen .enemy-role,
body.theme-ashen .boss-progress-visual strong,
body.theme-ashen .damage-float::before,
body.theme-ashen .path-tab-badge,
body.theme-ashen .nav-badge { font-size: 10px !important; }

/* Navigation remains readable on all phones. */
body.theme-ashen .nav-button { font-size: 11px; line-height: 1.15; }
body.theme-ashen .nav-button .nav-glyph,
body.theme-ashen .nav-button > span { font-size: 22px; line-height: 24px; }
body.theme-ashen .path-tab-button,
body.theme-ashen .hero-tab,
body.theme-ashen .rune-vault-tab { font-size: 11px; }

/* Inventory: readable content with actions below the card body.
   This removes the narrow 92px action column that caused wrapping and tall cards. */
body.theme-ashen .inventory-grid { gap: 8px; }
body.theme-ashen .inventory-grid .item { padding: 10px; }
body.theme-ashen .inventory-grid .item-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
body.theme-ashen .inventory-grid .item-card-layout {
  grid-template-columns: var(--ff-icon-item-small) minmax(0, 1fr);
  gap: 10px;
}
body.theme-ashen .inventory-grid .item-card-layout > .item-icon {
  width: var(--ff-icon-item-small);
  height: var(--ff-icon-item-small);
}
body.theme-ashen .inventory-grid .item-card-name { font-size: var(--ff-text-item-title); }
body.theme-ashen .inventory-grid .item-card-meta { font-size: 12px; }
body.theme-ashen .inventory-grid .inventory-item-stats { margin-top: 5px; gap: 2px; }
body.theme-ashen .inventory-grid .inventory-item-stats .reward-stat-line { font-size: 12px; line-height: 1.2; }
body.theme-ashen .inventory-grid .inventory-item-stats .reward-stat-comparison { font-size: 11px; }
body.theme-ashen .inventory-grid .item-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  width: 100% !important;
  gap: 8px;
}
body.theme-ashen .inventory-grid .quick-equip-button,
body.theme-ashen .inventory-grid .quick-sell-button {
  min-height: 40px;
  padding: 7px 9px;
  font-size: 13px;
  line-height: 1.15;
}

/* Shop and forge cards use a stable icon column and readable metadata. */

/* Rune archive: tiny counters were unreadable. */
body.theme-ashen .rune-family-effect { font-size: 12px; }
body.theme-ashen .rune-family-tier-counts { font-size: 10px; line-height: 1.25; }
body.theme-ashen .rune-family-tier-counts strong { font-size: 11px; }
body.theme-ashen .rune-family-upgrade span { font-size: 11px; }
body.theme-ashen .rune-family-upgrade small,
body.theme-ashen .rune-family-max,
body.theme-ashen .rune-family-empty { font-size: 10px; }
body.theme-ashen .rune-codex-card.compact strong { font-size: 12px; }
body.theme-ashen .rune-codex-card.compact small { font-size: 10px; }

/* Ruins: node labels remain compact, but not microscopic. */
body.theme-ashen .ruins-route-node { min-height: 72px; height: 72px; padding: 7px 6px; }
body.theme-ashen .ruins-route-node .ruins-node-glyph { font-size: 20px; }
body.theme-ashen .ruins-route-node .ruins-node-copy strong { font-size: 10px; line-height: 1.14; }
body.theme-ashen .ruins-route-node .ruins-node-copy small { font-size: 10px; line-height: 1.1; }

/* Combat: incoming damage after a successful full defense must not be covered
   by the block/parry confirmation badge. */
body.theme-ashen .damage-float.guarded {
  z-index: 32;
  top: 27%;
  color: #ff756b !important;
  font-size: 32px !important;
  text-shadow: 0 2px 9px #000, 0 0 15px #ff3b30, 0 0 28px rgba(184,31,24,.72) !important;
  animation: guarded-damage-v093 1.45s cubic-bezier(.16,.72,.2,1) both !important;
}
body.theme-ashen .damage-float.guarded::before { font-size: 10px; }
body.theme-ashen .combatant.defense-parry::after,
body.theme-ashen .combatant.defense-block::after { top: 70%; font-size: 10px; }
@keyframes guarded-damage-v093 {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.75); }
  18% { opacity: 1; transform: translate(-50%, -3px) scale(1.12); }
  72% { opacity: 1; transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -43px) scale(.94); }
}

/* Phone layout: preserve the type scale; reduce padding and restructure cards. */
@media (max-width: 520px) {
  :root {
    --ff-text-base: 14px;
    --ff-text-item-title: 16px;
    --ff-icon-item-small: 48px;
    --ff-icon-item-medium: 54px;
    --ff-icon-item-large: 72px;
  }
  body.theme-ashen .panel { padding: 11px; }
  body.theme-ashen .title-row h1 { font-size: 26px; line-height: .98; }
  body.theme-ashen .world-tagline { font-size: 10px; }
  body.theme-ashen .top-summary .hero-quick,
  body.theme-ashen .top-summary .gold,
  body.theme-ashen .top-shards { font-size: 12px; }
  body.theme-ashen .section-label { font-size: 10px; }
  body.theme-ashen h2 { font-size: 22px; }
  body.theme-ashen .combatant-name { font-size: 16px; }
  body.theme-ashen .combat-hp,
  body.theme-ashen .enemy-stats { font-size: 11px; }
  body.theme-ashen .battle-meter-panel .attack-meter-labels,
  body.theme-ashen .battle-meter-panel .attack-meter-labels b { font-size: 10px; }
  body.theme-ashen .heavy-sequence-state { font-size: 10px; }
  body.theme-ashen #attackButton small { font-size: 10px; }

  body.theme-ashen.screen-inventory-active .screen-panel { padding: 10px; }
  body.theme-ashen.screen-inventory-active .inventory-head { margin-bottom: 8px; }
  body.theme-ashen.screen-inventory-active .inventory-head h2 { font-size: 22px; }
  body.theme-ashen.screen-inventory-active .inventory-grid .item { padding: 9px; }
  body.theme-ashen.screen-inventory-active .inventory-grid .item-card-layout {
    grid-template-columns: var(--ff-icon-item-small) minmax(0, 1fr);
    gap: 9px;
  }
  body.theme-ashen.screen-inventory-active .inventory-grid .item-card-name { font-size: 16px; }
  body.theme-ashen.screen-inventory-active .inventory-grid .item-card-meta { font-size: 12px; }
  body.theme-ashen.screen-inventory-active .inventory-grid .inventory-item-stats .reward-stat-line { font-size: 12px; }
  body.theme-ashen.screen-inventory-active .inventory-grid .inventory-item-stats .reward-stat-comparison { font-size: 11px; }

  body.theme-ashen .path-tab-button,
body.theme-ashen .hero-tab,
body.theme-ashen .rune-vault-tab { font-size: 11px !important; letter-spacing: 0; }
}

/* Short phones: replace the over-compressed absolute equipment board with a
   readable four-row grid. It still fits one screen without 6–8px labels. */

/* Very narrow phones: spacing may shrink, text and icons do not. */
@media (max-width: 360px) {
  body.theme-ashen .app { width: calc(100% - 4px); }
  body.theme-ashen .topbar { padding-inline: 8px; }
  body.theme-ashen .title-row h1 { font-size: 24px; }
  body.theme-ashen .brand-rune { width: 36px; height: 36px; }
  body.theme-ashen .path-tabs,
body.theme-ashen .hero-tabs { gap: 3px !important; }
  body.theme-ashen .path-tab-button,
body.theme-ashen .hero-tab { padding-inline: 2px !important; }
  body.theme-ashen .inventory-grid .item-quick-actions { gap: 6px; }
  body.theme-ashen .inventory-grid .quick-equip-button,
  body.theme-ashen .inventory-grid .quick-sell-button { padding-inline: 5px; font-size: 12px; }
  body.theme-ashen .ruins-route-node { padding-inline: 4px; }
}

@media (min-width: 700px) {
  :root {
    --ff-text-base: 15px;
    --ff-text-small: 13px;
    --ff-text-item-title: 18px;
    --ff-icon-item-small: 52px;
    --ff-icon-item-medium: 62px;
    --ff-icon-item-large: 82px;
  }
  body.theme-ashen .nav-button { font-size: 12px; }
  body.theme-ashen .path-tab-button,
body.theme-ashen .hero-tab,
body.theme-ashen .rune-vault-tab { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-ashen .damage-float.guarded { animation: none !important; opacity: 1 !important; transform: translate(-50%, -18px) !important; }
}