* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; }
#app { height: 100%; display: flex; align-items: center; justify-content: center; }
.phone {
  position: relative;
  width: 100%; max-width: 430px; height: 100%; max-height: 932px;
  background: #0a0a0f; overflow: hidden;
}
@media (min-width: 460px) {
  .phone { border-radius: 40px; border: 0.5px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
}

/* ---- feed: 全屏纵向 scroll-snap ---- */
.feed { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0a0a0f; }

/* 舞台（游戏挂载区） */
.stage { position: absolute; inset: 0; touch-action: none; user-select: none; }

/* 顶部信息 chip */
.topbar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 14px; right: 70px; z-index: 5; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.title-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #fff; background: rgba(255,255,255,.10); border: 0.5px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 11px; width: fit-content; backdrop-filter: blur(6px); }
.title-chip .fg { font-size: 10px; font-style: normal; color: #fff; background: linear-gradient(135deg, #FFD24C, #FF9F43); border-radius: 999px; padding: 2px 6px; margin-left: 2px; letter-spacing: .05em; }
.title-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: #25F4EE; }
.score-chip { font-size: 12px; color: #FFD24C; background: rgba(255,210,76,.12); border: 0.5px solid rgba(255,210,76,.25); border-radius: 999px; padding: 4px 10px; width: fit-content; backdrop-filter: blur(6px); display: none; }
.score-chip.on { display: inline-block; }

/* 浅色治愈系主题：外壳控件在浅底上必须翻成深色，否则完全不可见 */
.slide.light .title-chip { color: #2E2A26; background: rgba(255,255,255,.58); border-color: rgba(0,0,0,.08); }
.slide.light .title-chip .dot { background: #FF8A65; }
.slide.light .score-chip { color: #7A5210; background: rgba(255,236,190,.75); border-color: rgba(160,120,30,.22); }
.slide.light .rail .act { background: rgba(255,255,255,.58); border-color: rgba(0,0,0,.08); color: #2E2A26; }
.slide.light .rail .act.liked { background: rgba(255,120,120,.22); border-color: rgba(200,60,60,.3); color: #C0392B; }
.slide.light .hint { color: rgba(46,42,38,.5); }
.slide.light .rail .act small { color: rgba(46,42,38,.62); }

/* 右侧交互栏 */
.rail { position: absolute; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 6; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.rail .act { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.10); border: 0.5px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); cursor: pointer; transition: transform .12s ease, background .15s ease; }
.rail .act:active { transform: scale(.88); }
.rail .act svg { width: 20px; height: 20px; }
.rail .act.liked { background: rgba(255,45,85,.18); border-color: rgba(255,45,85,.5); }
.rail .act.liked svg { stroke: #FF2D55; }
.rail .act.faved { background: rgba(250,199,117,.18); border-color: rgba(250,199,117,.5); }
.rail .act.faved svg { stroke: #FAC775; fill: #FAC775; }
.rail .act small { position: absolute; transform: translateY(34px); font-size: 10px; color: rgba(255,255,255,.7); }

/* 底部上滑提示 */
.hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); z-index: 5; text-align: center; color: rgba(255,255,255,.65); font-size: 12px; pointer-events: none; transition: opacity .5s ease; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hint svg { width: 22px; height: 13px; }
.hint.hide { opacity: 0; }

/* 双击爱心动画 */
.burst { position: absolute; z-index: 7; pointer-events: none; color: #FF2D55; font-size: 80px; transform: translate(-50%, -50%) scale(0); opacity: 0; }
.burst.go { animation: burst .8s ease forwards; }
@keyframes burst { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 30% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; } 100% { transform: translate(-50%,-60%) scale(1.4); opacity: 0; } }

/* 游戏内通用 UI */
.gwrap { position: absolute; inset: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.gwrap h2 { font-size: 20px; font-weight: 600; letter-spacing: .5px; }
.gwrap p { font-size: 13px; color: rgba(255,255,255,.7); }
.gbtn { margin-top: 6px; padding: 11px 26px; border-radius: 999px; border: 0.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); }
.gbtn:active { transform: scale(.95); }
canvas { display: block; touch-action: none; }

/* 启动页 */
.launch { position: absolute; inset: 0; z-index: 20; background: radial-gradient(120% 80% at 50% 30%, #1a1730 0%, #0a0a0f 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity .4s ease; }
.launch.gone { opacity: 0; pointer-events: none; }
.launch-logo { font-size: 44px; font-weight: 700; background: linear-gradient(90deg, #25F4EE, #FF2D55); -webkit-background-clip: text; background-clip: text; color: transparent; }
.launch-sub { font-size: 13px; color: rgba(255,255,255,.6); }
.start-btn { margin-top: 10px; padding: 13px 44px; border-radius: 999px; border: none; background: linear-gradient(90deg, #25F4EE, #FF2D55); color: #0a0a0f; font-size: 16px; font-weight: 600; cursor: pointer; }
.start-btn:active { transform: scale(.96); }

/* ================= 噗噗陪伴层（v3） ================= */
/* 浮动嘴替：左下角，点它换人格，长按回家 */
#pupu { position: absolute; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); z-index: 8; width: 56px; cursor: pointer; transition: transform .15s ease; }
#pupu:active { transform: scale(.9); }
#pupu img { width: 56px; height: 56px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); border-radius: 50%; }
#pupu-bubble { position: absolute; left: 62px; bottom: 12px; min-width: 120px; max-width: 210px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255,248,240,.94); color: #3D3A38; font-size: 12.5px; line-height: 1.45; box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; transform: translateY(6px) scale(.92); transform-origin: left bottom; transition: opacity .18s ease, transform .28s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
#pupu-bubble.on { opacity: 1; transform: translateY(0) scale(1); }

/* 深夜模式：画面整体收着，噗噗气泡更柔 */
body.night .phone .feed { filter: saturate(.72) brightness(.86); }
body.night #pupu-bubble { background: rgba(40,44,66,.94); color: #E6E9F5; }
body.night .launch { background: radial-gradient(120% 80% at 50% 30%, #10131f 0%, #05060c 70%); }

/* 浮层（分享卡 / 祝福 / 家） */
.pupu-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(10,8,6,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pupu-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.pupu-card { width: min(78vw, 320px); border-radius: 18px; box-shadow: 0 16px 44px rgba(0,0,0,.35); }
.pupu-card-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pc-btn { padding: 10px 20px; border-radius: 999px; border: 0.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 14px; cursor: pointer; }
.pc-btn:active { transform: scale(.94); }
.pc-primary { background: linear-gradient(90deg, #FF8A65, #FFB59B); border: none; color: #3D2A20; font-weight: 600; }

/* 祝福卡 */
.pupu-bless-box { background: #FFF8F0; border-radius: 22px; padding: 28px 24px 22px; width: min(84vw, 330px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.3); }
.pupu-bless-box img { width: 96px; height: 96px; border-radius: 50%; }
.pb-title { font-size: 13px; color: #9B9691; }
.pb-text { font-size: 20px; font-weight: 600; color: #3D3A38; }
.pb-text.big { font-size: 26px; line-height: 1.5; }
.pupu-bless-box .pc-btn { color: #3D2A20; }
.pupu-bless-box .pc-swap, .pupu-bless-box .pc-close { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); color: #6B6560; }

/* 噗噗的家 */
.pupu-home { align-items: stretch; padding: 0; }
.ph-page { background: linear-gradient(180deg, #FFF8F0, #F7EBDD); width: 100%; height: 100%; overflow-y: auto; padding: calc(env(safe-area-inset-top,0px) + 16px) 18px 30px; color: #3D3A38; }
.ph-head { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.ph-gongde { margin-left: auto; font-size: 13px; font-weight: 600; color: #B07A2A; background: rgba(255,209,102,.25); padding: 5px 12px; border-radius: 999px; }
.ph-x { margin-left: 4px; width: 34px; height: 34px; padding: 0; font-size: 18px; color: #6B6560; background: rgba(0,0,0,.05); border: none; }
.ph-room { position: relative; height: 240px; border-radius: 20px; background: linear-gradient(180deg, #FDF3E7 0%, #F3E2CC 78%, #E8D3B6 78%, #E8D3B6 100%); box-shadow: inset 0 2px 10px rgba(120,95,60,.1); margin-bottom: 14px; overflow: hidden; }
.ph-room img { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 110px; }
.ph-deco { position: absolute; font-size: 26px; transform: translate(-50%, -50%); }
.ph-pool { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.ph-bar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.08); margin-top: 8px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FFD166, #FF8A65); transition: width .4s ease; }
.ph-sec { font-size: 14px; font-weight: 700; margin: 14px 0 10px; }
.ph-shop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ph-item { background: rgba(255,255,255,.65); border-radius: 14px; padding: 10px 4px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ph-item:active { transform: scale(.93); }
.ph-item i { font-style: normal; font-size: 24px; }
.ph-item b { font-size: 11px; }
.ph-item em { font-style: normal; font-size: 10px; color: #9B9691; }
.ph-item.owned { opacity: .55; }
.ph-moods { display: flex; gap: 8px; flex-wrap: wrap; font-size: 22px; }
.ph-moods span { display: flex; flex-direction: column; align-items: center; }
.ph-moods small { font-size: 9px; color: #9B9691; }
.ph-none { font-size: 12px; color: #9B9691; }
.ph-acts { margin-top: 18px; display: flex; justify-content: center; }
.ph-acts .pc-btn { background: rgba(0,0,0,.06); border: none; color: #6B5340; }

/* 心情打卡（启动页） */
.mood-checkin { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; }
.mc-q { font-size: 14px; color: rgba(255,255,255,.75); }
.mc-row { display: flex; gap: 12px; }
.mc-chip { width: 62px; height: 68px; border-radius: 16px; border: 0.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 24px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mc-chip small { font-size: 10px; color: rgba(255,255,255,.7); }
.mc-chip:active { transform: scale(.92); }
.mc-skip { background: none; border: none; color: rgba(255,255,255,.45); font-size: 12px; cursor: pointer; }

/* ================= 弹幕层（v4） ================= */
#dmk-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.dmk { position: absolute; left: 100%; white-space: nowrap; font-size: 14px; color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.45); pointer-events: auto; cursor: pointer; animation: dmkFly linear both; will-change: transform; padding: 2px 6px; }
#dmk-layer.light .dmk { color: rgba(40,36,32,.85); text-shadow: 0 1px 3px rgba(255,255,255,.5); }
.dmk-own { color: #FFD166; font-weight: 600; border: 1px solid rgba(255,209,102,.55); border-radius: 999px; background: rgba(0,0,0,.25); backdrop-filter: blur(2px); }
.dmk-plus { color: #7FC8A9; font-weight: 600; }
@keyframes dmkFly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 100%)); } }

/* 弹幕发射面板 */
.dmk-composer { position: absolute; inset: 0; z-index: 28; background: rgba(10,8,6,.45); display: flex; align-items: flex-end; }
.dc-box { width: 100%; background: #FFF8F0; border-radius: 20px 20px 0 0; padding: 18px 16px calc(env(safe-area-inset-bottom,0px) + 18px); }
.dc-title { font-size: 14px; font-weight: 700; color: #3D3A38; margin-bottom: 12px; text-align: center; }
.dc-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.dc-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.04); color: #3D3A38; font-size: 13px; cursor: pointer; }
.dc-chip:active { transform: scale(.94); background: #FFE0CC; }
.dc-close { display: block; margin: 0 auto; background: none; border: none; color: #9B9691; font-size: 13px; cursor: pointer; }

/* 弹幕开关在右栏的第 5 个按钮 */
.rail .act.act-dmk.off { opacity: .35; }
.rail .act.act-dmk svg { stroke-width: 0; fill: #fff; }
.rail .act.act-dmk.off svg { fill: rgba(255,255,255,.6); }