/* Community skill-tree builds. Raider UI design system (docs/design/DESIGN-SYSTEM.md): navy panels, pill filters,
   black tag chips, yellow for the main verb and for points, mono numbers, cream ring on hover/focus. */
.sb-page {
    --bg: #07090f; --bg-2: #0b0f1b; --panel: #0f1525; --panel-2: #161e33; --panel-3: #222b42;
    --line: rgba(205,218,255,.12); --line-2: rgba(205,218,255,.26);
    --paper: #f8ede1; --ink: #0d111b;
    --text: #eef0f5; --muted: #9199ab; --dim: #5e6678;
    --yellow: #ffc21a; --yellow-2: #ffd75a;
    --tree-green: #22f07a; --tree-yellow: #ffd21a; --tree-red: #ff2a2a;
    --f-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-display: 'Outfit', 'Barlow', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --gutter: 48px;
    background: var(--bg) radial-gradient(1200px 600px at 15% -10%, rgba(40,60,120,.22), transparent 60%) no-repeat;
    color: var(--text); font-family: var(--f-ui);
}
@media (max-width: 1100px) { .sb-page { --gutter: 28px; } }
@media (max-width: 760px) { .sb-page { --gutter: 16px; } }
.sb-page :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.sb [hidden] { display: none !important; }

.sb { max-width: 1440px; margin: 0 auto; padding: 40px var(--gutter) 72px; }
.sb a { color: inherit; }

