:root {
  --ink: #342b25;
  --muted: #7c6b61;
  --paper: #fffaf2;
  --cream: #f7efe4;
  --line: #e5d6c7;
  --rose: #d97872;
  --rose-dark: #b95251;
  --moss: #7e936c;
  --gold: #d8a34e;
  --shadow: rgba(69, 46, 32, .13);
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { background: var(--cream); }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.7), transparent 30%), var(--cream);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
}
button, a { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 26px 0 42px; }
.topbar { min-height: 48px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .72rem; letter-spacing: 0; }
.topbar-note { margin-left: auto; color: var(--muted); font-size: .85rem; }
.crumb-bank { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid #ead6a3; border-radius: 99px; padding: 6px 10px 6px 7px; background: #fff7df; color: #8c672b; font-size: .8rem; font-weight: 800; }
.crumb-bank small { color: #9a7a45; font-size: .68rem; font-weight: 700; }
.crumb-icon { position: relative; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #d79a4c; box-shadow: inset -3px -3px 0 rgba(128,75,30,.24), inset 2px 2px 0 rgba(255,229,157,.7); }
.crumb-icon::before, .crumb-icon::after { content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #8a542b; }
.crumb-icon::before { left: 6px; top: 7px; box-shadow: 7px 4px #8a542b, 2px 9px #8a542b; }
.crumb-icon::after { right: -2px; top: -1px; width: 8px; height: 8px; background: var(--paper); border-radius: 50%; }
.quiet-button { border: 1px solid var(--line); color: var(--ink); background: transparent; border-radius: 99px; padding: 9px 14px; }
.quiet-button:hover { background: var(--paper); }
.language-picker select { border: 1px solid var(--line); border-radius: 99px; padding: 8px 10px; color: var(--ink); background: var(--paper); font: inherit; font-size: .82rem; }

.game-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 30px; padding-top: 38px; }
.story-panel { padding: 24px 0; }
.eyebrow { margin: 0 0 10px; color: var(--rose-dark); font-weight: 700; letter-spacing: .13em; font-size: .72rem; }
h1 { margin: 0; max-width: 9ch; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.12; letter-spacing: -.06em; }
.mission-copy { margin: 18px 0 24px; color: var(--muted); font-size: .94rem; line-height: 1.75; }
.character-card { display: grid; grid-template-columns: 48px 1fr; gap: 11px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.character-card strong { font-size: .91rem; }
.character-card p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.portrait { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #eadfcf; overflow: hidden; }
.portrait span { position: absolute; display: block; background: var(--ink); border-radius: 50%; }
.portrait span:nth-child(1) { width: 16px; height: 15px; left: 7px; top: 17px; }
.portrait span:nth-child(2) { width: 19px; height: 17px; left: 17px; top: 15px; }
.portrait span:nth-child(3) { width: 14px; height: 13px; left: 28px; top: 18px; }
.objective-list { display: grid; gap: 13px; padding-top: 26px; font-size: .85rem; }
.objective { display: flex; align-items: center; gap: 10px; color: #a99b90; }
.objective span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: .7rem; }
.objective.is-active { color: var(--ink); font-weight: 700; }
.objective.is-done { color: var(--moss); }
.objective.is-done span { border-color: var(--moss); background: var(--moss); color: white; }

.game-card { min-width: 0; background: var(--paper); border: 1px solid rgba(229, 214, 199, .8); box-shadow: 0 18px 42px var(--shadow); }
.game-head, .game-foot { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 18px; font-size: .82rem; }
.foot-actions { display: flex; align-items: center; gap: 12px; }
.game-head { border-bottom: 1px solid var(--line); }
.game-foot { border-top: 1px solid var(--line); color: var(--muted); }
.chapter-label { color: var(--rose-dark); font-weight: 800; letter-spacing: .08em; }
.hint { color: var(--muted); }
.canvas-wrap { position: relative; overflow: hidden; }
#gameCanvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; touch-action: none; outline: none; }
#gameCanvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.demo-button { position: absolute; right: 18px; top: 16px; z-index: 3; border: 2px solid var(--paper); border-radius: 99px; padding: 8px 12px; background: #fff1b8; color: #70501b; box-shadow: 0 3px 0 #cba64a; font-weight: 800; font-size: .78rem; }
.demo-button:active { transform: translateY(3px); box-shadow: none; }
.jump-button { position: absolute; right: 18px; bottom: 16px; z-index: 3; border: 3px solid var(--paper); border-radius: 50%; width: 66px; height: 66px; background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 #a77532; font-weight: 800; font-size: .9rem; }
.jump-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #a77532; }
.bridge-button { position: absolute; right: 18px; bottom: 16px; z-index: 3; border: 3px solid var(--paper); border-radius: 50%; width: 66px; height: 66px; background: var(--moss); color: var(--paper); box-shadow: 0 5px 0 #596d49; font-weight: 800; font-size: .78rem; }
.bridge-button:active { transform: translateY(4px); box-shadow: 0 1px 0 #596d49; }
.bite-button { position: absolute; left: 18px; bottom: 16px; z-index: 3; border: 3px solid var(--paper); border-radius: 50%; width: 66px; height: 66px; background: var(--rose); color: var(--paper); box-shadow: 0 5px 0 var(--rose-dark); font-weight: 800; font-size: .8rem; }
.bite-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rose-dark); }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .35s ease; background: rgba(52, 43, 37, .12); }
.overlay.is-visible { opacity: 1; pointer-events: auto; }
.level-overlay { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(52,43,37,.26); }
.level-overlay[hidden] { display: none !important; }
.wardrobe-overlay { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(52,43,37,.3); }
.wardrobe-overlay[hidden] { display: none !important; }
.level-sheet { width: min(610px, 100%); max-height: calc(100% - 10px); overflow: auto; background: var(--paper); padding: 24px; box-shadow: 0 20px 40px rgba(52,43,37,.22); }
.wardrobe-sheet { width: min(680px, 100%); max-height: calc(100% - 10px); overflow: auto; background: var(--paper); padding: 24px; box-shadow: 0 20px 40px rgba(52,43,37,.22); }
.level-sheet-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.level-sheet h2 { margin: 0; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.04em; }
.close-menu { border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; line-height: 1; }
.level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.level-choice { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 11px; text-align: left; }
.level-choice:hover, .level-choice:focus-visible { border-color: var(--rose); background: #fff5ee; outline: 0; }
.level-choice.is-complete { border-color: #b8cba7; background: #f7fbf2; }
.level-choice.is-complete .level-number { background: var(--moss); color: white; }
.level-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--rose-dark); font-weight: 800; }
.level-choice strong, .level-choice small { display: block; }
.level-choice small { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.wardrobe-balance { margin: 14px 0 0; color: var(--muted); font-size: .88rem; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.outfit-card { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); background: #fffdf8; text-align: left; }
.outfit-card.is-equipped { border-color: var(--moss); background: #f4f8ef; }
.outfit-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 1.55rem; }
.outfit-card strong, .outfit-card small { display: block; }
.outfit-card small { margin-top: 3px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.outfit-card button { grid-column: 2; justify-self: start; margin-top: 3px; border: 0; border-radius: 99px; padding: 6px 10px; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 800; }
.outfit-card.is-equipped button { background: var(--moss); }
.outfit-card button:disabled { background: #b5aaa0; cursor: not-allowed; }
.overlay-paper { max-width: 410px; text-align: center; padding: 30px 34px 32px; border: 1px solid rgba(229,214,199,.9); background: rgba(255,250,242,.95); box-shadow: 0 20px 40px rgba(52,43,37,.2); }
.overlay-paper h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.18; letter-spacing: -.04em; }
.overlay-paper > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; font-size: .9rem; }
.play-button { margin-top: 8px; border: 0; background: var(--ink); color: var(--paper); padding: 13px 18px; border-radius: 99px; font-weight: 700; }
.play-button span { margin-left: 7px; color: #f5c879; font-size: 1.1em; }
.play-button:hover { transform: translateY(-1px); background: var(--rose-dark); }
.control-key { font-size: .74rem; }
.next-button { border: 0; border-radius: 99px; padding: 8px 12px; background: var(--moss); color: white; font-weight: 700; }
.back-button { border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; background: transparent; color: var(--ink); font-size: .76rem; }

@media (max-width: 820px) {
  .shell { width: min(100% - 24px, 720px); padding-top: 16px; }
  .topbar { gap: 8px; flex-wrap: wrap; }
  .brand { margin-right: auto; }
  .crumb-bank { padding: 5px 8px 5px 5px; }
  .crumb-bank small { display: none; }
  .quiet-button { padding: 7px 10px; font-size: .78rem; }
  .topbar-note { display: none; }
  .game-layout { grid-template-columns: 1fr; gap: 8px; padding-top: 18px; }
  .story-panel { padding: 10px 0 14px; }
  h1 { max-width: none; font-size: 2.05rem; }
  .mission-copy { margin: 9px 0 14px; }
  .character-card, .objective-list { display: none; }
  .game-head, .game-foot { padding: 11px 12px; }
  .level-grid { grid-template-columns: 1fr; }
  .wardrobe-grid { grid-template-columns: 1fr; }
  .level-sheet { padding: 18px; }
  .control-key { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }