.player-page { background: var(--canvas); }
#player-app { max-width: 74rem; margin-inline: auto; gap: 1rem; }
#player-app > section { min-width: 0; }
#player-app .topbar { margin-bottom: 0; border-radius: 18px; }
#player-app .live-heading { display: flex; align-items: center; gap: .9rem; min-width: 0; }
#player-app .live-heading img { flex: 0 0 auto; width: 3rem; height: 3.75rem; padding: .3rem; border-radius: 8px; background: white; object-fit: contain; }
#player-app .live-heading h1 { margin-top: .3rem; overflow-wrap: anywhere; font-size: clamp(1.65rem, 4vw, 2.3rem); }
#player-app .live-connection { background: #ffffff14; border: 1px solid #ffffff30; color: #e8f5fc; font-size: .75rem; }
#player-app .live-connection::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: #c3d6e2; }
#player-app .live-connection[data-state="online"]::before { background: #95e0b5; }
#player-app .live-connection[data-state="offline"] { background: var(--warning-soft); color: var(--warning); border-color: #e7bc7e; }
#player-app .live-connection[data-state="offline"]::before { background: var(--warning); }
#player-app .live-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 0; overflow: hidden; }
#player-app .live-status { padding: 1.25rem 1.25rem 0; }
#player-app .live-status .eyebrow { margin-bottom: .6rem; color: var(--muted); }
#player-app .live-status > strong { font-size: 1.15rem; }
#player-app .live-overview p:not(.eyebrow) { margin-top: .5rem; }
#player-app #live-hint { margin-top: .9rem; font-size: .9rem; }
#player-app .live-choice { display: grid; gap: .6rem; align-content: start; padding: 1.25rem; border-top: 1px solid var(--line); background: #f0f7fb; }
#player-app .live-choice select { width: 100%; min-height: 48px; background: white; font-size: 1rem; }
#player-app .live-choice .button { min-height: 44px; width: 100%; }
#player-app .live-choice small { line-height: 1.55; }
#player-app .live-choice small:empty { display: none; }
#player-app #test-alerts { justify-self: start; width: auto; min-height: 40px; }
#player-app #device-alerts { font-size: .82rem; }
#player-app .live-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; padding: .35rem; background: #e7eff5; border: 1px solid var(--line); border-radius: 12px; }
#player-app .live-nav .button { min-width: 0; min-height: 46px; padding: .5rem .25rem; white-space: normal; background: transparent; border-color: transparent; font-size: .9rem; }
#player-app .live-nav .button:hover { background: #ffffff80; }
#player-app .live-nav [aria-pressed="true"] { background: var(--accent-dark); color: white; box-shadow: 0 2px 5px #17384f18; }
#player-app .live-nav [aria-pressed="true"]:hover { background: var(--accent-dark); }
#player-app #live-call { position: sticky; top: .5rem; z-index: 2; display: grid; gap: .6rem; }
#player-app #live-call:empty { display: none; }
#player-app .live-banner { background: var(--warning-soft); border: 1px solid #d9a161; border-left: 5px solid var(--warning); padding: 1rem 1.15rem; border-radius: 12px; box-shadow: 0 5px 20px #17384f12; }
#player-app .live-banner h2 { color: var(--warning); font-size: 1.3rem; }
#player-app .live-banner p { margin-top: .35rem; }
#player-app .live-banner[data-kind="cancelled"] { background: #e9f2fa; border-color: #9bbcd4; border-left-color: var(--accent); }
#player-app .live-banner[data-kind="cancelled"] h2 { color: var(--accent-dark); }
#player-app > section.stack > .panel > h2 { margin-bottom: .75rem; font-size: 1.12rem; }
#player-app > section.stack > .panel > .badge { margin-bottom: .75rem; }
#player-app > section.stack > .panel > p + p { margin-top: .3rem; }
#player-app .live-match { border-top: 1px solid var(--line); padding-block: .85rem; overflow-wrap: anywhere; }
#player-app .live-match:first-child { border-top: 0; }
#player-app .live-match p { margin: 0; }
#player-app .live-match p + p { margin-top: .4rem; font-size: .9rem; }
#player-app .live-match .badge { margin-top: .5rem; }
#player-app .live-match[data-status="playing"] > .badge { background: #e4f3e9; color: #21633b; }
#player-app .live-match[data-status="called"] > .badge { background: var(--warning-soft); color: var(--warning); }
#player-app .live-match[data-status="done"] > .badge, #player-app .live-match[data-status="bye"] > .badge { background: #edf1f4; color: var(--muted); }
#player-app .live-score { font-variant-numeric: tabular-nums; font-weight: 600; }
#player-app .live-table-wrap, #player-app .live-bracket { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #9ab7c9 transparent; }
#player-app .live-table-wrap { border: 1px solid var(--line); border-radius: 9px; }
#player-app .live-table-wrap table { width: 100%; font-size: .88rem; }
#player-app .live-table-wrap th, #player-app .live-table-wrap td { padding: .65rem .7rem; }
#player-app .live-table-wrap th:not(:nth-child(2)), #player-app .live-table-wrap td:not(:nth-child(2)) { white-space: nowrap; text-align: center; }
#player-app .live-table-wrap td:nth-child(2) { min-width: 9.5rem; }
#player-app .live-table-wrap tr[aria-current="true"] { background: var(--accent-soft); font-weight: 650; }
#player-app .live-table-wrap tr[aria-current="true"] td:first-child { box-shadow: inset 3px 0 var(--accent); }
#player-app .live-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: .85rem; padding-bottom: .7rem; scroll-snap-type: x proximity; }
#player-app .live-bracket .panel { display: grid; grid-template-rows: auto 1fr; gap: .8rem; scroll-snap-align: start; }
#player-app .live-bracket .panel > h3 { padding-bottom: .65rem; border-bottom: 2px solid var(--accent-soft); }
#player-app .live-bracket-matches { display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; }
#player-app .live-bracket-matches .live-match { border: 1px solid var(--line); border-radius: 9px; padding: .8rem; }
#player-app .live-slot { display: block; margin-bottom: .35rem; font-size: .75rem; }
#player-app .live-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .85rem; }
#player-app .live-tables > .panel { border-top: 3px solid var(--line); }
#player-app .live-tables > [data-status="playing"] { border-top-color: #3d8b5a; }
#player-app .live-tables > [data-status="called"] { border-top-color: #c58b44; }
#player-app .live-tables > [data-status="held"], #player-app .live-tables > [data-status="disabled"] { background: #f1f5f8; }
#player-app .live-tables > .panel > h3 { margin-bottom: .65rem; font-size: 1rem; }
#player-app .live-tables .live-match { border: 0; padding: 0; }
#player-app details > summary { cursor: pointer; padding-block: .75rem; font-size: .9rem; font-weight: 650; }
#player-app .live-match details { margin-top: .45rem; }
#player-app .live-footer { display: grid; gap: .9rem; font-size: .8rem; }
#player-app .live-install-help { border-bottom: 1px solid var(--line); }
#player-app .live-install-help > summary { font-size: .82rem; }
#player-app .live-install-copy { display: grid; gap: .65rem; padding-bottom: 1rem; max-width: 48rem; }
#player-app .live-footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem 1rem; }
@media (min-width: 42rem) {
  #player-app .live-overview { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; }
  #player-app .live-status { padding: 1.5rem; }
  #player-app .live-choice { border-top: 0; border-left: 1px solid var(--line); padding: 1.5rem; }
}
@media (max-width: 540px) {
  #player-app .live-topbar { padding: 1rem; }
  #player-app .live-connection { margin-left: 3.9rem; }
  #player-app .live-nav .button { font-size: .8rem; }
  #player-app .live-heading .eyebrow { font-size: .65rem; }
}
@media (max-width: 22rem) {
  #player-app .live-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #player-app .live-heading { gap: .65rem; }
  #player-app .live-connection { margin-left: 0; }
}