/* SplitCraft inner pages (Guide, Base Build, Rules, Leaderboard, Hardcore, Vote, Store), 2026-09 redesign.
   One component set: hero, chips, section heads, pill tabs, accordion, ranked list, podium, comparison table,
   callout, "Show all". The site header and footer are not styled here. Behavior lives in sc-inner.js. */

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@800&family=Nunito:wght@800&family=IBM+Plex+Mono:wght@500&display=swap");

.scx {
    --bg: #0C1428; --sf: #101A33; --rs: #131F3D; --tx: #E3ECFF; --mu: #8C98B8; --ln: rgba(227, 236, 255, .09);
    --gd: #FBD23A; --cy: #37C6DC; --bl: #4173C1; --rd: #FF4655; --gn: #7DFF7D;
    --gdsoft: rgba(251, 210, 58, .1); --gdline: rgba(251, 210, 58, .3); --rdsoft: rgba(255, 70, 85, .12);
    --gnsoft: rgba(125, 255, 125, .1); --cysoft: rgba(55, 198, 220, .18);
    --sky: radial-gradient(90% 100% at 70% 0%, #1B2A56 0%, rgba(12, 20, 40, 0) 70%);
    --stars: radial-gradient(1.0px 1.0px at 92.1% 26.6%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 72.9% 49.0%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75.2% 69.5%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 68.5% 58.5%, #FBD23A 50%, transparent 100%),
        radial-gradient(2.1px 2.1px at 24.2% 34.4%, #37C6DC 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 69.8% 5.0%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 46.8% 84.9%, #FBD23A 50%, transparent 100%),
        radial-gradient(2.1px 2.1px at 12.3% 47.2%, #37C6DC 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 68.9% 59.2%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 91.2% 83.6%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 33.5% 77.0%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15.3% 27.4%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 29.5% 86.2%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 72.9% 80.8%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 27.3% 51.6%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 42.1% 17.8%, #FBD23A 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 5.5% 33.6%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 66.4% 85.0%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 16.6% 37.3%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 36.4% 39.0%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 53.2% 56.5%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 90.6% 42.1%, #FBD23A 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 63.5% 58.4%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 50.5% 63.4%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 39.7% 65.2%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 58.7% 32.3%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 39.1% 73.1%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 11.1% 75.4%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 40.7% 14.1%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 99.6% 20.2%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.9px 1.9px at 14.4% 42.1%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 13.8% 84.8%, #37C6DC 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 89.1% 81.4%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 76.1% 25.3%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.0px 1.0px at 24.8% 7.0%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.0px 1.0px at 61.7% 21.3%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 48.9% 63.3%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 88.2% 21.6%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89.4% 10.9%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 0.3% 84.0%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.9px 1.9px at 92.2% 1.9%, #37C6DC 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 18.8% 89.1%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 67.9% 24.5%, #FBD23A 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 20.9% 51.9%, #37C6DC 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 76.9% 64.5%, rgba(227,236,255,.8) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 49.8% 3.0%, #FBD23A 50%, transparent 100%);
    --ac: var(--gd);
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --disp: "Shippori Mincho B1", "Times New Roman", serif;
    position: relative; z-index: 2; color: var(--tx);
    font-family: "Nunito", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
}
html[data-theme="light"] .scx {
    --bg: #F5F7FC; --sf: #FFFFFF; --rs: #EEF2FA; --tx: #0C1428; --mu: #56627F; --ln: rgba(12, 20, 40, .1);
    --gd: #946F00; --cy: #0B7F90; --bl: #2F5BA8; --rd: #D42A3A; --gn: #1E8F38;
    --gdsoft: rgba(251, 210, 58, .2); --gdline: rgba(148, 111, 0, .3); --rdsoft: rgba(212, 42, 58, .1);
    --gnsoft: rgba(30, 143, 56, .1); --cysoft: rgba(11, 127, 144, .15);
    --sky: radial-gradient(90% 100% at 70% 0%, #DDE6FA 0%, rgba(245, 247, 252, 0) 70%);
    --stars: radial-gradient(1.0px 1.0px at 92.1% 26.6%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 72.9% 49.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75.2% 69.5%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 68.5% 58.5%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.1px 2.1px at 24.2% 34.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 69.8% 5.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 46.8% 84.9%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.1px 2.1px at 12.3% 47.2%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 68.9% 59.2%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 91.2% 83.6%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 33.5% 77.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15.3% 27.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 29.5% 86.2%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 72.9% 80.8%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 27.3% 51.6%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 42.1% 17.8%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 5.5% 33.6%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 66.4% 85.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 16.6% 37.3%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 36.4% 39.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 53.2% 56.5%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 90.6% 42.1%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 63.5% 58.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 50.5% 63.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 39.7% 65.2%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 58.7% 32.3%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 39.1% 73.1%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 11.1% 75.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 40.7% 14.1%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 99.6% 20.2%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.9px 1.9px at 14.4% 42.1%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 13.8% 84.8%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 89.1% 81.4%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 76.1% 25.3%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.0px 1.0px at 24.8% 7.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.0px 1.0px at 61.7% 21.3%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 48.9% 63.3%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 88.2% 21.6%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89.4% 10.9%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.7px 1.7px at 0.3% 84.0%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.9px 1.9px at 92.2% 1.9%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.3px 2.3px at 18.8% 89.1%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 67.9% 24.5%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 20.9% 51.9%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(1.1px 1.1px at 76.9% 64.5%, rgba(12,20,40,.18) 50%, transparent 100%),
        radial-gradient(2.0px 2.0px at 49.8% 3.0%, rgba(12,20,40,.18) 50%, transparent 100%);
}
.scx.red { --ac: var(--rd); }
.scx *, .scx *::before, .scx *::after { box-sizing: border-box; }
.scx a { color: var(--gd); text-decoration: none; }
.scx a:hover { text-decoration: underline; }
.scx code, .scx .mono { font-family: var(--mono); font-size: .9em; }
.scx code { padding: 2px 7px; border-radius: 7px; background: var(--rs); color: var(--tx); white-space: nowrap; }
.scx strong { color: var(--tx); font-weight: 800; }
.scx :where(button) { font: inherit; color: inherit; }
.scx [hidden] { display: none !important; }

/* ---------- hero ---------- */
.scx-hero { position: relative; padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 40px) clamp(40px, 5vw, 72px); }
.scx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--stars), var(--sky);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px); mask-image: linear-gradient(to bottom, transparent 0, #000 120px); }
.scx-hero .scx-in { position: relative; }
.scx-in { max-width: 1080px; margin: 0 auto; }
.scx-hero .scx-in { display: flex; flex-direction: column; gap: 18px; }
.scx-crumb { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ac); }
.scx-title { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(44px, 5vw, 68px); line-height: 1.02; color: var(--tx); letter-spacing: 0; }
.scx-lead { margin: 0; font-size: clamp(17px, 1.5vw, 21px); color: var(--mu); max-width: 620px; line-height: 1.5; text-wrap: pretty; }
.scx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.scx-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--sf); border: 1px solid var(--ln); color: var(--tx); }
.scx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }
.scx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ---------- body + sections ---------- */
.scx-body { box-sizing: content-box !important; max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px) 40px; display: flex; flex-direction: column; gap: clamp(56px, 6vw, 88px); }
.scx-sec { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 100px; }
.scx-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.scx-head > div:not(.scx-tabs) { display: flex; flex-direction: column; gap: 4px; }
.scx-h2 { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; color: var(--tx); letter-spacing: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scx-sub { margin: 0; font-size: 16px; color: var(--mu); line-height: 1.5; max-width: 680px; }
.scx-count { font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--gdsoft); color: var(--gd); }
.scx.red .scx-count { background: var(--rdsoft); color: var(--rd); }