/* ---- head ---- */
.sb-over { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sb-over a { text-decoration: none; } .sb-over a:hover { color: var(--text); }
.sb-head h1 { margin: 6px 0 12px; font: 900 clamp(40px, 5.4vw, 80px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .005em; }
.sb-lead { max-width: 760px; margin: 0 0 20px; color: var(--muted); font-size: 17px; line-height: 1.45; }
.sb-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- pills / buttons ---- */
.sb-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: 700 13px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; }
.sb .sb-pill-yellow { background: var(--yellow); color: #000; }
.sb .sb-pill-yellow:hover { background: var(--yellow-2); box-shadow: 0 6px 20px rgba(255,194,26,.25); }
.sb-pill-outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line-2); }
.sb-pill-outline:hover, .sb-pill-outline[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; }
.sb-pill-outline[aria-pressed="true"] { background: rgba(255,255,255,.08); }
.sb-pill-ghost { background: var(--panel-3); color: #d6dbe6; }
.sb-pill-ghost:hover { background: #2e3854; color: #fff; }
.sb-pill-lg { height: 46px; padding: 0 24px; font-size: 15px; }

/* ---- filters ---- */
.sb-filters { margin: 34px 0 22px; padding: 12px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sb-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sb-group { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-sep { width: 1px; height: 24px; background: var(--line-2); }
.sb-fpill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .15s, box-shadow .15s; }
.sb-fpill:hover { color: var(--text); }
.sb-fpill[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.sb-fpill i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sb-conditioning { --c: var(--tree-green); } .sb-mobility { --c: var(--tree-yellow); } .sb-survival { --c: var(--tree-red); }
.sb-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; min-width: 240px; border-radius: 999px; background: var(--panel-3); color: var(--muted); }
.sb-search:focus-within { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.sb-search svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.sb-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 500 15px var(--f-ui); }
.sb-search input:focus { outline: none; }
.sb-search input::placeholder { color: var(--dim); }

/* ---- grid + cards ---- */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; min-height: 120px; transition: opacity .15s; }
.sb-grid.is-loading { opacity: .45; }
.sb-card { display: flex; flex-direction: column; background: rgba(15,21,37,.92); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: outline-color .15s, transform .15s; outline: 2px solid transparent; outline-offset: 4px; }
.sb-card:hover { outline-color: var(--paper); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .sb-card:hover { transform: none; } }
.sb-thumb { position: relative; display: block; aspect-ratio: 640 / 322; background: #111929; border-bottom: 1px solid var(--line); overflow: hidden; }
.sb-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s; }
.sb-thumb.is-drawn canvas { opacity: 1; }
.sb-thumb:not(.is-drawn)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%) 0 0 / 200% 100%; animation: sb-shimmer 1.4s linear infinite; }
@keyframes sb-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sb-thumb::after { animation: none !important; } }
.sb-total { position: absolute; right: 10px; top: 10px; padding: 5px 9px; border-radius: 3px; background: var(--yellow); color: #000; font: 700 12px/1 var(--f-ui); letter-spacing: .05em; }
.sb-total b { font: 700 14px/1 var(--f-mono); font-variant-numeric: tabular-nums; }

.sb-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 2px; background: #05070c; color: #fff; font: 600 12px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
.sb-tag::before { content: ''; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--dim); }
.sb-tag-pvp::before { background: #ff4d4d; } .sb-tag-pve::before { background: #3ba3c4; } .sb-tag-balanced::before { background: #f8ede1; }
.sb-tag-solo::before { background: #b48cff; } .sb-tag-squad::before { background: #3ddc84; } .sb-tag-looting::before { background: var(--yellow); }
.sb-tag-stealth::before { background: #7b86a0; } .sb-tag-beginner::before { background: #4cb4e3; }
.sb-card h3 { margin: 0; font: 700 20px/1.2 var(--f-ui); letter-spacing: .01em; overflow-wrap: anywhere; }
.sb-card h3 a { text-decoration: none; } .sb-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sb-by { margin-top: -6px; color: var(--muted); font-size: 14px; }
.sb-by b { color: var(--text); font-weight: 600; }

.sb-tracks { display: flex; flex-direction: column; gap: 7px; }
.sb-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-3); }
.sb-seg { flex: 0 1 0; min-width: 0; }
.sb-seg.sb-conditioning { background: var(--tree-green); } .sb-seg.sb-mobility { background: var(--tree-yellow); } .sb-seg.sb-survival { background: var(--tree-red); }
.sb-legend { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.sb-tr { display: inline-flex; align-items: center; gap: 6px; }
.sb-tr i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sb-legend b { font: 700 14px var(--f-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sb-count { margin-left: auto; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }

.sb-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.sb-picks span { padding: 4px 9px; border-radius: 999px; background: var(--panel-3); color: #dde2ec; font-size: 13px; font-weight: 500; }
.sb-desc { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

.sb-row { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 6px; }
.sb-grow { flex: 1; }
.sb-vote { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--panel-3); color: #d6dbe6; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.sb-vote svg { width: 18px; height: 18px; fill: currentColor; }
.sb-vote b { font: 700 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.sb-vote:hover { background: #2e3854; color: #fff; }
.sb-vote[aria-pressed="true"] { background: rgba(255,194,26,.14); color: var(--yellow); box-shadow: inset 0 0 0 2px var(--yellow); }

.sb-empty { margin: 30px 0; padding: 26px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); text-align: center; font-size: 16px; }
.sb-empty a { color: var(--yellow); }
.sb-more { display: flex; justify-content: center; margin: 26px 0 0; }

.sb-about { max-width: 880px; margin: 64px 0 0; padding-top: 28px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 16px; line-height: 1.55; }
.sb-about h2 { margin: 0 0 12px; color: var(--text); font: 700 22px var(--f-ui); letter-spacing: .04em; text-transform: uppercase; }
.sb-about a { color: var(--yellow); }
.sb-about strong { color: var(--text); }

@media (max-width: 760px) {
    .sb { padding-top: 26px; }
    .sb-search { margin-left: 0; width: 100%; min-width: 0; }
    .sb-sep { display: none; }
    .sb-grid { grid-template-columns: 1fr; gap: 16px; }
    .sb-row .sb-pill-ghost[data-copy] { display: none; }
}
.sb-pill-danger { background: rgba(232,38,43,.16); color: #ff8a8d; box-shadow: inset 0 0 0 1px rgba(232,38,43,.5); }
.sb-pill-danger:hover { background: #e8262b; color: #fff; }