:root {
  color-scheme: dark;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ink: #f7f1dc;
  --muted: #b9c9ce;
  --night: #10212c;
  --glass: rgba(17, 39, 49, 0.82);
  --glass-soft: rgba(29, 52, 62, 0.66);
  --line: rgba(224, 241, 235, 0.2);
  --gold: #f7c86d;
  --gold-bright: #ffe6a8;
  --teal: #8bc8c4;
  --shadow: 0 18px 50px rgba(4, 12, 18, 0.45);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 280px;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #09131b;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 18%, rgba(247, 200, 109, 0.17), transparent 26rem),
    linear-gradient(150deg, #0a1720, #1b3541 53%, #0d1d28);
}

button,
select { font: inherit; }

button {
  color: inherit;
  border: 0;
  cursor: pointer;
}

button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.app-shell {
  position: relative;
  width: min(100vw, 540px);
  height: 100dvh;
  margin: auto;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #56727c 0%, #294754 36%, #132b37 100%);
  box-shadow: var(--shadow);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 20%, transparent 80%, rgba(0,0,0,.16));
}

.screen,
.game-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen {
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  text-align: center;
  background:
    linear-gradient(180deg, rgba(7, 20, 29, .18), rgba(7, 20, 29, .84)),
    url("./assets/scenes/concept-keyart.png") center/cover;
}

.screen::after,
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,.015) 49px 50px);
  mix-blend-mode: screen;
}

.brand-mark {
  width: 96px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 209, 121, .58));
  animation: breathe 3s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold-bright);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1,
h2,
p { margin: 0; }

