/* The runtime owns Canvas dimensions. This sheet sizes only its stage. */
@font-face {
  font-family: 'Departure Mono Viet'; /* ds-allow-hardcode: local font registration, referenced through --font-display. */
  src: url('fonts/DepartureMonoViet-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Lora'; /* ds-allow-hardcode: local font registration, referenced through --font-story. */
  src: url('fonts/Lora-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

* { box-sizing: border-box; }
html { background: var(--color-surface-page); color: var(--color-text-primary); }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, canvas { -webkit-user-select: none; user-select: none; }
button svg { flex-shrink: 0; width: var(--size-icon); height: var(--size-icon); }
button:focus-visible, canvas:focus-visible { outline: var(--size-focus) solid var(--color-action-primary); outline-offset: var(--size-focus-offset); }
button:disabled { cursor: default; }
h1, h2, p { margin: 0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: var(--size-screenreader); height: var(--size-screenreader); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

#game-container { width: 100%; max-width: var(--size-page); height: var(--size-viewport); margin-inline: auto; padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hud' 'stage' 'context' 'controls'; grid-template-rows: auto minmax(var(--size-scene-min), 1fr) auto auto; gap: var(--space-3); }
#game-hud { grid-area: hud; min-width: 0; min-height: var(--size-hud); height: max-content; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); }
.hud-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.garden-heading { min-width: 0; }
.eyebrow { font-size: var(--text-small); color: var(--color-text-secondary); line-height: var(--leading-body); }
#game-title { font-family: var(--font-display); font-size: var(--text-hud-title); font-weight: var(--weight-normal); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.hud-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: end; }
.season-panel { display: flex; flex-direction: column; gap: var(--space-1); }
#season-name { font-family: var(--font-display); font-size: var(--text-label); line-height: var(--leading-tight); }
#season-progress { display: flex; gap: var(--space-2); padding: 0; margin: 0; list-style: none; font-size: var(--text-tiny); color: var(--color-text-secondary); line-height: var(--leading-tight); }
#season-progress li { display: flex; align-items: center; gap: var(--space-1); }
#season-progress li::before { content: ''; width: var(--space-1); height: var(--space-1); background: var(--color-art-faint); border-radius: var(--radius-round); }
#season-progress [aria-current='step'] { color: var(--color-action-primary); font-weight: var(--weight-bold); }
#season-progress [aria-current='step']::before { background: var(--color-action-primary); }
.hud-flower-panel { min-width: var(--size-control); min-height: var(--size-control); padding: var(--space-1) var(--space-2); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-card); font-family: var(--font-display); text-align: left; }
.hud-flower-panel:hover { background: var(--color-surface-raised); }
.hud-flower-panel:active { background: var(--color-action-selected); }
.hud-flower-panel:disabled { color: var(--color-text-secondary); background: var(--color-action-disabled); }
.flower-summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-tiny); }
#flower-count { color: var(--color-action-primary); font-size: var(--text-label); }
#flower-icons-container { display: flex; gap: var(--space-1); margin-top: var(--space-1); justify-content: end; }
.hud-flower-icon { display: flex; color: var(--color-art-faint); }
.hud-flower-icon.collected { color: var(--color-action-primary); }
.hud-flower-svg { width: var(--size-flower); height: var(--size-flower); }

.icon-button { width: var(--size-control); height: var(--size-control); min-width: var(--size-control); display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3); border: var(--size-border) solid var(--color-border-strong); background: var(--color-surface-card); border-radius: var(--radius-control); color: var(--color-text-secondary); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.icon-button:hover { background: var(--color-surface-raised); }
.icon-button:active, .icon-button[data-state='active'] { transform: translateY(var(--size-press)); background: var(--color-action-selected); }
.icon-button[aria-pressed='true'], .icon-button[data-state='selected'] { background: var(--color-action-selected); color: var(--color-action-pressed); }
.icon-button:disabled { background: var(--color-action-disabled); }
.icon-button[aria-busy='true'] { cursor: progress; }
.icon-button[data-state='error'] { color: var(--color-action-destructive); border-color: var(--color-action-destructive); }
.hud-actions { display: flex; align-items: center; flex-shrink: 0; gap: var(--space-2); }
#sound-toggle-btn[aria-pressed='false'] .sound-waves, #sound-toggle-btn[aria-pressed='true'] .sound-off,
#season-effects-toggle-btn[aria-pressed='true'] .season-effects-off { display: none; }

#game-stage { grid-area: stage; min-width: 0; min-height: 0; position: relative; overflow: hidden; border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-scene); background: var(--color-surface-stage); touch-action: none; isolation: isolate; }
#game-canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.context-line { grid-area: context; min-height: var(--size-context); display: flex; align-items: center; justify-content: center; padding-inline: var(--space-1); text-align: center; font-size: var(--text-label); line-height: var(--leading-body); color: var(--color-text-secondary); }
#context-toolbar { grid-area: context; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
#context-toolbar #game-hint { min-width: 0; flex: 1; justify-content: start; text-align: left; }
.restart-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-control); max-width: calc(var(--size-control) * 3); padding: var(--space-2) var(--space-3); border: var(--size-border) solid var(--color-action-destructive); border-radius: var(--radius-control); background: var(--color-surface-card); color: var(--color-action-destructive); font-size: var(--text-small); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.restart-button:hover { background: var(--color-surface-raised); }
.restart-button:active { background: var(--color-action-selected); transform: translateY(var(--size-press)); }
.restart-button:focus-visible, .destructive-button:focus-visible { outline-color: var(--color-action-destructive); }
#interaction-prompt { color: var(--color-action-primary); font-weight: var(--weight-medium); }
#touch-controls { grid-area: controls; min-height: var(--size-controls); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: var(--space-2); touch-action: none; }
.touch-dpad { display: grid; grid-template-columns: repeat(3, var(--size-control)); grid-template-rows: repeat(3, var(--size-control)); gap: var(--space-1); touch-action: none; }
.dpad-btn { display: flex; justify-content: center; align-items: center; width: var(--size-control); height: var(--size-control); padding: 0; color: var(--color-action-primary); background: var(--color-surface-control); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-press); touch-action: none; transition: background-color var(--duration-fast) var(--ease-out); }
.dpad-btn svg { fill: currentColor; }
.dpad-btn:hover { background: var(--color-surface-raised); }
.dpad-btn:active, .dpad-btn.active, .dpad-btn[data-state='selected'] { transform: translateY(var(--size-press)); background: var(--color-action-selected); box-shadow: none; }
.dpad-btn:disabled { color: var(--color-text-secondary); background: var(--color-action-disabled); box-shadow: none; }
.dpad-btn[aria-busy='true'] { cursor: progress; }
.dpad-btn[data-state='error'] { border-color: var(--color-action-destructive); }
.dpad-up { grid-area: 1 / 2; }
.dpad-left { grid-area: 2 / 1; }
.dpad-center { grid-area: 2 / 2; align-self: center; justify-self: center; width: var(--space-2); height: var(--space-2); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-round); }
.dpad-right { grid-area: 2 / 3; }
.dpad-down { grid-area: 3 / 2; }
.touch-action-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.touch-action-btn { width: var(--size-action); min-height: var(--size-action); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-surface-card); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-round); color: var(--color-action-primary); box-shadow: var(--shadow-press); font-size: var(--text-label); line-height: var(--leading-tight); touch-action: none; transition: transform var(--duration-fast) var(--ease-out); }
.touch-action-btn:hover { background: var(--color-surface-raised); }
.touch-action-btn:active, .touch-action-btn.active { transform: translateY(var(--size-press)); box-shadow: none; background: var(--color-action-selected); }
.touch-action-btn.pulsing, .touch-action-btn[data-state='selected'] { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-on-action); }
.touch-action-btn.pulsing:hover { background: var(--color-action-hover); }
.touch-action-btn.pulsing:active { background: var(--color-action-pressed); }
.touch-action-btn:disabled { color: var(--color-text-secondary); background: var(--color-action-disabled); box-shadow: none; }
.touch-action-btn[aria-busy='true'] { cursor: progress; }
.touch-action-btn[data-state='error'] { color: var(--color-action-destructive); border-color: var(--color-action-destructive); }
.control-caption { font-size: var(--text-tiny); color: var(--color-text-secondary); text-align: center; }
.keyboard-guide { display: none; grid-area: context; text-align: center; color: var(--color-text-secondary); font-size: var(--text-label); }

