:root{--bg:#08070b;--panel:#16131d;--panel2:#211c2c;--line:#2f2840;--text:#f3eef7;--muted:#a59db5;--accent:#f0a8c8;--accent2:#ffd3e6;--glow:#e3b2ff;--ok:#8fd6b0;--bad:#f39a9a;
  --N:#9b98a3;--SR:#b48ef0;--UR:#ff6f91;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,"PingFang TC","Microsoft JhengHei","Noto Sans TC","Hiragino Sans",sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.screen{display:none;height:100dvh}
.screen.on{display:block}
.btn{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:10px 20px}
.btn.primary{background:linear-gradient(135deg,#f6b4d0,#e58bb4);border:0;color:#2a1020;font-weight:700}
.btn.big{padding:15px 40px;font-size:17px;box-shadow:0 8px 30px rgba(240,140,190,.35)}
.btn.small{padding:4px 12px;font-size:13px}
.err{color:var(--bad);min-height:1.4em;font-size:14px;margin-top:6px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.sp{flex:1}

/* S1 enter */
#s-enter.on{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 80% at 50% 0%,#33203d 0%,var(--bg) 60%)}
.enter{width:min(380px,100% - 32px);text-align:center}
.brand{letter-spacing:.35em;font-weight:800;color:var(--accent);margin-bottom:8px}
.enter h1{font-size:24px;margin:0 0 6px}
.enter form{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.enter input{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 16px;color:var(--text);font-size:16px;text-align:center}
.fine{font-size:12px;color:var(--muted);margin-top:26px}

/* the stage: a 16:9 frame; web shows it whole (cover), the phone shows her upper body (positioned by JS) */
.stage{position:fixed;inset:0;overflow:hidden;background:#000}
.frame{position:absolute;left:0;top:0;width:100%;height:100%}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.videos>div{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.videos>div.on{opacity:1}
.videos video{object-fit:fill!important;width:100%!important;height:100%!important}
/* the sources are drawn into the stage canvas (one colour path); they stay in the page, invisible, so they keep playing */
#art,.idle,.videos,.clip{opacity:0!important;pointer-events:none}
.stagecv{z-index:2}
/* the sharpened picture sits over the room's middle: x 256–1792 of 2048 */
.piccv{position:absolute;top:0;height:100%;left:12.5%;width:75%;z-index:2;pointer-events:none}
.dip{position:absolute;inset:0;background:#000;opacity:0;z-index:2;pointer-events:none}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 34%,rgba(0,0,0,0) 55%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 13%,rgba(0,0,0,0) 72%,rgba(0,0,0,.65) 100%);z-index:3}
.top{position:absolute;top:calc(var(--safe-t) + 14px);left:20px;right:20px;display:flex;align-items:center;gap:8px;z-index:5;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tier{display:inline-block;font-size:12px;font-weight:800;padding:1px 8px;border-radius:6px;color:#16101c;background:var(--N)}
.tier.SR{background:var(--SR)}.tier.UR{background:linear-gradient(135deg,#ffd36e,#ff6f91)}
.live-dot{font-size:12px;font-weight:700;background:rgba(220,40,80,.88);padding:3px 10px;border-radius:999px;text-shadow:none}
.cliptag{font-size:12px;font-weight:600;background:rgba(240,150,200,.9);color:#2a1020;padding:3px 10px;border-radius:999px}
.status{font-size:12px;font-weight:500;background:rgba(20,14,26,.6);padding:3px 10px;border-radius:999px;backdrop-filter:blur(6px)}
.chip{width:34px;height:34px;border-radius:50%;background:rgba(20,14,26,.5);border:1px solid rgba(255,255,255,.18);font-size:13px;backdrop-filter:blur(6px)}
.you{position:absolute;right:20px;top:calc(var(--safe-t) + 62px);z-index:5;font-size:13px;color:var(--accent2);background:rgba(20,14,26,.55);padding:5px 12px;border-radius:12px;max-width:60%;backdrop-filter:blur(6px)}

/* her line, left, with the voice wave (owner's reference) */
.left{position:absolute;left:6%;top:50%;transform:translateY(-50%);z-index:5;width:min(36%,520px);display:flex;flex-direction:column;gap:22px}
.say{pointer-events:none;transition:opacity .8s}
.say.stale{opacity:.45}
.say .who{display:flex;align-items:center;gap:12px}
.spk{width:30px;height:30px;flex:none;color:var(--glow);filter:drop-shadow(0 0 8px rgba(214,140,255,.8))}
.l1{font-size:clamp(20px,2.3vw,34px);font-weight:700;letter-spacing:.03em;text-shadow:0 0 18px rgba(214,140,255,.55),0 2px 8px rgba(0,0,0,.7)}
.l2{font-size:clamp(14px,1.6vw,24px);color:rgba(255,255,255,.6);margin:6px 0 0 42px;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.wave{display:flex;align-items:center;gap:3px;height:24px;margin:12px 0 0 42px}
.wave i{display:block;width:3px;height:3px;background:rgba(255,255,255,.65);border-radius:2px;transition:height .12s}
.say.speaking .wave i{animation:wv .9s ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(1)}50%{transform:scaleY(4)}}

.cta{padding-left:42px}
.scene{margin:0 0 16px;font-size:14px;color:#efe6f3;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.dock{position:absolute;left:20px;right:20px;bottom:calc(16px + var(--safe-b));z-index:5;display:flex;flex-direction:column;gap:10px}
.asks{display:flex;flex-wrap:wrap;gap:8px}
.ask{white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(20,14,26,.55);border:1px solid rgba(255,255,255,.2);font-size:14px;backdrop-filter:blur(6px)}
.ask.hot{border-color:var(--accent);color:var(--accent2)}
.ask.swap{border-style:dashed}
.ask.lock{opacity:.75}
.bar{display:flex;align-items:center;gap:12px}
.looks{display:flex;gap:8px}
.look{position:relative;width:96px;border-radius:10px;overflow:hidden;border:2px solid transparent;background:#111;padding:0}
.look img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.look.on{border-color:var(--accent)}
.look .tier{position:absolute;left:4px;top:3px;font-size:10px;padding:0 5px}
.look.lock img{filter:blur(4px) brightness(.4)}
.look.lock::after{content:"🔒 抽卡";position:absolute;left:0;right:0;bottom:3px;text-align:center;font-size:11px}
.round{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;padding:0;color:#fff;background:rgba(30,22,40,.6);border:1px solid rgba(255,255,255,.18);font-size:17px;backdrop-filter:blur(6px)}
.round.end{background:rgba(200,40,70,.75)}
.mic{width:72px;height:72px;border-radius:50%;border:0;background:linear-gradient(135deg,#f6b4d0,#e58bb4);color:#2a1020;font-weight:700;font-size:12px;padding:0;white-space:nowrap;box-shadow:0 6px 26px rgba(240,140,190,.45)}
.mic.listening{animation:pulse 1.2s infinite;background:linear-gradient(135deg,#ff8fb8,#ff5d93);color:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,110,160,.6)}100%{box-shadow:0 0 0 22px rgba(255,110,160,0)}}
.typebar{display:flex;gap:8px}
.typebar input{flex:1;background:rgba(20,14,26,.75);border:1px solid var(--line);border-radius:999px;padding:10px 16px;color:var(--text);font-size:16px}
.offer{position:absolute;right:20px;bottom:150px;z-index:6;max-width:360px;background:rgba(25,16,32,.88);border:1px solid var(--accent);border-radius:16px;padding:10px 14px;display:flex;gap:10px;align-items:center;backdrop-filter:blur(8px)}
.offer img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.offer div{flex:1;font-size:13px}
.unmute{position:absolute;left:50%;top:30%;transform:translateX(-50%);z-index:8;background:var(--accent);color:#2a1020;border:0;border-radius:999px;padding:10px 18px;font-weight:700}
body.in-live .cta{display:none}
body:not(.in-live) .asks,body:not(.in-live) #kbBtn,body:not(.in-live) #micBtn{display:none}

/* phone: her upper body (the frame is scaled and placed by JS); the line sits low, buttons scroll */
body.phone .left{left:16px;right:16px;top:auto;bottom:calc(178px + var(--safe-b));transform:none;width:auto;gap:14px}
body.phone .l2{margin-left:42px}
body.phone .wave{margin-left:42px}
body.phone .shade{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%)}
body.phone .cta{padding-left:0;text-align:center}
body.phone .dock{left:12px;right:12px}
body.phone .asks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:28px}
body.phone .asks::-webkit-scrollbar{display:none}
body.phone .frame{transition:left .5s ease,top .5s ease,width .5s ease,height .5s ease}
body.phone .ask{white-space:nowrap;font-size:13px;padding:6px 12px}
body.phone .look{width:58px}
body.phone .look.lock::after{content:"🔒";font-size:10px;left:auto;right:4px;bottom:2px}
body.phone .mic{width:62px;height:62px;font-size:11px}
body.phone .offer{left:12px;right:12px;bottom:calc(200px + var(--safe-b));max-width:none}
body.phone .you{top:calc(var(--safe-t) + 54px);right:12px}

/* sheets */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(6,4,10,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
.sheet-body{width:min(560px,100% - 24px);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 20px;max-height:88dvh;overflow:auto}
.sheet-body.wide{width:min(820px,100% - 24px)}
.sheet h2{margin:0 0 6px;font-size:19px}
.quote{font-size:15px;color:var(--accent2)}
.pool{display:flex;gap:12px;margin-top:12px}
.pool .p{flex:1;background:var(--panel2);border-radius:12px;padding:8px;text-align:center;font-size:13px}
.pool .p img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;margin-bottom:6px}
.pool .p.got img{opacity:.45}
.seg{display:flex;background:var(--panel2);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:5px 14px;border-radius:999px;color:var(--muted)}
.seg button.on{background:var(--accent);color:#2a1020;font-weight:700}
.tabs{display:flex;gap:6px;margin-top:16px}
.tabs button{border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:5px 14px;color:var(--muted)}
.tabs button.on{border-color:var(--accent);color:var(--text)}
.stats table{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.stats td,.stats th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:right;vertical-align:top}
.stats td:first-child,.stats th:first-child{text-align:left}
.stats .good{color:var(--ok)}.stats .badv{color:var(--bad)}
.stats .cl{background:var(--panel2);border-radius:12px;padding:10px 12px;margin-top:10px;font-size:13px}
.stats .cl b{color:var(--accent2)}

/* reveal */
.reveal{position:fixed;inset:0;z-index:30;background:radial-gradient(circle at 50% 45%,#2a1638,#07050b 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;perspective:1400px;padding:20px}
.burst{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.reveal.SR .burst{opacity:1;background:radial-gradient(circle at 50% 42%,rgba(180,142,240,.55),transparent 55%)}
.reveal.UR .burst{opacity:1;background:conic-gradient(from 0deg at 50% 42%,rgba(255,111,145,0),rgba(255,211,110,.45),rgba(255,111,145,.5),rgba(180,142,240,.4),rgba(255,111,145,0));animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.flip{position:relative;width:min(78vw,720px);aspect-ratio:16/9;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.flip.open{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.face.back{background:linear-gradient(135deg,#3b2350,#1b1226);display:grid;place-items:center;border:2px solid rgba(240,168,200,.5)}
.face.back span{letter-spacing:.4em;font-weight:800;color:var(--accent)}
.face.front{transform:rotateY(180deg)}
.face.front img,.face.front video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face.front video{opacity:0;transition:opacity .5s}
.face.front video.on{opacity:1}
.reveal.UR .face.front{box-shadow:0 0 0 3px #ffd36e,0 0 60px rgba(255,111,145,.7)}
.reveal.SR .face.front{box-shadow:0 0 0 3px var(--SR),0 0 50px rgba(180,142,240,.6)}
.reveal-text{position:relative;text-align:center}
.reveal-text h2{margin:6px 0}
.tier.big{font-size:20px;padding:2px 14px}
/* phone, before the live: her line above the button, no scene blurb (it would cover her) */
body.phone .cta .scene{display:none}
body.phone:not(.in-live) .left{bottom:calc(92px + var(--safe-b))}
.top .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.phone .cliptag{font-size:11px;padding:2px 8px}
.quota{margin-top:10px;font-size:13px;color:var(--muted)}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
:lang(ja){font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif}
/* ---- MVP3 polish (UX matrix, 2026-10-18) ---- */
.look .tier{font-size:11px}
/* her lines stay readable over a bright room (the maid's cream wall): a soft dark halo behind the text column */
.left{isolation:isolate}
.left::before{content:"";position:absolute;inset:-70px -90px -70px -140px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(8,6,12,.62),rgba(8,6,12,.36) 55%,rgba(8,6,12,0))}
.l2{color:rgba(255,255,255,.74)}
/* touch screens: every control at least 40 px */
@media (pointer:coarse){
  .chip{width:40px;height:40px}
  .btn.small{min-height:40px;padding:8px 14px}
  .seg button,.tabs button{min-height:40px}
  body.phone .look{width:72px}
}
/* phone: the draw offer sits under the top bar, clear of her line */
body.phone .offer{top:calc(var(--safe-t) + 64px);bottom:auto}
/* a short landscape screen (a phone on its side): one compact column, nothing under the top bar or over the dock */
@media (max-height:520px) and (orientation:landscape){
  .left{top:54px;transform:none;gap:10px;width:min(44%,460px)}
  .l1{font-size:17px}
  .l2{font-size:13px;margin-top:2px}
  .cta .scene{display:none}
  .btn.big{padding:10px 22px;font-size:15px}
  .quota{margin-top:6px}
  .dock{gap:6px;bottom:calc(8px + var(--safe-b))}
  .mic{width:54px;height:54px}
  .enter h1{font-size:22px;margin:4px 0}
  .enter .brand{margin:0}
  .enter form{gap:8px}
  .enter .fine{margin-top:10px}
  .flip{width:min(50vw,400px)}
  .reveal-text h2{font-size:18px;margin:2px 0}
  .reveal-text .quote{display:none}
  .sheet-body{max-height:calc(100vh - 24px);overflow:auto}
}
/* phone top bar in the live: the tier badge stands for the card, the timer and the clip tag never wrap */
.live-dot,.cliptag,.status{white-space:nowrap}
body.phone.in-live .top .t{display:none}