body.is-scoring { overflow: hidden; overscroll-behavior: none; }
body.is-scoring .topbar, body.is-scoring .tabbar, body.is-scoring .demo-banner { display: none; }
.scorer {
  --sc-ink: oklch(99% 0.004 240); --sc-sub: oklch(80% 0.090 232); --sc-glass: oklch(21% 0.050 262 / 0.78); --sc-line: oklch(62% 0.120 245 / 0.42);
  position: fixed; inset: 0; z-index: 50; display: grid; color: var(--sc-ink);
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: linear-gradient(180deg, oklch(12% 0.040 262 / 0.5), oklch(9% 0.035 262 / 0.9) 62%), url('../assets/foto/profil-hero.webp') center 18% / cover no-repeat, oklch(12% 0.040 262);
  user-select: none; -webkit-user-select: none;
}
.sc-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-1); min-width: 0; }
.sc-bar > .btn-icon { --btn-bg: var(--sc-glass); --btn-fg: var(--sc-ink); --btn-bd: var(--sc-line); flex: none; width: 46px; height: 46px; border-radius: 14px; }
.sc-bar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-bar__title b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; color: var(--sc-ink); }
.sc-bar__title span { font-size: var(--text-xs); color: var(--sc-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pad {
  --tone: oklch(70% 0.170 240); --tone-hi: oklch(86% 0.110 225); --tone-bg: oklch(25% 0.100 258); --tone-bg2: oklch(13% 0.050 262);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin: var(--space-2) var(--space-4); padding: 0 var(--space-4) var(--space-3); min-height: 0;
  border-radius: 22px; border: 2px solid var(--tone); color: var(--sc-ink);
  background: radial-gradient(65% 55% at 50% 48%, color-mix(in oklab, var(--tone) 26%, transparent), transparent 75%), linear-gradient(165deg, var(--tone-bg), var(--tone-bg2));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tone) 30%, transparent), 0 0 24px color-mix(in oklab, var(--tone) 55%, transparent), inset 0 0 36px color-mix(in oklab, var(--tone) 22%, transparent);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform 90ms var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pad-a { --tone: oklch(84% 0.165 88); --tone-hi: oklch(93% 0.120 95); --tone-bg: oklch(25% 0.050 78); --tone-bg2: oklch(12% 0.020 80); }
.pad::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tone-hi); opacity: 0.4;
  -webkit-mask: url('../assets/foto/skor-pad.webp') center / cover no-repeat; mask: url('../assets/foto/skor-pad.webp') center / cover no-repeat; }
.pad:active { transform: scale(0.985); }
.pad:focus-visible { outline: 3px solid var(--tone-hi); outline-offset: 2px; }
.pad.is-gp { box-shadow: 0 0 0 1px var(--tone), 0 0 40px color-mix(in oklab, var(--tone) 75%, transparent), inset 0 0 44px color-mix(in oklab, var(--tone) 32%, transparent); }
.pad__who { display: flex; align-items: center; justify-content: center; gap: var(--space-2); max-width: 80%; min-width: 0; padding: 10px 40px 12px;
  clip-path: polygon(0 0, 100% 0, 87% 100%, 13% 100%);
  background: linear-gradient(var(--tone), var(--tone)) center bottom / 74% 2px no-repeat,
    linear-gradient(180deg, color-mix(in oklab, var(--tone) 36%, oklch(13% 0.040 262)), color-mix(in oklab, var(--tone) 12%, oklch(11% 0.040 262))); }
.pad__names { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 8px oklch(10% 0.040 262 / 0.6); }
.pad__pts { font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, min(32vw, 19vh), 12rem); line-height: 0.85; letter-spacing: -0.01em; color: var(--sc-ink);
  text-shadow: 0 0 1px var(--tone-hi), 0 0 8px color-mix(in oklab, var(--tone) 38%, transparent); }    
.pad__pts.bump { animation: bump var(--dur-short) var(--ease-out); }
.pad__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 34px; }
.pad__sets { display: inline-flex; gap: 8px; padding-left: 4px; }
.pad__sets i { width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid oklch(100% 0 0 / 0.7); }
.pad__sets i.on { background: var(--tone); border-color: var(--tone); box-shadow: 0 0 10px var(--tone); }
.pad__serve { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); border: 1.5px solid color-mix(in oklab, var(--tone) 70%, transparent);
  background: oklch(10% 0.030 262 / 0.6); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink); }
.pad__serve .serve-dot { background: var(--tone); box-shadow: 0 0 8px var(--tone); }