.modal-overlay { position: fixed; z-index: var(--z-overlay); inset: 0; display: flex; align-items: center; justify-content: center; padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); background: var(--color-surface-overlay); overflow: auto; overscroll-behavior: contain; }
.intro-card { width: 100%; max-width: var(--size-intro); max-height: 100%; padding: var(--space-7) var(--space-6); border: var(--size-border) solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-modal); overflow-y: auto; text-align: center; }
.intro-flower { width: var(--size-flower-large); height: var(--size-flower-large); margin-block: var(--space-5); image-rendering: pixelated; }
.flower-petal { fill: var(--color-art-petal); }
.flower-center { fill: var(--color-art-center); }
.flower-stem { fill: var(--color-art-stem); }
#intro-title { max-width: 18ch; margin-inline: auto; font-family: var(--font-story); font-size: var(--text-display); line-height: var(--leading-tight); font-weight: var(--weight-story); letter-spacing: -0.02em; }
#intro-title:focus { outline: none; }
#intro-subtitle { margin-top: var(--space-4); font-size: var(--text-body); color: var(--color-text-secondary); }
.intro-dedication { margin-top: var(--space-4); font-size: var(--text-label); }
.intro-dedication span { font-weight: var(--weight-bold); }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3); min-height: var(--size-control); min-width: var(--size-control); padding: var(--space-3) var(--space-5); border: var(--size-border) solid var(--color-action-primary); border-radius: var(--radius-control); background: var(--color-action-primary); color: var(--color-text-on-action); font-size: var(--text-body); font-weight: var(--weight-bold); line-height: var(--leading-body); transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.primary-button:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.primary-button:active, .primary-button[data-state='active'] { background: var(--color-action-pressed); border-color: var(--color-action-pressed); transform: translateY(var(--size-press)); }
.primary-button:disabled { background: var(--color-action-disabled); border-color: var(--color-action-disabled); color: var(--color-text-secondary); }
.primary-button[aria-busy='true'] { cursor: progress; }
.primary-button[data-state='error'] { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--color-text-on-action); }
.primary-button[data-state='selected'] { background: var(--color-action-pressed); border-color: var(--color-action-pressed); }
.secondary-button { background: var(--color-surface-card); border-color: var(--color-border-strong); color: var(--color-text-primary); }
.secondary-button:hover { background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.secondary-button:active { background: var(--color-action-selected); border-color: var(--color-border-strong); }
.destructive-button, .destructive-button:hover, .destructive-button:active { background: var(--color-action-destructive); border-color: var(--color-action-destructive); }
.reset-content { padding: var(--space-6); }
#reset-title { font-family: var(--font-story); font-size: var(--text-card-title); font-weight: var(--weight-story); line-height: var(--leading-tight); }
#reset-description { margin-top: var(--space-3); color: var(--color-text-secondary); }
.reset-actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
#start-btn { width: 100%; margin-top: var(--space-6); }
.intro-status { min-height: var(--space-5); margin-top: var(--space-2); font-size: var(--text-small); color: var(--color-text-secondary); }
.intro-status[data-state='error'] { color: var(--color-action-destructive); }
.intro-instruction { margin-top: var(--space-3); font-size: var(--text-label); color: var(--color-text-secondary); }
.intro-goal { margin-top: var(--space-3); font-size: var(--text-small); color: var(--color-text-secondary); }

.dialogue-overlay { align-items: end; }
.dialogue-card { width: 100%; max-width: var(--size-dialogue); max-height: 100%; overflow-y: auto; background: var(--color-surface-card); border: var(--size-border) solid var(--color-border-default); border-radius: var(--radius-card); padding: var(--space-5); }
.dialogue-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
#dialogue-text { margin-top: var(--space-3); font-size: var(--text-prose); line-height: var(--leading-prose); min-height: var(--space-10); }
.text-button { display: flex; align-items: center; justify-content: end; gap: var(--space-3); min-height: var(--size-control); min-width: var(--size-control); margin-top: var(--space-3); margin-left: auto; padding: var(--space-2) var(--space-3); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-card); color: var(--color-action-primary); }
.text-button:hover { background: var(--color-surface-raised); }
.text-button:active { background: var(--color-action-selected); }
.text-button:disabled { background: var(--color-action-disabled); color: var(--color-text-secondary); }
.text-button[aria-busy='true'] { cursor: progress; }
.text-button[data-state='error'] { color: var(--color-action-destructive); border-color: var(--color-action-destructive); }
.text-button[data-state='selected'] { background: var(--color-action-selected); }
.modal-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--size-modal); max-height: 100%; padding-top: var(--size-control); background: var(--color-surface-card); border: var(--size-border) solid var(--color-border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-modal); overflow: hidden; }
.modal-x-close-btn { position: absolute; top: 0; right: 0; border: 0; border-radius: 0 var(--radius-card) 0 var(--radius-control); background: var(--color-surface-card); }
.modal-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.memory-art { display: flex; align-items: center; justify-content: center; min-height: var(--size-action); margin-inline: var(--space-5); padding: var(--space-4); background: var(--color-surface-raised); border-radius: var(--radius-scene); }
#memory-icon svg { display: block; width: var(--size-flower-large); height: var(--size-flower-large); }
.polaroid-caption { padding: var(--space-6) var(--space-5); }
#memory-title, #letter-title { margin-top: var(--space-2); font-family: var(--font-story); font-size: var(--text-card-title); line-height: var(--leading-tight); font-weight: var(--weight-story); overflow-wrap: anywhere; }
#memory-message { margin-top: var(--space-5); font-size: var(--text-prose); line-height: var(--leading-prose); }
#memory-close-btn { width: 100%; margin-top: var(--space-6); }
.letter-paper { padding: var(--space-3) var(--space-6) var(--space-6); }
.letter-salutation { margin-block: var(--space-6) var(--space-4); font-weight: var(--weight-bold); }
.letter-para { margin-bottom: var(--space-5); font-size: var(--text-prose); line-height: var(--leading-prose); }
.letter-footer { padding-block: var(--space-3) var(--space-6); }
#letter-signature { margin-top: var(--space-2); font-weight: var(--weight-bold); }
#letter-date { margin-top: var(--space-3); font-size: var(--text-label); color: var(--color-text-secondary); }
#letter-close-btn { width: 100%; }

