/* Pips board, tray and dominoes. Tokens come from style.css (Moonlit). */
:root { --reg1: #f8d56a; --reg2: #b3aef5; --reg3: #8fe0c0; --reg4: #f9ab9e; --reg5: #9fc6f6; --reg6: #e6a6ea; --reg7: #f8c48e; --reg8: #c2e58a; --target: #2fa37a; --hint: #e9b54a; }
[data-theme='dark'] { --reg1: #8a6d1c; --reg2: #5450b8; --reg3: #2b7a60; --reg4: #a0504a; --reg5: #33629c; --reg6: #7d4491; --reg7: #9a642c; --reg8: #587a24; --target: #4fd0a0; --hint: #f2c25a; }
.pips { width: 100%; -webkit-touch-callout: none; --cs: 56px; --gap: 4px; --ds: 40px; position: relative; user-select: none; -webkit-user-select: none; }
.pips-stage { position: relative; }
.pips-board { display: grid; gap: var(--gap); justify-content: center; margin: 0 auto; position: relative; padding: 6px; }
.pips-cell { width: var(--cs); height: var(--cs); border-radius: 10px; background: var(--cell); position: relative; transition: box-shadow .12s ease, background-color .12s ease; }
.pips-cell.void { visibility: hidden; }
.pips-cell.r0 { background: var(--reg1); } .pips-cell.r1 { background: var(--reg2); } .pips-cell.r2 { background: var(--reg3); } .pips-cell.r3 { background: var(--reg4); }
.pips-cell.r4 { background: var(--reg5); } .pips-cell.r5 { background: var(--reg6); } .pips-cell.r6 { background: var(--reg7); } .pips-cell.r7 { background: var(--reg8); }
.pips-cell.target { box-shadow: inset 0 0 0 3px var(--target); }
.pips-cell.target-bad { box-shadow: inset 0 0 0 3px var(--bad); }
.pips-cell.hit { animation: cellpop .35s ease; }
@keyframes cellpop { 0% { transform: scale(1); } 40% { transform: scale(.94); } 100% { transform: scale(1); } }

/* rule badge: capsule hanging off the top-right corner of the region's top-right cell */
.pips-badge { position: absolute; z-index: 8; display: inline-flex; align-items: center; gap: 0; transform: translate(-58%, -50%); font-family: var(--display); font-weight: 800; font-size: clamp(11px, calc(var(--cs) * .26), 15px); line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: 0 2px 6px rgba(27, 26, 63, .18); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; pointer-events: none; }
.pips-badge .cur { font-weight: 600; opacity: .55; padding-right: 6px; margin-right: 6px; border-right: 1.5px solid currentColor; }
.pips-badge.valid { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.pips-badge.invalid .cur { opacity: .85; }
.pips-badge.invalid { background: var(--bad); color: #fff; border-color: transparent; }
.pips-badge.flip { animation: badgeflip .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes badgeflip { 0% { transform: translate(-58%, -50%) scale(1); } 45% { transform: translate(-58%, -50%) scale(1.28) rotate(-6deg); } 100% { transform: translate(-58%, -50%) scale(1); } }

/* tray */
.pips-tray { display: grid; grid-template-columns: repeat(4, calc(var(--ds) * 2 + 8px)); gap: 10px; justify-content: center; margin: 18px auto 0; padding: 8px 0 4px; }
.pips-slot { width: calc(var(--ds) * 2 + 8px); height: calc(var(--ds) * 2 + 8px); border-radius: 12px; background: color-mix(in srgb, var(--cell) 55%, transparent); border: 1.5px dashed color-mix(in srgb, var(--line-strong) 60%, transparent); }
.pips-hint-txt { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; }

/* dominoes: base size 2cs × cs, positioned with transform inside the stage */
.pips-doms { position: absolute; inset: 0; pointer-events: none; }
.dom { position: absolute; left: 0; top: 0; width: calc(var(--cs) * 2); height: var(--cs); pointer-events: auto; cursor: grab; z-index: 5; touch-action: none; transform-origin: center; transition: transform .4s cubic-bezier(.3, .9, .3, 1.05), filter .25s ease; will-change: transform; display: flex; padding: calc(var(--cs) * .1); box-sizing: border-box; }
.dom::before { content: ""; position: absolute; inset: -10px; }          /* bigger hit area on the board */
.dom.tray::before { inset: -45% -30%; }                                    /* in the tray the whole slot grabs the domino */
.dom.dragging { transition: none; cursor: grabbing; z-index: 20; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .28)); }
.dom.snap { transition: transform .2s ease; }
.dom .half { flex: 1; display: grid; place-items: center; background: var(--tile); position: relative; }
.dom .half:first-child { border-radius: 8px 0 0 8px; }
.dom .half:last-child { border-radius: 0 8px 8px 0; border-left: 1.5px solid color-mix(in srgb, var(--tile-ink) 28%, transparent); }
.dom .face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 72%; height: 72%; gap: 3%; }
.dom .face i { border-radius: 50%; background: var(--tile-ink); opacity: 0; transform: scale(.55); }
.dom .face i.on { opacity: 1; }
.dom.placed { cursor: grab; }
.dom.placed .half { box-shadow: 0 2px 0 color-mix(in srgb, var(--tile-ink) 20%, transparent); }
.dom.tray .half { box-shadow: 0 3px 0 color-mix(in srgb, var(--tile-ink) 22%, transparent); }
.dom.bad .half { background: var(--bad); }
.dom.bad { animation: shake .55s ease; }
@keyframes shake { 0%, 100% { margin-left: 0; } 17% { margin-left: -4px; } 34% { margin-left: 4px; } 51% { margin-left: -4px; } 68% { margin-left: 4px; } 85% { margin-left: -2px; } }
.dom.glow { filter: drop-shadow(0 0 10px var(--hint)) drop-shadow(0 0 4px var(--hint)); }
.dom.pulse .half { animation: pulse .55s ease; }
@keyframes pulse { 0% { background: var(--tile); } 40% { background: var(--hint); } 100% { background: var(--tile); } }
.pips.locked .dom { pointer-events: none; cursor: default; }

/* confetti canvas */
.pips-confetti { position: absolute; inset: -40px 0 0; width: 100%; height: calc(100% + 40px); pointer-events: none; z-index: 30; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-icon .cnt { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.btn-icon { position: relative; }
.btn-icon:disabled .cnt { background: var(--line); color: var(--ink-faint); }

/* difficulty segmented control */
.pips-diff { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.pips-diff button { border: 0; background: transparent; color: var(--ink-soft); padding: 8px 16px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pips-diff button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.pips-diff button .st { font-size: 11px; font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.pips-diff button .st.done::before { content: "✓ "; }

@media (max-width: 480px) { .pips-tray { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .dom { transition: none; } }