:root {
  --bg: #0b111b; --ink: #e8eef6; --dim: #8a9ab0; --line: #26344a; --panel: #111a28; --panel2: #16223a;
  --teal: #6fe3d0; --amber: #ffcf7a; --red: #ff5d6c; --green: #7ee08a;
  --A: #5fb3ff; --B: #ff8fa3; --C: #c7a6ff;
  --font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Heiti TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05080d; overflow: hidden; font-family: var(--font); color: var(--ink); }
button { font-family: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: 50% 50%;
  background: radial-gradient(ellipse at 30% 20%, #15233a 0%, var(--bg) 60%); overflow: hidden; }
.screen { position: absolute; inset: 0; }

/* ── 標題 */
#title { overflow: hidden; }
.title-bg { position: absolute; inset: 0; background: url(assets/bg/roof_night.webp?v=0.4.3) center/cover, #0b111b; animation: drift 40s ease-in-out infinite alternate; }
.title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,13,.92) 0%, rgba(5,8,13,.55) 42%, rgba(5,8,13,.15) 70%, rgba(5,8,13,.5) 100%); }
@keyframes drift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.08) translateX(-18px); } }
.title-cast { position: absolute; right: -10px; bottom: -120px; width: 760px; height: 840px; }
.title-cast img { position: absolute; bottom: 0; height: 800px; filter: drop-shadow(0 0 24px rgba(0,0,0,.6)); animation: castIn 1.2s ease-out both; }
.title-cast .c1 { left: 170px; z-index: 3; animation-delay: .1s; }
.title-cast .c2 { left: 390px; height: 770px; z-index: 2; animation-delay: .3s; }
.title-cast .c3 { left: -10px; height: 820px; z-index: 1; opacity: .92; animation-delay: .5s; }
@keyframes castIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.title-left { position: absolute; left: 90px; top: 120px; }
#title h1 { font-size: 72px; letter-spacing: 16px; margin: 0; font-weight: 800; text-shadow: 0 0 30px rgba(111,227,208,.35), 0 4px 18px rgba(0,0,0,.8); }
#title .sub { color: var(--dim); letter-spacing: 4px; margin: 8px 0 36px 4px; }
.menu { display: flex; flex-direction: column; gap: 10px; width: 260px; }
.menu button { background: rgba(12,20,34,.72); border: 1px solid rgba(111,227,208,.18); padding: 12px 18px; font-size: 18px; border-radius: 10px; transition: .15s; text-align: left; backdrop-filter: blur(4px); }
.menu button:hover { border-color: var(--teal); background: rgba(26,42,70,.9); transform: translateX(6px); }
.notice { position: absolute; left: 90px; bottom: 22px; width: 430px; color: rgba(200,210,225,.6); font-size: 12px; line-height: 1.6; }

/* ── HUD */
#hud { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 14px; white-space: nowrap; z-index: 4;
  background: linear-gradient(rgba(12,20,34,.94), rgba(10,17,29,.82)); border-bottom: 1px solid rgba(38,52,74,.8); backdrop-filter: blur(4px); }
