* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --page-w: 850px;
  --page-pad-h: 56px;
  --rank-col: 30px;
  --g-col: 74px;
  --total-col: 88px;
  --total-gap: 14px;
  --col-gap: 10px;
  --row-pad: 14px;
  --row-pad-h: 20px;
  --row-gap: 8px;
  --sq-pad: 4px;
  --name-size: 24px;
  --score-size: 1.3rem;
  --score-weight: 600;
}

body.theme-green {
  --body-bg: #080C0B;
  --page-grad-1: #0E1614;
  --page-grad-2: #0A100F;
  --page-border: rgba(122,168,156,0.16);
  --accent: #86AEA2;
  --divider: rgba(122,168,156,0.18);
  --row-wash: rgba(255,255,255,0.025);
  --row-border: rgba(200,222,214,0.08);
  --row-border-left: rgba(122,168,156,0.36);
  --top3-wash: rgba(255,255,255,0.05);
  --top3-border: rgba(200,222,214,0.14);
  --top3-border-left: rgba(122,168,156,0.40);
  --top3-rank: #D8D2C8;
  --top3-name: #E0DAD0;
  --sq-wash: rgba(255,255,255,0.025);
  --pos: #7AAA7A;
  --neg: #C07070;
  --neg-bright: #CE8484;
  --text-primary: #C8C4BE;
  --text-title: #D8D2C8;
  --text-secondary: #9A9690;
  --subtitle: rgba(122,168,156,0.50);
}

body.theme-violet {
  --char-right: -180px;
  --char-top: 10px;
  --char-h: 970px;
  --char-opacity: 0.205;
  --score-weight: 600;
  --body-bg: #0E0911;
  --page-grad-1: #1B141F;
  --page-grad-2: #140E18;
  --page-border: rgba(202,179,219,0.180);
  --accent: #CAB3DB;
  --divider: rgba(202,179,219,0.240);
  --row-wash: rgba(232,225,238,0.030);
  --row-border: rgba(232,225,238,0.080);
  --row-border-left: rgba(202,179,219,0.400);
  --top3-wash: rgba(232,225,238,0.060);
  --top3-border: rgba(232,225,238,0.140);
  --top3-border-left: rgba(202,179,219,0.500);
  --top3-rank: #E2DAE9;
  --top3-name: #EFE8F4;
  --sq-wash: rgba(232,225,238,0.030);
  --pos: #98D1A6;
  --neg: #CE898E;
  --neg-bright: #CE898E;
  --text-primary: #D8D1DD;
  --text-title: #E8E1EE;
  --text-secondary: #A9A1AF;
  --subtitle: #BBA9C9;
}

body.theme-dusk {
  --char-right: -680px;
  --char-top: -350px;
  --char-h: 1610px;
  --char-opacity: 0.3;
  --score-weight: 700;
  --body-bg: #8E96A8;
  --page-grad-1: #D5D9E2;
  --page-grad-2: #C4C9D4;
  --page-border: rgba(70,90,150,0.20);
  --accent: #3E528C;
  --divider: rgba(70,90,150,0.20);
  --row-wash: rgba(248,250,255,0.55);
  --row-border: rgba(70,90,150,0.10);
  --row-border-left: rgba(70,90,150,0.20);
  --top3-wash: rgba(248,250,255,0.55);
  --top3-border: rgba(70,90,150,0.10);
  --top3-border-left: rgba(70,90,150,0.38);
  --top3-rank: #2F3B6E;
  --top3-name: #2F3B6E;
  --sq-wash: rgba(70,90,150,0.08);
  --pos: #2A6B3A;
  --neg: #A04045;
  --neg-bright: #A04045;
  --text-primary: #2F3B6E;
  --text-title: #2F3B6E;
  --text-secondary: #3E528C;
  --subtitle: #32343E;
}

body.theme-dusk .st-score { text-shadow: none; }

