:root{--bg:#07090d;--panel:#10141b;--panel2:#151b24;--line:#252d3a;--text:#f5f7fb;--muted:#8f9bad;--accent:#77a7ff;--green:#75f0b0;--danger:#ff6d88}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");z-index:20}.topbar,.room-topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 36px;position:relative;z-index:4;background:rgba(7,9,13,.82);backdrop-filter:blur(14px)}.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.14em;font-size:14px;display:flex;align-items:center;gap:9px}.brand small{color:var(--muted);font-weight:600;letter-spacing:.08em}.brand-dot{width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 18px var(--accent)}.status-pill{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:8px 11px;border-radius:999px}.status-pill span,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 10px var(--green)}
.lobby-shell{max-width:1180px;margin:auto;padding:74px 30px 80px}.hero{max-width:900px;margin-bottom:55px}.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--accent);font-weight:800}.hero h1{font-size:clamp(44px,6vw,82px);line-height:.98;letter-spacing:-.055em;margin:18px 0 24px}.hero h1 em{font-style:normal;color:#657083}.hero-copy{color:var(--muted);font-size:18px;line-height:1.65;max-width:680px}.lobby-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:20px}.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(21,27,36,.88),rgba(11,14,20,.95));border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.panel-title,.side-title{font-size:13px;font-weight:800;letter-spacing:.04em;margin-bottom:24px}.panel-title span,.side-title span{color:var(--accent);font-size:10px;letter-spacing:.12em;margin-right:10px}.panel label,.modal label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:12px;margin:16px 0}.panel input,.modal input,.video-input input,.chat-input input,.join-code input{background:#090c11;border:1px solid var(--line);color:#fff;border-radius:10px;padding:14px;outline:none}.panel input:focus,.modal input:focus,.video-input input:focus,.chat-input input:focus{border-color:#496da7}.switch-row{display:flex;align-items:center;gap:12px;margin:16px 0}.switch-row strong{display:block;font-size:13px}.switch-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.switch input{display:none}.switch span{display:block;width:42px;height:24px;border-radius:999px;background:#2a313c;position:relative;cursor:pointer}.switch span:after{content:"";position:absolute;width:18px;height:18px;background:#fff;left:3px;top:3px;border-radius:50%;transition:.2s}.switch input:checked+span{background:#416ba9}.switch input:checked+span:after{left:21px}.primary{width:100%;border:0;border-radius:11px;background:#edf3ff;color:#0d1320;padding:14px 16px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between}.primary:hover{filter:brightness(.94)}.room-list{display:flex;flex-direction:column;gap:9px;min-height:230px;max-height:360px;overflow:auto}.room-card{display:flex;justify-content:space-between;align-items:center;text-align:left;background:#0b0e13;color:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer}.room-card:hover{border-color:#40506a;transform:translateY(-1px)}.room-card strong,.room-card small{display:block}.room-card strong{font-size:13px}.room-card small{font-size:11px;color:var(--muted);margin:4px 0 0 13px}.room-meta{text-align:right}.room-meta b{font-size:17px}.room-meta small{margin:0;color:var(--muted)}.room-meta code{font-size:9px;color:#70829c}.empty{color:var(--muted);font-size:13px;display:grid;place-items:center;min-height:200px;text-align:center;line-height:1.6}.join-code{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.join-code input{flex:1;text-transform:uppercase}.join-code button,.video-input button,.chat-input button,.host-buttons button,.ghost{border:1px solid var(--line);background:#171d27;color:#fff;border-radius:9px;padding:0 15px;cursor:pointer}
.room-heading{position:absolute;left:50%;transform:translateX(-50%);text-align:center}.room-heading b{display:block;font-size:13px}.room-heading code{font-size:9px;color:var(--muted)}.room-actions{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.ghost{padding:8px 12px}.cinema-layout{height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(650px,1fr) 330px}.cinema-stage{overflow:auto;position:relative;padding:36px 4vw 24px;background:radial-gradient(circle at 50% 14%,#151a27 0,#0a0d13 34%,#07090d 72%)}.screen-wrap{max-width:920px;margin:auto}.screen{position:relative;aspect-ratio:16/9;background:#020305;border:8px solid #171d28;border-radius:8px;box-shadow:0 26px 90px rgba(0,0,0,.75);overflow:hidden}.screen-glow{height:12px;width:72%;margin:0 auto -5px;background:#b9d4ff;filter:blur(25px);opacity:.12}.screen #player{width:100%;height:100%}.screen-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#111722,#080b10);z-index:2}.screen-idle b{font-size:13px;letter-spacing:.15em;margin:14px}.screen-idle span{font-size:11px;color:var(--muted)}.play-mark{width:54px;height:54px;border:1px solid #3c4b63;border-radius:50%;display:grid;place-items:center;color:var(--accent);padding-left:3px}.screen-caption{display:flex;justify-content:space-between;color:#677388;text-transform:uppercase;letter-spacing:.13em;font-size:9px;padding:10px 8px}.screen-caption span:first-child{color:#6da589}.theater{max-width:930px;margin:38px auto 0;display:grid;grid-template-columns:repeat(7,1fr);gap:18px 12px;perspective:800px}.seat{position:relative;height:88px;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;flex-direction:column}.seat.empty-seat:hover .chair{transform:translateY(-4px);filter:brightness(1.35)}.chair{width:52px;height:34px;background:linear-gradient(180deg,#242d3b,#171e29);border-radius:9px 9px 5px 5px;border:1px solid #354154;position:relative;transition:.18s}.chair:after{content:"";position:absolute;left:5px;right:5px;bottom:-7px;height:10px;background:#121821;border:1px solid #283343;border-radius:3px}.chair i:before,.chair i:after{content:"";position:absolute;width:6px;height:23px;background:#1b2330;bottom:-5px}.chair i:before{left:-6px;border-radius:5px 0 0 5px}.chair i:after{right:-6px;border-radius:0 5px 5px 0}.seat-name{height:18px;font-size:9px;color:#7e8999;margin-top:6px;white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis}.seat-name b{font-size:7px;color:var(--accent);margin-left:3px}.seat.mine .seat-name{color:#d8e7ff}.avatar{--avatar:#73a7ff;width:52px;height:58px;position:relative;margin-bottom:-4px}.head{position:absolute;width:25px;height:25px;left:14px;top:0;background:#d7b39c;border-radius:48% 48% 45% 45%;z-index:3;box-shadow:inset 0 -4px rgba(0,0,0,.08)}.head:before{content:"";position:absolute;inset:-3px 0 auto 0;height:9px;background:#1b1b20;border-radius:50% 50% 25% 25%}.head span:before,.head span:after{content:"";position:absolute;width:2px;height:2px;background:#1d2024;border-radius:50%;top:11px}.head span:before{left:7px}.head span:after{right:7px}.body{position:absolute;left:9px;top:22px;width:35px;height:27px;border-radius:11px 11px 6px 6px;background:linear-gradient(180deg,var(--avatar),color-mix(in srgb,var(--avatar),#000 25%));z-index:2}.body:before,.body:after{content:"";position:absolute;width:8px;height:26px;background:var(--avatar);top:2px;border-radius:6px}.body:before{left:-5px;transform:rotate(17deg)}.body:after{right:-5px;transform:rotate(-17deg)}.legs{position:absolute;left:12px;top:44px;width:29px;height:13px;border-left:10px solid #151b25;border-right:10px solid #151b25}.reaction-bubble{position:absolute;z-index:10;left:50%;top:-8px;font-size:25px;animation:floatReaction 1.9s ease-out forwards;pointer-events:none}.avatar.reacting{animation:bodyReact .45s ease-in-out 2}@keyframes floatReaction{0%{transform:translate(-50%,8px) scale(.5);opacity:0}16%{opacity:1;transform:translate(-50%,-5px) scale(1.16)}100%{transform:translate(-50%,-65px) scale(.86) rotate(8deg);opacity:0}}@keyframes bodyReact{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-8px) rotate(-4deg)}70%{transform:translateY(-3px) rotate(4deg)}}.reaction-bar{position:sticky;bottom:8px;z-index:12;margin:28px auto 0;background:rgba(13,17,24,.9);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:15px;padding:7px;width:max-content;display:flex;gap:3px;box-shadow:0 15px 45px rgba(0,0,0,.45)}.reaction-bar button{width:57px;height:52px;border:0;background:transparent;border-radius:10px;font-size:21px;cursor:pointer;color:#fff}.reaction-bar button:hover{background:#242b37;transform:translateY(-3px)}.reaction-bar small{display:block;font-size:7px;color:#7d899a;margin-top:2px}
.side-panel{border-left:1px solid var(--line);background:#0c1016;padding:20px;display:flex;flex-direction:column;min-height:0}.host-box{background:#111824;border:1px solid #2b3d58;border-radius:13px;padding:13px;margin-bottom:20px}.side-title{margin:4px 0 13px}.video-input,.chat-input{display:flex;gap:6px}.video-input input,.chat-input input{min-width:0;flex:1;padding:10px;font-size:11px}.video-input button{font-size:10px}.host-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.host-buttons button{font-size:9px;padding:9px 4px}.chat{flex:1;overflow:auto;min-height:160px;border-top:1px solid var(--line);padding-top:10px}.chat-msg{padding:7px 3px}.chat-msg b{display:block;font-size:10px;color:#8c9ab0}.chat-msg span{font-size:12px;line-height:1.45;color:#e3e8ef;word-break:break-word}.chat-input{margin-top:10px}.audience-title{margin-top:18px}.audience{max-height:150px;overflow:auto;border-top:1px solid var(--line);padding-top:7px}.person-row{display:flex;align-items:center;gap:7px;padding:6px 2px;font-size:10px}.person-dot{width:7px;height:7px;border-radius:50%}.person-row b{font-size:10px;font-weight:600}.person-row em{font-style:normal;color:var(--accent);font-size:7px;margin-left:auto}.person-row small{color:var(--muted);margin-left:auto}.modal-backdrop{position:fixed;inset:0;background:rgba(3,5,8,.86);backdrop-filter:blur(15px);z-index:50;display:grid;place-items:center;padding:20px}.modal{width:min(420px,100%);background:#10151e;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 50px 120px rgba(0,0,0,.65)}.modal-kicker{font-size:9px;color:var(--accent);letter-spacing:.2em}.modal h2{font-size:29px;letter-spacing:-.035em;margin:8px 0 22px}.modal small{display:block;text-align:center;color:var(--muted);font-size:9px;margin-top:12px}.modal input[type=color]{height:44px;padding:5px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#eaf2ff;color:#0d1420;padding:10px 15px;border-radius:9px;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;z-index:80}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}
@media(max-width:1000px){.cinema-layout{grid-template-columns:1fr;height:auto}.side-panel{border-left:0;border-top:1px solid var(--line);min-height:430px}.cinema-stage{min-height:calc(100vh - 72px)}.lobby-grid{grid-template-columns:1fr}.room-heading{display:none}}@media(max-width:720px){.topbar,.room-topbar{padding:0 16px;height:60px}.lobby-shell{padding:45px 17px}.hero h1{font-size:43px}.cinema-layout{display:block}.cinema-stage{padding:22px 8px}.screen{border-width:4px}.theater{gap:11px 1px;margin-top:24px}.seat{height:76px;transform:scale(.87)}.reaction-bar{max-width:calc(100vw - 16px);overflow-x:auto;justify-content:flex-start}.reaction-bar button{min-width:49px;width:49px}.room-actions span{display:none}.side-panel{padding:16px}.screen-caption{padding:8px 2px}}

html,body{overflow-x:hidden}.cinema-layout,.cinema-stage,.side-panel,.screen-wrap,.theater{min-width:0}.theater{width:100%;grid-template-columns:repeat(7,minmax(0,1fr))}.seat{min-width:0}
@media(max-width:720px){
  .room-heading{display:block;max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .room-heading b{display:none}.room-heading code{font-size:10px}
  .room-actions{gap:6px}.room-actions #copyInvite{font-size:0;padding:8px 11px}
  .room-actions #copyInvite::after{content:"Copiar";font-size:11px}
  .cinema-stage{overflow-x:hidden;padding-left:8px;padding-right:8px}
  .screen-wrap{width:100%}.theater{gap:8px 0}
  .seat{transform:none;height:76px}.seat .chair,.seat .avatar{transform:scale(.78);transform-origin:center bottom}
  .seat-name{font-size:8px;max-width:100%;margin-top:2px}.reaction-bar{width:100%;max-width:100%;overflow-x:auto}
  .side-panel{width:100%;overflow:hidden}
}