:root{
  color-scheme:dark; --bg:#050505; --panel:#0b0b0b; --panel2:#101010; --line:#222; --line2:#2d2d2d;
  --text:#f5f5f5; --muted:#8a8a8a; --soft:#151515; --accent:#f4f4f4; --danger:#ff4c4c;
  --radius:20px; --ease:cubic-bezier(.2,.8,.2,1);
}
*{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}body{overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:20;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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.shell{width:min(1320px,calc(100% - 40px));margin:0 auto;min-height:100vh}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #171717}.brand{display:flex;align-items:center;gap:11px;border:0;background:none;color:var(--text);font-size:15px;letter-spacing:.08em;font-weight:700;cursor:pointer}.brand b{font-weight:400;color:#777}.brand-mark{width:31px;height:31px;display:grid;place-items:center;background:#f4f4f4;color:#050505;border-radius:9px;font-size:14px;font-weight:900;box-shadow:0 0 30px rgba(255,255,255,.12)}.top-actions{display:flex;align-items:center;gap:8px}.connection-pill{height:36px;padding:0 13px;border:1px solid #1f1f1f;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:12px;color:#8b8b8b;background:#090909}.connection-pill .dot{width:7px;height:7px;border-radius:50%;background:#5f5f5f;box-shadow:0 0 0 4px #111}.connection-pill.online .dot{background:#7ef6a0;box-shadow:0 0 0 4px rgba(126,246,160,.09),0 0 14px rgba(126,246,160,.35)}.connection-pill.online{color:#c9c9c9}.icon-btn{height:36px;width:36px;border:1px solid #1f1f1f;border-radius:50%;background:#090909;color:#aaa;display:grid;place-items:center;cursor:pointer;transition:.2s var(--ease)}.icon-btn:hover{background:#141414;color:white;transform:translateY(-1px)}.icon-btn svg{width:16px;height:16px;fill:currentColor}.hidden{display:none!important}.view{display:none;animation:viewIn .45s var(--ease)}.view.active{display:block}@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.landing-view{position:relative;padding:clamp(65px,9vw,125px) 0 70px;min-height:calc(100vh - 84px);overflow:hidden}.hero{width:min(720px,100%);position:relative;z-index:3}.eyebrow,.section-kicker{font-size:11px;font-weight:700;letter-spacing:.16em;color:#797979;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:22px}.pulse{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.06);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}h1{font-size:clamp(54px,7.4vw,102px);letter-spacing:-.067em;line-height:.88;margin:0;font-weight:720}h1 span{color:#565656;font-weight:520}.hero>p{max-width:500px;color:#828282;font-size:16px;line-height:1.7;margin:28px 0 0}.card,.game-shell-card{border:1px solid #1b1b1b;background:linear-gradient(180deg,rgba(14,14,14,.96),rgba(8,8,8,.96));box-shadow:0 26px 70px rgba(0,0,0,.3)}.join-panel{position:relative;z-index:4;width:min(670px,100%);border-radius:18px;padding:20px;margin-top:54px}.join-panel>label{display:block;color:#646464;font-weight:750;letter-spacing:.13em;font-size:9px;margin:1px 0 8px}.join-panel>input{width:100%;background:transparent;border:0;border-bottom:1px solid #252525;color:#fff;font-size:22px;padding:8px 2px 14px;outline:0}.join-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;margin-top:16px}.primary-btn,.code-entry,.code-entry button{height:50px;border-radius:12px}.primary-btn{border:0;background:#f2f2f2;color:#050505;font-weight:750;font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;cursor:pointer;transition:.22s var(--ease)}.primary-btn:hover{background:white;transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,255,255,.07)}.primary-btn.small{height:42px;font-size:12px;margin-top:15px;width:100%}.primary-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.arrow{font-size:19px}.code-entry{display:flex;border:1px solid #242424;background:#0a0a0a;padding:4px}.code-entry input{min-width:0;flex:1;background:transparent;border:0;color:#fff;padding:0 12px;outline:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.code-entry button{height:40px;padding:0 16px;border:0;background:#191919;color:#ddd;font-weight:700;font-size:11px;cursor:pointer}.privacy-note{display:flex;align-items:center;gap:8px;font-size:10px;color:#585858;margin-top:13px}.preview-stack{position:absolute;right:-40px;top:145px;width:480px;height:480px;z-index:1;opacity:.75}.preview-card{position:absolute;width:360px;height:132px;border:1px solid #191919;background:#090909;border-radius:18px;padding:19px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 80px rgba(0,0,0,.45)}.preview-card span{font-size:9px;color:#444}.preview-card b{font-size:15px;letter-spacing:.06em}.preview-card i{width:34%;height:4px;border-radius:4px;background:#232323}.p-one{right:0;top:0;transform:rotate(8deg);animation:float1 7s ease-in-out infinite}.p-two{right:52px;top:148px;transform:rotate(-4deg);animation:float2 8s ease-in-out infinite}.p-three{right:-10px;top:295px;transform:rotate(4deg);animation:float1 9s ease-in-out infinite reverse}@keyframes float1{50%{transform:rotate(6deg) translateY(-12px)}}@keyframes float2{50%{transform:rotate(-2deg) translateY(12px)}}
.lobby-view{padding:46px 0 80px}.room-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:34px;border-bottom:1px solid #171717}.room-head h2{font-size:44px;letter-spacing:.16em;margin:5px 0 0}.room-code-line{display:flex;align-items:center;gap:10px}.text-btn{border:0;background:transparent;color:#707070;font-size:10px;font-weight:800;letter-spacing:.08em;cursor:pointer;padding:9px}.text-btn:hover{color:white}.players{display:flex;align-items:center;gap:14px}.player-chip{display:flex;align-items:center;gap:10px;min-width:140px}.player-chip .avatar{width:40px;height:40px;border-radius:12px;background:#efefef;color:#111;display:grid;place-items:center;font-size:10px;font-weight:850}.player-chip .peer{background:#111;color:#666;border:1px solid #222}.player-chip small{display:block;color:#545454;font-size:8px;letter-spacing:.13em;font-weight:700;margin-bottom:3px}.player-chip b{font-size:12px;font-weight:650}.versus{font-size:9px;color:#3e3e3e;font-weight:800}.games-title-row{display:flex;align-items:flex-end;justify-content:space-between;margin:40px 0 18px}.games-title-row h3{font-size:26px;letter-spacing:-.03em;margin:5px 0 0}.games-title-row>span{color:#575757;font-size:10px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.game-card{border:1px solid #1d1d1d;border-radius:18px;background:#090909;padding:0;overflow:hidden;color:inherit;text-align:left;cursor:pointer;transition:.32s var(--ease);position:relative}.game-card:hover{transform:translateY(-5px);border-color:#333;box-shadow:0 25px 65px rgba(0,0,0,.32)}.game-card:disabled{cursor:not-allowed;opacity:.48;transform:none}.game-art{height:190px;background:#0d0d0d;position:relative;overflow:hidden;border-bottom:1px solid #191919}.game-meta{display:grid;grid-template-columns:32px 1fr 30px;align-items:center;padding:16px}.game-no{font-size:9px;color:#4f4f4f}.game-meta b{font-size:13px;font-weight:680;display:block}.game-meta small{display:block;color:#5e5e5e;font-size:9px;margin-top:3px}.launch{width:29px;height:29px;border:1px solid #242424;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#6d6d6d;transition:.22s}.game-card:hover .launch{background:#ededed;color:#090909;transform:rotate(5deg)}.pong-art:before{content:"";position:absolute;left:50%;top:10%;height:80%;border-left:1px dashed #323232}.pong-art:after{content:"";position:absolute;left:10%;right:10%;top:50%;border-top:1px solid #1e1e1e}.pong-paddle{position:absolute;width:8px;height:58px;background:#eaeaea;border-radius:9px;top:65px}.pong-paddle.left{left:43px;animation:paddleA 2.2s ease-in-out infinite}.pong-paddle.right{right:43px;animation:paddleB 2.4s ease-in-out infinite}.pong-ball{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;left:48%;top:35%;box-shadow:0 0 20px rgba(255,255,255,.35);animation:ballDemo 3s linear infinite}@keyframes paddleA{50%{transform:translateY(35px)}}@keyframes paddleB{50%{transform:translateY(-25px)}}@keyframes ballDemo{0%{left:15%;top:68%}50%{left:82%;top:30%}100%{left:15%;top:68%}}.guess-art{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:24px}.guess-art span{display:grid;place-items:center;background:#151515;border:1px solid #222;border-radius:14px;font-size:34px;transition:.3s}.game-card:hover .guess-art span:nth-child(2n){transform:translateY(-5px)}.connect-art{background:radial-gradient(circle at 50% 50%,#171717,#0c0c0c)}.connect-art:after{content:"";position:absolute;inset:31px 56px;background:radial-gradient(circle,#050505 0 8px,transparent 9px) 0 0/32px 32px;border:1px solid #282828;border-radius:14px}.ttt-art{display:grid;grid-template-columns:repeat(2,62px);grid-template-rows:repeat(2,62px);place-content:center;gap:5px}.ttt-art i{display:grid;place-items:center;border:1px solid #222;border-radius:10px;font-style:normal;font-size:35px;color:#777}.rps-art{display:flex;align-items:center;justify-content:center;gap:17px}.rps-art span{font-size:44px;filter:grayscale(1);transition:.3s}.game-card:hover .rps-art span:nth-child(2){transform:translateY(-10px) rotate(6deg)}.draw-art svg{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px)}.draw-art path{fill:none;stroke:#eee;stroke-width:4;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:drawDemo 5s ease-in-out infinite}@keyframes drawDemo{35%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-300}}.quick-chat{margin-top:14px;border-radius:16px;padding:12px;display:grid;grid-template-columns:1fr 360px;gap:12px}.chat-log{display:flex;align-items:center;gap:13px;min-height:42px;overflow:hidden;white-space:nowrap;font-size:10px;color:#6b6b6b}.chat-msg b{color:#bcbcbc;margin-right:5px}.system-msg{color:#505050}.quick-chat form{display:flex;border:1px solid #222;border-radius:10px;overflow:hidden}.quick-chat input{min-width:0;flex:1;border:0;background:#080808;color:white;padding:0 12px;outline:0;font-size:11px}.quick-chat button{border:0;border-left:1px solid #222;background:#121212;color:#aaa;padding:0 14px;font-size:10px;font-weight:700;cursor:pointer}
.game-view{padding:22px 0 70px}.game-header{height:66px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:18px}.back-btn{justify-self:start;border:0;background:transparent;color:#777;font-weight:650;font-size:12px;cursor:pointer}.back-btn:hover{color:white}.game-title{text-align:center}.game-title small{display:block;color:#4e4e4e;font-size:8px;letter-spacing:.13em;margin-bottom:3px}.game-title b{font-size:14px}.game-actions{justify-self:end;display:flex;align-items:center;gap:7px}.turn-badge{font-size:8px;font-weight:800;letter-spacing:.1em;border:1px solid #222;border-radius:999px;padding:7px 10px;color:#717171}.game-mount{min-height:580px}.game-shell-card{border-radius:20px;overflow:hidden}.pong-wrap{padding:16px}.scorebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 14px 16px}.scorebar>div{display:flex;align-items:center;gap:12px}.scorebar>div:last-child{justify-content:flex-end;flex-direction:row-reverse}.scorebar small{font-size:9px;color:#666;font-weight:750;letter-spacing:.09em}.scorebar b{font-size:26px}.scorebar>span{font-size:8px;color:#444;letter-spacing:.12em}.pong-wrap canvas{display:block;width:100%;aspect-ratio:1000/560;background:#080808;border:1px solid #1c1c1c;border-radius:14px;touch-action:none}.control-hint{text-align:center;color:#505050;font-size:10px;margin:12px 0 2px}.control-hint kbd{border:1px solid #292929;background:#131313;border-radius:5px;padding:2px 5px;margin-left:5px;color:#888;font:inherit}.guess-layout{display:grid;grid-template-columns:250px 1fr;gap:12px}.guess-side{border-radius:18px;padding:20px;height:max-content}.secret-face{height:128px;display:grid;place-items:center;background:#111;border:1px solid #222;border-radius:15px;font-size:68px;margin:12px 0}.guess-side>b{font-size:15px}.guess-side>p{color:#686868;font-size:11px;line-height:1.6}.question-box{border-top:1px solid #202020;margin-top:20px;padding-top:18px}.question-box small{font-size:8px;color:#535353;letter-spacing:.12em;font-weight:800}.question-box select,.question-box button{width:100%;height:40px;border:1px solid #232323;background:#0c0c0c;color:#bbb;border-radius:9px;margin-top:8px;padding:0 10px;font-size:10px}.question-box button{cursor:pointer;font-weight:700}.question-box button:disabled{opacity:.35}.answer-bubble{font-size:10px;color:#777;line-height:1.45;border-left:2px solid #333;padding-left:9px;margin-top:12px}.guess-main{padding:14px}.guess-toolbar{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#606060;padding:2px 2px 13px}.guess-toolbar label{display:flex;align-items:center;gap:7px;cursor:pointer}.guess-toolbar input{display:none}.guess-toolbar i{width:29px;height:16px;background:#1e1e1e;border-radius:12px;position:relative}.guess-toolbar i:after{content:"";width:12px;height:12px;position:absolute;left:2px;top:2px;background:#777;border-radius:50%;transition:.2s}.guess-toolbar input:checked+i{background:#ddd}.guess-toolbar input:checked+i:after{left:15px;background:#111}.guess-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.guess-card{border:1px solid #222;background:#101010;border-radius:12px;padding:9px 5px;color:#ddd;cursor:pointer;transition:.22s;position:relative}.guess-card:hover{transform:translateY(-2px);border-color:#3d3d3d}.guess-card .face{height:76px;display:grid;place-items:center;font-size:44px;background:#151515;border-radius:8px}.guess-card b{display:block;font-size:9px;text-align:center;margin-top:7px}.guess-card.eliminated{opacity:.18;filter:grayscale(1);transform:scale(.95)}.guess-card.secret-pick{outline:2px solid #eee;outline-offset:-2px}.guess-card.guess-ready:after{content:"GUESS";position:absolute;inset:0;background:rgba(5,5,5,.76);display:grid;place-items:center;font-size:8px;font-weight:900;letter-spacing:.16em;border-radius:11px}.board-wrap{padding:24px;display:flex;flex-direction:column;align-items:center}.connect-board{display:grid;grid-template-columns:repeat(7,minmax(45px,78px));gap:8px;background:#111;padding:13px;border:1px solid #252525;border-radius:18px}.connect-cell{aspect-ratio:1;border-radius:50%;background:#050505;border:1px solid #242424;cursor:pointer;transition:.22s;box-shadow:inset 0 5px 12px rgba(0,0,0,.5)}.connect-cell:hover{border-color:#555}.connect-cell.p1{background:#e7e7e7;box-shadow:inset 0 -8px 14px rgba(0,0,0,.18),0 0 16px rgba(255,255,255,.06);animation:pieceDrop .28s var(--ease)}.connect-cell.p2{background:#646464;animation:pieceDrop .28s var(--ease)}@keyframes pieceDrop{from{transform:translateY(-18px);opacity:.2}to{transform:none;opacity:1}}.board-status{font-size:11px;color:#6e6e6e;margin:17px 0 2px}.compact-board{padding:50px}.ttt-board{display:grid;grid-template-columns:repeat(3,120px);gap:7px}.ttt-cell{height:120px;border:1px solid #242424;background:#0c0c0c;border-radius:16px;color:#e8e8e8;font-size:48px;cursor:pointer;transition:.2s}.ttt-cell:hover{background:#131313}.ttt-cell:disabled{cursor:default}.rps-wrap{padding:80px 30px;text-align:center}.rps-lead{color:#6a6a6a;font-size:12px}.rps-choices{display:flex;justify-content:center;gap:12px;margin:35px auto;flex-wrap:wrap}.rps-choices button{width:160px;height:160px;border:1px solid #242424;background:#0c0c0c;border-radius:20px;color:white;font-size:60px;cursor:pointer;transition:.25s var(--ease)}.rps-choices button span{display:block;font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.11em;margin-top:10px}.rps-choices button:hover{transform:translateY(-6px);border-color:#4b4b4b}.rps-choices button.selected{border-color:#e7e7e7;box-shadow:0 0 0 1px #e7e7e7 inset}.rps-choices.locked button:not(.selected){opacity:.2}.rps-result{font-size:16px;font-weight:650;min-height:40px}.draw-wrap{padding:13px}.draw-tools{height:49px;display:flex;align-items:center;gap:15px;padding:0 8px;color:#676767;font-size:10px}.draw-tools label{display:flex;align-items:center;gap:8px}.draw-tools input[type=color]{width:26px;height:26px;padding:0;border:0;background:transparent}.draw-tools input[type=range]{width:110px}.draw-tools button{margin-left:auto;border:1px solid #242424;background:#111;color:#888;border-radius:8px;height:30px;padding:0 10px;font-size:9px;cursor:pointer}.draw-wrap canvas{display:block;width:100%;aspect-ratio:12/7;border-radius:13px;border:1px solid #1e1e1e;background:#080808;touch-action:none}.toast{position:fixed;left:50%;bottom:25px;z-index:100;transform:translate(-50%,20px);background:#eee;color:#111;padding:11px 15px;border-radius:10px;font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.25s var(--ease);box-shadow:0 20px 55px rgba(0,0,0,.35)}.toast.show{opacity:1;transform:translate(-50%,0)}.confetti{position:fixed;width:7px;height:13px;background:#fff;left:50%;top:42%;z-index:99;pointer-events:none;animation:confetti .85s ease-out forwards}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(max-width:980px){.preview-stack{opacity:.28;right:-160px}.game-grid{grid-template-columns:repeat(2,1fr)}.room-head{align-items:flex-start}.players{margin-top:8px}.guess-grid{grid-template-columns:repeat(4,1fr)}.guess-layout{grid-template-columns:220px 1fr}.quick-chat{grid-template-columns:1fr}}
@media(max-width:720px){.shell{width:min(100% - 22px,1320px)}.topbar{height:67px}.landing-view{padding-top:50px}.hero>p{font-size:14px}.preview-stack{display:none}.join-grid{grid-template-columns:1fr}.room-head{flex-direction:column;gap:25px}.players{width:100%;justify-content:space-between}.player-chip{min-width:0}.game-grid{grid-template-columns:1fr}.game-art{height:150px}.game-card{display:grid;grid-template-columns:155px 1fr}.game-card .game-art{height:110px;border:0;border-right:1px solid #191919}.game-meta{grid-template-columns:24px 1fr 30px}.quick-chat{grid-template-columns:1fr}.chat-log{display:none}.guess-layout{grid-template-columns:1fr}.guess-side{display:grid;grid-template-columns:80px 1fr;gap:0 12px}.guess-side .section-kicker{grid-column:1/-1}.secret-face{height:80px;font-size:43px;margin:8px 0;grid-row:2/5}.guess-side>b{align-self:end}.guess-side>p{margin-top:4px}.guess-side .primary-btn{grid-column:2}.question-box{grid-column:1/-1}.guess-grid{grid-template-columns:repeat(3,1fr)}.guess-card .face{height:60px;font-size:36px}.connect-board{grid-template-columns:repeat(7,minmax(32px,1fr));gap:5px;padding:8px;width:100%}.compact-board{padding:30px 12px}.ttt-board{grid-template-columns:repeat(3,minmax(75px,100px))}.ttt-cell{height:95px}.rps-wrap{padding:50px 12px}.rps-choices button{width:100px;height:110px;font-size:44px}.game-header{grid-template-columns:1fr auto}.game-title{display:none}.control-hint{display:none}}
@media(max-width:430px){h1{font-size:52px}.room-head h2{font-size:34px}.players{gap:5px}.player-chip .avatar{width:34px;height:34px}.game-card{grid-template-columns:115px 1fr}.game-card .game-art{height:98px}.guess-grid{grid-template-columns:repeat(3,1fr);gap:5px}.guess-main{padding:8px}.guess-card{padding:6px 3px}.guess-card .face{height:52px;font-size:31px}.ttt-board{grid-template-columns:repeat(3,82px)}.ttt-cell{height:82px}.draw-tools{gap:8px}.draw-tools input[type=range]{width:72px}}

.reduce-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}