:root{color-scheme:dark;--bg:#080b12;--panel:#101622;--panel2:#151d2b;--line:#252f40;--muted:#8d9aaf;--text:#f7f8fb;--accent:#9bff71;--accent2:#70d8ff;--danger:#ff6d75;--gold:#ffc65c;--card:#f8f6f1;--ink:#151923;font-family:"DM Sans",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#24324b 0,#0c111c 37%,var(--bg) 70%);color:var(--text);min-height:100vh;overflow-x:hidden}button{font:inherit}.shell{min-height:100dvh;max-width:520px;margin:auto;position:relative;padding:22px 20px calc(90px + env(safe-area-inset-bottom))}.brand{font:800 18px/1 "Manrope";letter-spacing:-.7px;display:flex;align-items:center;gap:9px}.brand-mark{width:29px;height:29px;background:var(--accent);color:#0b1110;display:grid;place-items:center;border-radius:9px;font-size:19px;box-shadow:0 0 28px #9bff7133}.topbar{display:flex;align-items:center;justify-content:space-between}.icon-btn{border:1px solid var(--line);background:#121826;color:var(--text);width:42px;height:42px;border-radius:14px}.hero{padding:44px 0 27px}.eyebrow{font:700 11px/1 "Manrope";letter-spacing:1.7px;color:var(--accent);text-transform:uppercase}.hero h1{font:800 clamp(42px,13vw,64px)/.98 "Manrope";letter-spacing:-3.5px;margin:12px 0 14px;max-width:430px}.hero p{color:var(--muted);font-size:16px;line-height:1.5;margin:0;max-width:360px}.rank-card{background:linear-gradient(135deg,#192334,#111722);border:1px solid #2b384c;border-radius:24px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden}.rank-card:after{content:"♠";position:absolute;right:-6px;top:-34px;font-size:145px;color:#ffffff08;transform:rotate(7deg)}.rank-row{display:flex;justify-content:space-between;align-items:center}.rank-name{font:800 21px "Manrope"}.rank-points{font:700 14px "Manrope";color:var(--accent)}.progress{height:5px;background:#283243;border-radius:5px;margin:14px 0 8px;overflow:hidden}.progress i{display:block;width:72%;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:5px}.rank-caption{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.play{width:100%;border:0;border-radius:21px;padding:20px;background:var(--accent);color:#0a100d;font:800 21px "Manrope";box-shadow:0 14px 40px #8dff6330;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}.play:hover{filter:brightness(1.06);transform:translateY(-1px)}.mode{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;margin:12px 0 28px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:24px 0 12px}.section-head h2{font:700 16px "Manrope";margin:0}.section-head span{font-size:12px;color:var(--accent2)}.challenge{display:flex;gap:14px;align-items:center;background:#101722;border:1px solid var(--line);border-radius:19px;padding:15px}.challenge-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#242137;color:#d0b9ff;font-size:21px}.challenge-copy{flex:1}.challenge-copy strong{font-size:14px}.challenge-copy small{display:block;color:var(--muted);margin-top:4px}.mini-progress{width:58px;text-align:right;font:700 12px "Manrope"}.mini-progress i{display:block;height:4px;background:#2b3442;border-radius:3px;margin-top:6px;overflow:hidden}.mini-progress i:after{content:"";display:block;width:67%;height:100%;background:#b18cff}.nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);padding:12px 24px calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#0b1019ee;backdrop-filter:blur(18px);border-top:1px solid #202938}.nav button{border:0;background:none;color:#69778e;font-size:10px;display:grid;gap:4px;place-items:center}.nav b{font-size:19px}.nav .active{color:var(--accent)}.table-shell{min-height:100dvh;max-width:680px;margin:auto;display:flex;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 43%,#1b3750,#101c2c 45%,#080d15 78%)}.game-top{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 6px}.score-pill{display:flex;gap:16px;background:#080c13aa;border:1px solid #2b3746;border-radius:17px;padding:9px 13px;font-size:11px}.score-pill b{font:800 15px "Manrope";display:block}.score-pill .us b{color:var(--accent)}.players-grid{display:grid;grid-template:100px 1fr 100px/72px 1fr 72px;flex:1;align-items:center;min-height:360px;padding:0 10px}.player{display:grid;justify-items:center;gap:5px;font-size:10px;color:#aeb8c7;position:relative}.player.top{grid-area:1/2}.player.left{grid-area:2/1}.player.right{grid-area:2/3}.avatar{width:46px;height:46px;border-radius:16px;border:2px solid #556176;display:grid;place-items:center;background:linear-gradient(145deg,#283247,#131925);font:800 14px "Manrope";position:relative}.avatar.turn{border-color:var(--accent);box-shadow:0 0 0 4px #9bff7115,0 0 24px #9bff7130}.avatar .bid{position:absolute;right:-9px;bottom:-7px;min-width:22px;height:22px;padding:0 5px;border-radius:8px;background:#f4f6fa;color:#121722;display:grid;place-items:center;font:800 10px "Manrope"}.trick{grid-area:2/2;position:relative;width:170px;height:180px;justify-self:center}.played{position:absolute;width:54px;height:75px;border-radius:8px;background:var(--card);color:var(--ink);box-shadow:0 6px 16px #0005;padding:5px;font:800 14px "Manrope";animation:cardIn .18s ease-out}.played.red{color:#e04452}.played.s0{bottom:0;left:58px}.played.s1{left:0;top:50px;transform:rotate(7deg)}.played.s2{top:0;left:58px;transform:rotate(2deg)}.played.s3{right:0;top:50px;transform:rotate(-7deg)}@keyframes cardIn{from{opacity:.3;scale:.8}to{opacity:1;scale:1}}.status{text-align:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font:700 12px "Manrope";color:#ced7e4}.hand-zone{padding:0 7px calc(14px + env(safe-area-inset-bottom));position:relative}.turn-copy{text-align:center;font:700 11px "Manrope";letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);height:26px}.hand{height:154px;display:flex;align-items:flex-end;justify-content:center;padding:0 18px}.card{width:70px;height:104px;border-radius:11px;background:linear-gradient(145deg,#fff,#eae8e2);border:0;color:var(--ink);padding:8px;box-shadow:0 7px 18px #0008;margin-left:-32px;transform-origin:50% 120%;transition:transform .14s,opacity .14s,filter .14s;text-align:left;font:800 18px "Manrope";cursor:pointer;position:relative}.card:first-child{margin-left:0}.card.red{color:#dd3d4d}.card:after{content:attr(data-suit);position:absolute;right:8px;bottom:7px;font-size:21px}.card.legal:hover,.card.legal:active{transform:translateY(-15px)}.card.illegal{filter:brightness(.55);cursor:not-allowed}.bid-overlay,.result-overlay{position:fixed;z-index:30;inset:0;background:#070a11dd;backdrop-filter:blur(13px);display:grid;place-items:end center}.sheet{width:min(540px,100%);background:#121925;border:1px solid #2b3647;border-radius:30px 30px 0 0;padding:27px 22px calc(25px + env(safe-area-inset-bottom));box-shadow:0 -20px 70px #0009}.sheet h2{font:800 29px "Manrope";letter-spacing:-1px;margin:4px 0}.sheet .sub{color:var(--muted);font-size:13px}.bids{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:20px 0}.bids button{aspect-ratio:1;border:1px solid #303c4f;border-radius:13px;background:#192130;color:#fff;font:700 15px "Manrope"}.bids button:hover{border-color:var(--accent);background:#26352e}.bids .nil{grid-column:span 7;aspect-ratio:auto;height:49px;color:#ff97a0}.contract-preview{display:flex;justify-content:space-between;background:#0d121c;border-radius:15px;padding:14px;font-size:12px;color:var(--muted)}.contract-preview b{display:block;color:#fff;font-size:17px;margin-top:3px}.result-overlay{place-items:center}.result{text-align:center}.result .spade{font-size:60px;color:var(--accent);filter:drop-shadow(0 0 25px #9bff7166)}.result h1{font:800 42px "Manrope";letter-spacing:-2px;margin:4px}.result-score{display:flex;justify-content:center;gap:50px;margin:24px}.result-score b{display:block;font:800 28px "Manrope"}.result-score small{color:var(--muted)}.toast{position:fixed;z-index:50;top:20px;left:50%;transform:translateX(-50%);background:#efffed;color:#142215;border-radius:14px;padding:11px 16px;font:700 12px "Manrope";box-shadow:0 8px 30px #0006;animation:toast 2s both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}15%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}@media(min-width:700px){.table-shell{min-height:900px;margin-top:20px;border-radius:34px;border:1px solid #2a3442;box-shadow:0 30px 100px #000}.bid-overlay,.result-overlay{place-items:center}.sheet{border-radius:30px;margin-bottom:40px}}