@layer components{:root{--legend-ink: #f3f7ff;--legend-segment: #4d6a94}[data-row]{--row: var(--board-ink);--row-band: color-mix(in srgb, var(--row) 9%, var(--board-tile))}[data-row=yellow]{--row: #f0b04a}[data-row=red]{--row: #e58bb6}[data-row=brown]{--row: #b9938d}[data-row=green]{--row: #58c97f}[data-row=white]{--row: #a9bfc7}.legend-preview-band{fill:var(--row-band)}.legend-preview-edge{fill:var(--row)}.legend-preview-icon[data-state=unbought]{filter:saturate(.4) brightness(.7)}.legend-preview-selected{fill:none;stroke:var(--gold);stroke-width:3}.legend-preview-level{fill:var(--legend-ink);font-family:var(--font-display);font-size:var(--text-sm)}.legend-preview-level[data-state=unbought]{fill:var(--board-ink)}.legend-preview-level[data-state=maxed]{fill:var(--gold)}.legend-preview-segment{fill:var(--legend-segment)}.legend-preview-segment[data-bought]{fill:var(--gold)}.legend-board{display:grid;gap:6px;container-type:inline-size}.legend-row{display:grid;grid-template-columns:clamp(56px,7cqi,80px) minmax(0,1fr);align-items:center;gap:6px;padding:10px clamp(10px,1.5cqi,16px) 10px 0;border-left:4px solid var(--row);border-radius:5px;background:var(--row-band)}.legend-row-name{padding-left:10px;color:color-mix(in srgb,var(--row) 60%,#fff);font-family:var(--font-display);font-size:clamp(13px,1.5cqi,16px)}.legend-row-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,1.5cqi,18px)}.legend-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:clamp(4px,.7cqi,8px);width:100%;padding:0;border:0;border-radius:6px;background:none;color:var(--legend-ink)}.legend-tile:focus-visible{outline-color:#fff}.legend-tile>[data-sprite]{display:block;width:100%;height:auto;border-radius:15%}button.legend-tile:after{content:"";position:absolute;inset:-4px -4px auto;aspect-ratio:1;border-radius:20%;pointer-events:none}button.legend-tile:hover:after{box-shadow:inset 0 0 0 2px var(--board-ink)}button.legend-tile[aria-pressed=true]:after{box-shadow:inset 0 0 0 3px var(--gold),0 0 16px #efc86b80}.legend-tile[aria-pressed=true]>[data-sprite]{animation:legend-tile-pick .3s cubic-bezier(.2,.9,.3,1.4)}.legend-tile[data-state=unbought]>[data-sprite]{filter:saturate(.4) brightness(.7)}.legend-tile[data-state=locked]>[data-sprite]{opacity:.5}.legend-tile-level{font-family:var(--font-display);font-size:clamp(10px,2cqi,22px);line-height:1;white-space:nowrap;text-shadow:1px 0 0 var(--board-deep),-1px 0 0 var(--board-deep),0 -1px 0 var(--board-deep),0 2px 0 var(--board-deep)}.legend-tile[data-state=unbought] .legend-tile-level{color:var(--board-ink)}.legend-tile[data-state=maxed] .legend-tile-level{color:var(--gold)}.legend-tile-bar,.legend-key-bar{width:80%;height:clamp(3px,.5cqi,6px);background:linear-gradient(90deg,var(--gold) calc(100% * var(--level) / var(--max)),var(--legend-segment) 0);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100% / var(--max) - 1px),transparent 0 calc(100% / var(--max))) 0 0 / calc(100% + 1px) 100%;mask:repeating-linear-gradient(90deg,#000 0 calc(100% / var(--max) - 1px),transparent 0 calc(100% / var(--max))) 0 0 / calc(100% + 1px) 100%}@container (max-width: 520px){.legend-row{grid-template-columns:minmax(0,1fr);padding:7px 5px 7px 4px;border-left-width:3px}.legend-row-name{display:none}.legend-row-tiles{gap:4px}.legend-tile-level{text-shadow:1px 0 0 var(--board-deep),-1px 0 0 var(--board-deep),0 1px 0 var(--board-deep),0 -1px 0 var(--board-deep)}.legend-tile-bar{width:88%}}.legend-key-bar{--level: 2;--max: 4;width:24px;height:4px}}@keyframes legend-tile-pick{0%{transform:rotate(12deg) scale(.9)}}