/* ============================================================
   遊戲場（從 style.css 搬過來，三個小遊戲的樣式都在這）
   ============================================================ */
.play { padding: clamp(80px, 12vw, 140px) var(--pad); background: var(--night); color: var(--moon); }
.play .sec-lead { color: var(--moon-2); }

/* 分頁 */
.play-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.play-tab { border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--moon); border-radius: 14px; padding: 10px 18px; text-align: left; display: flex; flex-direction: column; line-height: 1.35; transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease); }
.play-tab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.play-tab b { font-size: 1rem; }
.play-tab span { font-size: .74rem; color: var(--moon-3); }
.play-tab[aria-selected="true"] { background: var(--moon); color: var(--night); border-color: var(--moon); }
.play-tab[aria-selected="true"] span { color: var(--accent-ink); }
.play-tools { max-width: 67.5rem; margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.play-mute { border: 0; background: none; color: var(--moon-2); font-size: .82rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; transition: color .2s, background .2s; }
.play-mute:hover { color: var(--moon); background: rgba(255,255,255,.08); }
.play-mute[aria-pressed="true"] { color: var(--moon-3); }

/* 遊戲卡 */
.game { position: relative; max-width: 67.5rem; margin: 0 auto; border-radius: 1.5rem; background: var(--paper); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); overflow: hidden; min-height: 32.5rem; outline: none; }
.game button { touch-action: manipulation; }

/* 開場、結束畫面 */
.game-intro, .game-end, .game-pause {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 22px 24px; overflow-y: auto;
  background: rgba(244, 238, 228, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* 內容放不下時從上面開始，放得下就置中 */
.game-intro > :first-child, .game-end > :first-child, .game-pause > :first-child { margin-top: auto; }
.game-intro > :last-child, .game-end > :last-child, .game-pause > :last-child { margin-bottom: auto; }
.game-intro[hidden], .game-end[hidden], .game-pause[hidden] { display: none; }
.game-pause { z-index: 12; }
.game-end { gap: 8px; }
.game-pause .pause-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; }
.game-intro h3, .game-end h3, .game-pause h3 { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.game-intro p, .game-end p, .game-pause p { max-width: 35rem; color: var(--ink-2); }
.game-intro b { color: var(--ink); }
.game-intro .btn-solid { font-size: 1.05rem; padding: .9em 2.2em; margin-top: 4px; }
.game-keys { font-size: .8rem; color: var(--ink-3) !important; }
.game-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.game-chips li { background: #fff; border-radius: 99px; padding: 4px 14px; font-weight: 700; font-size: .9rem; box-shadow: 0 6px 16px -10px rgba(26,31,44,.4); }

.end-kicker { font-weight: 700; font-size: .9rem; letter-spacing: .06em; color: var(--accent-ink) !important; }
.end-title.in { animation: titleIn .7s var(--ease) both; }
.end-score { color: var(--ink) !important; font-weight: 700; line-height: 1.1; }
.end-score b { font-family: var(--serif); font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.2rem); color: var(--accent); font-variant-numeric: tabular-nums; }
.end-best { font-size: .88rem; }
.end-new { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 900; padding: 2px 14px; border-radius: 99px; animation: wiggle .9s var(--ease) 2; }
.end-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: .78rem; }
.end-ladder li { padding: 3px 11px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-3); }
.end-ladder li.past { color: var(--ink-2); border-color: rgba(26,31,44,.24); }
.end-ladder li.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }
.end-next { font-size: .82rem; color: var(--ink-3) !important; }
.end-stats { font-size: .9rem; color: var(--ink) !important; }
.end-note { font-size: .86rem; }
.end-note b { color: var(--accent-ink); }
.end-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.game .btn[hidden] { display: none; }

