/* Round 5 / Prototype Guideline v6.1 — authoritative mobile UI layer */
:root{--ui-bg:#120d0f;--ui-panel:rgba(24,17,19,.94);--ui-panel-2:rgba(40,25,27,.96);--ui-line:rgba(238,194,104,.42);--ui-gold:#f2c463;--ui-orange:#ff7a45;--ui-coral:#ff5b55;--ui-cyan:#65c9ff;--ui-text:#fffaf0;--ui-sub:#c9bec0;--ui-radius:12px;--ui-shadow:0 12px 32px rgba(0,0,0,.52)}
*{box-sizing:border-box}
html,body{background:#070607}
body,#app,button{font-family:"PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif}
button{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease,filter .12s ease,border-color .12s ease,background-color .12s ease;cursor:pointer}
button:not(:disabled):hover{filter:brightness(1.08)}button:not(:disabled):active{transform:translateY(2px) scale(.985);filter:brightness(.94)}button:focus-visible{outline:2px solid #fff3b1;outline-offset:2px}button:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.48}
.tap-ripple{position:absolute!important;z-index:20!important;width:12px!important;height:12px!important;margin:-6px!important;border-radius:50%!important;background:rgba(255,255,255,.55)!important;pointer-events:none!important;animation:uiRipple .52s ease-out forwards!important}.number-bump{display:inline-block;animation:numberBump .34s cubic-bezier(.2,.9,.25,1.4)}
.star-float{position:absolute;z-index:4;right:10px;top:-3px;color:#fff1a8;font-size:13px;font-weight:900;text-shadow:0 2px 5px #000;pointer-events:none;animation:starFloat .9s ease-out forwards}

/* App flow: permanent media background, safe HUD, content, then economy dock. */
#app{isolation:isolate;display:grid;grid-template-columns:minmax(104px,30%) minmax(0,1fr) minmax(150px,44%);grid-template-rows:64px minmax(0,1fr) auto;overflow:hidden;color:var(--ui-text);background:var(--ui-bg)}
.stage{position:absolute!important;inset:0!important;z-index:-2!important}.stage video{width:100%;height:100%;object-fit:cover}.bar-vignette{background:linear-gradient(180deg,rgba(7,5,7,.52) 0,transparent 20%,transparent 58%,rgba(8,6,8,.68) 86%,rgba(8,6,8,.94) 100%)}
.topbar{position:relative!important;inset:auto!important;grid-area:1/1/2/4;align-self:start;z-index:20;display:flex;align-items:center;justify-content:space-between;height:58px;margin:6px 10px 0;padding:0;background:none!important}
.host-card{display:flex;align-items:center;min-width:0;height:48px;padding:7px 9px;border:1px solid var(--ui-line);border-radius:11px;background:rgba(22,14,17,.86);box-shadow:0 5px 18px rgba(0,0,0,.35)}.host-card .meta{min-width:0}.host-card b{font-size:14px;line-height:1.15}.host-card small{display:block;margin-top:3px;color:#dbcac4;font-size:9px}.vip{margin-left:8px;padding:4px 7px;border-radius:5px;background:var(--ui-gold);color:#3a250b;font-size:9px;font-weight:900}
.top-right{display:flex!important;align-items:center;gap:6px}.crown-c,.mute-btn,.close-x{display:grid;place-items:center;min-height:38px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(12,10,12,.75);color:#fff}.crown-c{padding:0 9px;border-color:var(--ui-line);color:#ffe083;font-size:11px;font-weight:800}.mute-btn{width:38px;padding:0;font-size:16px}.close-x{width:38px;font-size:15px}
.more-live{position:absolute!important;z-index:19!important;top:70px!important;right:10px!important;padding:7px 10px!important;border-radius:7px!important;background:#ab325e!important;color:#fff!important;font-size:11px!important;font-weight:800!important}

.rank{position:relative!important;inset:auto!important;grid-area:2/1/3/2;align-self:start;z-index:10;width:auto!important;max-height:52vh;margin:20px 0 0 10px;padding:9px 8px!important;border:1px solid var(--ui-line)!important;border-radius:10px!important;background:rgba(20,14,17,.86)!important;box-shadow:0 7px 24px rgba(0,0,0,.38)!important;backdrop-filter:blur(6px)}
.rank h4{margin:0;color:#ffe18b;font-size:12px}.rank-sub{margin:2px 0 5px;color:#b9aaad;font-size:8px}.rank-item{display:grid!important;grid-template-columns:16px 28px 1fr;align-items:center;gap:5px;min-height:39px;padding:4px 0!important;border-top:1px solid rgba(255,255,255,.08)}.rank-item:first-child{border-top:0}.rank-item .no{font-size:10px}.rank-item .ava{width:27px!important;height:27px!important}.rank-item .txt{min-width:0}.rank-item .txt b{display:block;overflow:hidden;color:#fff;font-size:10px;white-space:nowrap;text-overflow:ellipsis}.rank-item .txt span{color:#dbc8bd;font-size:8px;font-variant-numeric:tabular-nums}

.danmu{position:relative!important;inset:auto!important;grid-area:2/3/3/4;align-self:end;z-index:7;width:auto!important;max-height:30vh!important;margin:0 8px 14px 8px;overflow:hidden;mask-image:linear-gradient(transparent,#000 20%)}.danmu .d{margin-top:4px!important;padding:5px 7px!important;border-left:2px solid rgba(101,201,255,.72)!important;border-radius:3px 7px 7px 3px!important;background:rgba(9,8,10,.68)!important;box-shadow:0 3px 10px rgba(0,0,0,.22)!important;color:#fff;font-size:10px!important;line-height:1.35!important}.danmu .u{color:var(--ui-cyan)!important;font-weight:700}
.voice-now{position:absolute!important;z-index:22!important;top:68px!important;left:50%!important;right:auto!important;bottom:auto!important;max-width:48%;padding:6px 10px!important;border:1px solid rgba(255,255,255,.14)!important;border-left:3px solid var(--ui-gold)!important;border-radius:6px!important;background:rgba(13,11,13,.88)!important;box-shadow:0 5px 16px rgba(0,0,0,.35)!important;transform:translateX(-50%)!important;color:#f8eeee!important;font-size:10px!important}

.control-bubble,.action-panel{position:relative!important;inset:auto!important;grid-area:2/1/3/3;align-self:end;z-index:12;width:auto!important;max-height:46vh;margin:0 8px 14px;padding:13px!important;border:1px solid var(--ui-line)!important;border-left:3px solid var(--ui-gold)!important;border-radius:10px!important;background:var(--ui-panel)!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:blur(8px)!important;animation:panelEnter .22s cubic-bezier(.2,.8,.2,1) both!important;text-align:left!important}
.control-bubble{display:flex!important;flex-direction:column!important;align-items:stretch!important;min-height:0!important}.control-bubble b{color:#f6c963!important;font-size:13px!important}.control-bubble span{margin-top:5px;color:#fff8ef!important;font-size:12px!important;line-height:1.55!important}.control-bubble i{align-self:flex-end;margin-top:8px;color:#e8c886!important;font-size:10px!important;font-style:normal!important}
.action-panel{display:grid!important;gap:8px;grid-area:2/2/3/4;overflow:auto}.action-panel>b,.panel-prompt{color:#ffe49b!important;font-size:15px!important;line-height:1.35}.action-panel>small,.action-panel>span{color:var(--ui-sub)!important;font-size:11px!important;line-height:1.5}.action-panel button,.bp-main,.hb-next,.bl-confirm{min-height:46px;padding:10px 12px!important;border:1px solid rgba(243,196,99,.38)!important;border-radius:8px!important;background:#44262b!important;box-shadow:0 3px 0 rgba(0,0,0,.5)!important;color:#fff8ed!important;font-size:12px!important;font-weight:800!important}.action-panel button.primary,.scene-decision .action-panel button.primary,.bp-main{border-color:#ffd98b!important;background:linear-gradient(180deg,#ffb44f,#ff7b42)!important;color:#351c0b!important}
.scene-decision .action-panel,.scene-final-decision .action-panel{grid-area:2/1/3/4;margin:0 12px 14px;max-width:560px;justify-self:center;width:calc(100% - 24px)!important}.scene-decision .danmu,.scene-final-decision .danmu{opacity:.25;pointer-events:none}

.entry-live{position:relative!important;inset:auto!important;grid-area:2/1/3/4;align-self:end;justify-self:center;z-index:20;width:calc(100% - 28px);max-width:460px;margin:0 14px 24px;padding:16px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:rgba(21,14,17,.94)!important;box-shadow:var(--ui-shadow)!important;text-align:left!important;animation:panelEnter .25s ease-out both}.entry-live small,.entry-live b,.entry-live span,.entry-live em{display:block}.entry-live small{color:#e7b56a!important;font-size:10px!important}.entry-live b{margin-top:5px!important;color:#fff4d2!important;font-size:22px!important;text-shadow:none!important}.entry-live span{margin-top:5px!important;color:#ddd2d2!important;font-size:12px!important}.entry-live button{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:13px;border:1px solid #ffd994!important;border-radius:8px!important;background:linear-gradient(180deg,#ffb54f,#ff7840)!important;box-shadow:0 4px 0 #8d3d25!important;color:#321909!important;font-size:15px!important;font-weight:900}.entry-live button i{display:none!important}.entry-live em{margin-top:7px!important;color:#aa9ea1!important;font-size:9px!important;text-align:center}

.dock{position:relative!important;inset:auto!important;grid-area:3/1/4/4;z-index:30;width:100%;padding-bottom:max(6px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.11);background:rgba(13,11,13,.97);box-shadow:0 -8px 28px rgba(0,0,0,.42)}
.star-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:51px;padding:6px 9px!important;border-bottom:1px solid rgba(255,255,255,.08)}.star-pill{position:relative;display:flex!important;align-items:center;min-width:0;height:39px;padding:5px 8px!important;border:1px solid var(--ui-line)!important;border-radius:8px!important;background:#21181a!important}.star-mark{flex:0 0 auto;width:25px!important;height:25px!important;margin-right:7px;background:var(--ui-gold)!important}.star-balance{display:flex;align-items:baseline;gap:3px}.star-balance b{font-size:16px;font-variant-numeric:tabular-nums}.star-balance small{color:#c9b6a5;font-size:9px}.income-rate{display:flex;align-items:center;gap:4px;min-width:0;margin-left:10px;padding-left:9px;border-left:1px solid rgba(255,255,255,.12);color:#bcb0b1;font-size:8px;white-space:nowrap}.income-rate i{width:6px;height:6px;border-radius:50%;background:#58d69b;box-shadow:0 0 7px #58d69b;animation:signalPulse 1.2s ease-in-out infinite}.income-rate b{color:#76dfad;font-size:9px}
.ad-btn{display:flex!important;align-items:center;gap:7px;min-width:117px;min-height:40px;margin:0!important;padding:5px 9px!important;border:1px solid #ffb57a!important;border-radius:8px!important;background:linear-gradient(180deg,#633126,#3e201f)!important;box-shadow:0 3px 0 #1b0e0e!important;color:#fff!important}.ad-btn .play-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ff7a45;color:#fff;font-size:9px}.ad-btn>span:last-child{display:flex;flex-direction:column;align-items:flex-start}.ad-btn small{color:#e4b9a8;font-size:7px}.ad-btn b{font-size:11px}
.gift-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));height:auto!important}.gift{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:68px;padding:5px 2px!important;border:0!important;border-right:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;background:#171417!important;box-shadow:none!important;color:#fff!important}.gift:last-child{border-right:0!important}.gift .ic{height:25px;font-size:21px;line-height:25px;filter:none!important}.gift .nm{max-width:100%;margin-top:2px;overflow:hidden;color:#f2ecec;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.gift .pr{color:#f1c160;font-size:8px;font-weight:700}.input-bar{display:flex!important;align-items:center;gap:8px;min-height:45px;padding:5px 9px!important;border-top:1px solid rgba(255,255,255,.08)!important;background:#0f0d0f!important}.input-bar .ph{flex:1;height:34px;padding:8px 12px;border:1px solid #393337;border-radius:17px;color:#817b7e;font-size:11px}.send-gift{min-width:49px;height:34px;border:1px solid #f5b45a!important;border-radius:17px!important;background:#bd6a25!important;color:#fff!important;font-size:10px;font-weight:800}.ring{color:#aaa1a5;font-size:11px}

.supply-sheet{position:absolute!important;z-index:80!important;left:12px!important;right:12px!important;bottom:calc(178px + env(safe-area-inset-bottom))!important;padding:17px!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:#211719!important;box-shadow:0 20px 60px rgba(0,0,0,.72)!important;animation:sheetEnter .24s cubic-bezier(.2,.8,.2,1) both!important}.supply-sheet::before{content:"";position:fixed;z-index:-1;inset:0;background:rgba(0,0,0,.48)}.supply-sheet header small,.supply-sheet header b{display:block}.supply-sheet header small{color:#caa6a0;font-size:9px}.supply-sheet header b{margin-top:3px;color:#ffe49a;font-size:20px}.supply-sheet p{margin:9px 0;color:#d0c3c4;font-size:11px;line-height:1.55}.supply-close{position:absolute;right:8px;top:7px;width:38px;height:38px;border:0;background:none;color:#bfb4b7;font-size:20px}.supply-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.supply-goals button{min-height:40px;border:1px solid #5f4745;border-radius:7px;background:#312225;color:#ddced0;font-size:10px}.supply-goals button.on{border-color:var(--ui-gold);background:#604128;color:#fff}.mystery-card{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px;border:1px dashed rgba(242,196,99,.48);border-radius:8px;background:rgba(242,196,99,.06)}.mystery-card>i{display:grid;place-items:center;width:31px;height:38px;border:1px solid var(--ui-gold);border-radius:5px;color:var(--ui-gold);font:900 18px Georgia,serif}.mystery-card span{display:flex;flex-direction:column}.mystery-card b{font-size:11px}.mystery-card small{margin-top:2px;color:#ac9ea0;font-size:8px}.supply-watch{width:100%;min-height:48px;margin-top:10px;border:1px solid #ffd792;border-radius:8px;background:linear-gradient(180deg,#ffb64f,#ff7840);box-shadow:0 4px 0 #8d3c25;color:#321907;font-size:14px;font-weight:900}

/* Complex story/game panels share one safe stage instead of independent magic coordinates. */
.human-bar,.body-letter,.split-rps,.ranking-punishment,.benefit-punishment,.final-sprint,.finalist-duel,.final-conflict,.final-night,.final-ad-popup,.rank-transition{left:calc(30% + 8px)!important;right:8px!important;top:78px!important;bottom:180px!important;max-height:none!important;overflow:auto!important;border-radius:10px!important;background:var(--ui-panel)!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:blur(8px)!important}.scene-game .rank,.scene-special .rank{opacity:.35;pointer-events:none}
.pkbar{top:67px!important;bottom:auto!important;left:32%!important;right:10px!important;width:auto!important}.pk-timer{top:67px!important}.toast{z-index:100!important;top:auto!important;bottom:212px!important;height:auto!important;border-radius:7px!important;background:#171215!important;box-shadow:0 8px 22px rgba(0,0,0,.46)!important;color:#fff0ca!important}

@keyframes uiRipple{to{transform:scale(18);opacity:0}}@keyframes numberBump{50%{transform:scale(1.3);color:#fff0a0}}@keyframes starFloat{to{transform:translateY(-27px);opacity:0}}@keyframes signalPulse{50%{opacity:.38;transform:scale(.72)}}@keyframes panelEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes sheetEnter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:390px){#app{grid-template-columns:minmax(96px,29%) minmax(0,1fr) minmax(142px,43%)}.host-card{padding:6px 7px}.host-card b{font-size:12px}.crown-c{display:none}.rank{margin-left:7px}.control-bubble{margin-left:5px;margin-right:5px}.income-rate{margin-left:6px;padding-left:6px}.income-rate{font-size:0}.ad-btn{min-width:111px}.gift .nm{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.supply-sheet{bottom:calc(212px + env(safe-area-inset-bottom))!important}
.human-bar,.body-letter,.split-rps,.ranking-punishment,.benefit-punishment,.final-sprint,.finalist-duel,.final-conflict,.final-night,.final-ad-popup,.rank-transition{bottom:212px!important}
/* Input composer intentionally removed: gifts are the terminal bottom action. */
.toast{bottom:167px!important}
.supply-sheet{bottom:calc(167px + env(safe-area-inset-bottom))!important}
.human-bar,.body-letter,.split-rps,.ranking-punishment,.benefit-punishment,.final-sprint,.finalist-duel,.final-conflict,.final-night,.final-ad-popup,.rank-transition{bottom:167px!important}
/* Onboarding is a confirmation gate, not a narrative/chat scene. */
.scene-onboarding .danmu{display:none!important}
.scene-onboarding .action-panel{grid-area:2/1/3/4!important;justify-self:center!important;align-self:end!important;width:calc(100% - 24px)!important;max-width:480px!important;min-height:0!important;max-height:none!important;margin:0 12px 14px!important;padding:16px!important;border-left-width:4px!important}
.scene-onboarding .action-panel small{font-size:10px!important;letter-spacing:.02em}
.scene-onboarding .action-panel b{font-size:20px!important;line-height:1.2!important}
.scene-onboarding .action-panel span{font-size:12px!important;line-height:1.5!important}
.scene-onboarding .action-panel button.primary{min-height:52px!important;margin-top:3px!important;font-size:15px!important}