:root{
      --navy:#061b34;
      --navy2:#0b2d55;
      --orange:#ff7a00;
      --blue:#123d73;
      --light:#f6f8fb;
      --border:#d7dee8;
      --text:#0d1b2a;
      --muted:#68778a;
      --green:#22a447;
      --yellow:#fff200;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      background:var(--light);
      color:var(--text);
    }
    .app{display:flex;min-height:100vh}
    .sidebar{
      width:260px;
      background:linear-gradient(180deg,#061b34,#04101f);
      color:#fff;
      padding:20px 14px;
      position:fixed;
      left:0;
      top:0;
      bottom:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .brand{text-align:center;margin-bottom:22px}
    .logoMark{
      width:92px;height:92px;margin:0 auto 12px;
      border-radius:20px;background:#fff;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:10px;
      box-shadow:0 10px 28px rgba(0,0,0,.35);
      position:relative;
    }
    .logoMark span{background:#eaf1f8;border:2px solid #061b34;border-radius:3px}
    .logoMark span:nth-child(13){background:var(--orange)}
    .brand h1{font-size:28px;letter-spacing:2px;line-height:.9;margin:0}
    .brand h1 b{display:block;color:var(--orange);font-size:22px;letter-spacing:8px;margin-top:7px}
    .brand small{letter-spacing:5px;font-weight:700}

.nav{
  flex:1;
  overflow-y:auto;
  padding-bottom:18px;
}

    .nav button{
      width:100%;
      border:0;
      background:transparent;
      color:#fff;
      text-align:left;
      padding:14px 16px;
      margin:4px 0;
      border-radius:10px;
      font-size:16px;
      font-weight:700;
      cursor:pointer;
    }
    .nav button:hover,.nav button.active{background:#123d73;color:#fff}
    .version{
      position:static;
      margin-top:16px;
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,.12);
      font-size:12px;
      color:#b8c7da;
      text-align:left;
      flex-shrink:0;
    }
    main{margin-left:260px;flex:1;padding:26px}
    .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
    .topbar h2{font-size:30px;margin:0}
    .tag{color:var(--muted);font-weight:600}
    .page{display:none}
    .page.active{display:block}
    .cards{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;margin-bottom:18px}
    .card{
      background:white;border:1px solid var(--border);border-radius:14px;padding:18px;
      box-shadow:0 5px 16px rgba(0,0,0,.06);
    }
    .card.big{grid-column:span 2;background:linear-gradient(135deg,#061b34,#123d73);color:white}
    .card h3{margin:0 0 10px;font-size:16px;color:inherit}
    .metric{font-size:34px;font-weight:900}
    .sub{font-size:13px;color:var(--muted)}
    .card.big .sub{color:#d8e6f7}
    .btn{
      background:var(--orange);color:#fff;border:0;border-radius:8px;padding:10px 14px;font-weight:800;cursor:pointer;
    }
    .btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--border)}
    .btn.blue{background:var(--blue)}
    .btn.green{background:var(--green)}
    .panel{
      background:white;border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:18px;
      box-shadow:0 5px 16px rgba(0,0,0,.05);
    }
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
    label{font-size:12px;font-weight:800;color:#304055;display:block;margin-bottom:5px}
    input,select{
      padding:9px 10px;border:1px solid #cfd8e3;border-radius:7px;font-size:14px;
      min-width:120px;background:#fff;
    }
    .boardWrap{
      overflow:auto;background:#fff;border-radius:16px;padding:16px;border:1px solid var(--border);
    }
    .boardTitle{text-align:center;font-size:26px;font-weight:900;margin:4px 0 4px;text-transform:uppercase}
    .teams{
      display:grid;
      grid-template-columns:110px auto minmax(150px,210px);
      gap:0;
      align-items:center;
      width:max-content;
      margin:auto;
    }
    .sideName{
      writing-mode:vertical-rl;
      transform:rotate(180deg);
      font-size:42px;
      font-weight:900;
      color:var(--orange);
      -webkit-text-stroke:1.5px var(--navy);
      text-align:center;
      height:610px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .topName{text-align:center;font-size:48px;font-weight:900;color:var(--blue);-webkit-text-stroke:1.5px #000;margin:4px 0}
    table.board{border-collapse:collapse;border:5px solid #000;margin:auto;table-layout:fixed}
    table.board td{
      border:2px solid #111;
      width:92px;height:56px;
      text-align:center;vertical-align:middle;
      font-weight:800;font-size:16px;
      position:relative;
    }
    table.board td.header{
      background:#d0d0d0;font-size:34px;font-weight:900;
    }
    table.board td.owner{
      cursor:text;background:#fff;
      outline:none;
    }
    table.board td.owner:focus{box-shadow:inset 0 0 0 3px #fbbf24;background:#fffbe8}
    table.board td.owner.selected{background:#fff200!important}
    table.board td.owner.win{background:#e9e9e9}
    .winBadges{position:absolute;right:2px;bottom:2px;display:flex;gap:2px;flex-wrap:wrap;max-width:80px;justify-content:flex-end}
    .winBadge{font-size:10px;line-height:1;background:#16a34a;color:white;border-radius:8px;padding:1px 4px;font-weight:900}
    .winBadge.back{background:#f97316}
    .winBadge.extra{background:#2563eb}
    .winBadge.corner{background:#7c3aed}
    .winBadge.side{background:#dc2626}
    .presetBox{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .presetChip{background:#eef4ff;border:1px solid #c6d7f2;color:#123d73;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:800}
    .hint{font-size:12px;color:var(--muted);margin-top:5px}
    .notice{text-align:center;font-size:18px;font-weight:900;margin:12px 0 2px}
    .payoutReadout{text-align:center;font-size:13px;font-weight:700;color:#333;margin-top:6px}
    .list{width:100%;border-collapse:collapse}
    .list th,.list td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
    .list th{background:#f0f3f8}
    .pill{display:inline-block;background:#e7f0ff;color:#123d73;border-radius:99px;padding:4px 8px;margin:2px;font-size:12px;font-weight:800}
    .statusPaid{background:#dcfce7;color:#166534}
    .paidRow{background:#b7ff9a!important}
    .ownerInline{min-width:180px;width:100%;padding:7px 8px}
    .tinyBtn{padding:6px 8px;font-size:12px;border-radius:6px}
    .statusOwe{background:#fee2e2;color:#991b1b}
    .split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .empty{color:var(--muted);padding:20px;text-align:center}
    .footerNote{font-size:12px;color:var(--muted);text-align:center;margin-top:20px}
    @media(max-width:900px){
      .sidebar{position:relative;width:100%;min-height:auto}
      .app{display:block}
      main{margin-left:0;padding:14px}
      .cards{grid-template-columns:1fr}
      .card.big{grid-column:auto}
      .split{grid-template-columns:1fr}
      .sideName{font-size:26px;height:500px;width:70px}
      table.board td{width:66px;height:44px}
      table.board td.header{font-size:24px}
      .topName{font-size:34px}
      .teams{grid-template-columns:75px auto minmax(130px,170px)}
    }
.contextMenu{
  position:fixed;
  z-index:9999;
  background:#fff;
  border:1px solid #cfd8e3;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:6px;
  display:none;
  min-width:150px;
}
.contextMenu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:9px 12px;
  border-radius:7px;
  font-weight:700;
  cursor:pointer;
}
.contextMenu button:hover{
  background:#eef4ff;
}

/* Board-only print view --------------------------------------------------
   Used by the Dashboard > Print Board action. This prints only the board
   itself, not the app shell, dashboard, controls, dock, or floating status. */
@media print{
  @page{
    size: landscape;
    margin:.25in;
  }

  body.squares-board-printing{
    background:#fff!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* Hide the full app first. Then explicitly reveal only the board print area. */
  body.squares-board-printing *{
    visibility:hidden!important;
  }

  body.squares-board-printing .sidebar,
  body.squares-board-printing #workspaceDock,
  body.squares-board-printing #saveStatusIndicator,
  body.squares-board-printing .topbar,
  body.squares-board-printing #quick > .panel,
  body.squares-board-printing .footerNote,
  body.squares-board-printing .floatingUndo,
  body.squares-board-printing .undoFloat,
  body.squares-board-printing .undoButton,
  body.squares-board-printing [id*="Undo"],
  body.squares-board-printing button{
    display:none!important;
  }

  body.squares-board-printing .app,
  body.squares-board-printing main,
  body.squares-board-printing #quick{
    display:block!important;
    margin:0!important;
    padding:0!important;
    width:100%!important;
    min-height:0!important;
    overflow:visible!important;
  }

  body.squares-board-printing main > .page{
    display:none!important;
  }

  body.squares-board-printing main > #quick{
    display:block!important;
  }

  body.squares-board-printing #quick .boardWrap,
  body.squares-board-printing #quick .boardWrap *{
    visibility:visible!important;
  }

  body.squares-board-printing #quick .boardWrap{
    position:absolute!important;
    left:0!important;
    top:0!important;
    right:0!important;
    display:block!important;
    overflow:visible!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    background:#fff!important;
    padding:0!important;
    margin:0 auto!important;
    width:100%!important;
    max-width:none!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }

  body.squares-board-printing .boardTitle{
    font-size:18pt!important;
    line-height:1!important;
    margin:0 0 2mm!important;
    color:#000!important;
    text-align:center!important;
  }

  body.squares-board-printing #gameDateTimeView{
    font-size:10pt!important;
    margin:0 0 2mm!important;
    color:#000!important;
    text-align:center!important;
  }

  body.squares-board-printing .topName{
    font-size:28pt!important;
    line-height:1!important;
    margin:0 0 3mm!important;
    text-align:center!important;
  }

  body.squares-board-printing .teams{
    display:grid!important;
    grid-template-columns:.72in auto!important;
    width:max-content!important;
    margin:0 auto!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }

  body.squares-board-printing .sideName{
    height:5.05in!important;
    width:.72in!important;
    font-size:28pt!important;
    line-height:1!important;
    color:#000!important;
  }

  body.squares-board-printing table.board{
    border:3px solid #000!important;
    border-collapse:collapse!important;
    page-break-inside:avoid!important;
    break-inside:avoid!important;
  }

  body.squares-board-printing table.board td{
    width:.78in!important;
    height:.46in!important;
    border:1.5px solid #111!important;
    font-size:9pt!important;
    padding:1mm!important;
    color:#000!important;
    overflow:hidden!important;
  }

  body.squares-board-printing table.board td.header{
    background:#d0d0d0!important;
    font-size:18pt!important;
    font-weight:900!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }

  body.squares-board-printing .payoutReadout{
    margin-top:2mm!important;
    font-size:9pt!important;
    color:#000!important;
    text-align:center!important;
  }

  body.squares-board-printing .notice{
    margin-top:2mm!important;
    font-size:11pt!important;
    color:#000!important;
    text-align:center!important;
  }
}


/* ===========================
   RC1 Editing + Navigation Polish
=========================== */
.pageBackRow{
  display:flex;
  justify-content:flex-start;
  margin:0 0 10px;
}
.pageBackBtn{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.tinyBtn{
  min-height:32px;
}


/* ===========================
   RC1 Save Button Feedback
=========================== */
.btn.saveFeedbackSaving,
button.saveFeedbackSaving{
  position:relative;
  transform:translateY(-1px);
  opacity:.92;
  cursor:wait!important;
}
.btn.saveFeedbackSaving::after,
button.saveFeedbackSaving::after{
  content:"";
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:999px;
  display:inline-block;
  margin-left:8px;
  vertical-align:-1px;
  animation:saveSpin .7s linear infinite;
}
.btn.saveFeedbackSaved,
button.saveFeedbackSaved{
  background:#16a34a!important;
  border-color:#15803d!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(22,163,74,.16), 0 10px 22px rgba(22,163,74,.18)!important;
}
.btn.saveFeedbackError,
button.saveFeedbackError{
  background:#dc2626!important;
  border-color:#991b1b!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(220,38,38,.16)!important;
}
.btn.saveFeedbackPulse,
button.saveFeedbackPulse{
  animation:savePulse .42s ease-out;
}
@keyframes saveSpin{
  to{transform:rotate(360deg)}
}
@keyframes savePulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* ===========================
   RC1 Rotating Number Draw
=========================== */
#boardTable.numberDrawActive td.header{
  transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  animation:numberDrawPop .22s ease-in-out;
}
#boardTable.numberDrawActive tr:first-child td.header,
#boardTable.numberDrawActive tr td.header:first-child{
  background:#fff7ed!important;
  box-shadow:inset 0 0 0 2px rgba(255,122,0,.22);
}
button.numberDrawButtonDrawing,
.btn.numberDrawButtonDrawing{
  opacity:.92;
  cursor:wait!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 4px rgba(255,122,0,.16), 0 10px 22px rgba(255,122,0,.16)!important;
}
button.numberDrawButtonDrawing::after,
.btn.numberDrawButtonDrawing::after{
  content:"";
  width:10px;
  height:10px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:999px;
  display:inline-block;
  margin-left:8px;
  vertical-align:-1px;
  animation:numberDrawSpin .65s linear infinite;
}
button.numberDrawButtonDone,
.btn.numberDrawButtonDone{
  background:#16a34a!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(22,163,74,.16), 0 10px 22px rgba(22,163,74,.18)!important;
}
@keyframes numberDrawSpin{
  to{transform:rotate(360deg)}
}
@keyframes numberDrawPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  #boardTable.numberDrawActive td.header,
  button.numberDrawButtonDrawing::after,
  .btn.numberDrawButtonDrawing::after{
    animation:none!important;
  }
}


/* v1.1 dashboard mode cards hard hide: sidebar toggle is the only mode switch */
#dashboardModeChoice,
.commissionerModeChoice,
.modeChoice.commissionerModeChoice {
  display: none !important;
}

/* Phase 7: Timeline removed from navigation; activity remains internal only. */

/* Multi-square selection and fill */
.squareFillBar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:12px 0;padding:10px 12px;background:#f7f9fc;
  border:1px solid var(--border);border-radius:12px;
}
.squareFillBar input{min-width:220px;flex:1 1 240px}
.squareFillStatus{font-size:13px;font-weight:800;white-space:nowrap}
.squareFillHint{font-size:12px;color:var(--muted);flex:1 1 100%;}
.squareFillBar.selectModeActive{box-shadow:inset 0 0 0 2px #2563eb;background:#eff6ff}
table.board td.owner.selected{background:#fff200!important;box-shadow:inset 0 0 0 3px #d97706}
@media (max-width: 900px){
  .squareFillBar{position:sticky;top:0;z-index:30}
  .squareFillBar .btn{min-height:42px}
}

/* Quarter-specific payout editor */
.payoutQuarterControls{align-items:end;margin-bottom:10px}
.payoutSameToggle{display:flex;align-items:center;gap:8px;font-weight:800;min-height:40px}
.payoutSameToggle input{width:18px;height:18px}



/* Compact payout table below the board */
.compactPayoutTableHost,.compactPayoutWrap{display:flex;justify-content:center;width:100%;}
.compactPayoutTableHost{margin:8px 0 4px;}
.compactPayoutTable{border-collapse:collapse;background:var(--panel,#fff);box-shadow:0 2px 8px rgba(15,23,42,.08);max-width:100%;}
.compactPayoutTable th,.compactPayoutTable td{border:1px solid var(--border,#94a3b8);padding:4px 8px;text-align:center;white-space:nowrap;font-size:10px;font-weight:800;color:var(--text,#111827);}
.compactPayoutTable th{background:var(--soft,#e5e7eb);font-weight:1000;}
.compactPayoutTable .entryRow th,.compactPayoutTable .entryRow td{background:rgba(59,130,246,.10);}
body.dark-mode .compactPayoutTable,html.dark-mode .compactPayoutTable{background:#111827;box-shadow:none;}
body.dark-mode .compactPayoutTable th,body.dark-mode .compactPayoutTable td,html.dark-mode .compactPayoutTable th,html.dark-mode .compactPayoutTable td{color:#f8fafc;border-color:#475569;}
body.dark-mode .compactPayoutTable th,html.dark-mode .compactPayoutTable th{background:#1e293b;}
body.dark-mode .compactPayoutTable .entryRow th,body.dark-mode .compactPayoutTable .entryRow td,html.dark-mode .compactPayoutTable .entryRow th,html.dark-mode .compactPayoutTable .entryRow td{background:#172554;}
@media(max-width:720px){.compactPayoutTable th,.compactPayoutTable td{padding:3px 5px;font-size:9px}.compactPayoutWrap{overflow-x:auto;justify-content:flex-start}}
@media print{body.squares-board-printing .compactPayoutTableHost{display:flex!important;margin:2mm 0 1mm!important}body.squares-board-printing .compactPayoutTable th,body.squares-board-printing .compactPayoutTable td{padding:1mm 1.5mm!important;font-size:6pt!important;color:#000!important;background:#fff!important}.payoutReadout{display:none!important}}


/* Board + payout side-by-side layout */
.boardGridColumn{min-width:0;}
.boardSidePayout{align-self:center;justify-self:stretch;margin:0 0 0 12px!important;width:auto!important;}
.boardSidePayout .compactPayoutWrap{width:100%;justify-content:stretch;}
.boardSidePayout .compactPayoutTable{width:100%;min-width:150px;}
.boardSidePayout .compactPayoutTable th,
.boardSidePayout .compactPayoutTable td{font-size:11px;padding:7px 6px;}

@media(max-width:900px){
  .teams{grid-template-columns:75px auto minmax(130px,170px);}
  .boardSidePayout{margin-left:8px!important;}
  .boardSidePayout .compactPayoutTable th,
  .boardSidePayout .compactPayoutTable td{font-size:9px;padding:5px 4px;}
}

@media print{
  @page{size:letter landscape;margin:.22in;}
  body.squares-board-printing .teams{
    display:grid!important;
    grid-template-columns:.62in auto 2.25in!important;
    gap:0!important;
    width:max-content!important;
    max-width:10.5in!important;
    margin:0 auto!important;
    align-items:center!important;
  }
  body.squares-board-printing .sideName{
    width:.62in!important;
    height:4.62in!important;
    font-size:24pt!important;
  }
  body.squares-board-printing table.board td{
    width:.62in!important;
    height:.42in!important;
    font-size:7.5pt!important;
    padding:.6mm!important;
  }
  body.squares-board-printing table.board td.header{font-size:14pt!important;}
  body.squares-board-printing .boardSidePayout{
    display:flex!important;
    visibility:visible!important;
    margin:0 0 0 .12in!important;
    width:2.13in!important;
    align-self:center!important;
  }
  body.squares-board-printing .boardSidePayout,
  body.squares-board-printing .boardSidePayout *{visibility:visible!important;}
  body.squares-board-printing .boardSidePayout .compactPayoutTable{width:100%!important;min-width:0!important;}
  body.squares-board-printing .boardSidePayout .compactPayoutTable th,
  body.squares-board-printing .boardSidePayout .compactPayoutTable td{
    font-size:7.5pt!important;
    padding:1.5mm 1mm!important;
    color:#000!important;
    background:#fff!important;
    border:1px solid #111!important;
  }
  body.squares-board-printing .boardSidePayout .compactPayoutTable th{background:#d0d0d0!important;}
  body.squares-board-printing .compactPayoutTableHost{margin:0!important;}
  body.squares-board-printing .notice{font-size:9pt!important;margin-top:1.5mm!important;}
}


/* Payout display reset: plain text below board */
.compactPayoutTableHost,.compactPayoutWrap,.boardSidePayout{display:none!important;}
.teams{grid-template-columns:90px minmax(0,1fr)!important;}
.payoutReadout{display:block!important;text-align:center;margin:8px 4px 2px;font-size:13px;font-weight:800;line-height:1.35;}
@media print{
  @page{size:letter landscape;margin:.25in;}
  body.squares-board-printing .teams{grid-template-columns:.7in auto!important;width:auto!important;max-width:10.5in!important;}
  body.squares-board-printing .payoutReadout{display:block!important;color:#000!important;font-size:8pt!important;margin:2mm 0 0!important;line-height:1.2!important;}
}
.customNumberDrawToggle{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 0 8px!important;
  padding:7px 9px!important;
  border:1px solid #31566d!important;
  border-radius:7px!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#0b2132,#071724)!important;
  color:#eef8ff!important;
  cursor:pointer!important;
}
.customNumberDrawToggle input{
  appearance:auto!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  min-height:17px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:3px!important;
  background:transparent!important;
  box-shadow:none!important;
  accent-color:#0f8fe8!important;
  flex:0 0 17px!important;
}
.customNumberDrawToggle span{display:flex!important;flex-direction:column!important;gap:1px!important;min-width:0!important;}
.customNumberDrawToggle strong{color:#f4fbff!important;font-size:11px!important;line-height:1.15!important;letter-spacing:.04em!important;}
.customNumberDrawToggle small{color:#8fb0c4!important;font-size:9px!important;font-weight:700!important;line-height:1.15!important;letter-spacing:.025em!important;}
.customNumberDrawLocked{
  cursor:not-allowed!important;
  filter:grayscale(.75);
  opacity:.62;
  box-shadow:none!important;
}
.customNumberDrawLocked:active{transform:none!important;}