.modal-card h2:focus { outline: none; }
.album-content { padding: var(--space-3) var(--space-5) var(--space-5); }
#album-title, #gift-title { margin-top: var(--space-2); font-family: var(--font-story); font-size: var(--text-card-title); line-height: var(--leading-tight); font-weight: var(--weight-story); overflow-wrap: anywhere; }
#album-description, #gift-message { margin-top: var(--space-3); color: var(--color-text-secondary); }
#memory-album-list { display: grid; gap: var(--space-2); padding: 0; margin: var(--space-5) 0 0; list-style: none; }
.memory-entry { display: flex; gap: var(--space-4); align-items: center; width: 100%; min-height: var(--size-control); padding: var(--space-3); border: var(--size-border) solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-card); text-align: left; }
.memory-entry:hover { background: var(--color-surface-raised); }
.memory-entry:active { background: var(--color-action-selected); }
.memory-entry:disabled { border-color: var(--color-border-default); background: var(--color-surface-raised); color: var(--color-text-secondary); }
.memory-entry-number { font-family: var(--font-display); color: var(--color-action-primary); }
.memory-entry:disabled .memory-entry-number { color: var(--color-text-secondary); }
.memory-entry-title { display: block; font-weight: var(--weight-bold); }
.memory-entry-detail { display: block; margin-top: var(--space-1); font-size: var(--text-small); color: var(--color-text-secondary); }