h1 {
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(2.35rem, 10vw, 3.8rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: .08em;
  text-shadow: 0 4px 26px rgba(0,0,0,.45);
}

h2 {
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: clamp(1.65rem, 7vw, 2.45rem);
  font-weight: 500;
}

.subtitle {
  max-width: 28rem;
  color: #e0e9e6;
  font-size: .96rem;
  line-height: 1.7;
}

.title-actions,
.modal-actions {
  display: grid;
  width: min(100%, 310px);
  gap: 10px;
}

.primary,
.secondary,
.text-button {
  min-height: 48px;
  border-radius: 999px;
  padding: 12px 22px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.primary {
  color: #1a2930;
  background: linear-gradient(180deg, #ffe6a8, #edb85d);
  box-shadow: 0 7px 24px rgba(240, 183, 83, .26);
  font-weight: 750;
}

.secondary {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(12, 32, 41, .7);
}

.text-button { background: transparent; color: var(--muted); }
.primary:hover, .secondary:hover, .icon-button:hover, .chapter-node:hover { transform: translateY(-2px); }
.primary:active, .secondary:active, .icon-button:active { transform: translateY(0) scale(.98); }

.corner-actions {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.mini-button,
.icon-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: rgba(13, 31, 40, .72);
  backdrop-filter: blur(12px);
}

.mini-button { padding: 0 12px; font-size: .8rem; }
.icon-button img, .objective-chip img { width: 28px; height: 28px; object-fit: contain; }

.loader {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c4 0 7%, #f8c76d 9% 19%, transparent 22%);
  filter: drop-shadow(0 0 18px #f8c76d);
  animation: breathe 1.6s ease-in-out infinite;
}

.chapter-map {
  display: grid;
  width: min(100%, 360px);
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.chapter-node {
  position: relative;
  display: grid;
  min-height: 118px;
  place-items: center;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 46% 54% 38% 62% / 58% 43% 57% 42%;
  background: rgba(31, 57, 67, .76);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease;
}

.chapter-node:nth-child(5) { grid-column: 1 / -1; width: 52%; justify-self: center; }
.chapter-node.done { border-color: rgba(255, 221, 145, .66); background: rgba(86, 72, 45, .72); }
.chapter-node:disabled { cursor: not-allowed; opacity: .47; }
.node-number { color: var(--gold-bright); font-family: Georgia, serif; font-size: 1.35rem; }
.node-name { font-size: .78rem; }

.topbar {
  z-index: 20;
  display: grid;
  height: 72px;
  flex: 0 0 72px;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 9px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(180deg, rgba(11,28,37,.92), rgba(11,28,37,.62));
  backdrop-filter: blur(12px);
}

.objective-chip {
  display: flex;
  min-width: 0;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(42, 67, 76, .7);
  font-size: .83rem;
  white-space: nowrap;
}

.scene {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  touch-action: none;
  background-position: center;
  background-size: cover;
  user-select: none;
}

.scene.level-1,
.scene.level-4 { background-image: linear-gradient(rgba(15,38,47,.2), rgba(8,23,30,.54)), url("./assets/scenes/concept-keyart.png"); }
.scene.level-2 { background-image: linear-gradient(rgba(15,38,47,.12), rgba(8,23,30,.5)), url("./assets/scenes/fog-courtyard.png"); }
.scene.level-3,
.scene.level-5 { background-image: linear-gradient(rgba(15,38,47,.1), rgba(8,23,30,.5)), url("./assets/scenes/interview-room.png"); }

.player-character,
.interviewer-character {
  position: absolute;
  z-index: 3;
  width: clamp(78px, 24%, 118px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 13px rgba(4, 15, 20, .4));
}
.player-character { left: 3%; bottom: 4%; }
.interviewer-character { right: 4%; top: 3%; opacity: .76; }

.scene-hint {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 16px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 8px 14px;
  color: #edf5f0;
  background: rgba(8,26,34,.75);
  font-size: .75rem;
  text-align: center;
  backdrop-filter: blur(8px);
}

.orb {
  position: absolute;
  z-index: 8;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 221, 139, .88));
  touch-action: none;
}

.orb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.goal-beacon {
  position: absolute;
  z-index: 4;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,224,155,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,200,.9), rgba(247,200,109,.3) 22%, transparent 63%);
  box-shadow: 0 0 38px rgba(247,200,109,.45);
  animation: beacon 2s ease-in-out infinite;
}

.fog-zone {
  position: absolute;
  z-index: 7;
  width: 46%;
  height: 43%;
  min-width: 128px;
  min-height: 118px;
  overflow: visible;
  border: 1px solid rgba(237,249,246,.24);
  border-radius: 47% 53% 59% 41% / 58% 44% 56% 42%;
  color: var(--ink);
  background:
    radial-gradient(circle at 38% 42%, rgba(231,242,239,.94), rgba(160,185,187,.75) 45%, rgba(93,130,140,.62) 75%);
  box-shadow: 0 10px 35px rgba(8,20,26,.36);
  transition: opacity .28s ease, transform .28s ease;
  touch-action: none;
}

.fog-zone.left { left: 3%; top: 22%; }
.fog-zone.right { right: 3%; top: 31%; }
.fog-zone.center { left: 27%; top: 22%; }
.fog-zone.revealed { pointer-events: none; transform: scale(1.12); }
.fog-label { position: relative; z-index: 2; font-size: .76rem; text-shadow: 0 1px 4px #17313d; }
.memory-shard {
  position: absolute;
  z-index: 6;
  width: 64px;
  height: 76px;
  transform: translate(-50%, -50%) rotate(7deg);
  border: 1px solid rgba(255,229,170,.7);
  border-radius: 48% 52% 42% 58%;
  color: #142932;
  background: linear-gradient(145deg, #fff6cf, #dfb765);
  box-shadow: 0 0 28px rgba(255,222,144,.55);
}

.mirror-layout {
  position: absolute;
  inset: 8% 4% 18%;
}

.mirror {
  position: absolute;
  z-index: 9;
  width: 84px;
  height: 112px;
  transform: translate(-50%, -50%) rotate(var(--mirror-angle));
  border: 2px solid rgba(247, 210, 130, .55);
  border-radius: 44% 44% 15% 15%;
  padding: 0;
  background: linear-gradient(125deg, rgba(228,246,245,.34), rgba(93,139,151,.25)), url("./assets/games/mirror-panel.png") center/contain no-repeat;
  box-shadow: inset 0 0 22px rgba(255,255,255,.22), 0 9px 24px rgba(0,0,0,.3);
  transition: transform .24s ease, box-shadow .2s ease;
}

.mirror::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: inherit;
}

.mirror.correct { box-shadow: 0 0 30px rgba(255,218,133,.7), inset 0 0 20px rgba(255,255,255,.3); }
.mirror-a { left: 20%; top: 66%; }
.mirror-b { left: 50%; top: 34%; }
.mirror-c { left: 80%; top: 62%; }

.light-path {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.light-path polyline {
  fill: none;
  stroke: rgba(255, 224, 151, .62);
  stroke-width: 1.4;
  stroke-dasharray: 3 2;
  filter: drop-shadow(0 0 3px #ffd87c);
}

.mirror-target {
  position: absolute;
  z-index: 6;
  left: 96%;
  top: 25%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 224, 151, .58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 174, .66), rgba(247, 200, 109, .14) 42%, transparent 68%);
  box-shadow: 0 0 14px rgba(247, 200, 109, .25);
}
.mirror-target.lit { background: #ffe6a8; box-shadow: 0 0 28px rgba(255, 226, 160, .92); }

.story-workspace {
  position: absolute;
  z-index: 10;
  inset: auto 10px 12px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 22px;
  padding: 10px;
  background: rgba(10,29,37,.76);
  backdrop-filter: blur(10px);
}

.story-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .73rem; }
.story-feedback { color: var(--gold-bright); }
.story-slots { display: grid; grid-template-columns: repeat(4, minmax(55px, 1fr)); gap: 6px; }
.story-slot {
  min-width: 0;
  min-height: 64px;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 12px;
  padding: 5px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-size: .64rem;
}
.story-slot.filled { border-style: solid; border-color: rgba(247,200,109,.5); color: var(--ink); background: rgba(110,87,46,.36); }
.story-slot.drop-ready { border-color: var(--gold-bright); background: rgba(247,200,109,.18); }

.card-tray {
  z-index: 18;
  display: flex;
  min-height: 132px;
  flex: 0 0 132px;
  gap: 9px;
  overflow-x: auto;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12,29,37,.94), rgba(7,18,25,.98));
  scrollbar-width: thin;
  touch-action: pan-x;
}

