@font-face {
  font-family: "Volley Title";
  src: url("./assets/fonts/VolleyTitle-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+53EC, U+4EE4, U+6392, U+7403, U+96C6;
}

#dialog[data-panel="settings"] .pause-tools [data-dialog="update"] { grid-column: 1 / -1; }

@media (orientation: portrait) and (max-width: 360px) and (max-height: 650px) {
  :root[data-presentation="broadcast"] .app[data-screen="play"]:not([data-replay]) .view::after {
    background-image:
      linear-gradient(
        to bottom,
        #071420e8,
        #071420dc calc(var(--safe-top) + 22px),
        #071420b3 calc(var(--safe-top) + 39px),
        #07142000 calc(var(--safe-top) + 54px)
      ),
      linear-gradient(0deg, #071d2bd9 0%, #102e3e64 10%, transparent 22%, transparent 87%, #081e2c42 100%);
  }
}

@media (orientation: portrait) {
  :where(:root[data-art="refresh"]) .home-art {
    background-position: center 60px;
    background-color: #071c2b;
  }

  :where(:root[data-art="refresh"]) .home::after {
    background: linear-gradient(180deg, #08171e6b, transparent 30%, transparent 62%, #0b1b22b8 82%, #0b1b22 100%);
  }

  :where(:root[data-art="refresh"]) .hero h1 {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas: "local local" "call volleyball";
    align-items: baseline;
    gap: 6px 5px;
    text-shadow: 0 2px 14px #07171de6;
  }

  :where(:root[data-art="refresh"]) :is(.title-call, .title-volleyball) {
    margin: 0;
    color: #b9e8dd;
    font: 700 clamp(15px, 4.4vw, 23px)/1.15 "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: .11em;
    white-space: nowrap;
  }

  :where(:root[data-art="refresh"]) .title-call { grid-area: call; }
  :where(:root[data-art="refresh"]) .title-volleyball { grid-area: volleyball; }

  :where(:root[data-art="refresh"]) .title-local {
    grid-area: local;
    margin: 0;
    color: #fff7e5;
    font: 900 clamp(33px, 10.5vw, 70px)/1.12 "Volley Title", system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
    letter-spacing: .055em;
    white-space: nowrap;
  }

  :where(:root[data-art="refresh"]) .title-rule {
    width: 58px;
    height: 3px;
    margin: 14px 0 0 2px;
    background: linear-gradient(90deg, #f1c365 39%, transparent 39% 46%, #75d7c7 46%);
  }

  :where(:root[data-art="refresh"]) .home-actions > button span {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    letter-spacing: .07em;
  }

  :where(:root[data-art="refresh"]) .home-actions > .secondary span { color: #b9e8dd; }

  :where(:root[data-art="refresh"]) #dialog {
    background: linear-gradient(150deg, #153139, var(--cov-panel) 42%);
    border-top-color: var(--cov-gold);
  }

  :where(:root[data-art="refresh"]) #dialog .dialog-head { border-bottom-color: #618385; }
  :where(:root[data-art="refresh"]) #dialog .dialog-head h2 { font-weight: 850; letter-spacing: .025em; }
  :where(:root[data-art="refresh"]) #dialog .practice-courses button { box-shadow: inset 2px 0 var(--cov-mint); }

  :where(:root[data-art="refresh"]) .app[data-screen="play"] .scoreboard {
    background: linear-gradient(90deg, #143339f5, #0b1b22f5 33% 67%, #38272bf5);
    box-shadow: 0 3px 10px #07151b73, inset 2px 0 var(--cov-mint), inset -2px 0 #ffae98;
  }

  :where(:root[data-art="refresh"]) .scoreboard .score-value {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-size: 22px;
  }

  :where(:root[data-art="refresh"]) .scoreboard .score-value > span {
    color: var(--cov-gold);
    opacity: 1;
  }

  :where(:root[data-art="refresh"]) .scoreboard > :is(.teal, .coral) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  :where(:root[data-art="refresh"]) .scoreboard > .teal { --team-mark: url("./assets/team-tide.svg"); }
  :where(:root[data-art="refresh"]) .scoreboard > .coral { --team-mark: url("./assets/team-sun.svg"); }

  :where(:root[data-art="refresh"]) .scoreboard > .teal::before,
  :where(:root[data-art="refresh"]) .scoreboard > .coral::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--team-mark) center / contain no-repeat;
    mask: var(--team-mark) center / contain no-repeat;
  }

  :where(:root[data-art="refresh"]) .control-hint {
    top: calc(var(--safe-top) + 90px);
    right: auto;
    bottom: auto;
    left: 50%;
    width: max-content;
    max-width: calc(100% - var(--safe-left) - var(--safe-right) - 32px);
    transform: translateX(-50%);
    color: var(--cov-paper);
    border-left-color: var(--cov-gold);
    text-wrap: balance;
  }

  :where(:root[data-art="refresh"]) .app[data-screen="play"][data-control-hint] #callout {
    top: calc(var(--safe-top) + 117px);
  }

  :where(:root[data-art="refresh"]) .point-score i { color: var(--cov-gold); }

  :where(:root[data-art="refresh"]) #joystick {
    border-color: #92c8c5;
    background: radial-gradient(circle, #1e4149ed 0%, #102831ec 65%, #091b24f2 100%);
    box-shadow: inset 0 0 0 3px #081a23a8, 0 3px 9px #07172094;
  }

  :where(:root[data-art="refresh"]) #joystick::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: inherit;
    background: repeating-conic-gradient(from -4deg, #9edbd5c4 0deg 8deg, transparent 8deg 90deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    pointer-events: none;
  }

  :where(:root[data-art="refresh"]) #stick {
    border-color: #b4e4db;
    background: radial-gradient(circle, #7bbab0 0 14%, #36646a 17% 64%, #21474e 68%);
    box-shadow: inset 0 0 0 2px #0a263187, 0 2px 6px #04131bd6;
  }

  :where(:root[data-art="refresh"]) #joystick[data-held] {
    border-color: #b0ebde;
    box-shadow: inset 0 0 0 3px #245a60, 0 3px 9px #07172094;
  }

  :where(:root[data-art="refresh"]) #joystick[data-held] #stick {
    background: radial-gradient(circle at 40% 34%, #b0eedb 0 12%, #54898b 16% 64%, #28535a 69%);
    box-shadow: inset 0 0 0 2px #0b3442a3, 0 3px 7px #04131bd6;
  }

  :where(:root[data-art="refresh"]) .circle-actions button:not(:disabled) {
    background-image: linear-gradient(155deg, #ffffff29, transparent 61%);
    box-shadow: inset 0 0 0 2px #08171d66, 0 2px 7px #05121795;
  }

  :where(:root[data-art="refresh"]) .circle-actions button[data-slot="primary"]:not(:disabled) {
    background-image: linear-gradient(155deg, #ffffff4d, transparent 64%);
  }

  :where(:root[data-art="refresh"]) .circle-actions button[data-standby]:disabled {
    color: #a9c2c4;
    opacity: 1;
    background: #10252cf5;
    border-color: #648d91;
    border-style: dashed;
  }

  :where(:root[data-art="refresh"]) .circle-actions button:is([data-down], :active):not(:disabled) {
    filter: none;
    background-image: linear-gradient(155deg, #0004, #0001);
    box-shadow: inset 0 0 0 3px var(--cov-action-rim), inset 0 3px 8px #08171d99;
  }

  :where(:root[data-art="refresh"]) #dialog:is([data-panel="settings"], [data-panel="pause"]) legend {
    color: var(--cov-mint);
    font-weight: 700;
  }

  :where(:root[data-art="refresh"]) #dialog :is(.volume-control, .setting-note) {
    color: #d2e3e0;
  }

  :where(:root[data-art="refresh"]) #dialog .volume-control output {
    color: var(--cov-gold);
  }

  :where(:root[data-art="refresh"]) #dialog .pause-tools button {
    border-color: #719391;
  }

  :where(:root[data-art="refresh"]) #dialog .pause-tools [data-dialog="sound"] {
    box-shadow: inset 2px 0 var(--cov-mint);
  }

  :where(:root[data-art="refresh"]) .point-card {
    --point-mark: url("./assets/team-tide.svg");
    background: linear-gradient(150deg, #15343e, #0a1c24 52%);
    box-shadow: 0 10px 30px #06161c80, inset 2px 0 var(--point-color);
  }

  :where(:root[data-art="refresh"]) #point-overlay[data-team="1"] .point-card {
    --point-mark: url("./assets/team-sun.svg");
    background: linear-gradient(150deg, #36292e, #0a1c24 52%);
  }

  :where(:root[data-art="refresh"]) .point-kicker { position: relative; }

  :where(:root[data-art="refresh"]) .point-kicker::after {
    content: "";
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: var(--point-mark) center / contain no-repeat;
    mask: var(--point-mark) center / contain no-repeat;
  }

  :where(:root[data-art="refresh"]) .point-score > span:first-child { color: var(--cov-mint); }
  :where(:root[data-art="refresh"]) .point-score > span:last-child { color: #ffae98; }
  :where(:root[data-art="refresh"]) #point-detail { color: #dce9e5; }
  :where(:root[data-art="refresh"]) .point-next { color: #bdd3d1; }

  :where(:root[data-art="refresh"]) #referee-inset {
    box-shadow: 0 5px 18px #03151d66, inset 0 0 0 1px #0b1b22;
  }

  :where(:root[data-art="refresh"]) #referee-label {
    color: var(--cov-paper);
    background: #0b1b22f5;
    box-shadow: inset 0 1px var(--cov-mint);
  }

  :where(:root[data-art="refresh"]) .replay-badge {
    color: var(--cov-gold);
    border-color: var(--cov-gold);
    box-shadow: inset 2px 0 var(--cov-gold), 0 3px 10px #07151b73;
  }

  :where(:root[data-art="refresh"]) #replay-skip {
    background: linear-gradient(150deg, #1b3e44, #142e35 65%);
    box-shadow: inset 2px 0 var(--cov-mint), 0 3px 10px #07151b73;
  }

  :where(:root[data-art="refresh"]) #replay-skip:active {
    background: var(--cov-mint);
  }
}

