@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#f5eedf;background:#12212a;--gold:#eabe68;--ink:#1a292f;--muted:#c9bfae;--blue:#42b9f5;--red:#f16b60;--line:#ffffff26;--ease:cubic-bezier(.2,.8,.2,1);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100dvh;background:radial-gradient(ellipse at top,#314454,#10202a 80%)}
button,input,select{font:inherit}
button{cursor:pointer;touch-action:manipulation;border:0;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffe39d;outline-offset:4px}
[hidden]{display:none!important}
.game-shell{max-width:1180px;margin:auto;padding:18px 30px max(18px,env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;height:68px}
.round-button{width:46px;height:46px;border:1px solid #bfc7c536;border-radius:13px;background:linear-gradient(#364b57,#1d303d);color:#f1dcc0;box-shadow:0 3px 0 #07141a;font-size:24px}
.round-button[aria-pressed=true]{color:var(--gold);border-color:#eabe6880}
.wordmark{text-align:center}
.wordmark>span{font-size:10px;letter-spacing:4px;font-weight:700;color:var(--gold)}
.wordmark h1{font-family:'Libre Baskerville',Georgia,serif;font-size:27px;letter-spacing:-.7px;margin:2px 0 0;font-weight:400}
.matchbar{display:flex;align-items:center;justify-content:space-between;padding:13px 5px 12px;font-size:11px;font-weight:700;letter-spacing:1.4px;color:#b5c4cb}
.tabletop{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;grid-template-rows:auto 88px minmax(160px,220px) 134px auto 112px auto auto;min-height:740px;padding:21px 45px 12px;border:7px solid #352a25;border-radius:26px;background-image:linear-gradient(#241c1880,#201715b0),url('assets/wood-table.png');background-color:#483b31;background-size:cover;background-position:center;box-shadow:0 3px 0 #665544,inset 0 0 0 2px #9b806552,inset 0 0 70px #170d09cc,0 23px 48px #020b1266;overflow:hidden}
.tabletop:before{content:'';position:absolute;inset:7px;border:1px solid #c8b29324;border-radius:16px;pointer-events:none;z-index:-1}
body[data-theme=club] .tabletop{background-image:radial-gradient(ellipse,#256752,#103e34);border-color:#253c35}
body[data-theme=midnight] .tabletop{background-image:radial-gradient(ellipse,#294657,#152737);border-color:#15232d}
.opponent-seat{display:flex;align-items:center;justify-content:center;gap:11px;min-height:47px}
.avatar{width:44px;height:44px;display:grid;place-content:center;background:linear-gradient(#9d6551,#5e3830);border:2px solid #d09c77;border-radius:50%;font-size:29px;color:#f0d1ac;box-shadow:0 3px 8px #0006}
.seat-info{display:flex;flex-direction:column;gap:4px}
.seat-info strong{font-size:15px}
.seat-info span{font-size:12px;color:#d0bfa8}
.dealer-chip{display:inline-grid;place-content:center;font-size:11px;font-weight:700;background:#f0d18c;color:#543c26;border:2px solid #b3833d;border-radius:50%;width:23px;height:23px;box-shadow:0 2px 3px #0003}
.score-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:72px;padding:7px 12px;border:1px solid #ffffff4a;border-radius:12px;background:linear-gradient(#183c54,#10283b);box-shadow:0 3px 6px #0005}
.score-pill>span{font-size:27px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.score-pill small{font-size:9px;letter-spacing:1px;color:#b1d3e3}
.cpu-score{background:linear-gradient(#743b33,#442820);margin-left:4px}
.cpu-score small{color:#e9bca6}
.point-pop{position:absolute;right:-20px;top:-6px;font-size:22px;color:var(--gold);font-style:normal;font-weight:700;pointer-events:none;text-shadow:0 2px 4px #0008;opacity:0}
.opponent-hand{position:relative;display:flex;justify-content:center;align-items:center;padding:7px 0 2px;min-height:75px}
.card{--w:73px;width:var(--w);height:calc(var(--w)*1.4);position:relative;flex:0 0 var(--w);border-radius:7px;background:linear-gradient(115deg,#fffefa,#f1efe9);box-shadow:0 3px 0 #b2ac9b,0 5px 9px #0005;border:1px solid #e6dfce;color:#16222b;display:inline-flex;align-items:center;justify-content:center;user-select:none;vertical-align:middle;padding:0}
.card.red{color:#bd3436}
.card .corner{position:absolute;top:5px;left:6px;font:700 21px Georgia,serif;line-height:1;display:flex;flex-direction:column;gap:1px;align-items:center}
.card .corner.bottom{inset:auto 6px 5px auto;transform:rotate(180deg)}
.card .tiny-suit{font-size:15px}
.card .center-suit{font-size:32px;line-height:1}
.card .court-mark{font-family:Georgia,serif;font-size:32px;border:1px solid currentColor;padding:5px 3px;opacity:.88;line-height:1}
.card .pip-grid{position:absolute;inset:20% 25%;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:center;justify-items:center;line-height:1;font-size:19px}
.card .pip-grid.single{grid-template-columns:1fr;font-size:28px}
.card .pip{display:block}
.card.back{border:3px solid #ede3ca;background:repeating-linear-gradient(45deg,#41638200 0 4px,#aec1cb30 4px 5px),repeating-linear-gradient(-45deg,#41638200 0 4px,#aec1cb30 4px 5px),#25435c;box-shadow:0 3px 0 #bbb092,0 5px 8px #0006}
.back .back-mark{border:1px solid #aabfc7;border-radius:50%;width:33px;height:33px;display:grid;place-content:center;font-size:22px;color:#d6dbca;background:#25435c}
.opponent-hand .card{--w:48px;margin-left:-16px;transform:rotate(calc(var(--tilt)*1deg));transform-origin:50% 110%;border-width:2px}
.opponent-hand .card:first-child{margin-left:0}
.opponent-hand .back-mark{width:25px;height:25px;font-size:16px}
.board-zone{position:relative;align-self:center;margin:0 6%;min-width:0}
.board-shadow{filter:drop-shadow(0 9px 4px #170d0980)}
#board{width:100%;display:block;overflow:visible}
#board .peg{filter:drop-shadow(0 3px 2px #0009)}
.board-caption{display:flex;justify-content:space-between;align-items:center;padding:0 5px;font-size:10px;font-weight:700;letter-spacing:1.1px;color:#e4d3b9;margin-top:-2px}
.board-caption>span{display:flex;align-items:center;gap:5px}
.blue-dot,.red-dot{display:inline-block;border-radius:50%;width:7px;height:7px;background:var(--blue);box-shadow:0 0 8px #4bbcfa66}
.red-dot{background:var(--red);box-shadow:0 0 8px #f16b6066}
.middle-zone{display:grid;grid-template-columns:115px 1fr 100px;gap:20px;align-items:center;max-width:720px;width:100%;margin:auto}
.cut-pocket{position:relative;min-height:101px;padding-left:36px}
.deck-stack{position:absolute;top:10px;left:0;transform:rotate(-8deg)}
.deck-stack .card,.starter-slot .card{--w:53px}
.deck-stack .card{box-shadow:2px 2px 0 #c0b193,4px 4px 0 #dbcfae,6px 6px 0 #88735c,0 7px 10px #0006}
.starter-slot{position:relative;transform:rotate(5deg);z-index:1;min-height:78px}
.pocket-label{display:block;font-size:10px;font-weight:700;letter-spacing:1.4px;color:#d4c1a6;text-align:center;margin-top:7px}
.cut-pocket .pocket-label{margin-left:-36px}
.play-pocket{display:flex;align-items:center;justify-content:center;position:relative;gap:18px;min-width:0;min-height:120px}
.count-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:75px;flex:none;background:#112a35d6;border:1px solid #a1c4ce52;border-radius:15px;box-shadow:0 4px 9px #0004}
.count-badge span{font-size:9px;letter-spacing:1.4px;color:#aec7d0}
.count-badge strong{font-size:30px;line-height:1.2;font-variant-numeric:tabular-nums}
.count-badge small{font-size:10px;color:#9eacb5}
.play-cards{display:flex;align-items:center;justify-content:center;min-width:80px;min-height:86px}
.play-cards .card{--w:55px;margin-left:-31px;transform:rotate(calc(var(--tilt,0)*1deg))}
.play-cards .card:first-child{margin-left:0}
.play-cards .card:last-child{z-index:3}
.play-cards .card .corner,.starter-slot .card .corner{font-size:17px}
.play-cards .card .tiny-suit,.starter-slot .card .tiny-suit{display:none}
.play-cards .card .center-suit,.starter-slot .card .center-suit{font-size:24px}
.play-cards .card .pip-grid,.starter-slot .card .pip-grid{font-size:14px;inset:23% 27%}
.crib-pocket{min-height:95px;text-align:center}
.crib-stack{height:75px;position:relative;width:56px;margin:auto}
.crib-stack .card{--w:47px;position:absolute;inset:0;transform:translate(calc(var(--i)*2px),calc(var(--i)*2px)) rotate(9deg)}
.crib-stack .card .back-mark{font-size:17px;width:25px;height:25px}
.crib-empty{display:grid;place-content:center;border:1px dashed #e1cdaa55;border-radius:6px;height:66px;width:47px;color:#e1cdaa88;font-size:23px;transform:rotate(9deg)}
.score-toast{position:absolute;top:-3px;left:50%;transform:translate(-50%,-70%);white-space:nowrap;font-size:15px;font-weight:700;color:#ffe2a0;text-shadow:0 2px 5px #000;min-height:20px;pointer-events:none}
.player-seat{display:flex;align-items:center;gap:13px;max-width:610px;width:100%;margin:1px auto 6px}
.player-name{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.player-name>strong{font-size:17px}
.player-name>span:last-child{font-size:12px;color:#d7c6ae;flex-basis:100%}
.hint-button{color:#f5d593;background:#30271fd9;border:1px solid #c6a46a8c;border-radius:9px;padding:9px 14px;min-height:42px;font-size:14px}
.hint-button>span{margin-right:6px}
.hint-button:disabled{opacity:.4}
.your-hand{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:109px;padding:5px 10px 0}
.hand-slot{flex:0 0 70px;width:70px;position:relative;display:flex;justify-content:center;transform:translateY(var(--fan-y)) rotate(var(--fan-r));transform-origin:50% 150%;transition:transform .24s var(--ease)}
.hand-slot .card{--w:73px;transition:transform .2s var(--ease),filter .2s,box-shadow .2s}
.hand-slot.selected{transform:translateY(calc(var(--fan-y) - 17px)) rotate(var(--fan-r))}
.hand-slot.selected .card{box-shadow:0 0 0 3px #f1cc74,0 12px 18px #0008}
.hand-slot.hinted .card{box-shadow:0 0 0 3px #7cdcff,0 0 22px #6edaff88}
.your-hand .card:disabled{filter:brightness(.69)}
.your-hand .card.readonly{filter:none}
.selected-check{position:absolute;bottom:-10px;left:calc(50% - 10px);background:#ecc66d;color:#413418;width:20px;height:20px;border-radius:50%;font-weight:700;line-height:20px;font-size:12px;z-index:4}
.play-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:780px;width:100%;margin:18px auto 8px;min-height:69px}
.prompt h2{font-family:'Libre Baskerville',Georgia,serif;font-size:18px;line-height:1.4;font-weight:400;margin:0 0 5px}
.prompt p{font-size:14px;line-height:1.45;color:#d6c5ad;margin:0}
.gold-button{background:linear-gradient(#f8dc97,#deb15b);color:#40341f;border:1px solid #ffe0a0;border-bottom:3px solid #967037;box-shadow:0 4px 12px #0003,inset 0 1px 0 #fff5;border-radius:10px;font-weight:700;font-size:15px;min-height:48px;padding:13px 22px;white-space:nowrap;transition:transform .15s,filter .15s;flex-shrink:0}
.gold-button:not(:disabled):active{transform:translateY(2px)}
.gold-button:disabled{background:linear-gradient(#948674,#786b59);color:#f1e6d080;border-color:#a89c8155;box-shadow:none}
.gold-button.waiting{background:#182d37a8;border:1px solid #88a6b633;color:#c1cace;font-weight:500}
.table-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #baa28635;gap:12px;padding-top:10px;margin-top:4px;font-size:10px;color:#bfad95;letter-spacing:1px}
.table-bottom button{min-height:30px;background:none;color:#d7c2a4;font-size:12px;padding:2px;letter-spacing:0}
.table-bottom>span{font-size:10px}
.eyebrow{display:block;font-size:11px;letter-spacing:2px;color:var(--gold);font-weight:700}
dialog{background:linear-gradient(155deg,#30424a,#172a33);color:#f5eedf;max-width:500px;width:calc(100% - 28px);max-height:90dvh;border:1px solid #b3986870;border-radius:20px;padding:25px;box-shadow:0 20px 100px #000a;overflow:auto}
dialog::backdrop{background:#061219b8;backdrop-filter:blur(5px)}
dialog[open]{animation:dialog-in .24s var(--ease)}
.dialog-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.dialog-title h2{font-family:'Libre Baskerville',Georgia,serif;font-size:23px;font-weight:400;line-height:1.3;margin:0}
.dialog-title .eyebrow{margin-bottom:8px}
.dialog-close{width:38px;height:38px;min-width:38px;border-radius:50%;background:#09182066;color:#d9d6c9;border:1px solid var(--line);font-size:25px;line-height:1}
.dialog-intro,dialog p{font-size:15px;line-height:1.6;color:#d4d6cc}
.dialog-intro{margin-top:0}
.subtle{font-size:12px!important;color:#a9b9b9!important}
dialog>.gold-button{width:100%;margin-top:8px}
.menu-dialog{max-width:390px;padding:27px}
.menu-dialog>.dialog-close{position:absolute;right:15px;top:15px}
.menu-brand{text-align:center;font-size:38px;color:var(--gold);margin:3px 0 24px}
.menu-brand>span{display:block;letter-spacing:4px;font:700 10px 'DM Sans';margin-top:9px}
.menu-brand h2{font:400 27px 'Libre Baskerville',Georgia,serif;margin:8px 0;color:#f5eedf}
.menu-brand p{font-size:13px;margin:10px 0}
.menu-row{display:flex;flex-direction:column;gap:4px;text-align:left;padding:16px 2px;color:#eae9df;background:transparent;border-bottom:1px solid #ffffff15;width:100%;font-size:16px}
.menu-row small{font-size:12px;color:#a8babd}
.menu-footer{text-align:center;font-size:12px;color:#9faea9;margin-bottom:0}
.plain-button{padding:12px;background:none;color:#d8c391;font-size:14px;min-height:44px}
fieldset{border:0;margin:22px 0;padding:0}
legend{font-size:13px;font-weight:700;color:#c2d0d1;margin-bottom:12px}
.choice-grid{display:grid;gap:8px}
.choice-grid label{cursor:pointer}
.choice-grid input{position:absolute;opacity:0;width:1px;height:1px}
.choice-grid label>span{display:flex;flex-direction:column;gap:7px;background:#101f284d;border:1px solid #879caa40;border-radius:10px;padding:13px 11px;min-height:70px}
.choice-grid b{font-size:14px;font-weight:600}
.choice-grid small{font-size:12px;color:#adc0c5;line-height:1.4}
.choice-grid input:checked+span{background:#c59d3630;border-color:#eac474;box-shadow:inset 0 0 0 1px #eac474}
.choice-grid input:focus-visible+span{outline:3px solid #eac474;outline-offset:3px}
.modes{grid-template-columns:repeat(3,1fr)}
.levels{grid-template-columns:repeat(2,1fr)}
.theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.theme-choice{background:#122831;border:1px solid #ffffff20;color:#ccd8d7;font-size:12px;border-radius:10px;padding:5px 5px 10px}
.theme-choice.selected{border-color:var(--gold);color:var(--gold)}
.theme-swatch{display:block;height:55px;border-radius:6px;margin-bottom:9px}
.theme-swatch.walnut{background:#684b37 url('assets/wood-table.png') center/cover}
.theme-swatch.club{background:radial-gradient(#39876b,#124a3d)}
.theme-swatch.midnight{background:radial-gradient(#436377,#132b3e)}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 0;border-top:1px solid #fff2}
.setting-row>span{display:flex;flex-direction:column;gap:5px}
.setting-row strong{font-size:14px;font-weight:500}
.setting-row small{font-size:12px;color:#a9bdc1}
.setting-row input{width:42px;height:25px;accent-color:var(--gold);flex:none}
.setting-row select{background:#16303a;color:#e4e9da;border:1px solid #899b944d;border-radius:7px;padding:8px;font-size:13px;max-width:120px}
.count-dialog{max-width:470px}
.count-points{font-size:43px;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.count-cards{display:flex;justify-content:center;gap:9px;margin:28px 0 13px;min-height:96px}
.count-cards .card{--w:63px;transition:transform .2s,box-shadow .2s}
.count-cards .starter{outline:2px solid var(--gold);outline-offset:3px;margin-left:7px}
.count-cards .highlight{transform:translateY(-9px);box-shadow:0 0 0 3px #62ceeb,0 8px 12px #0006}
.starter-note{font-size:12px!important;text-align:center;color:#acbfc1!important}
.count-breakdown{display:flex;flex-direction:column;gap:5px;margin:16px 0}
.score-row{background:#0b1b234f;border:1px solid #ffffff15;border-radius:9px;color:#dce5db;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;min-height:42px;font-size:14px}
.score-row.selected{border-color:#62ceeb;background:#6ac4d41c}
.score-row strong{color:var(--gold);font-size:16px}
.score-row small{font-size:11px;color:#9eb1b5}
.count-result{font-size:14px!important;text-align:center;min-height:20px}
.claim-row{display:flex;gap:10px;margin-top:12px}
.claim-row input{background:#0c202b;color:#f8ebcd;border:1px solid #79919d;border-radius:10px;width:90px;min-width:0;text-align:center;font-size:24px;appearance:textfield}
.claim-row .gold-button{flex:1}
.claim-row input::-webkit-inner-spin-button{display:none}
#manual-count label{font-size:15px}
#claim-message{font-size:13px}
.history-list{max-height:60dvh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.history-item{border-bottom:1px solid #fff2;padding:10px 0;font-size:14px;line-height:1.4}
.history-item:first-child{color:var(--gold)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.stat{padding:18px 10px;background:#0a202a7a;border:1px solid #b3c2c722;border-radius:12px;text-align:center}
.stat strong{display:block;font-size:29px;color:var(--gold)}
.stat span{font-size:12px;color:#adbec2;display:block;margin-top:5px}
.rules{padding-left:20px;font-size:14px;line-height:1.6;color:#ced8d3}
.rules li{padding-left:5px;margin:12px 0}
.help-scores{display:grid;gap:9px;font-size:13px;background:#081d275c;padding:15px;border-radius:10px}
.help-scores>span{display:flex;justify-content:space-between;gap:12px}
.help-scores b{color:var(--gold);white-space:nowrap}
dialog a{color:var(--gold);font-size:14px}
.win-dialog{text-align:center;max-width:420px;padding:34px 25px}
.win-emblem{font-size:60px;color:var(--gold);text-shadow:0 5px 30px #edbf6066}
.win-dialog h2{font:400 28px 'Libre Baskerville',Georgia,serif;margin:17px 0}
.win-dialog .eyebrow{margin-top:12px}
#win-scores{display:flex;justify-content:center;gap:30px;font-size:37px;font-weight:700;margin:24px 0}
#win-scores small{display:block;font-size:12px;font-weight:400;color:#abc2c3;margin-top:5px}
#win-summary{font-size:13px}
#motion-layer,#celebration-layer{position:absolute;inset:0;pointer-events:none;z-index:25;overflow:hidden}
.flying-card{position:absolute;transform-origin:center;z-index:99}
.confetti{position:absolute;width:7px;height:12px;border-radius:2px;top:-20px}
#notice{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#102b37f5;color:#f8e3b4;border:1px solid #cfab6580;border-radius:12px;padding:13px 20px;font-size:14px;z-index:100;pointer-events:none;opacity:0;max-width:90vw;box-shadow:0 5px 20px #0005;transition:.2s}
#notice.visible{opacity:1;transform:translate(-50%,0)}
.noscript{text-align:center;padding:20px;background:#edcf90;color:#222}
.busy .your-hand button,.busy #main-action{pointer-events:none}
.empty-pile{font-size:28px;color:#d8caae35;letter-spacing:8px}
.round-summary{font:400 17px Georgia,serif;color:#ecd8ac;text-align:center;line-height:1.5}
.round-summary small{display:block;font:12px 'DM Sans';color:#cab89c;margin-top:7px}
@keyframes dialog-in{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes toast-in{
  0%{opacity:0;transform:translate(-50%,0)}
  20%,75%{opacity:1;transform:translate(-50%,-70%)}
  100%{opacity:0;transform:translate(-50%,-100%)}
}
@keyframes peg-glow{
  50%{filter:drop-shadow(0 0 7px #ffeb9f)}
}
@keyframes count-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@media(min-width:1000px){
  .tabletop{grid-template-rows:auto 82px auto 116px auto 112px auto auto;min-height:740px}
  .board-zone{margin:0 auto;width:min(76%,680px)}
  .opponent-hand .card{--w:50px}
}
@media(max-width:800px){
  .game-shell{padding:10px 16px 16px}
  .topbar{height:62px}
  .wordmark h1{font-size:24px}
  .tabletop{padding:18px 22px 10px;border-width:5px;grid-template-rows:auto 74px 172px 116px auto 107px auto auto;min-height:0;border-radius:21px}
  .board-zone{margin:0 1%}
  .middle-zone{grid-template-columns:95px 1fr 72px;gap:9px}
  .cut-pocket{padding-left:29px}
  .cut-pocket .pocket-label{margin-left:-29px}
  .play-pocket{gap:12px}
  .crib-pocket{min-height:85px}
  .crib-stack{height:68px}
  .your-hand{min-height:107px}
  .play-controls{gap:16px;flex-wrap:wrap}
  .prompt{min-width:0}
  .gold-button{padding:12px 18px}
  .play-controls>.gold-button{margin-left:auto}
}
@media(max-width:480px){
  .game-shell{padding:6px 8px max(9px,env(safe-area-inset-bottom))}
  .topbar{height:58px;padding:0 5px}
  .wordmark>span{font-size:9px;letter-spacing:3px}
  .wordmark h1{font-size:22px}
  .round-button{height:40px;width:40px;border-radius:11px;font-size:22px}
  .matchbar{font-size:9px;letter-spacing:.9px;padding:9px 5px 11px}
  .tabletop{grid-template-rows:44px 66px 133px 103px 49px 99px auto 32px;padding:12px 10px 8px;border-width:4px;border-radius:18px;min-height:655px}
  .opponent-seat{gap:8px;min-height:44px}
  .avatar{width:36px;height:36px;font-size:24px}
  .seat-info strong{font-size:13px}
  .seat-info span{font-size:11px}
  .score-pill{min-width:62px;padding:7px 9px;border-radius:10px;gap:5px}
  .score-pill>span{font-size:24px}
  .score-pill small{font-size:8px}
  .opponent-hand .card{--w:39px;margin-left:-13px}
  .opponent-hand .back-mark{width:21px;height:21px;font-size:14px}
  .opponent-hand{min-height:64px;padding-top:5px}
  .board-zone{margin:0}
  .board-caption{font-size:8px;letter-spacing:.8px;margin-top:2px}
  .board-caption .blue-dot,.board-caption .red-dot{width:6px;height:6px}
  .middle-zone{grid-template-columns:71px minmax(0,1fr) 54px;gap:3px}
  .cut-pocket{padding-left:23px;min-height:86px}
  .deck-stack{top:8px}
  .deck-stack .card,.starter-slot .card{--w:39px;border-radius:4px}
  .deck-stack .back-mark{width:23px;height:23px;font-size:15px}
  .starter-slot{min-height:60px}
  .starter-slot .card .corner{font-size:13px;top:4px;left:4px}
  .starter-slot .card .corner.bottom{inset:auto 4px 4px auto}
  .starter-slot .card .center-suit{font-size:21px}
  .cut-pocket .pocket-label{margin-left:-23px}
  .pocket-label{font-size:8px;letter-spacing:.8px;margin-top:5px}
  .play-pocket{gap:8px;min-height:100px}
  .count-badge{width:40px;height:61px;border-radius:10px}
  .count-badge span{font-size:7px;letter-spacing:.7px}
  .count-badge strong{font-size:25px}
  .count-badge small{font-size:8px}
  .play-cards{min-width:64px;min-height:74px}
  .play-cards .card{--w:43px;margin-left:-28px;border-radius:5px}
  .play-cards .card .corner{font-size:14px;top:4px;left:4px}
  .play-cards .card .corner.bottom{inset:auto 4px 4px auto}
  .play-cards .card .center-suit{font-size:22px}
  .play-cards .card .pip-grid{font-size:12px;inset:22% 25%}
  .play-cards .card .court-mark,.starter-slot .card .court-mark{font-size:21px;padding:3px}
  .crib-stack{height:59px;width:38px}
  .crib-stack .card{--w:35px;border-width:2px;border-radius:4px}
  .crib-stack .card .back-mark{width:19px;height:19px;font-size:13px}
  .crib-empty{height:51px;width:35px;font-size:18px}
  .crib-pocket{min-height:76px}
  .score-toast{font-size:12px;top:6px;max-width:195px;white-space:normal;text-align:center;width:max-content}
  .player-seat{gap:9px;margin:3px 0 7px}
  .player-name{gap:5px}
  .player-name>strong{font-size:14px}
  .player-name>span:last-child{font-size:10px}
  .dealer-chip{width:20px;height:20px;font-size:10px}
  .hint-button{padding:8px 10px;min-height:37px;font-size:12px}
  .your-hand{min-height:97px;padding:10px 0 0}
  .hand-slot{flex-basis:calc((100vw - 54px)/6);width:calc((100vw - 54px)/6);max-width:57px}
  .hand-slot .card{--w:clamp(44px,13.4vw,60px);border-radius:5px}
  .your-hand .card .corner{font-size:18px;top:4px;left:5px}
  .your-hand .card .corner.bottom{inset:auto 5px 4px auto}
  .your-hand .card .tiny-suit{display:none}
  .your-hand .card .center-suit{font-size:25px}
  .your-hand .card .pip-grid{font-size:15px}
  .your-hand .card .court-mark{font-size:25px;padding:3px}
  .hand-slot.selected{transform:translateY(calc(var(--fan-y) - 13px)) rotate(var(--fan-r))}
  .play-controls{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;margin:16px 0 7px;min-height:98px}
  .prompt{text-align:center}
  .prompt h2{font-size:15px;line-height:1.4;margin-bottom:4px}
  .prompt p{font-size:12px;line-height:1.45}
  .play-controls>.gold-button{margin:0;min-height:43px;font-size:14px;padding:10px 15px}
  .table-bottom{gap:7px;padding-top:5px;margin-top:6px}
  .table-bottom button{font-size:10px}
  .table-bottom>span{font-size:8px;letter-spacing:.7px}
  .point-pop{font-size:19px;right:-15px}
  dialog{padding:21px 18px;border-radius:17px}
  .dialog-title h2{font-size:21px}
  .count-cards{gap:7px;margin-top:23px;min-height:85px}
  .count-cards .card{--w:51px}
  .count-cards .card .corner{font-size:17px}
  .count-cards .card .tiny-suit{display:none}
  .count-cards .card .pip-grid{font-size:14px}
  .count-cards .card .court-mark{font-size:24px}
  .count-cards .card .center-suit{font-size:23px}
  .count-points{font-size:37px}
  .modes{gap:6px}
  .choice-grid label>span{padding:12px 9px}
  .choice-grid b{font-size:13px}
  .choice-grid small{font-size:11px}
  .round-summary{font-size:14px}
  .round-summary small{font-size:11px}
}
@media(max-width:360px){
  .tabletop{padding-left:8px;padding-right:8px;grid-template-rows:42px 62px 112px 100px 46px 89px auto 30px;min-height:624px}
  .wordmark h1{font-size:20px}
  .hand-slot{flex-basis:43px}
  .hand-slot .card{--w:45px}
  .your-hand{min-height:86px}
  .your-hand .card .corner{font-size:16px}
  .your-hand .card .pip-grid{font-size:13px}
  .table-bottom button{font-size:9px}
  .count-cards{gap:5px}
  .count-cards .card{--w:44px}
  .play-cards .card{margin-left:-30px}
  .count-badge{width:34px}
  .play-pocket{gap:5px}
}
@media(max-height:550px) and (orientation:landscape){
  .game-shell{padding:4px 12px 8px;max-width:1100px}
  .topbar{height:42px}
  .wordmark h1{font-size:20px}
  .wordmark>span{display:none}
  .round-button{width:34px;height:34px;font-size:19px}
  .matchbar{padding:6px 4px;font-size:9px}
  .tabletop{grid-template-columns:100px 1fr 100px;grid-template-rows:32px 130px 80px 48px;min-height:300px;padding:10px 19px;column-gap:10px}
  .opponent-seat{grid-column:3;grid-row:1/3;align-self:start;flex-wrap:wrap;gap:5px;text-align:center}
  .opponent-seat .avatar{display:none}
  .opponent-hand{grid-column:2;grid-row:1;min-height:38px;padding:0}
  .opponent-hand .card{--w:30px}
  .opponent-hand .back-mark{width:17px;height:17px;font-size:12px}
  .board-zone{grid-column:2;grid-row:2;margin:0 auto;max-width:490px;width:100%}
  .board-caption{font-size:8px}
  .middle-zone{grid-column:1/4;grid-row:2;grid-template-columns:80px 1fr 65px;align-self:end;margin-bottom:-5px;pointer-events:none}
  .play-pocket{margin-left:auto;width:130px;transform:translateX(70px)}
  .cut-pocket{min-height:77px}
  .deck-stack .card,.starter-slot .card{--w:39px}
  .crib-pocket{display:none}
  .player-seat{grid-column:1;grid-row:3;align-self:center;flex-wrap:wrap;justify-content:center;gap:4px}
  .player-seat .hint-button{position:absolute;right:20px;bottom:75px}
  .player-name{flex:none}
  .player-name>span:last-child{display:none}
  .your-hand{grid-column:2;grid-row:3;min-height:80px}
  .hand-slot{flex-basis:49px}
  .hand-slot .card{--w:51px}
  .your-hand .card .tiny-suit{display:none}
  .your-hand .card .corner{font-size:17px}
  .your-hand .card .pip-grid{font-size:14px}
  .play-controls{grid-column:1/4;grid-row:4;flex-direction:row;flex-wrap:nowrap;margin:3px 0 0;min-height:43px;align-items:center}
  .prompt{text-align:left}
  .prompt h2{font-size:14px}
  .prompt p{font-size:11px}
  .play-controls .gold-button{font-size:12px;padding:8px 17px;min-height:38px;margin-left:auto}
  .table-bottom{display:none}
  .count-badge{width:36px;height:55px}
  .count-badge strong{font-size:22px}
  .count-badge span{font-size:7px}
  .play-cards .card{--w:39px;margin-left:-27px}
  .score-pill>span{font-size:21px}
  .score-pill{min-width:60px;padding:5px 8px}
  .seat-info strong{font-size:12px}
  .seat-info span{font-size:10px}
  .tabletop:before{inset:4px}
  .opponent-seat .score-pill{margin:5px 0}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(hover:hover){
  .gold-button:not(:disabled):hover{filter:brightness(1.08)}
  .your-hand .hand-slot:not(.selected):has(button:not(:disabled)):hover{transform:translateY(calc(var(--fan-y) - 9px)) rotate(var(--fan-r))}
  .menu-row:hover{color:var(--gold)}
}
/* The classic orange-wood club, based on the supplied app reference. */
body{background:#6a2913}
.game-shell{max-width:1180px}
.topbar .wordmark h1{color:#ffe3a0;text-shadow:0 2px 0 #852817}
.tabletop{background-color:#ae501f;background-image:linear-gradient(#e980302b,#51200955),url('assets/wood-table.png');background-blend-mode:screen,luminosity;border-color:#4b2318;box-shadow:0 3px 0 #bb8d42,inset 0 0 0 2px #f8c66880,inset 0 0 70px #3a160999,0 23px 48px #20070055}
.round-button{background:linear-gradient(#8c3820,#562017);border-color:#b86a3480;color:#ffe3a0}
.lobby{min-height:100dvh;max-width:none;margin:0 auto;padding:28px max(30px,calc((100vw - 1150px)/2));display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(#e888363d,#54230550),url('assets/wood-table.png') center/cover,#b85622;background-blend-mode:screen,luminosity,normal;position:relative;overflow:hidden}
.lobby-top{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:16px}
.profile-badge{background:#082c3d;border:2px solid #e7b156;outline:2px solid #092b3d;border-radius:9px;padding:9px 18px;box-shadow:0 5px 12px #3c180844}
.profile-badge strong{display:block;font:700 19px Georgia,serif;color:#fff4d5}
.profile-badge span{display:block;font-size:12px;color:#cdb781;margin-top:3px}
.lobby-logo{text-align:center;padding:17px 58px 22px;border-radius:40px;background:linear-gradient(#fffbb8,#ffc946 45%,#f4a721 80%,#ffe186);border:3px solid #ffeab0;box-shadow:0 8px 0 #934510,0 12px 0 #562907,0 18px 30px #45160055,inset 0 4px 7px #ffffe8;transform:rotate(-1deg);margin:28px 0 12px}
.logo-small{font:700 12px 'DM Sans';letter-spacing:7px;color:#974718}
.lobby-logo h1{font:bold clamp(45px,8vw,86px) Georgia,serif;color:#b51d10;margin:0;line-height:1.15;text-shadow:1px 1px 0 #fff5c2,-1px -1px 0 #fff5c2,0 3px 0 #6c170c,0 6px 3px #6c170c88;-webkit-text-stroke:.5px #ffeeb1}
.logo-suits{font-size:18px;color:#904011;letter-spacing:14px;padding-left:14px}
.lobby-actions{display:flex;justify-content:center;gap:100px;margin:22px 0 10px}
.lobby-choice{background:none;display:flex;flex-direction:column;align-items:center;color:#fff5dd;padding:8px 12px;min-width:190px;transition:transform .18s}
.lobby-choice:hover{transform:translateY(-5px)}
.choice-medallion{width:135px;height:135px;display:grid;place-content:center;border-radius:50%;background:radial-gradient(circle at 35% 22%,#fffce5 0,#ffdf58 25%,#c2890e 57%,#f5c440 85%);border:5px solid #d18b15;outline:3px solid #5a2a0c;box-shadow:inset 0 0 0 3px #fff3a4,0 8px 0 #602609,0 12px 20px #3c110970;font-size:87px;color:#a02b16;text-shadow:2px 3px 0 #5f2110;line-height:1}
.choice-medallion.dual{font-size:62px;letter-spacing:-22px;padding-right:16px;color:#075a9a;text-shadow:2px 3px 0 #053453}
.lobby-choice strong{font-size:24px;margin-top:18px;text-shadow:0 2px 0 #271609,2px 0 0 #271609,-2px 0 0 #271609}
.lobby-choice small{font-size:13px;color:#ffe1ba;margin-top:7px}
.lobby-bottom{display:flex;justify-content:space-between;align-items:center;gap:30px;align-self:stretch;margin-top:24px}
.red-button{background:linear-gradient(#97341d,#6c221a);border:2px solid #cf682d;color:#fff1d2;border-radius:10px;min-height:48px;padding:11px 20px;font-size:17px;font-weight:700;box-shadow:0 4px 0 #49220d}
.lobby-count-badge{display:flex;align-items:center;gap:15px;background:#082c3d;border:2px solid #e1ae52;border-radius:9px;padding:12px 23px;box-shadow:0 4px 0 #6b3210}
.lobby-count-badge>b{color:#ffd870;font-size:38px;line-height:1}
.lobby-count-badge span{color:#ffda7e;font-weight:700;font-size:16px}
.lobby-count-badge small{font-size:11px;color:#c8d0cc;display:block;margin-top:5px;font-weight:400}
.lobby-resume{min-width:230px}
.handoff-dialog{text-align:center;padding:35px 25px}
.handoff-icon{font-size:60px;color:var(--gold)}
.handoff-dialog h2{font:400 25px Georgia,serif}
.privacy-mask .your-hand,.privacy-mask .opponent-hand{visibility:hidden}
.privacy-mask .tabletop{filter:blur(8px)}
#player-name-fields{display:flex;gap:14px}
#player-name-fields label{font-size:13px;flex:1;min-width:0;color:#d1d7cd}
#player-name-fields input{display:block;width:100%;margin-top:8px;border-radius:8px;background:#10232c;border:1px solid #7897a05c;color:#fff;padding:10px;font-size:15px}
.theme-swatch.walnut{background-blend-mode:luminosity;background-color:#b95d26}
body[data-theme=club],body[data-theme=midnight]{background:#142e32}
@media(max-width:600px){
  .lobby{padding:20px 18px max(22px,env(safe-area-inset-bottom));gap:17px;justify-content:flex-start}
  .lobby-top{margin-bottom:20px}
  .profile-badge{padding:8px 11px}
  .profile-badge strong{font-size:16px}
  .profile-badge span{font-size:10px}
  .lobby-logo{padding:16px 29px 19px;border-radius:29px;margin:22px 0 28px}
  .lobby-logo h1{font-size:53px}
  .logo-small{font-size:10px}
  .logo-suits{font-size:14px;letter-spacing:10px;padding-left:10px}
  .lobby-actions{gap:20px;margin:10px 0 17px;align-self:stretch}
  .lobby-choice{min-width:0;flex:1;padding:5px}
  .choice-medallion{width:100px;height:100px;font-size:66px}
  .choice-medallion.dual{font-size:47px;letter-spacing:-17px}
  .lobby-choice strong{font-size:19px;margin-top:17px;white-space:nowrap}
  .lobby-choice small{font-size:11px;max-width:135px;line-height:1.4}
  .lobby-bottom{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:auto;padding-top:24px}
  .lobby-count-badge{grid-column:1/3;grid-row:1;justify-content:center;padding:12px 10px}
  .red-button{font-size:15px;padding:10px;min-height:44px}
  .lobby-count-badge span{font-size:15px}
  .lobby-count-badge small{font-size:11px}
  .lobby-resume{font-size:14px;min-height:45px}
  .tabletop{background-image:linear-gradient(#f08b312b,#59240555),url('assets/wood-table.png')}
}
@media(max-height:550px) and (orientation:landscape){
  .lobby{min-height:100dvh;padding:12px 30px;gap:7px}
  .lobby-top{position:absolute;left:25px;right:25px;top:14px}
  .profile-badge strong{font-size:14px}
  .profile-badge span{font-size:10px}
  .profile-badge{padding:6px 12px}
  .lobby-logo{margin:9px 0 8px;padding:7px 35px 9px;border-radius:26px}
  .lobby-logo h1{font-size:48px}
  .logo-small{font-size:8px}
  .logo-suits{font-size:11px}
  .lobby-actions{gap:80px;margin:4px 0}
  .choice-medallion{height:83px;width:83px;font-size:57px}
  .choice-medallion.dual{font-size:40px;letter-spacing:-16px}
  .lobby-choice strong{font-size:17px;margin-top:10px}
  .lobby-choice small{font-size:10px}
  .lobby-bottom{margin-top:8px;gap:16px}
  .lobby-count-badge{padding:7px 16px}
  .lobby-count-badge>b{font-size:27px}
  .lobby-count-badge span{font-size:12px}
  .lobby-count-badge small{font-size:9px}
  .red-button{min-height:36px;padding:7px 15px;font-size:13px}
  .lobby-resume{position:absolute;right:32px;bottom:87px;min-width:120px;min-height:37px;font-size:12px;padding:8px 12px}
}
.field-label{display:block;font-size:14px;margin:18px 0;color:#d8e1d9}
.field-label input,.field-label select{display:block;width:100%;min-height:45px;border:1px solid #7f989f88;border-radius:9px;background:#112630;color:#f5eedf;padding:10px 12px;margin-top:9px;font-size:16px}
.field-label input[readonly]{font-size:12px;color:#c6e2e7}
.invite-symbol{font-size:47px;color:var(--gold);text-align:center;margin:20px}
.invite-buttons{display:flex;gap:12px;margin:18px 0}
.invite-buttons .gold-button{flex:1}
.invite-buttons .red-button{font-size:14px}
.form-error{color:#ffc2a1;font-size:14px;min-height:20px}
.lobby-actions{gap:55px}
.lobby-choice{min-width:180px}
#connection-label{color:#9ce3cb;font-size:10px}
.card-dealt{animation:count-in .3s}
.waiting-friend{font-size:14px;text-align:center;color:#ffe2a4}
.waiting-friend small{display:block;font-size:12px;line-height:1.5;margin-top:7px}
.turn-glow{box-shadow:0 0 0 2px #ffe399,0 0 22px #ffc75c55}
.mug-buttons{display:flex;gap:10px;margin:15px 0}
.mug-buttons button{flex:1}
.mug-message{padding:13px;background:#d6a74820;border:1px solid #e4be7155;border-radius:8px;color:#ffe0a0;font-size:14px}
.score-row{animation:count-in .22s both;animation-delay:calc(160ms + var(--i,0)*140ms)}
@media(max-width:600px){
  .lobby-actions{gap:4px}
  .lobby-choice{min-width:0}
  .choice-medallion{width:81px;height:81px;font-size:55px}
  .choice-medallion.dual{font-size:39px;letter-spacing:-16px;padding-right:12px}
  .lobby-choice strong{font-size:15px;margin-top:15px}
  .lobby-choice small{font-size:10px;max-width:95px}
  .lobby-logo{margin-bottom:20px}
  .matchbar{flex-wrap:wrap;gap:5px}
  #connection-label{flex-basis:100%;text-align:center;font-size:9px}
  .invite-buttons{flex-wrap:wrap}
  .invite-buttons button{font-size:13px;padding:11px 15px}
}
@media(max-height:550px) and (orientation:landscape){
  .lobby-actions{gap:28px}
  .lobby-choice{min-width:150px}
  .choice-medallion{width:75px;height:75px;font-size:50px}
  .choice-medallion.dual{font-size:37px}
  .lobby-choice strong{font-size:16px}
}
/* Keep every pip inside small cards, with conventional centered odd pips. */
.card .pip-grid{grid-auto-rows:minmax(0,1fr)}
.card .pip-grid[data-rank="9"],.card .pip-grid[data-rank="10"]{font-size:calc(var(--w)*.205)}
.card .pip-grid[data-rank="7"],.card .pip-grid[data-rank="8"]{font-size:calc(var(--w)*.235)}
.card .pip-grid[data-rank="5"] .pip:last-child,.card .pip-grid[data-rank="7"] .pip:last-child,.card .pip-grid[data-rank="9"] .pip:last-child{grid-column:1/3}
.card .pip-grid.single{font-size:calc(var(--w)*.36)}
/* The deck is a real control at both cuts. */
.deck-stack{padding:0;border:0;background:none;color:inherit;overflow:visible;z-index:3;pointer-events:auto}
.deck-stack:not(:disabled){cursor:pointer;filter:drop-shadow(0 0 7px #ffe1a3)}
.opening-area{grid-column:1;grid-row:2/5;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;z-index:4;pointer-events:none;text-align:center}
.is-opening .board-zone,.is-opening .middle-zone,.is-opening .opponent-hand{visibility:hidden}
.opening-cards{display:flex;align-items:start;gap:65px;justify-content:center}
.opening-seat{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:100px}
.opening-seat>span{font-size:15px;font-weight:700}
.opening-seat>small{font-size:13px;color:#ffe3b6;min-height:18px}
.opening-seat .card{--w:72px}
.opening-seat.low-card .card{box-shadow:0 0 0 3px #fbd776,0 7px 20px #29170699}
.opening-deck{pointer-events:auto;display:flex;align-items:center;gap:21px;background:transparent;color:#ffe8bb;padding:7px 20px;border-radius:12px;font-size:15px;font-weight:700}
.opening-deck .card{--w:56px;box-shadow:3px 3px 0 #dbcfae,6px 6px 0 #716454,0 10px 12px #0006;transform:rotate(-8deg)}
.opening-deck:not(:disabled):hover .card{transform:rotate(-3deg) translateY(-3px)}
.opening-deck:disabled{opacity:.55}
.opening-note{font-size:13px;color:#e5c7a2;text-align:center;margin:0}
#opening-result{font-size:15px;font-weight:500;color:#ffedcb;margin:0;min-height:20px}
@media(max-width:480px){
  .opening-area{gap:14px}
  .opening-cards{gap:42px}
  .opening-seat{gap:8px;min-width:80px}
  .opening-seat .card{--w:61px}
  .opening-deck .card{--w:47px}
  .opening-deck{gap:16px}
  .opening-area .eyebrow{font-size:10px}
  .opening-note{font-size:12px}
  .opening-seat>span{font-size:14px}
  #opening-result{font-size:13px}
}
@media(max-height:550px) and (orientation:landscape){
  .opening-area{grid-column:2;grid-row:1/4;display:grid;grid-template-columns:1fr 100px;align-content:center;gap:8px 15px}
  .opening-area>.eyebrow{grid-column:1/3}
  .opening-cards{gap:30px}
  .opening-seat .card{--w:55px}
  .opening-seat{gap:5px;min-width:70px}
  .opening-deck{padding:8px 5px;flex-direction:column;gap:12px;font-size:12px}
  .opening-deck .card{--w:43px}
  #opening-result{grid-column:1/3;font-size:12px}
  .is-opening .your-hand{visibility:hidden}
  .opening-seat>span{font-size:12px}
  .opening-seat>small{font-size:11px}
}
.is-opening .board-zone,.is-opening .middle-zone,.is-opening .opponent-hand{display:none}
.opening-seat .card,.opening-deck .card{flex:none}
/* The starter is turned face up on top of the deck, and stays readable above it. */
.starter-slot{z-index:4;pointer-events:none}
#starter-label.call-to-action{color:#ffe7a4;animation:peg-glow 1.6s ease-in-out infinite}
/* The show: the other hand lies face up across the table. */
.opponent-hand.showing .card{margin-left:-8px;border-width:1px}
.opponent-hand.showing .card:first-child{margin-left:0}
.opponent-hand.showing .card .corner{font-size:15px;top:3px;left:4px}
.opponent-hand.showing .card .corner.bottom{inset:auto 4px 3px auto}
.opponent-hand.showing .card .tiny-suit{display:none}
.opponent-hand.showing .card .center-suit{font-size:20px}
.opponent-hand.showing .card .pip-grid{font-size:11px;inset:22% 24%}
.opponent-hand.showing .card .pip-grid.single{font-size:17px}
.opponent-hand.showing .card .court-mark{font-size:18px;padding:2px}
.count-call{font:italic 400 15px/1.5 'Libre Baskerville',Georgia,serif;color:#f3dfb0;text-align:center;margin:4px 6px 0;animation:count-in .4s both}
.setting-row input[type=range]{width:150px;height:auto;accent-color:var(--gold)}
.sound-check{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:4px 0 17px}
.sound-check>span{width:100%;font-size:12px;color:#a9bdc1}
.sound-check button{padding:7px 11px;border-radius:999px;background:#0b1b2366;border:1px solid #d7b97a55;color:#f0dcae;font-size:13px}
.sound-check button:disabled{opacity:.4}
.stat strong small{font-size:14px;color:#c9b88e;margin-left:3px}
#reset-stats{display:block;margin:4px auto 0}
.stats-grid .stat strong{font-size:26px}
@media(max-width:480px){
  .opponent-hand.showing .card{margin-left:-6px}
  .opponent-hand.showing .card .corner{font-size:12px;top:3px;left:3px}
  .opponent-hand.showing .card .corner.bottom{inset:auto 3px 3px auto}
  .opponent-hand.showing .card .center-suit{font-size:17px}
  .opponent-hand.showing .card .pip-grid{font-size:9px}
  .opponent-hand.showing .card .court-mark{font-size:15px;padding:1px}
  .count-call{font-size:13px}
}
/* The first shuffle of a game: two halves riffled together in the middle of the table. */
.shuffle-stage{position:absolute;z-index:30;pointer-events:none;transform-origin:50% 80%}
.shuffle-card{position:absolute;inset:0;transform-origin:50% 100%}
.shuffle-card .card{box-shadow:0 1px 2px #0004}
.shuffle-card.half .card{box-shadow:1px 1px 0 #c0b193,2px 2px 0 #dbcfae,3px 3px 0 #c0b193,4px 4px 0 #dbcfae,5px 5px 0 #88735c,0 8px 14px #0006}

/* ── Tropical skin: a lagoon table, an island deck and a volcano board (web/volcano.js). ── */
.theme-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.theme-swatch.tropical{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 55'%3E%3Cpath d='M18 55 L44 17 L56 17 L82 55Z' fill='%234a2c22'/%3E%3Cellipse cx='50' cy='17' rx='7' ry='2.4' fill='%23ff8a2a'/%3E%3Cpath d='M50 19 Q52 34 50 55' stroke='%23ff7a1a' stroke-width='2' fill='none'/%3E%3C/svg%3E") center bottom/100% auto no-repeat,linear-gradient(#ff9d68 0,#ffd49a 45%,#2cb7bf 45%,#0c6f86 100%)}
body[data-theme=tropical]{background:linear-gradient(#0b4a5c,#06303d)}
body[data-theme=tropical] .topbar .wordmark h1{color:#fff1cc;text-shadow:0 2px 0 #c2410c}
body[data-theme=tropical] .wordmark>span{color:#ffd166}
body[data-theme=tropical] .round-button{background:linear-gradient(#19a7ab,#0b6878);border-color:#a5ece480;color:#fff4d6;box-shadow:0 3px 0 #053b46}
body[data-theme=tropical] .matchbar{color:#c4f1ec}
body[data-theme=tropical] .tabletop{background-color:#0f8e9b;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='none' stroke='%23c8fff6' stroke-opacity='.075' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M-10 40 Q20 22 48 42 T104 38 T160 44 T200 36'/%3E%3Cpath d='M-10 112 Q26 92 58 114 T120 108 T190 116'/%3E%3Cpath d='M30 -10 Q46 26 28 62 T34 130 T26 200'/%3E%3Cpath d='M120 -10 Q136 22 118 58 T126 126 T118 200'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M0 74 Q40 60 80 76 T180 70'/%3E%3Cpath d='M76 0 Q90 40 74 90 T80 180'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(ellipse 80% 55% at 28% 18%,#5ad8cd 0,#5ad8cd00 70%),radial-gradient(ellipse 70% 60% at 82% 92%,#06566b 0,#06566b00 70%),linear-gradient(#14a6ae,#0a6c80);background-size:260px 260px,auto,auto,auto;background-position:center;background-blend-mode:normal;border-color:#ecd39c;box-shadow:0 3px 0 #b8935a,inset 0 0 0 2px #fff3cf80,inset 0 0 70px #03334499,0 23px 48px #00141a66}
body[data-theme=tropical] .tabletop:before{border-color:#fff2cf33}
body[data-theme=tropical] .board-caption{color:#e8fbf7}
body[data-theme=tropical] .pocket-label,body[data-theme=tropical] .seat-info span{color:#d7f4ef}
body[data-theme=tropical] .count-badge{background:#063a47d9;border-color:#9fe4dc66}
body[data-theme=tropical] .gold-button{background:linear-gradient(#ffd47c,#ff9f45);border-color:#ffe3ab;border-bottom-color:#b5601d;color:#4a2208}
body[data-theme=tropical] dialog{background:linear-gradient(155deg,#135863,#0a2f39);border-color:#9fe4dc55}
body[data-theme=tropical] .crib-empty{border-color:#d7f4ef66;color:#d7f4ef99}
/* The island deck: cream faces with a lagoon edge, four suit colors (hibiscus hearts, mango diamonds, palm clubs, reef spades),
   and leaf-patterned backs with a hibiscus in the middle. */
body[data-theme=tropical] .card:not(.back){background:linear-gradient(160deg,#fffdf5,#f6ead0);border-color:#e6d0a2;box-shadow:0 3px 0 #c6ab7d,0 5px 9px #0004,inset 0 0 0 2px #fffaf0,inset 0 0 0 3px #6fcfc455}
body[data-theme=tropical] .card.suit-0{color:#17874a}
body[data-theme=tropical] .card.suit-1{color:#e8770f}
body[data-theme=tropical] .card.suit-2{color:#d6215c}
body[data-theme=tropical] .card.suit-3{color:#14549c}
body[data-theme=tropical] .card .court-mark{border-radius:10px 10px 4px 4px;border-width:1.5px;background:linear-gradient(#ffffff00,#6fcfc41f)}
body[data-theme=tropical] .card.back{border-color:#fbe5b5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 14 Q7 3 14 2 Q11 10 2 14Z' fill='%23ffffff' fill-opacity='.12'/%3E%3Cpath d='M2 14 L14 2' stroke='%23ffffff' stroke-opacity='.16' stroke-width='.6'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 38%,#20b8a2,#0a6a62 72%);background-size:16px 16px,auto;box-shadow:0 3px 0 #b9a273,0 5px 8px #0006}
body[data-theme=tropical] .back .back-mark{font-size:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 40 40'%3E%3Cg fill='%23ff6f8e' stroke='%23c42a5f' stroke-width='.7'%3E%3Cellipse cx='0' cy='-9' rx='7' ry='10' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-9' rx='7' ry='10' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-9' rx='7' ry='10' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-9' rx='7' ry='10' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-9' rx='7' ry='10' transform='rotate(288)'/%3E%3C/g%3E%3Cg fill='%23ff9db3' opacity='.55'%3E%3Cellipse cx='0' cy='-11' rx='3' ry='5' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-11' rx='3' ry='5' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-11' rx='3' ry='5' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-11' rx='3' ry='5' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-11' rx='3' ry='5' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23b8164f'/%3E%3Cpath d='M0 0 Q3 -6 6 -11' stroke='%23ffd54f' stroke-width='1.3' fill='none'/%3E%3Ccircle cx='6' cy='-11' r='1.6' fill='%23ffe082'/%3E%3C/svg%3E") center/86% no-repeat,radial-gradient(#0d7c70,#085a52);border-color:#fbe5b5aa}
/* A sunset lobby with palm fronds over the corners. */
body[data-theme=tropical] .lobby{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 180 180'%3E%3Cg fill='%230d3b2c' fill-opacity='.85'%3E%3Cpath d='M0 0 Q69 -16 147 30 Q69 24 0 0Z'/%3E%3Cpath d='M0 0 Q60 8 128 82 Q60 48 0 0Z'/%3E%3Cpath d='M0 0 Q38 30 82 128 Q38 70 0 0Z'/%3E%3Cpath d='M0 0 Q14 39 30 147 Q14 79 0 0Z'/%3E%3Cpath d='M0 0 Q66 -34 142 -8 Q66 6 0 0Z'/%3E%3C/g%3E%3C/svg%3E") left -36px top -30px/clamp(170px,30vw,300px) auto no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-170 -10 180 180'%3E%3Cg fill='%230d3b2c' fill-opacity='.85' transform='scale(-1 1)'%3E%3Cpath d='M0 0 Q69 -16 147 30 Q69 24 0 0Z'/%3E%3Cpath d='M0 0 Q60 8 128 82 Q60 48 0 0Z'/%3E%3Cpath d='M0 0 Q38 30 82 128 Q38 70 0 0Z'/%3E%3Cpath d='M0 0 Q14 39 30 147 Q14 79 0 0Z'/%3E%3Cpath d='M0 0 Q66 -34 142 -8 Q66 6 0 0Z'/%3E%3C/g%3E%3C/svg%3E") right -36px top -30px/clamp(170px,30vw,300px) auto no-repeat,linear-gradient(#ff8b5c 0,#ffbd80 28%,#ffe3a8 46%,#46c8c6 46.2%,#1897ad 72%,#0a5c72 100%);background-blend-mode:normal}
body[data-theme=tropical] .lobby-logo{background:linear-gradient(#fff7dc,#ffe2a0 50%,#f6c46a);border-color:#fff3d0;box-shadow:0 8px 0 #c0752c,0 12px 0 #7a4316,0 18px 30px #0a3d4a55,inset 0 4px 7px #fffff0}
body[data-theme=tropical] .lobby-logo h1{color:#0e8794;text-shadow:1px 1px 0 #fffbe6,-1px -1px 0 #fffbe6,0 3px 0 #07505f,0 6px 3px #07505f88;-webkit-text-stroke:.5px #e9fffb}
body[data-theme=tropical] .logo-small,body[data-theme=tropical] .logo-suits{color:#d9532f}
body[data-theme=tropical] .choice-medallion{background:radial-gradient(circle at 35% 22%,#effffc 0,#8ee6dc 25%,#0f9ca6 60%,#5ad6cd 88%);border-color:#0b7f8a;outline-color:#063f4a;box-shadow:inset 0 0 0 3px #d2fff7,0 8px 0 #063f4a,0 12px 20px #00222a70;color:#ff6b57;text-shadow:2px 3px 0 #8c2a17}
body[data-theme=tropical] .choice-medallion.dual{color:#fff1cc;text-shadow:2px 3px 0 #075063}
body[data-theme=tropical] .lobby-choice strong{text-shadow:0 2px 0 #06303d,2px 0 0 #06303d,-2px 0 0 #06303d}
body[data-theme=tropical] .lobby-choice small{color:#fff3da;text-shadow:0 1px 2px #06303d}
body[data-theme=tropical] .red-button{background:linear-gradient(#ff7b5f,#df523b);border-color:#ffb39b;box-shadow:0 4px 0 #8c2a17}
body[data-theme=tropical] .lobby-count-badge,body[data-theme=tropical] .profile-badge{background:#06303d;border-color:#ffd166}
/* The volcano breathes: drifting smoke, flowing lava, a pulsing lake and steam where the lava meets the sea. */
.volcano .puff{transform-box:fill-box;transform-origin:center;animation:volcano-puff 6s ease-out infinite}
.volcano .puff1{animation-delay:-2s}
.volcano .puff2{animation-delay:-4s}
.volcano .lava-flow{animation:volcano-lava 1.8s linear infinite}
.volcano .lake{animation:volcano-lake 2.6s ease-in-out infinite alternate}
.volcano .steam{transform-box:fill-box;transform-origin:center;animation:volcano-steam 3s ease-out infinite}
.volcano .steam2{animation-delay:-1.5s}
body.still .volcano *{animation:none!important}
#board.rumble{animation:volcano-rumble .55s linear}
@keyframes volcano-puff{0%{transform:translate(0,4px) scale(.5);opacity:0}20%{opacity:.6}100%{transform:translate(14px,-34px) scale(2.1);opacity:0}}
@keyframes volcano-lava{to{stroke-dashoffset:-36}}
@keyframes volcano-lake{from{opacity:.78}to{opacity:1}}
@keyframes volcano-steam{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.5}100%{transform:translateY(-14px) scale(1.6);opacity:0}}
@keyframes volcano-rumble{0%,100%{transform:none}12%{transform:translate(-2px,1px)}25%{transform:translate(2px,-1px)}38%{transform:translate(-3px,0)}50%{transform:translate(3px,1px)}62%{transform:translate(-2px,-1px)}75%{transform:translate(2px,0)}88%{transform:translate(-1px,1px)}}