.experience-card {
  position: relative;
  width: 88px;
  min-width: 88px;
  height: 104px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  padding: 44px 7px 7px;
  color: #122630;
  background: linear-gradient(160deg, #f4edda, #cdbd9e);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  text-align: left;
  touch-action: none;
}

.experience-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 38px;
  background-image: var(--card-art);
  background-position: center;
  background-size: cover;
  opacity: .86;
}
.experience-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--type-color); }
.experience-card.selected { outline: 3px solid var(--gold-bright); transform: translateY(-4px); }
.card-title { display: block; font-weight: 800; font-size: .71rem; line-height: 1.18; }
.card-type { display: block; margin-top: 5px; color: #41545b; font-size: .55rem; text-transform: uppercase; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; opacity: .88; transform: translate(-50%, -50%) rotate(4deg); }

.focus-wrap {
  position: absolute;
  z-index: 14;
  left: 14px;
  top: 12px;
  display: flex;
  width: min(46%, 190px);
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(8,25,33,.75);
}
.focus-wrap img { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
.focus-track { height: 8px; flex: 1; overflow: hidden; border-radius: 99px; background: #435b62; }
.focus-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9bb9b7, #ffe2a0); transition: width .1s linear; }
.focus-button {
  position: absolute;
  z-index: 13;
  right: 12px;
  top: 10px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 8px 13px;
  color: var(--ink);
  background: rgba(31,55,63,.82);
  touch-action: none;
}

.completion-wash {
  position: absolute;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,239,180,.58), transparent 54%);
  animation: completion .8s ease-out both;
}

.modal-backdrop {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4,13,19,.72);
  backdrop-filter: blur(10px);
}

.modal {
  width: min(100%, 390px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(160deg, rgba(34,61,70,.97), rgba(12,30,39,.98));
  box-shadow: var(--shadow);
  text-align: center;
}
.modal > * + * { margin-top: 16px; }
.result-icon { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(247,200,109,.45)); }

.settings-list { display: grid; gap: 10px; text-align: left; }
.setting-row {
  display: grid;
  min-height: 48px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}
.setting-row button, .setting-row select {
  min-width: 92px;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--ink);
  background: rgba(255,255,255,.08);
}

.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  max-width: min(90vw, 360px);
  transform: translate(-50%, 20px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--ink);
  background: rgba(7,24,32,.93);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes breathe { 0%,100% { transform: scale(.94); opacity: .76; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes beacon { 0%,100% { transform: translate(-50%,-50%) scale(.9); opacity: .68; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } }
@keyframes completion { from { opacity: 0; transform: scale(.8); } 55% { opacity: 1; } to { opacity: 0; transform: scale(1.16); } }

@media (min-width: 700px) {
  body { padding: 18px; }
  .app-shell { height: calc(100dvh - 36px); border: 1px solid rgba(255,255,255,.15); border-radius: 28px; }
}

@media (max-height: 700px) {
  .card-tray { min-height: 108px; flex-basis: 108px; padding-top: 8px; }
  .experience-card { height: 88px; padding-top: 39px; }
  .story-workspace { bottom: 7px; }
  .story-slot { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after { animation: none !important; transition-duration: .01ms !important; }