.gift-card { max-width: var(--size-modal); }
.gift-layout { display: grid; grid-template-areas: 'copy' 'art' 'actions'; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-5); text-align: center; }
.gift-copy { grid-area: copy; }
.gift-art { grid-area: art; position: relative; width: var(--size-gift-art); height: var(--size-gift-art); margin-inline: auto; }
.gift-box, .gift-bouquet { position: absolute; left: 50%; transform: translateX(-50%); image-rendering: pixelated; }
.gift-box { bottom: 0; width: 44.444%; height: auto; }
.gift-box-closed { opacity: 0; animation: gift-unbox var(--duration-gift-open) var(--ease-out) both; }
.gift-box-open { opacity: 0; animation: gift-box-open var(--duration-gift-open) var(--ease-out) both; }
.gift-bouquet { top: 0; width: 88.889%; height: auto; animation: gift-bloom var(--duration-gift-reveal) var(--ease-out) both; }
.gift-actions { grid-area: actions; }
#gift-read-btn { width: 100%; }
.gift-petal { position: absolute; top: 10%; left: 10%; width: var(--space-2); height: var(--space-3); border-radius: 0 70% 0 70%; background: var(--color-art-petal); opacity: 0; animation: gift-petals var(--duration-gift-reveal) var(--ease-out) both; }
.gift-petal:nth-child(2) { left: 85%; top: 22%; animation-delay: var(--duration-fast); }
.gift-petal:nth-child(3) { left: 20%; top: 52%; }
.gift-petal:nth-child(4) { left: 76%; top: 64%; animation-delay: var(--duration-fast); }
.gift-petal:nth-child(5) { left: 38%; top: 0; background: var(--color-art-center); }
.gift-petal:nth-child(6) { left: 62%; top: 8%; background: var(--color-art-center); animation-delay: var(--duration-fast); }
@keyframes gift-unbox { 0%, 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-1 * var(--space-3))); } }
@keyframes gift-box-open { 0%, 25%, 100% { opacity: 0; } 45%, 65% { opacity: 1; } }
@keyframes gift-bloom { 0%, 25% { opacity: 0; transform: translate(-50%, var(--space-12)); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gift-petals { 0%, 25% { opacity: 0; transform: translateY(0) rotate(0deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--space-12)) rotate(120deg); } }

@media (pointer: fine) and (hover: hover) {
  body:not(.has-touch) #touch-controls { display: none; }
  body:not(.has-touch) #game-container { grid-template-areas: 'hud' 'stage' 'context'; grid-template-rows: auto minmax(var(--size-scene-min), 1fr) auto; }
  body:not(.has-touch) #keyboard-guide { display: block; }
  body:not(.has-touch) #context-toolbar { padding-bottom: var(--space-6); }
  body:not(.has-touch) #keyboard-guide { align-self: end; }
}
@media (min-width: 700px) {
  #game-container { padding: var(--space-5); gap: var(--space-4); }
  .hud-heading { align-items: start; }
  #game-hud { min-height: var(--size-hud); }
  #game-title { font-size: var(--text-card-title); }
}
@media (min-width: 500px) {
  .reset-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 500px) and (orientation: landscape) and (max-height: 540px) {
  #game-container { grid-template-columns: minmax(0, 1fr) var(--size-controls); grid-template-rows: auto minmax(var(--size-scene-min), 1fr) auto; grid-template-areas: 'hud controls' 'stage controls' 'context controls'; padding-block: var(--space-2); gap: var(--space-2) var(--space-3); }
  #game-hud { min-height: 0; flex-direction: row; align-items: center; gap: var(--space-4); }
  .hud-heading { align-items: center; flex: 1; }
  .garden-heading .eyebrow { display: none; }
  #game-title { font-size: var(--text-label); }
  #season-progress { display: none; }
  .hud-progress { gap: var(--space-3); }
  .hud-title { display: none; }
  #flower-icons-container { display: none; }
  #touch-controls { min-height: 0; flex-direction: column; justify-content: center; gap: var(--space-6); padding: 0; }
  .touch-dpad { grid-template-rows: repeat(3, var(--size-control)); }
  .touch-action-btn { min-height: var(--size-control); border-radius: var(--radius-control); width: 100%; flex-direction: row; }
  .touch-action-panel { width: 100%; }
  .control-caption { display: none; }
  .context-line { min-height: 0; }
  .intro-card { max-width: var(--size-dialogue); padding: var(--space-4) var(--space-5); }
  .intro-flower { display: none; }
  #intro-title { max-width: none; margin-top: var(--space-3); font-size: var(--text-card-title); }
  #intro-subtitle { margin-top: var(--space-2); }
  #start-btn { margin-top: var(--space-4); }
  .intro-dedication, .intro-goal { display: none; }
  .dialogue-card { max-height: 100%; }
  .gift-layout { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'art copy' 'art actions'; align-items: center; gap: var(--space-3) var(--space-4); text-align: left; }
  .gift-art { width: var(--size-gift-art-compact); height: var(--size-gift-art-compact); align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  button, #game-stage, .modal-card, .intro-card, .dialogue-card { border-color: ButtonText; }
  .dpad-btn.active, .touch-action-btn.pulsing { outline: var(--size-focus) solid Highlight; }
}