.h02 {
  --h02-bg: #223b32;
  --h02-panel: #20342c;
  --h02-border: #a48b57;
  --h02-gold: #f1d292;
  --h02-text: #f4ebd3;
  --h02-muted: #d2d6be;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--h02-bg);
  color: var(--h02-text);
  font: 1rem/1.35 system-ui, sans-serif;
}
.h02 [hidden] { display: none !important; }
.h02 :is(h1, h2, p) { margin: 0; }
.h02 :is(h1, h2) { color: var(--h02-gold); font: bold 1.17em/1.12 Georgia, serif; }
.h02-header {
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  background: #192d26;
  border-bottom: 1px solid #7d6c46;
}
.h02-meta { font-size: .85em; color: var(--h02-muted); overflow-wrap: anywhere; }
.h02-meta span { white-space: nowrap; }
.h02-meta .h02-alianza { white-space: normal; }
.h02-banco { grid-column: 1 / -1; justify-self: center; font-size: .74em; color: var(--h02-gold); }
.h02 :is(button, select) {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: .25em .65em;
  border: 1px solid var(--h02-border);
  border-radius: 6px;
  background: #293f33;
  color: var(--h02-text);
  font: inherit;
  line-height: 1.15;
  white-space: normal;
}
.h02 button:not(:disabled) { cursor: pointer; }
.h02 .h02-header button { width: 44px; padding: 0; font-weight: bold; }
.h02 .h02-header [data-h02="volver"] { font-size: 1.35em; }
.h02 :is(button, select, input):disabled { opacity: .67; }
.h02 :is(button, select, input, .h02-body, .h02-alianza):focus-visible {
  outline: 2px solid #ffe2a1; outline-offset: -2px;
}
.h02 .h02-primary { background: #715731; border-color: #c1a062; color: #fff3ce; font-weight: 700; }
.h02-stage {
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.h02-patio {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
}
.h02-tools {
  position: absolute;
  bottom: max(9px, env(safe-area-inset-bottom));
  inset-inline: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.h02-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 2px 0 #17271e;
  background: #243b31;
  color: var(--h02-gold);
}
.h02-tools svg { flex: none; }
.h02-notice {
  position: absolute;
  z-index: 1;
  inset: 5px 8px auto;
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--h02-border);
  border-radius: 6px;
  background: #23392e;
  color: var(--h02-gold);
  text-align: center;
  overflow-wrap: anywhere;
}
.h02-notice button { margin-top: 4px; }
.h02-card {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(24rem, calc(100% - 16px));
  max-height: calc(100% - 16px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  padding: 6px 9px;
  border: 1px solid var(--h02-border);
  border-radius: 7px;
  background: var(--h02-panel);
  box-shadow: 0 4px 12px #101c17c9;
  overflow-wrap: anywhere;
}
.h02-card header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.h02-card header h2 { min-width: 0; }
.h02-card [data-h02="cerrar"] { flex: 0 0 44px; padding: 0; font-weight: 700; }
.h02-body {
  /* Margen para métricas tipográficas que sobresalen del interlineado. */
  padding-block: 3px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #bc9a61 #23392e;
  scrollbar-gutter: stable;
}
.h02-body p + p, .h02-body p + label, .h02-body label + p { margin-top: .22em; }
.h02 :is(.h02-content,.h02-selectores) > label,
.h02 :is(.h02-content,.h02-selectores) > label select { display: block; width: 100%; }
.h02 .h02-card-status { color: var(--h02-gold); margin-bottom: .3em; }
.h02-body select { margin: 2px 0; }
.h02-body fieldset { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.h02-body legend { color: var(--h02-muted); padding: 0; }
.h02-body ul { margin: 0; padding: 0; list-style: none; }
.h02-body li + li { margin-top: 3px; }
.h02-check {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.h02-check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: #c5a667; }
.h02-check:has(input:disabled) { min-height: 0; cursor: default; color: var(--h02-muted); }
.h02-decision {
  display: grid;
  gap: 4px;
  padding: 4px 5px;
  margin-bottom: 6px;
  border-left: 2px solid var(--h02-border);
  background: #23392e;
}
.h02-decision .h02-coste { color: var(--h02-gold); }
.h02-decision .h02-actions { justify-self: end; }
.h02-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.h02-actions:has([data-h02="confirmar"]) { display: grid; grid-template-columns: 44px minmax(0, auto); }
.h02-actions [data-h02="editar"] { padding-inline: 0; font-weight: 700; }
.h02-scroll { display: block; color: var(--h02-muted); font-size: .72em; }
@media (max-width: 480px) and (orientation: portrait) {
  .h02-card { width: calc(100% - 12px); right: 6px; max-height: min(80%, calc(100% - 12px)); }
  .h02-card:has(.h02-decision) { max-height: min(100%, max(80%, 14em), calc(100% - 12px)); }
  .h02-header > div { display: contents; }
  .h02-header h1 { grid-area: 1 / 2; }
  .h02-header .h02-meta { grid-area: 2 / 1 / 3 / -1; max-height: 4.05em; overflow-y: auto; }
  .h02-header [data-h02="ayuda"] { grid-area: 1 / 3; }
  .h02-banco { grid-row: 3; }
  .h02-tools button { flex: 1 1 auto; flex-direction: column; gap: 2px; padding-inline: 5px; }
}
@media (max-height: 380px) and (orientation: landscape) {
  .h02-header { padding-block: 3px; }
  .h02-card { width: min(28rem, 76%); }
  .h02-card:has(.h02-preparar) { width: min(34rem, calc(100% - 16px)); }
  .h02-content { container-type: inline-size; }
  .h02-preparar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.25em), 1fr)); gap: 8px; }
  @container (width >= 17em) {
    .h02-preparar label[data-h02-field] > span {
      position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    }
  }
  .h02-card footer { display: flex; align-items: center; gap: 6px; }
  .h02-card footer .h02-actions { margin-left: auto; min-width: 0; }
  .h02-banco { grid-row: 2; }
}
@media (min-width: 550px) and (max-height: 380px) and (orientation: landscape) {
  .h02:has(.h02-card:not([hidden])) {
    --h02-side: max(205px, 40%);
    grid-template: minmax(0, 1fr) / var(--h02-side) minmax(0, 1fr);
  }
  .h02:has(.h02-card:not([hidden])) .h02-stage { grid-area: 1 / 1 / 2 / -1; }
  .h02:has(.h02-card:not([hidden])) .h02-header {
    grid-area: 1 / 1;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 7px 5px;
    padding: 8px;
    overflow: hidden;
    border-right: 1px solid #7d6c46;
  }
  .h02:has(.h02-card:not([hidden])) .h02-header > div {
    grid-area: 2 / 1 / 3 / -1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  .h02:has(.h02-card:not([hidden])) .h02-header [data-h02="ayuda"] { grid-area: 1 / 3; }
  .h02:has(.h02-card:not([hidden])) .h02-meta { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
  .h02:has(.h02-card:not([hidden])) .h02-alianza {
    min-height: 0; max-height: 2.7em; overflow-y: auto; scrollbar-color: #bc9a61 #23392e;
  }
  .h02:has(.h02-card:not([hidden])) .h02-separador { display: none; }
  .h02:has(.h02-card:not([hidden])) .h02-banco { grid-area: 3 / 1 / 4 / -1; justify-self: start; align-self: end; }
  .h02:has(.h02-card:not([hidden])) .h02-card {
    width: calc(100% - var(--h02-side) - 16px);
    top: 8px;
    bottom: auto;
  }
  .h02:has(.h02-card:not([hidden])) .h02-card header h2 { overflow-wrap: normal; }
  .h02:has(.h02-card:not([hidden])) .h02-card footer { display: block; }
  .h02:has(.h02-card:not([hidden])) .h02-card footer button { overflow-wrap: normal; }
  /* En horizontal corto la ficha gana ancho junto con su marco de juego. */
  .app:has(> dialog.hogar-juego[open] .h02-card:not([hidden]) .h02-decision) { max-width: none; }
  dialog.hogar-juego:has(.h02-card:not([hidden]) .h02-decision) {
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    width: auto;
  }
  .h02:has(.h02-card:not([hidden]) .h02-decision) { --h02-side: max(224px, 33%); }
}
@media (prefers-reduced-motion: reduce) {
  .h02 *, .h02 *::before, .h02 *::after { scroll-behavior: auto; animation: none; transition: none; }
}