.sc-mid { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding: 0 var(--space-4); min-height: 46px; }
.sc-game { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border-radius: 12px; background: var(--sc-glass); border: 1px solid var(--sc-line);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: oklch(82% 0.120 222); }
.sc-game small { font-size: 12px; letter-spacing: 0.06em; color: var(--sc-sub); }
.sc-game.is-empty { font-size: var(--text-xs); color: var(--sc-sub); }
.sc-flag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid oklch(66% 0.150 245); background: oklch(20% 0.070 258 / 0.8);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink); box-shadow: 0 0 14px oklch(60% 0.170 245 / 0.35); }
.sc-flag .ic { color: oklch(82% 0.120 222); }
.sc-flag.is-hot { border-color: oklch(84% 0.165 88); background: oklch(26% 0.060 80 / 0.85); box-shadow: 0 0 16px oklch(84% 0.165 88 / 0.45); }
.sc-flag.is-hot .ic { color: oklch(88% 0.150 92); }

.sc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-4); }
.sc-tools:has(.tool-step) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }    
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 66px; min-width: 0; padding: 8px 4px;
  border-radius: 16px; border: 1px solid var(--sc-line); color: var(--sc-ink); cursor: pointer;
  background: linear-gradient(180deg, oklch(27% 0.050 262 / 0.92), oklch(17% 0.040 262 / 0.92)); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap;
  transition: filter var(--dur-micro) var(--ease-out), transform 90ms var(--ease-out);
}
.tool:hover { filter: brightness(1.15); }
.tool:active { transform: scale(0.96); }
.tool:disabled { opacity: 0.4; cursor: not-allowed; transform: none; filter: none; }
.tool:focus-visible { outline: 2px solid var(--sc-sub); outline-offset: 2px; }
.tool .ic { width: 24px; height: 24px; }
.tool.is-main { border-color: oklch(76% 0.130 235); background: linear-gradient(180deg, oklch(62% 0.170 248), oklch(47% 0.170 256)); box-shadow: 0 0 20px oklch(60% 0.170 245 / 0.5), inset 0 1px 0 oklch(100% 0 0 / 0.2); }
.tool-step { flex-direction: row; justify-content: space-between; padding: 4px; cursor: default; }
.tool-step:active { transform: none; }
.tool-step button { width: 40px; height: 100%; min-height: 52px; display: grid; place-items: center; border: 0; border-radius: 12px; background: oklch(100% 0 0 / 0.08); color: var(--sc-ink); cursor: pointer; }
.tool-step button:hover { background: oklch(100% 0 0 / 0.14); }
.tool-step button:active { transform: scale(0.94); }
.tool-step button:disabled { opacity: 0.35; cursor: not-allowed; }
.tool-step span { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.tool-step b { font-weight: 800; font-size: var(--text-xl); }
.tool-step small { font-size: 10px; color: var(--sc-sub); letter-spacing: 0.1em; text-transform: uppercase; }

.sc-end { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--space-4); background: var(--c-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: reveal var(--dur-long) var(--ease-out); }
.sc-end__box { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-3); text-align: center; align-items: center; padding: var(--space-8) var(--space-5); color: var(--c-ink); }
.sc-end__box .kicker { display: inline-flex; align-items: center; gap: 6px; }
.sc-end__box h2 { font-size: var(--text-2xl); color: var(--c-accent-text); }
.sc-end__line { font-size: var(--text-xl); font-weight: 800; }
.sc-end__box.is-draw h2 { color: var(--c-ink); }
.sc-end__teams { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; overflow-wrap: anywhere; }
.sc-end__act { display: flex; flex-direction: column-reverse; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
@media (min-width: 420px) { .sc-end__act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

 
@media (orientation: landscape) and (min-width: 560px) {
  .scorer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .sc-bar, .sc-tools { grid-column: 1 / -1; }
  .sc-mid { flex-direction: column; flex-wrap: nowrap; padding: var(--space-2) 0; }
  .pad { margin: var(--space-3); }
  .pad__pts { font-size: clamp(3.25rem, min(16vw, 28vh), 12rem); }
  .pad__who { max-width: 94%; padding: 7px 30px 9px; }
  .pad__names { font-size: var(--text-md); letter-spacing: 0.03em; }
  .pad__foot { min-height: 28px; }
  .sc-bar { padding-block: var(--space-2) 0; }
  .tool { min-height: 52px; }
  .sc-tools { max-width: 760px; width: 100%; justify-self: center; padding-bottom: var(--space-3); }
}
.sc-bar > .sc-theme { margin-left: auto; }
.sc-bar > .sc-voice.is-off { --btn-fg: var(--sc-sub); }    


@media (max-width: 480px) {
  .sc-bar { gap: var(--space-2); }
  .sc-bar > .btn-icon { width: 40px; height: 40px; border-radius: 12px; }
  .sc-bar > .sync-ok { font-size: 0; gap: 0; padding: 8px; }
}
 
.scorer.is-light {
  --sc-ink: oklch(22% 0.045 258); --sc-sub: oklch(45% 0.080 250); --sc-glass: oklch(100% 0 0 / 0.82); --sc-line: oklch(84% 0.035 245);
  background: linear-gradient(180deg, oklch(98% 0.010 240 / 0.9), oklch(94% 0.025 240 / 0.96)), url('../assets/foto/profil-hero.webp') center 18% / cover no-repeat, oklch(96% 0.015 240);
}
.scorer.is-light .pad { --tone: oklch(58% 0.170 245); --tone-hi: oklch(62% 0.150 242); --tone-bg: oklch(98% 0.020 240); --tone-bg2: oklch(91% 0.050 240);
  box-shadow: 0 10px 26px -14px color-mix(in oklab, var(--tone) 60%, transparent), inset 0 0 0 1px oklch(100% 0 0 / 0.6); }
.scorer.is-light .pad-a { --tone: oklch(76% 0.160 82); --tone-hi: oklch(70% 0.150 78); --tone-bg: oklch(99% 0.030 95); --tone-bg2: oklch(92% 0.080 88); }
.scorer.is-light .pad::before { opacity: 0.2; }
.scorer.is-light .pad.is-gp { box-shadow: 0 0 0 2px var(--tone), 0 12px 30px -12px var(--tone); }
.scorer.is-light .pad__who { background: linear-gradient(var(--tone), var(--tone)) center bottom / 74% 2px no-repeat, linear-gradient(180deg, color-mix(in oklab, var(--tone) 22%, white), color-mix(in oklab, var(--tone) 8%, white)); }
.scorer.is-light .pad__names { text-shadow: none; }
.scorer.is-light .pad__pts { text-shadow: 0 1px 0 oklch(100% 0 0 / 0.7); }
.scorer.is-light .pad__sets i { border-color: oklch(50% 0.030 250 / 0.55); }
.scorer.is-light .pad__serve { background: oklch(100% 0 0 / 0.75); }
.scorer.is-light .sc-game { color: oklch(48% 0.150 250); }
.scorer.is-light .sc-flag { background: oklch(100% 0 0 / 0.85); border-color: oklch(62% 0.150 245); box-shadow: 0 4px 12px -8px oklch(50% 0.150 245 / 0.6); }
.scorer.is-light .sc-flag .ic { color: oklch(52% 0.160 248); }
.scorer.is-light .sc-flag.is-hot { background: oklch(97% 0.050 92); border-color: oklch(76% 0.160 82); }
.scorer.is-light .sc-flag.is-hot .ic { color: oklch(58% 0.140 75); }
.scorer.is-light .tool:not(.is-main) { background: linear-gradient(180deg, oklch(100% 0 0), oklch(96% 0.010 240)); box-shadow: 0 6px 16px -12px oklch(40% 0.080 250 / 0.5); }
.scorer.is-light .tool:not(.is-main):hover { filter: brightness(0.97); }
.scorer.is-light .tool.is-main { color: oklch(99% 0.004 240); }
.scorer.is-light .tool-step button { background: oklch(22% 0.045 258 / 0.06); }

@media (max-width: 480px) {    
  .sc-mid { gap: 6px; padding-inline: var(--space-3); }
  .sc-game { padding: 6px 10px; font-size: var(--text-md); gap: 6px; }
  .sc-game small { font-size: 11px; }
  .sc-flag { padding: 7px 10px; gap: 6px; font-size: 11px; letter-spacing: 0.04em; }
  .sc-flag .ic { width: 14px; height: 14px; }
  .pad__who { max-width: 94%; padding-inline: 30px; }    
  .pad__names { font-size: var(--text-md); letter-spacing: 0.03em; }
}
@media (max-width: 359px) { .pad { margin-inline: var(--space-3); } .pad__who { padding-inline: 30px; } .tool { font-size: 12px; } }

 
.su-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-5) var(--space-3); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--c-paper-3), var(--c-paper-2)); border: 1px solid var(--c-rule); }
.su-team { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; min-width: 0; }
.su-team__side { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-faint); }
.su-team b { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; text-transform: uppercase; font-size: var(--text-sm); overflow-wrap: anywhere; }
.su-vs__x { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-xl); color: var(--c-faint); }
.su-serve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.su-serve__opt { position: relative; cursor: pointer; min-width: 0; }
.su-serve__opt input { position: absolute; opacity: 0; pointer-events: none; }
.su-serve__opt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--space-3); border-radius: var(--r-md); border: 1px solid var(--c-rule-2); background: var(--c-paper); font-weight: 700; overflow-wrap: anywhere; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.su-serve__opt span small { font-family: var(--font-display); font-stretch: var(--wide); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-faint); }
.su-serve__opt:hover span { border-color: var(--c-faint); }
.su-serve__opt input:checked + span { border-color: var(--c-focus); background: var(--c-accent-dim); }
.su-serve__opt input:checked + span small { color: var(--c-accent-text); }
.su-serve__opt input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.su-serve__opt--wide { grid-column: 1 / -1; }
 