body.theme-contrail {
  --char-right: 75px;
  --char-top: -15px;
  --char-h: 970px;
  --char-opacity: 0.12;
  --body-bg: #06080C;
  --page-grad-1: #0C1017;
  --page-grad-2: #080B11;
  --page-border: rgba(98,158,204,0.16);
  --accent: #629ECC;
  --divider: rgba(98,158,204,0.18);
  --row-wash: rgba(255,255,255,0.03);
  --row-border: rgba(214,222,228,0.08);
  --row-border-left: rgba(98,158,204,0.36);
  --top3-wash: rgba(255,255,255,0.06);
  --top3-border: rgba(214,222,228,0.14);
  --top3-border-left: rgba(98,158,204,0.40);
  --top3-rank: #D0D6DA;
  --top3-name: #DAE0E4;
  --sq-wash: rgba(255,255,255,0.03);
  --pos: #88B492;
  --neg: #E09794;
  --neg-bright: #DA9A97;
  --text-primary: #C0C6C9;
  --text-title: #8D969A;
  --text-secondary: #93989B;
  --subtitle: #749BA0;
}

body.theme-contrail .st-score { text-shadow: none; }

body.theme-rdc {
  --char-right: -100px;
  --char-top: 10px;
  --char-h: 1080px;
  --char-opacity: 0.35;
  --score-weight: 600;
  --body-bg: #0a0c12;
  --page-grad-1: #1C315E;
  --page-grad-2: #152747;
  --page-border: rgba(169,180,204,0.16);
  --accent: #C4A862;
  --divider: rgba(169,180,204,0.18);
  --row-wash: rgba(255,255,255,0.025);
  --row-border: rgba(200,180,160,0.08);
  --row-border-left: rgba(169,180,204,0.4);
  --top3-wash: rgba(196,168,98,0.03);
  --top3-border: rgba(196,168,98,0.18);
  --top3-border-left: rgba(196,168,98,0.6);
  --top3-rank: #C4A862;
  --top3-name: #FFFFFF;
  --sq-wash: rgba(8,16,40,0.45);
  --pos: #9FD8A8;
  --neg: #FFA0A0;
  --neg-bright: #FFA0A0;
  --text-primary: #FFFFFF;
  --text-title: #FFFFFF;
  --text-secondary: rgba(169,180,204,0.4);
  --subtitle: rgba(130,150,210,0.5);
}

body.theme-sencha {
  --char-right: -303px;
  --char-top: -264px;
  --char-h: 1730px;
  --char-opacity: 0.24;
  --score-weight: 600;
  --body-bg: #7E8C80;
  --page-grad-1: #C9D2C6;
  --page-grad-2: #B6C1B3;
  --page-border: rgba(47,84,66,0.22);
  --accent: #2A4C3B;
  --divider: rgba(47,84,66,0.22);
  --row-wash: rgba(47,84,66,0.045);
  --row-border: rgba(47,84,66,0.10);
  --row-border-left: rgba(47,84,66,0.22);
  --top3-wash: rgba(47,84,66,0.095);
  --top3-border: rgba(47,84,66,0.10);
  --top3-border-left: rgba(47,84,66,0.40);
  --top3-rank: #23402F;
  --top3-name: #23402F;
  --sq-wash: rgba(252,253,250,0.42);
  --pos: #1E5E33;
  --neg: #8E2F34;
  --neg-bright: #8E2F34;
  --text-primary: #23402F;
  --text-title: #23402F;
  --text-secondary: #2A4C3B;
  --subtitle: #2C3630;
}

body.theme-sencha .st-score { text-shadow: none; }

body.theme-shibari {
  --char-right: -285px;
  --char-top: -106px;
  --char-h: 1100px;
  --char-opacity: 0.205;
  --score-weight: 600;
  --body-bg: #0b0b0d;
  --page-grad-1: #0d0d10;
  --page-grad-2: #08080a;
  --page-border: rgba(190,162,91,0.16);
  --accent: #c7a95f;
  --divider: rgba(190,162,91,0.18);
  --row-wash: rgba(255,255,255,0.025);
  --row-border: rgba(190,162,91,0.08);
  --row-border-left: rgba(190,162,91,0.45);
  --top3-wash: rgba(190,162,91,0.03);
  --top3-border: rgba(190,162,91,0.18);
  --top3-border-left: rgba(190,162,91,0.50);
  --top3-rank: #c7a95f;
  --top3-name: #bfbcb4;
  --sq-wash: rgba(255,255,255,0.025);
  --pos: #81c194;
  --neg: #cd837b;
  --neg-bright: #f69e94;
  --text-primary: #b1aea7;
  --text-title: #d0cdc4;
  --text-secondary: #b2ada0;
  --subtitle: #afaca6;
}

