:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#e8ebe8;--panel:#fff;--text:#1d2420;--muted:#59655e;--line:#c4ccc7;--felt:#1f5a42;--felt-d:#16443a;--wood:#4a3220;--card:#fbf8f0;--red:#b3261e;--blk:#1c1b1a;--brass:#c9a24a;--brass-t:#1d1608}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#121614;--panel:#1b211e;--text:#e6ece8;--muted:#98a59d;--line:#334039}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#121614;--panel:#1b211e;--text:#e6ece8;--muted:#98a59d;--line:#334039}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 "Hanken Grotesk",system-ui,sans-serif}
.wrap{max-width:820px;margin:0 auto;padding:16px}
h1{font:600 1.5rem/1.2 "Fraunces",Georgia,serif;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 12px}
.tabs{display:flex;gap:8px;margin:12px 0}
.btn{background:var(--brass);color:var(--brass-t);border:0;border-radius:8px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--brass)}
.btn[aria-pressed="true"]{outline:2px solid var(--text)}
select,input,textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 9px;max-width:100%}
.table{--cw:clamp(44px,11vw,64px);--ch:calc(var(--cw)*1.4);background:radial-gradient(ellipse at center,var(--felt),var(--felt-d));border:10px solid var(--wood);border-radius:28px;padding:14px;display:grid;gap:8px;justify-items:center}
.lab{color:#d3e6db;font-size:.9rem}
.hand{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:var(--ch)}
.mid{display:flex;align-items:center;gap:10px}
.cross{display:grid;grid-template-columns:repeat(3,var(--cw));grid-template-rows:repeat(3,var(--ch));gap:4px}
.slot{border:1px dashed #ffffff33;border-radius:8px}
.sn{grid-area:1/2}.sw{grid-area:2/1}.se{grid-area:2/3}.ss{grid-area:3/2}
.card{width:var(--cw);height:var(--ch);border-radius:8px;background:var(--card);border:1px solid #0004;position:relative;font:600 calc(var(--cw)*.3)/1 "Fraunces",Georgia,serif;padding:0;color:var(--blk);box-shadow:0 2px 5px #0006;display:block}
.card.r{color:var(--red)}
.card .c{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.card .tl{top:4px;left:5px}.card .br{bottom:4px;right:5px;transform:rotate(180deg)}
.card .mid2{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.55)}
button.card{cursor:pointer;transition:transform .12s}
button.card:hover{transform:translateY(-7px)}
button.card:focus-visible{outline:3px solid var(--brass)}
.win{box-shadow:0 0 0 3px var(--brass),0 0 18px var(--brass)}
.fN{animation:fN .4s ease-out}.fS{animation:fS .4s ease-out}.fW{animation:fW .4s ease-out}.fE{animation:fE .4s ease-out}
@keyframes fN{from{transform:translateY(-110px);opacity:.2}}@keyframes fS{from{transform:translateY(110px);opacity:.2}}
@keyframes fW{from{transform:translateX(-110px);opacity:.2}}@keyframes fE{from{transform:translateX(110px);opacity:.2}}
@media (prefers-reduced-motion:reduce){.fN,.fS,.fW,.fE{animation:none}}
.msg{padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);margin-top:12px}
.msg.bad{border-color:#c0463a}.msg.ok{border-color:#2e8b57}
.msg .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:.9rem}
label input,label textarea{width:100%;margin-top:3px;font-weight:400}
.trow{display:flex;gap:8px;flex-wrap:wrap;align-items:end;padding:8px 0;border-top:1px solid var(--line)}
.trow label select{display:block;margin-top:3px;font-weight:400}
.note{color:var(--muted);font-size:.9rem}.err{color:#c0463a;font-weight:600}
.nd .nd{margin-left:14px;border-left:2px solid var(--line);padding-left:10px}.nr{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:4px 0}.nr input{flex:1;min-width:160px}.nr .btn{padding:3px 10px}.msg ul{margin:4px 0;padding-left:18px}.msg ul ul{padding-left:14px}
.dia{--cw:clamp(26px,7vw,36px);--ch:calc(var(--cw)*1.4);display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". n ." "w c e" ". s .";gap:8px;align-items:center;justify-items:center;max-width:560px;margin:10px auto}.dh{border:1px solid var(--line);border-radius:10px;padding:6px 12px;text-align:center;min-width:96px;background:var(--bg);font-weight:600}.dh b{display:block;font-size:.8rem;color:var(--muted)}.fan{display:flex;justify-content:center;margin-top:4px}.fan .card{margin-left:calc(var(--cw)*-.5);box-shadow:-1px 1px 3px #0005}.fan .card:first-child{margin-left:0}.dn{grid-area:n}.dw{grid-area:w}.de{grid-area:e}.ds{grid-area:s}.dc{grid-area:c;width:44px;height:44px;border-radius:8px;background:var(--felt);color:#fff;display:grid;place-items:center;font-size:1.4rem}
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.excard{display:grid;gap:4px;text-align:left;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:14px;font:inherit;cursor:pointer}.excard:hover{border-color:var(--brass)}.excard:focus-visible{outline:3px solid var(--brass)}.exs{font-size:1.8rem;line-height:1;color:var(--blk)}.exs.r{color:var(--red)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .exs:not(.r){color:var(--text)}}:root[data-theme="dark"] .exs:not(.r){color:var(--text)}.ext{font:600 1.1rem/1.2 "Fraunces",Georgia,serif}.arow{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}.arow:first-child{border-top:0}.abtn{display:flex;gap:6px;flex-wrap:wrap}.abtn .btn{padding:5px 10px}.pill{font-size:.75rem;border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--muted)}.pill.on{border-color:#2e8b57;color:#2e8b57}
a.excard{text-decoration:none}a.btn{text-decoration:none;display:inline-block}
.foot{margin:28px 0 8px;text-align:center;color:var(--muted);font-size:.85rem}
.card.back{background:repeating-linear-gradient(45deg,#27467a 0 6px,#2f5594 6px 12px);border:3px solid var(--card)}