:root {
  color-scheme: light;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --ink: #17383d;
  --teal: #0d6f73;
  --teal-dark: #07545a;
  --yellow: #ffc83d;
  --coral: #ed6a55;
  --sky: #dff6f5;
  --paper: #fffdf8;
  --shadow: 0 14px 36px rgb(14 58 61 / 22%);
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; min-height: 100%; margin: 0; }
body { color: var(--ink); background: #bfe8e9; overflow-x: hidden; }
button { font: inherit; letter-spacing: 0; }
button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--teal); }
.hidden { display: none !important; }
.screen { min-height: 100vh; }

.welcome-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr);
  align-items: center;
  min-height: 100svh;
  padding: clamp(32px, 6vw, 88px);
  overflow: hidden;
  background: linear-gradient(115deg, rgb(5 72 78 / 96%) 0 47%, rgb(5 72 78 / 58%) 72%, transparent), url("assets/island-map.png") center/cover;
}
.welcome-screen::after { content: ""; position: absolute; inset: auto 0 0; height: 10px; background: repeating-linear-gradient(90deg, var(--yellow) 0 70px, var(--coral) 70px 140px, #38a6a1 140px 210px); }
.welcome-copy { position: relative; z-index: 1; max-width: 700px; color: white; }
.kicker { margin: 0 0 12px; color: #ffe084; font-size: .88rem; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(2.7rem, 7vw, 6.2rem); line-height: .98; letter-spacing: 0; text-shadow: 0 4px 0 rgb(0 39 44 / 28%); }
h1 span { display: inline-block; margin-top: 12px; color: var(--yellow); font-size: .52em; line-height: 1.15; }
.lead { max-width: 620px; margin: 28px 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.75; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-btn, .secondary-btn, .quiet-btn, .danger-btn { min-height: 50px; padding: 0 22px; border: 0; border-radius: 6px; font-weight: 900; cursor: pointer; }
.primary-btn { color: #163a39; background: var(--yellow); box-shadow: 0 6px 0 #d29400; }
.primary-btn:hover { transform: translateY(-2px); }
.quiet-btn { color: #fff; background: rgb(255 255 255 / 14%); border: 2px solid rgb(255 255 255 / 55%); }
.privacy-note { margin-top: 25px; font-size: .88rem; color: #d4f7f5; }
.privacy-note span { color: #83e2a7; }
.welcome-badge { position: relative; z-index: 1; justify-self: center; filter: drop-shadow(0 15px 22px rgb(0 0 0 / 25%)); animation: float 3.5s ease-in-out infinite; }
.shield-mark { display: grid; place-items: center; width: clamp(180px, 24vw, 300px); aspect-ratio: .85; color: white; background: #ef7358; border: 14px solid #fff4cf; clip-path: polygon(50% 0, 92% 14%, 88% 68%, 50% 100%, 12% 68%, 8% 14%); }
.shield-mark span { font-size: clamp(4rem, 9vw, 8rem); font-weight: 1000; }
.ribbon { margin: -32px -30px 0; padding: 14px 28px; color: #fff; background: var(--teal-dark); text-align: center; font-size: .78rem; font-weight: 900; letter-spacing: .16em; transform: rotate(-3deg); }
@keyframes float { 50% { transform: translateY(-12px) rotate(1deg); } }

.game-screen { display: grid; grid-template-rows: auto 1fr auto; background: #e8f7f4; }
.game-hud, .game-footer { z-index: 5; display: flex; align-items: center; gap: 24px; padding: 12px clamp(14px, 3vw, 36px); background: var(--paper); box-shadow: 0 2px 16px rgb(18 67 69 / 14%); }
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 205px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup small { color: #628086; font-size: .73rem; }
.mini-shield { display: grid; place-items: center; width: 40px; aspect-ratio: 1; color: #fff; background: var(--coral); font-weight: 900; clip-path: polygon(50% 0, 94% 18%, 86% 75%, 50% 100%, 14% 75%, 6% 18%); }
.mission-progress { display: flex; align-items: center; gap: 12px; flex: 1; max-width: 430px; margin-inline: auto; font-size: .83rem; font-weight: 900; }
.progress-track { flex: 1; height: 10px; overflow: hidden; background: #d8e7e5; border-radius: 99px; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #27a87f, var(--yellow)); transition: width .4s ease; }
.icon-btn { width: 44px; height: 44px; border: 1px solid #bdd4d1; border-radius: 50%; color: var(--teal); background: #f2fbfa; font-size: 1.45rem; cursor: pointer; }

.map { position: relative; min-height: 560px; overflow: hidden; isolation: isolate; background: #7acdd8; }
.map > img { position: absolute; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.map-shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgb(11 70 72 / 3%), rgb(7 61 61 / 9%)); pointer-events: none; }
.mission-pin { position: absolute; z-index: 2; display: grid; grid-template-columns: 46px auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-width: 176px; padding: 9px 12px 9px 9px; border: 3px solid #fff; border-radius: 8px; color: #fff; background: rgb(7 72 77 / 92%); box-shadow: 0 7px 0 rgb(5 53 56 / 38%), 0 10px 22px rgb(0 0 0 / 24%); cursor: pointer; transform: translate(-50%, -50%); transition: transform .2s ease, filter .2s ease; }
.mission-pin::after { content: ""; position: absolute; bottom: -13px; left: calc(50% - 9px); width: 18px; height: 18px; background: inherit; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.mission-pin:hover, .mission-pin.near { transform: translate(-50%, -55%) scale(1.06); filter: brightness(1.13); }
.mission-pin.done { background: #176f4c; }
.mission-pin.done::before { content: "✓"; position: absolute; right: -9px; top: -12px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid white; border-radius: 50%; color: #174438; background: var(--yellow); font-weight: 1000; }
.pin-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 1.45rem; font-weight: 1000; }
.mission-pin b { align-self: end; font-size: .93rem; text-align: left; }
.mission-pin small { align-self: start; color: #d7f2ef; font-size: .7rem; text-align: left; }
.pin-kit { left: 22%; top: 30%; }
.pin-truth { left: 78%; top: 28%; }
.pin-team { left: 25%; top: 71%; }
.pin-cyber { left: 76%; top: 72%; }
.player { --x: 50; --y: 58; position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 54px; height: 78px; transform: translate(-50%, -50%); filter: drop-shadow(0 7px 4px rgb(0 0 0 / 30%)); transition: left .12s linear, top .12s linear; }
.player.walking { animation: walk .25s infinite alternate; }
.player > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.player i { position: absolute; right: 8px; bottom: 1px; left: 8px; height: 10px; border-radius: 50%; background: rgb(0 0 0 / 24%); z-index: -1; }
@keyframes walk { to { transform: translate(-50%, -54%) rotate(-2deg); } }
.nearby { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 14px; border: 2px solid white; border-radius: 5px; color: white; background: rgb(9 60 64 / 86%); font-size: .8rem; font-weight: 800; }

.game-footer { position: relative; justify-content: space-between; min-height: 86px; }
.badge-row { display: flex; gap: 9px; }
.badge-slot { width: 52px; text-align: center; opacity: .4; filter: grayscale(1); }
.badge-slot.earned { opacity: 1; filter: none; animation: badge-in .55s ease both; }
.badge-slot span { display: grid; place-items: center; width: 42px; height: 42px; margin: auto; border: 3px solid #fff; border-radius: 50%; color: white; background: #8faaa8; box-shadow: 0 2px 0 #7a9694; font-weight: 1000; }
.badge-slot.earned span { color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 #d29800; }
.badge-slot small { display: block; margin-top: 3px; font-size: .58rem; font-weight: 800; }
@keyframes badge-in { 0% { transform: scale(.2) rotate(-20deg); } 70% { transform: scale(1.2) rotate(4deg); } }
.map-tip { color: #668184; font-size: .78rem; }
.touch-hint, .dpad { display: none; }
.dpad { grid-template: repeat(2, 36px) / repeat(3, 40px); gap: 4px; }
.dpad button { border: 0; border-radius: 5px; color: #fff; background: var(--teal); }
.dpad button[data-dir="up"] { grid-column: 2; }
.dpad button[data-dir="left"] { grid-area: 2 / 1; }
.dpad button[data-dir="down"] { grid-area: 2 / 2; }
.dpad button[data-dir="right"] { grid-area: 2 / 3; }

dialog { max-width: none; border: 0; padding: 0; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgb(5 42 45 / 74%); backdrop-filter: blur(5px); }
.game-dialog { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.mission-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 15px; padding: 18px 22px; color: #fff; background: var(--teal); }
.mission-head .mission-symbol { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 1.7rem; font-weight: 1000; }
.mission-head h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.mission-head p { margin: 3px 0 0; color: #d5f2ee; font-size: .83rem; }
.dialog-close { margin-left: auto; width: 42px; height: 42px; border: 0; color: inherit; background: transparent; font-size: 2rem; cursor: pointer; }
.mission-body { padding: clamp(20px, 4vw, 36px); }
.mission-instruction { margin: 0 auto 24px; max-width: 680px; text-align: center; font-size: 1.08rem; line-height: 1.65; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.choice-card { min-height: 126px; padding: 14px; border: 3px solid #d6e7e4; border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; transition: .16s ease; }
.choice-card:hover { border-color: #69aaa5; transform: translateY(-2px); }
.choice-card.selected { border-color: var(--teal); background: #e8f8f4; box-shadow: inset 0 0 0 2px var(--teal); }
.choice-card.wrong { border-color: var(--coral); background: #fff0ed; animation: shake .35s; }
.choice-card strong { display: block; margin-top: 8px; font-size: .98rem; }
.choice-card .item-art { display: block; font-size: 2.3rem; }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.mission-submit { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.feedback { margin: 20px 0 0; padding: 14px 16px; border-left: 5px solid #38a77f; background: #e9f7ef; line-height: 1.55; }
.feedback.bad { border-color: var(--coral); background: #fff0ed; }
.message-card { max-width: 620px; margin: auto; padding: 22px; border: 3px solid #d9e9e7; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgb(15 75 77 / 10%); }
.message-source { display: flex; justify-content: space-between; margin-bottom: 16px; color: #6c8587; font-size: .78rem; }
.message-text { font-size: 1.12rem; font-weight: 800; line-height: 1.65; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.action-btn { min-height: 64px; border: 2px solid #acd0cc; border-radius: 6px; color: var(--teal-dark); background: #f4fbfa; font-weight: 900; cursor: pointer; }
.action-btn:hover { color: white; background: var(--teal); }
.allocation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.household { padding: 18px; border: 3px solid #d9e7e5; border-radius: 8px; background: white; text-align: center; }
.household h3 { margin: 8px 0 4px; }
.household p { min-height: 52px; color: #607b7e; font-size: .83rem; line-height: 1.45; }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; }
.stepper button { width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: var(--teal); font-size: 1.2rem; cursor: pointer; }
.stepper output { font-size: 1.5rem; font-weight: 1000; }
.stock-meter { margin: 0 auto 22px; max-width: 420px; padding: 12px; color: white; background: var(--teal); text-align: center; font-weight: 900; }
.shield-board { position: relative; height: 330px; overflow: hidden; border: 5px solid #8dd8dc; border-radius: 8px; background: linear-gradient(#c5f2f2, #eafcfa 65%, #b7e2d5 65%); }
.shield-base { position: absolute; bottom: 10px; left: 50%; width: 100px; height: 55px; transform: translateX(-50%); border: 5px solid white; border-radius: 50px 50px 8px 8px; color: white; background: var(--teal); display: grid; place-items: center; font-weight: 1000; }
.falling-token { position: absolute; top: -55px; width: 120px; min-height: 48px; padding: 7px; border: 2px solid white; border-radius: 6px; box-shadow: 0 5px 12px rgb(0 0 0 / 18%); font-size: .74rem; font-weight: 900; cursor: pointer; animation: fall 4.8s linear forwards; }
.falling-token.risk { color: #662a24; background: #ffc3b8; }
.falling-token.safe { color: #1e5948; background: #b8efd3; }
@keyframes fall { to { top: 290px; transform: rotate(8deg); } }
.scoreline { display: flex; justify-content: center; gap: 24px; margin: 15px 0; font-weight: 900; }
.complete-panel { padding: 42px 24px; text-align: center; }
.complete-medal { display: grid; place-items: center; width: 128px; height: 128px; margin: 0 auto 20px; border: 10px solid #ffdf80; border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 3.5rem; font-weight: 1000; animation: badge-in .7s ease both; }
.complete-panel h2 { margin: 0 0 10px; font-size: 2rem; }
.complete-panel p { max-width: 580px; margin: 0 auto 22px; line-height: 1.65; }

.stats-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: clamp(24px, 5vw, 42px); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.stats-dialog > .dialog-close { position: absolute; top: 10px; right: 10px; color: var(--ink); }
.stats-dialog h2 { margin: 0 0 22px; font-size: 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-card { padding: 16px 10px; border-top: 5px solid var(--yellow); background: #edf7f5; text-align: center; }
.stat-card strong { display: block; font-size: 1.7rem; }
.stat-card small { color: #607b7e; }
.chart-block { margin-top: 26px; }
.chart-block h3 { font-size: 1rem; }
.stats-chart { display: grid; gap: 10px; }
.chart-row { display: grid; grid-template-columns: 105px 1fr 34px; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; }
.chart-bar { height: 18px; background: #dce9e7; }
.chart-bar i { display: block; height: 100%; min-width: 2px; background: var(--teal); }
.stats-actions { display: flex; gap: 10px; margin-top: 26px; }
.secondary-btn { color: white; background: var(--teal); }
.danger-btn { color: #8d3228; background: #ffebe7; }
.privacy-detail { color: #667f81; font-size: .78rem; line-height: 1.55; }

#confetti { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.confetti-piece { position: absolute; top: -15px; width: 10px; height: 18px; animation: confetti-fall 1.8s ease-in forwards; }
@keyframes confetti-fall { to { top: 105%; transform: rotate(600deg) translateX(30px); } }

@media (max-width: 760px) {
  .welcome-screen { grid-template-columns: 1fr; align-content: center; padding: 28px 22px 50px; background-position: 60% center; }
  .welcome-screen::before { content: ""; position: absolute; inset: 0; background: rgb(4 60 65 / 42%); }
  .welcome-badge { display: none; }
  .lead { margin: 20px 0; }
  .game-hud { gap: 10px; }
  .brand-lockup { min-width: 0; }
  .brand-lockup small { display: none; }
  .mission-progress { display: block; }
  .mission-progress span { display: block; margin-bottom: 4px; }
  .map { min-height: 510px; }
  .mission-pin { min-width: 0; width: 54px; height: 54px; grid-template: 1fr / 1fr; padding: 4px; border-radius: 50%; }
  .mission-pin .pin-icon { grid-row: auto; width: 40px; height: 40px; }
  .mission-pin b, .mission-pin small { display: none; }
  .game-footer { min-height: 106px; padding: 8px 12px; }
  .map-tip { display: none; }
  .badge-slot { width: 40px; }
  .badge-slot span { width: 34px; height: 34px; }
  .badge-slot small { display: none; }
  .dpad { display: grid; }
  .keyboard-hint { display: none; }
  .touch-hint { display: inline; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .allocation { grid-template-columns: 1fr; }
  .household p { min-height: 0; }
  .action-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Stage 2 mission system */
.ui-icon, .pin-icon svg, .icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin-icon svg { width: 27px; height: 27px; }
.hud-actions { display: flex; gap: 8px; }
.icon-btn { display: grid; place-items: center; flex: 0 0 44px; }
.icon-btn svg { width: 22px; height: 22px; }
.mission-head .mission-symbol .ui-icon { width: 30px; height: 30px; }
.mission-title { min-width: 0; }
.xiaoshou-character { position: relative; display: grid; place-items: center; overflow: hidden; }
.xiaoshou-image { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.helper-face { flex: 0 0 50px; width: 50px; height: 50px; border: 3px solid rgb(255 255 255 / 78%); border-radius: 50%; background: #dff4ef; }
.helper-face.alert, .helper-face.is-alert { background: #ffe0d9; }
.helper-face.think, .helper-face.is-confused { background: #dff1f7; }
.helper-face.is-happy { background: #fff0b3; }
.helper-face .xiaoshou-image { width: 68px; max-width: none; height: 85px; transform: translateY(3px); }
.scenario-strip { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 16px; padding: 12px 16px; border-left: 6px solid var(--yellow); background: #eef8f6; }
.scenario-strip b { flex: 0 0 auto; color: var(--teal-dark); }
.scenario-strip span { line-height: 1.45; }
.permission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.permission-card { position: relative; min-height: 142px; padding: 17px 12px; border: 3px solid #d3e5e2; border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; }
.permission-card strong, .permission-card small { display: block; }
.permission-card strong { margin-top: 10px; font-size: .98rem; }
.permission-card small { margin-top: 5px; color: #688184; font-size: .72rem; }
.permission-toggle { display: grid; place-items: center; width: 46px; height: 46px; margin: auto; border: 2px solid #b9d3d0; border-radius: 50%; color: #77918f; background: #f3f9f8; }
.permission-card.selected { border-color: var(--coral); background: #fff0ed; box-shadow: inset 0 0 0 2px var(--coral); }
.permission-card.selected .permission-toggle { color: #fff; background: var(--coral); border-color: var(--coral); }
.permission-card.selected small { color: #9a3f34; }

.detective-board { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.4fr); gap: 16px; align-items: stretch; }
.challenge-truth-media { position: relative; display: grid; grid-template-rows: minmax(180px, 1fr); min-width: 0; min-height: 240px; margin: 0; overflow: hidden; border: 3px solid #9abfbc; border-radius: 8px; background: #fff; }
.simulation-corner { position: absolute; z-index: 4; top: 7px; right: 7px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / 76%); border-radius: 4px; color: #fff; background: rgb(35 61 66 / 78%); font-size: .54rem; font-weight: 900; line-height: 1; }
.challenge-media-visual { position: relative; display: grid; place-items: center; min-height: 120px; overflow: hidden; background: #e8f4f2; }
.challenge-media-visual > img { display: block; width: 100%; height: 148px; object-fit: cover; }
.media-context-copy { position: absolute; right: 7px; bottom: 7px; left: 7px; padding: 6px 8px; color: #fff; background: rgb(22 49 68 / 90%); font-size: .58rem; line-height: 1.3; }
.media-context-copy b, .media-context-copy span, .media-context-copy small { display: block; }
.media-context-copy b { color: #ffdf72; font-size: .7rem; }
.sim-phone { width: min(210px, 88%); padding: 8px; border: 5px solid #26434a; border-radius: 12px; background: #d9efeb; box-shadow: 0 5px 0 rgb(38 67 74 / 22%); }
.sim-chat-head { display: block; padding: 4px 6px; border-bottom: 2px solid #98c4bf; color: #285c5e; font-size: .64rem; font-weight: 1000; }
.sim-forward { width: 82%; margin: 9px 0 3px auto; padding: 8px; border-radius: 7px 7px 2px 7px; background: #fff; box-shadow: 0 2px 6px rgb(24 67 70 / 16%); }
.sim-forward small, .sim-forward b, .sim-forward em, .sim-forward i { display: block; }
.sim-forward small { color: #a14a3d; font-size: .58rem; font-weight: 900; }
.sim-forward b { margin-top: 3px; color: #a32525; font-size: .88rem; }
.sim-forward em { margin-top: 2px; color: #596f72; font-size: .6rem; font-style: normal; }
.sim-forward i { margin-top: 5px; color: #8a4c45; font-size: .54rem; font-style: normal; font-weight: 900; }
.sim-chat-time { display: block; margin: 2px 9px 0 0; color: #637f7d; font-size: .52rem; font-weight: 900; text-align: right; }
.sim-composite-photo { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 92%; height: 164px; overflow: hidden; border: 5px solid #fff; border-radius: 6px; background: #a9dce2; box-shadow: 0 4px 10px rgb(30 66 73 / 24%); }
.sim-composite-photo.raster { display: block; width: 100%; height: 100%; min-height: 180px; border: 0; border-radius: 0; background: #bfd7dc; box-shadow: none; }
.sim-composite-photo.raster > img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: center; }
.sim-profile-scam.raster { position: relative; display: block; width: 100%; height: 100%; min-height: 180px; overflow: hidden; background: #d6e7eb; }
.sim-profile-scam.raster > img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: center; }
.composite-scene { position: relative; overflow: hidden; }
.composite-scene.left { background: linear-gradient(#89d9ec 0 58%, #75b58e 58%); }
.composite-scene.right { background: linear-gradient(#8296a5 0 58%, #718b72 58%); filter: saturate(.72); }
.composite-scene .sun { position: absolute; top: 18px; left: 20px; width: 29px; height: 29px; border-radius: 50%; background: #ffe06b; box-shadow: 0 0 0 9px rgb(255 224 107 / 22%); }
.composite-scene .cloud { position: absolute; top: 26px; right: 18px; width: 48px; height: 18px; border-radius: 18px; background: #d9e2e5; box-shadow: -14px 5px 0 -2px #d9e2e5; }
.composite-scene .building { position: absolute; bottom: 0; display: block; width: 30px; background: #476f73; }
.composite-scene .building::after { content: ""; position: absolute; inset: 8px; background: repeating-linear-gradient(#ffdf78 0 5px, transparent 5px 11px); }
.composite-scene .one { left: 14px; height: 68px; }
.composite-scene .two { right: 8px; height: 89px; background: #385c67; }
.composite-scene .three { left: 7px; height: 76px; background: #53636d; }
.composite-scene .four { right: 14px; height: 58px; background: #46565e; }
.composite-seam { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 3px; background: repeating-linear-gradient(#fff 0 7px, #d34438 7px 13px); transform: translateX(-50%); }
.composite-seam span { position: absolute; top: 8px; left: 7px; padding: 3px 5px; border-radius: 3px; color: #fff; background: #a92e28; font-size: .5rem; font-weight: 1000; }
.composite-person { position: absolute; z-index: 3; right: 24%; bottom: 25px; width: 39px; height: 69px; border: 4px solid #fff; border-radius: 22px 22px 10px 10px; background: #e78361; box-shadow: 0 0 0 2px rgb(170 47 40 / 45%); }
.composite-person span { position: absolute; top: 7px; left: 9px; width: 14px; height: 14px; border-radius: 50%; background: #613e36; }
.composite-person i { position: absolute; right: -16px; bottom: 8px; width: 22px; border-top: 7px solid #e78361; transform: rotate(-32deg); }
.composite-shadow { position: absolute; z-index: 2; right: 7%; bottom: 23px; width: 65px; height: 11px; border-radius: 50%; background: rgb(29 42 47 / 42%); transform: rotate(-9deg); }
.composite-caption { position: absolute; z-index: 5; right: 7px; bottom: 6px; left: 7px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; color: #fff; background: rgb(22 49 68 / 88%); }
.composite-caption b { font-size: .65rem; }
.composite-caption small { font-size: .5rem; font-weight: 900; text-align: right; }
.sim-video { position: relative; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 5px 10px; width: 92%; min-height: 150px; padding: 12px; overflow: hidden; border: 4px solid #183543; border-radius: 7px; color: #fff; background: #294d5d; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 12%); }
.sim-speaker { position: relative; grid-row: 1 / 4; display: grid; place-items: center; width: 70px; height: 102px; border-radius: 35px 35px 14px 14px; background: #f1c092; }
.sim-speaker > span { width: 30px; height: 30px; border-radius: 50%; background: #704a3d; box-shadow: 0 42px 0 -9px #8f3d36; }
.sim-speaker > i { position: absolute; top: 39px; width: 22px; height: 8px; border: 3px solid #6c3f38; border-top: 0; border-radius: 0 0 16px 16px; }
.sim-speaker > em { position: absolute; right: -7px; bottom: 8px; width: 22px; height: 22px; border: 3px solid #ffd34e; border-radius: 50%; background: #294d5d; }
.sim-play { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; }
.sim-video .ui-icon { width: 30px; height: 30px; color: #fff; fill: rgb(255 255 255 / 12%); }
.sim-video-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 32px; }
.sim-video-title b { font-size: .76rem; }
.sim-video-title small { color: #dbe7e7; font-size: .52rem; font-weight: 900; }
.sync-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sync-compare > span { display: grid; gap: 2px; padding: 5px 6px; border: 1px solid rgb(255 255 255 / 32%); border-radius: 4px; background: rgb(255 255 255 / 8%); }
.sync-compare b { color: #ffe37b; font-size: .56rem; }
.sync-compare i { color: #fff; font-size: .55rem; font-style: normal; font-weight: 900; }
.sync-compare .is-delayed { border-color: #ff9b8d; transform: translateY(4px); }
.sync-compare .is-delayed small { color: #ffb4a8; font-size: .5rem; font-weight: 900; }
.sim-wave { display: flex; align-items: center; gap: 2px; height: 10px; }
.sim-wave em { display: block; width: 11px; border-top: 3px solid #f3cc4f; transform: rotate(6deg); }
.sim-wave em:nth-child(2) { transform: rotate(-10deg); }
.sim-video > p { grid-column: 2; margin: 0; color: #fff; font-size: .58rem; font-weight: 900; }
.sim-notice { display: grid; grid-template-columns: 40px 1fr; gap: 3px 8px; width: 88%; padding: 10px; border: 3px solid #d0aa37; background: #fffdf1; }
.sim-notice .ui-icon { grid-row: 1 / 5; width: 38px; height: 38px; color: #247267; }
.sim-notice b { color: #705212; }
.sim-notice span, .sim-notice small { font-size: .6rem; font-weight: 900; }
.sim-notice small { color: #66787a; }
.sim-post { display: grid; grid-template-columns: 34px 1fr; gap: 9px; width: 86%; padding: 11px; border-left: 6px solid #d35343; background: #fff; box-shadow: 0 3px 9px rgb(39 74 76 / 15%); }
.sim-profile { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #b23f35; font-weight: 1000; }
.sim-post b, .sim-post p, .sim-post small { display: block; }
.sim-post p { margin: 4px 0; font-size: .72rem; font-weight: 900; }
.sim-post small { clear: both; color: #66787a; font-size: .58rem; font-weight: 900; }
.sim-post.fundraiser { border-left-color: #8151a2; }
.sim-post.fundraiser .sim-profile { background: #8151a2; }
.message-card.compact { position: relative; display: grid; place-items: center; min-height: 190px; margin: 0; text-align: center; }
.message-stamp { position: absolute; top: 12px; right: 12px; padding: 5px 8px; color: #8c3e34; background: #ffe2dc; font-size: .7rem; font-weight: 900; transform: rotate(3deg); }
.clue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.clue-card { min-height: 92px; padding: 12px; border: 2px dashed #8ebbb7; border-radius: 7px; color: var(--teal-dark); background: #f1faf8; text-align: left; cursor: pointer; }
.clue-card span { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.clue-card b { font-size: .84rem; }
.clue-card small { display: none; margin-top: 7px; color: var(--ink); font-size: .74rem; line-height: 1.4; }
.clue-card.revealed { border-style: solid; border-color: var(--yellow); background: #fff9e8; }
.clue-card.revealed small { display: block; }
.action-panel, .response-panel { margin-top: 14px; padding: 13px 16px; border-top: 4px solid var(--yellow); background: #f7faf7; }
.action-panel p, .response-panel p { margin: 0 0 10px; text-align: center; font-weight: 900; }

.investigation-layout { display: grid; grid-template-columns: minmax(420px, 1.5fr) minmax(230px, .8fr); gap: 16px; }
.chat-panel { display: grid; gap: 7px; }
.chat-line { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; min-height: 48px; padding: 7px 12px; border: 2px solid #d3e4e2; border-radius: 7px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.chat-line:hover { border-color: #72aaa6; }
.chat-line.flagged { border-color: var(--coral); background: #fff0ed; }
.chat-line.safe-line { border-color: #6bb995; background: #eef9f2; }
.avatar-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--teal); font-weight: 900; }
.case-file { padding: 14px 16px; border: 3px solid #edc85b; border-radius: 7px; background: #fff8db; transform: rotate(.3deg); }
.case-file h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 1rem; }
.case-file h3 b { margin-left: auto; color: var(--coral); }
.case-file ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.case-file li { min-height: 34px; padding-bottom: 5px; border-bottom: 1px dashed #d4b74f; font-size: .8rem; line-height: 1.35; }

.phase-label { display: grid; grid-template-columns: 30px auto 1fr 30px auto; align-items: center; gap: 8px; max-width: 650px; margin: 0 auto 12px; color: #718789; font-size: .8rem; }
.phase-label span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--teal); font-weight: 900; }
.phase-label i { height: 3px; background: #d1e1df; }
.phase-label span:last-of-type { color: var(--teal); background: #dcece9; }
.phase-label.complete-first span:last-of-type { color: #fff; background: var(--teal); }
.shield-board { height: 280px; }
.shield-board.is-ready { display: grid; place-items: center; background: #eaf7f4; }
.cyber-ready-panel { position: relative; z-index: 3; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 8px 12px; width: min(560px, calc(100% - 28px)); padding: 16px; border: 3px solid #62a9a4; border-radius: 8px; background: #fff; box-shadow: 0 7px 0 rgb(36 92 93 / 16%); }
.cyber-ready-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; background: var(--teal); }
.cyber-ready-icon .ui-icon { width: 34px; height: 34px; }
.cyber-ready-panel b, .cyber-ready-panel small { display: block; }
.cyber-ready-panel b { color: var(--teal-dark); font-size: 1rem; }
.cyber-ready-panel small { margin-top: 3px; color: #557174; font-size: .76rem; font-weight: 900; line-height: 1.4; }
.cyber-start-btn { grid-column: 1 / -1; min-height: 52px; margin-top: 4px; }
.shield-board.is-ready .shield-base { opacity: .38; }
.shield-base { gap: 5px; width: 116px; }
.shield-base .ui-icon { width: 20px; height: 20px; }
.inline-retry { display: block; margin: 10px auto 0; }
.safety-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.safety-steps b, .safety-steps span { padding: 7px 10px; border-radius: 5px; font-size: .76rem; }
.safety-steps b { color: #fff; background: var(--teal); }
.safety-steps span { background: #e9f5f2; }
.compact-copy { margin-bottom: 12px; font-size: .94rem; }
.match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.match-card { display: grid; grid-template-columns: 1fr 160px; align-items: center; gap: 10px; min-height: 80px; padding: 12px; border: 2px solid #d3e4e1; border-radius: 7px; background: #fff; font-size: .8rem; line-height: 1.35; }
.match-card select { width: 100%; min-height: 44px; border: 2px solid #8eb9b5; border-radius: 5px; color: var(--ink); background: white; font: inherit; }
.complete-medal .ui-icon { width: 58px; height: 58px; }
.complete-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.success-burst { width: 80px; height: 5px; margin: -14px auto 14px; background: repeating-linear-gradient(90deg, var(--coral) 0 8px, transparent 8px 15px, var(--teal) 15px 23px, transparent 23px 30px); animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scaleX(1.45); } }

.stats-grid { grid-template-columns: repeat(5, 1fr); }
.legacy-note { margin: 18px 0 0; padding: 12px 14px; border-left: 5px solid #e0b53b; background: #fff7d9; font-size: .8rem; line-height: 1.45; }
.quiet-data-btn { min-height: 50px; padding: 0 18px; border: 2px solid #9ebdb9; border-radius: 6px; color: var(--teal-dark); background: white; font-weight: 900; cursor: pointer; }

/* Stage 3 mode selection and early-reader missions */
.mode-dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: clamp(24px, 5vw, 44px); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.mode-dialog > .dialog-close { position: absolute; top: 10px; right: 10px; color: var(--ink); }
.mode-dialog h2 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.4rem); }
.mode-intro { margin: 10px 0 22px; color: #607b7e; line-height: 1.6; }
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mode-card { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; min-height: 180px; padding: 18px; border: 4px solid #c9dfdc; border-radius: 8px; color: var(--ink); background: #f4fbfa; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease; }
.mode-card:hover { transform: translateY(-3px); border-color: var(--teal); }
.mode-card.challenge { background: #fff8df; border-color: #e8c75e; }
.mode-art { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; color: var(--teal-dark); background: #ccefeb; }
.mode-card.challenge .mode-art { color: #774235; background: #ffe59c; }
.mode-art svg { width: 70px; height: 70px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mode-card b, .mode-card small, .mode-card em { display: block; font-style: normal; }
.mode-card b { font-size: 1.45rem; }
.mode-card small { margin-top: 7px; color: #496d70; font-weight: 900; }
.mode-card em { margin-top: 12px; color: #6c8587; font-size: .78rem; line-height: 1.45; }
.mode-back { display: block; margin: 20px auto 0; }
.mode-chip { display: inline-block; margin-right: 4px; padding: 2px 6px; border-radius: 4px; color: var(--ink); background: var(--yellow); font-size: .68rem; }
.voice-btn { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 2px solid rgb(255 255 255 / 65%); border-radius: 50%; color: #fff; background: rgb(255 255 255 / 12%); cursor: pointer; }
.voice-btn .ui-icon { width: 23px; height: 23px; }
.explore-scene { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 26px; max-width: 720px; margin: 0 auto 22px; }
.explore-scene > span { display: grid; place-items: center; width: 170px; height: 170px; border: 5px solid #fff; border-radius: 50%; color: var(--teal-dark); background: #ccefeb; box-shadow: 0 7px 0 #99d4cf; }
.explore-scene svg { width: 108px; height: 108px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.explore-scene p { margin: 0; font-size: clamp(1.2rem, 3vw, 1.65rem); font-weight: 900; line-height: 1.6; }
.explore-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; max-width: 760px; margin: auto; }
.explore-choice { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px; min-height: 94px; padding: 14px 18px; border: 3px solid #9bc8c3; border-radius: 8px; color: var(--teal-dark); background: #fff; text-align: left; cursor: pointer; }
.explore-choice:hover { border-color: var(--teal); background: #eef9f6; }
.explore-choice.wrong { border-color: var(--coral); background: #fff0ed; animation: shake .35s; }
.explore-choice > span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e1f3ef; }
.explore-choice .ui-icon { width: 31px; height: 31px; }
.explore-choice b { font-size: 1.02rem; line-height: 1.45; }
.mode-stats { padding: 10px 0 16px; border-bottom: 1px solid #d7e5e3; }
.mode-stats h4 { margin: 0 0 10px; font-size: .85rem; line-height: 1.5; }

@media (max-width: 900px) {
  .permission-grid { grid-template-columns: repeat(2, 1fr); }
  .detective-board { grid-template-columns: 1fr; }
  .message-card.compact { min-height: 110px; }
  .investigation-layout { grid-template-columns: 1fr; }
  .case-file { transform: none; }
  .match-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .game-hud { align-items: center; }
  .brand-lockup strong { font-size: .82rem; }
  .hud-actions { gap: 4px; }
  .icon-btn { width: 40px; height: 40px; flex-basis: 40px; }
  .mission-head { padding: 13px 12px; gap: 9px; }
  .mission-head .mission-symbol { flex-basis: 44px; width: 44px; height: 44px; }
  .mission-head p { display: none; }
  .helper-face { width: 44px; height: 44px; flex-basis: 44px; }
  .helper-face .xiaoshou-image { width: 60px; height: 76px; }
  .mission-body { padding: 16px 14px 22px; }
  .mission-instruction { margin-bottom: 14px; font-size: .94rem; }
  .permission-card { min-height: 124px; padding: 12px 8px; }
  .clue-grid { grid-template-columns: 1fr; }
  .clue-card { min-height: 58px; }
  .action-row { grid-template-columns: 1fr; }
  .chat-line { min-height: 52px; }
  .phase-label { grid-template-columns: 28px auto 1fr 28px; }
  .phase-label b:last-child { display: none; }
  .shield-board { height: 300px; }
  .match-card { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-actions { flex-direction: column; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { grid-template-columns: 82px 1fr; min-height: 138px; padding: 13px; }
  .mode-art { width: 76px; height: 76px; }
  .mode-art svg { width: 50px; height: 50px; }
  .explore-scene { grid-template-columns: 92px 1fr; gap: 14px; }
  .explore-scene > span { width: 92px; height: 92px; border-width: 4px; }
  .explore-scene svg { width: 60px; height: 60px; }
  .explore-actions { grid-template-columns: 1fr; }
  .explore-choice { min-height: 78px; }
}

/* Stage 4.8 activity readiness and device-separated records */
.offline-status {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: min(620px, 100%);
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 6px;
  color: white;
  background: rgb(2 45 51 / 72%);
}
.offline-status-icon { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; }
.offline-status strong, .offline-status small { display: block; }
.offline-status strong { font-size: .84rem; }
.offline-status small { margin-top: 2px; color: #d7f0ee; font-size: .72rem; line-height: 1.35; }
.offline-status.is-ready { border-color: #82e1a6; }
.offline-status.is-ready .offline-status-icon { color: #82e1a6; background: #82e1a6; }
.offline-status.is-checking .offline-status-icon { color: #f7c84b; border-top-color: transparent; animation: offline-spin .8s linear infinite; }
.offline-status.is-error { border-color: #ffad9f; }
.offline-status.is-error .offline-status-icon { color: #ffad9f; }
.offline-status.is-update { border-color: #8dd8ff; }
.offline-status.is-update .offline-status-icon { color: #8dd8ff; background: #8dd8ff; }
.offline-action { min-height: 38px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 5px; color: white; background: transparent; font-weight: 900; cursor: pointer; }
.offline-action:hover, .offline-action:focus-visible { color: var(--teal-dark); background: white; }
@keyframes offline-spin { to { transform: rotate(360deg); } }

.device-panel { margin-bottom: 18px; padding: 14px; border: 2px solid #c7dfdb; border-radius: 6px; background: #f4fbf9; }
.device-panel h3 { margin: 0; font-size: 1rem; }
.device-panel p { margin: 4px 0 0; }
.profile-controls { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr); gap: 12px; margin-top: 12px; }
.profile-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.profile-controls legend { margin-bottom: 5px; color: #446361; font-size: .72rem; font-weight: 900; }
.segmented-control { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 3px; border: 1px solid #aacbc6; border-radius: 6px; background: white; }
.segmented-control button { min-height: 40px; padding: 4px 10px; border: 0; border-radius: 4px; color: var(--teal-dark); background: transparent; font-weight: 900; cursor: pointer; }
.segmented-control button.active { color: white; background: var(--teal); }
.device-note { color: #5b7472; font-size: .74rem; }
.release-note { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 14px 0 0; color: #d7efed; font-size: .68rem; }
.release-note strong { color: white; }
.release-note span { opacity: .88; }
.game-version { position: absolute; right: 12px; bottom: 8px; z-index: 2; color: #446b6d; font-size: .58rem; font-weight: 900; }

@media (max-width: 700px) {
  .offline-status { grid-template-columns: 14px minmax(0, 1fr); }
  .offline-action { grid-column: 2; width: fit-content; }
  .profile-controls { grid-template-columns: 1fr; }
  .game-version { position: static; display: block; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .offline-status.is-checking .offline-status-icon { animation: none; }
}

/* Stage 4 activity-ready interaction layer */
.staff-tools { display: flex; align-items: center; gap: 10px; width: fit-content; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 28%); }
.staff-tools > span { color: #bfe6e4; font-size: .72rem; font-weight: 900; }
.staff-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid rgb(255 255 255 / 42%); border-radius: 6px; color: #fff; background: rgb(3 43 48 / 46%); font-weight: 900; cursor: pointer; }
.staff-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.stats-caution { margin: 16px 0 0; padding: 10px 12px; border-left: 5px solid var(--coral); background: #fff0ed; font-size: .82rem; font-weight: 900; }
.mission-goal { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto 16px; padding: 10px 14px; border-left: 6px solid var(--yellow); background: #edf8f5; }
.mission-goal > span { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--teal); }
.mission-goal b, .mission-goal small { display: block; }
.mission-goal small { margin-top: 3px; color: #567478; font-size: .75rem; line-height: 1.4; }
.explore-stage, .help-scene { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 44px); max-width: 760px; margin: 0 auto 14px; }
.kid-character { flex: 0 0 112px; width: 112px; height: 140px; overflow: visible; filter: drop-shadow(0 6px 2px rgb(21 54 61 / 18%)); }
.phone-scene { position: relative; width: min(480px, 100%); min-height: 180px; padding: 34px 22px 18px; border: 7px solid #294e53; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 3px #dcebea; }
.phone-scene::before { content: ""; position: absolute; top: 10px; left: 50%; width: 52px; height: 6px; border-radius: 9px; background: #9db6b7; transform: translateX(-50%); }
.phone-scene p { margin: 10px 0 16px; font-size: 1.05rem; font-weight: 900; line-height: 1.55; }
.phone-speaker { color: #687f82; font-size: .72rem; font-weight: 900; }
.shield-ready { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 6px; color: #607b7e; background: #edf4f3; font-size: .78rem; }
.shield-ready.active { color: #fff; background: #238967; animation: shield-flash .45s ease both; }
@keyframes shield-flash { 50% { transform: scale(1.16); box-shadow: 0 0 0 12px rgb(255 200 61 / 30%); } }
.explore-prompt { margin: 12px auto; text-align: center; font-size: 1rem; font-weight: 1000; }
.explore-choice.protected, .explore-choice.helped { border-color: #238967; color: #174c3b; background: #e7f7ee; animation: choice-success .42s ease both; }
@keyframes choice-success { 50% { transform: translateY(-5px) scale(1.03); } }
.truth-playground { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.1fr); gap: 15px; max-width: 760px; margin: auto; }
.truth-step { width: min(760px, 100%); margin: 0 auto; }
.truth-preview-card { margin-bottom: 14px; }
.truth-preview-card .truth-photo-meta, .truth-preview-card .truth-card-fields { display: none; }
.truth-step-story, .truth-safe-question { max-width: 620px; margin: 14px auto; color: var(--ink); font-size: 1.05rem; font-weight: 1000; line-height: 1.5; text-align: center; }
.truth-step-button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 230px; margin: 16px auto 4px; }
.truth-step-button .ui-icon { width: 25px; height: 25px; }
.truth-one-feedback { min-height: 48px; margin: 10px auto 0; padding: 10px 14px; border: 2px solid #b8d0ce; border-radius: 7px; color: #526f72; background: #f4f9f8; font-weight: 900; text-align: center; }
.truth-one-feedback.found { color: #174c3b; border-color: #71ad8e; background: #e7f7ee; }
.truth-action-hero { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 8px auto 2px; padding: 9px 14px; color: #174c3b; background: #e7f7ee; font-weight: 1000; }
.truth-action-hero .ui-icon { width: 30px; height: 30px; }
.truth-picture-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.truth-picture-actions .explore-choice { min-height: 104px; }
.explore-message { display: grid; place-items: center; min-height: 150px; padding: 18px; border: 4px solid #d3e5e2; border-radius: 8px; background: #fff; text-align: center; }
.explore-message > span { padding: 4px 8px; color: #8d433a; background: #ffe4df; font-size: .7rem; font-weight: 900; }
.explore-message p { margin: 10px 0 0; font-size: 1.05rem; font-weight: 900; line-height: 1.55; }
.magnifier-clues { display: grid; gap: 10px; }
.magnifier-clue { display: grid; grid-template-columns: 48px 1fr; align-items: center; min-height: 68px; padding: 9px 13px; border: 3px dashed #88b7b3; border-radius: 8px; color: var(--teal-dark); background: #eef8f6; text-align: left; cursor: pointer; }
.magnifier-clue > span { grid-row: 1 / 3; }
.magnifier-clue small { display: none; color: var(--ink); line-height: 1.35; }
.magnifier-clue.found { border-style: solid; border-color: #ddb02b; background: #fff7d8; animation: clue-found .4s ease both; }
.magnifier-clue.found small { display: block; }
@keyframes clue-found { 50% { transform: rotate(-1deg) scale(1.03); } }
.truth-media { width: min(760px, 100%); margin: 0 auto 12px; overflow: hidden; border: 4px solid #294e53; border-radius: 8px; background: #f4faf9; box-shadow: 0 6px 0 rgb(41 78 83 / 18%); user-select: none; }
.truth-visual-canvas { position: relative; min-height: 238px; overflow: hidden; background: #dcedeb; touch-action: none; }
.truth-visual-canvas > img { display: block; width: 100%; height: 238px; object-fit: cover; }
.truth-media-message .truth-visual-canvas, .truth-media-notice .truth-visual-canvas { display: grid; place-items: center; padding: 14px 18px; background: #e7f5f2; }
.truth-message-art, .truth-notice-art { position: relative; display: grid; grid-template-columns: 68px 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 8px 14px; width: 100%; min-height: 208px; padding: 20px 22px 14px; border: 3px solid #a8cfcb; border-radius: 8px; background: #fff; }
.truth-message-art > svg, .truth-notice-art > svg { width: 58px; height: 58px; fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.truth-art-copy { align-self: center; min-width: 0; }
.truth-art-copy b, .truth-art-copy small { display: block; }
.truth-art-copy b { color: var(--teal-dark); font-size: 1.45rem; line-height: 1.15; }
.truth-art-copy small { margin-top: 7px; color: #526f72; font-size: .88rem; font-weight: 900; line-height: 1.4; }
.truth-card-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.truth-card-fields > span, .truth-photo-meta > span { position: relative; display: grid; gap: 2px; min-height: 52px; padding: 8px 42px 8px 11px; border: 2px solid #a8cfcb; border-radius: 6px; background: #edf8f6; opacity: .48; transition: opacity .16s ease, border-color .16s ease, background .16s ease; }
.truth-card-fields > span.current, .truth-photo-meta > span.current, .truth-card-fields > span.found, .truth-photo-meta > span.found { opacity: 1; }
.truth-card-fields b, .truth-photo-meta b { color: #285c5e; font-size: .76rem; }
.truth-card-fields small, .truth-photo-meta small { color: #627d7f; font-size: .64rem; font-weight: 900; }
.truth-card-fields > span.found, .truth-photo-meta > span.found { border-color: #238967; background: #e4f5eb; }
.truth-card-fields > span.found::after, .truth-photo-meta > span.found::after { content: "已找到"; position: absolute; top: 7px; right: 7px; padding: 3px 5px; border-radius: 4px; color: #fff; background: #238967; font-size: .56rem; font-weight: 1000; }
.truth-photo-meta { position: absolute; right: 12px; bottom: 12px; left: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.truth-photo-meta > span { border-color: rgb(255 255 255 / 78%); background: rgb(255 255 255 / 92%); box-shadow: 0 2px 8px rgb(19 52 61 / 18%); }
.truth-media-notice .truth-visual-canvas { background: #fff5cf; }
.truth-media-notice .truth-notice-art { border-color: #d8b43d; }
.truth-media-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-top: 3px solid #294e53; background: #fff; }
.truth-post-copy { min-width: 0; color: var(--ink); }
.truth-post-copy > span { color: #8d433a; font-size: .7rem; font-weight: 1000; }
.truth-post-copy p { margin: 3px 0 0; font-size: .78rem; font-weight: 900; line-height: 1.42; }
.truth-investigation-panel { padding: 10px 12px 11px; border-top: 2px solid #c4d9d6; background: #eaf5f3; }
.truth-investigation-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; color: #285c5e; font-size: .7rem; }
.truth-investigation-heading > b { font-size: .8rem; }
.truth-investigation-heading > span { color: #4f6e70; font-weight: 900; }
.truth-field-labels { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 460px; margin: 7px auto 0; color: #526f72; font-size: .78rem; font-weight: 900; text-align: center; }
.truth-field-labels button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 7px 12px; border: 2px solid #7faeaa; border-radius: 6px; color: #285c5e; background: #fff; font: inherit; font-weight: 900; cursor: pointer; }
.truth-field-labels .ui-icon { width: 24px; height: 24px; }
.truth-field-labels button:hover, .truth-field-labels button:focus-visible { border-color: #146f6a; box-shadow: 0 0 0 3px rgb(20 111 106 / 18%); }
.truth-field-labels button.found { color: #185f4d; border-color: #6aae91; background: #dff2e8; }
.moveable-magnifier { position: absolute; z-index: 4; left: var(--lens-x, 50%); top: var(--lens-y, 50%); display: grid; place-items: center; width: 58px; height: 58px; border: 6px solid #ffd34e; border-radius: 50%; color: #153f47; background: rgb(255 255 255 / 55%); box-shadow: 0 4px 0 #a56f2b, inset 0 0 0 2px rgb(255 255 255 / 75%); transform: translate(-50%, -50%); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.moveable-magnifier::after { content: ""; position: absolute; right: -24px; bottom: -18px; width: 32px; height: 10px; border-radius: 8px; background: #a56f2b; transform: rotate(45deg); }
.moveable-magnifier .ui-icon { width: 29px; height: 29px; }
.moveable-magnifier:focus-visible { outline: 5px solid #fff; box-shadow: 0 0 0 9px #0a746f; }
.truth-hotspot { position: absolute; z-index: 5; left: var(--hot-x); top: var(--hot-y); display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid transparent; border-radius: 50%; color: transparent; background: transparent; box-shadow: none; font-size: 1.05rem; font-weight: 1000; cursor: pointer; opacity: 0; transform: translate(-50%, -50%); transition: color .16s ease, background .16s ease, box-shadow .16s ease, opacity .16s ease; }
.truth-hotspot.is-targeted, .truth-hotspot:focus-visible { color: #fff; background: #c6382d; border-color: #fff; box-shadow: 0 0 0 5px rgb(198 56 45 / 28%); opacity: 1; }
.truth-hotspot:not(.current) { pointer-events: none; }
.truth-hotspot.found { width: 30px; height: 30px; opacity: 0; pointer-events: none; }
.truth-hotspot.found span { font-size: 0; }
.truth-hotspot.found span::after { content: "✓"; font-size: .88rem; }
.truth-media.investigation-complete .moveable-magnifier { opacity: 0; transform: translate(-50%, -50%) scale(.45); pointer-events: none; }
.truth-media.investigation-complete .truth-investigation-heading > span { color: #185f4d; }
.truth-media.investigation-complete .truth-investigation-heading > span::before { content: "✓ "; font-weight: 1000; }
.truth-found { min-height: 46px; margin-bottom: 10px; }
.truth-found > span { max-width: 360px; color: #607b7e; border-color: #bdcfcd; background: #f1f6f5; }
.truth-found > span.found { color: var(--ink); border-color: #e2bd49; background: #fff7d8; }
.truth-found span small { display: none; font-weight: 700; }
.truth-found span.found small { display: inline; }
.mini-chat { display: grid; grid-template-columns: 72px 1fr; gap: 9px 14px; max-width: 680px; margin: auto; }
.mystery-avatar { grid-row: 1 / 4; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #fff; background: var(--teal); font-size: 2rem; font-weight: 1000; }
.team-story-card { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 13px; max-width: 680px; margin: 0 auto 12px; padding: 10px 14px; border-left: 6px solid var(--teal); background: #eef8f6; }
.team-story-card p { margin: 0; font-size: .88rem; font-weight: 900; line-height: 1.5; }
.kid-character.mini { width: 68px; height: 86px; min-width: 68px; overflow: visible; }
.mini-bubble { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 9px; min-height: 58px; padding: 8px 13px; border: 3px solid #cbdedc; border-radius: 8px; color: var(--ink); background: #fff; text-align: left; font-weight: 900; cursor: pointer; }
.bubble-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--teal-dark); background: #e6f4f1; }
.bubble-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mini-bubble.found { border-color: var(--coral); background: #fff0ed; animation: clue-found .4s ease both; }
.mini-bubble.found::after { content: "發現線索"; float: right; color: #a33d32; font-size: .68rem; }
.team-clue-prompt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
.danger-label { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border: 2px solid #c33d32; border-radius: 5px; color: #a51f1f; background: #fff0ed; vertical-align: middle; }
.danger-label svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.danger-label strong { color: #a51f1f; font-weight: 1000; }
.found-clues { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; max-width: 760px; margin: 0 auto 15px; }
.found-clues span { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 2px solid #e2bd49; border-radius: 6px; background: #fff7d8; font-size: .78rem; font-weight: 900; }
.found-clues .ui-icon { width: 19px; height: 19px; }
.found-clues.compact { margin-top: 16px; }
.response-only { max-width: 760px; margin-inline: auto; }
.help-bubble { position: relative; max-width: 520px; padding: 20px; border: 4px solid #a8cfcb; border-radius: 8px; background: #fff; font-size: 1.12rem; font-weight: 900; line-height: 1.6; }
.help-scene-icon { display: inline-grid; place-items: center; float: left; width: 64px; height: 64px; margin: 0 12px 4px 0; border-radius: 50%; color: var(--teal-dark); background: #e1f3ef; }
.help-scene-icon svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cyber-scene-image { position: relative; max-width: 620px; margin: 0 auto 8px; overflow: hidden; border: 4px solid #a8cfcb; border-radius: 8px; background: #e7f5f2; }
.cyber-scene-image img { display: block; width: 100%; height: 205px; object-fit: cover; object-position: center 48%; }
.cyber-scene-image figcaption { position: absolute; right: 8px; bottom: 8px; left: 8px; padding: 7px 10px; border-radius: 5px; color: #fff; background: rgb(21 50 74 / 88%); font-size: .72rem; font-weight: 900; }
.cyber-story { max-width: 700px; margin: 8px auto; font-size: .95rem; font-weight: 900; line-height: 1.45; text-align: center; }
.helper-choice > span { width: 64px; height: 64px; }
.helper-choice > span svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mission-pin.success-pop { animation: pin-success .65s ease both; }
@keyframes pin-success { 45% { transform: translate(-50%, -58%) scale(1.18); filter: brightness(1.25); } }
.final-summary { padding-block: 30px; }
.final-character { width: 112px; height: 140px; margin: 0 auto 8px; overflow: visible; filter: drop-shadow(0 6px 2px rgb(21 54 61 / 18%)); }
.complete-character { width: 82px; height: 102px; margin: 0 auto -12px; overflow: visible; filter: drop-shadow(0 5px 2px rgb(21 54 61 / 16%)); }
.final-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 580px; margin: 20px auto; }
.final-badges span { display: grid; place-items: center; gap: 6px; min-height: 90px; padding: 10px; border: 3px solid #e3c14d; border-radius: 8px; background: #fff8dc; }
.final-badges .ui-icon { width: 32px; height: 32px; color: var(--teal); }
.final-badges b { font-size: .78rem; }
.learning-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 620px; margin: 0 auto 22px; }
.learning-summary span { padding: 10px; border-left: 5px solid var(--teal); background: #eaf6f3; text-align: left; font-weight: 900; }
.falling-token { animation-duration: 6.2s; }

@media (max-width: 760px) {
  .staff-tools { align-items: flex-start; flex-direction: column; }
  .truth-playground { grid-template-columns: 1fr; }
  .explore-stage, .help-scene { align-items: stretch; }
  .kid-character { flex-basis: 94px; width: 94px; height: 118px; }
  .phone-scene { min-height: 150px; }
  .truth-media-info { grid-template-columns: 1fr; }
  .truth-investigation-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .truth-picture-actions { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .staff-tools > span { display: none; }
  .mission-goal small { display: none; }
  .explore-stage, .help-scene { gap: 10px; }
  .kid-character { flex-basis: 76px; width: 76px; height: 104px; }
  .phone-scene { padding: 30px 12px 12px; border-width: 5px; }
  .phone-scene p { font-size: .9rem; }
  .mini-chat { grid-template-columns: 50px 1fr; gap: 8px; }
  .mystery-avatar { width: 50px; height: 50px; }
  .truth-visual-canvas { min-height: 180px; }
  .truth-visual-canvas > img { height: 180px; }
  .truth-media-message .truth-visual-canvas, .truth-media-notice .truth-visual-canvas { padding: 12px; }
  .truth-post-copy p { font-size: .68rem; }
  .truth-investigation-panel { padding-inline: 8px; }
  .moveable-magnifier { width: 54px; height: 54px; border-width: 5px; }
  .truth-hotspot { width: 42px; height: 42px; }
  .truth-hotspot.found { width: 28px; height: 28px; }
  .truth-investigation-heading { font-size: .62rem; }
  .truth-art-copy b { font-size: 1.15rem; }
  .truth-art-copy small { font-size: .72rem; }
  .truth-card-fields > span, .truth-photo-meta > span { min-height: 46px; padding: 6px 34px 6px 8px; }
  .truth-found span small { display: none; }
  .challenge-truth-media { min-height: 214px; }
  .challenge-media-visual > img { height: 130px; }
  .sim-video { grid-template-columns: 60px 1fr; width: 96%; padding: 9px; }
  .sim-speaker { width: 58px; height: 90px; }
  .cyber-ready-panel { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; }
  .cyber-ready-icon { width: 42px; height: 42px; }
  .team-story-card { grid-template-columns: 58px 1fr; padding: 8px 10px; }
  .kid-character.mini { width: 54px; height: 70px; min-width: 54px; }
  .mini-bubble { grid-template-columns: 35px 1fr; padding: 7px 9px; }
  .bubble-icon { width: 33px; height: 33px; }
  .cyber-scene-image img { height: 170px; }
  .final-badges { grid-template-columns: repeat(2, 1fr); }
  .learning-summary { grid-template-columns: 1fr; }
}