/* 倒數 3、2、1 */
.game-count { position: absolute; inset: 0; z-index: 11; display: grid; place-items: center; background: rgba(244, 238, 228, .6); pointer-events: none; }
.game-count span { font-family: var(--serif); font-weight: 900; font-size: clamp(4.5rem, 3rem + 7vw, 8rem); line-height: 1; color: var(--accent); text-shadow: 0 6px 0 rgba(26,31,44,.12); animation: countIn .5s var(--ease) both; }
.game-count span.go { color: var(--ink); font-size: clamp(2.6rem, 2rem + 4vw, 4.6rem); }

/* HUD：命、關卡、連擊、分數 */
.game-hud { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 14px 20px; font-weight: 700; font-size: .92rem; position: relative; z-index: 2; }
.game-hud b { font-family: var(--serif); font-size: 1.45rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.hud-hearts { display: inline-flex; gap: 3px; }
.hud-hearts i { font-style: normal; font-size: 1.25rem; line-height: 1; color: var(--accent); display: inline-block; transition: color .3s; }
.hud-hearts i.lost { color: rgba(26,31,44,.16); }
.hud-hearts i.drop { animation: heartDrop .6s var(--ease); }
.hud-tag { padding: 3px 11px; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: .78rem; letter-spacing: .04em; }
.hud-combo { color: var(--signal); }
.hud-combo:not(:empty) { animation: comboIn .35s var(--ease); }
.hud-score { margin-left: auto; }

/* 飄字 */
.game-pop { position: absolute; z-index: 8; pointer-events: none; transform: translate(-50%, -50%); font-family: var(--serif); font-weight: 900; font-size: 1.6rem; white-space: nowrap; animation: popUp .95s var(--ease) forwards; }
.game-pop.gold { color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.game-pop.good { color: #23794f; text-shadow: 0 2px 0 #fff; }
.game-pop.bad { color: #fff; background: var(--accent); font-family: var(--sans); font-size: .95rem; padding: 3px 12px; border-radius: 99px; }
.game-pop.combo { color: #fff; background: var(--signal); font-family: var(--sans); font-size: 1rem; padding: 4px 14px; border-radius: 99px; box-shadow: 0 8px 20px -6px rgba(61,123,255,.7); }

.shake { animation: shake .42s; }

/* ---------- 1. ATM 守門員 ---------- */
.atm-stage { position: relative; height: 22.5rem; margin: 0 1.25rem; border-radius: 1.125rem; overflow: hidden; background: linear-gradient(180deg, #23304f 0%, #2e3d61 62%, #3b3b45 62%, #2a2a32 100%); }
.atm-stage.flash { animation: flash .6s; }
.atm-street { position: absolute; inset: 0; background:
  radial-gradient(40% 30% at 20% 20%, rgba(244,184,96,.25), transparent),
  repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.04) 70px 72px); }
.atm-time { position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 3; background: rgba(255,255,255,.1); }
.atm-time i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffd99a); transform-origin: left; }
.atm-time.low i { background: var(--accent); }
.atm-person { position: absolute; bottom: .875rem; left: 38%; width: 9.375rem; height: 16.25rem; translate: -50% 0; transition: transform .38s var(--ease), opacity .38s; }
.atm-person svg { width: 100%; height: 100%; transform-origin: 50% 100%; }
.atm-person.in svg { animation: idle 1.8s ease-in-out infinite; }
.atm-person.enter { transform: translateX(-17.5rem); opacity: 0; transition: none; }
.atm-person.in { transform: none; opacity: 1; }
.atm-person.out-right { transform: translateX(16.25rem); opacity: 0; }
.atm-person.out-left { transform: translateX(-18.75rem) scale(.9); opacity: 0; }
.atm-bubble { position: absolute; top: -2px; left: 66%; z-index: 2; background: #fff; color: var(--ink); font-size: .74rem; font-weight: 700; line-height: 1.4; padding: 4px 10px; border-radius: 12px 12px 12px 3px; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.25); animation: bubbleIn .3s .25s var(--ease) both; }
.atm-machine { position: absolute; right: 10%; bottom: .875rem; width: 10.625rem; height: 17.5rem; border-radius: 1rem 1rem .375rem .375rem; background: linear-gradient(180deg, #dfe6ef, #b9c4d3); box-shadow: inset 0 -8px 0 rgba(0,0,0,.08), 0 20px 40px rgba(0,0,0,.35); padding: .75rem; display: flex; flex-direction: column; gap: .625rem; }
.atm-head { text-align: center; font-weight: 900; letter-spacing: .3em; color: #2f3b55; font-size: .9rem; }
.atm-screen { height: 6rem; border-radius: .5rem; background: #0f1c2e; display: grid; place-items: center; padding: 8px; box-shadow: inset 0 0 0 3px #263a58; }
.atm-screen-msg { color: #8fd3ff; font-size: .78rem; text-align: center; line-height: 1.45; white-space: pre-line; }
.atm-screen-msg.warn { color: var(--gold); font-weight: 700; }
.atm-screen-msg.ok { color: #7ee2a8; }
.atm-screen-msg.bad { color: #ff8f78; }
.atm-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3125rem; padding: 0 1rem; }
.atm-keys i { height: .875rem; border-radius: .25rem; background: #8e9bb0; }
.atm-cam { position: absolute; top: -10px; left: 50%; translate: -50% 0; width: 18px; height: 18px; border-radius: 50%; background: #1b2233; box-shadow: 0 0 0 4px #dfe6ef, 0 0 12px 2px rgba(242,84,45,.7); }
.atm-machine.scan .atm-cam { animation: camBlink .25s 4; }
.atm-notify { position: absolute; top: 16px; left: 14px; z-index: 4; display: flex; gap: 8px; align-items: center; background: #fff; color: var(--ink); border-radius: 12px; padding: 6px 12px 6px 6px; font-size: .78rem; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.3); opacity: 0; transform: translateY(-14px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.atm-notify i { font-style: normal; width: 24px; height: 24px; border-radius: 7px; background: #2fa86a; display: grid; place-items: center; font-size: .8rem; }
.atm-notify.on { opacity: 1; transform: none; }
.atm-banner { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 4px; text-align: center; pointer-events: none; opacity: 0; color: var(--moon); background: radial-gradient(50% 45% at 50% 50%, rgba(13,18,32,.75), transparent); }
.atm-banner b { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 3vw, 3rem); line-height: 1.2; color: var(--gold); }
.atm-banner span { font-weight: 700; }
.atm-banner.on { animation: bannerIn 1.25s var(--ease) both; }
.atm-say { min-height: 3.4em; padding: 10px 20px 0; text-align: center; font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.atm-say.good { color: #23794f; }
.atm-say.bad { color: var(--accent-ink); font-weight: 700; }
.atm-controls { display: flex; justify-content: center; gap: 14px; padding: 6px 20px 22px; }
.atm-controls .btn { min-width: 10rem; justify-content: center; font-size: 1.05rem; padding: .95em 1.4em; }
.atm-controls .btn.pressed { transform: scale(.94); }
.game:not(.playing) .atm-controls .btn { opacity: .5; }

/* ---------- 2. 真假 meow 一下 ---------- */
.cat-play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; padding: 4px 28px 26px; align-items: center; }
.cat-phone { position: relative; justify-self: center; width: min(100%, 21.25rem); border-radius: 2.25rem; background: #1b2233; padding: 12px 11px 24px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.cat-screen { background: #f3efe8; border-radius: 1.625rem; padding: 8px 12px 14px; min-height: 18.75rem; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.cat-status { display: flex; justify-content: space-between; padding: 0 8px; font-size: .7rem; font-weight: 700; color: var(--ink-2); }
.cat-time { height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cat-time i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.cat-time.low i { background: var(--accent); }
.cat-card { position: relative; flex: 1; background: #fff; border-radius: 18px; padding: 14px 14px 16px; transition: transform .22s var(--ease), opacity .22s, box-shadow .3s; }
.cat-card:empty { background: transparent; }
.cat-card.out { opacity: 0; transform: translateX(-30px) rotate(-3deg); }
.cat-card.is-scam { box-shadow: 0 0 0 3px var(--accent); }
.cat-card.is-safe { box-shadow: 0 0 0 3px #2fa86a; }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cat-card.answered .msg-head { padding-right: 64px; }
.msg-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; font-size: 1.1rem; }
.msg-from { font-weight: 700; font-size: .92rem; line-height: 1.4; }
.msg-time { margin-left: auto; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.cat-card.answered .msg-time { visibility: hidden; }
.msg-typing { display: inline-flex; gap: 5px; background: #eef2f7; border-radius: 4px 16px 16px 16px; padding: 14px 16px; }
.msg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: typing 1s infinite; }
.msg-typing i:nth-child(2) { animation-delay: .15s; }
.msg-typing i:nth-child(3) { animation-delay: .3s; }
.msg-text { background: #eef2f7; border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: .95rem; line-height: 1.7; word-break: break-word; transform-origin: top left; animation: msgIn .3s var(--ease); }
.cat-card mark.tell { background: none; color: inherit; border-radius: 3px; transition: background .3s, box-shadow .3s; }
.cat-card.answered.is-scam mark.tell { background: rgba(242,84,45,.16); box-shadow: inset 0 -2px 0 var(--accent); }
.cat-card.answered.is-safe mark.tell { background: rgba(47,168,106,.16); box-shadow: inset 0 -2px 0 #2fa86a; }
.msg-stamp { position: absolute; right: 10px; top: 10px; font-family: var(--serif); font-weight: 900; font-size: 1.05rem; line-height: 1.3; padding: 1px 10px; border: 3px solid; border-radius: 8px; background: rgba(255,255,255,.9); transform: rotate(-10deg); animation: stampIn .35s var(--ease) both; }
.is-scam .msg-stamp { color: var(--accent); }
.is-safe .msg-stamp { color: #2fa86a; }
.msg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-tags span { font-size: .74rem; font-weight: 700; padding: 2px 10px; border-radius: 99px; animation: msgIn .3s var(--ease) both; }
.msg-tags span:nth-child(2) { animation-delay: .06s; }
.msg-tags span:nth-child(3) { animation-delay: .12s; }
.is-scam .msg-tags span { background: rgba(242,84,45,.12); color: var(--accent-ink); }
.is-safe .msg-tags span { background: rgba(47,168,106,.14); color: #23794f; }
.cat-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.cat-face { width: 7.5rem; }
.cat-face svg { display: block; animation: catBob 2.6s ease-in-out infinite; }
.cat-say { position: relative; background: #fff; border-radius: 16px; padding: 14px 16px; font-size: .95rem; line-height: 1.7; box-shadow: 0 10px 30px -20px rgba(0,0,0,.4); min-height: 3.4em; }
.cat-say::before { content: ''; position: absolute; left: 34px; top: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; }
.cat-say.show { animation: msgIn .3s var(--ease); }
.cat-say b { display: block; margin-bottom: 2px; }
.cat-say.ok b { color: #23794f; }
.cat-say.no b { color: var(--accent); }
.cat-btns { grid-column: 1 / -1; display: flex; justify-content: center; gap: 14px; }
.cat-btns .btn { min-width: 10rem; justify-content: center; font-size: 1.02rem; padding: .9em 1.4em; }
.cat-next, .cat-btns.revealed [data-answer] { display: none; }
.cat-btns.revealed .cat-next { display: inline-flex; animation: msgIn .3s var(--ease); }
.cat-hero { width: 8.125rem; }
.end-cat { width: 4.5rem; flex: none; }

/* ---------- 3. 找漏洞 ---------- */
.bug-hud { border-bottom: 1px solid var(--line); }
.bug-hud small { font-size: .82rem; color: var(--ink-3); }
.bug-timer { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; padding: 2px 10px; border-radius: 8px; background: #fff; font-variant-numeric: tabular-nums; }
.bug-timer.low { color: #fff; background: var(--accent); animation: tickPulse 1s infinite; }
.bug-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bug-tools .btn { font-size: .82rem; padding: .5em 1.05em; }
.bug-again, .game.done .bug-hint, .game.done .bug-giveup { display: none; }
.game.done .bug-again { display: inline-flex; }
.bug-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: 1.125rem; padding: 1.125rem 1.25rem 1.25rem; }
.bug-browser { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(0,0,0,.4); display: flex; flex-direction: column; min-width: 0; }
.bug-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #ece7df; font-size: .82rem; }
.bug-dots { display: flex; gap: 6px; flex: none; }
.bug-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d4cbbd; }
.bug-url { flex: 1; min-width: 0; background: #fff; border-radius: 99px; padding: 4px 12px; color: var(--ink-2); font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bug-srcbtn { flex: none; border: 1px solid #d4cbbd; background: #fff; border-radius: 99px; padding: 3px 11px; font-size: .74rem; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s; }
.bug-srcbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.bug-site { position: relative; flex: 1; font-size: .86rem; color: #2b3242; }
.bug-spot, .bug-safe { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 4px; position: relative; transition: box-shadow .2s; }
.bug-spot:hover, .bug-safe:hover { box-shadow: 0 0 0 2px rgba(31,75,143,.2); }
.bs-head { display: flex; align-items: center; gap: 8px 12px; padding: 12px 16px; background: #1f4b8f; color: #fff; flex-wrap: wrap; }
.bs-logo { font-weight: 700; }
.bs-nav { margin-left: auto; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.bs-nav .bug-safe, .bs-nav .bug-spot { color: #fff; opacity: .88; }
.bs-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: 12px; padding: 14px; }
.bs-card { border: 1px solid #e3e6ec; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bs-card h5 { font-size: .92rem; color: #1f4b8f; }
.bs-field { font-size: .74rem; color: #6b7385; }
.bs-input { display: block; width: 100%; border: 1px solid #cfd5df; border-radius: 6px; padding: 4px 8px; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; min-height: 28px; background: #fff; }
.bs-btn { background: #1f4b8f; color: #fff; border-radius: 6px; padding: 3px 14px; font-size: .8rem; }
.bs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.bs-hint { font-size: .74rem; color: #8a92a3; }
.bs-link { font-size: .72rem; color: #1f4b8f; text-decoration: underline; text-underline-offset: 2px; }
.bs-news, .bs-files ul, .bs-msgs { margin: 0; padding-left: 1.1em; font-size: .8rem; line-height: 1.8; }
.bs-files ul, .bs-msgs { list-style: none; padding: 0; }
.bs-broken { color: #b3b9c5; }
.bs-alert { display: flex; flex-direction: column; width: 100%; margin-top: 4px; background: #fff; border: 1px solid #cfd5df; border-radius: 10px; box-shadow: 0 10px 22px -8px rgba(0,0,0,.35); padding: 8px 10px; font-size: .74rem; transform: rotate(-1deg); }
.bs-alert small { color: #6b7385; }
.bs-alert span { font-size: .9rem; margin: 2px 0 6px; }
.bs-alert i { align-self: flex-end; font-style: normal; background: #1f4b8f; color: #fff; border-radius: 99px; padding: 1px 14px; font-size: .72rem; }
.bs-foot { padding: 10px 16px; border-top: 1px solid #e3e6ec; font-size: .74rem; color: #8a92a3; }
.bs-err { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: #b33a2b; background: #fff3f0; padding: 6px 8px; line-height: 1.5; overflow-wrap: anywhere; }
.bs-note { align-self: center; justify-self: center; width: 7.25rem; padding: 10px; background: #ffe680 !important; color: #5c4a00; font-size: .74rem; line-height: 1.4; transform: rotate(4deg); box-shadow: 0 6px 14px rgba(0,0,0,.15); border-radius: 2px; }
.bug-spot.hit { outline: 2.5px solid var(--accent); outline-offset: 2px; background: rgba(242, 84, 45, .12); }
.bug-spot.hit::after { content: '✓'; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .7rem; line-height: 20px; text-align: center; font-weight: 900; font-family: var(--sans); animation: stampIn .3s var(--ease) both; }
.bug-spot.missed { outline: 2.5px dashed var(--signal); outline-offset: 2px; background: rgba(61,123,255,.08); }
.bug-url .bug-spot.hit, .bug-url .bug-spot.missed { outline-offset: -1px; }
.bug-url .bug-spot.hit::after { display: none; }
.bug-spot.hinted, .bug-srcbtn.hinted { animation: hintRing .9s ease-in-out 3; }
.bug-safe.nope { animation: shake .35s; }
/* 原始碼 */
.bs-src { position: absolute; inset: 0; z-index: 4; background: #fbf7ef; overflow: auto; padding: 12px 14px 16px; font-family: ui-monospace, Consolas, monospace; font-size: .76rem; line-height: 1.8; color: #3b4152; }
.bs-src[hidden] { display: none; }
.bs-src-head { font-family: var(--sans); font-size: .74rem; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; word-break: break-all; }
.bs-src ol { margin: 0; padding-left: 2.6em; color: var(--ink-3); }
.bs-src li { white-space: pre-wrap; word-break: break-all; color: #3b4152; }
.bs-src li::marker { color: #b9b0a2; }
.bs-src .k { color: #1f4b8f; }
.bs-src .c { color: #a0673c; font-family: inherit; text-align: left; }
/* 找到時跳出來的小卡 */
.bug-callout { position: absolute; z-index: 6; pointer-events: none; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 8px 12px; font-size: .8rem; line-height: 1.5; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .2s, transform .25s var(--ease); }
.bug-callout.on { opacity: 1; transform: none; }
.bug-callout b { display: block; color: var(--gold); }
.bug-callout em { display: block; font-style: normal; font-weight: 900; color: var(--gold); margin-top: 2px; }
.bug-callout.bad { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--line), 0 14px 30px -10px rgba(0,0,0,.35); }
.bug-callout.bad b { color: var(--accent); }
.bug-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bug-tip { background: #fff; border-radius: .875rem; padding: .875rem; font-size: .9rem; line-height: 1.7; min-height: 8.125rem; }
.bug-tip b { display: block; color: var(--accent-ink); margin-bottom: 4px; }
.bug-tip.pulse { animation: pulse .5s; }
.bug-list-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.bug-found { margin: 0; padding-left: 1.5em; font-size: .88rem; line-height: 1.9; }
.bug-found button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; text-align: left; }
.bug-found button:hover { color: var(--accent-ink); text-decoration: underline; }
.bug-found li { animation: msgIn .3s var(--ease); }
.bug-found li::marker { color: var(--accent); font-weight: 700; }
.end-bugs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 40rem; font-size: .8rem; }
.end-bugs li { padding: 3px 11px; border-radius: 99px; font-weight: 700; }
.end-bugs li.got { background: rgba(242,84,45,.12); color: var(--accent-ink); }
.end-bugs li.miss { background: rgba(61,123,255,.1); color: #2a5bc4; }
#game-bug .game-intro > :first-child, #game-bug .game-end > :first-child, #game-bug .game-pause > :first-child { margin-top: clamp(16px, 6vw, 64px); }

/* ---------- 動畫 ---------- */
@keyframes countIn { from { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes popUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -70%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
@keyframes popFade { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes flash { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 40% { box-shadow: inset 0 0 0 8px var(--gold), inset 0 0 120px rgba(244,184,96,.45); } }
@keyframes pulse { 50% { transform: scale(1.02); box-shadow: 0 0 0 3px rgba(242,84,45,.3); } }
@keyframes heartDrop { 0% { transform: scale(1); color: var(--accent); } 35% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes comboIn { from { transform: scale(1.5); } }
@keyframes idle { 50% { transform: translateY(-3px) rotate(.8deg); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px) scale(.8); } }
@keyframes camBlink { 50% { background: var(--accent); box-shadow: 0 0 0 4px #dfe6ef, 0 0 24px 8px rgba(242,84,45,1); } }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.06); } 25% { transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes stampIn { from { opacity: 0; transform: rotate(-10deg) scale(2.2); } }
@keyframes titleIn { from { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; transform: scale(.96); } to { transform: none; } }
@keyframes wiggle { 25% { transform: rotate(-6deg) scale(1.08); } 75% { transform: rotate(5deg) scale(1.08); } }
@keyframes catBob { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes hintRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,184,96,0); } 50% { box-shadow: 0 0 0 6px rgba(244,184,96,.95); } }
@keyframes tickPulse { 50% { transform: scale(1.08); } }

/* ---------- 窄螢幕 ---------- */
@media (max-width: 860px) {
  .bug-wrap { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .bug-tools { margin-left: 0; width: 100%; }
  .bug-tip { min-height: 0; }
}
@media (max-width: 760px) {
  .cat-play { grid-template-columns: minmax(0, 1fr); padding: 0 14px 18px; gap: 14px; }
  .cat-screen { min-height: 15.625rem; }
  .cat-side { flex-direction: row; align-items: center; gap: 10px; }
  .cat-face { width: 4rem; flex: none; }
  .cat-say { flex: 1; font-size: .88rem; padding: 10px 12px; }
  .cat-say::before { left: -8px; top: 18px; border: 8px solid transparent; border-left: 0; border-right-color: #fff; }
  .cat-btns { gap: 10px; }
  .cat-btns .btn { min-width: 0; flex: 1; padding: .9em .6em; }
}
@media (max-width: 600px) {
  .game { border-radius: 1.125rem; }
  .game-hud { padding: 12px 14px; gap: 6px 12px; }
  .game-intro, .game-end { padding: 18px 14px; gap: 6px; }
  .game-end .btn { padding: .7em 1.2em; font-size: .9rem; }
  .end-score b { font-size: 2.5rem; }
  .end-ladder { font-size: .72rem; gap: 4px; }
  .end-ladder li { padding: 2px 9px; }
  .end-btns { gap: 8px; }
  .atm-stage { margin: 0 .625rem; height: 20rem; }
  .atm-machine { width: 7rem; height: 15.375rem; right: 4%; padding: .625rem .5rem; gap: .5rem; }
  .atm-screen { height: 5.25rem; padding: 6px; }
  .atm-screen-msg { font-size: .68rem; }
  .atm-keys { padding: 0 .5rem; }
  .atm-person { left: 32%; width: 7.5rem; height: 13.75rem; }
  .atm-bubble { left: 58%; font-size: .7rem; padding: 3px 8px; }
  .atm-say { padding: 8px 14px 0; font-size: .86rem; }
  .atm-controls { gap: 10px; padding: 6px 10px 16px; }
  .atm-controls .btn { min-width: 0; flex: 1; padding: .95em .8em; }
  .bs-main { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .bs-note { justify-self: start; margin: 2px 0 6px 6px; }
}

/* 不想要太多動態：抖動、閃光、飄字都收斂 */
@media (prefers-reduced-motion: reduce) {
  .shake, .bug-safe.nope, .atm-stage.flash, .atm-person.in svg, .cat-face svg, .bug-timer.low,
  .game-count span, .end-title.in, .end-new, .msg-stamp, .msg-text, .msg-tags span, .msg-typing i,
  .hud-hearts i.drop, .hud-combo:not(:empty), .bug-spot.hit::after, .atm-machine.scan .atm-cam, .bug-tip.pulse { animation: none !important; }
  .shake { box-shadow: 0 0 0 3px var(--accent) !important; }
  .atm-stage.flash { box-shadow: inset 0 0 0 5px var(--gold); }
  .game-pop { animation: popFade 1s forwards; transform: translate(-50%, -100%); }
  .atm-banner.on { animation: popFade 1.25s both; }
  .atm-person { transition: opacity .2s; }
  .atm-person.enter, .atm-person.out-left, .atm-person.out-right { transform: none; }
  .cat-card { transition: opacity .15s; }
  .cat-card.out { transform: none; }
  .play-tab:hover { transform: none; }
}