/* ---------- cards ---------- */
.scx-card { background: var(--sf); border: 1px solid var(--ln); border-radius: 24px; padding: clamp(22px, 2.6vw, 36px); }
.scx-card.tight { border-radius: 22px; padding: 24px; }
.scx-card.list { padding: 6px clamp(16px, 2.2vw, 28px); }
.scx-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.scx-grid.w300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.scx-grid.w200 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.scx-kicker { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gd); }
.scx-card-title { margin: 0; font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: var(--tx); }
.scx-card-lead { margin: 0; font-size: 17px; color: var(--mu); line-height: 1.5; max-width: 640px; }
.scx-h3 { margin: 0; font-weight: 800; font-size: 19px; color: var(--tx); }
.scx-muted { color: var(--mu); }
.scx-small { font-size: 14px; color: var(--mu); line-height: 1.5; }
.scx-stack { display: flex; flex-direction: column; gap: 22px; }
.scx-stack.s14 { gap: 14px; }
.scx-stack.s8 { gap: 8px; }

/* numbered step cards */
.scx-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gdsoft); color: var(--gd); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.scx-step { display: flex; flex-direction: column; gap: 10px; }
.scx-step .t { font-weight: 800; font-size: 19px; }
.scx-step p { margin: 0; font-size: 15px; color: var(--mu); line-height: 1.5; }
.scx-step .code { align-self: flex-start; font-family: var(--mono); font-size: 14px; padding: 5px 10px; border-radius: 8px; background: var(--rs); color: var(--tx); }
.scx-hstep { display: flex; gap: 16px; align-items: flex-start; padding: 4px 0; }
.scx-hstep .t { font-weight: 800; font-size: 18px; }
.scx-hstep p { margin: 4px 0 0; font-size: 15px; color: var(--mu); line-height: 1.5; }

