/* 2D 像素 RPG 風（參考 Pokémon Wishes of Tomorrow）：深藍對話框、紫色名牌、飽和色彩。
   命名階段直式 9:16，遊戲本體橫式 16:9；所有尺寸用 cqmin（舞台短邊的 1%）縮放。 */
:root {
  --box: #232641; --box-line: #8fa0c8; --box-edge: #10121f; --ink: #f4f6ff;
  --plate: #6b4fa0; --accent: #ffcc4d; --hp: #49d16b; --hp-bg: #2b2f45;
  --sky1: #8fd3ff; --sky2: #e8f7ff;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0c14; overflow: hidden; }
body { font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", monospace; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--ink); }

#game { position: absolute; inset: 0; margin: auto; overflow: hidden; background: #000; container-type: size; }
#game.portrait { aspect-ratio: 9 / 16; width: min(100vw, calc(100dvh * 9 / 16)); }
#game.landscape { aspect-ratio: 16 / 9; width: min(100vw, calc(100dvh * 16 / 9)); }

#bg { position: absolute; inset: 0; background: linear-gradient(var(--sky1), var(--sky2)); background-size: cover; background-position: center; image-rendering: pixelated; transition: filter 2.5s; }
#bg.gray, #sprites.gray { filter: grayscale(1) brightness(.6); }
#sprites { position: absolute; inset: 0; transition: filter 2.5s; }
.sp { position: absolute; transform: translateX(-50%); image-rendering: pixelated; pointer-events: auto; }
.sp img { height: 100%; width: auto; display: block; image-rendering: pixelated; }
.sp.ph { display: grid; place-items: center; background: #ffffff55; border: .4cqmin dashed #fff; color: #222; font-size: 3cqmin; text-align: center; aspect-ratio: 1; }
.sp.flip img { transform: scaleX(-1); }
.sp.sil img { filter: brightness(0); }
.sp.pop { animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: translateX(-50%) scale(0); } }
.sp.hop { animation: hop .35s ease-out 2; }
@keyframes hop { 50% { transform: translateX(-50%) translateY(-12%); } }
.sp.wiggle { animation: wiggle .25s ease-in-out 4; }
@keyframes wiggle { 25% { transform: translateX(-50%) rotate(-5deg); } 75% { transform: translateX(-50%) rotate(5deg); } }
.sp.blurin { animation: blurin 1.6s ease-out; }
@keyframes blurin { from { filter: blur(3cqmin) brightness(1.8); } }

#cwalk { position: absolute; inset: 0; width: 100%; height: 100%; display: none; image-rendering: pixelated; }
#game.walk #cwalk { display: block; }
#layer, #hud { position: absolute; inset: 0; pointer-events: none; }
#layer > *, #hud > * { pointer-events: auto; }

/* 對話框 */
#dialog { position: absolute; left: 2.5%; right: 2.5%; bottom: 3%; min-height: 24cqmin; padding: 3cqmin 4cqmin 4cqmin; font-size: 5.4cqmin; line-height: 1.55; white-space: pre-line; z-index: 20;
  background: var(--box); border: .8cqmin solid var(--box-line); border-radius: 2cqmin; box-shadow: 0 0 0 .6cqmin var(--box-edge), 0 1cqmin 3cqmin #0008; }
#speaker { position: absolute; top: -5cqmin; left: 4cqmin; background: var(--plate); border: .6cqmin solid var(--box-line); border-radius: 1.2cqmin; padding: .4cqmin 3cqmin; font-size: 4cqmin; }
#speaker:empty { display: none; }
#dnext { position: absolute; right: 3cqmin; bottom: 1cqmin; font-size: 3.6cqmin; color: var(--accent); animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.landscape #dialog { left: 6%; right: 6%; font-size: 5cqmin; min-height: 22cqmin; }

/* 對話段落（乙女・和風厚塗）：插畫不做像素化；全寬半透明對話帶、金色細線、明朝體 */
.sp.vnp, .sp.vnp img { image-rendering: auto; }
.sp.vnp { transition: filter .3s; filter: drop-shadow(0 0 1.2cqmin #0006); }
.sp.vnp.dim { filter: brightness(.55) saturate(.8); }
.sp.fadein { animation: fadein .35s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateX(-50%) translateY(2%); } }
.sp.fadeout { opacity: 0; transition: opacity .3s; }
#game.vn #bg { image-rendering: auto; }
#game.vn #dialog { left: 0; right: 0; bottom: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 27cqmin; padding: 4cqmin 12% 4cqmin;
  background: linear-gradient(#0a0c1866, #0a0c18b3 35%); border-top: .35cqmin solid #c9a45c;   /* 原樣式，透明度加大（原 aa→ee） */ font-family: "Shippori Mincho B1", "Yu Mincho", serif; font-size: 5.2cqmin; text-shadow: 0 .3cqmin .6cqmin #000; }
#game.vn #speaker { top: -5.6cqmin; left: 10%; background: linear-gradient(90deg, #3a1c14, #7a3a22); border: .35cqmin solid #c9a45c; border-radius: .6cqmin; font-family: "Shippori Mincho B1", serif; letter-spacing: .15em; }
#game.vn #dnext { color: #e9c77c; }
#game.vn #choices { left: 20%; right: 20%; bottom: 34cqmin; }
#game.vn #choices button { text-align: center; font-family: "Shippori Mincho B1", serif; background: linear-gradient(90deg, #1b0f0ccc, #3a1c14ee, #1b0f0ccc); border: .35cqmin solid #c9a45c; box-shadow: none; }
#game.vn #choices button:active { background: #7a3a22; }
#sprites.off { opacity: 0; }   /* CG 顯示時立繪先退 */
#game.cg .lovehud { display: none; }
/* 見面會：右上好感花朵、手燈應援 */
.lovehud { position: absolute; top: 2.5cqmin; left: 2.5cqmin; display: grid; gap: .8cqmin; padding: 1.4cqmin 2.4cqmin; background: #1b0f0cb3; border: .3cqmin solid #c9a45c; border-radius: .8cqmin; font-family: "Shippori Mincho B1", serif; font-size: 3.4cqmin; color: #f3e6c8; z-index: 22; }
.lovehud div { position: relative; display: flex; align-items: center; gap: 1.6cqmin; }
.lovehud b { width: 19cqmin; font-weight: 600; }
.lovehud i { font-style: normal; color: #ffffff33; }
.lovehud i.on { color: #ffb48a; text-shadow: 0 0 1cqmin #ff8a4c; }
.lovehud .petal { position: absolute; right: 0; top: 0; font-style: normal; color: #ffb48a; animation: petal 1.2s ease-out forwards; }
@keyframes petal { to { transform: translate(-6cqmin, 7cqmin) rotate(-25deg); opacity: 0; } }
.cheer { position: absolute; inset: 0; pointer-events: none; z-index: 15; }
.cheer .stick { position: absolute; left: 50%; bottom: 6%; width: 4.5cqmin; height: 40cqmin; transform-origin: 50% 100%; transform: translateX(-50%); transition: transform .3s; }
.cheer .stick::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 72%; border-radius: 2.2cqmin 2.2cqmin .6cqmin .6cqmin; background: linear-gradient(90deg, #ff9a3c, #ffe2b0 50%, #ff9a3c); box-shadow: 0 0 4cqmin 1.5cqmin #ff8a2c, 0 0 10cqmin 3cqmin #ff6a0055; }
.cheer .stick::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 28%; border-radius: .6cqmin; background: linear-gradient(90deg, #222, #555 50%, #222); }
.cheer .stick.tl { transform: translateX(-50%) rotate(-18deg); }
.cheer .stick.tr { transform: translateX(-50%) rotate(18deg); }
.cheer .stick.swing { animation: swing .28s ease-in-out; }
@keyframes swing { 50% { translate: 0 -2cqmin; scale: 1.06; filter: brightness(1.4); } }
.cheer .cbar { position: absolute; left: 25%; right: 25%; top: 4cqmin; height: 1.6cqmin; background: #0006; border: .3cqmin solid #c9a45c; border-radius: 1cqmin; overflow: hidden; }
.cheer .cbar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9a3c, #ffd28a); }
.cheer p { position: absolute; left: 0; right: 0; top: 8cqmin; text-align: center; color: #fff; font-family: "Shippori Mincho B1", serif; font-size: 4.4cqmin; text-shadow: 0 .3cqmin .8cqmin #000; }
.spot { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; }
.spot i { position: absolute; left: 50%; top: 50%; width: 7cqmin; height: 7cqmin; margin: -3.5cqmin; border-radius: 50%; border: .5cqmin solid #ffe7a0; box-shadow: 0 0 2cqmin #ffd46b; animation: pulse 1.4s ease-in-out infinite; }
.spot span { position: absolute; left: 50%; top: calc(50% + 4.5cqmin); transform: translateX(-50%); font: 3.6cqmin "Shippori Mincho B1", serif; color: #fff; text-shadow: 0 .3cqmin .6cqmin #000; white-space: nowrap; }
.spot.seen i { animation: none; opacity: .35; box-shadow: none; }
@keyframes pulse { 50% { transform: scale(1.25); opacity: .6; } }

/* 選項 */
#choices { position: absolute; right: 3%; bottom: 31cqmin; display: grid; gap: 1.6cqmin; z-index: 21; min-width: 40%; }
#choices button { font: inherit; font-size: 5cqmin; padding: 2cqmin 4cqmin; text-align: left; cursor: pointer; color: var(--ink); background: var(--box); border: .6cqmin solid var(--box-line); border-radius: 1.6cqmin; box-shadow: 0 0 0 .5cqmin var(--box-edge); }
#choices button:active, #choices button:focus-visible { background: var(--plate); outline: none; }

/* 命名鍵盤（直式） */
.namebox { position: absolute; left: 4%; right: 4%; top: 6%; background: var(--box); border: .8cqmin solid var(--box-line); border-radius: 2cqmin; box-shadow: 0 0 0 .6cqmin var(--box-edge); padding: 3cqmin; z-index: 22; }
.namebox .cur { font-size: 8cqmin; min-height: 11cqmin; border-bottom: .6cqmin solid var(--box-line); margin-bottom: 2cqmin; letter-spacing: .1em; }
.namebox .tabs { display: flex; gap: 1.5cqmin; margin-bottom: 2cqmin; }
.namebox .tabs button { flex: 1; }
.namebox .tabs button.on { background: var(--plate); }
.namebox .keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: .4cqmin; }
.namebox button { font: inherit; font-size: 5cqmin; background: none; border: 0; color: var(--ink); padding: 1.4cqmin 0; cursor: pointer; border-radius: 1cqmin; }
.namebox .keys button:active { background: var(--plate); }
.namebox .keys.zh { display: block; padding: 4cqmin 0; }
.namebox .keys.zh input { user-select: text; -webkit-user-select: text; touch-action: auto; width: 100%; box-sizing: border-box; font: inherit; font-size: 7cqmin; color: var(--ink); background: #0004; border: .6cqmin solid var(--box-line); border-radius: 1.4cqmin; padding: 2cqmin 3cqmin; }
.namebox .row { display: flex; justify-content: space-between; gap: 1.5cqmin; margin-top: 2cqmin; }
.namebox .row button, .namebox .tabs button { border: .5cqmin solid var(--box-line); padding: 1cqmin 2cqmin; font-size: 4.4cqmin; }

/* 轉場 */
#fade { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .6s; }
#fade.on { opacity: 1; }
#fade.black { background: #000; }
#start { position: absolute; inset: 0; z-index: 50; background: radial-gradient(circle at 50% 40%, #fff6c9, #ffb36b 45%, #e0533b); color: #3a1406; font: 7cqmin "DotGothic16", monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqmin; text-align: center; }
#start p { margin: 0; font-size: 9cqmin; }
#start small { font-size: 4.4cqmin; white-space: pre-line; min-height: 2.6em; }
#start div { display: flex; gap: 5cqmin; }
#start button { font: inherit; font-size: 6.4cqmin; color: #3a1406; background: #fff8e1; border: .8cqmin solid #3a1406; border-radius: 2cqmin; padding: 2.4cqmin 5cqmin; cursor: pointer; }
#rotate { position: fixed; inset: 0; z-index: 100; background: #0b0c14ee; display: grid; place-content: center; text-align: center; gap: 12px; font-size: 20px; }
#rotate div { font-size: 56px; }
#rotate button { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 1px solid var(--box-line); border-radius: 8px; padding: 8px 14px; }

/* HUD：對戰框、量表、按鈕 */
.hpbox { position: absolute; top: 5%; left: 4%; min-width: 36%; background: var(--box); border: .6cqmin solid var(--box-line); border-radius: 1.6cqmin; padding: 1.4cqmin 3cqmin; font-size: 4.4cqmin; box-shadow: 0 0 0 .5cqmin var(--box-edge); }
.hpbox .bar { height: 2cqmin; background: var(--hp-bg); border-radius: 1cqmin; margin-top: 1cqmin; overflow: hidden; }
.hpbox .bar b { display: block; height: 100%; background: var(--hp); transition: width .6s; }
.hpbox .bar b.love { background: #ff6b9a; }
/* 第二關戰鬥：我方體力框在右下、選單照寶可夢放在畫面下方兩欄 */
.hpbox.me { top: auto; left: auto; right: 4%; bottom: 31.5cqmin; min-width: 32%; font-size: 3.8cqmin; padding: 1cqmin 2.6cqmin; }
.hpbox small { display: block; text-align: right; font-size: 3.4cqmin; margin-top: .6cqmin; }
#game.battle #choices { left: 3%; right: 3%; bottom: 3%; min-width: 0; grid-template-columns: 1fr 1fr; }
#game.battle #choices button { font-size: 4.4cqmin; padding: 1.8cqmin 3cqmin; }
.actions { position: absolute; right: 3%; bottom: 4%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6cqmin; width: 42%; }
.actions button { font: inherit; font-size: 4.6cqmin; padding: 2.2cqmin 1cqmin; color: var(--ink); background: var(--box); border: .6cqmin solid var(--box-line); border-radius: 1.6cqmin; box-shadow: 0 0 0 .5cqmin var(--box-edge); cursor: pointer; }
.actions button.done { background: #7a3b5c; }
.hint { position: absolute; left: 4%; bottom: 6%; max-width: 48%; font-size: 4.4cqmin; line-height: 1.4; white-space: pre-line; background: #000a; border: .5cqmin solid #ffd86b; padding: 1.4cqmin 2.4cqmin; border-radius: 1.4cqmin; }
.bowl { position: absolute; width: 18cqmin; height: 13.3cqmin; background: url(../assets/sprites/bowl.png) center / contain no-repeat; image-rendering: pixelated; left: 45%; bottom: 34%; touch-action: none; z-index: 5; cursor: grab; }
.collar { position: absolute; left: 76%; top: 40%; width: 18cqmin; margin: -7cqmin -9cqmin; animation: throw .7s linear; }
.collar img { width: 100%; display: block; image-rendering: pixelated; }
@keyframes throw { 0% { left: 22%; top: 88%; } 50% { left: 49%; top: 18%; } }
.collar img { animation: spin .7s ease-out; }
@keyframes spin { from { transform: rotate(-540deg) scale(.5); } }
.collar.shake img { animation: shake .9s ease-in-out 3; }
.collar.ding img { filter: brightness(1.6) drop-shadow(0 0 2cqmin #fff6b0); transition: filter .2s; }
.sp.glow img { filter: brightness(0) invert(1) drop-shadow(0 0 3cqmin #fff); transition: filter .4s; }
@keyframes shake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(22deg); } }
.daycard { position: absolute; inset: 0; display: grid; place-items: center; background: #000; color: #eee; font-size: 9cqmin; letter-spacing: .2em; }
#dialog.top { top: 4cqmin; bottom: auto; }
.tasks.low { top: auto; bottom: 2.5%; }
.tasks { position: absolute; top: 3%; left: 3%; display: flex; gap: 1.5cqmin; font-size: 4cqmin; }
.tasks span { background: var(--box); border: .5cqmin solid var(--box-line); border-radius: 1.2cqmin; padding: .6cqmin 2cqmin; }
.tasks span.ok { background: #2f7a45; }

/* KTV */
.tv { position: absolute; left: 21.9%; width: 56.2%; top: 9.4%; height: 50%; background: #000; }   /* 對齊 ktv.png 電視螢幕（量出來的黑色區域） */
.ktvlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 12% 18%, #ff4fd8aa, transparent 30%), radial-gradient(circle at 88% 22%, #7a5cffaa, transparent 32%), radial-gradient(circle at 50% 100%, #ff9a3c66, transparent 45%); transition: opacity .08s; }
#game.ktv #choices { left: 22%; right: 22%; bottom: 4%; min-width: 0; grid-template-columns: repeat(3, 1fr); }   /* 填空選項排在歌詞下面一列，不蓋電視 */
#game.ktv #choices button { text-align: center; font-size: 4.4cqmin; padding: 1.6cqmin 1cqmin; }
.tv iframe, .tv > div { width: 100%; height: 100%; border: 0; }
.tv::after { content: ''; position: absolute; inset: 0; }   /* 擋住點擊：點到 YouTube 標題會跳離遊戲 */
.lyric { position: absolute; left: 22%; right: 22%; top: 61%; text-align: center; font-size: 6cqmin; text-shadow: 0 .6cqmin 1cqmin #000; line-height: 1.4; }
.lyric .blank { display: inline-block; min-width: 4em; border-bottom: .6cqmin solid #ff6b9a; color: #ff6b9a; }

/* 結局、彩蛋 */
.giftmenu button { position: absolute; z-index: 30; font: 7cqmin "Shippori Mincho B1", serif; color: #6a3550; letter-spacing: .15em; text-shadow: 0 0 1.2cqmin #fff, 0 0 2.4cqmin #fff; background: none; border: 0; }
.giftmenu .gm-gal { left: 6%; top: 24%; width: 43%; height: 60%; }
.giftmenu .gm-end { left: 47%; top: 15%; width: 26%; height: 64%; font-size: 5.4cqmin; color: #4e3870; writing-mode: vertical-rl; }
.giftmenu button:active { transform: scale(.97); }
.gallery { position: absolute; inset: 0; z-index: 40; display: grid; grid-template-columns: 26% 1fr; color: #f3e6c8; font-family: "Shippori Mincho B1", serif; background: linear-gradient(135deg, #2a1410f5, #0a0c18f5); }
.gallery nav { display: flex; flex-direction: column; gap: 1.6cqmin; padding: 4cqmin 3cqmin; background: linear-gradient(90deg, #00000066, #0000); border-right: .35cqmin solid #c9a45c; }
.gallery h2 { margin: 0 0 2cqmin; font-size: 6cqmin; text-align: center; letter-spacing: .2em; color: #e8c97a; }
.gtab { font: inherit; font-size: 3.8cqmin; text-align: left; color: #c9b48a; background: #0004; border: .3cqmin solid #6b5330; border-radius: .8cqmin; padding: 1.6cqmin 2.4cqmin; }
.gtab.on { color: #fff3d6; background: linear-gradient(90deg, #7a3a22, #3a1c14); border-color: #e8c97a; }
.gcount { margin: auto 0 0; text-align: center; font-size: 3.6cqmin; color: #e8c97a; letter-spacing: .1em; }
.gthumbs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2cqmin; padding: 4cqmin; overflow-y: auto; touch-action: pan-y; }
.gthumbs[hidden] { display: none; }
.gthumbs button { padding: 0; border: .3cqmin solid #c9a45c; border-radius: .8cqmin; background: #0006; height: 24cqmin; aspect-ratio: 16 / 9; overflow: hidden; }
.gthumbs button.tall { aspect-ratio: 2 / 3; }
.gthumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gend { display: block; margin: 0; padding: 1.5cqmin 0; font: inherit; font-size: 4.2cqmin; color: #f3e6c8; background: linear-gradient(90deg, #3a1c14, #7a3a22); border: .35cqmin solid #c9a45c; border-radius: .8cqmin; }
.gview { position: absolute; inset: 0; z-index: 45; background: #000e; display: grid; place-items: center; }
.gview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gsave { position: absolute; bottom: 3cqmin; left: 50%; transform: translateX(-50%); z-index: 1; font: 3.6cqmin "Shippori Mincho B1", serif; color: #f3e6c8; background: #1b0f0ccc; border: .3cqmin solid #c9a45c; border-radius: 2cqmin; padding: 1.4cqmin 4cqmin; }
.credits {position: absolute; inset: 0; background: #000; display: grid; place-items: center; text-align: center; white-space: pre-line; font-size: 5.5cqmin; line-height: 2; }
.coupon { position: absolute; left: 22%; right: 22%; top: 10%; background: #fff8e7; border: .8cqmin dashed #c0392b; border-radius: 2cqmin; padding: 4cqmin; text-align: center; color: #5a2a1a; font-size: 4.4cqmin; }
.coupon h2 { margin: 0 0 2cqmin; font-size: 6cqmin; }
.coupon .hold { margin-top: 3cqmin; font: inherit; padding: 2cqmin 4cqmin; border-radius: 999px; border: 0; background: #c0392b; color: #fff; position: relative; overflow: hidden; }
.coupon .hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff4; }
.coupon .stamp { position: absolute; right: 4cqmin; top: 4cqmin; border: .8cqmin solid #c0392b; color: #c0392b; font-size: 6cqmin; padding: .6cqmin 2cqmin; transform: rotate(-14deg); border-radius: 1.4cqmin; }
#choices button .ic { height: 1.9em; width: 1.9em; object-fit: contain; vertical-align: middle; margin: -.5em 1.4cqmin -.4em 0; padding: .15em; background: #e9e4f6; border-radius: .4em; image-rendering: pixelated; }
/* 戰鬥：招式／道具說明框（在「使用／返回」上方） */
.binfo { position: absolute; left: 3%; right: 3%; bottom: 18cqmin; background: var(--box); border: .6cqmin solid var(--box-line); border-radius: 1.6cqmin; box-shadow: 0 0 0 .5cqmin var(--box-edge); padding: 2cqmin 3.4cqmin; font-size: 4.4cqmin; z-index: 22; }
.binfo b { font-weight: normal; color: #ffe08a; }
.binfo span { float: right; font-size: 3.8cqmin; opacity: .85; }
.binfo p { margin: 1.2cqmin 0 0; line-height: 1.5; }
/* 全螢幕按鈕：被退出全螢幕時才出現 */
#corner { position: absolute; top: 2%; right: 2%; z-index: 60; display: flex; gap: 2cqmin; }
/* 音樂開關：全螢幕鍵左邊，預設開；關掉時加斜線 */
#snd { position: relative; }
#snd.off { opacity: .7; }
#snd.off::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: .6cqmin; background: #fff; transform: rotate(-45deg); }
#fs, #snd { width: 9cqmin; height: 9cqmin; font-size: 5cqmin; line-height: 1; color: #fff; background: #0008; border: .4cqmin solid #fff8; border-radius: 1.6cqmin; cursor: pointer; }

/* 使用者 10/26 KTV 動感：光束、迪斯可光點、霓虹框、音符、鈴鼓、角色跟拍 */
.beams { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55; --h: 320;
  background: conic-gradient(from 200deg at 15% -5%, transparent 0 8deg, hsl(var(--h) 100% 65% / .55) 8deg 14deg, transparent 14deg 40deg, hsl(calc(var(--h) + 60) 100% 65% / .45) 40deg 45deg, transparent 45deg),
              conic-gradient(from 110deg at 85% -5%, transparent 0 18deg, hsl(calc(var(--h) + 120) 100% 65% / .5) 18deg 24deg, transparent 24deg 50deg, hsl(var(--h) 100% 70% / .4) 50deg 55deg, transparent 55deg);
  animation: beams 3.1s ease-in-out infinite alternate; transition: --h .3s; }
@keyframes beams { from { transform: rotate(-4deg) scale(1.1); } to { transform: rotate(4deg) scale(1.1); } }
.dots { position: absolute; left: -25%; top: -60%; width: 150%; height: 220%; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: radial-gradient(circle, #fff 0 .5cqmin, transparent .7cqmin) 0 0 / 9cqmin 9cqmin; animation: dots 12s linear infinite;
  -webkit-mask: radial-gradient(circle at 50% 30%, #000 20%, transparent 60%); mask: radial-gradient(circle at 50% 30%, #000 20%, transparent 60%); }
@keyframes dots { to { transform: rotate(360deg); } }
.neon { position: absolute; inset: 0; pointer-events: none; --h: 320; box-shadow: inset 0 0 0 .8cqmin hsl(var(--h) 100% 65% / .8), inset 0 0 4cqmin hsl(var(--h) 100% 60% / .6); transition: box-shadow .25s; }
.note { position: absolute; bottom: 8%; font-style: normal; font-size: 6cqmin; pointer-events: none; text-shadow: 0 0 1.5cqmin currentColor; animation: note 2.2s ease-out forwards; }
@keyframes note { from { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--dx), -55cqmin) scale(1.2); opacity: 0; } }
.tamb { position: absolute; left: 36.5%; top: 80%; width: 10%; height: 12%; background: none; border: 0; padding: 0; cursor: pointer; }
.tamb.shake { animation: wiggle .25s ease-in-out 2; }
.spark { position: absolute; left: 50%; top: 50%; font-style: normal; color: #ffe066; font-size: 4cqmin; pointer-events: none; animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: rotate(var(--a)) translateY(-9cqmin) rotate(calc(-1 * var(--a))); opacity: 0; } }
.sp.sway { transform-origin: 50% 100%; animation: sway .39s ease-out; }
@keyframes sway { 40% { transform: translateX(-50%) rotate(-2.5deg); } }
.sp.nod { animation: nod .39s ease-out; }
@keyframes nod { 35% { transform: translateX(-50%) translateY(-2.5%); } }
/* KTV 達達尾巴：繞尾巴根部擺動（根部在圖寬 70%、高 78%）；音樂播放中才搖 */
.sp.sheet { aspect-ratio: 215 / 245; overflow: hidden; }
.sp.sheet img { max-width: none; }
#game.ktv .sp.sheet img { animation: wag .78s steps(8) infinite; }
@keyframes wag { to { transform: translateX(-100%); } }

/* 首爾雪夜 CG：白氣與細雪（使用者 10/26） */
#layer > .breath { position: absolute; inset: 0; pointer-events: none; }
.breath img { position: absolute; left: 41%; top: 17%; width: 16%; filter: drop-shadow(0 0 .5cqmin #7d90b877); }   /* 白底上看不到純白的氣，加一圈淡藍灰；左下角（氣的起點）對準嘴 */
.breath i { position: absolute; top: -3%; width: calc(var(--s) * 1.1cqmin); aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .85; animation: snow linear infinite; }
@keyframes snow { to { transform: translate(5cqmin, 108cqh); } }
/* 使用者 10/27：iPhone 加入主畫面教學（直式，接在選語言之後） */
.iosguide { position: absolute; inset: 0; z-index: 50; background: radial-gradient(circle at 50% 30%, #fff6c9, #ffd59a 60%, #f0a46a); color: #3a1406; font: 4.2cqmin "DotGothic16", monospace; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqmin; padding: 6cqmin 7cqmin; overflow-y: auto; }
.iosguide h2 { margin: 0; font-size: 7cqmin; text-align: center; font-weight: normal; }
.iosguide p, .iosguide small { margin: 0; white-space: pre-line; line-height: 1.5; text-align: center; }
.iosguide small { font-size: 3.4cqmin; opacity: .75; }
.iosguide ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 2cqmin; }
.iosguide li { counter-increment: s; display: flex; align-items: center; gap: 3cqmin; background: #fff8e1; border: .6cqmin solid #3a1406; border-radius: 2cqmin; padding: 2.2cqmin 3cqmin; white-space: pre-line; line-height: 1.45; }
.iosguide li::before { content: counter(s); font-size: 6cqmin; min-width: 4cqmin; text-align: center; }
.iosguide li i { flex: none; width: 9cqmin; height: 9cqmin; color: #1a73e8; display: grid; place-items: center; }
.iosguide li i svg { width: 100%; height: 100%; fill: currentColor; }
.iosguide li i svg[fill="none"] { fill: none; }
.iosguide li i img { width: 100%; height: 100%; border-radius: 22%; }
.iosguide button { align-self: center; font: inherit; font-size: 5cqmin; color: #3a1406; background: #fff8e1; border: .8cqmin solid #3a1406; border-radius: 2cqmin; padding: 2cqmin 5cqmin; }
/* 名單後彩蛋：許願券特寫 */
.wish { position: absolute; inset: 0; z-index: 30; background: radial-gradient(circle, #fff5dc, #e8c99a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqmin; }
.wish img { width: 86%; max-height: 72%; object-fit: contain; filter: drop-shadow(0 1.4cqmin 2cqmin #0004); animation: wishin .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes wishin { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.wish button { font: 5cqmin "Shippori Mincho B1", serif; color: #fff; background: #a8323e; border: 0; border-radius: 999px; padding: 2cqmin 6cqmin; }
.iosguide li i b { font-weight: normal; font-size: 3.6cqmin; color: #1a73e8; border: .5cqmin solid currentColor; border-radius: 999px; padding: .6cqmin 1.6cqmin; white-space: nowrap; }
/* 使用者 10/27：名單時跳出的彩色蛋（第一關像素風），提醒還有彩蛋 */
.hintegg { position: absolute; right: 7%; bottom: 8%; display: grid; justify-items: center; gap: 1cqmin; animation: eggpop .5s cubic-bezier(.3,1.6,.5,1); }
.hintegg img { height: 26cqmin; image-rendering: pixelated; animation: eggwob 1.6s ease-in-out .5s infinite; transform-origin: 50% 90%; }
.hintegg p { margin: 0; font: 3.6cqmin "DotGothic16", monospace; color: #fff6c9; text-shadow: 0 0 1cqmin #000; white-space: nowrap; }
.hintegg.hatch img { animation: eggshake .09s linear 5; filter: brightness(1.6); }
@keyframes eggpop { from { transform: scale(0); } }
@keyframes eggwob { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-12deg); } 70% { transform: rotate(10deg); } 78% { transform: rotate(-7deg); } 86% { transform: rotate(4deg); } }
@keyframes eggshake { 50% { transform: translateX(-1.2cqmin) rotate(-8deg); } }