.clock { display: flex; align-items: baseline; gap: 10px; }
.clock b { font-size: 18px; }
.clock span { color: var(--dim); font-size: 14px; }
#h-time { color: var(--amber) !important; font-size: 18px !important; font-variant-numeric: tabular-nums; }
#h-ap { letter-spacing: 2px; color: var(--teal) !important; font-size: 15px !important; }
.bars { display: flex; gap: 12px; }
.bar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.bar i { display: block; width: 48px; height: 9px; background: #0a0f18; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.bar em { display: block; height: 100%; transition: width .3s; }
.bar span { width: 26px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sta em { background: var(--green); } .rep em { background: var(--teal); } .risk em { background: var(--red); }
.risk.hot span { color: var(--red); font-weight: 700; }
.inv { flex: 1; min-width: 0; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.inv b { color: var(--ink); font-weight: 600; margin: 0 7px 0 2px; }
.sys { display: flex; gap: 4px; }
.sys button { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 12px; color: var(--dim); }
.sys button:hover { color: var(--ink); border-color: var(--teal); }

/* ── 主畫面：你站在這個房間裡（v0.3） */
#game { background: #05080d; }
#room { position: absolute; inset: 0; overflow: hidden; }
#room-in { position: absolute; inset: -2.5%; animation: roomDrift 50s ease-in-out infinite alternate; }
.rbg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity .35s linear; }
#glass { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rbg.on { opacity: 1; }
@keyframes roomDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.035) translate(-12px, -4px); } }
#room.flicker { animation: flick .5s steps(1); }
@keyframes flick { 0% { filter: none; } 12% { filter: brightness(.7); } 24% { filter: brightness(1.06); } 40% { filter: brightness(.78); } 56% { filter: none; } }
#room-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,13,.6) 0%, rgba(5,8,13,0) 16%, rgba(5,8,13,0) 72%, rgba(5,8,13,.6) 100%),
              linear-gradient(90deg, rgba(5,8,13,.25) 0%, rgba(5,8,13,0) 34%, rgba(5,8,13,0) 58%, rgba(5,8,13,.45) 100%); }
#stage[data-wx=rain] #room-shade { background-color: rgba(18,28,44,.16); }
canvas.rainfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* 在場的人：站在房間裡（比劇情特寫遠一點） */
#room-cast { position: absolute; inset: 0; pointer-events: none; }
#room-cast .who { position: absolute; bottom: -150px; height: 640px; transform: translateX(-50%); pointer-events: auto; cursor: pointer; animation: castIn2 .5s ease-out both; }
@keyframes castIn2 { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
#room-cast .who img { height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(0,0,0,.55)); transform-origin: 50% 100%; animation: breathe 4.6s ease-in-out infinite; }
#room-cast .who img.blink { position: absolute; left: 0; top: 0; filter: none; }
#room-cast .who.npc { height: 600px; z-index: 0; }
#room-cast .who .nt { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); white-space: nowrap; background: rgba(8,12,20,.85); border: 1px solid var(--line);
  border-left: 3px solid var(--c); padding: 3px 10px; border-radius: 6px; font-size: 12px; color: var(--dim); opacity: 0; transition: opacity .2s; }