.su-serve__opt:has(input:disabled) { cursor: not-allowed; }
.su-serve__opt input:disabled + span { opacity: 0.5; border-style: dashed; }
.su-serve__opt:hover input:disabled + span { border-color: var(--c-rule-2); }
@media (max-width: 359px) { .su-format { grid-template-columns: minmax(0, 1fr); } }    
.su-rules summary, .rate-more summary { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; list-style: none; min-height: 32px; }
.su-rules summary::-webkit-details-marker, .rate-more summary::-webkit-details-marker { display: none; }
.su-rules summary .muted { flex: 1; text-align: right; font-size: var(--text-sm); min-width: 0; }
.su-rules[open] summary > .ic, .rate-more[open] summary > .ic:last-child { transform: rotate(180deg); }
.su-rules summary > .ic, .rate-more summary > .ic:last-child { transition: transform var(--dur-short) var(--ease-out); }
.su-rules__body { margin-top: var(--space-4); }
.su-go { position: sticky; bottom: 0; z-index: 5; padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--c-paper) 70%, transparent); }
@media (max-width: 767px) { body[data-route="/skor-instan"] .su-go { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: var(--space-3); } }    

 
.dv { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dv-team { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-lg); background: var(--c-paper-2); border: 1px solid var(--c-rule); box-shadow: var(--c-shadow-card); }
.dv-team.is-winner { border-color: var(--c-accent-line); background: radial-gradient(90% 90% at 50% 0%, var(--c-accent-dim), transparent 70%), var(--c-paper-2); }
.dv-team__tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }
.dv-team.is-winner .dv-team__tag { color: var(--c-accent-text); }
.dv-team.is-draw .dv-team__tag { color: var(--c-ink); }    
.dv-p { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dv-p b { flex: 1; min-width: 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 800; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-p .delta { font-weight: 900; font-size: var(--text-lg); }
.dv-act { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dv-act .btn { flex: 1 1 220px; }

 
.rate-intro { max-width: 70ch; }
.rate-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5) !important; }
@media (min-width: 900px) { .rate-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rate-card { display: flex; flex-direction: column; gap: var(--space-4); }
.rate-card__head { display: flex; align-items: center; gap: var(--space-3); }
.rate-card__head > div { display: flex; flex-direction: column; min-width: 0; }
.rate-card__head b { font-family: var(--font-display); font-stretch: var(--wide); font-weight: 900; font-size: var(--text-lg); text-transform: uppercase; }
.rate-card__head small { font-size: var(--text-xs); }
.rate-q { display: flex; flex-direction: column; gap: 6px; }
.rate-quick { display: flex; width: 100%; }
.rate-quick button { flex: 1 1 0; text-align: center; padding-inline: 6px; min-height: 40px; }
@media (max-width: 379px) { .rate-quick button { padding-inline: 2px; } }    
.rate-more summary { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); border-top: 1px dashed var(--c-rule); padding-top: var(--space-3); }
.rate-more summary span { flex: 1; }
.rate-more summary:hover { color: var(--c-ink); }
.rate-sliders { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); }
.rate-sliders .kicker { margin-bottom: 2px; }
.rate-save { margin-top: var(--space-4) !important; }
.rate-save .btn { flex: 1 1 140px; }