body.theme-yuzo {
  --char-right: -1185px;
  --char-top: -900px;
  --char-h: 3000px;
  --char-opacity: 0.20;
  --score-weight: 700;
  --body-bg: #D5D3C8;
  --page-grad-1: #F7F6F2;
  --page-grad-2: #F2F1EB;
  --page-border: rgba(72,75,82,0.30);
  --accent: #445F58;
  --divider: rgba(36,92,77,0.22);
  --row-wash: rgba(36,92,77,0.030);
  --row-border: rgba(72,75,82,0.12);
  --row-border-left: rgba(36,92,77,0.34);
  --top3-wash: rgba(36,92,77,0.055);
  --top3-border: rgba(72,75,82,0.28);
  --top3-border-left: rgba(36,92,77,0.56);
  --top3-rank: #484b52;
  --top3-name: #1C4F42;
  --sq-wash: rgba(255,255,252,0.58);
  --pos: #207961;
  --neg: #B43C44;
  --neg-bright: #B43C44;
  --text-primary: #245C4D;
  --text-title: #245C4D;
  --text-secondary: #5A5D64;
  --subtitle: #4F6D65;
}

body.theme-yuzo .st-score { text-shadow: none; }

body.theme-eientei {
  --body-bg: #0C0B0F;
  --page-grad-1: #16151B;
  --page-grad-2: #100F14;
  --page-border: rgba(169,162,184,0.16);
  --accent: #A9A2B8;
  --divider: rgba(169,162,184,0.18);
  --row-wash: rgba(214,210,226,0.025);
  --row-border: rgba(214,210,226,0.08);
  --row-border-left: rgba(169,162,184,0.36);
  --top3-wash: rgba(214,210,226,0.05);
  --top3-border: rgba(214,210,226,0.14);
  --top3-border-left: rgba(169,162,184,0.40);
  --top3-rank: #D8D2C8;
  --top3-name: #E0DAD0;
  --sq-wash: rgba(255,255,255,0.025);
  --pos: #7AAA7A;
  --neg: #C07070;
  --neg-bright: #CE8888;
  --text-primary: #C8C4BE;
  --text-title: #D8D2C8;
  --text-secondary: #9A9690;
  --subtitle: rgba(169,162,184,0.50);
}

body.theme-magicsiege {
  --char-right: -230px;
  --char-top: -69px;
  --char-h: 1200px;
  --char-opacity: 0.205;
  --score-weight: 600;
  --body-bg: #0C0B0F;
  --page-grad-1: #16151B;
  --page-grad-2: #100F14;
  --page-border: rgba(169,162,184,0.16);
  --accent: #A9A2B8;
  --divider: rgba(169,162,184,0.18);
  --row-wash: rgba(214,210,226,0.025);
  --row-border: rgba(214,210,226,0.08);
  --row-border-left: rgba(169,162,184,0.36);
  --top3-wash: rgba(214,210,226,0.05);
  --top3-border: rgba(214,210,226,0.14);
  --top3-border-left: rgba(169,162,184,0.40);
  --top3-rank: #D8D2C8;
  --top3-name: #E0DAD0;
  --sq-wash: rgba(255,255,255,0.025);
  --pos: #7AAA7A;
  --neg: #C07070;
  --neg-bright: #CE8888;
  --text-primary: #C8C4BE;
  --text-title: #D8D2C8;
  --text-secondary: #9A9690;
  --subtitle: rgba(169,162,184,0.50);
}

