/* Doubloo — warm pastel tiles that get more saturated as numbers grow. */
:root {
  --db-board: #e9dccb; --db-cell: #f6eddf; --db-ink: #3a2a2f; --db-ink-hi: #fff;
  --db-e0: #fff1c9; --db-e1: #ffe3a3; --db-e2: #ffd08a; --db-e3: #ffb877; --db-e4: #ff9f7a; --db-e5: #ff8a8f; --db-e6: #f574a8;
  --db-e7: #d96ac4; --db-e8: #9a54cc; --db-e9: #7360d8; --db-e10: #3f6fd6; --db-e11: #1d8a9c; --db-e12: #157a4d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --db-board: #35303f; --db-cell: #28242f; --db-ink: #2c1f27;
    --db-e0: #e9d9a8; --db-e1: #eccb85; --db-e2: #ecb76f; --db-e3: #ec9f5f; --db-e4: #ea8864; --db-e5: #e5737a; --db-e6: #dc5f95; --db-e7: #c256b0; --db-e8: #9a54cc; --db-e9: #7360d8; --db-e10: #4d7be0; --db-e11: #2a9bb0; --db-e12: #1f9462; }
}
:root[data-theme="dark"] { --db-board: #35303f; --db-cell: #28242f; --db-ink: #2c1f27;
  --db-e0: #e9d9a8; --db-e1: #eccb85; --db-e2: #ecb76f; --db-e3: #ec9f5f; --db-e4: #ea8864; --db-e5: #e5737a; --db-e6: #dc5f95; --db-e7: #c256b0; --db-e8: #9a54cc; --db-e9: #7360d8; --db-e10: #4d7be0; --db-e11: #2a9bb0; --db-e12: #1f9462; }

.db-sess { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.db-sess[hidden] { display: none; }
.db-btn:focus-visible, .db-board:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.db-how { margin: 0; max-width: 340px; text-align: center; font-size: .82rem; line-height: 1.35; }
.db-stats { display: flex; gap: 8px; width: min(100%, 340px); }
.db-stat { position: relative; flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 5px 4px; text-align: center; line-height: 1.2; }
.db-stat small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.db-stat .v { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.gain { position: absolute; right: 8px; top: -2px; font-weight: 800; font-size: .85rem; color: var(--accent); opacity: 0; pointer-events: none; }
.gain.on { animation: db-gain .8s ease-out; }
@keyframes db-gain { 0% { opacity: 1; transform: translateY(4px); } 100% { opacity: 0; transform: translateY(-16px); } }

.db-board { --g: 8px; width: min(100%, 340px); aspect-ratio: 1; padding: var(--g); background: var(--db-board); border-radius: 16px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-sizing: border-box; }
.db-board.nope { animation: db-nope .2s; }
@keyframes db-nope { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.db-in { position: relative; width: 100%; height: 100%; }
.db-cells { position: absolute; inset: 0; display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: var(--g); }
.db-cell { background: var(--db-cell); border-radius: 10px; }
.db-tiles { position: absolute; inset: 0; }
.db-tile, .coin { position: absolute; left: 0; top: 0; width: calc((100% - 3 * var(--g)) / 4); aspect-ratio: 1; transform: translate(calc(var(--x) * (100% + var(--g))), calc(var(--y) * (100% + var(--g)))); transition: transform .11s ease-out; }
.db-tile .in { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 10px; font-weight: 850; font-size: 1.9rem; color: var(--db-ink); background: var(--db-e0); font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.db-tile[data-len="3"] .in { font-size: 1.6rem; } .db-tile[data-len="4"] .in { font-size: 1.3rem; } .db-tile[data-len="5"] .in, .db-tile[data-len="6"] .in { font-size: 1.05rem; } .db-tile[data-len="7"] .in { font-size: .9rem; }
.db-tile .in.new { animation: db-new .16s ease-out; }
.db-tile .in.pop { animation: db-pop .2s ease-out; position: relative; }
.db-tile .in.pop::after { content: ''; position: absolute; inset: -3px; border-radius: 13px; border: 3px solid #f2b01e; opacity: 0; animation: db-ring .4s ease-out; }
@keyframes db-new { from { transform: scale(.3); opacity: 0; } }
@keyframes db-pop { 50% { transform: scale(1.15); } }
@keyframes db-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.2); } }
.coin { display: grid; place-items: center; font-size: 1.3rem; pointer-events: none; transition: none; animation: db-coin .65s ease-out forwards; }
@keyframes db-coin { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -34px; } }
.db-tile[data-e="0"] .in, .db-tile .in { background: var(--db-e0); }
.db-tile[data-e="1"] .in, .mc[data-e="1"] { background: var(--db-e1); } .db-tile[data-e="2"] .in, .mc[data-e="2"] { background: var(--db-e2); }
.db-tile[data-e="3"] .in, .mc[data-e="3"] { background: var(--db-e3); } .db-tile[data-e="4"] .in, .mc[data-e="4"] { background: var(--db-e4); }
.db-tile[data-e="5"] .in, .mc[data-e="5"] { background: var(--db-e5); } .db-tile[data-e="6"] .in, .mc[data-e="6"] { background: var(--db-e6); }
.db-tile[data-e="7"] .in, .mc[data-e="7"] { background: var(--db-e7); } .db-tile[data-e="8"] .in, .mc[data-e="8"] { background: var(--db-e8); }
.db-tile[data-e="9"] .in, .mc[data-e="9"] { background: var(--db-e9); } .db-tile[data-e="10"] .in, .mc[data-e="10"] { background: var(--db-e10); }
.db-tile[data-e="11"] .in, .mc[data-e="11"] { background: var(--db-e11); } .db-tile[data-e="12"] .in, .mc[data-e="12"] { background: var(--db-e12); }
.mc[data-e="0"] { background: var(--db-e0); }
.db-tile:is([data-e="8"], [data-e="9"], [data-e="10"], [data-e="11"], [data-e="12"]) .in, .mc:is([data-e="8"], [data-e="9"], [data-e="10"], [data-e="11"], [data-e="12"]) { color: var(--db-ink-hi); }

.db-msg { min-height: 1.3em; font-weight: 700; font-size: .92rem; text-align: center; margin: 0; }
.db-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.db-pad { display: flex; gap: 4px; }
.db-btn { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 1.15rem; cursor: pointer; touch-action: manipulation; padding: 0; }
.db-btn:active { transform: translateY(1px); background: var(--line); }
.db-fin { min-height: 44px; }

.db-end { text-align: center; }
.db-end p { margin: 6px 0; }
.db-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 176px; margin: 8px auto; padding: 6px; background: var(--db-board); border-radius: 12px; }
.mc { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: var(--db-cell); font-weight: 800; font-size: .8rem; color: var(--db-ink); }
.mc[data-len="3"] { font-size: .7rem; } .mc[data-len="4"] { font-size: .58rem; } .mc[data-len="5"], .mc[data-len="6"] { font-size: .5rem; }
@media (prefers-reduced-motion: reduce) { .db-tile, .coin { transition: none; } .db-tile .in, .db-board, .gain, .coin, .db-tile .in::after { animation: none !important; } }