@media (prefers-reduced-motion: reduce) {
  .pad__pts.bump { animation: none; }
  .pad:active, .tool:active { transform: none; }
}
.rate-graded { margin-top: 2px; }    

 
.ik-mode { padding: var(--space-4); }
.ik-mode .switch { display: flex; width: 100%; min-height: 44px; }
.ik-mode__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ik-mode__t b { font-weight: 700; }
.ik-mode__t small { font-size: var(--text-sm); line-height: 1.35; color: var(--c-muted); }
.ik-catat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ik-catat__list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-md); line-height: 1.45; }
.ik-catat__list .ic { flex: none; margin-top: 3px; color: var(--c-win); }

 
.su-isi { margin-top: var(--space-2); }
.isi-pop { --isi-navy: oklch(23% 0.08 258); --isi-navy2: oklch(16% 0.06 262); --isi-a: oklch(84% 0.165 88); --isi-b: oklch(74% 0.15 238); --isi-lime: oklch(91% 0.2 122); --isi-ink: oklch(19% 0.03 262); --isi-putih: oklch(99% 0.004 250); --isi-pudar: oklch(82% 0.025 250); --isi-kaca: oklch(100% 0 0 / 0.07); --isi-garis: oklch(100% 0 0 / 0.16); --isi-merah: oklch(82% 0.12 45); }
.modal.isi-pop .modal__box { background: linear-gradient(170deg, var(--isi-navy), var(--isi-navy2) 70%); color: var(--isi-putih); border-color: var(--isi-garis); }
.modal.isi-pop .modal__body { background: transparent; color: inherit; }
.modal.isi-pop .modal__foot { gap: var(--space-2); border-top: 1px solid var(--isi-garis); background: transparent; }
.isi-pop .modal__foot .btn-ghost { background: var(--isi-kaca); color: var(--isi-putih); border-color: transparent; }
.isi-pop .modal__foot .btn-primary { flex: 1; justify-content: center; border: 0; background: var(--isi-lime); box-shadow: 0 8px 22px -10px var(--isi-lime); color: var(--isi-ink); font-family: var(--font-sport); font-size: 1.125rem; font-style: italic; font-weight: 800; }
.isi-pop .modal__foot .btn-primary:disabled { background: var(--isi-kaca); box-shadow: none; color: var(--isi-pudar); opacity: 1; }
.isi-skor { display: grid; gap: var(--space-3); min-width: 0; }
 
