:root{--bg:#080b12;--panel:#111722;--panel-2:#151d2b;--line:rgba(255,255,255,.085);--muted:#8993a5;--text:#f4f7fb;--cyan:#33e3c2;--cyan-2:#0fb899;--violet:#8a6cff;--amber:#ffbb55;--danger:#ff647c;--radius:22px;--shadow:0 24px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;min-height:100vh}button,input{font:inherit}.ambient{position:fixed;pointer-events:none;filter:blur(110px);opacity:.12;border-radius:50%;z-index:0}.ambient-one{width:440px;height:440px;background:var(--cyan);right:8%;top:-180px}.ambient-two{width:400px;height:400px;background:var(--violet);left:18%;bottom:-220px}.app-shell{display:grid;grid-template-columns:245px 1fr;min-height:100vh;position:relative;z-index:1}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;border-right:1px solid var(--line);background:rgba(9,12,19,.88);backdrop-filter:blur(18px);padding:30px 20px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;padding:0 8px 38px}.brand-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#4af4d1,#16a78d);color:#04120f;box-shadow:0 0 30px rgba(51,227,194,.2);font-size:21px}.brand strong{font:700 15px/1.2 Manrope}.brand small{display:block;color:var(--cyan);font:700 8px/1.5 Manrope;letter-spacing:3px}.main-nav{display:grid;gap:7px}.main-nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;color:var(--muted);text-decoration:none;border-radius:12px;font-weight:600;font-size:14px;transition:.2s}.main-nav a span{font-size:19px;width:20px;text-align:center}.main-nav a b{margin-left:auto;background:rgba(51,227,194,.12);color:var(--cyan);font-size:10px;padding:3px 7px;border-radius:20px}.main-nav a:hover,.main-nav a.active{background:linear-gradient(90deg,rgba(51,227,194,.13),rgba(51,227,194,.03));color:var(--text)}.main-nav a.active{box-shadow:inset 2px 0 var(--cyan)}.sidebar-footer{margin-top:auto}.profile-chip{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);border-radius:16px;padding:11px;color:var(--text);text-align:left;cursor:pointer}.profile-chip>span:last-child{margin-left:auto;color:var(--muted)}.profile-chip strong,.profile-chip small{display:block;font-size:12px}.profile-chip small{color:var(--muted);font-size:10px;margin-top:3px}.profile-chip i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;margin-right:4px}.avatar{width:35px;height:35px;border-radius:11px;background:linear-gradient(145deg,#24d8b7,#087d69);display:grid;place-items:center;font-weight:800;font-size:11px;flex:0 0 auto}.avatar.purple{background:linear-gradient(145deg,#9a82ff,#5f45c9)}.avatar.amber{background:linear-gradient(145deg,#ffca76,#bc6c17)}.main-content{grid-column:2;min-width:0}.topbar{height:84px;display:flex;justify-content:flex-end;align-items:center;padding:0 clamp(24px,4vw,58px);border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(8,11,18,.82);backdrop-filter:blur(18px);z-index:8}.topbar-actions{display:flex;gap:10px}.icon-button,.outline-button,.primary-button,.glass-button,.text-button,.filter{border:0;color:var(--text);cursor:pointer}.icon-button{position:relative;width:42px;height:42px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}.notification-dot{position:absolute;right:9px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.outline-button,.glass-button{padding:0 18px;border-radius:12px;background:transparent;border:1px solid var(--line);font-weight:700;font-size:13px}.primary-button{height:42px;padding:0 19px;border-radius:12px;background:linear-gradient(135deg,var(--cyan),#19b99c);color:#04221c;font-weight:800;box-shadow:0 10px 28px rgba(51,227,194,.12)}.primary-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary-button.small{height:34px;padding:0 14px;font-size:11px}.menu-button{display:none}.page{padding:42px clamp(24px,4vw,58px) 70px;max-width:1500px;margin:auto}.hidden{display:none!important}.welcome-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.eyebrow{color:var(--cyan);letter-spacing:2.7px;font-size:9px;font-weight:800;margin:0 0 10px}.welcome-row h1,.page-title h1{font:800 clamp(28px,3.3vw,44px)/1.08 Manrope;margin:0}.welcome-row h1 span{color:var(--cyan);font-size:.8em}.welcome-row p:last-child,.page-title>p:last-child{color:var(--muted);font-size:14px}.season-card{width:170px;background:var(--panel);border:1px solid var(--line);padding:14px 16px;border-radius:15px}.season-card>span{color:var(--violet);font-size:8px;font-weight:800;letter-spacing:2px}.season-card strong{font:800 20px Manrope;display:block;margin-top:4px}.season-card small{font-size:7px;color:var(--muted);letter-spacing:1px}.season-card div{height:3px;background:#242d3d;border-radius:4px;margin-top:9px}.season-card i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:4px}.spotlight{min-height:305px;border:1px solid rgba(51,227,194,.18);border-radius:28px;background:radial-gradient(circle at 80% 50%,rgba(51,227,194,.12),transparent 38%),linear-gradient(120deg,#101722,#0b111a);display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;box-shadow:var(--shadow);position:relative}.spotlight:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}.spotlight-copy{padding:38px 44px;z-index:1}.live-pill{font-size:8px;letter-spacing:1.5px;font-weight:800;border:1px solid rgba(51,227,194,.2);border-radius:20px;padding:7px 10px;color:var(--cyan);background:rgba(51,227,194,.07)}.live-pill i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan);margin-right:6px}.spotlight h2{font:800 clamp(35px,4vw,57px)/.94 Manrope;margin:23px 0 12px;letter-spacing:-2px}.spotlight h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}.spotlight p{color:var(--muted);font-size:13px}.spotlight-actions{display:flex;gap:10px;margin:24px 0}.glass-button{height:42px;background:rgba(255,255,255,.035)}.table-meta{display:flex;gap:20px;color:#a9b2c2;font-size:10px}.table-art{position:relative;display:grid;place-items:center;min-height:305px}.orbit{width:310px;height:180px;border-radius:50%;border:1px solid rgba(51,227,194,.3);background:radial-gradient(ellipse,rgba(24,93,80,.7),rgba(5,21,22,.94) 63%);box-shadow:0 0 80px rgba(51,227,194,.11),inset 0 0 35px rgba(51,227,194,.13);position:relative;transform:perspective(600px) rotateX(12deg)}.orbit:before{content:"";position:absolute;inset:12px;border:1px solid rgba(51,227,194,.13);border-radius:50%}.seat{position:absolute;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#202a3a;border:2px solid var(--cyan);font-size:9px;font-weight:800;box-shadow:0 0 15px rgba(51,227,194,.3)}.seat.top{top:-18px;left:137px}.seat.left{left:-18px;top:72px}.seat.right{right:-18px;top:72px}.seat.empty{border-style:dashed;color:var(--cyan);font-size:18px}.card{position:absolute;width:52px;height:72px;border-radius:7px;background:#f2f2ee;color:#15202c;padding:6px;font:800 12px Manrope;box-shadow:0 8px 20px rgba(0,0,0,.45);bottom:38px;left:130px}.card small{display:block;color:#e34b5d}.fan-one{transform:translateX(-30px) rotate(-14deg)}.fan-three{transform:translateX(30px) rotate(14deg)}.table-logo{position:absolute;top:69px;width:100%;text-align:center;color:rgba(255,255,255,.28);font:800 19px Manrope;letter-spacing:4px}.table-logo small{display:block;font-size:6px;letter-spacing:3px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:43px 0 18px}.section-heading h2{font:800 22px Manrope;margin:0}.section-heading a{color:var(--cyan);font-size:12px;text-decoration:none}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.game-card{min-height:164px;padding:20px;border-radius:19px;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel-2),#0c111a);position:relative;overflow:hidden;cursor:pointer;transition:.25s}.game-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.3)}.game-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;background:var(--accent);opacity:.1;right:-45px;bottom:-60px;filter:blur(12px)}.game-card .game-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);font-size:19px}.game-card h3{font:800 16px Manrope;margin:18px 0 5px}.game-card p{color:var(--muted);font-size:11px;margin:0;max-width:78%}.game-card .players{position:absolute;right:17px;top:18px;color:var(--muted);font-size:9px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}.panel{background:linear-gradient(145deg,var(--panel),#0d131d);border:1px solid var(--line);border-radius:20px;padding:21px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-heading h3{font:800 16px Manrope;margin:0}.text-button{background:transparent;color:var(--cyan);font-size:10px}.friends-list{display:grid}.friend,.invite{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}.friend:first-child,.invite:first-of-type{border-top:0}.friend div:nth-child(2),.invite div{flex:1}.friend strong,.friend small,.invite strong,.invite small{display:block}.friend strong,.invite strong{font-size:12px}.friend small,.invite small{font-size:10px;color:var(--muted);margin-top:3px}.friend .status{font-size:9px;color:var(--cyan)}.count-badge{color:var(--cyan);background:rgba(51,227,194,.1);padding:4px 8px;border-radius:20px;font-size:9px}.page-title{margin-bottom:30px}.filter-row{display:flex;gap:8px;margin-bottom:18px}.filter{background:var(--panel);border:1px solid var(--line);padding:9px 14px;border-radius:20px;font-size:11px;color:var(--muted)}.filter.active{background:rgba(51,227,194,.12);border-color:rgba(51,227,194,.25);color:var(--cyan)}.room-list{display:grid;gap:12px}.room{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px;background:var(--panel);border:1px solid var(--line);padding:18px 20px;border-radius:17px}.room h3{font:700 14px Manrope;margin:0 0 4px}.room p{margin:0;color:var(--muted);font-size:10px}.room .seats{font-size:11px;color:var(--muted)}.search-box{display:flex;align-items:center;gap:10px;background:#0a0f18;border:1px solid var(--line);border-radius:12px;padding:0 13px;margin-bottom:14px}.search-box input{height:42px;background:transparent;border:0;outline:0;color:var(--text);width:100%}.expanded .friend{padding:16px 4px}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stats-row div{padding:20px;border-radius:17px;background:var(--panel);border:1px solid var(--line)}.stats-row small,.stats-row strong{display:block}.stats-row small{color:var(--muted);font-size:10px}.stats-row strong{font:800 25px Manrope;margin-top:6px}.history-row{display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.history-row:last-child{border:0}.history-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(51,227,194,.08);color:var(--cyan)}.history-row strong,.history-row small{display:block}.history-row small{color:var(--muted);font-size:10px;margin-top:3px}.result-win{color:var(--cyan);font-size:10px}.result-loss{color:var(--danger);font-size:10px}.toast-region{position:fixed;right:22px;bottom:22px;z-index:30}.toast{background:#182231;border:1px solid var(--line);padding:13px 17px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;animation:toast-in .2s ease}.modal-backdrop{position:fixed;inset:0;background:rgba(2,4,8,.75);backdrop-filter:blur(7px);z-index:40;display:grid;place-items:center;padding:20px}.modal{width:min(440px,100%);background:#121925;border:1px solid var(--line);border-radius:23px;padding:28px;box-shadow:var(--shadow);position:relative}.modal-close{position:absolute;right:15px;top:12px;background:transparent;border:0;color:var(--muted);font-size:24px;cursor:pointer}.modal h2{font:800 23px Manrope;margin:0 0 8px}.modal p{color:var(--muted);font-size:12px}.form-field{display:grid;gap:6px;margin:16px 0}.form-field label{font-size:10px;color:var(--muted)}.form-field input,.form-field select{height:44px;border-radius:11px;border:1px solid var(--line);background:#090e16;color:var(--text);padding:0 12px}.modal .primary-button{width:100%;margin-top:8px}.game-page{padding:22px clamp(14px,3vw,42px)}@keyframes toast-in{from{transform:translateY(10px);opacity:0}}
@media(max-width:950px){.app-shell{grid-template-columns:82px 1fr}.sidebar{width:82px;padding:25px 12px}.brand>span:last-child,.main-nav a:not(.active) b,.main-nav a{font-size:0}.brand{padding-left:8px}.main-nav a{justify-content:center}.main-nav a span{font-size:20px}.profile-chip>span:not(.avatar){display:none}.profile-chip{justify-content:center;padding:9px}.game-grid{grid-template-columns:repeat(2,1fr)}.spotlight{grid-template-columns:1fr}.table-art{display:none}.main-content{grid-column:2}}
@media(max-width:650px){.app-shell{display:block}.sidebar{transform:translateX(-100%);transition:.25s;width:245px}.sidebar.open{transform:none}.main-content{grid-column:1}.menu-button{display:block;margin-right:auto}.topbar{height:70px;padding:0 15px}.outline-button{display:none}.page{padding:28px 15px 50px}.welcome-row{align-items:flex-start}.season-card{display:none}.spotlight-copy{padding:30px 25px}.spotlight h2{font-size:39px}.game-grid,.dashboard-grid,.stats-row{grid-template-columns:1fr}.room{grid-template-columns:1fr auto}.room .seats{display:none}.history-row{grid-template-columns:42px 1fr auto}.history-row>small{display:none}}

/* Game tables */
.game-header{height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.game-header>div:nth-child(2){text-align:center}.game-header h2{font:800 20px Manrope;margin:8px 0 0}.leave-button{justify-self:start}.game-code{justify-self:end;border:1px solid var(--line);border-radius:11px;padding:7px 12px;text-align:right}.game-code small,.game-code strong{display:block}.game-code small{font-size:7px;color:var(--muted);letter-spacing:1.5px}.game-code strong{font-size:11px;color:var(--cyan);letter-spacing:1px}.game-surface{min-height:460px;border:1px solid color-mix(in srgb,var(--game-accent) 22%,var(--line));border-radius:32px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--game-accent) 13%,#0a1417) 0,#071013 52%,#090d14 78%);position:relative;box-shadow:inset 0 0 90px rgba(0,0,0,.6),var(--shadow);overflow:hidden}.game-surface:before{content:"";position:absolute;width:68%;height:64%;border:1px solid color-mix(in srgb,var(--game-accent) 28%,transparent);border-radius:50%;left:16%;top:18%;box-shadow:0 0 60px color-mix(in srgb,var(--game-accent) 8%,transparent),inset 0 0 55px color-mix(in srgb,var(--game-accent) 7%,transparent)}.opponent,.you-seat{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(13,19,29,.82);border:1px solid var(--line);padding:7px 10px;border-radius:13px;z-index:2;min-width:128px}.opponent.current,.you-seat.current{border-color:var(--game-accent);box-shadow:0 0 22px color-mix(in srgb,var(--game-accent) 14%,transparent)}.opponent strong,.opponent small,.you-seat strong,.you-seat small{display:block}.opponent strong,.you-seat strong{font-size:10px}.opponent small,.you-seat small{font-size:8px;color:var(--muted);margin-top:2px}.opponent-1{left:50%;top:17px;transform:translateX(-50%)}.opponent-2{left:18px;top:50%;transform:translateY(-50%)}.opponent-3{right:18px;top:50%;transform:translateY(-50%)}.opponent-4{left:22%;top:22px}.opponent-5{right:22%;top:22px}.opponent-hand{position:absolute;display:flex;left:50%;top:51px;transform:translateX(-50%)}.opponent-hand .playing-card{margin-left:-22px}.you-seat{left:50%;bottom:15px;transform:translateX(-50%)}.game-center{position:absolute;inset:80px 150px 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}.round-chip{font-size:7px;letter-spacing:2px;color:var(--game-accent);margin-bottom:9px}.game-prompt{font:700 clamp(13px,1.7vw,20px) Manrope;text-align:center;max-width:510px;margin-bottom:22px}.empty-table{width:90px;height:90px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--game-accent) 35%,transparent);display:grid;place-content:center;text-align:center;color:color-mix(in srgb,var(--game-accent) 65%,transparent)}.empty-table span{font-size:25px}.empty-table small{font-size:6px;letter-spacing:1.5px}.table-stack{display:flex;justify-content:center}.table-stack .playing-card{margin-left:-24px;transform:rotate(calc((var(--i, 1) - 2) * 4deg))}.playing-card{width:74px;height:104px;border-radius:9px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(145deg,#fff,#dfe3e6);color:#17202b;box-shadow:0 8px 22px rgba(0,0,0,.38);padding:7px;text-align:left;position:relative;flex:0 0 auto;cursor:pointer;transition:.18s}.playing-card:hover:not(:disabled){transform:translateY(-9px)}.playing-card.selected{transform:translateY(-15px);border:2px solid var(--cyan);box-shadow:0 0 24px rgba(51,227,194,.34)}.playing-card.mini{width:44px;height:62px;border-radius:6px;padding:4px}.playing-card:disabled{cursor:default}.card-rank{font:800 15px Manrope}.card-suit{display:block;font-size:13px}.card-suit.red{color:#d83d55}.card-back{background:repeating-linear-gradient(45deg,#10242d 0 5px,#153940 5px 10px);border:2px solid rgba(51,227,194,.45);display:grid;place-items:center;color:var(--cyan)}.card-back i{font-style:normal;border:1px solid rgba(51,227,194,.4);width:70%;height:76%;display:grid;place-items:center;border-radius:4px}.player-hand{display:flex;justify-content:center;align-items:flex-end;min-height:124px;padding:18px 10px 5px;overflow-x:auto;overflow-y:hidden}.player-hand .playing-card{margin-left:-15px}.player-hand .playing-card:first-child{margin-left:0}.player-hand.responses{justify-content:flex-start;gap:9px}.player-hand.responses .playing-card{margin:0}.response-card{width:155px;height:115px}.response-card strong{display:block;font-size:11px;line-height:1.35;margin-top:4px}.response-card .card-suit{color:var(--violet)}.hand-zone{margin-top:16px;padding:18px 22px 20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#111824,#0c111a)}.hand-heading{display:flex;justify-content:space-between;align-items:center}.hand-heading p{margin-bottom:3px}.hand-heading strong{font-size:11px}.turn-status{font-size:10px;color:var(--cyan)}.turn-status i{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);margin-right:6px}.game-controls{min-height:48px;display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px}.table-button{height:42px}.danger-button{height:42px;border:1px solid rgba(255,100,124,.3);background:rgba(255,100,124,.09);color:#ff8195;padding:0 16px;border-radius:12px;font-weight:800;cursor:pointer}.control-button{width:90px;height:64px;border:1px solid var(--line);background:#151d29;color:var(--text);border-radius:13px;font-size:22px;cursor:pointer}.control-button.red{color:#ff647c}.control-button small{display:block;color:var(--muted);font-size:8px}.control-hint{color:var(--muted);font-size:11px}.table-select{height:42px;min-width:80px;background:#0b111a;color:var(--text);border:1px solid var(--line);border-radius:11px;padding:0 10px}.button-count{margin-left:8px;background:rgba(0,0,0,.17);padding:2px 6px;border-radius:10px}.claim-chip,.pile-count{margin-top:10px}.claim-chip{font-size:9px;color:var(--amber);border:1px solid rgba(255,187,85,.25);background:rgba(255,187,85,.07);padding:6px 10px;border-radius:20px}.pile-count{color:var(--muted)}.draw-deck{display:flex}.draw-card{margin-left:-23px}.draw-card:hover{transform:translateY(-10px) rotate(calc((var(--n) - 3) * 3deg))}.response-grid{display:flex;gap:8px;max-width:650px;overflow-x:auto;padding:15px}.response-grid .playing-card{margin:0}.game-log{margin-top:15px;border:1px solid var(--line);border-radius:16px;padding:15px 18px;background:rgba(15,21,31,.72)}.game-log p:not(.eyebrow){display:inline;margin-right:18px;color:var(--muted);font-size:9px}.game-log p.latest{color:var(--text)}
@media(max-width:850px){.game-surface{min-height:410px}.opponent-4,.opponent-5{display:none}.game-center{inset:78px 95px 68px}.opponent{min-width:auto}.opponent-hand{display:none}}
@media(max-width:600px){.game-header{grid-template-columns:1fr auto}.game-header>div:nth-child(2){text-align:right}.game-code{display:none}.game-surface{min-height:390px;border-radius:22px}.opponent{padding:5px}.opponent>div{display:none}.opponent-1{top:12px}.opponent-2{left:10px}.opponent-3{right:10px}.game-center{inset:72px 45px 60px}.hand-zone{padding:15px 5px}.playing-card{width:58px;height:84px}.player-hand .playing-card{margin-left:-13px}.player-hand.responses{padding-left:10px}.response-card{width:135px;height:105px}.suit-actions{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:6px}.control-button{width:auto}.game-log{display:none}}
.account-switch{width:100%;margin-top:15px;background:transparent;border:0;color:var(--cyan);font-size:11px;cursor:pointer}