/* The room page: the reader before a game starts (read.html). Loaded after
   td.css and uses its variables.
   Nothing here reaches MODAQ: once a game starts, body.reading hides all of
   this but the top bar, and MODAQ renders as it always has. */

/* ---------- reader: top bar ---------- */
.rbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 24px; min-height: 52px; border-bottom: 1px solid var(--line);
}
.rbar h1 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.rbar .sub { color: var(--muted); }
.rbar .spacer { flex: 1; }
.rbar a { font-size: 14px; }
body:not(.reading) #game, body:not(.reading) #newgame { display: none; }
.rmsg { padding: 0 24px; }
.rmsg #msg:empty { display: none; }
.rmsg #notfound { padding: 12px 0; }
/* the TD's Test link (read_main.js testKey) */
.rbar .testtag { color: var(--warn); }
/* a bar across the top of the room and of the game, so the link is never mistaken for a room's */
.teststrip { background: var(--warn); color: var(--bg); padding: 10px 24px; font-size: 15px; text-align: center; }
.testtag[hidden], .teststrip[hidden] { display: none; }
/* over the reader while a game uploads (read_main uploadingNote) */
.uploading {
  position: fixed; inset: 0; z-index: 2000000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .25); cursor: progress;
}
.uploadingcard {
  display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-radius: 12px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); font-size: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}

/* ---------- reader: before the game ---------- */
.rstart {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px;
  max-width: 1152px; padding: 28px 64px 48px; align-items: start;
}
body.reading .rstart, body.reading #picker, body.reading #schedpanel, body.reading #tbpanel { display: none; }
#picker[hidden], #schedpanel[hidden], #tbpanel[hidden] { display: none; }
#picker { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.rlabel { font-size: 13px; color: var(--muted); margin-bottom: 10px; }

/* rounds: one small button each; the live round carries a dot */
.rounds { display: flex; flex-wrap: wrap; gap: 6px; }
.rnd {
  position: relative; min-width: 40px; height: 36px; padding: 0 10px;
  display: inline-grid; place-items: center; border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--fg);
  font-size: 14px; font-variant-numeric: tabular-nums;
}
a.rnd:hover { text-decoration: none; background: var(--hover-bg); }
.rnd.sel { background: var(--sel); box-shadow: inset 0 0 0 1.5px var(--link); font-weight: 600; }
.rnd.live::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 5px; height: 5px; border-radius: 99px; background: var(--ok);
}
.rnd.off { color: var(--muted); box-shadow: none; }
.devgames { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; }
.devgames .muted { margin-right: 6px; }
#packetname { display: block; font-size: 13px; margin-top: 10px; }

/* the matchup, and the links that unlock or restore it */
#teamrow { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 22px; }
#teamrow[hidden] { display: none; }
.matchrow { display: flex; gap: 16px; align-items: flex-start; }
.matchrow .grow { flex: 1; min-width: 0; }
.matchlinks { display: flex; gap: 14px; }
#schedfrom { font-size: 13px; color: var(--muted); }
#byelist { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.matchup { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; line-height: 1.2; }
.matchup .vs { font-size: 18px; font-weight: 400; color: var(--muted); }
.linkbtn { font: inherit; font-size: 13px; color: var(--link); background: none; border: none; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; border: none; }
#teampickers[hidden] { display: none; }

/* starters: a checklist per team, no boxes */
.lineups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.lineup h4 {
  font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.lineup h4 .count { font-weight: 400; font-size: 13px; color: var(--muted); }
/* a team's column drags onto the other to swap sides */
.lineup[draggable="true"] h4 { cursor: grab; }
.lineup.lift { opacity: 0.4; }
.lineup.target h4 { border-bottom-color: var(--link); }
.lineup h4 .lname { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.lineup h4 .tgrip {
  width: 18px; margin-left: -4px; padding: 0; border: none; background: none;
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: -2px; color: var(--muted); cursor: grab; user-select: none;
}
.lineup h4 .tgrip:hover { color: var(--fg); border: none; }
.lineup h4 .count.none { color: var(--bad); }
.plist { display: grid; }
/* a row: the drag grip, then the starter toggle */
.plist .prow { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.plist .prow.dragging { opacity: 0.4; }
.plist .grip {
  flex: none; width: 22px; margin-left: -4px; color: var(--muted); cursor: grab;
  user-select: none; font-size: 14px; letter-spacing: -2px; text-align: center;
}
.plist .prow:hover .grip { color: var(--fg); }
.plist .p {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left;
  font: inherit; color: var(--muted); background: none; border: none;
  border-radius: 0; padding: 9px 0; cursor: pointer;
}
.plist .p:hover { border: none; color: var(--fg); }
.plist .p .box {
  width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--muted); flex: none;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
}
.plist .p.on { color: var(--fg); }
.plist .p.on .box { background: var(--link); border-color: var(--link); color: var(--bg); }
.plist .p .bench { margin-left: auto; font-size: 12px; color: var(--muted); }

.startrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#start { font-size: 16px; padding: 12px 36px; }

/* right column: this room's schedule and the tiebreaker pool */
.rside { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rside h2 {
  font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fg);
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--fg);
}
.rside table { font-size: 14px; }
.rside td { border-bottom: none; padding: 6px 8px 6px 0; }
#schedrows tr.now td { background: var(--sel); font-weight: 600; color: var(--fg); }
#schedrows tr.now td:first-child { border-radius: 8px 0 0 8px; padding-left: 8px; }
#schedrows tr.now td:last-child { border-radius: 0 8px 8px 0; }
#schedrows tr td:first-child { padding-left: 8px; width: 34px; }
/* brackets that keep their own rounds: a heading per phase and bracket */
#schedrows tr.bhrow td { padding: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--fg); border-bottom: none; }
#schedrows tr.bhrow i, #schedfrom i, .bname i { margin-right: 6px; vertical-align: 1px; }
.bname { white-space: nowrap; }
#tbrows td { border-bottom: 1px solid var(--line); padding: 8px 8px 8px 0; vertical-align: top; }
#tbbase { font-size: 12px; margin-top: 8px; }

#modaq { min-height: 70vh; }

@media (max-width: 860px) {
  .rstart { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 20px 16px 40px; }
  .rbar { padding: 8px 16px; }
  .rmsg { padding: 0 16px; }
}

body.reading .rmsg #msg { display: none; }