@layer interface {
  :where(#game-world) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1320px;
    margin-inline: auto;
  }
  :where(#game-world) > .middle-rail {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .identity-dialog {
    box-sizing: border-box;
    min-width: 0;
    width: min(580px, calc(100vw - 24px));
    max-height: 85dvh;
    overflow: auto;
    padding: 18px;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--line);
  }
  .identity-dialog::backdrop {
    background: var(--overlay);
  }
  .dialog-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .dialog-bar h2 {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.125rem;
    margin: 0;
  }
  .dialog-bar button,
  #identity-open {
    min-height: 44px;
    padding: 8px 16px;
    color: var(--primary-text);
    background: var(--primary-bg);
    border: 1px solid var(--line);
    cursor: pointer;
  }
  .identity-dialog > .left-rail {
    display: grid;
    gap: 16px;
    position: static;
    width: auto;
  }
  .settings-body {
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    width: min(350px, calc(100vw - 24px));
    max-height: 75dvh;
    overflow: auto;
    gap: 14px;
  }
  .settings-body section {
    min-width: 0;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--chrome-line);
    padding-top: 10px;
  }
  .settings-body h3 {
    font-size: 0.875rem;
    color: var(--brand-gold);
    margin: 0;
  }
  .settings-body p {
    font-size: 0.75rem;
    line-height: 1.7;
    margin: 0;
    color: var(--chrome-text);
  }
  .settings-body section > button {
    width: 100%;
    min-height: 44px;
    text-align: left;
    margin: 0;
    padding: 10px;
    font: inherit;
  }
  .settings-body fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    min-inline-size: 0;
    margin: 0;
    border: 1px solid var(--chrome-line);
    padding: 10px;
    font-size: 0.8125rem;
  }
  .settings-body label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #mobile-status:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 8px 14px;
    align-items: center;
  }
  #identity-open {
    margin-left: auto;
  }
  .field-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
  }
  .field-toolbar {
    display: flex;
    grid-column: 1/-1;
    flex-wrap: wrap;
  }
  .field-toolbar .field-quick-actions {
    display: block;
    margin: 0;
  }
  .field-quick-actions .action-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    min-height: 0;
    box-shadow: none;
  }
  .field-quick-actions h3 {
    display: none;
  }
  .field-quick-actions .cost-chip {
    margin: 0;
  }
  .field-quick-actions button {
    min-height: 44px;
    padding: 8px 18px;
    margin: 0;
  }
  .field-shell :where(#field-map) {
    grid-column: 1;
    grid-row: 2;
  }
  .field-sidebar {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  .field-sidebar .recovery-box {
    margin: 0;
    padding: 14px;
    border-width: 0 0 1px;
  }
  .field-sidebar .recovery-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .field-sidebar .recovery-options {
    flex-direction: column;
  }
  .field-sidebar .recovery-options > button {
    flex: none;
    width: 100%;
  }
  .field-shell :where(#field-encounter) {
    margin: 0;
    padding: 14px;
    min-height: 180px;
    max-height: 620px;
    overflow: auto;
    background: var(--surface);
  }
  .field-shell :where(#field-encounter) .field-object {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .field-object strong {
    font-size: 1rem;
  }
  .field-object p {
    font-size: 0.875rem;
    line-height: 1.8;
  }
  .field-object button {
    min-height: 44px;
    width: 100%;
  }
  .field-object .field-action-state {
    font-size: 0.8125rem;
    color: var(--muted);
    margin: 0;
  }
  .field-shell .field-inspector,
  .field-shell .field-atlas-fold {
    grid-column: 1/-1;
  }
  .field-shell .field-dpad {
    grid-column: 1/-1;
  }
  .field-shell .field-inspector {
    display: flex;
    flex-wrap: wrap;
  }
  @media (max-width: 1100px) {
    .field-shell {
      grid-template-columns: minmax(0, 1fr);
    }
    .field-toolbar { grid-row: 1; }
    .field-shell > .field-sense { grid-column: 1; grid-row: 2; }
    .field-shell > .field-walk-status { grid-column: 1; grid-row: 3; }
    .field-shell > .field-dpad { grid-row: 5; }
    .field-shell > .field-inspector { grid-row: 6; }
    .field-shell > .field-atlas-fold { grid-row: 8; }
    .field-sidebar {
      grid-column: 1;
      grid-row: 7;
    }
    .field-shell :where(#field-encounter) {
      min-height: 0;
      max-height: none;
    }
    .field-shell :where(#field-map) {
      grid-column: 1;
      grid-row: 4;
    }
    .field-shell :where(#field-encounter) .field-object {
      margin: 0;
      padding: 8px 0;
    }
    .field-toolbar .field-quick-actions {
      margin-left: auto;
    }
  }
  @media (max-width: 480px) {
    #mobile-status:not([hidden]) {
      gap: 4px 12px;
      font-size: 0.75rem;
    }
    #mobile-status b {
      font-size: 0.875rem;
    }
    #identity-open {
      padding: 6px 10px;
      min-height: 44px;
    }
    .field-toolbar {
      padding: 8px;
    }
    .field-quick-actions .cost-chip {
      display: none;
    }
    .field-toolbar > div {
      gap: 6px;
    }
  }
  .settings-body #reset-game {
    color: var(--chrome-danger);
    border-color: var(--chrome-danger-line);
  }

  /* Compact pixel status: the icons replace visible labels; names remain available to assistive tech. */
  #mobile-status:not([hidden]) {
    column-gap: clamp(8px, 2vw, 18px);
    row-gap: 4px;
  }
  #mobile-status .status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
  }
  #mobile-status .status-icon {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
  }
  #mobile-status .status-chip b {
    margin-left: 0;
    font-family: var(--sans);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  #mobile-status .status-chip--hp b { color: #ffd9cc; }
  #mobile-status .status-chip--qi b { color: #bde8d4; }
  #mobile-status .status-chip--gold b { color: #f3deac; }
  #mobile-status #mobile-qi.is-danger { color: var(--warning-bright); }
  @media (max-width: 480px) {
    #mobile-status:not([hidden]) { column-gap: 10px; row-gap: 5px; }
    #mobile-status .status-chip { gap: 4px; }
    #mobile-status .status-icon { width: 24px; height: 24px; }
    #mobile-status .status-chip b { font-size: 0.875rem; }
  }
}

