:root{color-scheme:dark;--ink:#f4f6ec;--dim:#afbba7;--lime:#dbf35c;--bg:#131b15;--panel:#1d2a20;--edge:#354638;font-family:system-ui,sans-serif;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
a{color:inherit}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px max(5vw,20px);border-bottom:1px solid var(--edge)}
.brand{display:flex;align-items:center;gap:11px;color:var(--lime);font-weight:800;text-decoration:none}
.brand-logo{flex:none;object-fit:contain}
.site-account{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 14px;font-size:.9rem}
.site-account a{color:var(--lime)}
.site-account span{color:var(--dim);overflow-wrap:anywhere}
.twitch-account{display:inline-flex;align-items:center;gap:7px}
.twitch-account img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.back-link{color:var(--lime)}
.match-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px}
.manual-grid{margin-bottom:12px}
.manual-grid input{min-width:6ch}
.manual-grid input[type=radio],.manual-grid input[type=checkbox]{width:auto;min-width:0}
.manual-grid td,.manual-grid th{padding:7px;text-align:left}
.manual-grid td:first-child input{min-width:13ch}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.staff-stream{margin:14px 0 24px}
.staff-watch-grid .watch-jackbox{min-height:300px}
.staff-watch-grid .watch-chat,.staff-watch-grid .moderator-frame{flex:1 0 auto;height:clamp(330px,40svh,520px)}
@media(min-width:880px){
  .staff-watch-grid [aria-labelledby="chat-heading"]{grid-column:1;grid-row:2 / span 2}
  .staff-watch-grid [aria-labelledby="moderator-frame-heading"]{grid-column:2;grid-row:2}
  .staff-watch-grid .moderator-notes{grid-column:2;grid-row:3}
}
.staff-watch-grid .moderator-notes{margin:0}
.moderator-notes pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.score-entry{border-top:1px solid var(--edge);padding:12px 0}
.score-entry p{margin:6px 0}
.score-entry button{margin-top:6px}
.site-account button{padding:5px 9px}
.account-notice{color:var(--lime)}
.mod-list{list-style:none;padding:0;margin:18px 0 0}
.mod-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--edge)}
main{width:min(1100px,calc(100% - 36px));margin:0 auto 50px}
main.play-view,main.staff-view{width:calc(100% - 36px)}
.play-view .intro{padding-block:12px 14px}
.play-view .intro h1{font-size:clamp(1.7rem,4vw,2.5rem)}
.intro{padding:38px 0 22px}
.eyebrow{font-size:.76rem;color:var(--lime);font-weight:750;letter-spacing:.13em}
h1{font-size:clamp(2rem,7vw,4rem);line-height:1;letter-spacing:-.055em;margin:12px 0}
h2,h3,h4{margin:0 0 14px}
p{color:var(--dim);line-height:1.5}
.summary{margin-bottom:0}
nav,.actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
button{background:var(--bg);color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:9px 14px;font:inherit;font-weight:650;cursor:pointer}
button[aria-pressed=true],button.primary{background:var(--lime);border-color:var(--lime);color:#16200d}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.panel{padding:clamp(16px,3vw,26px);border-radius:14px;border:1px solid var(--edge);background:var(--panel);margin-bottom:15px}
.panel h3{margin-top:20px}
.table-wrap{overflow:auto}
.scoring-chart :is(th,td):nth-child(n+3){text-align:left}
.scoring-chart strong{color:var(--lime)}
table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:right}
th,td{padding:11px 9px;border-bottom:1px solid var(--edge)}
th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}
th{font-size:.82rem;color:var(--dim)}
td{font-weight:550}
td:nth-child(2){color:var(--lime)}
.watch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px}
.watch-panel{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.watch-panel header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:12px 16px}
.watch-panel h2{margin:0;font-size:1.1rem}
.watch-panel a{color:var(--lime);font-size:.88rem}
.watch-frame{display:block;width:100%;border:0;background:#0e100e}
.watch-stream{height:auto;aspect-ratio:16/9;min-height:300px;max-height:56svh}
.watch-chat{height:clamp(270px,28svh,520px)}
.watch-jackbox{flex:1 0 auto;min-height:520px}
.hype-train-slot{height:0;overflow:hidden}
.hype-train-slot.active{height:168px;margin:12px auto 0}
.hype-train-slot iframe{display:block;width:min(100%,800px);height:168px;margin:auto;border:0}
@media(min-width:880px){
  body:has(main.play-view){display:flex;flex-direction:column;height:100dvh}
  body:has(main.play-view) .masthead{flex:none;padding-block:8px}
  main.play-view{display:flex;flex-direction:column;flex:1 0 auto;margin-bottom:0;padding-bottom:12px}
  .play-view .intro{padding-block:5px 8px}
  .play-view .intro h1{margin:0;font-size:1.7rem}
  .play-view .intro :is(.eyebrow,.summary){display:none}
  .play-view .view-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
  .play-view nav{margin-bottom:0}
  #play-layout{position:relative;margin-inline-start:auto}
  #play-layout summary{cursor:pointer;color:var(--lime);padding:6px}
  .play-layout-settings{position:absolute;z-index:2;inset-inline-end:0;top:100%;width:280px;padding:14px}
  .play-layout-settings label{margin:0;font-size:.9rem}
  .play-layout-settings output{float:inline-end;color:var(--lime)}
  .play-layout-settings input{margin:4px 0 10px;padding:0;accent-color:var(--lime)}
  .play-view .hype-train-slot{flex:none}
  .play-view .watch-grid{
    flex:1 0 auto;gap:12px;margin-bottom:0;
    grid-template-columns:minmax(0,var(--play-width-primary,3fr)) minmax(0,var(--play-width-secondary,2fr));
    grid-template-rows:minmax(340px,var(--play-height-primary,3fr)) minmax(190px,var(--play-height-secondary,2fr))
  }
  .play-view [aria-labelledby="jackbox-heading"]{grid-column:1;grid-row:2}
  .play-view [aria-labelledby="chat-heading"]{grid-column:2;grid-row:1 / span 2}
  .play-view .watch-panel header{flex:none;padding-block:8px}
  .play-view #twitch-player{display:flex;flex-direction:column;flex:1;min-height:0}
  .play-view .watch-frame{flex:1;height:0;min-height:0;max-height:none;aspect-ratio:auto}
}
@media(max-width:879px){
  #play-layout{display:none}
  .watch-grid{grid-template-columns:1fr}
  .watch-jackbox{height:clamp(440px,74svh,720px);min-height:0}
}
.match{border-top:1px solid var(--edge);padding:13px 0}
.match h4,.match p{margin:0}
.game-awards{margin:6px 0;padding-inline-start:20px;color:var(--lime)}
.match summary{cursor:pointer}
.match summary+p{margin:10px 0}
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}
label{display:grid;gap:6px;margin:0 0 13px;color:var(--dim)}
input,textarea,select{min-width:0;width:100%;background:var(--bg);border:1px solid var(--edge);border-radius:7px;color:var(--ink);padding:9px;font:inherit}
textarea{resize:vertical}
#payload{font-family:monospace}
.checkbox{display:flex;align-items:center}
.checkbox input{width:auto}
.game-summary{color:var(--dim);font-size:.87rem;margin-bottom:14px;overflow-wrap:anywhere}
#notice{color:var(--lime)}
.overlay{background:transparent}
.overlay .masthead,.overlay .intro,.overlay nav{display:none}
.overlay main{width:100%;margin:0}
.overlay .panel{margin:0;font-size:1.15rem}
@media(max-width:700px){.admin-grid{grid-template-columns:1fr}}

.season-picker{max-width:340px}
.calendar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px;margin-bottom:20px}
.calendar-stream,.calendar-editor{padding:14px;border:1px solid var(--edge);border-radius:10px;background:var(--bg)}
.public-calendar .calendar-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-auto-rows:1fr}
.public-calendar .calendar-stream{min-block-size:16rem}
.calendar-heading{margin:0;font-size:1rem}
.calendar-date{color:var(--lime)}
.calendar-stream ol,.calendar-editor ol{padding-inline-start:22px}
.calendar-notes{white-space:pre-wrap}
.calendar-editor{margin-bottom:14px}
.calendar-editor form,.calendar-reorder{margin-top:12px}
.calendar-editor li,.calendar-reorder li{margin-block:5px}
.calendar-editor li select{width:min(70%,320px);margin-inline-end:6px}
.calendar-reorder button{margin-inline-start:5px;padding:5px 8px}
#final-standings-preview:not(:empty){margin:16px 0}