/* Hero farm game: fallback, hero HUD, overlay grid, expanded dialog. */
.hn-fallback { position: relative; min-height: var(--hero-game-height); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.hn-fallback::before, .hn-stage::before {
  --hn-frame: var(--line-strong);
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--hn-frame), var(--hn-frame)) left top / 14px 1px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) left top / 1px 14px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) right top / 14px 1px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) right top / 1px 14px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) left bottom / 14px 1px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) left bottom / 1px 14px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) right bottom / 14px 1px,
    linear-gradient(var(--hn-frame), var(--hn-frame)) right bottom / 1px 14px;
  background-repeat: no-repeat;
}
.hn-fallback__mark { width: 56px; height: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; transform: skewY(-13deg); }
.hn-fallback__mark i { background: var(--green); }
.hn-fallback__mark i:nth-child(2), .hn-mark i:nth-child(2) { opacity: .4; }
.hn-fallback__mark i:nth-child(3), .hn-mark i:nth-child(3) { opacity: .65; }
.hn-fallback__title { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--green); }
.hn-fallback__tagline, .hn-fallback noscript p { font-size: 12px; color: var(--muted); }

.hn { --hn-muted: var(--muted); --hn-num: 'IBM Plex Mono', 'Noto Sans JP', sans-serif; position: relative; color: var(--ink); font-family: var(--font); font-size: 12px; line-height: 1.4; touch-action: manipulation; }
.hn[data-mode="compact"] { height: var(--hero-game-height); }
.hn [hidden] { display: none !important; }
.hn p, .hn h2, .hn h3, .hn ul { margin: 0; }
.hn-sr, .hn[data-mode="compact"][data-size="s"] .hn-long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hn-stage { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hn[data-complete] .hn-stage::before { --hn-frame: #f0c75a; }
.hn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.hn-fade .hn-canvas { animation: hn-fade .4s ease-out; }
/* One CSS matrix (geometry.cssMatrix) turns this 6 × 5 grid into the logo-oblique parallelograms. */
.hn-grid { position: absolute; left: 0; top: 0; width: calc(6 * var(--t, 40px)); height: calc(5 * var(--t, 40px)); display: grid; grid-template-columns: repeat(6, var(--t, 40px)); grid-template-rows: repeat(5, var(--t, 40px)); transform-origin: 0 0; pointer-events: none; }
.hn-cell { pointer-events: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hn-cell:focus-visible { outline: none; }
.hn button:not(.hn-cell):focus-visible, .hn a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; box-shadow: 0 0 0 1px var(--paper); }
.hn-caption { position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 9px 4px 14px; border-radius: 4px; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; animation: hn-fade .3s ease-out; }
.hn-caption::before { content: ''; position: absolute; left: 6px; top: 50%; width: 2px; height: 10px; margin-top: -5px; border-radius: 1px; background: var(--green); }

.hn-head, .hn-foot { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.hn-head { top: 0; height: 44px; padding: 0 12px; }
.hn-foot { bottom: 0; height: 52px; padding: 0 12px; }
.hn-head .hn-btn, .hn-foot .hn-btn { pointer-events: auto; }
.hn-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.hn-mark { width: 13px; height: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; flex: none; transform: skewY(-13deg); }
.hn-mark i { background: var(--green); }
.hn-name { display: flex; flex-direction: column; line-height: 1.15; }
.hn-name strong { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.hn-en { margin-top: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--hn-muted); }
.hn-pills { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hn-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.9); line-height: 1; white-space: nowrap; transition: opacity .3s, transform .3s, visibility .3s; }
.hn-pill__k { font-size: 11px; color: var(--hn-muted); }
.hn-pill__v { font-family: var(--hn-num); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hn-pill--x { display: none; font-size: 12px; color: var(--ink); }
.hn[data-mode="compact"]:not([data-touched]) .hn-pill { visibility: hidden; opacity: 0; transform: translateX(-6px); }
.hn-actions { position: relative; display: flex; align-items: center; gap: 6px; margin-left: auto; }

.hn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(255,255,255,.92); color: var(--ink); font: 500 12px/1.2 var(--font); white-space: nowrap; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.hn-btn:hover { border-color: var(--green); }
.hn-ico { display: inline-flex; width: 16px; height: 16px; flex: none; }
.hn-ico svg { width: 100%; height: 100%; fill: currentColor; }
/* Declared after .hn-btn and .hn-ico so these switches win at equal specificity. */
.hn-short, .hn-narrow, .hn-ico--play, .hn[data-paused] .hn-ico--pause { display: none; }
.hn[data-paused] .hn-ico--play { display: inline-flex; }
.hn-more, .hn-more-btn, .hn-close, .hn-tray, .hn-status, .hn-drawer, .hn-modal { display: none; }
.hn-machine .hn-ring { stroke-dasharray: 100; transition: stroke-dashoffset .3s linear; }
.hn-machine:not([data-busy]) .hn-ring { opacity: 0; }
.hn-machine { font-variant-numeric: tabular-nums; }
.hn-machine[data-busy] { color: var(--hn-muted); }
.hn-expand { border-color: var(--green-deep); background: var(--green-deep); color: #fff; font-weight: 600; }
.hn-expand:hover { border-color: #27654e; background: #27654e; }
.hn-goal { display: grid; flex: 1 1 auto; min-width: 0; max-width: 55%; margin-right: auto; pointer-events: none; }
.hn-goal > * { grid-area: 1 / 1; justify-self: start; max-width: 100%; min-width: 0; }
.hn-goal__chip { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 6px 10px; border-left: 3px solid var(--green); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px var(--line); font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; }
.hn-goal__k { flex: none; color: var(--green-deep); }
.hn-goal__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hn-goal__p { flex: none; font-family: var(--hn-num); color: var(--green-deep); }
.hn-goal__p:empty { display: none; }
/* The desktop hero row is 52 px tall: a long goal wraps to a second line instead of being cut off. */
.hn[data-mode="compact"][data-size="m"] .hn-goal__chip { white-space: normal; }
.hn[data-mode="compact"][data-size="m"] .hn-goal__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.hn-toast { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding: 5px 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.96); font-size: 12px; line-height: 1.4; overflow: hidden; animation: hn-fade .2s ease-out; }
.hn-pulse { animation: hn-pulse 1.2s ease-out; }
@keyframes hn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63,152,119,0); } 45% { box-shadow: 0 0 0 6px rgba(63,152,119,.35); } }
@keyframes hn-fade { from { opacity: 0; } }

.hn[data-mode="compact"][data-size="s"] .hn-head { height: 36px; padding: 0 8px; }
.hn[data-mode="compact"][data-size="s"] .hn-foot { height: 44px; padding: 0 8px; gap: 6px; }
.hn[data-mode="compact"][data-size="s"] .hn-en, .hn[data-mode="compact"][data-size="s"][data-touched] .hn-name, .hn[data-mode="compact"][data-size="s"]:not([data-touched]) .hn-pills { display: none; }
.hn[data-mode="compact"][data-size="s"] .hn-pill { padding: 0 8px; }
/* Its label is only for screen readers here, so the gap would leave the value off-centre. */
.hn[data-mode="compact"][data-size="s"] .hn-pill--money { gap: 0; }
.hn[data-mode="compact"][data-size="s"] .hn-short { display: inline; }
.hn[data-mode="compact"][data-size="s"] .hn-btn { padding: 0 10px; }
.hn[data-mode="compact"][data-size="s"] .hn-pause { width: 36px; padding: 0; }
.hn[data-mode="compact"][data-size="s"] .hn-pause__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hn[data-mode="compact"][data-size="s"] .hn-goal { max-width: none; }
.hn[data-mode="compact"][data-size="s"] .hn-goal__chip { padding: 6px 8px; }
/* Under 360 px the bottom row is tight: the decorative arrow goes and the buttons hug their labels. */
.hn[data-mode="compact"][data-narrow="xs"] .hn-foot .hn-btn { gap: 5px; padding: 0 8px; }
.hn[data-mode="compact"][data-narrow="xs"] .hn-expand .hn-ico { display: none; }
/* Too narrow for messages in the chip slot: the toast floats just above the bottom row instead. */
.hn[data-mode="compact"][data-narrow] .hn-toast { position: absolute; left: 8px; bottom: calc(100% + 4px); width: max-content; max-width: calc(100% - 16px); }

/* Expanded: the same root as a modal dialog. */
.hn[data-mode="expanded"] { position: fixed; inset: 24px; z-index: 100; max-width: 1360px; margin: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; overscroll-behavior: contain; background: var(--paper) linear-gradient(90deg, #3f98770a 1px, transparent 1px) 0 0 / 80px 100%; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 0 100vmax rgba(22,34,29,.62); font-size: 13px; }
.hn[data-mode="expanded"] .hn-head { position: relative; z-index: 5; grid-row: 1; grid-column: 1 / -1; height: auto; min-height: 52px; padding: 4px 12px 4px 16px; gap: 12px; border-bottom: 1px solid var(--line); pointer-events: auto; }
.hn[data-mode="expanded"] .hn-pills { flex: 1 1 auto; flex-wrap: wrap; row-gap: 4px; }
.hn[data-mode="expanded"] .hn-pill { height: 28px; }
.hn[data-mode="expanded"] .hn-pill__k { font-size: 12px; }
/* The amount keeps the width of ¥9,999,999, so the wrapping desktop header never gains a row (and shrinks the stage)
   when the money gains a digit. */
.hn[data-mode="expanded"] .hn-pill--money .hn-pill__v { min-width: 10ch; text-align: right; }
.hn[data-mode="expanded"] .hn-pill--x { display: inline-flex; }
.hn[data-mode="expanded"] .hn-btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
.hn[data-mode="expanded"] .hn-more { display: flex; gap: 6px; }
.hn[data-mode="expanded"] .hn-close { display: inline-flex; }
.hn[data-mode="expanded"] .hn-stage { position: relative; grid-row: 2; grid-column: 1; min-height: 0; }
.hn[data-mode="expanded"] .hn-foot { display: none; }
.hn[data-mode="expanded"] .hn-goal { position: absolute; top: 8px; left: 12px; z-index: 3; max-width: calc(100% - 24px); margin: 0; }
.hn[data-mode="expanded"] .hn-goal__chip { font-size: 12px; }
.hn[data-mode="expanded"] .hn-status { display: block; grid-row: 2; grid-column: 1; align-self: end; justify-self: start; z-index: 4; max-width: calc(100% - 24px); margin: 0 12px 6px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.94); font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.hn[data-mode="expanded"] .hn-status:empty { visibility: hidden; }
/* Over the open drawer the status is opaque, so the list scrolling under it does not show through. */
.hn[data-mode="expanded"]:has(> .hn-drawer:not([hidden])) .hn-status { background: var(--paper); }
.hn[data-mode="expanded"] .hn-tray { display: grid; grid-row: 3; grid-column: 1; gap: 8px; min-width: 0; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.hn-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hn-tool[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.hn-key { font-family: var(--hn-num); font-size: 12px; color: var(--hn-muted); }
.hn-tool[aria-pressed="true"] .hn-key { color: var(--green-deep); }
.hn[data-mode="expanded"] .hn-machine { margin-left: auto; }
/* The 5 px padding, cancelled by the margin, keeps focus rings inside the scroller. Every item is 64 px tall (room for
   three-line chips) and a space-taking scrollbar always keeps its track (overflow-x: scroll), below the chips: switching
   tools never resizes the stage, and classic scrollbars never squeeze the chips. Overlay scrollbars take no room. */
.hn-palette { display: flex; align-items: stretch; gap: 8px; min-width: 0; margin: -5px; padding: 5px; overflow-x: scroll; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; color-scheme: light; }
.hn-hint { align-self: center; display: flex; align-items: center; height: 64px; color: var(--hn-muted); font-size: 12px; }
.hn[data-mode="expanded"] .hn-chip { flex: none; justify-content: flex-start; gap: 8px; height: 64px; min-height: 52px; padding: 6px 12px 6px 8px; text-align: left; }
.hn-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.hn-chip[aria-disabled="true"] { cursor: default; }
.hn-chip[aria-disabled="true"] strong { color: var(--hn-muted); }
.hn-thumb { width: 32px; height: 32px; flex: none; }
.hn-chip__t { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.hn-chip__t strong { font-size: 13px; font-weight: 600; }
.hn-chip__d { font-family: var(--hn-num); font-size: 12px; color: var(--hn-muted); }
.hn-chip__n { font-size: 12px; color: var(--green-deep); }
.hn-chip__n:empty { display: none; }

/* The status line stays readable above the open drawer. The drawer's end padding (and its scroll padding, for focus)
   adds the status band, 32 px here, so its last item still scrolls clear of the status. */
.hn[data-mode="expanded"] .hn-drawer { display: flex; flex-direction: column; grid-row: 2; grid-column: 1; justify-self: end; z-index: 3; width: min(320px, 100%); min-height: 0; padding: 10px 16px 48px; scroll-padding-bottom: 48px; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); background: rgba(255,255,255,.97); }
.hn-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hn-h { font-size: 16px; font-weight: 600; }
.hn-rec__h { margin: 16px 0 4px; font-size: 12px; font-weight: 500; color: var(--green-deep); }
.hn-rec__list { padding: 0; list-style: none; }
.hn-rec__list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.hn-tag { flex: none; color: var(--green-deep); }
.hn-restart { align-self: flex-start; margin-top: 18px; }
.hn-confirm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hn-confirm p { flex-basis: 100%; font-size: 12px; }
.hn-danger { border-color: #c9744f; color: #a3472b; }
.hn[data-mode="expanded"] .hn-modal { display: grid; position: absolute; inset: 0; z-index: 6; place-items: center; padding: 16px; background: rgba(22,34,29,.4); }
.hn-card { display: grid; gap: 12px; width: min(560px, 100%); max-height: 100%; padding: 22px 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 16px 40px rgba(22,34,29,.16); }
/* The how-to card and the open dialog (tabindex -1) hold focus as containers: on opening, or after a click on a part
   that cannot take focus. A ring around the whole box would point at nothing. */
.hn-card:focus, .hn[data-mode="expanded"]:focus { outline: none; }
.hn-howto { display: grid; gap: 8px; padding-left: 1.2em; font-size: 14px; line-height: 1.75; }
.hn-note { font-size: 13px; line-height: 1.7; color: var(--hn-muted); }
.hn-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--green-deep); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.hn-card > .hn-btn { justify-self: end; }

/* Phone and short landscape share the compact header with the "more" menu. */
@media (max-width: 760px), (max-height: 520px) and (orientation: landscape) {
  .hn[data-mode="expanded"] { inset: 0; height: 100vh; height: 100dvh; max-width: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border: 0; border-radius: 0; }
  .hn[data-mode="expanded"] .hn-head { min-height: 48px; padding: 2px 8px; gap: 6px; }
  .hn[data-mode="expanded"] .hn-brand, .hn[data-mode="expanded"] .hn-pill--x, .hn[data-mode="expanded"] .hn-wide, .hn[data-mode="expanded"] .hn-more:not([data-open]) { display: none; }
  .hn[data-mode="expanded"] .hn-pills { flex-wrap: nowrap; }
  .hn[data-mode="expanded"] .hn-pill { padding: 0 8px; }
  .hn[data-mode="expanded"] .hn-pill--money { gap: 0; }
  /* This header does not wrap, so the amount takes only its own width. */
  .hn[data-mode="expanded"] .hn-pill--money .hn-pill__v { min-width: 0; }
  .hn[data-mode="expanded"] .hn-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hn[data-mode="expanded"] .hn-short, .hn[data-mode="expanded"] .hn-narrow { display: inline; }
  .hn[data-mode="expanded"] .hn-more-btn { display: inline-flex; }
  .hn[data-mode="expanded"] .hn-more[data-open] { position: absolute; top: calc(100% + 4px); right: 0; z-index: 7; display: grid; gap: 6px; min-width: 168px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); box-shadow: 0 12px 32px rgba(22,34,29,.18); }
  .hn[data-mode="expanded"] .hn-pause { width: 44px; padding: 0; }
  .hn[data-mode="expanded"] .hn-pause__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hn[data-mode="expanded"] .hn-btn:not(.hn-chip) { padding: 0 12px; }
}
@media (max-width: 760px) {
  /* The status track has a fixed height; a two-line message overlays the bottom of the canvas instead of resizing it. */
  .hn[data-mode="expanded"] { grid-template-rows: auto minmax(0, 1fr) 33px auto; }
  .hn[data-mode="expanded"] .hn-status { grid-row: 2 / 4; align-self: end; justify-self: stretch; max-width: none; min-height: 33px; margin: 0; padding: 7px 12px; border-width: 1px 0 0; border-radius: 0; white-space: normal; }
  .hn[data-mode="expanded"] .hn-tray { grid-row: 4; padding: 8px; }
  /* The drawer ends at the status track, so only a second status line (18 px) reaches into it. */
  .hn[data-mode="expanded"] .hn-drawer { width: 100%; padding-bottom: 34px; scroll-padding-bottom: 34px; border-left: 0; }
  /* All five tools fit in one row and 農機を呼ぶ gets a full row, so nothing sits off-screen in a hidden scroller. */
  .hn[data-mode="expanded"] .hn-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hn[data-mode="expanded"] .hn-tools > .hn-tool { min-width: 0; padding: 0 4px; }
  .hn[data-mode="expanded"] .hn-machine { grid-column: 1 / -1; margin: 0; }
  /* The 14 px desktop floor would push 閉じる off 320 × 640 and 360 × 740 screens, so phones keep the denser card type. */
  .hn-howto { font-size: 13px; }
  .hn-note { font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hn[data-mode="expanded"] { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 260px; }
  /* Rows keep their content height, so a long palette scrolls the whole tray instead of squeezing the tools and 農機. */
  .hn[data-mode="expanded"] .hn-tray { grid-row: 2; grid-column: 2; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-top: 0; border-left: 1px solid var(--line); }
  .hn[data-mode="expanded"] .hn-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .hn[data-mode="expanded"] .hn-tools > .hn-tool { padding: 0 6px; }
  .hn[data-mode="expanded"] .hn-machine { grid-column: 1 / -1; margin: 0; }
  .hn[data-mode="expanded"] .hn-palette { flex-direction: column; min-height: 62px; overflow: visible; }
  .hn[data-mode="expanded"] .hn-chip, .hn[data-mode="expanded"] .hn-hint { height: auto; }
  /* The status overlays the canvas as on desktop, also at 760 px wide or less where the phone rules match too. */
  .hn[data-mode="expanded"] .hn-status { grid-row: 2; grid-column: 1; align-self: end; justify-self: start; max-width: calc(100% - 24px); min-height: 0; margin: 0 12px 6px; padding: 3px 10px; border-width: 1px; border-radius: 4px; white-space: nowrap; }
  .hn[data-mode="expanded"] .hn-drawer { padding-bottom: 48px; scroll-padding-bottom: 48px; }
}
/* Short screens: the how-to card gets wider and tighter so that 閉じる stays on screen without scrolling
   (the full desktop card needs about 697 px of viewport height). */
@media (max-height: 700px) {
  .hn[data-mode="expanded"] .hn-modal { padding: 8px; }
  .hn[data-mode="expanded"] .hn-card { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; width: min(780px, 100%); padding: 14px 20px; }
  .hn[data-mode="expanded"] .hn-card > * { grid-column: 1 / -1; }
  .hn[data-mode="expanded"] .hn-card > .hn-link { grid-column: 1; }
  .hn[data-mode="expanded"] .hn-card > .hn-btn { grid-column: 2; align-self: center; }
  .hn[data-mode="expanded"] .hn-howto { gap: 2px; line-height: 1.6; }
}
/* Narrow phones: slimmer pill and button padding leave room for an eight-digit amount beside その他. */
@media (max-width: 389px) {
  .hn[data-mode="expanded"] .hn-pill { padding: 0 6px; }
  .hn[data-mode="expanded"] .hn-actions > .hn-more-btn, .hn[data-mode="expanded"] .hn-actions > .hn-close { padding: 0 8px; }
}
/* Under 360 px the pills stack, so a growing amount never slides under その他 and the header keeps one height,
   and the tool row tightens so 4-character labels keep clear of their borders. */
@media (max-width: 359px) {
  .hn[data-mode="expanded"] .hn-pills { flex-direction: column; align-items: flex-start; }
  .hn[data-mode="expanded"] .hn-tools { gap: 4px; }
  .hn[data-mode="expanded"] .hn-tools > .hn-tool { padding: 0 2px; font-size: 12px; }
  /* A 1 px offset keeps the 3 px focus ring inside the 4 px gap; the white shadow still separates it from the border. */
  .hn[data-mode="expanded"] .hn-tools > .hn-btn:focus-visible { outline-offset: 1px; }
}
/* Key hints are for keyboards: they go on touch screens, and below 440 px where five tools with hints do not fit. */
@media (hover: none), (max-width: 439px) {
  .hn-key { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hn, .hn *, .hn *::before, .hn *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  /* Canvas pixels are not adjusted, so the art keeps the white table it was drawn for; its labels carry their own white plates. */
  .hn-canvas { forced-color-adjust: none; background: var(--paper); }
  /* Highlight can be pale, so the rings get their own Canvas backing instead of sitting on the white table. */
  .hn-cell:focus-visible { forced-color-adjust: none; outline: 3px solid Highlight; outline-offset: -3px; box-shadow: inset 0 0 0 6px Canvas; }
  .hn[data-mode="compact"] .hn-btn:focus-visible { outline-offset: -5px; }
  .hn-goal__chip { border-left-color: Highlight; }
  .hn-tool[aria-pressed="true"], .hn-chip[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  /* Forced colors drop the backdrop shadow, so the inert page is hidden while the dialog is open. */
  body:has(> .hn[data-mode="expanded"]) > :not(.hn) { visibility: hidden; }
}