.db .db-class{max-width:16rem;font-size:var(--fs-md);padding:.4375rem .625rem}.db .db-stage{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);justify-content:center;padding:1rem;display:flex;position:relative}.db .db-board{aspect-ratio:1;grid-template-rows:repeat(15,1fr);grid-template-columns:repeat(15,1fr);gap:.25rem;width:100%;max-width:40rem;display:grid}.db .db-cell{all:unset;border-radius:var(--r-xs);background:color-mix(in srgb, currentcolor 16%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, currentcolor 45%, transparent);cursor:pointer;transition:box-shadow .12s,transform .12s;display:block;position:relative}.db .db-cell:hover,.db .db-cell:focus-visible{box-shadow:inset 0 0 0 1px currentcolor, 0 0 0 2px var(--sl-color-accent);z-index:1;transform:scale(1.12)}.db .db-cell.g-11{color:var(--g-common)}.db .db-cell.g-21{color:var(--g-rare)}.db .db-cell.g-31{color:var(--g-legend)}.db .db-cell.g-41{color:var(--g-gold)}.db .db-cell.is-start{color:var(--sl-color-accent);background:var(--sl-color-accent);box-shadow:inset 0 0 0 1px var(--sl-color-accent), 0 0 0 2px color-mix(in srgb, var(--sl-color-accent) 35%, transparent)}.db .db-cell.is-skill{background:color-mix(in srgb, currentcolor 22%, transparent);overflow:hidden}.db .db-cell img{object-fit:cover;border-radius:inherit;width:100%;height:100%;display:block}.db .db-tip{z-index:5;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--well);pointer-events:none;min-width:9rem;max-width:16rem;font-size:var(--fs-sm);padding:.5rem .625rem;line-height:1.4;position:absolute;translate:-50% -100%;box-shadow:0 8px 24px -8px #0009}.db .db-tip.is-below{translate:-50%}.db .db-tip-head{align-items:center;gap:.5rem;margin-bottom:.375rem;display:flex}.db .db-tip-icon{border-radius:var(--r-xs);flex:none;width:1.75rem;height:1.75rem}.db .db-tip-title{color:var(--sl-color-white);font-weight:700}.db .db-tip-sub{font-size:var(--fs-xs);text-transform:capitalize;color:var(--sl-color-gray-3);margin-top:.0625rem;font-weight:400;display:block}.db .db-tip-list{color:var(--sl-color-gray-2);margin:0 0 .375rem;padding:0;list-style:none}.db .db-tip-list li+li{margin-top:.125rem}.db .db-tip-list .v{color:var(--sl-color-white);font-variant-numeric:tabular-nums;font-weight:600}.db .db-tip-meta{border-top:1px solid var(--line-soft);font-size:var(--fs-xs);color:var(--sl-color-gray-3);justify-content:space-between;align-items:center;gap:.5rem;padding-top:.375rem;display:flex}.db .db-legend{font-size:var(--fs-xs);color:var(--sl-color-gray-3);flex-wrap:wrap;gap:.5rem 1rem;margin-top:.875rem;display:flex}.db .db-key{align-items:center;gap:.375rem;display:inline-flex}.db .db-swatch{border-radius:var(--r-xs);background:color-mix(in srgb, currentcolor 16%, transparent);width:.75rem;height:.75rem;box-shadow:inset 0 0 0 1px color-mix(in srgb, currentcolor 45%, transparent)}.db .db-swatch.g-11{color:var(--g-common)}.db .db-swatch.g-21{color:var(--g-rare)}.db .db-swatch.g-31{color:var(--g-legend)}.db .db-swatch.g-41{color:var(--g-gold)}.db .db-swatch.is-start{color:var(--sl-color-accent);background:var(--sl-color-accent)}.db .db-swatch.is-skill{color:var(--sl-color-gray-3);background:repeating-linear-gradient(45deg,currentColor 0 2px,#0000 2px 4px)}.db .db-picker{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);margin-bottom:1rem;padding:1rem 1.25rem 1.125rem}.db .db-group+.db-group{margin-top:.875rem}.db .db-group-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--sl-color-gray-3);margin:0 0 .5rem;font-weight:600}.db .db-picker.is-stats-only .db-group-skills{display:none}.db .db-chips{flex-wrap:wrap;gap:.375rem;display:flex}.db .db-chip{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--well);height:auto;padding:.25rem .5rem;line-height:1.35}.db .db-chip:hover{border-color:var(--sl-color-accent)}.db .db-chip.is-on{border-color:var(--sl-color-accent);background:color-mix(in srgb, var(--sl-color-accent) 14%, var(--well))}.db .db-chip-icon{border-radius:var(--r-xs);flex:none;width:1.125rem;height:1.125rem}.db .db-chip .v{color:var(--sl-color-white);font-variant-numeric:tabular-nums;flex:none;font-weight:600}.db .db-board.is-focusing .db-cell{opacity:.22}.db .db-board.is-focusing .db-cell.is-lit{opacity:1;box-shadow:inset 0 0 0 1px currentcolor, 0 0 0 2px var(--sl-color-accent)}@media (prefers-reduced-motion:no-preference){.db .db-cell{transition:box-shadow .12s,transform .12s,opacity .12s}}@media (width<=55rem){.db .db-stage{padding:.5rem}.db .db-board{gap:.125rem}.db .db-picker{padding:.875rem 1rem 1rem}}