/* points grid (title + text with a top rule) */
.scx-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px; }
.scx-point { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--ln); padding-top: 14px; }
.scx-point .h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 800; font-size: 17px; }
.scx-point p { margin: 0; font-size: 15px; color: var(--mu); line-height: 1.55; }
.scx-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--gdsoft); color: var(--gd); white-space: nowrap; }
.scx-tag.cy { background: var(--cysoft); color: var(--cy); }
.scx-tag.rd { background: var(--rdsoft); color: var(--rd); }
.scx-tag.gn { background: var(--gnsoft); color: var(--gn); }
.scx-tag.ghost { background: transparent; border: 1px solid var(--ln); color: var(--mu); font-weight: 700; }

/* dot bullets */
.scx-dots { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.scx-dots.one { grid-template-columns: minmax(0, 1fr); }
.scx-dots li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.scx-dots li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--dot, var(--gd)); }
.scx-dots.rd { --dot: var(--rd); } .scx-dots.gn { --dot: var(--gn); } .scx-dots.mu { --dot: var(--mu); } .scx-dots.cy { --dot: var(--cy); }

/* commands list */
.scx-cmds { display: flex; flex-direction: column; background: var(--rs); border-radius: 18px; padding: 6px 18px; }
.scx-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 11px 0; border-bottom: 1px solid var(--ln); }
.scx-cmd:last-of-type { border-bottom: 0; }
.scx-cmds.has-more .scx-cmd:last-of-type { border-bottom: 1px solid var(--ln); }
.scx-cmd .c { font-family: var(--mono); font-size: 14px; min-width: 190px; color: var(--tx); }
.scx-cmd .d { flex: 1 1 260px; font-size: 15px; color: var(--mu); }
.scx-cmd-group { padding: 14px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cy); }

/* simple two-column table (label, value) */
.scx-kv { display: flex; flex-direction: column; }
.scx-kv > div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--ln); font-size: 16px; }
.scx-kv > div:last-child { border-bottom: 0; }
.scx-kv span:first-child { font-weight: 700; }
.scx-kv span:last-child { color: var(--gd); font-weight: 800; text-align: right; }
.scx-kv.plain span:last-child { color: var(--mu); font-weight: 600; }
.scx-kv.wide span:last-child { max-width: 65%; }
.scx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.scx-tile { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--rs); font-size: 15px; }
.scx-tile span:first-child { font-weight: 700; }
.scx-tile span:last-child { color: var(--gd); font-weight: 800; white-space: nowrap; }

/* ---------- pill tabs ---------- */
.scx-tabs { display: flex; gap: 4px; padding: 5px; background: var(--sf); border: 1px solid var(--ln); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; align-self: flex-start; }
.scx-tabs::-webkit-scrollbar { display: none; }
.scx-tab { flex: none; font-weight: 700; font-size: 15px; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; background: transparent; color: var(--mu) !important; transition: background .15s, color .15s; }
.scx-tab:hover { color: var(--tx) !important; }
.scx-tab[aria-selected="true"] { background: var(--rs); color: var(--tx) !important; }
.scx-tab:focus-visible, .scx-acc-btn:focus-visible, .scx-more:focus-visible, .scx-topic:focus-visible { outline: 2px solid var(--gd); outline-offset: 2px; }

