:root {
  --ink: #f7f3ff; --muted: #aaa4bd; --panel: rgba(36, 30, 61, .82);
  --line: rgba(255,255,255,.1); --purple: #9b6cff; --pink: #ff4fa3;
  --cyan: #51e7dc; --yellow: #ffd166; --bg: #110e20;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background:
  radial-gradient(circle at 15% 5%, #412473 0, transparent 35%),
  radial-gradient(circle at 90% 80%, #253b65 0, transparent 38%), var(--bg);
  font-family: Manrope, sans-serif; overflow-x: hidden; }
.noise { position: fixed; inset: 0; pointer-events:none; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
.topbar { height:76px; max-width:1180px; margin:auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { color:white; text-decoration:none; font:20px 'Russo One'; letter-spacing:1px; display:flex; gap:10px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; color:#17132b; background:linear-gradient(135deg,var(--cyan),var(--purple)); border-radius:11px; transform:rotate(-6deg); }
.room-badge { color:var(--muted); font-size:12px; letter-spacing:1px; background:#211a3a; border:1px solid var(--line); border-radius:20px; padding:9px 14px; }
.room-badge strong { color:var(--yellow); margin-left:6px; font-size:15px; }
.app { width:min(1440px, calc(100% - 44px)); margin:22px auto 60px; position:relative; z-index:1; }
.hero { min-height:calc(100vh - 160px); display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:70px; }
.eyebrow { display:inline-flex; gap:8px; align-items:center; color:var(--cyan); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:2px; }
.eyebrow::before { content:''; width:28px; height:2px; background:var(--cyan); }
h1,h2,h3,p { margin-top:0; }
h1 { font:clamp(46px,7vw,88px)/.96 'Russo One'; letter-spacing:-2px; margin:20px 0 26px; }
.gradient { background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan)); -webkit-background-clip:text; color:transparent; }
.lead { color:var(--muted); font-size:18px; line-height:1.7; max-width:620px; }
.feature-row { display:flex; gap:25px; color:#d8d2e7; font-size:13px; margin-top:30px; flex-wrap:wrap; }
.feature-row span::before { content:'✦'; color:var(--pink); margin-right:8px; }
.card { background:var(--panel); border:1px solid var(--line); box-shadow:0 25px 80px rgba(0,0,0,.35); border-radius:28px; padding:30px; backdrop-filter:blur(16px); }
.join-card h2 { font-size:25px; margin-bottom:8px; }.subtle { color:var(--muted); font-size:14px; }
label { display:block; color:#cec8db; font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin:22px 0 8px; }
input,select { width:100%; border:1px solid var(--line); color:white; background:#171328; border-radius:14px; padding:14px 16px; font:600 16px Manrope; outline:none; }
input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(155,108,255,.15); }
.code-input { text-transform:uppercase; letter-spacing:6px; text-align:center; font-weight:800; }
.btn { border:0; border-radius:14px; padding:14px 20px; color:white; font:800 14px Manrope; cursor:pointer; transition:.2s transform,.2s filter; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.08); }.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-primary { background:linear-gradient(110deg,var(--pink),var(--purple)); box-shadow:0 10px 30px rgba(155,108,255,.25); }
.btn-secondary { background:#302744; border:1px solid var(--line); }.btn-danger { background:#cf3f70; }
.btn-block { width:100%; margin-top:14px; }.divider { display:flex; align-items:center; gap:12px; color:#756f85; font-size:11px; margin:15px 0 0; }
.divider::before,.divider::after { content:''; height:1px; flex:1; background:var(--line); }
.room-layout { display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:34px; align-items:start; }
.stage { min-height:680px; display:flex; flex-direction:column; }.side-card { position:sticky; top:20px; margin-right:4px; }
.stage-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.round-pill { color:var(--cyan); background:rgba(81,231,220,.1); padding:8px 12px; border-radius:20px; font-size:12px; font-weight:800; }
.players { display:grid; gap:10px; margin:18px 0; }.player { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.04); padding:10px; border-radius:13px; border:1px solid transparent; }
.player.active { border-color:var(--pink); background:rgba(255,79,163,.08); }.avatar { width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#4d3b72,#7860a7);font-weight:800; }
.player-name { flex:1; font-weight:700; font-size:14px; }.score { color:var(--yellow); font-weight:800; }.host { color:var(--cyan); font-size:10px; }
.empty-seat { border:1px dashed var(--line); padding:13px; text-align:center; color:#756f85; border-radius:13px; font-size:13px; }
.lobby-center { flex:1; display:grid; place-items:center; text-align:center; }.big-code { font:clamp(55px,9vw,105px) 'Russo One'; letter-spacing:12px; color:var(--yellow); margin:12px 0; text-shadow:0 8px 30px rgba(255,209,102,.22); }
.copy { color:var(--cyan); cursor:pointer; font-size:13px; font-weight:700; }.host-controls { display:flex; gap:12px; justify-content:center; align-items:end; margin-top:28px; }.host-controls label { margin:0 0 6px; }.host-controls select { width:100px; }
.lobby-grid { flex:1; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:38px; }.room-share { text-align:center; }.lobby-grid .big-code { font-size:clamp(48px,7vw,78px); }.link-button { border:0; background:none; color:var(--cyan); cursor:pointer; font:700 13px Manrope; }.scene-picker h2 { margin-bottom:14px; }
.pack-card { display:flex; align-items:center; gap:14px; text-align:left; border:1px solid var(--line); background:rgba(255,255,255,.04); padding:15px; border-radius:16px; }.pack-icon { flex:0 0 64px; width:64px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:12px; color:#171328; background:linear-gradient(135deg,var(--pink),var(--yellow)); box-shadow:0 8px 22px rgba(0,0,0,.22); }.pack-icon img { display:block; width:100%; height:100%; object-fit:cover; }.pack-icon > span { color:#171328; font-size:15px; }.pack-copy { min-width:0; }.pack-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pack-card p { margin:3px 0; color:var(--muted); font-size:13px; }.pack-card span { color:var(--cyan); font-size:11px; font-weight:700; }
.upload-box { padding:18px; text-align:center; border:1px dashed rgba(155,108,255,.6); background:rgba(155,108,255,.08); border-radius:15px; cursor:pointer; text-transform:none; letter-spacing:0; transition:.2s; }.upload-box:hover { background:rgba(155,108,255,.15); }.upload-box span,.upload-box small { display:block; }.upload-box span { color:var(--ink); font-size:14px; }.upload-box small { margin-top:4px; color:var(--muted); font-weight:400; }
.prompt { display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:center; margin:auto 0; }.prompt-image { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:22px; background:#171328; box-shadow:0 18px 45px rgba(0,0,0,.3); }
.character { color:var(--pink); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:2px; }.caption { font-size:clamp(23px,3vw,38px); line-height:1.2; margin:8px 0 18px; }
.audio-box { background:#171328; border:1px solid var(--line); padding:14px; border-radius:16px; }.audio-box audio { width:100%; display:block; }.hint { color:var(--muted); font-size:13px; margin-top:9px; }
.recorder { margin-top:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.recording { color:var(--pink); animation:pulse 1s infinite; font-weight:800; }.timer { font-variant-numeric:tabular-nums; color:var(--yellow); }
@keyframes pulse { 50% { opacity:.45 } }.waiting { text-align:center; padding:25px; color:var(--muted); }.waiting-icon { font-size:42px; display:block; margin-bottom:10px; animation:float 2s ease-in-out infinite; } @keyframes float{50%{transform:translateY(-7px)}}
.vote-title { text-align:center; }.stars { display:flex; gap:10px; justify-content:center; margin:24px 0; }.star { width:58px;height:58px;border:1px solid var(--line);background:#241d3c;color:var(--yellow);border-radius:16px;font-size:25px;cursor:pointer; }.star:hover,.star.selected { background:var(--yellow); color:#241d3c; transform:translateY(-3px); }
.result { text-align:center; margin:auto; }.result-score { font:80px 'Russo One'; color:var(--yellow); }.result-points { color:var(--cyan); font-weight:800; font-size:19px; }.podium { margin-top:25px; display:grid; gap:9px; }.podium-row { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05); padding:13px 17px; border-radius:14px; }.podium-row:first-child { border:1px solid rgba(255,209,102,.5); }.rank { color:var(--yellow); font-weight:800; width:25px; }
.ready-screen { width:min(620px,100%); margin:auto; text-align:center; }.ready-check { width:82px; height:82px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; color:#151126; background:linear-gradient(135deg,var(--cyan),#aaffd9); font:42px 'Russo One'; box-shadow:0 16px 45px rgba(81,231,220,.22); }.ready-screen h2 { margin:15px 0 10px; font:32px 'Russo One'; }.ready-list { display:grid; gap:8px; margin-top:28px; text-align:left; }.ready-list div { display:flex; justify-content:space-between; padding:12px 15px; border-radius:12px; background:rgba(255,255,255,.05); }.ready-list strong { color:var(--cyan); font-size:12px; }.player-status { font-size:11px; }.player-status:not(:empty) { white-space:nowrap; }
.dub-layout { flex:1; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(235px,.5fr); align-items:center; gap:28px; }.video-column { min-width:0; }.video-wrap,.review-player { position:relative; }.scene-video { display:block; width:100%; max-height:560px; aspect-ratio:16/9; object-fit:contain; background:#080610; border-radius:20px; box-shadow:0 20px 55px rgba(0,0,0,.38); }.video-time,.mix-badge { position:absolute; bottom:12px; right:12px; padding:7px 10px; border-radius:10px; background:rgba(12,9,22,.8); color:var(--cyan); font-size:11px; font-weight:800; backdrop-filter:blur(8px); }.video-subtitle { position:absolute; left:50%; bottom:38px; transform:translateX(-50%); width:min(82%,850px); padding:8px 14px; color:#fff; background:rgba(5,4,10,.72); border-radius:9px; font-size:clamp(15px,1.6vw,23px); line-height:1.28; font-weight:800; text-align:center; text-shadow:0 2px 3px #000; backdrop-filter:blur(4px); pointer-events:none; }.dub-hint { margin:0 0 18px; line-height:1.5; }.wave-player { display:grid; gap:7px; margin-top:12px; padding:11px 14px; border:1px solid var(--line); border-radius:15px; background:rgba(13,10,25,.78); }.wave-track { display:grid; grid-template-columns:38px minmax(0,1fr) 80px; gap:13px; align-items:center; min-width:0; }.wave-play { width:38px; height:38px; border:0; border-radius:12px; color:#161126; background:linear-gradient(135deg,var(--cyan),#a9fff8); cursor:pointer; font:800 15px Manrope; box-shadow:0 7px 18px rgba(81,231,220,.16); }.wave-track.recorded .wave-play { color:#fff; background:linear-gradient(135deg,var(--pink),#b05df0); box-shadow:0 7px 18px rgba(255,79,163,.18); }.wave-play:disabled { opacity:.32; cursor:default; }.wave-lane { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:8px; min-width:0; }.wave-label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.8px; }.wave-label i { width:6px; height:6px; border-radius:50%; background:var(--cyan); }.recorded .wave-label i { background:var(--pink); }.wave-lane canvas { display:block; width:100%; height:34px; cursor:pointer; }.wave-time { color:#d8d2e7; min-width:72px; font-size:11px; font-variant-numeric:tabular-nums; text-align:right; }.wave-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08); }.wave-actions .timer { margin-right:auto; }.wave-actions #submit { width:auto; margin:0; }.wave-player audio { display:none; }.preview { margin-top:12px; }.review-head { text-align:center; }.review-head h2 { font:32px 'Russo One'; margin-bottom:6px; }.review-player { width:min(1040px,100%); margin:10px auto 12px; }.review-controls { width:min(1040px,100%); margin:0 auto 16px; display:grid; grid-template-columns:42px minmax(0,1fr) 90px auto; gap:12px; align-items:center; padding:10px 12px; background:rgba(13,10,25,.72); border:1px solid var(--line); border-radius:15px; }.review-controls input[type=range] { padding:0; height:5px; accent-color:var(--cyan); box-shadow:none; }.director-label { color:var(--cyan); font-size:9px; font-weight:800; letter-spacing:1px; white-space:nowrap; }.review-controls.viewer { opacity:.88; }.progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }.progress-label strong { color:var(--cyan); }.progress { height:7px; margin-top:7px; background:#171328; overflow:hidden; border-radius:5px; }.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--pink),var(--cyan)); border-radius:5px; transition:.3s; }
.dub-layout-full { grid-template-columns:minmax(0,1fr); }
.all-recorded { display:flex; align-items:center; justify-content:space-between; gap:14px; }.all-recorded .btn { flex:0 0 auto; padding:10px 22px; }
.download-result.loading,.podium-download.loading { pointer-events:none; opacity:.72; }.download-result.loading::before,.podium-download.loading::before { content:''; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border:2px solid rgba(255,255,255,.28); border-top-color:var(--cyan); border-radius:50%; animation:download-spin .7s linear infinite; }@keyframes download-spin{to{transform:rotate(360deg)}}
.fragment-strip { display:flex; gap:9px; width:100%; overflow-x:auto; margin:-2px 0 14px; padding:3px 2px 10px; scrollbar-width:thin; scrollbar-color:var(--cyan) rgba(255,255,255,.06); }.fragment-chip { flex:0 0 112px; width:112px; display:grid; gap:6px; padding:5px; color:var(--muted); background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:left; overflow:hidden; }.fragment-thumb { position:relative; display:grid; place-items:center; width:100%; height:58px; overflow:hidden; color:#ddd5eb; background:#302747; border-radius:8px; }.fragment-thumb img { display:block; width:100%; height:100%; object-fit:cover; }.fragment-thumb b { position:absolute; left:5px; bottom:5px; display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; color:#fff; background:rgba(12,9,22,.82); border-radius:6px; font-size:9px; backdrop-filter:blur(5px); }.fragment-chip small { padding:0 4px 3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.fragment-chip.done { border-color:rgba(81,231,220,.42); }.fragment-chip.done .fragment-thumb::after { content:'✓'; position:absolute; top:5px; right:5px; display:grid; place-items:center; width:21px; height:21px; color:#151126; background:var(--cyan); border-radius:50%; font-size:11px; font-weight:900; }.fragment-chip.active { color:#fff; border-color:var(--pink); background:rgba(255,79,163,.12); box-shadow:0 0 0 1px rgba(255,79,163,.18); }.fragment-chip.active .fragment-thumb b { background:var(--pink); }.all-recorded { margin:-4px 0 13px; padding:9px 12px; color:var(--cyan); background:rgba(81,231,220,.08); border:1px solid rgba(81,231,220,.18); border-radius:11px; font-size:12px; font-weight:700; }.review-actions { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }.download-result { display:inline-flex; width:auto; margin-top:18px; text-decoration:none; }.review-actions .download-result,.review-actions .btn { margin-top:0; }.podium-download { margin-left:auto; color:var(--cyan); font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.intro-head { text-align:center; margin:2px auto 18px; }.intro-head h2 { margin:0 0 7px; font:clamp(24px,3vw,34px) 'Russo One'; }.intro-player { width:min(1120px,100%); }.intro-skip { display:block; margin:0 auto; min-width:min(330px,100%); }.intro-player + .review-controls { width:min(1120px,100%); }
.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,120px); background:#f6f1ff; color:#211a32; padding:12px 18px; border-radius:12px; font-weight:700; z-index:5; transition:.25s; }.toast.show { transform:translate(-50%,0); }.hidden { display:none!important; }
@media(max-width:800px){.app{width:min(100% - 20px,1440px)}.hero{grid-template-columns:1fr;gap:28px;padding:30px 0}.hero-copy{text-align:center}.lead{margin-inline:auto}.feature-row{justify-content:center}.room-layout{grid-template-columns:1fr;gap:14px}.side-card{position:static;order:-1}.stage{min-height:auto}.prompt,.lobby-grid,.dub-layout{grid-template-columns:1fr}.prompt-image{max-height:260px}.big-code{letter-spacing:7px}.topbar{height:65px}.room-badge{font-size:0}.room-badge strong{font-size:14px}.host-controls{flex-wrap:wrap}.lobby-grid{gap:24px}.dub-copy .caption{font-size:22px}.stars{gap:6px}.star{width:48px;height:48px}.wave-track{grid-template-columns:38px minmax(0,1fr)}.wave-time{grid-column:2;text-align:left;margin-top:-5px}.wave-lane{grid-template-columns:58px minmax(0,1fr)}.wave-actions #submit{width:100%}.review-controls{grid-template-columns:38px minmax(0,1fr) 72px}.director-label{grid-column:2/4}}