:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#effaff;background:#040b1e;--bg:#06122c;--blue:#00bfff;--sky:#19e0ff;--purple:#5569f9;--muted:#a6c1df;--border:rgba(48,177,255,.33)}
*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% 24%,#10346d 0,#061632 40%,#020a1b 80%);overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}button:focus-visible,input:focus-visible{outline:2px solid #3ee8ff;outline-offset:3px}[hidden]{display:none!important}.ambient{position:fixed;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(100px);opacity:.4}.a1{width:380px;height:380px;background:#075bda;top:10%;left:-230px}.a2{width:400px;height:400px;background:#0089bb;right:-280px;bottom:10%}.shell{max-width:1320px;padding:0 26px;margin:auto;min-height:100vh;display:flex;flex-direction:column}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(39,127,222,.22);gap:10px}.brand{text-decoration:none;color:white;display:flex;align-items:center;gap:14px;font-size:22px;letter-spacing:1.5px;font-weight:950;line-height:1}.brand-accent{color:#24dcff;text-shadow:0 0 20px #02bffe}.brand small{display:block;letter-spacing:4px;font-size:9px;font-weight:700;color:#8097bd;margin-top:8px}.logo-symbol{font-size:35px;color:#65eaff;text-shadow:0 0 12px #00aef2,0 0 26px #118afa}.header-right{display:flex;align-items:center;gap:24px}.connection{display:flex;align-items:center;gap:8px;color:#a4d8f3;font-size:10px;letter-spacing:2px;font-weight:800}.connection i{width:7px;height:7px;border-radius:50%;background:#2eefbd;box-shadow:0 0 12px #13c7a1}.connection.offline i{background:#ff6680;box-shadow:0 0 12px #ff6680}.lang{border:1px solid #236492;padding:4px;border-radius:12px;display:flex;gap:3px;background:rgba(0,21,59,.7)}.lang button{background:transparent;color:#7fb4d8;border:0;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:900}.lang button.active{color:white;background:linear-gradient(135deg,#1263c8,#08a5eb);box-shadow:0 0 17px #0b98e569}main{flex:1}.view{animation:appear .24s ease-out}@keyframes appear{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.landing{max-width:980px;margin:0 auto;padding:62px 0 38px}.hero-head{text-align:center}.micro-title,.section-eyebrow{color:#57cfff;letter-spacing:4px;font-size:11px;font-weight:900}.hero-head h1{font-size:clamp(44px,9vw,106px);letter-spacing:-4px;line-height:1.2;margin:12px 0 4px;font-weight:950;text-shadow:0 8px 32px #0080ff64}.hero-head h1 span{color:#4eeeff;text-shadow:0 0 26px #00baff99}.hero-head p{color:#b3c9e6;font-size:16px;margin:12px 0 0}.suitbar{text-align:center;font-size:28px;color:#7ae6ff;letter-spacing:23px;margin:25px 0 28px;text-shadow:0 0 13px #219aff}.launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.launch-card{position:relative;min-height:315px;border:1px solid #23568d;border-radius:22px;padding:34px;background:linear-gradient(140deg,rgba(14,46,92,.98),rgba(5,22,55,.98));box-shadow:inset 0 1px 0 #2f80b933,0 15px 70px #0006;overflow:hidden}.launch-card.featured{border-color:#178fe9;box-shadow:0 0 32px #0081f533,inset 0 1px 0 #49e2ff66}.launch-card::after{content:"";position:absolute;right:-50px;top:-60px;width:175px;height:175px;border:1px solid #32bdff55;border-radius:50%;box-shadow:0 0 45px #13acff38;pointer-events:none}.launch-icon{font-size:42px;color:#66e5ff;text-shadow:0 0 16px #02a6ff;margin-bottom:11px}.label-small{letter-spacing:2.4px;font-size:10px;font-weight:850;color:#50c8fe}.launch-card h2{margin:9px 0;font-size:24px}.launch-card p{color:#abc1de;font-size:14px;max-width:350px;line-height:1.6;min-height:47px;margin:0 0 20px}.btn{border:0;border-radius:11px;padding:13px 22px;font-size:12px;font-weight:950;letter-spacing:1.4px;transition:transform .13s,box-shadow .13s;text-align:center}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn.primary{color:#041b36;background:linear-gradient(125deg,#24eaff,#0698ff);box-shadow:0 0 26px #00aaff66,inset 0 1px 0 #ffffff99}.btn.secondary{color:#bbedff;background:#0a3566;border:1px solid #168bd5;box-shadow:inset 0 1px 0 #34a6d722}.btn.big{padding:17px 32px}.join-panel{background:rgba(4,36,73,.83);margin-top:22px;padding:20px 24px;border:1px solid #0a8acb;border-radius:15px;display:flex;justify-content:space-between;gap:18px;align-items:center}.join-panel h3{margin:0 0 5px}.join-panel p{color:#8dcce9;margin:0}.below-hero{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;color:#76a1cc;font-size:11px;letter-spacing:1.3px;margin:32px 0}.below-hero b{color:#13b8d5}footer{border-top:1px solid #1d4166;padding:25px 0;display:flex;justify-content:space-between;gap:10px;color:#6a8cb6;font-size:10px;letter-spacing:2px}.lobby{text-align:center;max-width:850px;margin:50px auto}.section-title{font-size:clamp(26px,4vw,46px);margin:10px 0 15px}.room-tag{display:inline-block;border:1px solid #186eb2;background:#073261;border-radius:10px;font-size:17px;font-weight:900;letter-spacing:4px;padding:12px 23px;color:#73e8ff}.seat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin:38px 0 24px}.seat-tile{background:#09254b;border:1px solid #1a6498;border-radius:14px;min-height:94px;display:flex;gap:15px;align-items:center;text-align:left;padding:19px}.seat-tile .seat-index{background:#0e427b;color:#8eeaff;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-weight:900}.seat-tile b{display:block}.seat-tile small{color:#8eb2d3}.seat-tile.empty{border-style:dashed;opacity:.67}.invite-panel{display:flex;align-items:flex-end;gap:13px;padding:22px;border:1px solid #235c88;border-radius:15px;background:#062043;text-align:left}.invite-panel>div{flex:1;min-width:0}.invite-panel input{margin-top:9px;width:100%;border-radius:9px;border:1px solid #2c78a9;background:#06142c;color:#cbefff;padding:13px;min-width:0;font-size:12px}.muted{color:#9eb8d4}.center{text-align:center;margin:18px 0}.arena{padding:20px 0 36px;max-width:1180px;margin:0 auto}.status-board{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;border:1px solid #23689d;border-radius:16px;background:linear-gradient(90deg,#071a39,#103363,#071a39);box-shadow:0 0 25px #0395fa19;min-height:92px;padding:15px 23px}.team-score{display:flex;flex-direction:column;gap:4px}.team-score span{font-size:10px;letter-spacing:1.25px;color:#a9c5e7;font-weight:850}.team-score strong{font-size:39px;color:#55e8ff;text-shadow:0 0 15px #00b5ff8f;line-height:1.1}.team-score.right-score{text-align:right}.right-score strong{color:#ffbe6e;text-shadow:0 0 12px #f3a2387a}.score-middle{text-align:center}.contract-pill{color:#c8f5ff;font-weight:900;letter-spacing:2px;font-size:12px}.round-info{color:#86b7db;font-size:11px;margin-top:8px}.table-zone{height:min(55vw,490px);min-height:380px;position:relative;margin:17px auto 10px;border-radius:38% / 34%;border:5px solid #115999;background:radial-gradient(ellipse at 47% 49%,#0b4781 0,#08366a 40%,#061f48 76%,#05132f 100%);box-shadow:0 0 0 3px #042048,0 0 0 5px #1461ad,0 0 55px #0295f63d,inset 0 0 70px #010d30,inset 0 0 0 2px #38a7fa56;isolation:isolate}.board-pattern{position:absolute;inset:18px;border:1px solid #2196c444;border-radius:inherit;pointer-events:none}.felt-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;opacity:.19;font-weight:950;letter-spacing:5px;font-size:31px;text-shadow:0 0 18px cyan}.felt-center b{color:#76e9ff}.felt-center small{font-size:18px;color:#a3dcff;letter-spacing:6px;margin-top:8px}.opponent,.me-seat{position:absolute;display:flex;align-items:center;gap:9px;z-index:4;background:#061d41e8;border:1px solid #25609a;border-radius:14px;padding:9px 12px;box-shadow:0 3px 20px #0008;max-width:calc(100% - 25px)}.opponent.turn,.me-seat.turn{border-color:#48efff;box-shadow:0 0 22px #1caeff88;background:#11417be8}.opponent.north{top:8px;left:50%;transform:translateX(-50%)}.opponent.east{top:50%;right:4px;transform:translateY(-50%);flex-direction:column;text-align:center}.opponent.west{top:50%;left:4px;transform:translateY(-50%);flex-direction:column;text-align:center}.me-seat{bottom:4px;left:50%;transform:translateX(-50%)}.avatar{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;flex:none;color:#082e57;font-size:12px;font-weight:950;background:linear-gradient(145deg,#5fecff,#126bda);box-shadow:0 0 13px #22bfff66}.team-odd .avatar{background:linear-gradient(145deg,#ffe399,#eb873c);box-shadow:0 0 13px #fe9c3666}.seat-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.seat-meta b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.seat-meta small{font-size:9px;color:#9bc5e1;white-space:nowrap}.mini-cards{display:flex;gap:0;margin:3px 0}.mini-card{width:13px;height:20px;background:linear-gradient(120deg,#1189d6,#063d8f);border:1px solid #6dccff;border-radius:3px;margin-left:-4px;transform:rotate(8deg)}.mini-card:first-child{margin-left:0}.played-cards{position:absolute;inset:0;pointer-events:none;z-index:3}.played-slot{position:absolute}.played-slot.s0{bottom:24%;left:52%;transform:translateX(-50%) rotate(-5deg)}.played-slot.s1{top:48%;right:25%;transform:translateY(-50%) rotate(8deg)}.played-slot.s2{top:18%;left:47%;transform:translateX(-50%) rotate(5deg)}.played-slot.s3{top:45%;left:26%;transform:translateY(-50%) rotate(-8deg)}.card{height:93px;width:65px;flex:0 0 65px;border-radius:9px;border:1px solid #d8f5ff;background:linear-gradient(155deg,#ffffff,#dbeafa);box-shadow:0 6px 12px #0007;position:relative;color:#172c4d;display:flex;align-items:center;justify-content:center;user-select:none}.card.red{color:#e53961}.card .corner{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;align-items:center;font-size:16px;font-weight:900;line-height:1.03}.card .corner small{font-size:13px}.card .pip{font-size:36px;line-height:1}.card .other-corner{position:absolute;right:6px;bottom:6px;font-weight:800;font-size:14px;transform:rotate(180deg)}.card.inactive{filter:grayscale(.55) brightness(.7);opacity:.68}.card.legal{cursor:pointer;box-shadow:0 0 0 2px #46e8ff,0 0 19px #0fbaff72,0 7px 12px #0007}.card.legal:hover,.card.legal:focus-visible{transform:translateY(-14px)!important;z-index:10;box-shadow:0 0 0 3px #34f5ff,0 0 24px #18bafc}.action-strip{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-radius:13px;background:#071d3c;border:1px solid #194d80;margin:15px 0 13px}.turn-msg{color:#9dd4f4;font-size:13px;font-weight:750}.action-buttons{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.action-buttons button{font-size:12px;font-weight:850;padding:10px 12px;border:1px solid #2484c9;color:#d2f4ff;background:#0d427d;border-radius:8px;min-width:53px}.action-buttons button:hover{background:#1173b6}.action-buttons button.red-action{border-color:#d68952;color:#ffc08a}.action-buttons button.active-action{background:#0da6da;color:#03152e}.hand-wrap{padding:15px 20px 21px;border:1px solid #1b5d9a;border-radius:16px;background:linear-gradient(0deg,#071c3d,#082650);overflow:hidden}.hand-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px;font-weight:850;color:#90b6da;margin-bottom:16px}.my-hand{display:flex;justify-content:center;align-items:center;min-height:100px;gap:clamp(0px,1.2vw,12px)}.my-hand .card{position:relative;transition:transform .12s,box-shadow .12s}.my-hand .card.legal{transform:translateY(-5px)}.arena-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:11px;color:#85b5df;padding:18px 4px}.link-btn{border:0;background:transparent;color:#6fe7ff;text-decoration:underline;text-underline-offset:5px;font-size:11px}.summary{border:1px solid #1e99c4;background:linear-gradient(110deg,#071e48,#0c3869);border-radius:15px;margin-top:14px;padding:24px;box-shadow:0 0 23px #087cce2b}.summary h2{margin:0 0 7px;font-size:22px}.summary p{color:#a9cee9;font-size:13px;line-height:1.5}.summary .results{display:flex;justify-content:space-between;gap:10px;margin:17px 0;font-size:13px}.summary .results strong{font-size:21px;color:#72e8ff}.summary .btn{margin-top:8px}.toast{position:fixed;z-index:110;top:105px;right:25px;max-width:min(340px,90vw);padding:14px 20px;border:1px solid #35d2ef;border-radius:10px;background:#06294fed;box-shadow:0 0 33px #13aefe49;font-size:13px;color:#e2ffff;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:none}.modal{position:fixed;z-index:100;inset:0;background:#020916dc;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}.modal-content{position:relative;width:min(480px,100%);border:1px solid #1d94d5;background:linear-gradient(150deg,#0b3566,#061630);padding:38px;border-radius:23px;box-shadow:0 0 75px #007eff6b;text-align:center}.modal-suit{font-size:49px;color:#54e1ff;text-shadow:0 0 25px #2dd8ff}.modal-content h2{font-size:25px;margin:10px 0}.modal-content p{color:#abc9e7;font-size:13px;line-height:1.6}.modal-content form{display:flex;flex-direction:column;gap:12px;margin-top:25px}.modal-content input{background:#051b3c;border:1px solid #338ac2;border-radius:10px;color:white;padding:15px;font-size:16px}.modal-cancel{border:0;color:#94b8da;background:none;margin:18px auto 0}.modal-content.rules-content{width:min(670px,100%);max-height:min(80vh,850px);overflow-y:auto;text-align:left;padding:32px 36px}.rules-content h2{margin-top:0}.rules-content h3{color:#6fe5ff;margin-top:20px}.rules-content p,.rules-content li{font-size:13px;line-height:1.65;color:#c2d6ee}.close{position:absolute;top:16px;right:18px;color:#d0f5ff;border:0;background:none;font-size:20px}
@media(max-width:740px){.shell{padding:0 12px}.topbar{height:75px}.brand{font-size:17px;gap:6px}.brand small{letter-spacing:2px;font-size:8px}.logo-symbol{font-size:29px}.header-right{gap:9px}.connection{display:none}.landing{padding:35px 0}.hero-head h1{letter-spacing:-2px}.hero-head p{font-size:13px}.micro-title{letter-spacing:1.5px}.suitbar{margin:20px 0;letter-spacing:14px}.launch-grid{grid-template-columns:1fr}.launch-card{min-height:unset;padding:24px}.launch-card p{min-height:unset}.join-panel{flex-direction:column;align-items:stretch}.seat-grid{gap:8px}.seat-tile{padding:11px;gap:7px}.seat-tile .seat-index{width:32px;height:32px}.seat-tile b{font-size:12px}.invite-panel{flex-direction:column;align-items:stretch;padding:13px}.arena{padding-top:10px}.status-board{padding:12px;min-height:75px}.team-score span{font-size:8px}.team-score strong{font-size:29px}.contract-pill{font-size:10px}.round-info{font-size:9px}.table-zone{min-height:360px;height:360px;border-radius:37% / 35%;border-width:3px}.opponent,.me-seat{padding:7px;gap:5px}.opponent.east{right:1px}.opponent.west{left:1px}.opponent.north{top:3px}.me-seat{bottom:3px}.avatar{width:24px;height:24px}.seat-meta b{font-size:9px;max-width:70px}.seat-meta small{font-size:8px}.mini-card{height:15px;width:10px}.card{width:48px;height:71px;flex-basis:48px;border-radius:6px}.card .pip{font-size:28px}.card .corner{top:4px;left:4px;font-size:12px}.card .corner small{font-size:10px}.card .other-corner{font-size:11px}.played-slot.s0{bottom:24%;left:52%}.played-slot.s1{right:23%;top:46%}.played-slot.s2{top:22%}.played-slot.s3{left:23%;top:46%}.action-strip{padding:13px;display:block}.turn-msg{margin-bottom:10px}.action-buttons{justify-content:center}.action-buttons button{padding:9px 10px}.hand-wrap{padding:12px 6px 17px}.my-hand{gap:0}.my-hand .card{margin-left:-3px;flex:1 1 0;max-width:48px;min-width:0}.my-hand .card:first-child{margin-left:0}.arena-foot{gap:10px}footer{font-size:8px;letter-spacing:.5px}.modal-content{padding:24px}}
@media(max-width:390px){.table-zone{min-height:320px;height:320px}.played-slot.s1{right:20%}.played-slot.s3{left:20%}.brand{font-size:15px}.my-hand .card{margin-left:-6px}.action-buttons button{font-size:10px;padding:8px}}