/* ---------- accordion ---------- */
.scx-acc { background: var(--sf); border: 1px solid var(--ln); border-radius: 24px; padding: 4px clamp(16px, 2.4vw, 32px); }
.scx-acc-item { border-bottom: 1px solid var(--ln); }
.scx-acc-item:last-child { border-bottom: 0; }
.scx-acc-btn { width: 100%; display: flex; align-items: center; gap: 18px; border: 0; background: none; padding: 20px 0; cursor: pointer; text-align: left; color: var(--tx); }
.scx-acc-n { width: 28px; flex: none; font-family: var(--disp); font-weight: 800; font-size: 22px; color: var(--gd); }
.scx-acc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scx-acc-t b { font-weight: 800; font-size: 18px; }
.scx-acc-t span { font-size: 15px; color: var(--mu); }
.scx-acc-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--rs); position: relative; }
.scx-acc-ic::before, .scx-acc-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--mu); transition: transform .2s; }
.scx-acc-ic::after { transform: rotate(90deg); }
.scx-acc-item.open .scx-acc-ic::after { transform: rotate(0deg); }
.scx-acc-body { padding: 0 52px 22px 0; font-size: 16px; line-height: 1.6; color: var(--tx); text-wrap: pretty; }
.scx-acc.numbered .scx-acc-body { padding-left: 46px; }
.scx-acc-item:not(.open) .scx-acc-body { display: none; }
.scx-acc-body p { margin: 0 0 10px; }
.scx-acc-body p:last-child { margin-bottom: 0; }

/* ---------- ranked rows ---------- */
.scx-rows { background: var(--sf); border: 1px solid var(--ln); border-radius: 24px; padding: 8px clamp(16px, 2.2vw, 28px); }
.scx-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.scx-rk { width: 26px; flex: none; font-family: var(--mono); font-size: 15px; color: var(--mu); }
.scx-rk.top { color: var(--gd); }
.scx-head-img { width: 38px; height: 38px; flex: none; border-radius: 10px; image-rendering: pixelated; background: var(--rs); object-fit: cover; }
.scx-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.scx-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scx-val { flex: none; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.scx-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 0 3px var(--cysoft); }
.scx-rows-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.scx-legend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mu); }
.scx-empty { padding: 28px 0; text-align: center; color: var(--mu); }

/* show all */
.scx-more { font-weight: 800; font-size: 15px; border: 0; background: none; color: var(--gd); padding: 14px 0; cursor: pointer; text-align: left; }
.scx.red .scx-more.ac { color: var(--rd); }
[data-morebox]:not(.all) .scx-x { display: none !important; }

/* podium */
.scx-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); align-items: end; }
.scx-pod { background: var(--sf); border: 1px solid var(--ln); border-radius: 22px; padding: clamp(14px, 2vw, 26px) 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.scx-pod.first { border-color: var(--gdline); padding-top: clamp(28px, 4.5vw, 56px); }
.scx-pod .r { font-family: var(--disp); font-weight: 800; font-size: clamp(20px, 2vw, 28px); color: var(--mu); }
.scx-pod.first .r { color: var(--gd); }
.scx-pod img { width: clamp(48px, 6vw, 84px); height: clamp(48px, 6vw, 84px); border-radius: 16px; image-rendering: pixelated; background: var(--rs); }
.scx-pod .n { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: clamp(14px, 1.3vw, 18px); max-width: 100%; }
.scx-pod .n span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scx-pod .v { font-size: clamp(13px, 1.2vw, 16px); color: var(--mu); font-weight: 700; }

/* person cards (hardcore still alive) */
.scx-person { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sf); border: 1px solid var(--ln); }
.scx-person img { width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; background: var(--rs); flex: none; }
.scx-person .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.scx-person .who b { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 16px; }
.scx-person .who b span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scx-person .who small { font-size: 14px; color: var(--mu); }
.scx-mem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--ln); }
.scx-mem img { width: 34px; height: 34px; border-radius: 9px; image-rendering: pixelated; filter: grayscale(1); opacity: .8; background: var(--rs); flex: none; }
.scx-mem .who { flex: 1 1 140px; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.scx-mem .who > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scx-mem .when { font-size: 15px; color: var(--mu); }
.scx-mem .days { font-size: 15px; font-weight: 800; min-width: 110px; text-align: right; }

/* callout */
.scx-callout { border-radius: 24px; padding: clamp(24px, 3vw, 40px); background: var(--gdsoft); border: 1px solid var(--gdline); display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.scx-callout .star { font-size: 44px; color: #FBD23A; line-height: 1; }
.scx-callout .txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.scx-callout .txt b { font-family: var(--disp); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
.scx-callout .txt p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--tx); text-wrap: pretty; }
.scx-callout.cy { background: var(--cysoft); border-color: rgba(55, 198, 220, .35); }
.scx-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--rs); font-size: 15px; line-height: 1.55; color: var(--mu); }
.scx-note i { color: var(--gd); margin-top: 3px; }
.scx-note.rd i { color: var(--rd); }
.scx-note.cy i { color: var(--cy); }

