:root{color-scheme:light;--ink:#1c2434;--muted:#4d566a;--paper:#faf8f3;--panel:#fff;--line:#ccd3e0;--navy:#274b8f;--navy2:#1b3465;--sea:#e2e9f6;--sun:#b22234;--red:#c3121e;--blk:#121620;--focus:#b22234;--ts:1}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
html{font-size:calc(17px * var(--ts))}
body{background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.3;-webkit-text-size-adjust:100%}
button{font:inherit;touch-action:manipulation;cursor:pointer}
a{color:var(--navy2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.app{height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "tools" "table" "foot";padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.bar{grid-area:bar;display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--navy2);color:#fff;border-bottom:3px solid var(--sun)}
.bar h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.25rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backlink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:#fff;font-weight:700;text-decoration:none;border:2px solid rgba(255,255,255,.55);white-space:nowrap}
.backlink:hover{background:rgba(255,255,255,.12)}
.moves{white-space:nowrap;font-weight:600}.moves b{font-size:1.15em}
.tools{grid-area:tools;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;padding:8px 10px}
.btn{min-height:48px;min-width:48px;padding:0 16px;border-radius:10px;border:2px solid var(--navy2);background:var(--panel);color:var(--navy2);font-weight:700;font-size:1rem}
.btn:hover{background:var(--sea)}.btn.primary{background:var(--navy2);color:#fff}.btn.primary:hover{background:var(--navy)}
.btn:disabled{opacity:.45;cursor:default}
.seg{display:inline-flex;border:2px solid var(--navy2);border-radius:10px;overflow:hidden}
.seg button{min-height:44px;min-width:44px;padding:0 12px;border:0;background:var(--panel);color:var(--navy2);font-weight:700;font-size:1rem}
.seg button+button{border-left:2px solid var(--navy2)}
.seg button[aria-pressed="true"]{background:var(--navy2);color:#fff}
.tools .seg button{min-height:44px}
.table{grid-area:table;position:relative;min-height:0;background:linear-gradient(180deg,#e4ebf6,#d3deee);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px}
#board{position:relative;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding:4px 12px;font-size:.9rem}
.ts{display:flex;align-items:center;gap:8px;font-weight:700}
.ts .seg button{font-size:.9rem;min-height:44px}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-weight:600}
.links span{color:var(--muted)}
/* piles */
.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.09);border:2px dashed rgba(27,52,101,.4);background:rgba(255,255,255,.35);display:grid;place-items:center;color:rgba(27,52,101,.45)}
.slot svg{width:45%;height:45%;fill:currentColor}
.slot.stock{cursor:pointer;border-style:solid}
.slot .lbl{position:absolute;bottom:6%;font-weight:800;font-size:calc(var(--cw)*.2)}
.card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.09);transition:transform .2s ease;will-change:transform;cursor:pointer}
.noanim .card,.card.dragging{transition:none}
.card.dragging{filter:drop-shadow(0 8px 10px rgba(0,0,0,.3))}
.face,.back{position:absolute;inset:0;border-radius:inherit}
.face{display:none;background:#fff;border:1.5px solid #7d879b;box-shadow:0 1px 2px rgba(0,0,0,.25);overflow:hidden}
.card.up .face{display:block}.card.up .back{display:none}
.red .face{color:var(--red)}.blk .face{color:var(--blk)}
.face svg{fill:currentColor}
.corner{position:absolute;left:5%;top:2%;display:flex;align-items:center;font:800 calc(var(--cw)*.40)/1 Arial,Helvetica,sans-serif;letter-spacing:-.06em}
.corner .sm{width:calc(var(--cw)*.31);height:calc(var(--cw)*.31);margin-left:2%}
.corner2{position:absolute;right:5%;bottom:2%;display:flex;align-items:center;font:800 calc(var(--cw)*.26)/1 Arial,Helvetica,sans-serif;transform:rotate(180deg);letter-spacing:-.06em}
.corner2 .sm{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
.pip{position:absolute;left:0;right:0;top:34%;display:flex;justify-content:center}
.pip .big{width:56%;height:calc(var(--cw)*.56)}
.ace .pip .big{width:66%;height:calc(var(--cw)*.66)}
.court{position:absolute;left:14%;right:14%;top:33%;bottom:13%;border:2px solid currentColor;border-radius:calc(var(--cw)*.06);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.04))}
.court span{font:700 calc(var(--cw)*.42)/1 Georgia,"Times New Roman",serif}
.court .cs{width:calc(var(--cw)*.22);height:calc(var(--cw)*.22)}
.card.hint .face,.slot.hint,.card.hint .back{outline:4px solid #f0a500;outline-offset:1px;box-shadow:0 0 0 7px rgba(240,165,0,.35)}
.card.shake{animation:shake .35s}
@keyframes shake{25%{margin-left:-6px}75%{margin-left:6px}}
.toast{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:92%;background:rgba(27,52,101,.95);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;z-index:2000}
.toast.show{opacity:1}
.ov{position:fixed;inset:0;background:rgba(12,20,40,.6);display:none;place-items:center;z-index:3000;padding:16px}
.ov.show{display:grid}
.ov .box{background:var(--panel);border-radius:14px;padding:22px;max-width:420px;width:100%;text-align:center;border-top:6px solid var(--sun)}
.ov h2{margin:0 0 8px;font-family:Georgia,serif;font-size:1.5rem;color:var(--navy2)}
.ov p{margin:0 0 16px}
.ov .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:480px){.bar{padding:4px 8px;gap:8px}.bar h1{font-size:1.05rem}.backlink{padding:0 10px}.tools{gap:6px;padding:6px}.btn{padding:0 10px;font-size:.95rem}.seg button{padding:0 9px;font-size:.95rem}.foot{justify-content:center;padding:2px 8px;gap:0 12px}.links{gap:0 12px}.links span{display:none}.table{padding:5px 3px}}
@media (max-width:359px){.btn,.seg button{padding:0 7px;font-size:.88rem}}
/* short landscape phones: buttons move to the side */
@media (orientation:landscape) and (max-height:540px){
 .app{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar foot foot" "table table tools"}
 .bar{padding:2px 10px}.bar h1{font-size:1.05rem;flex:0 1 auto}
 .foot{background:var(--navy2);color:#fff;border-bottom:3px solid var(--sun);justify-content:flex-end;flex-wrap:nowrap}.foot .links a{color:#fff}.foot .links span{display:none!important}.ts .seg{border-color:#fff}
 .tools{flex-direction:column;flex-wrap:nowrap;justify-content:center;padding:4px 8px;gap:6px}
 .tools .btn{width:100%;min-height:44px;font-size:.95rem}
 .table{padding:4px}
 .foot{padding:0 10px;font-size:.85rem}
}
.small .corner{font-size:calc(var(--cw)*.46);left:4%}.small .corner .sm{width:calc(var(--cw)*.34);height:calc(var(--cw)*.34)}.small .corner2{display:none}.small .pip{top:auto;bottom:8%}.small .court{top:auto;bottom:6%;height:52%}.small .court span{font-size:calc(var(--cw)*.36)}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card.shake{animation:none}}
.back{background:#1b3465;border:1.5px solid #0e1d3b;box-shadow:inset 0 0 0 calc(var(--cw)*.045) #faf8f3,inset 0 0 0 calc(var(--cw)*.07) #b22234;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 8px),repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 2px,transparent 2px 8px);overflow:hidden}
.back .mk{position:absolute;left:50%;top:44%;width:52%;aspect-ratio:1/1;transform:translate(-50%,-50%);background:#faf8f3 url("../../assets/images/logo-mark.svg") center/86% no-repeat;border-radius:20%;box-shadow:0 0 0 2px #b22234}
.back .bt{position:absolute;left:8%;right:8%;top:73%;text-align:center;color:#faf8f3;font:800 calc(var(--cw)*.095)/1.15 Arial,Helvetica,sans-serif;letter-spacing:.06em}
.small .back .bt{display:none}.small .back .mk{top:50%;width:62%}
/* shared extras */
.info{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:.9rem;white-space:nowrap;font-weight:600}.info b{font-size:1.1em}
.slot.cell{border-style:solid;background:rgba(255,255,255,.55)}.slot .lbl.mid{position:static;font-size:calc(var(--cw)*.24)}
.gnum{display:flex;flex-direction:column;gap:6px;font-weight:700;margin:0 0 16px;text-align:left}.gnum input{font:inherit;font-size:1.2rem;min-height:48px;padding:6px 12px;border:2px solid var(--navy2);border-radius:10px}
.ov .row .btn{flex:1 1 auto}
.bjlbl{position:absolute;left:0;right:0;top:0;text-align:center;font-weight:800;font-size:1.15rem;color:var(--navy2);pointer-events:none}
.bjres{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:900;background:var(--navy2);color:#fff;font-weight:800;font-size:1.2rem;padding:10px 18px;border-radius:12px;border:3px solid #faf8f3;box-shadow:0 0 0 3px var(--sun);text-align:center;max-width:92%;display:none;pointer-events:none}
.bjres.show{display:block}
.btn.hint{outline:4px solid #f0a500;outline-offset:2px}
/* ===== Parker PC Pros black-and-green theme ===== */
:root{color-scheme:dark;--ink:#f3f6f1;--muted:#b9c4bb;--paper:#050805;--panel:#0d1410;--line:#1d2a22;--g:#1FD36B;--g2:#39ff88;--gdark:#04140a;--red:#c3121e;--blk:#111}
body{background:#050805;color:var(--ink)}
a{color:#5fe89a}
:focus-visible{outline:3px solid var(--g2)}
.bar{background:#070b08;color:#fff;border-bottom:3px solid var(--g)}
.backlink{border-color:var(--g);color:#fff}.backlink:hover{background:#12301f}
.info b,.moves b{color:var(--g2)}
.btn{background:#0d1410;color:#eafff2;border:2px solid var(--g)}
.btn:hover{background:#12301f}
.btn.primary{background:var(--g);color:var(--gdark);border-color:var(--g)}.btn.primary:hover{background:#3be585}
.seg{border-color:var(--g)}
.seg button{background:#0d1410;color:#eafff2}
.seg button+button{border-left-color:var(--g)}
.seg button[aria-pressed="true"]{background:var(--g);color:var(--gdark)}
.table{background-color:#060a07;background-image:radial-gradient(ellipse at 50% 40%,rgba(31,211,107,.07),transparent 70%),linear-gradient(rgba(31,211,107,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,211,107,.05) 1px,transparent 1px);background-size:100% 100%,44px 44px,44px 44px;border-color:#1d2a22;overflow:hidden}
.foot{color:#eafff2}.links span{color:#9fb3a5}
.slot{border:2px dashed rgba(31,211,107,.55);background:rgba(31,211,107,.06);color:rgba(31,211,107,.8)}
.slot.cell{background:rgba(31,211,107,.12);border-style:solid}
.face{background:#fffdf7;border:1.5px solid #3a453d}
.back{background:#050805;border:1.5px solid var(--g);box-shadow:inset 0 0 0 calc(var(--cw)*.035) #050805,inset 0 0 0 calc(var(--cw)*.055) var(--g);background-image:linear-gradient(rgba(31,211,107,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(31,211,107,.09) 1px,transparent 1px);background-size:calc(var(--cw)*.16) calc(var(--cw)*.16)}
.back .mk{width:68%;top:40%;background:#fffdf7 url("../../assets/images/logo-mark.svg") center/94% no-repeat;border-radius:18%;box-shadow:0 0 0 calc(var(--cw)*.025) var(--g)}
.back .bt{top:73%;left:4%;right:4%;color:var(--g2);font:900 calc(var(--cw)*.135)/1.08 Arial,Helvetica,sans-serif;letter-spacing:.02em}
.small .back .mk{width:76%;top:50%}
.card.hint .face,.slot.hint,.card.hint .back{outline:4px solid var(--g2);outline-offset:1px;box-shadow:0 0 0 7px rgba(57,255,136,.35)}
.btn.hint{outline:4px solid var(--g2);outline-offset:2px}
.toast{background:#0d1410;color:#fff;border:2px solid var(--g)}
.ov{background:rgba(0,0,0,.72)}
.ov .box{background:#0d1410;color:var(--ink);border:1px solid #1d2a22;border-top:6px solid var(--g)}
.ov h2{color:var(--g2)}
.gnum input{background:#050805;color:#fff;border-color:var(--g)}
.bjlbl{color:#eafff2}
.bjres{background:#050805;border:3px solid var(--g);box-shadow:0 0 0 3px rgba(31,211,107,.3)}
@media (orientation:landscape) and (max-height:540px){.foot{background:#070b08;border-bottom-color:var(--g)}.ts .seg{border-color:var(--g)}}
/* hand games */
.card.gone{opacity:0;pointer-events:none}
.card.meld .face{box-shadow:inset 0 calc(var(--cw)*-.07) 0 var(--g)}
.card.play .face{box-shadow:0 0 0 3px var(--g)}
.card.dim .face{filter:brightness(.62)}
.seat{position:absolute;left:0;top:0;transform:translateX(-50%);background:#0d1410;border:2px solid #1d2a22;border-radius:10px;padding:4px 10px;text-align:center;font-weight:700;font-size:.9rem;line-height:1.2;white-space:nowrap;color:#eafff2;z-index:400;pointer-events:none}
.seat b{color:var(--g2)}.seat.turn{border-color:var(--g);box-shadow:0 0 0 3px rgba(31,211,107,.35)}
.centerlbl{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-weight:800;color:#eafff2;font-size:1rem;text-align:center;pointer-events:none;z-index:400;white-space:nowrap}
.ov table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:1rem}.ov td,.ov th{padding:6px;border-bottom:1px solid #1d2a22}.ov th{color:var(--g2)}
.stepper{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 14px}.stepper output{font-size:2rem;font-weight:800;min-width:2.2em;color:#fff}
.suitpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 12px}.suitpick button{min-height:64px;font-size:2rem;background:#fffdf7;border:2px solid var(--g);border-radius:10px}.suitpick .r{color:#c3121e}.suitpick .k{color:#111}
.small .seat{font-size:.85rem;padding:3px 6px}
.centerlbl{white-space:normal;width:max-content;max-width:min(86vw,520px)}