/* Selected people and objects belong immediately below the map. */
@layer interface {
  .field-sidebar { display: contents; }
  .field-sidebar .recovery-box { grid-column: 2; grid-row: 2; }
  .field-shell :where(#field-encounter) {
    grid-column: 1; grid-row: 3; min-height: 0; max-height: none;
    overflow: visible; text-align: left; border-top: 1px solid var(--line);
  }
  .field-shell :where(#field-encounter) .field-object {
    margin: 0; padding: 0; border: 0; gap: 8px;
  }
  .field-object button { width: auto; align-self: flex-start; }
  .field-shell .field-inspector { grid-column: 1; grid-row: 4; }
  .field-shell .field-inspector .field-selection { width: 100%; }
  .field-shell .field-inspector .field-target { margin: 0; }
  .field-shell .field-dpad { grid-column: 1; grid-row: 5; }
  .field-shell .field-atlas-fold { grid-column: 1/-1; grid-row: 6; }
  .field-shell > .field-sense,
  .field-shell > .field-walk-status,
  html[data-theme] .field-shell .local-scene,
  #region-description { display: none; }
  @media (max-width: 1100px) {
    .field-shell :where(#field-map) { grid-column: 1; grid-row: 2; }
    .field-sidebar .recovery-box { grid-column: 1; grid-row: 5; }
    .field-shell .field-dpad { grid-column: 1; grid-row: 6; }
    .field-shell .field-atlas-fold { grid-row: 7; }
  }
}

@layer interface {
  .field-shell :where(#field-encounter) .field-object {
    display: grid; grid-template-columns: minmax(0,1fr) 128px;
    align-items: start; gap: 8px 20px; text-align: left;
  }
  .field-object > strong, .field-object > p { grid-column: 1; }
  .field-object > strong { grid-row: 1; }
  .field-object > p:not(.field-action-state) { grid-row: 2; }
  .field-object > .field-action-state { grid-row: 3; }
  .field-shell #field-encounter .field-object > .field-object-art {
    grid-column: 2; grid-row: 1 / 4; width: 128px; height: 128px;
    max-width: 100%; object-fit: contain; image-rendering: pixelated;
    justify-self: end; border: 1px solid var(--line); background: var(--surface);
  }
  html[data-theme] .field-object > button {
    grid-column: 2; grid-row: 4; width: 100%; max-width: none;
  }
  html[data-theme] .field-object > .field-alms { grid-column: 1; grid-row: 4; width: auto; justify-self: start; }
  @media(max-width:480px) {
    .field-shell :where(#field-encounter) .field-object { grid-template-columns:minmax(0,1fr) 96px; gap:8px 12px; }
    .field-shell #field-encounter .field-object > .field-object-art { width:96px; height:96px; }
  }
}

/* Keep selected artwork large even when portrait styles load later. */
.field-shell #field-encounter .field-object {
  display:grid; grid-template-columns:192px minmax(0,1fr);
  align-items:start; gap:8px 24px; text-align:left;
}
.field-shell #field-encounter .field-object:not(.field-object-with-art) { grid-template-columns:minmax(0,1fr); }
.field-shell #field-encounter .field-object > strong,
.field-shell #field-encounter .field-object > p,
html[data-theme] .field-shell #field-encounter .field-object > button {
  grid-column:2; justify-self:start; width:auto;
}
.field-shell #field-encounter .field-object > .field-object-art {
  grid-column:1; grid-row:1 / 5; justify-self:start;
  width:192px; height:192px; min-width:192px; min-height:192px;
  max-width:none; max-height:none; object-fit:contain; image-rendering:pixelated;
}
.field-shell #field-encounter .field-object:not(.field-object-with-art) > * { grid-column:1; }
html[data-theme] .field-shell #field-encounter .field-object > .field-alms { grid-column:2; grid-row:5; }
@media(max-width:480px) {
  .field-shell #field-encounter .field-object { grid-template-columns:128px minmax(0,1fr); gap:8px 14px; }
  .field-shell #field-encounter .field-object > .field-object-art {
    width:128px; height:128px; min-width:128px; min-height:128px;
  }
}