:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f3ea;background:#0b1c29;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{background:radial-gradient(circle at 50% -20%,#244457,#0b1c29 65%);user-select:none}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ebcc81;outline-offset:3px}button:disabled{cursor:default;opacity:.48}#app{min-height:100svh;display:flex;flex-direction:column}.loading{margin:auto}.topbar{height:68px;padding:0 clamp(16px,3vw,42px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16;background:#0b1c2988;z-index:2}.brand{display:flex;gap:10px;align-items:center}.logo{color:#eacb84;font-size:34px;line-height:1}.brand strong{font-size:17px;letter-spacing:.02em;display:block}.brand small{display:block;color:#a6b9bb;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.top-actions{display:flex;gap:8px}.icon{width:40px;height:40px;border-radius:12px;border:1px solid #ffffff22;color:#d9e4df;background:#ffffff0d;font-size:21px}.icon:hover,.tool:hover{background:#ffffff20}.menu-shell{flex:1;min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1240px;width:100%;margin:auto;padding:28px clamp(24px,5vw,72px);gap:40px}.menu-art{height:480px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,#1c5559 0%,#17404a 45%,transparent 68%)}.hero-spade{font-family:Georgia,serif;font-size:370px;color:#dfc37f;text-shadow:0 25px 14px #07182299,0 2px 2px #fff2;transform:rotate(-8deg);line-height:1}.orbit{position:absolute;border:1px solid #b8d8c235;border-radius:50%;transform:rotate(-18deg)}.orbit-one{width:420px;height:250px}.orbit-two{width:510px;height:340px}.menu-content{max-width:480px}.eyebrow{color:#dec98d;letter-spacing:.7em;font-size:17px}.menu-content h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(66px,8vw,112px);margin:6px 0;letter-spacing:-.06em}.menu-content p{color:#c1d0ce;font-size:18px;margin:0 0 35px}.menu-buttons{display:grid;gap:10px}.primary,.secondary{min-height:51px;border-radius:12px;padding:12px 20px;text-align:left;display:flex;justify-content:space-between;align-items:center;font-weight:700;border:1px solid transparent}.primary{background:#e4c779;color:#182937;box-shadow:0 6px 25px #0003}.primary:hover{background:#f4d996}.secondary{background:#ffffff0e;border-color:#ffffff2c;color:#f5f3ea}.secondary:hover{background:#ffffff20}.primary span,.secondary span{font-size:22px;font-weight:400}.mode-info{margin-top:28px;display:grid;grid-template-columns:1fr;gap:4px;color:#9dafb0;font-size:13px}.mode-info strong{color:#e1e9e6;margin-top:10px}.game-shell{flex:1;display:flex;flex-direction:column;width:min(100%,1280px);margin:auto;padding:12px clamp(12px,2vw,24px) 0;min-height:0}.scoreboard{display:flex;justify-content:center;align-items:center;gap:clamp(8px,3vw,32px);min-height:86px}.score-block{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:baseline;min-width:150px}.score-block span{color:#c9d5d2;font-size:12px;grid-column:1/3;text-transform:uppercase;letter-spacing:.08em}.score-block strong{font-size:31px}.score-block small{color:#a5bbb7}.score-block.us strong{color:#e7cb83}.score-divider{text-align:center;color:#afbfbd;min-width:130px}.score-divider span{display:block;font-size:11px}.score-divider b{font-size:12px;letter-spacing:.15em}.game-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px}.game-tools>div{display:flex;gap:6px}.tool{min-height:38px;padding:6px 12px;color:#e5ede9;background:#ffffff0c;border:1px solid #ffffff1b;border-radius:9px;font-size:12px}.felt{position:relative;flex:1;min-height:335px;margin:4px 0 0;border-radius:28px 28px 18px 18px;background:radial-gradient(ellipse at center,#277269 0%,#15564f 60%,#0b403d 100%);border:7px solid #264952;box-shadow:inset 0 0 0 2px #89baaa22,inset 0 0 70px #082e2a80,0 20px 30px #0003;overflow:hidden}.felt:before{content:"";position:absolute;inset:16px;border:1px solid #d5e6d421;border-radius:19px;pointer-events:none}.seat{position:absolute;display:flex;align-items:center;gap:7px;background:#092e35c7;border:1px solid #ffffff20;border-radius:14px;padding:7px 10px;min-width:132px;z-index:1}.seat.active{border-color:#e8c77f;box-shadow:0 0 0 2px #e8c77f55}.seat-2{top:15px;left:50%;transform:translateX(-50%)}.seat-1{left:16px;top:48%;transform:translateY(-50%)}.seat-3{right:16px;top:48%;transform:translateY(-50%)}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#d6bf83;color:#1d393b;font-weight:800;flex:none}.seat-meta strong{font-size:12px;display:block}.seat-meta span{font-size:10px;color:#c2d7d1;white-space:nowrap}.card-count{margin-left:auto;font-size:11px;color:#e6d49d;white-space:nowrap}.table-center{position:absolute;inset:55px 155px 20px;display:grid;place-items:center}.table-mark{position:absolute;font-family:Georgia,serif;font-size:155px;color:#ffffff0a}.table-label{position:absolute;bottom:1px;text-align:center;max-width:100%;font-size:13px;color:#f3ead1;background:#123f3add;padding:6px 12px;border-radius:9px}.played{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;z-index:1}.played .card{width:62px;height:88px}.played .card-center{font-size:35px}.played .card-corner{font-size:11px}.played small{font-size:10px;color:#e4ece8}.played-0{bottom:42px;left:50%;transform:translateX(-50%)}.played-2{top:8px;left:50%;transform:translateX(-50%)}.played-1{left:18%;top:50%;transform:translateY(-50%)}.played-3{right:18%;top:50%;transform:translateY(-50%)}.last-trick{position:absolute;right:25px;bottom:23px;background:#092f32b8;border:1px solid #ffffff1f;border-radius:9px;padding:7px 9px;font-size:11px;color:#e4d49f}.bottom-area{height:196px;position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden}.seat-0{position:static;margin:7px auto 0;min-width:145px}.hand{height:118px;width:100%;max-width:760px;display:flex;align-items:flex-end;justify-content:center;padding:6px 10px 0;overflow:visible}.hand-card{position:relative;width:clamp(38px,5.8vw,67px);height:clamp(73px,8.7vw,100px);flex:none;padding:0;background:transparent;border:0;border-radius:7px;transition:transform .15s ease;margin-left:clamp(-20px,-1.2vw,-7px)}.hand-card:first-child{margin-left:0}.hand-card.can-play:hover,.hand-card.can-play:focus-visible,.hand-card.selected.can-play{transform:translateY(-13px);z-index:5}.hand-card:disabled{opacity:.63}.hand-card.is-hint{transform:translateY(-18px);z-index:6}.card{position:relative;display:block;width:100%;height:100%;border-radius:7px;border:1px solid #c4c9bf;background:#fbfaf5;color:#1c2d37;box-shadow:0 3px 8px #0b1c2955}.card.red{color:#b8434b}.card.legal{border-color:#ebd390;box-shadow:0 0 0 2px #e3c57e77,0 4px 10px #0005}.card.suggest{box-shadow:0 0 0 3px #f6e18d,0 0 20px #f6e18d}.card-corner{position:absolute;left:5px;top:3px;font-size:13px;font-weight:750;line-height:1}.card-corner small{display:block;font-size:12px}.card-corner.bottom{left:auto;top:auto;right:5px;bottom:3px;transform:rotate(180deg)}.card-center{position:absolute;inset:0;display:grid;place-items:center;font-family:Georgia,serif;font-size:clamp(30px,4vw,44px)}.hand-footer{font-size:11px;color:#b9cbc7;text-align:center;line-height:1.25;padding:4px 10px}.overlay{position:fixed;inset:0;background:#071820c9;display:grid;place-items:center;padding:16px;z-index:10;backdrop-filter:blur(5px)}.dialog{position:relative;width:min(100%,520px);max-height:min(92svh,750px);overflow:auto;border-radius:20px;background:#17333f;border:1px solid #ffffff29;box-shadow:0 30px 80px #0008;padding:28px;color:#f7f6ec}.dialog h2{font-family:Georgia,serif;font-size:30px;font-weight:500;margin:0 30px 16px 0}.dialog p{font-size:14px;line-height:1.6;color:#d5e0db}.dialog-close{position:absolute;right:15px;top:12px;background:transparent;border:0;color:#d6e2dd;font-size:26px;width:38px;height:38px}.dialog .fine{font-size:12px;color:#a8bfb9}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid #ffffff1a;font-size:14px}.setting-row select{min-height:40px;border-radius:8px;border:1px solid #ffffff42;background:#0e2832;color:#f5f3ea;padding:0 10px}.setting-row input{width:22px;height:22px;accent-color:#e4c779}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stats-grid>div{padding:12px;background:#ffffff0c;border-radius:9px}.stats-grid small{display:block;color:#b4c8c2}.stats-grid strong{display:block;font-size:24px;color:#ecd38f}.text-button{background:none;color:#e8d594;border:0;text-decoration:underline;margin-top:17px}.bid-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.bid-choice{height:50px;border-radius:9px;border:1px solid #ffffff30;background:#ffffff12;color:#fff;font-weight:700}.bid-choice:hover,.bid-choice.recommended{background:#e3c779;color:#18343d}.bid-choice.nil{grid-column:span 7;background:#344652}.bid-choice.nil:hover{background:#e3c779}.result-grid{display:grid;gap:10px;margin:20px 0}.result-grid>div{display:grid;grid-template-columns:1fr auto;gap:4px;padding:12px;background:#ffffff10;border-radius:10px}.result-grid strong{color:#efd799}.result-grid span{font-size:12px;color:#c2d2cd;grid-column:1/3}.result-grid b{font-size:21px;color:#fff;grid-column:2;grid-row:1}.full{width:100%;justify-content:center;text-align:center;margin-top:10px}.result-icon{text-align:center;font-size:60px;color:#e6cd8e}.final-score{text-align:center;font-size:42px;color:#ecd592;font-weight:800}.final-score span{color:#97aaa9;font-weight:400}.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#e4c779;color:#14323c;border-radius:10px;padding:10px 14px;z-index:20;font-size:13px;font-weight:700;box-shadow:0 8px 24px #0005}.reduced-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){.topbar{height:56px}.brand small{display:none}.menu-shell{grid-template-columns:1fr;gap:0;min-height:0;padding:12px 22px 30px}.menu-art{height:190px}.hero-spade{font-size:190px}.orbit-one{width:240px;height:135px}.orbit-two{width:300px;height:180px}.menu-content{text-align:center;margin:auto}.menu-content h1{font-size:64px}.menu-content p{margin-bottom:20px;font-size:15px}.mode-info{text-align:left}.game-shell{padding:4px 8px 0}.scoreboard{min-height:64px;gap:5px}.score-block{min-width:92px;column-gap:4px}.score-block span{font-size:9px}.score-block strong{font-size:24px}.score-block small{font-size:9px}.score-divider{min-width:95px}.score-divider span{font-size:9px}.game-tools{min-height:40px}.tool{padding:5px 8px;font-size:11px;min-height:34px}.wide-label{display:none}.felt{min-height:320px;border-width:5px;border-radius:18px}.seat{min-width:0;padding:5px 6px;gap:4px}.seat-1{top:43%;left:5px}.seat-3{top:43%;right:5px}.seat-2{top:7px}.seat .avatar{width:25px;height:25px;font-size:10px}.seat-meta strong{font-size:10px}.seat-meta span{font-size:8px}.card-count{display:none}.table-center{inset:70px 62px 20px}.table-label{font-size:11px}.played .card{width:48px;height:69px}.played .card-center{font-size:27px}.played-1{left:8%}.played-3{right:8%}.bottom-area{height:160px}.hand{height:92px;max-width:100%;padding:2px 6px 0}.hand-card{width:clamp(32px,7.4vw,48px);height:clamp(66px,15vw,80px);margin-left:clamp(-19px,-3vw,-8px)}.card-corner{font-size:10px;left:3px}.card-corner small{font-size:9px}.card-center{font-size:28px}.hand-footer{font-size:10px}.dialog{padding:22px}.bid-grid{grid-template-columns:repeat(7,1fr);gap:5px}.bid-choice{height:44px}}
@media(max-width:760px){.icon{width:44px;height:44px}.tool{min-height:44px}.game-tools{min-height:50px}.bottom-area{height:210px}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:min(100%,390px);height:147px;align-content:start;justify-items:center;padding:5px 2px 0}.hand-card,.hand-card:first-child{width:min(44px,calc((100vw - 60px)/7));height:64px;margin-left:0}.hand-card.can-play:hover,.hand-card.can-play:focus-visible,.hand-card.selected.can-play{transform:translateY(-5px)}}
@media(max-width:410px){.score-divider{min-width:75px}.score-block{min-width:82px}.seat-meta span{font-size:7px}.seat-1,.seat-3{top:39%}.table-center{inset:65px 50px 18px}.played-1{left:0}.played-3{right:0}.game-tools .tool{font-size:10px;padding:5px 6px}.felt{min-height:295px}}
@media(max-height:700px) and (min-width:761px){.felt{min-height:290px}.bottom-area{height:165px}.hand{height:100px}.hand-card{height:85px}}