:root{color-scheme:dark;--bg: #14161a;--panel: #1c1f26;--panel-edge: #2b303b;--ink: #e8eaf0;--dim: #8e95a6;--accent: #b566d9;--accent-ink: #f4e8fb;--good: #5fd08a;--bad: #ef6a6a;--radius: 12px;--advance-ms: .48s;--ease-out: cubic-bezier(.22, .61, .36, 1)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--accent-ink)}h1{margin:0;font-size:28px;letter-spacing:-.01em}.dim{color:var(--dim)}.app{min-height:100vh;display:flex;flex-direction:column}main{flex:1;width:min(1040px,100%);margin:0 auto;padding:18px 16px 28px}.topbar{width:min(1040px,100%);margin:0 auto;padding:14px 16px 0;display:flex;justify-content:flex-end}.lang{display:flex;gap:2px;padding:2px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px}.lang-option{padding:3px 12px;font:inherit;font-size:12px;color:var(--dim);background:transparent;border:0;border-radius:999px;cursor:pointer;transition:color .12s,background-color .12s}.lang-option:hover{color:var(--ink)}.lang-option.on{color:var(--accent-ink);background:#b566d938}.footer{padding:14px 16px 22px;text-align:center;font-size:12px;color:var(--dim)}.panel{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px;animation:panel-in .24s var(--ease-out) both}@keyframes panel-in{0%{opacity:0;transform:translateY(6px)}}.panel.centred{align-items:center;text-align:center;padding-top:60px}.lede{margin:0;color:var(--dim)}.field{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0}.label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}.hint{margin:0;font-size:12px;color:var(--dim)}input.query{width:100%;padding:12px 14px;font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px}input.query:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:5px 11px;font:inherit;font-size:13px;color:var(--dim);background:transparent;border:1px solid var(--panel-edge);border-radius:999px;cursor:pointer;transition:color .12s,border-color .12s,background-color .12s}.chip:hover{color:var(--ink);border-color:var(--dim)}.chip.on{color:var(--accent-ink);background:#b566d92e;border-color:var(--accent)}.chip.dice{border-style:dashed}.options{display:flex;flex-direction:column;gap:8px}.options.row{flex-direction:row}.option{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:4px 10px;padding:10px 14px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:10px;cursor:pointer;transition:border-color .12s,background-color .12s}.options.row .option{display:flex}.option:hover{border-color:var(--dim)}.option.on{border-color:var(--accent);background:linear-gradient(#b566d914,#b566d914),var(--panel)}.option input{accent-color:var(--accent)}.option-name{text-transform:capitalize;font-weight:600}.option-gap{font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:#b566d929;border-radius:999px;padding:2px 9px;justify-self:start}.option-about{grid-column:2 / -1;display:flex;flex-direction:column;font-size:13px}.custom{display:flex;flex-direction:column;gap:16px;margin:-2px 0 2px;padding:16px;background:var(--panel);border:1px solid var(--accent);border-top-width:0;border-radius:0 0 10px 10px;animation:custom-in .2s var(--ease-out) both}@keyframes custom-in{0%{opacity:0;transform:translateY(-6px)}}.custom-note{margin:-6px 0 0;font-size:12px;color:var(--dim)}.slider{display:flex;flex-direction:column;gap:6px}.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--dim)}.slider-value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}.slider-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}.slider input[type=range]{width:100%;accent-color:var(--accent)}.dual{position:relative;height:26px;display:grid;align-items:center}.dual-track,.dual-fill{grid-area:1 / 1;height:4px;border-radius:999px;pointer-events:none}.dual-track{background:var(--panel-edge)}.dual-fill{margin-left:var(--lo);width:calc(var(--hi) - var(--lo));background:var(--accent)}.dual-input{grid-area:1 / 1;width:100%;margin:0;height:26px;background:none;appearance:none;pointer-events:none}.dual-input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--accent-ink);border:3px solid var(--accent);cursor:grab}.dual-input::-moz-range-thumb{pointer-events:auto;width:12px;height:12px;border-radius:50%;background:var(--accent-ink);border:3px solid var(--accent);cursor:grab}.dual-input:focus-visible{outline:none}.dual-input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:2px}.dual-input:focus-visible::-moz-range-thumb{outline:2px solid var(--accent);outline-offset:2px}.actions{display:flex;align-items:center;gap:16px}.stats{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0}.stats dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}.stats dd{margin:2px 0 0;font-size:20px;font-variant-numeric:tabular-nums}.stats.big dd{font-size:26px}button.primary{align-self:flex-start;padding:12px 24px;font:inherit;font-weight:600;color:var(--accent-ink);background:var(--accent);border:0;border-radius:10px;cursor:pointer;transition:filter .12s,transform .12s}button.primary:hover:not(:disabled){filter:brightness(1.1)}button.primary:active:not(:disabled){transform:translateY(1px)}button.primary:disabled{opacity:.5;cursor:progress}button.link{padding:0;font:inherit;color:var(--dim);background:none;border:0;text-decoration:underline;cursor:pointer}button.link:hover{color:var(--ink)}.notice{margin:0;padding:12px 14px;background:#ef6a6a1f;border:1px solid rgba(239,106,106,.4);border-radius:10px;display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}.spinner{width:28px;height:28px;margin:0;border:3px solid var(--panel-edge);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.play{display:flex;flex-direction:column;gap:20px}.hud{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;padding-bottom:12px;border-bottom:1px solid var(--panel-edge)}.hud-query{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-stats{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-variant-numeric:tabular-nums}.difficulty{text-transform:capitalize}.lives .life{color:var(--accent)}.lives .life.spent{color:var(--panel-edge)}.board{--vs: 52px;--board-gap: 14px;--shift: calc(100% + var(--vs) + var(--board-gap) * 2);display:grid;grid-template-columns:1fr var(--vs) 1fr;gap:var(--board-gap);align-items:stretch;overflow:clip;overflow-clip-margin:4px}.slot-leaving,.slot-left{grid-area:1 / 1}.versus{grid-area:1 / 2;align-self:center;text-align:center;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.slot-right{grid-area:1 / 3}.slot-leaving{z-index:2;pointer-events:none}.board.advancing .slot-left,.board.advancing .slot-right{animation:conveyor-in var(--advance-ms) var(--ease-out) both}.board.advancing .slot-right{animation-name:conveyor-enter}.board.advancing .slot-leaving{animation:conveyor-out var(--advance-ms) var(--ease-out) both}@keyframes conveyor-in{0%{transform:translate(var(--shift))}}@keyframes conveyor-enter{0%{transform:translate(var(--shift));opacity:0}}@keyframes conveyor-out{to{transform:translate(calc(-1 * var(--shift)));opacity:0}}.card{min-width:0;padding:0;font:inherit;color:inherit;text-align:center;background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);overflow:hidden;transition:border-color .16s,transform .16s}.card.pickable{cursor:pointer}.card.pickable:hover,.card.pickable:focus-visible{border-color:var(--accent);transform:translateY(-2px)}.card.picked{border-color:var(--accent)}.card.winner{border-color:var(--good)}.card.winner .count{color:var(--good)}.card-image{display:flex;align-items:center;justify-content:center;aspect-ratio:4 / 3;background:#0d0f12;font-size:13px}.card-image img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .22s ease-out}.card-image.loading{background:linear-gradient(100deg,#0d0f12 30%,#171b21,#0d0f12 70%) right / 300% 100%;animation:shimmer 1.1s linear infinite}.card-image.loading img{opacity:0}@keyframes shimmer{to{background-position:left}}.card-body{padding:14px 12px 18px}.character{margin:0;font-size:19px;font-weight:600}.count{margin:8px 0 0;font-size:26px;font-variant-numeric:tabular-nums}.count .dim{font-size:14px}.count.unknown{color:var(--dim);letter-spacing:.1em}.delta,.card .count:not(.unknown){animation:reveal-in .32s var(--ease-out) both}.delta{margin:4px 0 0;font-size:14px;font-variant-numeric:tabular-nums;animation-delay:60ms}@keyframes reveal-in{0%{opacity:0;transform:translateY(6px)}}.delta.up{color:var(--good)}.delta.down{color:var(--bad)}.prompt{margin:0;text-align:center;color:var(--dim)}.verdict{display:flex;align-items:center;justify-content:center;gap:20px}.verdict p{margin:0;font-size:20px;font-weight:600;animation:reveal-in .32s var(--ease-out) both}.verdict .right{color:var(--good)}.verdict .wrong{color:var(--bad)}.hold{position:relative;width:170px;padding:9px 14px;font:inherit;font-size:13px;color:var(--dim);background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px;overflow:hidden;cursor:pointer}.hold:hover:not(:disabled){color:var(--ink);border-color:var(--dim)}.hold-label{position:relative}.hold-fill{position:absolute;inset:0;transform-origin:left;background:#b566d940;animation:drain var(--hold-ms) linear both}@keyframes drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media(max-width:640px){main{padding:14px 14px 20px}.topbar{padding:10px 14px 0}.board{--vs: 0px;--board-gap: 10px;grid-template-columns:1fr;grid-template-rows:auto auto auto}.slot-leaving,.slot-left{grid-area:1 / 1}.versus{grid-area:2 / 1}.slot-right{grid-area:3 / 1}.card-image{aspect-ratio:16 / 9}.board.advancing .slot-left,.board.advancing .slot-right{animation-name:stacked-in}.board.advancing .slot-leaving{animation-name:stacked-out}@keyframes stacked-in{0%{opacity:0;transform:translateY(14px)}}@keyframes stacked-out{to{opacity:0;transform:translateY(-14px)}}.hold{width:130px}.verdict{gap:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}.hold-fill{display:none}}