.isi-format { display: grid; gap: 6px; }
.isi-format .su-serve { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.isi-format .su-serve__opt span { padding: 8px 12px; border-color: var(--isi-garis); background: var(--isi-kaca); color: var(--isi-putih); font-size: var(--text-sm); }
.isi-format .su-serve__opt span small { color: var(--isi-pudar); letter-spacing: 0.06em; }
.isi-format .su-serve__opt input:checked + span { border-color: var(--isi-lime); background: oklch(91% 0.2 122 / 0.16); box-shadow: inset 0 0 0 1px var(--isi-lime); }
.isi-format .su-serve__opt input:checked + span small { color: var(--isi-lime); }
.isi-format .su-serve__opt input:focus-visible + span { outline-color: var(--isi-lime); }
.isi-format .hint { margin: 0; color: var(--isi-pudar); font-size: var(--text-xs); line-height: 1.4; }
 
.isi-papan { position: relative; display: grid; gap: 10px; padding: 14px 12px 14px; overflow: hidden; border-radius: 16px; background: linear-gradient(90deg, var(--isi-a) 50%, var(--isi-b) 50%) top / 100% 3px no-repeat, linear-gradient(160deg, oklch(29% 0.09 256), oklch(18% 0.07 262)); box-shadow: inset 0 0 0 1px var(--isi-garis); }
.isi-papan::before { content: ""; position: absolute; top: 3px; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: repeating-linear-gradient(180deg, var(--isi-garis) 0 6px, transparent 6px 12px); pointer-events: none; }
.isi-vs, .isi-baris { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.isi-vs { align-items: start; }
.isi-baris[hidden] { display: none; }
.isi-tim { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.isi-tim b { font-family: var(--font-sport); font-size: 1.0625rem; font-style: italic; font-weight: 800; line-height: 1.1; text-transform: uppercase; overflow-wrap: anywhere; }
.isi-tim--a b { color: var(--isi-a); } .isi-tim--b b { color: var(--isi-b); }
.isi-tim .avatar { box-shadow: 0 0 0 2px var(--isi-navy); }
.isi-vs__x { align-self: center; padding: 2px 0; background: var(--isi-navy2); border-radius: 8px; color: var(--isi-putih); font-family: var(--font-sport); font-size: 1.25rem; font-style: italic; font-weight: 800; text-align: center; }
.isi-g { display: grid; justify-items: center; line-height: 1; background: var(--isi-navy2); border-radius: 8px; padding: 4px 0; }
.isi-g small { color: var(--isi-pudar); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.isi-g b { color: var(--isi-putih); font-family: var(--font-sport); font-size: 1.375rem; font-style: italic; font-weight: 800; }
.isi-angka { width: 100%; min-width: 0; height: 68px; padding: 0; border: 2px solid var(--isi-garis); border-radius: 14px; background: var(--isi-navy2); caret-color: var(--isi-lime); color: var(--isi-putih); font-family: var(--font-sport); font-size: 2.75rem; font-style: italic; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.isi-angka::placeholder { color: var(--isi-putih); opacity: 0.2; }
.isi-angka--a { border-color: oklch(84% 0.165 88 / 0.4); } .isi-angka--b { border-color: oklch(74% 0.15 238 / 0.45); }
.isi-angka:focus, .isi-angka:focus-visible { outline: 2px solid var(--isi-lime); outline-offset: 1px; border-color: transparent; box-shadow: none; }
.isi-angka--a.is-unggul { border-color: var(--isi-a); background: var(--isi-a); color: var(--isi-ink); }
.isi-angka--b.is-unggul { border-color: var(--isi-b); background: var(--isi-b); color: var(--isi-ink); }
 
.isi-bola { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.isi-bola > span { display: inline-flex; align-items: center; gap: 8px; color: var(--isi-pudar); font-size: var(--text-sm); font-weight: 700; }
.isi-bola__step { display: flex; align-items: center; gap: 6px; }
.isi-bola__step button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--isi-garis); border-radius: 50%; background: var(--isi-kaca); color: var(--isi-putih); cursor: pointer; }
.isi-bola__step button:focus-visible { outline: 2px solid var(--isi-lime); outline-offset: 2px; }
.isi-bola__step b { min-width: 32px; color: var(--isi-putih); font-family: var(--font-sport); font-size: 1.625rem; font-style: italic; font-weight: 800; text-align: center; }
 
.isi-hasil { display: grid; gap: 4px; min-height: 48px; align-content: center; padding: 10px 14px; border-radius: 12px; background: var(--isi-kaca); color: var(--isi-pudar); font-size: var(--text-sm); line-height: 1.35; }
.isi-hasil > span { display: flex; align-items: center; gap: 8px; }
.isi-hasil[data-kind="salah"] { box-shadow: inset 0 0 0 1px var(--isi-merah); color: var(--isi-merah); font-weight: 700; }
.isi-hasil[data-kind="ok"] { background: oklch(91% 0.2 122 / 0.14); box-shadow: inset 0 0 0 1px var(--isi-lime); color: var(--isi-lime); }
.isi-hasil[data-kind="ok"] > b { display: flex; align-items: center; gap: 8px; font-family: var(--font-sport); font-size: 1.25rem; font-style: italic; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.isi-hasil[data-kind="ok"] > b * { color: inherit; }
.isi-hasil[data-kind="ok"] > b i { font-style: inherit; white-space: nowrap; }
.isi-hasil small { color: var(--isi-pudar); font-size: var(--text-xs); font-weight: 600; }
@media (max-width: 359px) { .isi-vs, .isi-baris { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 6px; } .isi-angka { height: 62px; font-size: 2.5rem; } .isi-papan { padding-inline: 10px; } }
@media (prefers-reduced-motion: reduce) { .isi-angka { transition: none; } }





.scorer { --sc-tinta: oklch(17% 0.04 262); }
.sc-bar__title b { font-family: var(--font-sport); font-size: 1.4rem; font-style: italic; font-weight: 800; letter-spacing: 0.01em; line-height: 1; }
.pad { --tone-ink: var(--sc-tinta); border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--tone);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background: linear-gradient(165deg, var(--tone-bg), var(--tone-bg2)); }
.pad::after { content: ""; position: absolute; z-index: -1; top: -14px; bottom: -14px; right: 22px; width: 54px; background: repeating-linear-gradient(90deg, var(--tone) 0 5px, transparent 5px 14px); opacity: 0.22; transform: skewX(-18deg); pointer-events: none; }
.pad.is-gp { box-shadow: inset 0 0 0 4px var(--tone); }
.pad:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--tone-hi), inset 0 0 0 7px var(--sc-tinta); }
.pad__who { background: var(--tone); color: var(--tone-ink); }
.pad__names { color: var(--tone-ink); font-family: var(--font-sport); font-size: 1.3rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; text-shadow: none; }
.pad__pts { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0; text-shadow: none; }
.pad__sets i.on { box-shadow: none; }
.pad__serve { padding: 5px 16px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--tone); color: var(--tone-ink); font-family: var(--font-sport); font-size: 0.95rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.pad__serve .serve-dot { background: var(--tone-ink); box-shadow: none; }
.sc-game { padding: 6px 18px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--sc-glass); color: var(--sc-ink); font-family: var(--font-sport); font-size: 1.2rem; font-style: italic; font-weight: 800; }
.sc-game small { font-size: 0.85rem; letter-spacing: 0.02em; }
.sc-flag { padding: 7px 18px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--sc-glass); box-shadow: none; font-family: var(--font-sport); font-size: 0.95rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.sc-flag.is-hot { background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.sc-flag.is-hot .ic { color: currentColor; }
.tool { border: 0; border-radius: 0; background: oklch(22% 0.05 262 / 0.94); box-shadow: inset 0 0 0 1px var(--sc-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--font-sport); font-size: 0.9375rem; font-style: italic; font-weight: 800; line-height: 1.05; text-align: center; white-space: normal; }
.tool > span { text-wrap: balance; }    
.tool:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.tool.is-main { background: var(--x-lime); color: var(--x-lime-ink); box-shadow: none; }
.tool.is-main:hover { filter: none; background: var(--x-lime-hi); }
.tool-step button { border-radius: 0; }
.tool-step button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }
.tool-step b { font-family: var(--font-sport); font-style: italic; }
.tool-step small { font-family: var(--font-sport); font-size: 0.8rem; font-style: italic; letter-spacing: 0.04em; }
@media (max-width: 359px) { .tool { font-size: 0.875rem; } .tool-step { padding-inline: 2px; } .tool-step button { width: 30px; } }    
@media (max-width: 480px) { .sc-bar__title b { font-size: 1.2rem; } .sc-bar > .btn-icon { width: 44px; height: 44px; } }    
 
.scorer.is-light .pad { --tone-ink: oklch(99% 0.004 240); --tone-bg: oklch(99.5% 0.003 250); --tone-bg2: oklch(96.5% 0.01 250); box-shadow: inset 0 0 0 2px var(--tone); }
.scorer.is-light .pad-a { --tone-ink: var(--sc-tinta); --tone: oklch(80% 0.165 85); --tone-bg: oklch(99.5% 0.004 95); --tone-bg2: oklch(96.5% 0.02 92); }
.scorer.is-light .pad.is-gp { box-shadow: inset 0 0 0 4px var(--tone); }
.scorer.is-light .pad__who { background: var(--tone); }
.scorer.is-light .pad::after { opacity: 0.3; }
.scorer.is-light .pad__serve { background: var(--tone); }
.scorer.is-light .sc-flag { background: oklch(100% 0 0 / 0.9); box-shadow: none; }
.scorer.is-light .sc-flag.is-hot { background: var(--x-lime); }
.scorer.is-light .tool:not(.is-main) { background: oklch(100% 0 0); box-shadow: inset 0 0 0 1px var(--sc-line); }
.scorer.is-light .tool.is-main { color: var(--x-lime-ink); }
 
.sc-end__box.hud { border: 0; border-radius: 0; background: var(--x-navy); color: oklch(97% 0.006 250); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.14); overflow: hidden; isolation: isolate;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.sc-end__box.hud::after { inset: 0 -14px auto auto; z-index: -1; width: 150px; height: 96px; border-radius: 0; background: repeating-linear-gradient(115deg, oklch(91% 0.2 122 / 0.55) 0 5px, transparent 5px 15px);
  -webkit-mask-image: linear-gradient(200deg, #000 20%, transparent 75%); mask-image: linear-gradient(200deg, #000 20%, transparent 75%); }
.sc-end__box .kicker { padding: 3px 16px; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-size: 1rem; font-style: italic; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; }
.sc-end__box .kicker .ic { color: currentColor; }
.sc-end__box h2, .sc-end__box.is-draw h2 { color: oklch(98% 0.005 250); font-family: var(--font-sport); font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.sc-end__box h2 > span:first-child { color: var(--x-lime); }
.sc-end__line { color: oklch(98% 0.005 250); font-family: var(--font-sport); font-size: 2.1rem; font-style: italic; font-weight: 800; line-height: 1; }
.sc-end__teams { color: oklch(90% 0.02 250); font-family: var(--font-sport); font-size: 1.1rem; font-style: italic; font-weight: 800; }
.sc-end__box .muted, .sc-end__box .faint { color: oklch(84% 0.02 250); }
.sc-end__box .btn-ghost:where(:not(.btn-icon)) { --btn-bg: oklch(100% 0 0 / 0.12); --btn-fg: oklch(98% 0.005 250); }
.sc-end__box .btn-ghost:where(:not(.btn-icon)):hover { --btn-bg: oklch(100% 0 0 / 0.2); }
.sc-end__box .btn-ghost:not(.btn-icon) > .ic:first-child { color: currentColor; }

 
.su-vs { border: 0; border-radius: 0; background: var(--x-navy); color: oklch(97% 0.006 250); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.su-team__side { padding: 2px 14px; clip-path: var(--x-jg); background: oklch(84% 0.165 88); color: oklch(17% 0.04 262); font-family: var(--font-sport); font-size: 0.95rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.su-vs > .su-team:last-child .su-team__side { background: oklch(74% 0.15 238); }
.su-team b { color: oklch(98% 0.005 250); font-family: var(--font-sport); font-size: 1.2rem; font-style: italic; font-weight: 800; line-height: 1.05; }
.su-vs__x { padding: 4px 16px; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-size: 1.3rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
 
.su-serve__opt span { border: 0; border-radius: 0; background: var(--x-chip); color: var(--x-ink); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.su-serve__opt span small { color: var(--x-muted); font-family: var(--font-sport); font-size: 0.9rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.su-serve__opt input:checked + span { background: var(--x-lime); color: var(--x-lime-ink); box-shadow: inset 4px 0 0 var(--x-navy); }
.su-serve__opt input:checked + span small { color: var(--x-lime-ink); }
.su-serve__opt input:focus-visible + span { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus); }
.su-serve__opt input:disabled + span { opacity: 0.45; }
.scorer-page .h-sm { position: relative; padding-left: 14px; color: var(--x-ink); font-family: var(--font-sport); font-size: 1.3rem; font-style: italic; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.scorer-page .h-sm::before { content: ""; position: absolute; left: 2px; top: 0.06em; bottom: 0.1em; width: 5px; background: var(--x-lime); transform: skewX(-14deg); }
 
.dv-team { border: 0; border-radius: 0; background: var(--x-card); color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(var(--x-cut) 0, 100% 0, 100% calc(100% - var(--x-cut)), calc(100% - var(--x-cut)) 100%, 0 100%, 0 var(--x-cut)); }
.dv-team.is-winner { background: var(--x-card); box-shadow: inset 5px 0 0 var(--x-lime), inset 0 0 0 1px var(--x-line); }
.dv-team__tag { align-self: flex-start; padding: 3px 16px; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-family: var(--font-sport); font-size: 1rem; font-style: italic; letter-spacing: 0.02em; }
.dv-team.is-winner .dv-team__tag { background: var(--x-lime); color: var(--x-lime-ink); }
.dv-team.is-draw .dv-team__tag { background: var(--x-tag); color: var(--x-tag-ink); }
.dv-team__tag .ic { color: currentColor; }
.dv-p b { font-family: var(--font-sport); font-size: 1.2rem; font-style: italic; }
.dv-p .delta { font-family: var(--font-sport); font-size: 1.4rem; font-style: italic; font-weight: 800; }
 
.rate-card__head b { font-family: var(--font-sport); font-size: 1.4rem; font-style: italic; font-weight: 800; }
.rate-more summary { color: var(--x-ink); font-family: var(--font-sport); font-size: 1rem; font-style: italic; font-weight: 800; letter-spacing: 0.01em; border-top-color: var(--x-line); }
 
.pc-page .lb-pos { color: var(--x-ink); font-family: var(--font-sport); font-size: 1.2rem; font-style: italic; font-weight: 800; font-stretch: normal; }

 
.modal.isi-pop .modal__box { border: 0; border-radius: 0; background: var(--isi-navy); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.modal.isi-pop .modal__head h2 { text-transform: uppercase; }
.modal.isi-pop .modal__head .btn-icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }    
.isi-pop .modal__foot .btn-primary { box-shadow: none; }
.isi-papan { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.isi-vs__x { padding: 2px 6px; border-radius: 0; clip-path: var(--x-jg); background: var(--isi-lime); color: var(--isi-ink); }
.isi-g, .isi-angka, .isi-hasil { border-radius: 0; }

 
.live-view .vs { border: 0; border-radius: 0; background: var(--x-card); box-shadow: inset 0 0 0 1px var(--x-line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.live-view .vs__bar { position: relative; isolation: isolate; overflow: hidden; padding-right: 58px; border-bottom: 3px solid var(--x-lime); background: var(--x-navy); color: oklch(88% 0.02 250); }
.live-view .vs__bar::after { content: ""; position: absolute; z-index: -1; top: -10px; bottom: -10px; right: -12px; width: 52px; background: repeating-linear-gradient(90deg, var(--x-lime) 0 5px, transparent 5px 14px); transform: skewX(-18deg); opacity: 0.85; pointer-events: none; }
.live-view .vs__bar .kicker { color: oklch(98% 0.005 250); font-family: var(--font-sport); font-size: 1rem; font-style: italic; font-weight: 800; letter-spacing: 0.01em; }
.live-view .vs__bar :is(.muted, .faint), .live-view .vs__rules { color: oklch(84% 0.02 250); }
.live-view .vs__bar .chip-live { border-color: transparent; background: var(--c-live-solid); color: oklch(100% 0 0); }
.live-view .vs__pn { font-family: var(--font-sport); font-size: 1.1rem; font-style: italic; font-weight: 800; }
.live-view .vs__pts { font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0; }
.live-view .vs__team.is-serving .vs__pts { text-shadow: none; }
.live-view .vs__team.is-winner { background: none; }
.live-view .vs__tag { min-height: 28px; padding: 3px 16px; border: 0; border-radius: 0; clip-path: var(--x-jg); background: var(--x-chip); color: var(--x-chip-ink); font-family: var(--font-sport); font-size: 0.95rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.live-view .vs__team:is(.is-serving, .is-winner) .vs__tag { background: var(--x-lime); color: var(--x-lime-ink); }
.live-view .vs__tag .serve-dot { flex: none; background: currentColor; box-shadow: none; }
@media (max-width: 639px) { .live-view .vs__tag { max-width: 100%; padding-inline: 12px; font-size: 0.85rem; letter-spacing: 0; line-height: 1.1; white-space: normal; text-align: center; } }    
.live-view .vs__mid, .live-view .vs__team[data-side="A"] { border-color: var(--x-line); }
.live-view .vs__games span { font-family: var(--font-sport); font-size: 0.9rem; font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.live-view .vs__games b { font-family: var(--font-sport); font-size: 1.2rem; font-style: italic; }
.live-view .vs__x { padding: 3px 14px; clip-path: var(--x-jg); background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-style: italic; font-weight: 800; letter-spacing: 0.02em; }
.live-view .vs__flag { background: var(--x-lime); color: var(--x-lime-ink); font-family: var(--font-sport); font-size: 1.1rem; font-style: italic; letter-spacing: 0.02em; }
.live-view .vs__flag.is-info { background: var(--x-chip); color: var(--x-ink); }