/* COUCH CHAMPS MVP: the app's own styles. The in-player look comes from ui.css (generated from the boards' CSS). */
:root{--ink:#2a2a6e;--ink2:#6a6ea3;--coral:#ff4f78;--gold:#ffcf3a;--goldD:#c98a00;--rim:#fff6c8;--sky1:#8f9bff;--sky2:#4e55d6;--fs:1}
html,body{margin:0;height:100%;background:#1b1d4a;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
 font-family:Nunito,system-ui,sans-serif;font-weight:900;color:var(--ink)}
#app{position:fixed;inset:0}
button{font:inherit;border:0;cursor:pointer}

/* ---------- menus ---------- */
.scr{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
 background:linear-gradient(170deg,#9aa6ff 0%,#6a78f5 45%,#3d3fb8 100%);padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 96px)}
.scr.nopad{padding:0}
.scr h1{font-size:calc(30px*var(--fs));color:#fff;text-shadow:0 3px 0 rgba(30,30,110,.55);margin:6px 2px 14px}
.scr h2{font-size:calc(21px*var(--fs));color:#fff;text-shadow:0 2px 0 rgba(30,30,110,.5);margin:18px 2px 10px}
.card{background:linear-gradient(#ffffff,#eef0ff);border-radius:24px;padding:16px;box-shadow:0 0 0 4px var(--gold),0 6px 0 var(--goldD),0 12px 22px rgba(0,0,0,.3);margin-bottom:18px}
.btn{display:block;width:100%;padding:16px 18px;border-radius:99px;font-size:calc(21px*var(--fs));letter-spacing:.05em;color:#fff;text-align:center;
 background:linear-gradient(#ffb0bf,#ff6a8a 42%,#ff4f78 58%,#e8406a);box-shadow:0 0 0 4px var(--rim),0 6px 0 #b8304f,0 10px 16px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(120,0,40,.35)}
.btn.go{background:linear-gradient(#8dffbd,#2fd27a 50%,#16a55a);box-shadow:0 0 0 4px #e4ffef,0 6px 0 #0e7a40,0 10px 16px rgba(0,0,0,.25);text-shadow:0 2px 0 rgba(0,70,30,.4)}
.btn.ghost{background:linear-gradient(#ffffff,#eef0ff);color:var(--ink);text-shadow:none;box-shadow:0 0 0 4px #dfe3ff,0 6px 0 #8f98e6}
.btn.small{display:inline-block;width:auto;padding:10px 18px;font-size:calc(17px*var(--fs))}
.btn[disabled]{filter:grayscale(.8);opacity:.6}
.row{display:flex;align-items:center;gap:12px}
.muted{color:var(--ink2);font-weight:800;font-size:calc(15px*var(--fs))}

/* entry */
.entry{position:absolute;inset:0;background-color:#1b1d4a;background-image:url(assets/entry_b2clean.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}
.entry .hit{position:absolute;left:12%;right:12%;border-radius:99px}
.entry .hit.play{top:75%;height:8.5%}.entry .hit.watch{top:84.5%;height:7%}
.entry .hit:active{background:rgba(255,255,255,.18)}

/* name */
.namecard input{width:100%;box-sizing:border-box;font:inherit;font-size:24px;padding:14px 16px;border-radius:16px;border:3px solid #dfe3ff;color:var(--ink);margin:12px 0 4px;outline:none}
.namecard input:focus{border-color:var(--gold)}
.sizes{display:flex;gap:10px;margin:12px 0 18px}
.sizes button{flex:1;padding:12px 0;border-radius:16px;background:#f1f2ff;color:var(--ink);box-shadow:inset 0 0 0 3px #dfe3ff}
.sizes button.on{background:linear-gradient(#fff3a8,#ffcf3a);box-shadow:0 0 0 3px var(--rim),0 4px 0 var(--goldD)}

/* lobby */
.hdr{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#fff;background:linear-gradient(#ff8fa6,#ff4f78);box-shadow:0 0 0 4px var(--gold)}
.hdr .who{flex:1;color:#fff;font-size:calc(20px*var(--fs));text-shadow:0 2px 0 rgba(30,30,110,.5)}
.hdr .who small{display:block;font-size:calc(14px*var(--fs));opacity:.85;font-weight:800}
.pts{display:flex;align-items:center;gap:6px;padding:6px 14px 6px 6px;border-radius:99px;background:linear-gradient(#fff,#eef0ff);box-shadow:0 0 0 3px var(--gold);font-size:calc(18px*var(--fs))}
.pts img{width:30px;height:30px}
.cont{display:flex;gap:14px;align-items:center}
.cont img{width:84px;height:120px;object-fit:cover;border-radius:14px;flex:none}
.cont .k{font-size:calc(13px*var(--fs));letter-spacing:.14em;color:var(--ink2)}
.cont .t{font-size:calc(19px*var(--fs));line-height:1.15}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#000 center/cover no-repeat;box-shadow:0 0 0 4px #fff,0 8px 16px rgba(0,0,0,.35)}
.tile .lg{position:absolute;left:6%;right:6%;bottom:30px;height:42%;background:center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.tile .ep{position:absolute;left:0;right:0;bottom:0;padding:6px 10px 8px;color:#fff;font-size:calc(14px*var(--fs));background:linear-gradient(transparent,rgba(0,0,30,.75));text-align:center;letter-spacing:.06em}
.tile .badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:99px;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--coral);box-shadow:0 0 0 2px #fff}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;padding:8px 6px calc(env(safe-area-inset-bottom) + 8px);background:linear-gradient(#3b3fb0,#2b2a8f);box-shadow:0 -4px 0 #c99a2e;z-index:5}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;color:#cfd3ff;font-size:13px}
.tabs button img{width:34px;height:34px}
.tabs button.on{color:var(--gold)}

/* show page */
.shead{position:relative;margin:-14px -16px 0;height:46vh;background:#000 center/cover no-repeat}
.shead:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#6a78f5)}
.shead .lg{position:absolute;left:10%;right:10%;bottom:10px;height:42%;background:center/contain no-repeat;z-index:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.sback{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px;width:46px;height:46px;border-radius:50%;background:rgba(10,10,50,.45);display:grid;place-items:center;z-index:3}
.sback svg{width:24px;height:24px}
.eps .e{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:2px solid #e6e8ff}
.eps .e:last-child{border-bottom:0}
.eps .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(#7d86ff,#4b55e0);box-shadow:0 0 0 3px var(--gold);flex:none}
.eps .e.done .n{background:linear-gradient(#8dffbd,#16a55a)}
.eps .e.soon{opacity:.5}
.eps .e .x{flex:1;font-size:calc(17px*var(--fs))}
.eps .e .x small{display:block;color:var(--ink2);font-size:calc(13px*var(--fs));font-weight:800}
.mode{display:flex;gap:8px;margin:4px 0 14px}
.mode button{flex:1;padding:10px;border-radius:99px;background:rgba(255,255,255,.2);color:#fff;font-size:calc(15px*var(--fs))}
.mode button.on{background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--gold)}
.gstate{display:flex;justify-content:space-between;gap:10px;font-size:calc(15px*var(--fs))}
.gstate b{font-size:calc(22px*var(--fs))}

/* trophies / my path */
.troph{display:flex;gap:14px;align-items:center}
.troph img{width:70px;height:70px;object-fit:contain}
.troph .x{flex:1}

/* ---------- the player (1080x1920 stage, cover-scaled) ---------- */
.player{position:absolute;inset:0;background:#000;overflow:hidden}
/* the app's own bands around a full-width video (tall phones, full screen) */
.pband{display:none;position:absolute;left:0;right:0;z-index:6}
.banded .pband{display:block}
.banded{background:#3c3fb2}
.pband.top{top:0;background:linear-gradient(#9aa4ff,#8b95f6)}
.pband.bot{bottom:0;display:none;align-items:center;justify-content:space-between;gap:12px;padding-left:20px;padding-right:20px;padding-top:14px;
 background:linear-gradient(#4247c4,#2f3196);box-shadow:inset 0 3px 0 rgba(255,207,58,.85)}
.banded .pband.bot{display:flex}
.pb-btn{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.pb-btn svg{width:26px;height:26px}
.pb-mid{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:15px;letter-spacing:.08em;white-space:nowrap}
.pb-mid img{height:52px;max-width:150px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.banded .stage .hud.back{display:none}
/* Yaron 11-14: the social (live chat) button bigger; centred on the MY SCORE row (cy 128) */
.stage .chatb{width:140px!important;height:140px!important;top:58px!important;right:92px!important}
.stage .chatb svg{width:86px!important;height:86px!important}
.stage .chatb .n{font-size:30px!important;height:50px!important;min-width:58px!important;top:-8px!important;right:-14px!important}
.stage{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden}
.stage video{position:absolute;inset:0;width:1080px;height:1920px;object-fit:cover;background:#000}
.stage .ov{position:absolute;inset:0;pointer-events:none}
.stage .ov > *{position:absolute;inset:0}
.stage .panel .a{pointer-events:none}
.stage .panel.live .a{pointer-events:auto;cursor:pointer}
.stage .hud.back{pointer-events:auto;cursor:pointer}
.stage .chatb{pointer-events:auto;cursor:pointer}
.lg0{position:absolute;left:130px;width:820px;object-fit:contain}
.spk{position:absolute;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255,255,255,.85))}
.tap{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,8,40,.45);pointer-events:auto;z-index:20}
.tap .btn{width:auto;padding:30px 70px;font-size:56px}
.toast{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);padding:12px 22px;border-radius:99px;background:rgba(18,18,70,.88);color:#fff;font-size:17px;
 box-shadow:0 0 0 2px rgba(255,255,255,.5);opacity:0;transition:opacity .25s;pointer-events:none;z-index:50;white-space:nowrap}
.toast.on{opacity:1}

/* pause sheet (phone units) */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:40;padding:26px 22px calc(env(safe-area-inset-bottom) + 26px);border-radius:28px 28px 0 0;
 background:linear-gradient(#fff,#eef0ff);box-shadow:0 -4px 0 var(--gold),0 -16px 30px rgba(0,0,0,.4);text-align:center}
.sheet .t{font-size:26px}.sheet .s{font-size:17px;color:#4a4a7a;margin:8px 0 18px;font-weight:800;line-height:1.35}
.sheet .s b{color:#e0307f}
.sheet .btn{margin-top:12px}
.shade{position:absolute;inset:0;background:rgba(10,8,40,.55);z-index:39}

/* ---------- NEXT EPISODE screen (approved 2026-11-11, NEXT_EP_SPEC.md), in stage px ---------- */
.nxs{position:absolute;inset:0;z-index:30;pointer-events:auto}
.nxs canvas{position:absolute;inset:0;width:1080px;height:1920px;filter:blur(18px) saturate(1.1);transform:scale(1.06)}
.nxs .dim{position:absolute;inset:0;background:linear-gradient(rgba(40,36,120,.55),rgba(30,26,90,.78))}
.nxs .col{position:absolute;left:110px;right:110px;top:0;bottom:0}
.nxs .logo{position:absolute;left:50%;top:70px;transform:translateX(-50%);height:190px;max-width:760px;object-fit:contain}
.nxs .rib{position:absolute;left:50%;top:282px;transform:translateX(-50%);white-space:nowrap;padding:14px 46px;border-radius:99px;font-size:34px;letter-spacing:.12em;color:#fff;
 background:linear-gradient(#ffb0bf,#ff6a8a 42%,#ff4f78 58%,#e8406a);box-shadow:0 0 0 5px #fff6c8,0 7px 0 #b8304f,0 14px 20px rgba(0,0,0,.3);text-shadow:0 2px 0 rgba(120,0,40,.35)}
.nxs .crd{position:absolute;left:0;right:0;border-radius:36px;background:linear-gradient(#ffffff,#eef0ff);padding:26px 34px;box-shadow:0 0 0 5px #ffcf3a,0 9px 0 #c98a00,0 18px 30px rgba(0,0,0,.35)}
.nxs .hh{font-size:28px;letter-spacing:.14em;color:#6a6ea3;text-align:center}
.nxs .qs{display:flex;justify-content:center;gap:12px;margin:18px 0 8px}
.nxs .q{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:26px;color:#6a6ea3;white-space:nowrap;width:96px}
.nxs .q .d{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:44px;color:#fff}
.nxs .q .d svg{width:48px;height:48px}
.nxs .q .ok{background:linear-gradient(#8dffbd,#2fd27a 55%,#16a55a);box-shadow:0 0 0 4px #e4ffef,0 5px 0 #0e7a40}
.nxs .q .no{background:linear-gradient(#ff8a8a,#ff3b3b);box-shadow:0 0 0 4px #ffd0d0,0 5px 0 #b81f2a}
.nxs .q .op{background:linear-gradient(#a9b1ff,#6a78f5);box-shadow:0 0 0 4px #dfe3ff,0 5px 0 #3b44b8}
.nxs .q .sk{background:linear-gradient(#e7e8f7,#b9bce0);box-shadow:0 0 0 4px #f3f4ff,0 5px 0 #8a8db8;color:#6a6ea3}
.nxs .money{display:flex;align-items:stretch;gap:18px;margin-top:20px}
.nxs .m{flex:1;border-radius:24px;background:#f1f2ff;padding:12px 18px;text-align:center;box-shadow:inset 0 0 0 3px #dfe2ff}
.nxs .m .l{font-size:26px;letter-spacing:.1em;color:#6a6ea3}
.nxs .m .v{font-size:54px;line-height:1.05;color:#2a2a6e}.nxs .m .v.g{color:#16a55a}
.nxs .m.tot{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(#fffbe6,#fff2c2);box-shadow:inset 0 0 0 3px #ffd970}
.nxs .coin{width:70px;height:70px;border-radius:50%;background:url(assets/i_coin.png) center/cover;flex:none}
.nxs .combo{position:absolute;left:0;right:0;height:150px;border-radius:36px;display:flex;align-items:center;gap:26px;padding:0 34px 0 26px;color:var(--ink);background:var(--bg);
 box-shadow:0 0 0 5px var(--ring),0 9px 0 var(--under),0 18px 30px rgba(0,0,0,.35)}
.nxs .combo .cxx{flex:none;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:58px;transform:rotate(-8deg);color:var(--ink);background:var(--bg);
 box-shadow:0 0 0 6px #fff,0 6px 0 var(--under),0 0 22px rgba(255,255,255,.7)}
.nxs .combo .t1{font-size:40px;line-height:1.05}.nxs .combo .t2{font-size:26px;margin-top:4px}
.nxs .combo.w .t1,.nxs .combo.w .cxx{text-shadow:0 3px 0 rgba(40,0,60,.4)}
.nxs .pl{position:relative;display:flex;height:76px;margin:64px 10px 4px;border-radius:99px;box-shadow:0 0 0 5px #fff6c8,0 6px 0 rgba(90,30,70,.4)}
.nxs .seg{flex:1;display:flex;align-items:center;gap:12px;padding:0 30px;color:#fff;background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 48%,rgba(0,0,50,.16)),var(--c);text-shadow:0 2px 0 rgba(0,0,40,.35)}
.nxs .seg.L{border-radius:99px 0 0 99px;padding-right:56px}.nxs .seg.R{border-radius:0 99px 99px 0;justify-content:flex-end;padding-left:56px}
.nxs .seg .nm{font-size:27px;letter-spacing:.1em}.nxs .seg .amt{font-size:44px}
.nxs .vsd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#7a4a00;
 background:linear-gradient(#fff3a8,#ffcf3a 60%,#f2b51c);box-shadow:0 0 0 5px #fff6c8,0 4px 0 #c98a00}
.nxs .stks{position:absolute;bottom:calc(100% + 12px);display:flex;gap:6px;padding:6px 14px;border-radius:99px;background:rgba(18,18,70,.62);box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.nxs .stks img{width:36px;height:36px;object-fit:contain}.nxs .stks img.off{filter:brightness(0) invert(1);opacity:.5}
.nxs .key{text-align:center;font-size:26px;color:#6a6ea3;margin-top:16px;font-weight:800}
.nxs .tease{position:absolute;left:0;right:0;display:flex;align-items:center;gap:22px;padding:22px 30px;border-radius:36px;background:rgba(18,18,70,.72);box-shadow:0 0 0 4px rgba(255,255,255,.6),0 14px 24px rgba(0,0,0,.35);color:#fff}
.nxs .tease .ta{font-size:28px;letter-spacing:.12em;color:#ffcf3a}
.nxs .tease .tb{font-size:38px;line-height:1.12;margin-top:4px}
.nxs .tease .tc{font-size:31px;opacity:.95;margin-top:6px}
.nxs .cta{position:absolute;left:30px;right:30px;height:132px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:18px;font-size:50px;letter-spacing:.06em;color:#fff;
 background:linear-gradient(#8dffbd,#2fd27a 50%,#16a55a);box-shadow:0 0 0 6px #e4ffef,0 10px 0 #0e7a40,0 20px 30px rgba(0,0,0,.35);text-shadow:0 3px 0 rgba(0,70,30,.4);cursor:pointer}
.nxs .cta.off{background:linear-gradient(#c9ccf0,#9ea3d8);box-shadow:0 0 0 6px #eef0ff,0 10px 0 #6f74b0;font-size:40px}
.nxs .cta svg{width:56px;height:56px}
.nxs .cring{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:44px;color:#fff}
.nxs .cring b{position:absolute;inset:9px;border-radius:50%;display:grid;place-items:center;background:#1fb866}
.nxs .stop{position:absolute;left:220px;right:220px;padding:14px 0;border-radius:99px;background:rgba(255,255,255,.12);text-align:center;font-size:34px;color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:8px;font-weight:800;cursor:pointer}
.nxs .spark{position:absolute;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 6px #fff)}
.nxs .pop{animation:nxpop .42s cubic-bezier(.34,1.56,.64,1) both}
@keyframes nxpop{from{scale:.6;opacity:0}to{scale:1;opacity:1}}

/* game over */
.go .big{font-size:72px;color:#fff;text-align:center;text-shadow:0 5px 0 rgba(30,30,110,.6)}