.dm-game{max-width:900px;margin-inline:auto;text-align:center;container-type:inline-size}.dm-howto{text-align:center;font-size:1.15rem;font-weight:700;color:var(--fgs-ink, #161616);background:var(--fgs-accent-soft, #e6f1e9);border:2px solid var(--fgs-accent, #16692f);border-radius:var(--fgs-radius, 14px);max-width:48ch;margin:0 auto 1rem;padding:.6rem 1rem}.dm-firsttip{text-align:center;font-size:1.15rem;font-weight:700;color:var(--fgs-ink, #161616);background:color-mix(in srgb,var(--fgs-hint, #b06a00) 12%,var(--fgs-surface, #fff));border:2px solid var(--fgs-hint, #b06a00);border-radius:var(--fgs-radius, 14px);max-width:46ch;margin:0 auto 1rem;padding:.6rem 1rem}.dm-help-bar{display:flex;justify-content:center;margin-bottom:1rem}.dm-hint-btn{margin:0;min-height:64px;font-size:1.35rem;font-weight:800;padding:.6rem 2rem;background:var(--fgs-hint, #b06a00);border:3px solid var(--fgs-hint, #b06a00);color:#fff;border-radius:var(--fgs-radius, 14px);box-shadow:0 3px color-mix(in srgb,var(--fgs-hint, #b06a00) 60%,#000)}.dm-hint-btn:hover{background:color-mix(in srgb,var(--fgs-hint, #b06a00) 85%,#000)}.dm-game{--dm-h: clamp(3.2rem, 13cqw, 4.4rem);--dm-gap: .35rem}.dm-tile{box-sizing:border-box;display:inline-flex;align-items:stretch;padding:.25rem;margin:0;background:var(--fgs-surface, #fff);border:3px solid var(--fgs-ink, #161616);border-radius:10px;box-shadow:0 1px 3px #0003;cursor:default;flex:0 0 auto}.dm-half{display:flex;flex-direction:column;width:var(--dm-h);height:var(--dm-h);padding:.18rem;overflow:hidden}.dm-pips{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);min-height:0}.dm-pip{grid-row:calc(var(--dr) + 1);grid-column:calc(var(--dc) + 1);width:calc(var(--dm-h) * .2);height:calc(var(--dm-h) * .2);border-radius:50%;background:var(--fgs-ink, #161616);place-self:center}.dm-num{flex:0 0 auto;text-align:right;padding-right:.12em;font-size:.8rem;font-weight:900;line-height:1.1;color:var(--fgs-ink-soft, #3a3a3a)}.dm-bar{width:3px;background:var(--fgs-ink, #161616);margin:.15rem .2rem;border-radius:2px}.dm-tile.dm-double{border-color:var(--fgs-accent, #16692f)}.dm-table{background:var(--fgs-accent-soft, #e6f1e9);border:2px solid var(--fgs-line, #bfbfbf);border-radius:var(--fgs-radius, 14px);padding:.75rem .5rem;margin-bottom:1rem}.dm-line{display:flex;align-items:center;gap:var(--dm-gap);overflow-x:auto;padding:.35rem;min-height:calc(var(--dm-h) + 1.6rem);justify-content:flex-start}.dm-line-empty{margin:0 auto;font-size:1.1rem;font-weight:700;color:var(--fgs-ink-soft, #3a3a3a)}.dm-tile.dm-end-left,.dm-tile.dm-end-right{border-color:var(--fgs-accent, #16692f);border-width:4px}.dm-endbar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem}.dm-endbtn{margin:0;min-height:var(--fgs-tap, 52px);font-size:1.1rem;font-weight:800;padding-inline:1.25rem;background:var(--fgs-accent, #16692f);border:3px solid var(--fgs-accent, #16692f);color:#fff;border-radius:var(--fgs-radius, 14px)}.dm-zone-label{display:block;font-size:.9rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fgs-ink-soft, #3a3a3a);margin-bottom:.4rem}.dm-hand,.dm-them{display:flex;flex-wrap:wrap;gap:var(--dm-gap);justify-content:center;margin-bottom:.75rem}.dm-hand-tile{cursor:pointer;min-height:var(--fgs-tap, 52px)}.dm-hand-tile.dm-playable{border-color:var(--fgs-accent, #16692f);box-shadow:0 3px 7px #00000047}.dm-hand-tile:not(.dm-playable){filter:saturate(.5) brightness(.96)}.dm-hand-tile.dm-picked{outline:5px solid var(--fgs-focus, #15549e);outline-offset:2px}.dm-them .dm-back{width:calc(var(--dm-h) * .7);height:calc(var(--dm-h) * 1.2);padding:0;background:repeating-linear-gradient(45deg,#1d4ed8,#1d4ed8 8px,#1e40af 8px 16px);border-color:#1e3a8a}.dm-bone{font-size:1.05rem;font-weight:700;color:var(--fgs-ink-soft, #3a3a3a);margin-bottom:.5rem}.dm-draw-btn{margin:0 auto .75rem;display:block;min-height:var(--fgs-tap, 52px);font-size:1.15rem;font-weight:800;padding-inline:1.5rem}.dm-draw-btn[hidden]{display:none}.dm-hint{outline:6px solid var(--fgs-hint, #b06a00)!important;outline-offset:-2px;animation:dm-pulse 1.1s ease-in-out infinite;filter:none!important}@keyframes dm-pulse{0%,to{box-shadow:0 0 0 5px color-mix(in srgb,var(--fgs-hint, #b06a00) 35%,transparent)}50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--fgs-hint, #b06a00) 22%,transparent)}}.dm-tile:focus-visible,.dm-draw-btn:focus-visible,.dm-endbtn:focus-visible{outline:4px solid var(--fgs-focus, #15549e);outline-offset:2px}.dm-status{text-align:center;font-size:1.2rem;font-weight:700;min-height:3.8rem;padding:.5rem;margin:0 auto 1rem;max-width:62ch;color:var(--fgs-ink, #161616)}.dm-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-bottom:1rem}.dm-actions button{margin:0;min-height:var(--fgs-tap, 52px);font-size:1.15rem;font-weight:800;padding-inline:1.5rem}.dm-game.dm-over .dm-table{outline:4px solid var(--fgs-good, #1c7a3a);outline-offset:4px}[data-contrast=high] .dm-firsttip{background:#fff!important;color:#000!important;border-color:#000!important}[data-contrast=high] .dm-tile{border:3px solid #000!important;background:#fff;box-shadow:none}[data-contrast=high] .dm-pip,[data-contrast=high] .dm-bar{background:#000}[data-contrast=high] .dm-num{color:#000}[data-contrast=high] .dm-hand-tile:not(.dm-playable){filter:none;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#e4e4e4 6px 12px)}[data-contrast=high] .dm-tile.dm-end-left,[data-contrast=high] .dm-tile.dm-end-right,[data-contrast=high] .dm-hand-tile.dm-playable{border-width:5px!important}[data-contrast=high] .dm-them .dm-back{background:#00339c;border-color:#000}[data-contrast=high] .dm-endbtn{background:#00339c;border-color:#000;color:#fff}[data-contrast=high] .dm-hint-btn{background:#7a4a00;border-color:#000;color:#fff}[data-contrast=high] .dm-hint{outline-color:#00339c!important}[data-contrast=high] .dm-table{background:#fff;border-color:#000}@media(prefers-reduced-motion:reduce){.dm-hint{animation:none}}.dm-hand:empty{min-height:15rem}.dm-them:empty{min-height:3.4rem}@media(min-width:430px){.dm-hand:empty{min-height:17rem}.dm-them:empty{min-height:3.9rem}}@media(min-width:701px){.dm-hand:empty{min-height:16rem}.dm-them:empty{min-height:5.3rem}}@media(max-width:429px){.dm-game{--dm-h: clamp(2.3rem, calc(25cqw - 26px) , 4.4rem);--dm-gap: .25rem}}