@container home-screen (orientation: portrait) and (max-height: 700px) {
  :where(:root[data-art="refresh"]) .home-art {
    background-image: url("./assets/cover-six-compact.png");
  }

  :where(:root[data-art="refresh"]) .title-rule { margin-top: 10px; }
}

@media (orientation: portrait) and (max-height: 700px) {
  :where(:root[data-art="refresh"]) .app[data-control-hint] #duty-label {
    top: calc(var(--safe-top) + 60px);
    left: calc(var(--safe-left) + 14px);
    max-width: calc(42% - var(--safe-left) - 20px);
    transform: none;
    white-space: normal;
    text-wrap: balance;
  }

  :where(:root[data-art="refresh"]) .app[data-control-hint] .control-hint {
    top: calc(var(--safe-top) + 60px);
    right: calc(var(--safe-right) + 14px);
    left: auto;
    max-width: calc(58% - var(--safe-right) - 14px);
    transform: none;
  }

  :where(:root[data-art="refresh"]) .app[data-screen="play"][data-control-hint] #callout {
    top: calc(var(--safe-top) + 102px);
  }
}

@media (orientation: portrait) and (max-width: 360px) {
  :where(:root[data-art="refresh"]) .app[data-screen="play"] .scoreboard[data-wide-score] {
    gap: 8px;
    padding-inline: 10px;
  }

  :where(:root[data-art="refresh"]) .scoreboard[data-wide-score] > .teal::before,
  :where(:root[data-art="refresh"]) .scoreboard[data-wide-score] > .coral::after {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 360px) and (max-height: 600px) {
  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] {
    scroll-padding-bottom: 60px;
  }

  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] fieldset { margin-block: 8px; }
  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] .audio-settings { gap: 4px; }
  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] .volume-control { gap: 1px; }
  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] .setting-note { margin-top: 4px; }

  :where(:root[data-art="refresh"]) #dialog[data-panel="settings"] .dialog-actions {
    position: sticky;
    z-index: 1;
    bottom: 5px;
    margin-top: 12px;
    background: var(--cov-panel);
    box-shadow: 0 0 0 5px var(--cov-panel);
  }
}

