@font-face{font-family:Barlow Condensed;src:url('./assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{background:#0b1b22;--lime:#f1c365;--teal:#61c4b5;color:#fff7e5}
.app[data-screen="home"]{
  --home-tool-size:44px;
  --home-tool-gap:4px;
  --home-tool-inset:13px;
  --home-tools-width:calc(3 * var(--home-tool-size) + 2 * var(--home-tool-gap));
  --home-safe-bottom:var(--safe-bottom);
  height:100svh;
  max-height:var(--home-visible-height,none);
  container:home-screen / size;
  position:relative;display:block;padding:0;max-width:none;isolation:isolate;overflow:hidden;background:#0b1b22
}
@media(display-mode:standalone){
  .app[data-screen="home"]{--home-safe-bottom:max(var(--safe-bottom),env(safe-area-max-inset-bottom,0px))}
}
.app[data-screen="home"] .view{position:absolute;inset:0;border:0;border-radius:0;background:#0b1b22}
.app[data-screen="home"] #court{visibility:hidden}
.app[data-screen="home"] .topbar{position:absolute;top:calc(var(--safe-top) + 8px);right:calc(var(--safe-right) + var(--home-tool-inset));height:var(--home-tool-size);z-index:3;justify-content:flex-end}
.app[data-screen="home"] .brand{display:none}
.app[data-screen="home"] .top-actions{gap:var(--home-tool-gap)}
.app[data-screen="home"] .top-actions button{border:0;border-radius:0;background:transparent;width:var(--home-tool-size);height:var(--home-tool-size);display:grid;place-items:center;color:#d9e5e3}
.app[data-screen="home"] .top-actions button:active{background:#61c4b51f}
.app[data-screen="home"] .top-actions svg{width:23px;height:23px;stroke-width:2;stroke-linejoin:round}
.app[data-screen="play"] :is(#settings,#vibration){display:none!important}
.app[data-screen="home"] #vibration:disabled{opacity:.45;cursor:default}
.home{inset:var(--safe-top) var(--safe-right) var(--home-safe-bottom,var(--safe-bottom)) var(--safe-left);padding:0;display:block;background:#0b1b22;overflow:hidden}
.home-art{position:absolute;inset:0;width:100%;height:100%;display:block;background:url('./assets/cover-six-tall.png') center top / cover no-repeat;pointer-events:none}
.home::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08171ebf,transparent 30%,transparent 61%,#0b1b2299 77%,#0b1b22 96%);pointer-events:none}
.hero{--hero-inset-right:20px;position:absolute;left:clamp(20px,6.4vw,36px);right:var(--hero-inset-right);top:44px;z-index:1}
.hero h1{margin:0;text-shadow:none;line-height:1;letter-spacing:normal;font-size:inherit}
.title-call{display:block;margin-left:2px;font:700 clamp(14px,4.35vw,21px)/1.2 "Barlow Condensed",sans-serif;letter-spacing:.23em;color:var(--teal)}
.title-volleyball{display:block;margin-top:1px;font:700 clamp(47px,15.1vw,84px)/1.04 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:-.015em;color:#fff7e5;white-space:nowrap}
.title-local{display:block;margin:13px 0 0 3px;font-size:clamp(16px,4.87vw,24px);font-weight:800;line-height:1.3;letter-spacing:.25em}
.title-rule{display:block;width:25px;height:2px;margin:24px 0 0 3px;background:var(--teal)}
.home-actions{position:absolute;z-index:1;bottom:74px;left:clamp(20px,6.15vw,36px);right:clamp(20px,6.15vw,36px);display:grid;gap:10px;width:auto}
.home-actions>button{min-height:59px;padding:0 20px;border:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);font-size:20px;font-weight:850;letter-spacing:.05em;background:#f1c365;color:#10242b;box-shadow:inset 0 1px #fff6;transition:background-color .1s,filter .1s}
.home-actions>button span{display:flex;align-items:center;gap:18px;font:700 12px/1 Arial,sans-serif;letter-spacing:.04em}
.home-actions>button b{font-size:24px;font-weight:400}
.home-actions>.secondary{min-height:53px;background:#152c32ed;color:#fff7e5;box-shadow:inset 3px 0 #61c4b5,inset 0 0 0 1px #42615f}
.home-actions>.secondary span{color:#82b7ae}
.home-actions>.resume{min-height:52px;background:#75d7c7;color:#10242b;font-size:18px}
.home-actions>.resume span{font-size:11px;gap:4px}
#save-status{font-size:11px;line-height:1.4;color:#e4bb7a;background:#0b1b22ed;padding:6px 9px}
.home-actions>button:active:not(:disabled){filter:brightness(1.17)}
.home-actions>button:focus-visible{clip-path:none;outline:2px solid #fff7e5;outline-offset:3px}
.home-actions>button:disabled{opacity:.55}
.home-actions[data-checking-save]>button{visibility:hidden}
.athlete-loading{position:absolute;left:0;right:0;bottom:calc(100% + 12px);padding:8px 10px;background:#0b1b22e8;border-left:2px solid var(--teal);font-size:12px;color:#d5e4de}
.athlete-loading button{min-height:44px;border-radius:0;border-color:#61c4b5;background:#152c32;margin:8px auto 0}
.app[data-screen="home"] footer{position:absolute;z-index:3;left:calc(var(--safe-left) + 20px);right:calc(var(--safe-right) + 20px);bottom:calc(var(--home-safe-bottom) + 5px);min-height:44px;font-size:9px;color:#a0b5b5}
.app[data-screen="home"] #footnote{display:none}
.app[data-screen="home"] .footer-actions{width:100%;gap:0 8px;align-items:center;justify-content:flex-end}
.app[data-screen="home"] #offline{margin-right:auto}
.app[data-screen="home"] #update-status{color:#9ac5bb;max-width:100%;font-size:9px}
.app[data-screen="home"] footer button{min-width:44px;min-height:44px;padding:4px 2px;text-decoration:none;color:#f1c365;font-size:10px}
@media(min-width:600px) and (orientation:portrait){.home-actions{max-width:480px;left:50%;right:auto;width:calc(100% - 72px);transform:translateX(-50%)}.hero{left:calc(50% - 240px)}}
@container home-screen (max-height:700px) and (orientation:portrait){.hero{top:42px}.title-volleyball{font-size:clamp(45px,14.5vw,59px)}.title-local{margin-top:8px}.title-rule{margin-top:14px}.home-actions{bottom:64px;gap:8px}.home-actions>button{min-height:52px;font-size:18px}.home-actions>.secondary{min-height:48px}}
@media(orientation:landscape){.home-art{left:auto;right:0;width:65%;background-image:url("./assets/cover-six-compact.png");background-position:center 46%}.home::after{background:linear-gradient(90deg,#0b1b22 0%,#0b1b22f0 29%,#0b1b2250 60%,transparent),linear-gradient(0deg,#0b1b2290,transparent 30%)}.hero{left:5vw;top:clamp(25px,9vh,70px);right:auto;width:38%}.title-call{font-size:14px}.title-volleyball{font-size:clamp(42px,6.4vw,76px)}.title-local{font-size:18px;margin-top:9px}.title-rule{margin-top:15px}.home-actions{left:5vw;right:auto;width:min(36%,400px);bottom:58px;gap:8px}.home-actions>button{min-height:49px;font-size:17px;padding:0 15px}.home-actions>.secondary{min-height:45px}.home-actions>button span{gap:12px;font-size:10px}.app[data-screen="home"] footer{left:5vw;right:5vw}.app[data-screen="home"] .footer-actions{gap:10px}.app[data-screen="home"] #offline{margin-right:0}.app[data-screen="home"] #update-status{margin-right:auto}}
@container home-screen (orientation:landscape) and (max-height:340px){.hero{top:15px}.title-volleyball{font-size:39px}.title-local{margin-top:4px;font-size:15px}.title-rule{display:none}.home-actions{bottom:48px;gap:5px}.home-actions>button{min-height:44px}.home-actions>.secondary{min-height:44px}}
@media(prefers-reduced-motion:reduce){.home-actions>button{transition:none}}

@media (orientation: portrait) and (max-width: 599px) {
  .app[data-screen="home"] #home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .app[data-screen="home"] #home-actions::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -9px -8px -10px;
    border: 1px solid #94bdcb5e;
    border-radius: 14px;
    background: linear-gradient(165deg, #142c3bf2, #081725fa);
    box-shadow: inset 0 1px #d5e9ef1f, 0 8px 24px #020a16a6;
    pointer-events: none;
  }

  .app[data-screen="home"] #home-actions > button {
    --button-ledge: #5f7c86;
    position: relative;
    min-height: 48px;
    border: 1px solid #ffffff70;
    border-radius: 8px;
    color: #122c3b;
    box-shadow: inset 0 1px #ffffff9e, 0 3px 0 var(--button-ledge), 0 5px 8px #020c1759;
    transition: transform 90ms ease, box-shadow 90ms ease, filter 90ms ease;
  }

  .app[data-screen="home"] #home-actions > :is(.start, .resume) {
    --button-ledge: #a26c28;
    min-height: 52px;
    padding-inline: 17px;
    color: #162736;
    background: linear-gradient(105deg, #ffc962, #ffe2a0);
    border-color: #ffe8ae;
  }

  .app[data-screen="home"] #home-actions > .start > span,
  .app[data-screen="home"] #home-actions > .resume > span {
    min-height: 26px;
    padding-inline-start: 11px;
    border-inline-start: 1px dashed #87693282;
    color: inherit;
  }

  .app[data-screen="home"] #home-actions > .secondary {
    padding-inline: 12px;
    color: #153440;
  }

  .app[data-screen="home"] #home-actions > [data-mode="practice"] {
    --button-ledge: #3f8d7e;
    background: linear-gradient(110deg, #83d6c0, #b4ecda);
    border-color: #c2f4e5;
  }

  .app[data-screen="home"] #home-actions > [data-mode="tutorial"] {
    --button-ledge: #899eaa;
    background: linear-gradient(110deg, #e7efed, #fcf7e9);
    border-color: #fffdf2;
  }

  .app[data-screen="home"] #home-actions > .secondary > b {
    color: inherit;
    opacity: .9;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker) {
    --button-ledge: #6a8999;
    box-shadow: inset 0 1px #ffffff9e, 0 3px 0 var(--button-ledge), 0 5px 8px #020c1759;
    grid-column: auto;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    grid-template-rows: auto auto;
    min-height: 52px;
    gap: 1px 6px;
    padding: 7px 8px;
    color: #142e3d;
    background: linear-gradient(110deg, #c5dce3, #e0edf0);
    border-color: #e4f4f5;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker) > :is(.appearance-picker-portrait, canvas) {
    grid-area: 1 / 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #214453;
    box-shadow: 0 1px 0 #f5ffffba, inset 0 0 0 1px #8bb8c580;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker) > svg {
    grid-area: 1 / 3 / span 2;
    width: 16px;
    height: 22px;
    padding: 3px 0;
    border-radius: 5px;
    color: #254a5b;
    background: #accad68c;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker) :is(.appearance-picker-title, .ball-picker-title) {
    grid-area: 1 / 2;
    align-self: end;
    color: inherit;
  }

  .app[data-screen="home"] #home-actions > :is(#appearance-picker, #ball-picker) :is(.appearance-picker-value, .ball-picker-value) {
    grid-area: 2 / 2;
    align-self: start;
    padding-top: 0;
    color: #314f5e;
    text-align: start;
  }

  .app[data-screen="home"] #home-actions:has(> .resume:not([hidden])) > :is(.start, .resume) {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 7px 12px;
    font-size: 16px;
  }

  .app[data-screen="home"] #home-actions:has(> .resume:not([hidden])) > .start {
    --button-ledge: #aa936c;
    color: #243743;
    background: linear-gradient(110deg, #e8d9b6, #fff0d2);
    border-color: #fff0d2;
  }

  .app[data-screen="home"] #home-actions:has(> .resume:not([hidden])) > :is(.start, .resume) > span {
    min-height: 0;
    padding: 0;
    border: 0;
    gap: 7px;
    font-size: 12px;
    line-height: 1;
  }

  .app[data-screen="home"] #home-actions:has(> .resume:not([hidden])) > .start > span > b {
    font-size: 16px;
    line-height: 1;
  }

  .app[data-screen="home"] #home-actions > :is(button, #appearance-picker, #ball-picker):is(:active, [data-down]):not(:disabled) {
    transform: translateY(2px);
    filter: brightness(.98);
    box-shadow: inset 0 1px #ffffff6b, 0 1px 0 var(--button-ledge);
  }

  .app[data-screen="home"] #home-actions > button:focus-visible {
    outline: 2px solid #fff5dc;
    outline-offset: 5px;
  }
}

@media (orientation: portrait) and (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .app[data-screen="home"] #home-actions > button { transition: none; }
}