/* buttons */
.scx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 999px; background: var(--sf); color: var(--tx) !important; border: 1px solid var(--ln); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: border-color .15s, filter .15s; }
.scx-btn:hover { border-color: #FBD23A; }
.scx-btn.gold { background: #FBD23A; color: #0C1428 !important; border-color: #FBD23A; }
.scx-btn.gold:hover { filter: brightness(1.06); }
.scx-btn.copied { background: #FBD23A; color: #0C1428 !important; }
.scx-btn:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }

/* ---------- guide topics ---------- */
.scx-guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.scx-topics { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 90px; }
.scx-topic { font-size: 16px; font-weight: 700; text-align: left; border: 0; border-radius: 14px; padding: 11px 16px; cursor: pointer; background: transparent; color: var(--mu) !important; }
.scx-topic:hover { color: var(--tx) !important; }
.scx-topic[aria-selected="true"] { background: var(--rs); color: var(--tx) !important; }
.scx-topic.rd[aria-selected="true"] { color: var(--rd) !important; }
.scx-kicker.rd { color: var(--rd); }

/* ---------- base build timeline ---------- */
.scx-timeline { margin-top: 22px; overflow-x: auto; padding-bottom: 4px; }
.scx-timeline > div { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; }
.scx-tl { display: flex; flex-direction: column; gap: 8px; }
.scx-tl .bar { height: 6px; border-radius: 999px; background: var(--c, var(--gd)); }
.scx-tl .t { font-family: var(--mono); font-size: 13px; color: var(--mu); }
.scx-tl b { font-weight: 800; font-size: 17px; }
.scx-tl p { margin: 0; font-size: 14px; color: var(--mu); line-height: 1.4; }
.scx-glow-gn { box-shadow: 0 0 0 1px rgba(125, 255, 125, .25); }
.scx-acc-title-gn { color: var(--gn) !important; }

/* ---------- vote ---------- */
.scx-vote { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 24px; background: var(--sf); border: 1px solid var(--ln); color: var(--tx) !important; text-decoration: none !important; transition: border-color .15s; }
.scx-vote:hover { border-color: #FBD23A; }
.scx-vote .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scx-vote .n { font-family: var(--disp); font-weight: 800; font-size: 24px; line-height: 1.15; }
.scx-vote .bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scx-vote .rw { font-weight: 800; font-size: 16px; color: var(--gd); }
.scx-vote .rw.mu { color: var(--mu); font-weight: 700; }

/* ---------- store ---------- */
.scx-who { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; }
.scx-who .l { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.scx-who .r { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--mu); font-weight: 700; font-size: 16px; }
.scx-stepn { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.scx-stepn > span { width: 28px; height: 28px; flex: none; border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ln); }
.scx-stepn.on > span { background: #FBD23A; color: #0C1428; border-color: #FBD23A; }
.scx-stepn.muted { color: var(--mu); font-weight: 700; font-size: 16px; }
.scx-field { display: flex; align-items: center; gap: 12px; }
.scx-field .face { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--rs) center / cover no-repeat; image-rendering: pixelated; border: 1px solid var(--ln); }
.scx-field .box { position: relative; flex: 1; min-width: 0; }
.scx-input { width: 100%; font: inherit; font-size: 17px; padding: 14px 48px 14px 18px; border-radius: 16px; border: 1px solid var(--ln); background: var(--rs); color: var(--tx); }
.scx-input::placeholder { color: var(--mu); }
.scx-input:focus { outline: none; border-color: #FBD23A; box-shadow: 0 0 0 3px rgba(251, 210, 58, .18); }
.scx-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer; background: transparent; color: var(--mu); }
.scx-clear:hover { background: var(--rdsoft); color: var(--rd); }
.scx-found { font-size: 14px; min-height: 1.3em; color: var(--mu); }
.scx-found.ok { color: var(--gn); } .scx-found.bad { color: var(--rd); }

.scx-cmp-wrap { padding: clamp(8px, 1.6vw, 20px) clamp(12px, 2.2vw, 28px); }
.scx-cmp-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--ln); font-size: clamp(13px, 1.2vw, 16px); }
.scx-cmp-row > div:not(:first-child) { text-align: center; }
.scx-cmp-row > div:first-child { font-weight: 700; }
.scx-cmp-row .no { color: var(--mu); font-weight: 600; }
.scx-cmp-row .yes { font-weight: 800; }
.scx-cmp-row .val { font-weight: 600; }
.scx-cmp-row.grp { padding: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cy); border-bottom: 0; }
.scx-cmp-row.grp > div:first-child { font-weight: 800; }
.scx-cmp-head { align-items: end; padding: 14px 0 18px; }
.scx-cmp-head > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scx-rank { font-family: var(--disp); font-weight: 800; font-size: clamp(18px, 2vw, 26px); line-height: 1.1; }
.scx-rank.vip { color: var(--gd); }
.scx-rank.vipplus { color: var(--cy); }
.scx-rank.mvp { background: linear-gradient(90deg, #B897FF, #8FB0E6, #4173C1); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.scx-price { font-weight: 800; font-size: clamp(15px, 1.5vw, 20px); }
.scx-per { font-size: 13px; color: var(--mu); }
.scx-save { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--gnsoft); color: var(--gn); }
.scx-pop { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--cysoft); color: var(--cy); }
.scx-cmp-foot { border-bottom: 0; padding: 16px 0 8px; }
.scx-cmp-foot .scx-more { padding: 0; }
.scx-cmp-foot .scx-btn { width: 100%; padding: 11px 4px; font-size: clamp(13px, 1.2vw, 15px); }
.scx-cmp-foot .note { display: block; margin-top: 6px; font-size: 12px; color: var(--mu); min-height: 1em; }
.scx-col-locked { opacity: .45; }
.scx-pack { display: flex; flex-direction: column; gap: 14px; background: var(--sf); border: 1px solid var(--ln); border-radius: 22px; padding: 22px; position: relative; }
.scx-pack.best { border-color: rgba(55, 198, 220, .5); }
.scx-pack .amt { display: flex; align-items: baseline; gap: 6px; }
.scx-pack .amt i { color: #FBD23A; font-size: 20px; font-style: normal; }
.scx-pack .amt b { font-family: var(--disp); font-weight: 800; font-size: 32px; }
.scx-pack .lbl { margin-top: -10px; font-size: 14px; color: var(--mu); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.scx-pack .scx-btn { width: 100%; background: var(--rs); }
.scx-pack .scx-pop { position: absolute; top: 14px; right: 14px; }
.scx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; font-size: 15px; line-height: 1.5; background: var(--rs); border: 1px solid var(--ln); }
.scx-alert i { margin-top: 3px; }
.scx-alert.ok i { color: var(--gn); } .scx-alert.bad i { color: var(--rd); } .scx-alert.info i { color: var(--cy); }

/* ---------- phones ---------- */
@media (max-width: 760px) {
    .scx-guide { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .scx-topics { position: static; flex-direction: row; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
    .scx-topics::-webkit-scrollbar { display: none; }
    .scx-topic { white-space: nowrap; flex: none; font-size: 15px; border: 1px solid var(--ln); border-radius: 999px; padding: 10px 15px; }
    .scx-acc-body { padding-right: 0; }
    .scx-acc.numbered .scx-acc-body { padding-left: 0; }
    .scx-acc-btn { gap: 14px; }
    .scx-kv.wide > div { flex-direction: column; gap: 2px; }
    .scx-kv.wide span:last-child { max-width: none; text-align: left; }
    .scx-cmd .c { min-width: 0; }
    .scx-mem .days { min-width: 0; }
}
@media (max-width: 520px) {
    .scx-cmp-foot .get { display: none; }
    .scx-cmp-wrap { padding-left: 14px; padding-right: 14px; }
    .scx-cmp-row { gap: 4px; }
}