:root{--random:#d9541e;--random-soft:#fde9df;--on-random:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--random:#ff8a57;--random-soft:#3a2118;--on-random:#1a0d06}}:root[data-theme=dark]{--random:#ff8a57;--random-soft:#3a2118;--on-random:#1a0d06}.rnd-page{overscroll-behavior:auto;height:auto;min-height:100%}.rnd{min-height:100dvh;padding-top:env(safe-area-inset-top);grid-template-rows:auto 1fr auto;display:grid}.rnd .home-link{display:grid}.rnd-back{color:inherit;margin-left:auto;text-decoration:none}.rnd-main{width:min(100%,980px);padding:24px var(--gutter);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;place-items:start stretch;gap:32px;margin:0 auto;display:grid}.rnd-machine{justify-items:center;gap:16px;display:grid}.reel{--cw:clamp(96px, calc((100dvh - 250px) / 4.8), 168px);--ch:calc(var(--cw) * var(--cover-hw,1.5556));--gap:10px;width:calc(var(--cw) + 28px);height:calc(var(--ch) * 3 + var(--gap) * 2 + 28px);border:1px solid var(--line);background:var(--map-bg);box-shadow:var(--shadow);border-radius:18px;padding:14px;position:relative;overflow:clip}.reel-strip{gap:var(--gap);will-change:transform;display:grid}.cell{width:var(--cw);height:var(--ch);background:var(--surface-hover);border-radius:8px;position:relative;overflow:clip}.cell img{object-fit:cover;width:100%;height:100%;display:block}.cell.broken{text-align:center;border:1px solid var(--line);place-items:center;padding:8px;display:grid}.cell-t{font-size:var(--fs-xs);color:var(--muted)}.reel:before,.reel:after{content:"";z-index:2;pointer-events:none;height:28%;position:absolute;left:0;right:0}.reel:before{background:linear-gradient(var(--map-bg), transparent);top:0}.reel:after{background:linear-gradient(transparent, var(--map-bg));bottom:0}.reel-frame{z-index:3;height:calc(var(--ch) + 12px);border:2px solid var(--random);pointer-events:none;transition:box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);border-radius:12px;position:absolute;top:50%;left:6px;right:6px;translate:0 -50%}.reel-frame.won{box-shadow:0 0 0 4px var(--random-soft), 0 0 28px var(--random)}.btn.spin{width:min(100%,260px);min-height:48px;font-size:var(--fs-lg);background:var(--random);border-color:var(--random);color:var(--on-random);font-weight:700}.btn.spin:disabled{opacity:.6}.rnd-side{align-content:start;gap:16px;min-width:0;display:grid}.rnd-result{opacity:0;min-height:0;transition:opacity .3s var(--ease-out), translate .3s var(--ease-out);gap:8px;display:grid;translate:0 8px}.rnd-result:empty{display:none}.rnd-result.on{opacity:1;translate:0}.rnd-kicker{color:var(--random);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;font-weight:700}.rnd-title{letter-spacing:-.015em;overflow-wrap:anywhere;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.2}.rnd-meta{color:var(--muted);font-variant-numeric:tabular-nums}.rnd-cat{font-size:var(--fs-sm);color:var(--muted)}.rnd-tags{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.rnd-tag{border:1px solid var(--line);font-size:var(--fs-xs);background:var(--surface);border-radius:999px;padding:2px 10px}.rnd-actions{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.rnd-actions .btn{color:inherit;text-decoration:none}.rnd-actions .btn.primary{color:var(--on-accent)}.rnd-filters{border:1px solid var(--line);background:var(--panel);border-radius:12px}.rnd-filters>summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 14px;font-weight:600;list-style:none;display:flex}.rnd-filters>summary::-webkit-details-marker{display:none}.rnd-filters>summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);width:8px;height:8px;transition:rotate .2s var(--ease-out);flex:none;rotate:45deg}.rnd-filters[open]>summary:after{rotate:-135deg}.rnd-filters>summary .muted{font-weight:400;font-size:var(--fs-sm);text-align:right;margin-left:auto}.rnd-filters-body{gap:14px;padding:4px 14px 14px;display:grid}.rnd-filters-body[inert]{opacity:.5}.f-group{justify-items:start;gap:8px;display:grid}.f-group h3{font-size:var(--fs-sm);color:var(--muted);font-weight:600}.chip.cat{align-items:center;gap:6px;display:inline-flex}.chip .dot{border-radius:50%;flex:none;width:8px;height:8px}.f-note{font-size:var(--fs-xs)}.f-sub{width:100%}.f-sub>summary{color:var(--accent);font-size:var(--fs-sm);cursor:pointer;align-items:center;gap:6px;padding:6px 0;font-weight:550;list-style:none;display:flex}.f-sub>summary::-webkit-details-marker{display:none}.f-sub>summary:before{content:"";width:6px;height:6px;transition:rotate .16s var(--ease-out);border-bottom:1.75px solid;border-right:1.75px solid;flex:none;margin-right:4px;rotate:-45deg}.f-sub[open]>summary:before{rotate:45deg}.f-sub-count{font-weight:400}.f-sub-body{overscroll-behavior:contain;gap:14px;max-height:min(320px,46dvh);margin-top:4px;padding-right:4px;display:grid;overflow-y:auto}.f-sub-group{gap:6px;display:grid}.f-sub-group h4{color:var(--muted);font-size:var(--fs-xs);margin:0;font-weight:600}@media (prefers-reduced-motion:reduce){.f-sub>summary:before{transition:none}}.rnd-foot{padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));font-size:var(--fs-xs);text-align:center}@media (max-width:760px){.rnd-main{grid-template-columns:minmax(0,1fr);align-content:start;gap:20px;padding-top:16px}.reel{--cw:clamp(88px, calc((100dvh - 330px) / 4.8), 132px)}.rnd-side{justify-self:center;width:100%;max-width:520px}}@media (hover:hover){.rnd-back:hover{border-color:var(--random)}}@media (prefers-reduced-motion:reduce){.rnd-result,.reel-frame{transition:none}.rnd-result{translate:0}}.spin-row{justify-content:center;align-items:center;gap:8px;width:min(100%,320px);display:flex}.spin-row .spin{flex:auto}.spin-row .icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;flex:none;place-items:center;width:48px;height:48px;display:grid}.f-group.wide{justify-items:stretch}.f-group h3 .score-val{margin-left:6px;font-weight:500}.rnd-filters .range{margin-inline:4px}html[data-map=steam] .reel{--cw:clamp(190px, calc((100dvh - 250px) / 1.6), 340px)}
