:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f3e9;background:#102820;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #ffce70;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.48}.app{min-height:100dvh;background:radial-gradient(circle at 50% 44%,#235442 0%,#173c30 46%,#102820 100%);display:flex;flex-direction:column}.topbar{width:min(1180px,100%);margin:auto auto 0;padding:14px 20px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-family:Georgia,serif;font-size:27px;font-weight:700;letter-spacing:.02em;color:#f9e3a6}.brand small{font:600 9px ui-sans-serif,system-ui;letter-spacing:.22em;display:block;color:#afd0bd}.topActions{display:flex;gap:8px}.iconBtn,.smallBtn{border:1px solid #ffffff40;background:#ffffff14;color:#f5f3e9;border-radius:10px;min-height:40px;padding:8px 12px}.smallBtn:hover,.iconBtn:hover{background:#ffffff26}.scorebar{width:min(760px,calc(100% - 32px));margin:6px auto 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#0b201bbd;border:1px solid #ffffff21;border-radius:17px;padding:10px 14px;box-shadow:0 10px 30px #071d1880}.scoreTeam{text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#b7cbbf}.scoreTeam strong{display:block;font-size:29px;line-height:1.1;color:#fff4d6;letter-spacing:0}.scoreDivider{color:#e5c785;font:italic 17px Georgia,serif;padding:0 13px}.status{height:27px;text-align:center;color:#f3dc9e;font-size:13px;font-weight:650;margin:7px 12px 0}.tableWrap{flex:1;width:min(1060px,100%);min-height:450px;margin:0 auto;position:relative;padding:10px 20px 0}.felt{position:absolute;inset:7px 3% 15px;border:2px solid #a3c5a444;border-radius:48% / 43%;box-shadow:inset 0 0 0 13px #ffffff08,0 25px 70px #051a1399;background:radial-gradient(ellipse,#29634d 0%,#22543f 48%,#163e30 100%)}.seat{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;color:#e8f0e4}.seat.top{top:20px;left:50%;transform:translateX(-50%);flex-direction:column}.seat.left{left:25px;top:47%;transform:translateY(-50%);flex-direction:column}.seat.right{right:25px;top:47%;transform:translateY(-50%);flex-direction:column}.seat.bottom{bottom:2px;left:50%;transform:translateX(-50%);flex-direction:column;width:100%}.seatLabel{background:#071e18d9;border:1px solid #ffffff33;border-radius:20px;padding:5px 10px;font-size:12px;white-space:nowrap}.seat.active .seatLabel{border-color:#ffd783;color:#ffe1a2;box-shadow:0 0 0 3px #f5ca6b29}.backs{display:flex}.back{width:27px;height:39px;margin-left:-13px;border:2px solid #f6e9c9;border-radius:4px;background:repeating-linear-gradient(45deg,#a25544,#a25544 3px,#743b34 3px,#743b34 6px);box-shadow:1px 2px 4px #0008}.back:first-child{margin-left:0}.tableCenter{position:absolute;z-index:2;left:50%;top:46%;transform:translate(-50%,-50%);width:min(360px,80vw);height:240px;display:flex;align-items:center;justify-content:center}.trumpBadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #e7d4a357;background:#0a2c22af;border-radius:50%;width:105px;height:105px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#efdcad;font-size:11px;letter-spacing:.13em;text-transform:uppercase}.trumpBadge strong{font:39px Georgia,serif;line-height:1}.played{position:absolute;filter:drop-shadow(0 5px 8px #07161090);animation:land .18s ease-out}.played.s0{bottom:0;left:50%;transform:translateX(-50%)}.played.s1{left:18px;top:50%;transform:translateY(-50%) rotate(-7deg)}.played.s2{top:0;left:50%;transform:translateX(-50%)}.played.s3{right:18px;top:50%;transform:translateY(-50%) rotate(7deg)}@keyframes land{from{opacity:0;scale:.88}to{opacity:1;scale:1}}.card{width:64px;height:89px;background:#fffdf6;color:#1d2923;border:2px solid #ebdfc9;border-radius:8px;box-shadow:0 4px 10px #071b14ad;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:5px;position:relative;user-select:none}.card.red{color:#b23134}.cardRank{font-family:Georgia,serif;font-size:20px;font-weight:bold;line-height:1}.cardSuit{font-family:Georgia,serif;font-size:20px;line-height:1}.cardCenter{font:34px Georgia,serif;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.78}.card.bower:after{content:'★';position:absolute;right:5px;top:3px;font-size:11px;color:#bb9155}.hand{display:flex;justify-content:center;width:100%;padding:0 12px;min-height:110px}.hand .card{width:clamp(51px,14vw,82px);height:clamp(77px,21vw,113px);margin:0 -2px;transition:transform .16s,box-shadow .16s}.hand button.card:hover:not(:disabled),.hand button.card:focus-visible{transform:translateY(-13px);box-shadow:0 15px 16px #081a15}.hand .cardRank,.hand .cardSuit{font-size:clamp(18px,5vw,24px)}.hand .cardCenter{font-size:clamp(29px,8vw,43px)}.hand button.card.legal{border-color:#ffdf95;box-shadow:0 0 0 2px #ebcb72a8,0 5px 10px #051910}.hand button.card.illegal{filter:brightness(.74)}.handNote{font-size:12px;color:#e6d5a6;text-align:center;min-height:19px}.gameFooter{width:min(1100px,100%);margin:0 auto;padding:8px 20px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b6c9ba;font-size:12px}.footerBtns{display:flex;gap:8px}.overlay{position:fixed;inset:0;z-index:10;background:#071610b8;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}.panel{background:linear-gradient(155deg,#1f4538,#10291f);border:1px solid #d4c18d66;border-radius:22px;width:min(530px,100%);max-height:min(90dvh,780px);overflow:auto;padding:26px;box-shadow:0 30px 80px #0009}.panel h1,.panel h2{font-family:Georgia,serif;color:#ffe1a3;margin:0 0 10px}.panel h1{font-size:clamp(39px,10vw,62px);letter-spacing:.02em}.panel h2{font-size:29px}.panel p{color:#d3dfd3;line-height:1.5;margin:8px 0 17px}.panel .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:#d8c58e;font-weight:700}.menuHero{text-align:center;padding:10px 0 19px}.suitRow{font:28px Georgia,serif;color:#e5b99b;letter-spacing:.35em}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.primary,.secondary,.quiet{border-radius:11px;min-height:46px;padding:10px 16px;font-weight:700}.primary{background:#f6d78f;border:1px solid #fff0c6;color:#193126;box-shadow:0 5px 0 #9a784a}.primary:hover{background:#ffe5a9}.secondary{background:#ffffff16;border:1px solid #ffffff62;color:white}.secondary:hover{background:#ffffff29}.quiet{background:transparent;border:1px solid #ffffff38;color:#d6e2d8}.wide{width:100%}.choiceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:13px}.choiceGrid button{font-size:16px}.choiceGrid .suitIcon{font:26px Georgia,serif;vertical-align:middle;margin-right:8px}.choiceGrid .red{color:#ff9592}.callout{background:#08231cb8;border-left:3px solid #efd18f;border-radius:7px;padding:10px 12px;font-size:13px;color:#e6e9d8;line-height:1.4;margin:12px 0}.ruleList{margin:12px 0;padding-left:20px;color:#dce8db;line-height:1.5}.ruleList li{margin-bottom:7px}.statGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.stat{background:#0a241b;padding:13px;border-radius:9px;color:#bcd3c3}.stat strong{display:block;color:#ffe2a6;font-size:26px}.toggleRow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0;color:#e1eadd}.toggleRow select{background:#0b281e;color:#fff;border:1px solid #9cb69e;border-radius:8px;padding:9px}.credit{font-size:12px;color:#b8cabd;border-top:1px solid #ffffff28;padding-top:14px;margin-top:22px}.toast{position:fixed;z-index:11;top:15px;left:50%;transform:translateX(-50%);background:#f4d894;color:#153126;border-radius:9px;padding:10px 15px;font-weight:700;box-shadow:0 6px 20px #0007}.hidden{display:none!important}@media(max-width:600px){.topbar{padding:9px 12px 3px}.brand{font-size:22px}.topActions .smallBtn{padding:6px 9px;min-height:35px;font-size:12px}.scorebar{padding:8px 10px}.scoreTeam{font-size:10px}.scoreTeam strong{font-size:25px}.status{font-size:12px;margin:5px 12px 0}.tableWrap{min-height:440px;padding:0}.felt{inset:10px 1% 24px;border-radius:45% / 42%}.seat.left{left:8px;top:48%}.seat.right{right:8px;top:48%}.seat.top{top:12px}.seat.bottom{bottom:2px}.seatLabel{font-size:10px;padding:4px 7px}.back{width:20px;height:30px;margin-left:-11px}.tableCenter{top:43%;height:205px;width:290px}.trumpBadge{width:82px;height:82px;font-size:9px}.trumpBadge strong{font-size:29px}.played.s1{left:0}.played.s3{right:0}.played .card{width:51px;height:73px}.played .cardCenter{font-size:27px}.played .cardRank,.played .cardSuit{font-size:16px}.hand{min-height:100px}.gameFooter{padding:3px 11px 9px;font-size:11px}.gameFooter .smallBtn{font-size:11px;padding:6px 8px}.panel{padding:22px}.choiceGrid{gap:7px}}@media(max-height:680px){.tableWrap{min-height:365px}.felt{inset:4px 2% 7px}.seat.top{top:3px}.seat.bottom{bottom:-2px}.tableCenter{height:185px;top:45%}.hand{min-height:82px}.hand .card{height:82px;width:58px}}
.upcard{display:flex;flex-direction:column;align-items:center;gap:7px;color:#efdcad;font-size:11px;text-transform:uppercase;letter-spacing:.13em}.upcard .card{transform:rotate(-5deg)}

/* Flexible hand and footer keep six dealer cards accessible at narrow widths. */
html,body{overflow-x:visible}.hand .card{min-width:0;flex:0 1 82px}.hand{gap:2px;padding:0 10px}.hand .card{margin:0}.gameFooter{flex-wrap:wrap}.footerBtns{flex-wrap:wrap;justify-content:flex-end}.lastTrick{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0}.lastTrick>div{display:flex;flex-direction:column;align-items:center;gap:6px}.lastTrick span{font-size:12px}.toggleRow{flex-wrap:wrap}.toggleRow select{max-width:100%}@media(max-width:360px){.tableCenter{width:calc(100% - 32px)}.seat.left,.seat.right{top:36%}.seatLabel{max-width:100%;white-space:normal;text-align:center}.seat.left,.seat.right{max-width:82px}.hand .cardRank,.hand .cardSuit{font-size:18px}.hand .cardCenter{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:600px){.hand:has(.card:nth-child(6)){flex-wrap:wrap;gap:5px}.hand:has(.card:nth-child(6)) .card{flex:0 0 calc((100% - 10px)/3);max-width:65px;height:78px}.tableWrap:has(.hand .card:nth-child(6)){min-height:520px}}