/* The online game's screens, in the look of the final reveal: the same type
   (system sans, tabular figures, bold figures, small uppercase labels), the
   same colours (ink on white, the team palette and badges), light by default.
   Green, amber and red are kept for status only: submitted or met, a warning,
   returned or not met. Phone first; tablet and laptop widen the column. */
:root { --bg:#ffffff; --ink:#14171c; --dim:#545c68; --track:#e4e2dc; --rule:#a9adb4; --soft:#f6f5f1;
  --line:#e4e2dc; --green:#1e7a34; --amber:#94600f; --red:#b3262c;
  --A:#0e7490; --B:#312e81; --C:#c026d3; --team:#14171c; --sym:#ffffff;
  --r:14px; --shadow:0 1px 2px rgba(20,23,28,0.06), 0 4px 14px rgba(20,23,28,0.05); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.45;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
main { max-width: 860px; margin: 0 auto; padding: 18px 16px 96px; }
h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.3px; margin: 8px 0 12px; }
h2 { font-size: 14px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px; margin: 28px 0 10px; }
h3 { font-size: 18px; font-weight: 700; margin: 16px 0 6px; }
a { color: var(--ink); text-underline-offset: 3px; }
.dim { color: var(--dim); } .small { font-size: 15px; }

/* buttons: ink for the one main action, quiet outlines for the rest */
button { font: inherit; font-size: 16px; font-weight: 600; padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; min-height: 46px; }
button:hover:not(:disabled) { border-color: var(--ink); }
button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button.link { border: none; background: none; color: var(--ink); padding: 4px 2px; min-height: 0; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
input[type=text] { font: inherit; font-size: 24px; font-weight: 700; padding: 12px 14px; border: 1px solid var(--rule);
  border-radius: 12px; width: 100%; text-transform: uppercase; letter-spacing: 1.5px; }
input[type=text]:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }

/* the top bar: the team, its badge, where the game is */
.bar { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--track); display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.bar .who { font-size: 21px; font-weight: 800; display: flex; align-items: center; flex: 1; min-width: 200px; letter-spacing: -0.2px; }
.chip { font-size: 14px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--soft);
  border: 1px solid var(--track); color: var(--ink); white-space: nowrap; }
/* a team's badge: a disc in its colour, its symbol inside */
.badge { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em;
  border-radius: 50%; margin-right: 0.4em; flex: none; }
.badge svg { width: 66%; height: 66%; fill: var(--sym); }

/* tabs: a quiet row, the open one underlined in ink */
.tabs { display: flex; gap: 2px; margin: 4px 0 6px; border-bottom: 1px solid var(--track); overflow-x: auto; }
.tabs button { min-height: 44px; padding: 8px 14px; border: none; border-radius: 0; background: none; color: var(--dim);
  font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }

/* boxes */
.box { border: 1px solid var(--track); border-radius: var(--r); padding: 14px 16px; margin: 12px 0; background: #fff; box-shadow: var(--shadow); }
.box.soft { background: var(--soft); box-shadow: none; }
.refused { border: 2px solid var(--red); background: #fdf3f3; box-shadow: none; }
.refused h3 { color: var(--red); margin-top: 0; }
.ok { border: 2px solid var(--green); background: #f2f8f3; box-shadow: none; }

/* the year as a sum, written downwards like the reveal's health */
.sum { padding: 6px 18px 14px; }
.sum div { padding: 7px 0; border-bottom: 1px solid var(--track); font-size: 16px; }
.sum div:last-child { border-bottom: none; }
.sum .tot { font-size: 20px; font-weight: 800; border-top: 3px solid var(--ink); border-bottom: none; margin-top: 2px; padding-top: 10px; }
.sum .dim.small { border-bottom: none; padding: 4px 0 0; font-size: 14px; }

/* an action: a row with its yield as a figure; chosen ones in the team's colour */
.act { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--track);
  border-radius: var(--r); margin: 8px 0; cursor: pointer; background: #fff; transition: border-color 0.12s; }
.act:hover { border-color: var(--rule); }
.act.on { border: 2px solid var(--team); padding: 12px 13px; background: #fff; box-shadow: var(--shadow); }
.act .n { flex: 1; font-weight: 600; line-height: 1.3; }
.act .y { font-weight: 800; font-size: 19px; white-space: nowrap; }
.act .w { font-size: 14px; font-weight: 400; color: var(--dim); margin-top: 2px; }
.tick { width: 26px; height: 26px; border: 2px solid var(--rule); border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
.act.on .tick { background: var(--team); border-color: var(--team); }

/* a panel: a sheet over the page */
.overlay { position: fixed; inset: 0; background: rgba(20, 23, 28, 0.5); z-index: 20; display: flex;
  align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.sheet { background: #fff; border-radius: 18px; max-width: 720px; width: 100%; padding: 20px 22px 24px;
  box-shadow: 0 10px 40px rgba(20,23,28,0.25); }
.sheet .top { display: flex; align-items: flex-start; gap: 12px; }
.sheet .top h2 { flex: 1; margin: 2px 0 10px; font-size: 22px; color: var(--ink); text-transform: none; letter-spacing: -0.2px; line-height: 1.25; }
.sheet h3 { font-size: 14px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1.1px; margin: 18px 0 6px; }
.sheet ul { padding-left: 20px; margin: 6px 0; } .sheet li { margin: 5px 0; }
.sheet li b { font-size: 19px; }
.map svg { width: 100%; height: auto; display: block; border-radius: 12px; }
table { border-collapse: collapse; } td, th { border-bottom: 1px solid var(--track); padding: 6px 8px; text-align: left; vertical-align: top; }
th { font-size: 14px; color: var(--dim); }
.report table, .slip table { width: 100%; font-size: 15px; }
.report img, .slip img { max-width: 100%; }
.pl td { text-align: center; } .pl td:first-child { text-align: left; }
.pl button { min-height: 38px; padding: 4px 10px; font-size: 14px; min-width: 76px; }

/* the walkthrough on a team's screen */
.walk { border: 1px solid var(--track); border-radius: 18px; padding: 20px 20px; background: #fff; box-shadow: var(--shadow); }
.walk .step { font-size: 14px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 1.2px; }
.walk h1 { font-size: 30px; }
.walk ol li { margin: 8px 0; }

.status { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.status .box { margin: 0; }
.grow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.msg { padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-weight: 600; }
.msg.bad { background: #fdf3f3; border: 2px solid var(--red); } .msg.good { background: #f2f8f3; border: 2px solid var(--green); }
.guidebody h1 { font-size: 24px; } .guidebody h2 { font-size: 15px; }
.hl { box-shadow: inset 0 -3px 0 var(--ink); }
@media (min-width: 700px) { main { padding: 24px 24px 96px; } h1 { font-size: 32px; } }
@media (max-width: 560px) {
  html, body { font-size: 16px; } main { padding: 12px 14px 90px; }
  .bar .who { font-size: 19px; } button { padding: 10px 14px; }
  .sheet { padding: 16px 16px 20px; border-radius: 16px; }
}

/* the facilitator's preview: a banner on every page, the world first and large */
.pv { position: sticky; top: 0; z-index: 30; background: var(--ink); color: #fff; padding: 12px 16px;
      font-size: 18px; font-weight: 700; }
.pv .pvworld { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
body.preview .bar { position: static; }
.pv .pvsw { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-weight: 400; }
.pv .pvsw button { padding: 5px 12px; font-size: 14px; min-height: 36px; border-color: rgba(255,255,255,0.35); }
.pv .pvsw button.on { outline: 3px solid #fff; outline-offset: 1px; }
.pv .pvsw select { font-size: 14px; }
a.btn { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border: 1px solid var(--rule);
        border-radius: 12px; text-decoration: none; color: inherit; background: var(--bg); font-weight: 600; }
a.btn:hover { border-color: var(--ink); }
body.preview .overlay { top: var(--pvh, 0px); }
@media (max-width: 600px) { .pv .pvsw .nm { display: none; } .pv { font-size: 16px; } }
/* assist: a clearly different banner, in the colour of the team acted for */
.pv.as { background: var(--team); }
/* a practice game, labelled on every screen (a label, not a status colour) */
.msg.practice { background: #fff; border: 2px dashed var(--ink); color: var(--ink); }
.chip.pr { background: #fff; color: var(--ink); border: 1.5px dashed var(--ink); font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; }
/* the control screen: on-page confirmation, the live game, this session's games */
.box.ask { border: 2px solid var(--ink); background: #fff; }
.live { border-left: 6px solid var(--ink); padding: 4px 14px; margin: 10px 0 18px; }
.live h1 { margin: 2px 0; }
.gamerow { justify-content: space-between; border: 1px solid var(--track); border-radius: 12px; padding: 8px 12px; margin: 6px 0; }
.gamerow.on { border: 2px solid var(--ink); }
.pv .pvask { margin-top: 10px; padding: 10px 12px; background: #fff; color: var(--ink); border-radius: 12px; font-size: 16px; }
.pv a.pvback { color: #fff; font-weight: 700; margin-left: auto; }
.sum .srow { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.sum .srow b { font-size: 19px; font-weight: 800; white-space: nowrap; }
@media (max-width: 560px) {
  .bar { padding: 10px 14px; gap: 8px; } .bar .who { min-width: 0; font-size: 18px; }
  .bar .chip { font-size: 14px; padding: 4px 10px; } .bar button { min-height: 38px; padding: 6px 12px; font-size: 15px; }
}
@media (max-width: 560px) {
  .bar .who { flex: 1 1 100%; } .bar .chip { margin-right: auto; }
}
/* on a phone every tab shows: a grid of two columns, the open one filled */
@media (max-width: 560px) {
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: none; overflow: visible; margin: 6px 0 10px; }
  .tabs button { border: 1px solid var(--track); border-radius: 10px; margin: 0; min-height: 42px; padding: 6px 8px;
    color: var(--ink); font-size: 15px; white-space: normal; line-height: 1.2; }
  .tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
}
/* the circle chooses; Details opens the panel */
button.tick { padding: 0; min-height: 0; width: 30px; height: 30px; border: 2px solid var(--rule); border-radius: 50%;
  background: #fff; color: #fff; font-size: 14px; font-weight: 800; }
button.tick:hover:not(:disabled) { border-color: var(--team); }
.act.on button.tick { background: var(--team); border-color: var(--team); }
.act { cursor: default; }
button.details { border: none; background: none; min-height: 0; padding: 6px 4px 6px 8px; font-size: 15px; font-weight: 700;
  color: var(--ink); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.sum .srow.empty b { font-weight: 400; color: var(--dim); font-size: 16px; }
.sum .tot .short { color: var(--red); }
.act .side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.act .side button.details { padding: 2px 0 2px 8px; }
/* Submit: the one solid button in the team's colour */
button.primary.submit { background: var(--team); border-color: var(--team); color: #fff; }
button.primary.submit:disabled { background: #9aa0a8; border-color: #9aa0a8; opacity: 1; }
/* a chosen action: its circle and outline in the team's colour, not solid */
.act.on button.tick { background: #fff; border-color: var(--team); color: var(--team); }
/* the minimum, checked live */
.sum .mincheck { border-bottom: none; padding: 2px 0 0; font-weight: 700; font-size: 16px; }
.sum .mincheck.bad { color: var(--red); }
.sum .mincheck.good { color: var(--ink); }
.sum .mincheck .ok { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; margin-right: 6px; vertical-align: -3px; }
.box.nopair { font-weight: 600; }
/* tabs: the open one white, outlined and written in the team's colour */
.tabs { gap: 6px; border-bottom: none; }
.tabs button { border: 1px solid var(--track); border-radius: 10px; margin: 0; color: var(--dim); background: #fff; }
.tabs button.on { background: #fff; color: var(--team); border: 2px solid var(--team); }
@media (max-width: 560px) { .tabs button.on { background: #fff; color: var(--team); border: 2px solid var(--team); } }
/* the session overview: one row per world */
body.control main { max-width: 1180px; }
table.ov { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 6px; border: 1px solid var(--track);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
table.ov th { background: var(--soft); font-size: 14px; font-weight: 700; color: var(--dim); text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--track); white-space: nowrap; }
table.ov td { padding: 12px; border-bottom: 1px solid var(--track); vertical-align: middle; }
table.ov tr:last-child td { border-bottom: none; }
table.ov td.wn { font-weight: 800; font-size: 18px; }
table.ov td.acts { white-space: nowrap; text-align: right; }
table.ov td.acts button { margin-left: 6px; }
table.ov .tn { display: none; }
.st { white-space: nowrap; font-weight: 600; }
.st .badge { display: none; }
.st.done { color: var(--green); }
.st.again, .againtxt { color: var(--red); }
.st.auto { color: var(--dim); }
a.backlink { font-weight: 700; }
button.quiet { font-size: 15px; font-weight: 600; padding: 8px 14px; min-height: 40px; color: var(--dim); border-color: var(--track); }
section.newgames { margin-top: 30px; padding-top: 4px; border-top: 1px solid var(--track); }
.box.team .tname { font-weight: 800; font-size: 18px; display: flex; align-items: center; }
/* on a phone the table becomes one card per world */
@media (max-width: 760px) {
  table.ov, table.ov tbody, table.ov tr, table.ov td { display: block; width: 100%; }
  table.ov thead { display: none; }
  table.ov tr { border-bottom: 1px solid var(--track); padding: 6px 0; }
  table.ov td { border-bottom: none; padding: 6px 14px; }
  table.ov .tn { display: inline; } .st .badge { display: inline-flex; }
  table.ov td.acts { text-align: left; } table.ov td.acts button { margin: 4px 6px 4px 0; }
}
@media (min-width: 761px) { table.ov td.wn, table.ov td:nth-child(2), table.ov td:nth-child(3) { white-space: nowrap; } }
table.ov th { white-space: normal; }
@media (min-width: 761px) {
  .st { white-space: nowrap; }
  table.ov td.acts { white-space: normal; width: 1%; } table.ov td.acts button { display: block; width: 100%; margin: 4px 0; white-space: nowrap; }
}
@media (max-width: 760px) { .st { white-space: normal; } table.ov td.acts { width: auto; } }
.donetxt { color: var(--green); }
/* the join page: one card, the three badges above the name */
body.join main { max-width: 480px; padding-top: 10vh; }
.joincard { border: 1px solid var(--track); border-radius: 20px; padding: 26px 24px 18px; box-shadow: var(--shadow); background: #fff; }
.joincard h1 { font-size: 34px; margin: 6px 0 6px; }
.joincard .badges { font-size: 30px; display: flex; gap: 2px; }
.joincard button.primary { width: 100%; }
body.join .small.dim { text-align: center; margin-top: 16px; }
/* one team's code, full screen, to read or scan across a table */
.codeview { position: fixed; inset: 0; z-index: 50; background: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2.2vh; padding: 56px 16px 24px; text-align: center; }
.codeview .back { position: absolute; left: 16px; top: 14px; font-weight: 800; font-size: 20px; }
.codeview .cvname { font-size: clamp(24px, 4.5vh, 44px); font-weight: 800; display: flex; align-items: center; }
.codeview .cvcode { font-size: clamp(36px, min(11vw, 13vh), 160px); font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; line-height: 1; }
.codeview .cvqr svg { width: min(78vw, 46vh); height: min(78vw, 46vh); display: block; }
.codeview .cvurl { font-size: clamp(16px, 2.4vh, 22px); color: var(--dim); }
body.showingcode { overflow: hidden; }
button.showcode { margin-top: 8px; width: 100%; }
/* the control screen: panels, the stage line, spacing between rows of buttons */
section.panel { border: 1px solid var(--track); border-radius: var(--r); padding: 6px 16px 10px; margin: 12px 0; background: #fff; }
section.panel h2 { margin-top: 12px; }
section.panel .grow { margin: 10px 0; row-gap: 10px; }
.grow { row-gap: 10px; }
.stline { font-size: 18px; margin: 10px 0 4px; }