.volleyball-demo {
  --vb-ink: #fff0eb;
  --vb-muted: #bbaab4;
  --vb-red: #f40c3f;
  --vb-rule: rgba(255, 240, 235, .16);
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--vb-ink);
  background: #0c0e15;
  text-align: left;
  font: 400 14px/1.6 var(--font-sans, sans-serif);
  isolation: isolate;
}
.volleyball-demo *, .volleyball-demo *::before, .volleyball-demo *::after { box-sizing: border-box; }
.volleyball-demo__heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; padding: 17px 20px 11px; color: #ff5a7c; font: 500 11px/1.5 var(--font-mono, monospace); letter-spacing: .045em; }
.volleyball-demo__heading > :last-child { color: var(--vb-muted); font-size: 10px; }
.volleyball-demo__scoreboard { display: grid; grid-template-columns: 1fr minmax(96px, 1.4fr) 1fr; align-items: center; gap: 12px; padding: 0 24px 16px; }
.volleyball-demo__team { min-width: 0; }
.volleyball-demo__team > span { display: flex; align-items: center; gap: 7px; color: #ddcbd1; font: 500 11px/1.4 var(--font-mono, monospace); }
.volleyball-demo__team > span > i { display: inline-block; width: 3px; height: 11px; background: var(--vb-red); }
.volleyball-demo__team--ai > span > i { background: #e1d8d1; }
.volleyball-demo__team--ai { text-align: right; }
.volleyball-demo__team--ai > span { justify-content: flex-end; }
.volleyball-demo__team output { display: block; margin-top: 5px; color: var(--vb-ink); font: 500 clamp(34px, 3vw, 48px)/1 var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
.volleyball-demo__team--player output { color: #ff5a7c; }
.volleyball-demo__serve-dot { width: 5px; height: 5px; border-radius: 50%; background: #f4d6ad; }
.volleyball-demo__serve-dot[hidden] { display: none; }
.volleyball-demo__match { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.volleyball-demo__match > span:first-child { color: #dcc7ca; font: 500 11px/1.5 var(--font-mono, monospace); letter-spacing: .06em; }
.volleyball-demo__match > b { color: #706571; font: 500 17px/1 var(--font-mono, monospace); }
.volleyball-demo__rally { display: flex; align-items: center; gap: 6px; color: var(--vb-muted); font: 400 10px/1.5 var(--font-mono, monospace); }
.volleyball-demo__rally output { color: #eee1df; font-variant-numeric: tabular-nums; }
.volleyball-demo__court { position: relative; width: 100%; min-width: 0; aspect-ratio: 800 / 460; border-top: 1px solid var(--vb-rule); border-bottom: 1px solid var(--vb-rule); overflow: hidden; touch-action: pan-y; background: #111019; }
.volleyball-demo__canvas { display: block; width: 100%; height: 100%; }
.volleyball-demo__court:focus-visible { outline: 2px solid var(--vb-red); outline-offset: -3px; }
.volleyball-demo__serve-tag { position: absolute; top: 13%; left: 3%; padding: 2px 7px; border-left: 2px solid var(--vb-red); color: #dcc7ca; background: rgba(12, 14, 21, .7); font: 500 10px/1.5 var(--font-mono, monospace); pointer-events: none; }
.volleyball-demo[data-serve="ai"] .volleyball-demo__serve-tag { left: auto; right: 3%; border-left: 0; border-right: 2px solid #e1d8d1; }
.volleyball-demo[data-state="idle"] .volleyball-demo__serve-tag, .volleyball-demo[data-state="finished"] .volleyball-demo__serve-tag { visibility: hidden; }
.volleyball-demo__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; background: linear-gradient(180deg, rgba(7, 10, 17, .88), rgba(9, 10, 16, .68) 75%, rgba(9, 10, 16, .3)); text-align: center; }
.volleyball-demo__overlay[hidden] { display: none; }
.volleyball-demo__round { color: #ed8298; font: 500 10px/1.5 var(--font-mono, monospace); letter-spacing: .12em; }
.volleyball-demo__overlay-title { margin-top: 8px; font: 700 clamp(22px, 2.35vw, 34px)/1.3 var(--font-serif, serif); }
.volleyball-demo__overlay-hint { width: min(100%, 30em); margin: 10px 0 18px; color: #e2d1d5; font-size: 14px; line-height: 1.7; }
.volleyball-demo button { min-height: 44px; min-width: 44px; border: 1px solid var(--vb-rule); border-radius: 0; color: var(--vb-ink); background: #181722; font: 600 14px/1.3 var(--font-sans, sans-serif); cursor: pointer; touch-action: pan-y; transition: background-color .15s, border-color .15s; }
.volleyball-demo button:hover:not(:disabled), .volleyball-demo button.is-held { border-color: #f45a7b; background: #451a2b; }
.volleyball-demo button:focus-visible { outline: 2px solid #fff0eb; outline-offset: 3px; }
.volleyball-demo button:disabled { cursor: default; opacity: .4; }
.volleyball-demo .volleyball-demo__start { min-width: 140px; padding: 12px 22px; border-color: var(--vb-red); background: var(--vb-red); color: #fff7f4; }
.volleyball-demo .volleyball-demo__start:hover:not(:disabled) { background: #bd0d35; }
.volleyball-demo__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 10px 14px; padding: 16px 20px 7px; }
.volleyball-demo__pad { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 8px; width: 100%; max-width: 340px; min-width: 0; }
.volleyball-demo__pad button { display: flex; min-height: 50px; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 4px; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.volleyball-demo__pad button > span { font: 500 21px/1 var(--font-mono, monospace); }
.volleyball-demo__pad button > small { font: 400 10px/1.5 var(--font-sans, sans-serif); color: #cfbbc5; }
.volleyball-demo__pad button[data-vb-action="hit"] { border-color: rgba(244, 12, 63, .55); color: #ff7894; background: #2a1523; }
.volleyball-demo__pad button[data-vb-action="hit"].is-held { background: #731a39; }
.volleyball-demo__pause { padding: 9px 14px; align-self: center; }
.volleyball-demo__control-hint { grid-column: 1 / -1; color: #c6b3bf; font-size: 12px; line-height: 1.6; }
.volleyball-demo__note { margin: 0; padding: 3px 20px 16px; color: var(--vb-muted); font-size: 11px; line-height: 1.6; }
.volleyball-demo__feedback { position: absolute; top: 17%; left: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 90%; padding: 6px 13px; border: 1px solid rgba(244, 12, 63, .45); background: rgba(21, 12, 25, .88); color: #ffe7e8; font: 600 13px/1.4 var(--font-mono, monospace); text-align: center; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity .12s; }
.volleyball-demo__feedback small { color: #d1b6c0; font: 400 10px/1.5 var(--font-mono, monospace); }
.volleyball-demo__feedback small:empty { display: none; }
.volleyball-demo__feedback.is-visible { opacity: 1; }
.volleyball-demo__feedback[data-kind="ai"] { color: #e1d8d1; border-color: #938992; }
.volleyball-demo__feedback[data-kind="player"] { color: #ffbdcc; }
.volleyball-demo__live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (max-width: 480px) {
  .volleyball-demo__heading { padding: 14px 12px 10px; }
  .volleyball-demo__heading > :last-child { display: none; }
  .volleyball-demo__scoreboard { padding: 0 15px 12px; gap: 9px; }
  .volleyball-demo__team output { font-size: 36px; }
  .volleyball-demo__match > span:first-child { font-size: 10px; }
  .volleyball-demo__rally { gap: 4px; font-size: 9px; }
  .volleyball-demo__overlay { padding: 12px; }
  .volleyball-demo__overlay-title { margin-top: 4px; font-size: 21px; }
  .volleyball-demo__overlay-hint { margin: 7px 0 10px; font-size: 12px; line-height: 1.45; }
  .volleyball-demo__round { font-size: 8px; }
  .volleyball-demo .volleyball-demo__start { min-height: 44px; padding: 9px 15px; font-size: 13px; }
  .volleyball-demo__controls { gap: 8px; padding: 12px 10px 7px; }
  .volleyball-demo__pad { gap: 4px; }
  .volleyball-demo__pad button { min-height: 48px; }
  .volleyball-demo__pause { padding-inline: 8px; font-size: 12px; }
  .volleyball-demo__control-hint { font-size: 11px; }
  .volleyball-demo__note { padding: 2px 10px 13px; font-size: 11px; }
  .volleyball-demo__serve-tag { font-size: 8px; padding: 1px 4px; }
  .volleyball-demo__feedback { top: 9%; padding: 4px 8px; font-size: 11px; }
}
@media (max-width: 360px) {
  .volleyball-demo__overlay { padding: 9px 10px; }
  .volleyball-demo__round { display: none; }
  .volleyball-demo__overlay-title { font-size: 19px; }
  .volleyball-demo__overlay-hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .volleyball-demo button, .volleyball-demo__feedback { transition: none; } }