body.theme-renchanrumble-oct {
  --char-right: -208px;
  --char-top: -26px;
  --char-h: 972px;
  --char-opacity: 0.11;
  --score-weight: 600;
  --body-bg: #0E0B0D;
  --page-grad-1: #1A1518;
  --page-grad-2: #130F12;
  --page-border: rgba(184,156,164,0.16);
  --accent: #B89CA4;
  --divider: rgba(184,156,164,0.18);
  --row-wash: rgba(228,212,216,0.025);
  --row-border: rgba(228,212,216,0.08);
  --row-border-left: rgba(184,156,164,0.36);
  --top3-wash: rgba(228,212,216,0.05);
  --top3-border: rgba(228,212,216,0.14);
  --top3-border-left: rgba(184,156,164,0.40);
  --top3-rank: #DCCFCC;
  --top3-name: #E3D7D3;
  --sq-wash: rgba(255,244,246,0.025);
  --pos: #86B29C;
  --neg: #C97D68;
  --neg-bright: #D99382;
  --text-primary: #C9C2BE;
  --text-title: #D9CFCA;
  --text-secondary: #ACA29C;
  --subtitle: #9C8991;
}

body.theme-teampractice-oct {
  --char-right: -323px;
  --char-top: -156px;
  --char-h: 1200px;
  --char-opacity: 0.28;
  --score-weight: 700;
  --body-bg: #8E879E;
  --page-grad-1: #DCD5E3;
  --page-grad-2: #CBC3D5;
  --page-border: rgba(92,66,120,0.20);
  --accent: #5C4278;
  --divider: rgba(92,66,120,0.22);
  --row-wash: rgba(250,247,255,0.55);
  --row-border: rgba(92,66,120,0.10);
  --row-border-left: rgba(92,66,120,0.22);
  --top3-wash: rgba(250,247,255,0.70);
  --top3-border: rgba(92,66,120,0.14);
  --top3-border-left: rgba(92,66,120,0.45);
  --top3-rank: #3D2A55;
  --top3-name: #34234A;
  --sq-wash: rgba(92,66,120,0.07);
  --pos: #2D6347;
  --neg: #7E2E3E;
  --neg-bright: #8E3446;
  --text-primary: #34234A;
  --text-title: #3D2A55;
  --text-secondary: #5A4C6A;
  --subtitle: #4E3F60;
}

body.theme-teampractice-oct .st-score { text-shadow: none; }

body.theme-texasfoldem-oct {
  --char-right: -294px;
  --char-top: -33px;
  --char-h: 934px;
  --char-opacity: 0.28;
  --score-weight: 600;
  --body-bg: #0C0E11;
  --page-grad-1: #1A1E24;
  --page-grad-2: #111418;
  --page-border: rgba(150,170,200,0.16);
  --accent: #C8D3E3;
  --divider: rgba(150,170,200,0.18);
  --row-wash: rgba(255,255,255,0.025);
  --row-border: rgba(150,170,200,0.08);
  --row-border-left: rgba(150,170,200,0.28);
  --top3-wash: rgba(235,242,255,0.045);
  --top3-border: rgba(150,170,200,0.14);
  --top3-border-left: rgba(150,170,200,0.40);
  --top3-rank: #CCD6E5;
  --top3-name: #DCD8D0;
  --sq-wash: rgba(0,0,0,0.40);
  --pos: #8CC0A4;
  --neg: #C27676;
  --neg-bright: #E0918D;
  --text-primary: #D8D4CD;
  --text-title: #E2DED6;
  --text-secondary: #A6A49F;
  --subtitle: #BCC6D3;
}

body.theme-texasfoldem-oct .st-score {
  text-shadow: none;
  background: radial-gradient(ellipse farthest-side at 50% 50%, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.34) 50%, rgba(0,0,0,0) 100%);
}

body {
  background: var(--body-bg);
  font-family: 'Outfit', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 2rem;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.page {
  animation: fade-in 0.2s ease-in;
  width: var(--page-w);
  margin: auto;
  border-radius: 28px;
  border: 2px solid var(--page-border);
  background: linear-gradient(175deg, var(--page-grad-1) 0%, var(--page-grad-2) 100%);
  padding: 68px var(--page-pad-h) 56px;
  position: relative;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  filter: saturate(0.6) brightness(0.9) sepia(0.1) hue-rotate(90deg);
  mix-blend-mode: luminosity;
}

.bg-image.bg-chireiden {
  object-fit: contain;
  transform: scale(2.1);
}

.bg-image.bg-eientei {
  opacity: 0.18;
  filter: saturate(0.6) brightness(0.9) sepia(0.15) hue-rotate(240deg);
}

.character {
  position: absolute;
  right: var(--char-right);
  top: var(--char-top);
  height: var(--char-h);
  opacity: var(--char-opacity);
  pointer-events: none;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
}

.title {
  text-align: center;
  margin-bottom: 44px;
}

.title-main {
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--text-title);
  line-height: 1.2;
}

