.table { width:min(860px,100%); padding:14px; border-radius:18px; background:radial-gradient(ellipse at 50% 20%, #2c4a5f, #172a38); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.lbl { color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.table .lbl { color:#a9c3d4; }
.chain { min-height:96px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center; padding:6px; }
.hand { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:760px; }
.opp-hand { gap:4px; justify-content:flex-start; }
.dom { --s:34px; position:relative; display:inline-flex; flex-direction:row; width:calc(var(--s) * 2 + 3px); height:calc(var(--s) + 2px); border-radius:7px; background:linear-gradient(160deg,#fffdf6,#ece3cc); border:1px solid #9d916f; box-shadow:0 2px 0 #7f7456, 0 4px 6px rgba(0,0,0,.35); padding:0; color:#1f2937; }
.dom.v { flex-direction:column; width:calc(var(--s) + 2px); height:calc(var(--s) * 2 + 3px); }
.dom::after { content:''; position:absolute; background:#9d916f; left:50%; top:12%; bottom:12%; width:1px; }
.dom.v::after { left:12%; right:12%; top:50%; bottom:auto; width:auto; height:1px; }
.half { width:var(--s); height:var(--s); display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); padding:11%; box-sizing:border-box; gap:1px; }
.pip { border-radius:50%; background:#1f2937; place-self:center; width:92%; aspect-ratio:1; }
.dom.back { background:repeating-linear-gradient(45deg,#2b4f6b 0 5px,#244158 5px 10px); border-color:#17303f; --s:22px; }
.dom.back .half { visibility:hidden; }
button.dom { cursor:pointer; transition:transform .12s ease; } button.dom:hover:not(:disabled) { transform:translateY(-3px); }
button.dom.playable { box-shadow:0 0 0 3px #4ade80, 0 4px 6px rgba(0,0,0,.35); } button.dom.sel { outline:3px solid #fbbf24; transform:translateY(-6px); }
button.dom:disabled { opacity:.55; cursor:default; }
button.dom:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.chain .dom.new { animation:dmIn .3s ease; }
@keyframes dmIn { from { transform:scale(.6); opacity:.2; } }
.choice[hidden] { display:none; }
.choice button { min-height:44px; }
.bar button { min-height:44px; }
#modes button.on { background:var(--accent); color:var(--accent-ink,#06202e); }
@media (max-width:520px) { .dom { --s:28px; } .dom.back { --s:18px; } }