.practice-course-icon { display: none; }

@media (orientation: portrait) and (min-width: 320px) {
  :where(:root[data-art="refresh"]) #dialog .practice-courses [data-dialog^="drill-setup-"] {
    position: relative;
  }

  :where(:root[data-art="refresh"]) #dialog .practice-course-icon {
    display: block;
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    color: var(--cov-mint);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
}

@media (orientation: portrait) and (min-width: 320px) and (max-width: 360px) and (max-height: 650px) {
  :where(:root[data-art="refresh"]) #dialog .practice-course-icon {
    inset-inline-end: 8px;
    top: 12px;
    transform: none;
    width: 20px;
    height: 20px;
  }
}

.title-trails { display: none; }

@media (orientation: portrait) {
  .hero {
    --mark-size: clamp(33px, 10.5vw, 70px);
  }

  .hero h1 > span {
    width: max-content;
    transform: skewX(-9deg);
    transform-origin: left bottom;
  }

  .hero .title-local {
    color: #fff6e5;
    letter-spacing: .048em;
  }

  .hero :is(.title-call, .title-volleyball) {
    color: #91e4d6;
    letter-spacing: .115em;
  }

  .hero .title-rule {
    margin-top: 11px;
    background: linear-gradient(90deg, #ffc751 40%, transparent 40% 47%, #74dac7 47%);
  }

  .title-trails {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    z-index: -1;
  }

  .title-trails svg { position: absolute; overflow: visible; }

  .title-trail-gold {
    --gold-trail-size: calc(var(--mark-size) * 3.38);
    --gold-trail-room: max(0px, calc(100% + var(--hero-inset-right) - var(--home-tool-inset) - var(--home-tools-width) - 12px));
    --gold-trail-width: min(var(--gold-trail-size), var(--gold-trail-room));
    top: calc(var(--mark-size) * -.73);
    left: min(calc(var(--mark-size) * 2.62), calc(var(--gold-trail-room) - var(--gold-trail-width)));
    width: var(--gold-trail-width);
  }

  .title-trail-mint {
    top: calc(var(--mark-size) * 1.21);
    left: calc(var(--mark-size) * 3.02);
    width: calc(var(--mark-size) * 2.40);
  }
}

@container home-screen (orientation: portrait) and (max-height: 700px) {
  .hero .title-rule { margin-top: 8px; }
  .title-trail-gold { --gold-trail-size: calc(var(--mark-size) * 3.16); }
}