[data-theme=dark]{--sr-slot-bg: rgba(255, 255, 255, .06);--sr-slot-border: rgba(255, 255, 255, .12);--sr-slot-text: var(--text-secondary);--sr-card-bg: rgba(255, 255, 255, .1);--sr-card-border: rgba(255, 255, 255, .2);--sr-card-shadow: 0 2px 8px rgba(0, 0, 0, .45);--sr-reversed-accent: #ef4444;--sr-header-color: var(--text-primary);--sr-label-color: var(--text-muted);--sr-badge-bg: rgba(239, 68, 68, .18);--sr-badge-border: rgba(239, 68, 68, .45);--sr-hover-bg: rgba(255, 255, 255, .09);--sr-hover-scale: 1.05}[data-theme=light]{--sr-slot-bg: rgba(0, 0, 0, .04);--sr-slot-border: rgba(0, 0, 0, .1);--sr-slot-text: var(--text-secondary);--sr-card-bg: rgba(0, 0, 0, .06);--sr-card-border: rgba(0, 0, 0, .14);--sr-card-shadow: 0 2px 8px rgba(20, 16, 30, .1);--sr-reversed-accent: #dc2626;--sr-header-color: var(--text-primary);--sr-label-color: var(--text-muted);--sr-badge-bg: rgba(220, 38, 38, .1);--sr-badge-border: rgba(220, 38, 38, .35);--sr-hover-bg: rgba(0, 0, 0, .06);--sr-hover-scale: 1.05}:root{--sr-slot-width: 64px;--sr-slot-height: 90px;--sr-slot-radius: var(--radius-md);--sr-spread-gap: var(--space-md);--sr-header-font-size: var(--text-sm);--sr-label-font-size: var(--text-xs);--sr-card-name-size: 10px}.sr-spread{display:flex;flex-direction:column;align-items:center;gap:var(--sr-spread-gap);width:100%;max-width:100%;box-sizing:border-box}.sr-spread-header{font-size:var(--sr-header-font-size);font-weight:600;color:var(--sr-header-color);text-align:center;letter-spacing:.03em;opacity:.85}.sr-spread-area{position:relative;width:100%;max-width:100%}.sr-spread-area--linear{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--space-sm);position:static}.sr-slot{display:flex;flex-direction:column;align-items:center;gap:4px}.sr-slot-card{width:var(--sr-slot-width);height:var(--sr-slot-height);background:var(--sr-card-bg);border:1px solid var(--sr-card-border);border-radius:var(--sr-slot-radius);box-shadow:var(--sr-card-shadow);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px;box-sizing:border-box;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base);position:relative}.sr-slot-card-name{width:100%;text-align:center;font-size:var(--sr-card-name-size);color:var(--sr-slot-text);line-height:1.25;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;padding:0 2px}.sr-slot-reversed-badge{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--sr-reversed-accent);border:1px solid var(--sr-badge-border);box-shadow:0 0 4px #ef444466;flex-shrink:0}.sr-slot-label{font-size:var(--sr-label-font-size);color:var(--sr-label-color);text-align:center;line-height:1.3;max-width:calc(var(--sr-slot-width) + 8px);word-break:break-word}.sr-slot--filled .sr-slot-card{background:var(--sr-card-bg);border-color:var(--sr-card-border)}.sr-slot--empty .sr-slot-card{background:var(--sr-slot-bg);border:1px dashed var(--sr-slot-border);box-shadow:none}.sr-slot--reversed .sr-slot-card{border-color:var(--sr-reversed-accent);box-shadow:0 0 0 1px var(--sr-reversed-accent),var(--sr-card-shadow)}.sr-slot--reversed .sr-slot-card-name{transform:rotate(180deg);display:inline-block}.sr-spread--compact{gap:var(--space-xs)}.sr-spread--compact .sr-spread-header,.sr-spread--compact .sr-slot-label{display:none}.sr-spread--compact .sr-slot-card{--sr-slot-width: 36px;--sr-slot-height: 50px;width:36px;height:50px;border-radius:var(--radius-sm);padding:2px}.sr-spread--compact .sr-slot-card-name{font-size:8px}.sr-spread--interactive .sr-slot{cursor:pointer}.sr-spread--interactive .sr-slot:hover .sr-slot-card{transform:scale(var(--sr-hover-scale));background:var(--sr-hover-bg);box-shadow:var(--sr-card-shadow),0 4px 16px #00000040}.sr-spread--interactive .sr-slot:focus-visible .sr-slot-card{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:768px){:root{--sr-slot-width: 56px;--sr-slot-height: 78px}}@media(max-width:480px){:root{--sr-slot-width: 48px;--sr-slot-height: 67px}.sr-spread-area--linear{gap:var(--space-xs)}.sr-slot-label{font-size:9px}}@media(max-width:360px){:root{--sr-slot-width: 40px;--sr-slot-height: 56px}}@media(prefers-reduced-motion:reduce){.sr-slot-card,.sr-spread--interactive .sr-slot:hover .sr-slot-card{transition-duration:.01ms;transform:none}}@media(prefers-contrast:high){.sr-slot-card,.sr-slot--reversed .sr-slot-card{border-width:2px}}