* { box-sizing: border-box; }
  body { margin: 0; background: #13242a; color: #fff0d9; font: 1rem/1.5 system-ui, sans-serif; }
  main { width: min(100% - 1rem, 76rem); margin: .5rem auto; }
  .stage { position: relative; display: grid; isolation: isolate; min-height: min(44rem, 94dvh); border-radius: .75rem; overflow: hidden; background: #203748; }
  .stage > * { grid-area: 1 / 1; }
  h1 { font: bold clamp(1.4rem, 4vw, 2.4rem) Georgia, serif; margin: 0; }
  p { margin: .35rem 0 .65rem; }
  canvas { display: block; width: 100%; height: 100%; min-height: 0; touch-action: none; }
  canvas[hidden] { display: none; }
  .masthead { align-self: start; padding: .7rem 1rem 1.4rem; background: linear-gradient(#13242af5, transparent); pointer-events: none; }
  .hud-card { padding: .42rem .62rem; border: 1px solid #d9a96e; border-radius: .55rem; background: #13242af2; }
  .hud-card[hidden] { display: none; }
  .hud-card button, .hud-card summary { pointer-events: auto; }
  .notebook { align-self: start; justify-self: end; z-index: 3; margin: .55rem; max-width: min(16rem, 44%); pointer-events: none; }
  .top-tools { align-self: start; justify-self: end; z-index: 3; display: grid; justify-items: end; gap: .3rem;
    width: min(16rem, 44%); margin: .55rem; pointer-events: none; }
  .top-tools .notebook { margin: 0; max-width: 100%; }
  #game-sound { min-height: 44px; padding: .35rem .65rem; pointer-events: auto; }
  #game-sound[hidden] { display: none; }
  .sound-controls { position: relative; display: flex; gap: .25rem; align-items: start; z-index: 1; }
  .sound-controls[hidden] { display: none; }
  .sound-settings { pointer-events: auto; }
  .sound-settings summary { min-height: 44px; padding: .35rem .6rem; cursor: pointer; }
  .sound-panel { position: absolute; top: calc(100% + .25rem); right: 0; width: 12rem; }
  .sound-panel label { display: flex; justify-content: space-between; gap: .5rem; }
  .sound-panel input { width: 100%; height: 44px; accent-color: #f8d47d; }
  .hud-card summary { cursor: pointer; min-height: 36px; padding: .36rem .1rem; }
  .chapters { align-self: end; justify-self: start; margin: .5rem; z-index: 4; }
  #chapter-choices { display: grid; gap: .3rem; }
  #chapter-choices [aria-current="step"] { border-width: 2px; background: #38555b; }
  .chapters[open] { box-shadow: 0 0 0 100vmax #13242a26; }
  .travel { align-self: end; justify-self: end; margin: .5rem; max-width: 45%; z-index: 3; pointer-events: none; }
  .observations { align-self: start; justify-self: start; margin: 7.15rem .5rem 0; max-width: min(24rem, 68%); pointer-events: none; }
  .action-dock { align-self: end; justify-self: center; margin: .5rem; max-width: min(33rem, 88%); pointer-events: none; }
  .world-clue { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: .85rem; }
  .world-clue[hidden] { display: none; }
  button { min-height: 44px; padding: .4rem .8rem; border: 1px solid #ffce76; border-radius: .45rem; background: #233b40; color: inherit; font: inherit; cursor: pointer; }
  button:hover { background: #38555b; }
  button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid white; outline-offset: 3px; }
  #travel-choices, #choices { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .22rem; }
  #response { margin: .35rem 0; }
  .mission-caption { display: block; color: #ffe0a4; font-size: .77rem; letter-spacing: .08em; text-transform: uppercase; }
  #goal { color: #ffe0a4; font-weight: 650; }
  #parcel-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .35rem 0; }
  #parcel-board[hidden], #actions-label[hidden] { display: none; }
  .parcel { padding: .3rem; border: 1px solid #a8855b; border-radius: .4rem; text-align: center; }
  .parcel output { display: block; color: #ffda86; font-weight: 700; }
  .parcel button { padding: .2rem .4rem; min-width: 44px; }
  .parcel button:disabled { opacity: .38; }
  #journal { color: #ffe0a4; margin: .1rem 0; font-size: .9rem; }
  #speaker-portrait { float: left; width: 2.4rem; height: 2.7rem; object-fit: contain; margin: .15rem .55rem .2rem 0; }
  #alignment { display: block; width: 5rem; height: 5rem; margin: .25rem 0; }
  #alignment[hidden] { display: none; }
  #action-dock:has(#alignment:not([hidden])) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; }
  #action-dock:has(#alignment:not([hidden])) #alignment { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  #action-dock:has(#alignment:not([hidden])) #actions-label,
  #action-dock:has(#alignment:not([hidden])) #choices { grid-column: 2; }
  a { color: #ffce76; }
  #catch-game { width: min(34rem, calc(100% - 1rem)); max-height: 95dvh; color: inherit; }
  #catch-game::backdrop { background: #091b25c9; }
  #catch-game h2 { margin: .2rem 0; font-family: Georgia, serif; }
  #catch-board { position: relative; height: clamp(7rem, 29dvh, 14rem); overflow: hidden; border-radius: .45rem;
    background: repeating-linear-gradient(90deg, #3f372c 0 32.8%, #9b775c 33%, #3f372c 33.34%); }
  #catch-board[data-game="picnic"] { background: repeating-linear-gradient(90deg, #364738 0 32.8%, #7e9466 33%, #364738 33.34%); }
  #catch-board[data-game="river"] { background: linear-gradient(#23434f, #456f78, #23434f); }
  #catch-zone { position: absolute; inset: 79% 0 0; background: #ffde9333; border: 2px dashed #f2cc86; }
  #catch-board[data-game="river"] #catch-zone { inset: 0 0 0 84.4%; }
  #catch-board[data-game="bakery"]::after { content: ""; position: absolute; left: var(--basket-lane, 50%); bottom: 4%;
    width: 13%; height: 10%; transform: translateX(-50%); border: 2px solid #f2c181; border-radius: 0 0 .55rem .55rem;
    background: repeating-linear-gradient(110deg, #835338 0 4px, #ab754e 4px 8px); }
  #catch-token { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%); font-size: clamp(1.35rem, 5vw, 2.3rem);
    color: #ffdf91; text-shadow: 0 2px 2px #111; line-height: 1; }
  #catch-token[data-flower="1"] { color: #ffd592; }
  #catch-token[data-flower="2"] { color: #deb6f1; }
  #catch-token[data-flower="0"] { color: #fff6df; }
  #catch-token[data-ready="true"] { filter: drop-shadow(0 0 7px #fff6bf); }
  #catch-board[data-game="river"] #catch-token { width: 2.4rem; height: 1.35rem;
    background: linear-gradient(155deg, #fff4cf 22%, #b0d1cb 48%, #629397 50%, #e6bd89 78%);
    clip-path: polygon(0 53%, 22% 63%, 49% 0, 77% 62%, 100% 51%, 81% 100%, 17% 100%); }
  #catch-lanes { display: flex; gap: .35rem; margin: .35rem 0; }
  #catch-lanes button { flex: 1; padding-inline: .35rem; }
  #catch-lanes[hidden], #catch-land[hidden], #catch-token[hidden] { display: none; }
  #catch-lanes button[aria-pressed="true"] { background: #6b5132; outline: 2px solid #ffde93; }
  .catch-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  #catch-order { color: #ffdf91; font-weight: 700; }
  #catch-score, #catch-order, #catch-feedback { min-height: 1.45em; margin: .25rem 0; }
  .festival-round { padding: .45rem .65rem; margin: .45rem 0; border-left: 3px solid #f1bf72; background: #294248; }
  .festival-round select { font: inherit; color: inherit; background: #20353a; padding: .28rem; border: 1px solid #cda76e; }
  #catch-mode-detail, #catch-next { margin: .3rem 0; font-size: .9rem; }
  #catch-next { color: #ffda92; }
  #catch-board[data-game="bakery"] {
    background: repeating-linear-gradient(90deg, transparent 0 32.8%, #f3c08683 33%, transparent 33.34%),
      repeating-linear-gradient(0deg, #382821 0 4px, transparent 4px 49px),
      radial-gradient(ellipse at 48% 13%, #be8851, #644537 55%, #302b29);
  }
  #catch-board[data-game="picnic"] {
    background: repeating-linear-gradient(90deg, transparent 0 32.8%, #e8cc9066 33%, transparent 33.34%),
      radial-gradient(ellipse at 50% 105%, #809258, #405d3e 70%, #253e36);
  }
  #catch-board[data-game="river"] {
    background: repeating-linear-gradient(-12deg, transparent 0 23px, #bfebd31c 24px 26px, transparent 27px 40px),
      linear-gradient(#203f40, #538184 52%, #254d53);
  }
  #catch-board[data-game="river"][data-side="west"] #catch-zone { inset: 0 84.4% 0 0; }
  #catch-board[data-game="river"] #catch-zone { background: repeating-linear-gradient(#ac78445e 0 13px, #3c291e77 13px 15px); }
  #catch-scenery { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; padding: .2rem .55rem;
    color: #ffd594; font-size: .85rem; letter-spacing: .06em; text-shadow: 0 1px 3px #19120f; }
  #catch-board[data-game="picnic"] #catch-scenery { color: #ffedbc; }
  #catch-board[data-game="river"] #catch-scenery { align-items: end; }
  #catch-token[data-variant="2"] { filter: drop-shadow(0 0 6px #ffce68); }
  #catch-board[data-game="river"] #catch-token[data-variant="0"] { background: #ffb999; }
  #catch-board[data-game="river"] #catch-token[data-variant="2"] { background: #fff3c8; }
  #catch-board[data-result="hit"] { box-shadow: inset 0 0 18px #ffd27f88; }
  #catch-board[data-result="hit"] #catch-zone { border-color: #fff5b5; }
  #catch-world { position: absolute; width: 100%; height: 100%; inset: 0; opacity: .7; pointer-events: none; }
  #catch-world g { display: none; }
  #catch-board[data-game="bakery"] .oven-scene,
  #catch-board[data-game="river"] .brook-scene,
  #catch-board[data-game="picnic"] .meadow-scene { display: inline; }
  @media (prefers-reduced-motion: no-preference) {
    #catch-board[data-result="hit"] #catch-zone { animation: festival-catch .32s ease-out; }
    @keyframes festival-catch { from { box-shadow: inset 0 0 30px #ffe7ab; } to { box-shadow: inset 0 0 0 #ffe7ab00; } }
  }
  #lantern-game { width: min(31rem, calc(100% - 1rem)); color: inherit; }
  #lantern-game::backdrop { background: #091b25c9; }
  #lantern-lights { display: flex; gap: .5rem; margin: .8rem 0; }
  #lantern-lights button { flex: 1; min-height: 5.5rem; background: linear-gradient(#52645c, #2b3336); }
  #lantern-lights button span { display: block; margin: .2rem auto; padding: .45rem 0;
    max-width: 4.3rem; border: 3px solid #9b7650; border-radius: .7rem .7rem 1rem 1rem;
    background: repeating-linear-gradient(90deg, #ffffff09 0 10px, #3a28292e 10px 12px), #4c4238; }
  #lantern-lights button.lit span { background: radial-gradient(#fff0b5, #d08745); color: #342a22; box-shadow: 0 0 1rem #efba72; }
  @media (max-width: 49rem) {
    .action-dock { margin-bottom: 3.9rem; }
  }
  @media (max-width: 38rem) {
    .stage { min-height: 92dvh; }
    .masthead { padding: .5rem .65rem; }
    .hud-card { font-size: .86rem; }
    .observations { max-width: 73%; margin-top: 8.1rem; }
    button { padding: .3rem .5rem; }
  }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.stage { height: 100%; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); border-radius: 0; }
#square { min-width: 0; }
.notebook[open], .travel[open], .action-dock { max-height: min(48dvh, 23rem); overflow: auto; }
@media (max-width: 38rem), (max-height: 32rem) {
  .masthead { padding-block: .4rem; }
  .masthead h1 { padding-right: 6.5rem; font-size: 1.25rem; }
  #controls, #goal { font-size: .84rem; margin-block: .15rem; }
  .observations { margin-top: 7.2rem; }
}
@media (max-width: 38rem) {
  .masthead h1, #controls, #goal { padding-right: 9rem; }
  .observations { margin-top: 9.4rem; }
}
@media (max-height: 32rem) {
  .observations { margin-top: 4.8rem; max-height: 23dvh; overflow: auto; }
}