#domino { width:100%; height:var(--visible-height,100dvh); max-width:520px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 10px) max(12px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(12px,env(safe-area-inset-left)); display:flex; flex-direction:column; }
#domino .header { padding:0; min-height:48px; }
#domino h1 { font-size:21px; }
#domino .eyebrow { display:block; margin-top:3px; font-size:10px; }
#domino .tools { gap:0; }
#domino .pack-picker { flex:none; margin:6px 0 4px; }
#domino .pack-picker button { min-height:44px; }
#domino .pack-picker [aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px #0001; }
#domino button>svg { pointer-events:none; }
.dm-meta { display:flex; justify-content:space-between; align-items:center; min-height:24px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dm-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.dm-board { flex:none; display:block; user-select:none; -webkit-user-select:none; touch-action:none; overflow:visible; }
.dm-region-fill { fill:color-mix(in srgb,var(--region) 10%,var(--surface)); }
.dm-cell-letter { font-size:9px; font-weight:700; }
.dm-bone { fill:light-dark(#fff,#31383a); stroke:light-dark(#637571,#c0ceca); stroke-width:1.5; }
.dm-pips { fill:light-dark(#253c35,#edf4ee); }
.dm-divider { fill:none; stroke:light-dark(#b3c0b9,#667c71); stroke-width:1.2; }
.dm-piece.selected .dm-bone { stroke:var(--action); stroke-width:3; }
.dm-ghost { opacity:.8; pointer-events:none; }
.dm-ghost .dm-bone { stroke:var(--action); stroke-width:2.5; stroke-dasharray:4 2; }
.dm-hit { cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.dm-hit:focus-visible { stroke:var(--action); stroke-width:3; outline:none; }
.dm-ledger { display:grid; grid-template-columns:repeat(var(--regions,4),minmax(0,1fr)); flex:none; gap:0 8px; margin:5px 0 7px; }
.dm-rule { height:36px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; min-width:0; }
.dm-rule-letter { font-size:11px; color:var(--region); font-weight:700; }
.dm-rule-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.dm-rule-main strong { font-size:15px; line-height:16px; font-weight:600; }
.dm-rule-main small { font-size:9px; line-height:11px; color:var(--muted); }
.dm-rule-progress { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dm-rule.complete .dm-rule-progress { color:var(--action); font-size:16px; }
.dm-rule.conflict .dm-rule-progress { color:light-dark(#a33e38,#ffa199); font-size:16px; font-weight:700; }
.dm-rule.conflict { border-bottom-color:light-dark(#b65047,#df7e6d); }
.dm-bank { flex:none; display:grid; grid-template-columns:repeat(var(--columns,4),minmax(0,1fr)); gap:6px; }
.dm-rack { width:100%; height:60px; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:2px; touch-action:none; user-select:none; -webkit-user-select:none; }
.dm-rack svg { display:block; width:100%; height:100%; }
.dm-rack.selected { outline:2px solid var(--action); outline-offset:-2px; }
.dm-rack.used { background:transparent; border-style:dashed; opacity:.4; }
.dm-rack.used::after { content:''; display:block; height:2px; width:12px; background:var(--muted); margin:auto; }
.dm-console { flex:none; padding-top:4px; }
.dm-status { height:25px; margin:0; display:flex; justify-content:center; align-items:center; font-size:12px; color:var(--muted); text-align:center; }
.dm-tool-row { display:flex; align-items:center; gap:8px; height:56px; }
.dm-selection { flex:1; min-width:0; height:52px; display:flex; align-items:center; justify-content:flex-start; }
.dm-selection svg { width:88px; max-width:100%; height:52px; }
.dm-tool-row .icon-button { width:56px; height:56px; flex:none; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.dm-tool-row .icon-button:not(:disabled) { color:var(--action); }
.dm-tool-row .icon-button svg { width:25px; height:25px; }
.dm-storage { display:block; color:var(--muted); text-align:center; font-size:10px; margin-top:3px; }
.dm-floating { position:fixed; z-index:60; width:120px; height:120px; pointer-events:none; opacity:.94; filter:drop-shadow(0 3px 4px #0003); }
.dm-floating svg { width:100%; height:100%; }
.dm-floating.dm-no-fit { opacity:.4; }
#domino [data-dm-next] { width:100%; height:44px; }
@media(max-height:650px) { #domino { padding-top:calc(env(safe-area-inset-top) + 5px); padding-bottom:calc(env(safe-area-inset-bottom) + 5px); } #domino .pack-picker { margin-top:2px; } .dm-rule { height:32px; } .dm-rack { height:54px; } .dm-ledger { margin:3px 0 5px; } }

#domino { overflow-y:auto; }
#domino .dm-stage { min-height:calc(var(--dm-rows,4)*44px + 24px); }
#domino .dm-region-fill { fill:light-dark(var(--region-fill),color-mix(in srgb,var(--region) 33%,#252a33)); stroke:light-dark(color-mix(in srgb,var(--region) 48%,var(--region-fill)),color-mix(in srgb,var(--region) 65%,#b8c4d4)); stroke-width:1.2; }
#domino .dm-region-depth { fill:light-dark(color-mix(in srgb,var(--region) 48%,var(--region-fill)),color-mix(in srgb,var(--region) 22%,#141922)); }
#domino .dm-grid-seam { fill:none; stroke:light-dark(#ffffff80,#ffffff15); stroke-width:1.2; stroke-dasharray:2 5; stroke-linecap:round; }
#domino .dm-cell-center { fill:var(--region); opacity:.28; }
#domino .dm-region-tag rect { fill:light-dark(color-mix(in srgb,var(--region) 80%,#223442),color-mix(in srgb,var(--region) 55%,#263140)); }
#domino .dm-region-tag text { fill:white; font-size:9px; font-weight:750; text-anchor:middle; }
#domino .dm-bone { fill:light-dark(#fffefa,#edf1f7); stroke:light-dark(#c1cbd5,#cad3e0); stroke-width:.9; }
#domino .dm-bone-base { fill:light-dark(#b9c5cf,#697a90); }
#domino .dm-piece:not(.dm-ghost) .dm-bone { filter:drop-shadow(0 2px 2px #1b324015); }
#domino .dm-pips { fill:#26394a; }
#domino .dm-pip-shine { fill:#ffffff40; }
#domino .dm-divider { stroke:#bbc7d1; stroke-width:1.2; stroke-linecap:round; }
#domino .dm-piece.selected .dm-bone { stroke:light-dark(#167e6a,#3aa68e); stroke-width:2.6; }
#domino .dm-piece.selected .dm-bone-base { fill:light-dark(#147b68,#3aa68e); }
#domino .dm-ghost { opacity:.7; }
#domino .dm-ghost .dm-bone { stroke:light-dark(#167e6a,#3aa68e); stroke-width:2; stroke-dasharray:4 3; }
#domino .dm-region.conflict .dm-region-fill { stroke:light-dark(#b43850,#ffb2b9); stroke-width:2; stroke-dasharray:4 3; }
#domino .dm-region.complete .dm-region-fill { stroke:light-dark(var(--region),color-mix(in srgb,var(--region) 50%,white)); stroke-width:2; }
#domino .dm-hit:focus-visible { stroke:var(--action); stroke-width:3; rx:6px; }
#domino .dm-ledger { gap:6px; margin:8px 0 12px; }
#domino .dm-rule { height:51px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:4px; padding:5px 7px; border:1px solid light-dark(color-mix(in srgb,var(--region) 25%,#e0e6eb),color-mix(in srgb,var(--region) 35%,#454e5a)); border-radius:6px; background:light-dark(color-mix(in srgb,var(--region-fill) 52%,white),color-mix(in srgb,var(--region) 12%,var(--surface))); }
#domino .dm-rule-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; min-height:18px; }
#domino .dm-rule-heading strong { font-size:17px; font-weight:750; line-height:18px; font-variant-numeric:tabular-nums; color:var(--ink); }
#domino .dm-rule-letter { display:grid; place-items:center; width:18px; height:18px; border-radius:4px; flex:none; font-size:11px; font-weight:750; background:light-dark(var(--region-fill),color-mix(in srgb,var(--region) 25%,var(--surface))); color:light-dark(color-mix(in srgb,var(--region) 55%,#142938),#eff4f8); }
#domino .dm-rule-detail { display:flex; align-items:center; justify-content:space-between; gap:2px; height:12px; }
#domino .dm-rule-detail small { font-size:9px; line-height:12px; color:var(--muted); }
#domino .dm-rule-progress { font-size:10px; line-height:12px; color:var(--ink); white-space:nowrap; }
#domino .dm-rule-progress svg { display:block; width:13px; height:13px; stroke-width:3; }
#domino .dm-rule.complete { border-color:light-dark(var(--region),color-mix(in srgb,var(--region) 55%,white)); }
#domino .dm-rule.complete .dm-rule-progress { color:var(--action); }
#domino .dm-rule.conflict .dm-rule-progress { color:light-dark(#ab3047,#ffb2b9); font-size:13px; }
#domino .dm-rule.conflict { border-color:light-dark(#ab3047,#ffb2b9); }
#domino .dm-bank { gap:4px 7px; padding:8px 0 0; border-top:1px solid var(--line); }
#domino .dm-rack { height:51px; padding:0; border:0; border-radius:8px; background:transparent; box-shadow:none; }
#domino .dm-rack svg { filter:drop-shadow(0 2px 2px #142e3a19); }
#domino .dm-rack.selected { background:light-dark(#dbeee8,#25483e); outline:2px solid var(--action); outline-offset:1px; box-shadow:none; }
#domino .dm-rack.used { background:transparent; opacity:.65; border:1px dashed var(--line); box-shadow:none; }
#domino .dm-rack.used::after { width:14px; height:3px; border-radius:2px; background:var(--line); }
#domino .dm-rack:focus-visible { outline:2px solid var(--action); outline-offset:2px; }
#domino .dm-console { padding-top:5px; }
#domino .dm-status { height:24px; font-size:12px; }
#domino .dm-tool-row { height:51px; }
#domino .dm-tool-row .icon-button { width:48px; height:48px; box-shadow:none; }
#domino .dm-selection { height:48px; padding-left:0; }
#domino .dm-selection svg { height:48px; }
@media (max-height:740px) { #domino .dm-rule { height:46px; padding-block:3px; } #domino .dm-ledger { margin:5px 0 8px; } #domino .dm-rack { height:46px; } }
@media (prefers-contrast:more) { #domino .dm-region-fill { stroke:var(--region); stroke-width:2; } #domino .dm-grid-seam { stroke:var(--muted); } #domino .dm-bone { stroke:#465669; stroke-width:1.8; } }