#room-cast .who .nt b { color: var(--ink); font-size: 14px; margin-right: 6px; }
#room-cast .who:hover .nt { opacity: 1; }
#room-cast .who.nope { animation: shake2 .3s; }
@keyframes shake2 { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.sleepnote { position: absolute; left: 620px; bottom: 150px; transform: translateX(-50%); background: rgba(8,12,20,.8); border: 1px solid var(--line); border-left: 3px solid var(--c);
  padding: 6px 14px; border-radius: 8px; font-size: 14px; color: #cfd8e6; }
#room-title { position: absolute; left: 620px; top: 96px; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s; text-shadow: 0 2px 14px rgba(0,0,0,.95); z-index: 2; }
#room-title.show { opacity: 1; }
#room-title b { display: block; font-size: 30px; letter-spacing: 10px; }
#room-title span { font-size: 14px; letter-spacing: 4px; color: var(--amber); }

/* 各時段的光線套到人物上：越晚越暗、越冷 */
#stage[data-phase=night] #room-cast img, #stage[data-phase=night] #sc-img { filter: brightness(.93) saturate(.94) drop-shadow(0 0 16px rgba(0,0,0,.55)); }
#stage[data-phase=late] #room-cast img, #stage[data-phase=late] #sc-img { filter: brightness(.8) saturate(.85) contrast(1.03) drop-shadow(0 0 18px rgba(0,0,0,.65)); }
/* 眨眼疊圖：同樣的光線，但不再疊一次陰影（不然眨眼那一下外框會變深） */
#stage[data-phase=night] #room-cast img.blink, #stage[data-phase=night] #sc-blink { filter: brightness(.93) saturate(.94); }
#stage[data-phase=late] #room-cast img.blink, #stage[data-phase=late] #sc-blink { filter: brightness(.8) saturate(.85) contrast(1.03); }

/* ── 平面圖：牆上的「避難逃生圖」 */
#minimap { position: absolute; left: 14px; top: 76px; width: 372px; background: rgba(236,231,218,.94); border-radius: 8px; padding: 6px 8px 8px; box-shadow: 0 8px 26px rgba(0,0,0,.55); color: #2b2b2b; z-index: 3; }
#stage[data-phase=night] #minimap { filter: brightness(.92); }
#stage[data-phase=late] #minimap { filter: brightness(.8); }
.mm-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #fff; background: #1f7a44; margin: -6px -8px 6px; padding: 4px 10px; border-radius: 8px 8px 0 0; letter-spacing: 2px; }
.mm-head b { font-size: 15px; letter-spacing: 1px; }
.mm-head small { margin-left: auto; opacity: .85; letter-spacing: 0; font-size: 11px; }
#map { position: relative; width: 356px; height: 232px; border: 2px solid #3d3d3d; background: #f6f3ea; }
.area { position: absolute; border: 1.5px solid #4a4a4a; background: #fffdf7; cursor: pointer; padding: 2px 4px; overflow: hidden; transition: background .15s; }
.area.hall { background: #e9efe6; }
.area:hover { background: #fff3cf; }
.area.here { background: #ffe2dc; box-shadow: inset 0 0 0 2px #d8261f; }
.area.locked { cursor: not-allowed; background: repeating-linear-gradient(45deg, #dedad0 0 4px, #cfcbc0 4px 8px); }
.area .an { font-size: 11px; font-weight: 700; color: #333; letter-spacing: 1px; }
.area .lock { font-size: 10px; margin-left: 2px; }
.area .star { position: absolute; right: 3px; top: 0; color: #e0551f; font-size: 14px; animation: pulse 1.2s infinite; }
.area .sign { position: absolute; right: 3px; bottom: 2px; font-size: 9px; background: #e8b400; color: #111; padding: 0 3px; border-radius: 2px; font-weight: 700; }
.area .who { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.mk { display: inline-block; width: 15px; height: 15px; border-radius: 50%; font-style: normal; text-align: center; line-height: 15px; font-size: 9px; color: #111; font-weight: 800; border: 1px solid rgba(0,0,0,.35); }
.mk.me { background: #d8261f; color: #fff; border-color: #fff; box-shadow: 0 0 0 1.5px #d8261f; }
.mk.npc { background: #7c7c7c; color: #fff; }
.mk.zz { opacity: .55; }
@keyframes pulse { 50% { opacity: .45; } }

/* ── 右側面板：半透明，看得到後面的房間 */
#panel { position: absolute; right: 14px; top: 76px; max-height: 632px; width: 420px; background: rgba(9,14,24,.8); border: 1px solid rgba(52,70,95,.8); border-radius: 12px; padding: 14px 16px; overflow-y: auto; backdrop-filter: blur(6px); z-index: 3; }
#panel h2 { margin: 0; font-size: 22px; }
#panel .phase { margin: 2px 0 6px; font-size: 12px; color: var(--amber); letter-spacing: 2px; }
#panel .desc { color: #aebbd0; font-size: 13px; line-height: 1.65; margin: 0 0 10px; }
.people { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.person { display: flex; align-items: center; gap: 8px; background: rgba(22,34,58,.85); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.person .dot { width: 10px; height: 10px; border-radius: 50%; }
.person .st { color: var(--dim); }
.person .bond { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; }
.person .bond i { width: 60px; height: 6px; background: #0a0f18; border-radius: 4px; overflow: hidden; display: block; }
.person .bond em { display: block; height: 100%; }
.grp { margin-top: 8px; }
.grp h3 { font-size: 12px; color: var(--dim); margin: 0 0 5px; letter-spacing: 2px; font-weight: 500; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; }
.act { background: rgba(26,39,64,.92); border: 1px solid #2c3d5a; border-radius: 8px; padding: 7px 11px; font-size: 14px; text-align: left; }
.act:hover:not(:disabled) { border-color: var(--teal); background: #203152; }
.act:disabled { opacity: .35; cursor: not-allowed; }
.act.ev { border-color: var(--amber); color: var(--amber); background: rgba(42,38,22,.92); }
.act small { color: var(--dim); margin-left: 6px; font-size: 11px; }

/* ── 紀錄：左下角，舊的淡掉 */
#log { position: absolute; left: 14px; bottom: 12px; width: 560px; padding: 8px 14px; font-size: 13px; line-height: 1.55; color: rgba(200,212,228,.62); z-index: 3;
  background: linear-gradient(90deg, rgba(6,10,18,.9) 0%, rgba(6,10,18,.7) 70%, rgba(6,10,18,0) 100%); border-left: 3px solid var(--teal); border-radius: 4px; }
#log div:last-child { color: var(--ink); }

/* ── 劇情 */
#scene { background: #000; cursor: pointer; }
#sc-bg { position: absolute; inset: 0; transition: background .5s; }
#sc-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.65)); }
#sc-bgname { position: absolute; left: 30px; top: 22px; font-size: 16px; letter-spacing: 6px; color: rgba(255,255,255,.35); z-index: 1; }
#sc-cg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; animation: fadein .5s; }
#sc-standee { position: absolute; left: 70%; bottom: -150px; transform: translateX(-50%); height: 840px; width: 560px; transition: opacity .3s, filter .3s; z-index: 1; pointer-events: none; }
#sc-standee .sway { position: absolute; inset: 0; transform-origin: 50% 100%; animation: breathe 4.6s ease-in-out infinite; }
#sc-standee img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; filter: drop-shadow(0 0 18px rgba(0,0,0,.55)); }
#sc-standee #sc-blink { filter: none; }
@keyframes breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.004 1.009; } }
#sc-standee.hop { animation: hop .32s ease-out; }
@keyframes hop { 35% { translate: 0 -9px; } 100% { translate: 0 0; } }
#sc-standee.dim { opacity: .45; filter: brightness(.7); }
#sc-standee.npc img { height: 94%; }
#sc-standee .ph { display: none; position: absolute; left: 130px; bottom: 150px; width: 300px; height: 520px; }
#sc-standee.noimg .ph { display: block; }
#sc-standee.noimg img { display: none; }
#sc-standee .head { position: absolute; left: 100px; top: 0; width: 100px; height: 118px; border-radius: 50% 50% 46% 46%; background: var(--c); opacity: .9; }
#sc-standee .body { position: absolute; left: 40px; top: 108px; width: 220px; height: 412px; border-radius: 90px 90px 16px 16px; background: linear-gradient(var(--c), rgba(0,0,0,.2)); opacity: .75; }
#sc-standee .tag { position: absolute; left: 0; right: 0; top: 210px; text-align: center; font-size: 14px; color: #0b111b; font-weight: 700; line-height: 1.6; }
#sc-standee .tag b { font-size: 22px; display: block; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
#sc-center { position: absolute; left: 38%; top: 40%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; gap: 10px; align-items: center; }
#sc-box { position: absolute; left: 60px; right: 60px; bottom: 22px; min-height: 160px; background: linear-gradient(rgba(8,12,20,calc(var(--boxa, .88) - .1)), rgba(8,12,20,var(--boxa, .88))); border: 1px solid #34465f; border-radius: 14px; padding: 18px 26px 34px; z-index: 2; backdrop-filter: blur(3px); }
#sc-ctrl { position: absolute; right: 44px; bottom: 6px; display: flex; gap: 4px; }
#sc-ctrl button { background: transparent; border: 1px solid transparent; color: var(--dim); font-size: 12px; padding: 2px 8px; border-radius: 5px; }
#sc-ctrl button:hover { color: var(--ink); border-color: var(--line); }
#sc-ctrl button.on { color: var(--amber); border-color: var(--amber); }
#sc-name { position: absolute; top: -16px; left: 22px; padding: 4px 16px; border-radius: 8px; background: #22324c; font-weight: 700; font-size: 16px; }
#sc-name:empty { display: none; }
#sc-text { font-size: var(--tsize, 21px); line-height: 1.75; white-space: pre-wrap; }
#sc-hint { position: absolute; right: 18px; bottom: 8px; font-size: 13px; color: var(--amber); animation: pulse 1.2s infinite; }
.choice { min-width: 560px; padding: 14px 22px; font-size: 18px; background: rgba(18,28,46,.95); border: 1px solid #3b5274; border-radius: 12px; text-align: left; }
.choice:hover:not(:disabled) { border-color: var(--amber); background: #22324f; }
.choice:disabled { opacity: .45; cursor: not-allowed; }
.choice small { display: block; color: var(--red); font-size: 13px; margin-top: 3px; }
.chip { padding: 10px 20px; border-radius: 10px; font-size: 18px; font-weight: 700; background: rgba(10,15,24,.9); border: 1px solid var(--line); }
.chip.ok { color: var(--green); border-color: var(--green); } .chip.ng { color: var(--red); border-color: var(--red); }
.prog { width: 560px; background: rgba(10,15,24,.92); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.prog h4 { margin: 0 0 10px; font-size: 18px; }
.prog .pb { height: 8px; background: #0a0f18; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.prog .pb em { display: block; height: 100%; background: var(--teal); transition: width .25s; }
.prog .steps { display: flex; flex-wrap: wrap; gap: 8px; }
.prog .steps button { padding: 8px 12px; border-radius: 8px; background: #1a2740; border: 1px solid #2c3d5a; font-size: 15px; }
.prog .steps button.done { opacity: .35; }
.prog .steps button.bad { animation: shake .3s; border-color: var(--red); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.r18 { width: 640px; border: 2px dashed var(--amber); border-radius: 14px; padding: 18px 22px; background: rgba(30,24,10,.92); }
.r18 h4 { margin: 0 0 8px; color: var(--amber); font-size: 20px; }
.r18 p { margin: 6px 0; font-size: 14px; line-height: 1.65; color: #e9dcc0; }
.r18 .pb { height: 6px; background: #0a0f18; border-radius: 3px; overflow: hidden; margin: 12px 0; }
.r18 .pb em { display: block; height: 100%; width: 0; background: var(--amber); transition: width 1.4s linear; }
.r18 button { padding: 8px 18px; border-radius: 8px; border: 1px solid var(--amber); background: transparent; color: var(--amber); font-size: 15px; }

/* ── 疊層卡片 */
#overlay { background: rgba(3,6,10,.72); display: flex; align-items: center; justify-content: center; z-index: 10; }
.card { width: 760px; max-height: 640px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px 30px; }
.card h2 { margin: 0 0 6px; font-size: 26px; }
.card .sub { color: var(--dim); margin: 0 0 16px; }
.card table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 14px; }
.card td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.card td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.up { color: var(--green); } .down { color: var(--red); }
.card .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.card .row button, .slotbtn { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: #1a2740; font-size: 15px; }
.card .row button.primary { border-color: var(--teal); background: #173a3a; }
.slotbtn { display: block; width: 100%; text-align: left; margin-bottom: 8px; }
.slotbtn span { color: var(--dim); font-size: 13px; margin-left: 10px; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.gal button { padding: 12px; border-radius: 10px; background: #172238; border: 1px solid var(--line); text-align: left; font-size: 14px; min-height: 64px; }
.gal button small { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; }
.gal button:disabled { opacity: .4; cursor: default; }
.help p, .help li { font-size: 15px; line-height: 1.75; color: #cbd6e4; }
.endcard { text-align: center; }
.endcard h2 { font-size: 34px; margin: 10px 0 18px; }

#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 20; mix-blend-mode: screen; }
#flash.red { animation: flashR .5s; } #flash.green { animation: flashG .5s; }
@keyframes flashR { 0% { opacity: 0; background: rgba(255,60,80,.5); } 20% { opacity: 1; } 100% { opacity: 0; background: rgba(255,60,80,.5); } }
@keyframes flashG { 0% { opacity: 0; background: rgba(120,240,160,.25); } 20% { opacity: 1; } 100% { opacity: 0; background: rgba(120,240,160,.25); } }

/* ── 每晚開場卡 */
#nightcard { z-index: 30; background: #030509; display: flex; align-items: center; justify-content: center; cursor: pointer; animation: fadein .4s; }
#nightcard div { text-align: center; }
#nightcard b { display: block; font-size: 56px; letter-spacing: 14px; font-weight: 800; animation: castIn .8s ease-out both; }
#nightcard span { display: block; margin-top: 12px; color: var(--amber); letter-spacing: 6px; font-size: 18px; animation: castIn .8s .25s ease-out both; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .25s; }
#fade.on { opacity: 1; }
#scene.enter { animation: fadein .35s; }
/* ── 設定、紀錄 */
.cfg label { display: flex; align-items: center; gap: 14px; margin: 8px 0; font-size: 15px; }
.cfg label span { width: 150px; flex: none; color: var(--dim); }
.cfg h3 { margin: 16px 0 2px; font-size: 13px; color: var(--teal); letter-spacing: 3px; font-weight: 500; }
.cfg label em { font-style: normal; font-size: 12px; color: var(--dim); }
.cfg input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); }
.cfg label button { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: #1a2740; font-size: 13px; }
.cfg input[type=range] { flex: 1; accent-color: var(--teal); }
.cfg select { background: #1a2740; color: var(--ink); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; font-family: inherit; }
.backlog { max-height: 470px; overflow-y: auto; padding-right: 8px; }
.backlog p { margin: 0 0 10px; line-height: 1.6; font-size: 15px; }
.backlog p b { color: var(--amber); margin-right: 8px; }

/* 有 CG 時選項放到臉的另一側 */
#scene[data-cgside=right] #sc-center { left: 71%; }
#scene[data-cgside=left] #sc-center { left: 30%; }
/* 截圖模式：關掉動畫與轉場，直接看最終畫面 */
body.shot *, body.shot *::before, body.shot *::after { animation: none !important; transition: none !important; }

/* 環顧：收起平面圖、面板、紀錄，看整個房間（點任何地方或按 H 回來） */
#minimap, #panel, #log { transition: opacity .25s, transform .25s; }
#game.peek #minimap { opacity: 0; transform: translateX(-20px); pointer-events: none; }
#game.peek #panel { opacity: 0; transform: translateX(20px); pointer-events: none; }
#game.peek #log { opacity: 0; pointer-events: none; }
#game.peek #room-cast .who .nt { opacity: 1; }
#game.peek::after { content: "點一下或按 H 回來"; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 13px; color: rgba(230,236,245,.7);
  background: rgba(6,10,18,.6); padding: 4px 14px; border-radius: 12px; letter-spacing: 2px; z-index: 5; }

/* ── v0.4 */
#game.enter { animation: fadein .35s; }
/* 收起對話框看圖（右鍵、H、「隱藏」鍵；點一下回來） */
#sc-box, #sc-center, #sc-bgname { transition: opacity .2s; }
#scene.nobox #sc-box, #scene.nobox #sc-center, #scene.nobox #sc-bgname { opacity: 0; pointer-events: none; }
/* 關掉動態效果：鏡頭、人物都不動 */
body.nomotion #room-in, body.nomotion .title-bg, body.nomotion .sway, body.nomotion #room-cast .who img { animation: none !important; }
/* 右上角提示（成就、快速存檔） */
#toast { position: absolute; left: 50%; top: 74px; z-index: 35; min-width: 260px; max-width: 420px; padding: 10px 16px; border-radius: 10px; background: rgba(10,16,28,.95);
  border: 1px solid var(--line); border-left: 3px solid var(--teal); font-size: 14px; color: var(--ink); opacity: 0; translate: -50% -12px; transition: opacity .25s, translate .25s;
  pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#toast.show { opacity: 1; translate: -50% 0; }
#toast.ach { border-left-color: var(--amber); }
#toast small { display: block; color: var(--amber); font-size: 11px; letter-spacing: 3px; }
#toast b { display: block; font-size: 17px; margin: 2px 0; }
#toast span { color: var(--dim); font-size: 13px; }
/* 存讀檔：3×3 格，背景是那一刻所在的房間 */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slot { position: relative; height: 112px; border-radius: 10px; border: 1px solid var(--line); background: #131d30 center/cover; text-align: left; padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; overflow: hidden; transition: border-color .15s; }
.slot b { position: absolute; left: 12px; top: 8px; font-size: 13px; color: var(--amber); letter-spacing: 1px; text-shadow: 0 1px 4px #000; }
.slot span { font-size: 14px; color: var(--ink); text-shadow: 0 1px 4px #000; }
.slot small { font-size: 11px; color: #b7c3d4; text-shadow: 0 1px 4px #000; }
.slot.empty b { color: var(--dim); }
.slot:hover:not(:disabled) { border-color: var(--teal); }
.slot:disabled { opacity: .35; cursor: default; }
.slot.confirm { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); } .slot.confirm small { color: var(--amber); }
.slot.saved { border-color: var(--green); } .slot.saved small { color: var(--green); }
/* 成就 */
.card h3 small { color: var(--dim); font-weight: 400; font-size: 13px; margin-left: 6px; }
.achs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.achv { padding: 7px 10px; border-radius: 8px; background: #141d2e; border: 1px solid var(--line); opacity: .42; }
.achv.on { opacity: 1; border-color: rgba(255,207,122,.45); background: #1d1a12; }
.achv b { display: block; font-size: 14px; } .achv.on b { color: var(--amber); } .achv span { font-size: 12px; color: var(--dim); }
/* 標題：繼續 */
.menu button.cont { border-color: rgba(255,207,122,.45); color: var(--amber); }
/* 年齡確認 */
#agegate { z-index: 60; background: radial-gradient(ellipse at 50% 30%, #16233a 0%, #05080d 70%); display: flex; align-items: center; justify-content: center; }
#agegate .ag { width: 620px; text-align: center; padding: 34px 40px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,16,28,.9); }
#agegate .ag-tag { display: inline-block; margin: 0 0 10px; padding: 3px 12px; border: 1px solid var(--red); color: var(--red); border-radius: 6px; font-size: 13px; letter-spacing: 3px; }
#agegate h2 { margin: 0 0 16px; font-size: 38px; letter-spacing: 10px; }
#agegate p { color: #c3cfdf; line-height: 1.8; font-size: 15px; margin: 8px 0; }
#agegate .ag-q { color: var(--ink); font-size: 18px; margin-top: 18px; }
#agegate .ag-btn { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
#agegate button { padding: 11px 22px; border-radius: 10px; border: 1px solid var(--line); background: #1a2740; font-size: 16px; }
#agegate button.primary { border-color: var(--teal); background: #173a3a; }
#agegate .ag-ver { color: var(--dim); font-size: 12px; margin-top: 18px; }