
:root{--black:#000;--sheet:#2b2b2b;--cell:#383838;--pill:rgba(0,0,0,.45);--white:#fff;--white2:rgba(255,255,255,.8);--money:#fff;--section:#f2f2ef;--ink:#151310;--ink2:#5b5750;--gold:#c9962f;--gold2:#8a6414;--goldink:#1b1407;--red:#e5484d;--green:#30d158;--amber:#ffb020;--blue:#2e8bff;--coral:#ff4d5e;--tile:#1c1c1e;--muted:#a1a1a6;--r1:14px;--r2:20px;--r3:22px;--side:20px}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Public Sans",Arial,sans-serif;background:#111;-webkit-font-smoothing:antialiased}.num{font-family:"Anybody","Arial Narrow",Arial,sans-serif;font-stretch:75%;font-weight:800;font-variant-numeric:tabular-nums}.page{width:390px;height:844px;margin:auto;position:relative;overflow:hidden}.liveMode,.controlMode{background:#000;color:#fff}.moneyMode{background:#fff;color:var(--ink)}
.topbar{height:96px;padding:50px 20px 12px;display:flex;align-items:center;justify-content:space-between}.topbar h1{font-size:22px;font-weight:800}.back{font-size:34px;line-height:1}.goldText{color:var(--gold);font-weight:800}.heroN{font-size:52px;line-height:.98}.headline{font-size:30px;line-height:1.05;font-weight:800}.sectionTitle{font-size:20px;font-weight:800}.body{font-size:15px;line-height:1.4}.meta{font-size:13px;font-weight:600}.secondary{color:var(--muted)}.moneyMode .secondary{color:var(--ink2)}
.media{position:relative;overflow:hidden}.media>img{width:100%;height:100%;object-fit:cover}.fullmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 34%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.72))}.pill{background:var(--pill);border-radius:999px;padding:7px 10px;font-size:13px;font-weight:700}.goldBtn{background:var(--gold);color:var(--goldink);border:0;border-radius:16px;min-height:56px;padding:0 20px;font-size:17px;font-weight:800;display:flex;align-items:center;justify-content:center}.redBtn{background:var(--red);color:#fff;border-radius:16px;min-height:56px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}.quiet{font-size:15px;font-weight:750;color:var(--gold)}
.liveHead{position:absolute;z-index:5;left:12px;right:12px;top:52px;display:flex;justify-content:space-between;align-items:flex-start}.identity{display:flex;align-items:center;gap:8px;background:var(--pill);border-radius:24px;padding:4px}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.identity .name{font-size:15px;font-weight:750}.identity .likes{font-size:12.5px;color:var(--white2);font-weight:600}.follow{background:var(--gold);color:var(--goldink);padding:8px 12px;border-radius:18px;font-size:14px;font-weight:800}.liveRight{display:flex;gap:7px;align-items:center}.chips{position:absolute;z-index:5;top:106px;left:12px;display:flex;gap:6px}.chip{background:var(--pill);border-radius:15px;padding:6px 10px;font-size:13px;font-weight:700}.chat{position:absolute;z-index:5;left:12px;bottom:92px;width:72%;display:flex;flex-direction:column;gap:6px}.chat p{font-size:15px;line-height:1.3;text-shadow:0 1px 3px #000}.chat b{font-weight:800;color:#ffe2a0}.liveBottom{position:absolute;z-index:7;left:12px;right:12px;bottom:18px;display:flex;gap:9px;align-items:center}.comment{height:44px;flex:1;background:rgba(255,255,255,.14);border-radius:22px;padding:0 16px;display:flex;align-items:center;color:var(--white2);font-size:15px}.circleAction{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--goldink);font-weight:900}.darkAction{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pill)}
.sheet{position:absolute;z-index:8;left:0;right:0;bottom:0;background:var(--sheet);border-radius:20px 20px 0 0;padding:16px 14px 24px;color:#fff}.sheet50{height:420px}.tabs{display:flex;gap:18px;margin:14px 0;font-size:16px;font-weight:700;color:#c9c9c9}.tabs .on{color:#fff}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gift{height:98px;border-radius:14px;text-align:center;padding-top:8px}.gift.sel{background:var(--cell)}.gift .art{height:50px;display:grid;place-items:center;font-size:30px}.gift .n{font-size:12.5px;font-weight:700}.gift .p{font-size:13px;font-weight:800;color:var(--gold)}
.moneyPad{padding:20px}.moneyHero{margin:12px 0 26px}.moneyHero .label{font-size:15px;color:var(--ink2);font-weight:600}.moneyHero .value{font-size:54px;line-height:1;margin-top:6px}.promo{background:#3b1d0d;color:#fff;border-radius:20px;padding:20px;min-height:112px;position:relative}.promo .big{font-size:42px;color:#ffd47c}.coin{position:absolute;right:22px;top:26px;width:64px;height:64px;border-radius:50%;background:#efbb4a;box-shadow:inset 0 0 0 8px #c78b1f;display:grid;place-items:center;color:#8a6414;font-size:30px}.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.pack{background:var(--section);border-radius:20px;min-height:108px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px}.pack.pick{background:#fff7e8;box-shadow:inset 0 0 0 3px var(--gold)}.pack .n{font-size:28px}.pack .p{font-size:16px;color:var(--gold2);font-weight:800;margin-top:8px}.receipt{margin-top:18px}.receipt .row{display:flex;justify-content:space-between;gap:18px;padding:10px 0;font-size:15px}.receipt .row b{font-weight:750}.chunk{display:flex;gap:8px;margin:14px 0}.chunk span{background:var(--section);border-radius:14px;padding:14px;font-size:28px;font-weight:800}
.controlPad{padding:0 16px}.preview{height:160px;border-radius:22px;overflow:hidden;position:relative}.preview img{width:100%;height:100%;object-fit:cover}.preview .tag{position:absolute;top:12px;padding:5px 9px;border-radius:10px;font-size:13px;font-weight:800}.preview .liveTag{left:12px;background:var(--red)}.preview .camera{right:12px;background:var(--pill)}.preview .timer{position:absolute;left:14px;bottom:10px;font-size:44px}.stats{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin-top:12px}.stat .v{font-size:27px}.stat .l{font-size:13px;color:var(--muted);font-weight:650}.destGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.destTile{background:var(--tile);border-radius:18px;padding:10px 12px;min-height:104px;position:relative}.destTile .h{display:flex;gap:8px;align-items:center}.destTile .h img{width:28px;height:28px}.destTile .h b{font-size:15px}.destTile .v{font-size:25px;margin-top:4px}.state{font-size:14px;font-weight:750;margin-top:3px}.state.ok{color:var(--green)}.state.warn{color:var(--amber)}.state.off{color:var(--muted)}.switch{position:absolute;right:10px;top:12px;width:42px;height:24px;border-radius:12px;background:#1f1f22;box-shadow:inset 0 0 0 2px #C9962F}.switch:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a8f 0%,#ff4034 32%,#d4141c 70%,#7d0a10 100%);box-shadow:0 0 0 1px rgba(255,140,120,.55),0 0 8px rgba(255,45,45,.6);right:4px;top:4px}.switch.off{box-shadow:inset 0 0 0 2px #48484a}.switch.off:after{right:22px;opacity:.45;box-shadow:none}.health{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;font-weight:700}.bottomFixed{position:absolute;left:16px;right:16px;bottom:24px}
.setupIllo{height:220px;margin:14px 20px;background:var(--tile);border-radius:22px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.setupIllo img{width:100%;height:100%;object-fit:cover;opacity:.45}.setupIllo .center{position:absolute;text-align:center;width:80%}.setupIllo .center img{width:52px;height:52px;opacity:1}.setupIllo .center h2{font-size:24px;margin-top:10px}.field{background:var(--tile);border-radius:14px;padding:15px 16px;margin:10px 20px;font-size:15px}.controlMode .field{color:#fff}.steps{margin:16px 20px;display:flex;flex-direction:column;gap:15px}.step{display:flex;gap:12px;align-items:flex-start}.step .no{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--goldink);display:grid;place-items:center;font-weight:800;flex:none}.step b{font-size:15px}.step p{font-size:13px;color:var(--muted);margin-top:2px}
.chart{height:220px;margin:16px 20px;display:flex;align-items:end;gap:8px}.barv{flex:1;background:var(--gold);border-radius:10px 10px 2px 2px;min-height:20px}.eventCard{margin:12px 20px;background:var(--section);border-radius:20px;overflow:hidden}.eventCard img{width:100%;height:210px;object-fit:cover}.eventCard .copy{padding:16px}.eventCard h2{font-size:24px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:16px 20px}.day{height:34px;background:var(--section);border-radius:10px;display:grid;place-items:center;font-size:13px}.day.on{background:var(--gold);color:var(--goldink);font-weight:800}
.clashBar{position:absolute;z-index:6;left:0;right:0;top:138px;height:8px;display:flex}.clashBar .a{background:var(--coral)}.clashBar .b{background:var(--blue)}.scoreline{position:absolute;z-index:6;top:150px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:30px}.timerPill{position:absolute;z-index:6;top:150px;left:164px;background:#000;border-radius:14px;padding:5px 10px;font-size:15px}.splitVideo{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}.splitVideo img{width:100%;height:100%;object-fit:cover}.reveal{position:absolute;z-index:10;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;text-align:center}.reveal .object{font-size:86px}.reveal .huge{font-size:58px;color:var(--gold)}
.nav{position:absolute;bottom:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-around;background:#fff;color:var(--ink);font-size:12px;font-weight:650}.liveMode .nav{background:#000;color:#fff}.nav .center{width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:var(--goldink);font-size:26px}

.stateToast{position:absolute;z-index:20;left:20px;right:20px;bottom:88px;background:#ffffff;color:#151310;border-radius:14px;padding:13px 15px;font-size:15px;font-weight:750;box-shadow:0 8px 28px rgba(0,0,0,.28)}.moneyMode .stateToast{background:#151310;color:#fff}.stateToast.gold{background:var(--gold);color:var(--goldink)}

/* deck preview ruling, CASA 29 Sep 2026: full-width 16:9 band like Kick and Twitch, tiles scroll beneath, End Live pinned */
.controlMode .preview{height:auto;aspect-ratio:16/9;border-radius:0;margin:0 -16px}.controlMode .preview .timer{font-size:52px;left:16px;bottom:12px}.controlMode .controlPad{padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))}.controlMode .bottomFixed{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px))}.page.controlMode{height:auto;min-height:844px;overflow:visible}