.title-sub {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 12px;
  padding-left: 12px;
  color: var(--subtitle);
  margin-top: 8px;
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--divider), transparent);
  margin: 0 40px 32px;
}

.standings {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

.st-header {
  display: grid;
  grid-template-columns: var(--rank-col) 1fr repeat(3, var(--g-col)) var(--total-gap) var(--total-col);
  column-gap: var(--col-gap);
  border-left: 4px solid transparent;
  border-right: 2px solid transparent;
  padding: 0 var(--row-pad-h) 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.st-header span:nth-child(1) { text-align: center; }
.st-header span:nth-child(2) { padding-left: 8px; }
.st-header span:nth-child(n+3) { text-align: center; }

.st-row {
  display: grid;
  grid-template-columns: var(--rank-col) 1fr repeat(3, var(--g-col)) var(--total-gap) var(--total-col);
  align-items: center;
  column-gap: var(--col-gap);
  padding: var(--row-pad) var(--row-pad-h);
  background: var(--row-wash);
  border: 2px solid var(--row-border);
  border-left: 4px solid var(--row-border-left);
  border-radius: 14px;
}

:where(body.cols-4) .st-header,
:where(body.cols-4) .st-row {
  grid-template-columns: var(--rank-col) 1fr repeat(4, var(--g-col)) var(--total-gap) var(--total-col);
}

:where(body.cols-5) .st-header,
:where(body.cols-5) .st-row {
  grid-template-columns: var(--rank-col) 1fr repeat(5, var(--g-col)) var(--total-gap) var(--total-col);
}

:where(body.cols-6) .st-header,
:where(body.cols-6) .st-row {
  grid-template-columns: var(--rank-col) 1fr repeat(6, var(--g-col)) var(--total-gap) var(--total-col);
}

:where(body.cols-4) { --page-w: 934px; }
:where(body.cols-5) { --page-w: 1018px; }
:where(body.cols-6) { --page-w: 1102px; }

:where(body.cols-hands) {
  --page-w: 666px;
  --name-col: 200px;
  --name-gap: 16px;
  --score-col: 120px;
}

:where(body.cols-hands) .st-header,
:where(body.cols-hands) .st-row {
  grid-template-columns: var(--rank-col) calc(var(--name-col) + var(--name-gap)) 1fr var(--g-col) var(--total-gap) var(--score-col);
}

:where(body.cols-hands) .st-name,
:where(body.cols-hands) .st-header span:nth-child(2) {
  margin-right: var(--name-gap);
}

.st-row.top3 {
  border-left: 4px solid var(--top3-border-left);
  border-color: var(--top3-border);
  border-left-color: var(--top3-border-left);
  background: var(--top3-wash);
}

.st-rank {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.st-row.top3 .st-rank { color: var(--top3-rank); }

.st-name {
  font-size: var(--name-size);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
}

.st-row.top3 .st-name { color: var(--top3-name); }

.st-score {
  font-size: var(--score-size);
  font-weight: var(--score-weight);
  text-align: center;
  white-space: nowrap;
  padding: var(--sq-pad) 0;
  border-radius: 8px;
  background: var(--sq-wash);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.st-score.pos { color: var(--pos); }
.st-score.neg { color: var(--neg-bright); }
.st-score.zero { color: var(--text-secondary); }
.st-score.total-pos { color: var(--pos); }

@media (prefers-reduced-motion: reduce) {
  .page {
    animation: none;
  }
}

:root {
  --sb-reveal-dur: 0.22s;
  --sb-compose-dur: 0.2s;
}

.sb-gate .character,
.sb-gate .page > .content {
  transition:
    opacity var(--sb-compose-dur) ease,
    visibility 0s linear;
}

.sb-gate .character:not(.sb-shown) {
  opacity: 0;
  visibility: hidden;
}

.sb-gate .page:has(> img.character) > .content:not(.sb-shown) {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .sb-gate .character,
  .sb-gate .page > .content {
    transition: none;
  }
}