/* 《台本之外》主题：玫瑰金 · 综艺 */
html, body { background: #120a10; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; color: #fff1f4; }

.bg-office  { background: linear-gradient(180deg, #1c1a24 0%, #4a4258 55%, #15121a 100%) !important; }
.bg-studio  { background: radial-gradient(ellipse at 50% 20%, #fff2d8 0%, #b8869a 35%, #2a1a26 100%) !important; }
.bg-stairs  { background: linear-gradient(180deg, #050a08 0%, #12382a 55%, #050a08 100%) !important; }
.bg-monitor { background: linear-gradient(180deg, #050814 0%, #1a2a5a 50%, #070a14 100%) !important; }
.bg-villa   { background: linear-gradient(180deg, #f2e6e0 0%, #d8b4b8 50%, #6a4a58 100%) !important; }
.bg-lake    { background: linear-gradient(180deg, #0e1a2e 0%, #3a5878 50%, #1a2838 100%) !important; }
.bg-kitchen { background: linear-gradient(180deg, #2a1a10 0%, #8a5a30 55%, #1e120a 100%) !important; }
.bg-edit    { background: linear-gradient(180deg, #0a0a0e 0%, #2a2238 55%, #08080c 100%) !important; }
.bg-rooftop { background: linear-gradient(180deg, #1a1430 0%, #c87a8a 60%, #f0c8a0 100%) !important; }

.petal {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffd6e2; box-shadow: 0 0 8px #ff9fbc;
  opacity: .5;
}

.btn { background: linear-gradient(180deg, #e0708e, #9a3a5a); border-color: #ffd0dc; color: #fff; letter-spacing: 4px; }
.btn:hover { box-shadow: 0 4px 16px rgba(255,160,190,.5); }
.title-box h1 { color: #fff; text-shadow: 0 0 22px rgba(255,140,180,.75), 2px 2px 0 #5a1a30; letter-spacing: 14px; }
.subtitle { color: #f5c6d4; }
#title-screen { background: linear-gradient(180deg, rgba(60,20,40,.35), rgba(18,8,14,.9)); }

#dialog { background: linear-gradient(180deg, rgba(40,16,28,.92), rgba(20,8,14,.96)); border-color: #e0708e; }
#dialog::before { border-color: rgba(224,112,142,.3); }
#speaker { background: linear-gradient(180deg, #e0708e, #9a3a5a); border-color: #ffd0dc; }
#text.narration { color: #ecd2da; }
#next-hint { color: #ff9fbc; }

.stat, #menu-bar button { background: rgba(30,10,20,.7); border-color: rgba(255,160,190,.45); }
#menu-bar button:hover { background: rgba(154,58,90,.85); }
.stat .bar i { background: linear-gradient(90deg, #ffb3c8, #e0708e); }

.choice { color: #4a1428; background: linear-gradient(90deg, rgba(255,244,247,.96), rgba(250,220,230,.96)); border-color: #e0708e; }
.choice:hover { background: linear-gradient(90deg, #ffe6ee, #f8c4d4); }
.choice.special { border-color: #ffcf6a; box-shadow: 0 0 10px rgba(255,207,106,.6); }
.choice.special::before { content: "【台本之外】"; color: #c0602a; }

#chapter-card span, .ending-box h2, .modal-box h3 { color: #fff0f4; text-shadow: 0 0 16px rgba(255,140,180,.6); }
.ending-tag { color: #ff9fbc; }
.modal-box { background: linear-gradient(180deg, #3a1428, #1a0810); border-color: #e0708e; }
.log-line b { color: #ff9fbc; }

/* ---------- 专属玩法面板（play.js） ---------- */
.panel {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,4,10,.55);
  animation: appear .25s ease both;
}
.panel h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: 4px; color: #fff0f4; }
.panel .hint { margin: 10px 0 0; font-size: 12px; color: #c99aaa; text-align: center; }

/* 热搜榜 */
.trend-box { width: 420px; padding: 18px 22px; background: #fffafb; color: #2a1220; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: pointer; }
.trend-box h3 { color: #d0204a; text-shadow: none; }
.trend-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f3dde4; font-size: 15px; }
.trend-row span { flex: 1; }
.rank { width: 20px; text-align: center; color: #b0909c; font-style: italic; }
.rank.r0 { color: #ff2d55; } .rank.r1 { color: #ff6a2d; } .rank.r2 { color: #ffa52d; }
.trend-row em { font-style: normal; font-size: 11px; color: #fff; padding: 1px 5px; border-radius: 3px; }
.tag-爆 { background: #d0204a; } .tag-热 { background: #ff7a2d; } .tag-新 { background: #3aa0ff; }
.trend-box .hint { color: #b0909c; }

/* 手机私信 */
.phone-box { width: 300px; height: 540px; display: flex; flex-direction: column; background: #f4eef0; border: 8px solid #1a1016; border-radius: 28px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.6); cursor: pointer; }
.phone-head { padding: 14px; text-align: center; font-size: 15px; color: #2a1220; background: #fff; border-bottom: 1px solid #e6d6dc; }
.phone-body { flex: 1; padding: 12px; overflow-y: auto; }
.msg { margin: 8px 0; max-width: 80%; animation: appear .2s ease both; }
.msg small { display: block; font-size: 11px; color: #9a7a86; margin-bottom: 2px; }
.msg p { margin: 0; padding: 8px 12px; font-size: 14px; line-height: 1.5; color: #2a1220; background: #fff; border-radius: 4px 12px 12px 12px; }
.msg.me { margin-left: auto; }
.msg.me p { color: #fff; background: #e0708e; border-radius: 12px 4px 12px 12px; }
.phone-foot { padding: 10px; text-align: center; font-size: 13px; color: #9a7a86; background: #fff; border-top: 1px solid #e6d6dc; }
.reply { display: block; width: 100%; margin: 3px 0; padding: 5px 8px; font-family: inherit; font-size: 13px; color: #4a1428; background: #ffe6ee; border: 1px solid #e0708e; border-radius: 14px; cursor: pointer; }
.reply:hover { background: #f8c4d4; }
.reply.special { border-color: #ffcf6a; box-shadow: 0 0 8px rgba(255,207,106,.7); }

/* 剪辑台 */
.edit-box { width: 820px; padding: 18px 22px; background: linear-gradient(180deg, #24182a, #120a14); border: 1px solid #e0708e; border-radius: 8px; }
.edit-tip { margin: 0 0 12px; font-size: 13px; color: #d8b8c4; }
.edit-tip b { color: #ffcf6a; }
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 380px; overflow-y: auto; }
.clip { padding: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(224,112,142,.35); border-radius: 6px; cursor: pointer; transition: all .15s; }
.clip:hover { background: rgba(224,112,142,.15); }
.clip.on { background: rgba(224,112,142,.32); border-color: #ffcf6a; box-shadow: 0 0 10px rgba(255,207,106,.4); }
.clip b { display: block; font-size: 14px; color: #fff0f4; }
.clip small { display: block; margin: 4px 0; font-size: 12px; line-height: 1.5; color: #c9a8b4; }
.clip em { font-style: normal; font-size: 12px; color: #ffcf6a; }
.edit-box .submit { margin: 14px auto 0; }
.edit-box .submit:disabled { opacity: .45; cursor: not-allowed; }

/* 密码框 */
.lock-box { width: 400px; padding: 22px; text-align: center; background: #1a1420; border: 1px solid #6a5a80; border-radius: 6px; font-family: Menlo, monospace; }
.lock-box p { margin: 0 0 12px; color: #c8c0d8; font-size: 14px; }
.lock-box input { width: 80%; padding: 8px; font-size: 18px; text-align: center; letter-spacing: 4px; color: #fff; background: #0a0810; border: 1px solid #6a5a80; outline: none; }
.lock-msg { margin: 10px 0; font-size: 13px; color: #ff8a9a; }
.lock-btns { display: flex; justify-content: center; gap: 8px; }
.lock-btns .btn { width: 110px; margin: 0; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* 弹幕 */
.danmaku {
  position: absolute; left: 100%; z-index: 3; white-space: nowrap; pointer-events: none;
  font-size: 18px; color: #fff; text-shadow: 0 0 3px #000, 1px 1px 2px #000;
  animation: fly 9s linear both;
}
@keyframes fly { from { transform: translateX(0); } to { transform: translateX(calc(-960px - 100%)); } }

/* 限时选项 */
.timer-bar { position: relative; height: 22px; margin-bottom: 6px; background: rgba(0,0,0,.45); border-radius: 11px; overflow: hidden; }
.timer-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ff4a6a, #ffcf6a); animation: countdown linear both; }
.timer-bar span { position: relative; display: block; line-height: 22px; font-size: 12px; text-align: center; color: #fff; letter-spacing: 2px; }
@keyframes countdown { from { width: 100%; } to { width: 0; } }