@layer responsive {
  @media (max-width: 1050px) {
    .workspace { max-width: 900px; }
    .adventure-layout { grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.8fr); }
  }

  @media (max-width: 900px) {
    .topbar { align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 10px; padding-top: 10px; }
    .topbar-actions { flex: 1 1 auto; gap: 8px; width: auto; }
    .settings-popover { max-height: calc(100dvh - var(--topbar-height) - 20px); }
    .workspace { display: block; margin-top: 16px; padding-left: 20px; padding-right: 20px; }
    .adventure-layout { grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr); }
    .quest-list, .inventory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .records-grid { grid-template-columns: minmax(0, 1fr); }
    .records-grid > .records-memories { grid-column: auto; }
    .command-row { grid-template-columns: minmax(0, 1fr) auto; }
    .command-submit { min-height: 48px; }
    .quick-action, .mini-button, .button, .view-filter { min-height: 44px; }
    .npc-card { align-items: flex-start; flex-direction: column; gap: 10px; }
    .npc-card > div:first-child { min-width: 0; width: 100%; }
    .npc-actions { flex-wrap: wrap; width: 100%; }
    .npc-actions .mini-button { flex: 1 1 auto; }
    .welcome-view { min-height: 460px; padding: 48px 32px; }
  }

  @media (max-width: 720px) {
    :root { --topbar-height: 58px; --bottom-nav-height: 66px; }
    .topbar { min-height: var(--topbar-height); padding-left: 12px; padding-right: 12px; }
    .brand small { display: none; }
    .brand strong { font-size: 15px; }
    .topbar-actions { flex: 0 0 auto; gap: 6px; }
    .topbar-button { min-height: 40px; padding-left: 10px; padding-right: 10px; }
    .settings-popover { right: -4px; }
    .status-banner { padding-left: 12px; padding-right: 12px; }
    .workspace { margin-top: 12px; padding-left: 12px; padding-right: 12px; }
    .tabs-active .app-shell { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 18px); }
    .view-navigation { align-items: stretch; background: rgba(11, 16, 32, 0.96); border: 0; border-top: 1px solid var(--border-strong); border-radius: 0; bottom: 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.28); display: grid; gap: 3px; grid-template-columns: repeat(5, minmax(0, 1fr)); left: 0; margin: 0; padding: 5px max(8px, calc((100vw - 760px) / 2)) max(5px, env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 20; backdrop-filter: blur(18px); }
    .view-navigation .desktop-view-tab { display: none; }
    .view-navigation .mobile-more-toggle { display: flex; }
    .view-navigation .view-tab { border-radius: 9px; flex-direction: column; gap: 3px; min-height: 54px; padding: 5px 2px; }
    .view-navigation .view-tab span[aria-hidden="true"] { font-size: 17px; }
    .view-navigation .view-tab span:not([aria-hidden="true"]) { font-size: 11px; }
    .view-more-menu { bottom: calc(100% + 9px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38); top: auto; }
    .keyboard-open .view-navigation { display: none; }
    .keyboard-open.tabs-active .app-shell { padding-bottom: 8px; }
    .game-summary { border-radius: 15px; padding: 8px 10px; top: calc(var(--topbar-height) + 3px); }
    .summary-heading { align-items: center; gap: 8px; }
    .summary-title-row h1 { font-size: 15px; max-width: min(38vw, 260px); }
    .game-summary .game-subtitle { font-size: 10px; max-width: 48vw; }
    .summary-controls { align-items: center; flex-direction: row; gap: 6px; }
    .summary-state { min-width: 0; padding: 5px 8px; }
    .summary-state strong { font-size: 10px; }
    .summary-action { font-size: 11px; min-height: 44px; padding: 5px 9px; }
    .summary-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .summary-health, .summary-stat { min-height: 42px; padding: 7px 5px; }
    .summary-health .stat-label, .summary-stat > span { font-size: 10px; }
    .summary-stat > strong { font-size: 10px; }
    .view-panel { border-radius: 15px; padding: 16px; }
    .view-heading { align-items: flex-start; }
    .view-heading h2 { font-size: 25px; }
    .adventure-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
    .adventure-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adventure-context .ground-item-panel { grid-column: 1 / -1; }
    .adventure-context .npc-card { align-items: stretch; }
    .scene-copy { font-size: 15px; line-height: 1.75; }
    .latest-turn { padding: 14px; }
    .narration { font-size: 16px; line-height: 1.75; }
    .quick-actions { gap: 7px; }
    .quick-action { min-height: 44px; padding: 8px 11px; }
    .more-actions > summary { min-height: 44px; }
    .command-box { margin-top: 14px; padding: 13px; }
    .command-row { grid-template-columns: minmax(0, 1fr); }
    .command-row textarea { min-height: 72px; }
    .command-submit { min-height: 48px; width: 100%; }
    .command-hint { font-size: 11px; line-height: 1.65; }
    .character-sheet { grid-template-columns: minmax(0, 1fr); }
    .character-loadout-group { grid-column: auto; }
    .character-loadout-grid { grid-template-columns: minmax(0, 1fr); }
    .character-loadout-grid > .equipment-list + .equipment-list { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
    .quest-list, .inventory-list { grid-template-columns: minmax(0, 1fr); }
    .inventory-toolbar { grid-template-columns: minmax(0, 1fr); }
    .inventory-toolbar .view-filters { justify-content: flex-start; }
    .inventory-item { align-items: center; flex-direction: row; gap: 8px; }
    .inventory-item .npc-actions { align-items: center; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 48%; width: auto; }
    .inventory-item .npc-actions .mini-button { flex: 0 0 auto; min-height: 42px; padding: 6px 8px; }
    .records-grid { gap: 10px; }
    .event-list, .turn-list, .memory-list { grid-template-columns: minmax(0, 1fr); max-height: none; }
    .codex-grid { grid-template-columns: minmax(0, 1fr); }
    .codex-list { grid-template-columns: minmax(0, 1fr); }
    .codex-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .codex-card-summary { align-items: flex-start; }
    .recent-entity-row { align-items: stretch; flex-direction: column; }
    .recent-entity-row .mini-button { align-self: flex-start; }
    .welcome-view { min-height: 430px; padding: 44px 24px; }
    .welcome-view h1 { font-size: clamp(40px, 11vw, 54px); }
    .feature-row { margin-top: 28px; }
  }

  @media (max-width: 520px) {
    .workspace { padding-left: 10px; padding-right: 10px; }
    .view-panel { padding: 13px; }
    .summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-health:nth-child(2) { border-left: 1px solid rgba(157, 174, 207, 0.13); }
    .summary-stat:nth-child(3) { border-left: 0; }
    .summary-health, .summary-stat { min-height: 38px; }
    .attribute-grid { gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .skill-value { min-width: 0; }
    .skill-value .growth-meter { width: 42px; }
    .adventure-context { grid-template-columns: minmax(0, 1fr); }
    .adventure-context .ground-item-panel { grid-column: auto; }
    .inventory-item { align-items: flex-start; flex-direction: column; }
    .inventory-item .npc-actions { justify-content: flex-start; max-width: none; width: 100%; }
    .view-filters { gap: 5px; }
    .view-filter { flex: 0 1 auto; }
    .item-equipped { display: inline; }
    .archive-drawer { max-height: 92dvh; }
    .archive-drawer .sidebar { border-radius: 18px 18px 0 0; max-height: 92dvh; }
  }

  @media (max-width: 420px) {
    .topbar { padding-left: 10px; padding-right: 10px; }
    .brand { gap: 6px; }
    .brand-mark { font-size: 19px; }
    .topbar-button { font-size: 11px; min-height: 40px; padding-left: 8px; padding-right: 8px; }
    .summary-heading { gap: 5px; }
    .summary-title-row { gap: 5px; }
    .summary-title-row h1 { font-size: 14px; max-width: 34vw; }
    .version-pill { font-size: 10px; padding: 4px 6px; }
    .summary-controls { gap: 4px; }
    .summary-state { padding-left: 6px; padding-right: 6px; }
    .summary-action { min-height: 38px; padding-left: 7px; padding-right: 7px; }
    .view-heading h2 { font-size: 23px; }
    .combat-heading { align-items: flex-start; }
    .combat-defense { white-space: normal; }
    .quest-card-footer { align-items: flex-start; flex-direction: column; }
  }

  @media (max-width: 390px) {
    .workspace { padding-left: 8px; padding-right: 8px; }
    .game-summary { padding: 7px 8px; }
    .summary-title-row h1 { max-width: 31vw; }
    .summary-state strong { font-size: 11px; }
    .summary-action { font-size: 10px; }
    .view-navigation { gap: 2px; padding-left: 5px; padding-right: 5px; }
    .view-navigation .view-tab span:not([aria-hidden="true"]) { font-size: 10px; }
    .view-panel { padding: 12px; }
  }

  @media (max-width: 360px) {
    .game-summary .game-subtitle { max-width: 42vw; }
    .summary-title-row h1 { max-width: 28vw; }
    .summary-stats { column-gap: 0; row-gap: 2px; }
    .view-navigation .view-tab { min-height: 52px; }
    .view-navigation .view-tab span[aria-hidden="true"] { font-size: 15px; }
    .topbar-actions { gap: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }
}