:root{--bg0:#0b0f17;--bg1:#0f1725;--panel:#121b2b;--panel2:#0f1724;--border:#243044;--text:#e8edf6;--muted:#b8c2d6;--btn:#1a2538;--btn-border:#2d3d5a;--btn-hover:#22314b;--accent:#7c5cff;--accent2:#2dd4bf;--danger-bg:#2a1014;--danger-border:#7c2a34;--danger-text:#ffd1d7;--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}*{box-sizing:border-box}body,html{height:100%}body{margin:0;font-family:var(--sans);color:var(--text);background:radial-gradient(1200px 900px at 10% 0,rgba(124,92,255,.2),transparent 55%),radial-gradient(900px 700px at 90% 10%,rgba(45,212,191,.14),transparent 55%),linear-gradient(180deg,var(--bg1),var(--bg0))}a{color:inherit;text-decoration:none}button,input{font-family:inherit}.mono{font-family:var(--mono)}.pyxTopbar{justify-content:space-between;gap:12px;padding:10px 14px;background:linear-gradient(180deg,rgba(18,27,43,.95),rgba(14,20,34,.95));border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pyxLeft,.pyxRight,.pyxTopbar{display:flex;align-items:center}.pyxLeft,.pyxRight{gap:10px}.pyxRoomLabel{font-size:13px;color:var(--muted)}.pyxRoomCode{font-size:13px;padding:2px 10px;border:1px solid var(--border);border-radius:999px;background:hsla(0,0%,100%,.04)}.pyxBtn{padding:7px 11px;font-size:12px;border:1px solid var(--btn-border);background:linear-gradient(180deg,rgba(26,37,56,.95),rgba(20,30,48,.95));color:var(--text);border-radius:10px;cursor:pointer;transition:transform .05s ease,filter .15s ease,background .15s ease}.pyxBtn:hover{background:linear-gradient(180deg,rgba(34,49,75,.95),rgba(24,36,58,.95))}.pyxBtn:active{transform:translateY(1px)}.pyxBtnPrimary{border-color:rgba(124,92,255,.55);background:linear-gradient(180deg,rgba(124,92,255,.32),rgba(124,92,255,.18))}.pyxBtnPrimary:hover{filter:brightness(1.04)}.pyxBtn:disabled{opacity:.55;cursor:not-allowed}.pyxError{margin:12px;padding:12px 14px;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger-text);border-radius:12px}.pyxLayout{display:grid;grid-template-columns:clamp(240px,25vw,340px) 1fr;height:calc(100dvh - 58px);min-height:0;overflow:hidden}.pyxSidebar{border-right:1px solid var(--border);background:rgba(18,27,43,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column}.pyxMain,.pyxSidebar{min-height:0;min-width:0}.pyxMain{display:grid;grid-template-rows:auto 1fr auto 260px}.pyxPanelTitle{font-weight:600;font-size:14px;padding:12px 14px 11px;border-bottom:1px solid var(--border);background:rgba(15,23,36,.68)}.pyxScoreList{padding:10px 12px 0;overflow:auto}.pyxScoreRow{padding:10px;border-bottom:1px solid rgba(36,48,68,.62)}.pyxScoreName{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}.pyxScorePts{margin-top:4px;font-size:12px;color:var(--muted)}.pyxTag{font-size:11px;padding:2px 8px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.04);border-radius:999px}.pyxTagBlue{border-color:rgba(45,212,191,.45);background:rgba(45,212,191,.12)}.pyxTagGreen{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.16)}.pyxStatusRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);background:rgba(15,23,36,.7)}.pyxStatus{font-size:13px;color:var(--text)}.pyxStatusActions{display:flex;align-items:center;gap:10px}.pyxPlayRow{min-height:0;display:grid;grid-template-columns:310px minmax(520px,1fr);grid-gap:14px;gap:14px;padding:14px;overflow:auto}.pyxSection{display:flex;flex-direction:column;gap:10px;min-width:0}.pyxSectionLabel{font-size:13px;color:var(--muted)}.pyxHint{font-size:12px;color:var(--muted)}.pyxEmpty{font-size:13px;color:var(--muted);padding:12px;border:1px dashed hsla(0,0%,100%,.15);background:hsla(0,0%,100%,.03);border-radius:12px}.pyxEmptyInset{margin:12px}.pyxCard{width:240px;min-height:320px;border-radius:16px;border:1px solid hsla(0,0%,100%,.1);box-shadow:0 12px 30px rgba(0,0,0,.48);padding:16px;display:flex;flex-direction:column;justify-content:space-between;background:hsla(0,0%,100%,.05);position:relative;overflow:hidden}.pyxCard:before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 20% 15%,rgba(124,92,255,.14),transparent 60%);pointer-events:none}.pyxCardText{white-space:pre-wrap;font-size:14px;line-height:1.35;position:relative}.pyxCardFooter{font-size:11px;opacity:.75;position:relative}.pyxCardBlack{background:linear-gradient(180deg,rgba(7,10,16,.92),rgba(7,10,16,.78));color:#fff;border-color:hsla(0,0%,100%,.1)}.pyxCardWhite{background:linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.06));color:var(--text);border-color:hsla(0,0%,100%,.14)}.pyxHandCard{width:100%;min-height:220px;border-radius:16px}.pyxPlayedGrid,.pyxWinnerRow{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.pyxWinnerLabel{font-size:13px;color:var(--text);margin-bottom:6px}.pyxChat{border-top:1px solid var(--border);background:rgba(15,23,36,.78);display:flex;flex-direction:column;min-height:0}.pyxChatTabs{display:flex;border-bottom:1px solid var(--border);background:rgba(18,27,43,.7)}.pyxChatTab{padding:10px 12px;font-size:12px;color:var(--muted);background:transparent;border:0;border-right:1px solid var(--border);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.pyxChatTabActive{color:var(--text);font-weight:600;background:hsla(0,0%,100%,.03)}.pyxChatTab:focus-visible{box-shadow:inset 0 0 0 2px rgba(148,163,184,.25)}.pyxChatTab:hover{background:hsla(0,0%,100%,.02);color:var(--text)}.pyxChatBody{min-height:0;padding:12px;overflow:auto;font-size:12px;color:var(--muted)}.pyxChatLine{margin-bottom:6px}.pyxHandRow{border-top:1px solid var(--border);background:rgba(15,23,36,.72);display:flex;flex-direction:column;min-height:0;overflow:hidden}.pyxHandRowHeader{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid hsla(0,0%,100%,.08);background:rgba(18,27,43,.55)}.pyxHandRowTitle{font-weight:600;font-size:13px}.pyxHandRowMeta{font-size:12px;color:var(--muted)}.pyxHandStrip{display:flex;gap:12px;padding:12px 14px;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-behavior:auto;flex:1 1 auto;min-height:0}.pyxHandCard{width:210px;min-height:clamp(180px,22vh,240px);flex:0 0 auto}@media (max-width:1100px){.pyxLayout{grid-template-columns:1fr}.pyxSidebar{display:none}}@media (max-width:760px){.pyxMain{grid-template-rows:auto minmax(0,1fr) clamp(190px,34vh,280px) clamp(150px,26vh,230px)}.pyxPlayRow{grid-template-columns:1fr}.pyxCard{width:100%;max-width:520px}.pyxHandCard{width:180px}}.pyxCard{transition:transform .08s ease,filter .12s ease}.pyxCard:hover{transform:translateY(-1px);filter:brightness(1.03)}.container{max-width:1020px;margin:0 auto;padding:28px 18px 40px}.landingHero{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:8px 2px 10px}.landingTitle{margin:0;font-size:44px;letter-spacing:-.02em;line-height:1.05}.landingSubtitle{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:720px}.heroActions{display:flex;gap:10px;align-items:center}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px}@media (max-width:820px){.landingHero{flex-direction:column;align-items:flex-start}.landingTitle{font-size:36px}.grid2{grid-template-columns:1fr}}.brand h1{margin:0}.pill{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;background:hsla(0,0%,100%,.04);color:var(--muted);font-size:12px}.card,.pill{border:1px solid var(--border)}.card{background:rgba(18,27,43,.62);border-radius:16px;padding:16px;box-shadow:0 14px 34px rgba(0,0,0,.35)}.card h2{margin:0 0 8px;font-size:22px;letter-spacing:-.01em}.muted{color:var(--muted);margin:0;font-size:13px}.hr{height:1px;background:hsla(0,0%,100%,.1);margin:14px 0}.col{display:flex;flex-direction:column;gap:10px;max-width:520px}.small{font-size:12px;color:var(--muted)}.input{width:100%;padding:11px 12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.05);color:var(--text);outline:none}.input::placeholder{color:rgba(184,194,214,.6)}.input:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 4px rgba(124,92,255,.12)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--btn-border);background:linear-gradient(180deg,rgba(26,37,56,.95),rgba(20,30,48,.95));color:var(--text);cursor:pointer;text-decoration:none}.btn:hover{background:linear-gradient(180deg,rgba(34,49,75,.95),rgba(24,36,58,.95))}.btn.primary{border-color:rgba(124,92,255,.55);background:linear-gradient(180deg,rgba(124,92,255,.34),rgba(124,92,255,.18))}.btn.primary:hover{filter:brightness(1.04)}.btn:disabled{opacity:.55;cursor:not-allowed}.toast{padding:12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.04);color:var(--muted);font-size:13px}.toastError{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-text)}.pyxChatBody::-webkit-scrollbar,.pyxHandStrip::-webkit-scrollbar,.pyxPlayRow::-webkit-scrollbar,.pyxScoreList::-webkit-scrollbar{height:10px;width:10px}.pyxChatBody::-webkit-scrollbar-thumb,.pyxHandStrip::-webkit-scrollbar-thumb,.pyxPlayRow::-webkit-scrollbar-thumb,.pyxScoreList::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.1);border:2px solid transparent;background-clip:padding-box;border-radius:999px}.pyxChatBody::-webkit-scrollbar-thumb:hover,.pyxHandStrip::-webkit-scrollbar-thumb:hover,.pyxPlayRow::-webkit-scrollbar-thumb:hover,.pyxScoreList::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.18);border:2px solid transparent;background-clip:padding-box}.phasePill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid hsla(0,0%,100%,.12);background:hsla(0,0%,100%,.04);margin-right:10px}.phasePill,.pyxCounts{color:var(--muted);font-size:12px}.pyxCounts{margin-left:10px}.pyxChatForm{display:flex;gap:10px;padding:10px 12px;border-top:1px solid var(--border);background:rgba(18,27,43,.5)}.pyxChatInput{flex:1 1 auto;padding:10px 12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.1);background:hsla(0,0%,100%,.05);color:var(--text);outline:none}.pyxChatInput::placeholder{color:rgba(184,194,214,.55)}.pyxChatInput:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 4px rgba(124,92,255,.12)}.pyxChatLine{display:flex;gap:8px;align-items:baseline}.pyxChatName{color:rgba(232,237,246,.92);font-weight:600;flex:0 0 auto}.pyxChatText{color:var(--muted);flex:1 1 auto}.pyxChatTime{color:rgba(184,194,214,.45);font-size:11px;flex:0 0 auto}.pyxChatMine .pyxChatName{color:rgba(45,212,191,.95)}.pyxModalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px}.pyxModal{width:min(520px,100%);background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden}.pyxModalTitle{padding:14px 16px;font-weight:800;border-bottom:1px solid var(--border)}.pyxModalBody{padding:16px}.pyxModalActions{padding:14px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}