/* Squares Pro shared board renderer
   This file is intentionally loaded after all page and device styles. It is the
   single final authority for board colors, typography, grid headers, and the
   Game Center frame stack across Editor, Home, and Game Center. */

:is(#quick,#home,#dashboard){
  --sp-board-top-color:#123d73;
  --sp-board-left-color:#ff7a00;
  --sp-board-top-outline:#000000;
  --sp-board-left-outline:#061b34;
  --sp-board-top-font:"Arial Black",Arial,sans-serif;
  --sp-board-left-font:"Arial Black",Arial,sans-serif;
  --sp-board-top-size:60px;
  --sp-board-left-size:60px;
}

/* Board Editor */
#quick .topName{
  color:var(--sp-board-top-color)!important;
  font-family:var(--sp-board-top-font)!important;
  -webkit-text-stroke:1.5px var(--sp-board-top-outline)!important;
}
#quick .sideName{
  color:var(--sp-board-left-color)!important;
  font-family:var(--sp-board-left-font)!important;
  -webkit-text-stroke:1.5px var(--sp-board-left-outline)!important;
}
#quick table.board tr:first-child td.header{
  background:linear-gradient(180deg,var(--sp-board-top-color),color-mix(in srgb,var(--sp-board-top-color) 68%,#000))!important;
  border-color:color-mix(in srgb,var(--sp-board-top-color) 68%,#dbe7ee)!important;
}
#quick table.board tr td.header:first-child{
  background:linear-gradient(90deg,var(--sp-board-left-color),color-mix(in srgb,var(--sp-board-left-color) 68%,#000))!important;
  border-color:color-mix(in srgb,var(--sp-board-left-color) 68%,#dbe7ee)!important;
}
#quick table.board tr:first-child td.header:first-child{
  background:linear-gradient(135deg,var(--sp-board-left-color) 0 48%,#071018 49% 51%,var(--sp-board-top-color) 52% 100%)!important;
}
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard{min-height:520px;}
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard .editorTopTeamDisplay,
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard .teams,
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard .payoutReadout,
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard .notice{display:none!important;}
#quick .stadiumBoardEditorPreview.hasNoLeagueBoard::after{
  content:"Create or open a league, then create or select a board.";
  display:grid;
  place-content:center;
  min-height:380px;
  color:#8fa6b5;
  background:radial-gradient(circle at 50% 30%,rgba(30,113,166,.16),transparent 48%),#030b10;
  border:2px dashed #31566d;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
}

/* Commissioner Home */
#home .stadiumHomeWorkspaceGrid{
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr)!important;
  align-items:stretch!important;
}
#home .homeBoardPreviewFrame{
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto!important;
  width:100%!important;
  aspect-ratio:1574 / 999!important;
  min-height:0!important;
  margin:0 auto!important;
}
#home .homeBoardPreviewBody{
  min-width:0!important;
  min-height:0!important;
}
#home .homeBoardPreviewFrame .premiumMiniBoard{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}
#home .homeBoardPreviewFrame .premiumMiniCell{
  min-height:0!important;
  font-size:clamp(6px,.46vw,9px)!important;
}
#home .homeBoardPreviewFrame .premiumMiniCell.head,
#home .homeBoardPreviewFrame .premiumMiniCell.side{
  font-size:clamp(9px,.68vw,13px)!important;
}
#home .homeBoardPreviewTopTeam{
  color:var(--sp-board-top-color)!important;
  font-family:var(--sp-board-top-font)!important;
  -webkit-text-stroke:1px var(--sp-board-top-outline)!important;
}
#home .homeBoardPreviewLeftTeam{
  color:var(--sp-board-left-color)!important;
  font-family:var(--sp-board-left-font)!important;
  -webkit-text-stroke:.7px var(--sp-board-left-outline)!important;
}
#home .homeBoardPreviewFrame .premiumMiniCell.head{
  background:var(--sp-board-top-color)!important;
  border-color:color-mix(in srgb,var(--sp-board-top-color) 65%,#dbe7ee)!important;
}
#home .homeBoardPreviewFrame .premiumMiniCell.side{
  background:var(--sp-board-left-color)!important;
  border-color:color-mix(in srgb,var(--sp-board-left-color) 65%,#dbe7ee)!important;
}
#home .homeBoardPreviewFrame .premiumMiniCell.head:first-child{
  background:linear-gradient(135deg,var(--sp-board-left-color) 0 48%,#071018 49% 51%,var(--sp-board-top-color) 52% 100%)!important;
}
#home .stadiumHomeScoreCard>div:first-of-type{
  border-color:var(--sp-board-top-color)!important;
  background:linear-gradient(90deg,var(--sp-board-top-color),color-mix(in srgb,var(--sp-board-top-color) 42%,#02070b))!important;
}
#home .stadiumHomeScoreCard>div:nth-of-type(2){
  border-color:var(--sp-board-left-color)!important;
  background:linear-gradient(90deg,var(--sp-board-left-color),color-mix(in srgb,var(--sp-board-left-color) 42%,#02070b))!important;
}
#home .homeBoardPreviewFrame.hasNoLeagueBoard .homeBoardPreviewBody{grid-template-columns:1fr;}
#home .homeBoardPreviewFrame.hasNoLeagueBoard .homeBoardPreviewLeftTeam{display:none;}
#home .homeBoardPreviewFrame.hasNoLeagueBoard .premiumMiniBoard{background:#030b10!important;}
#home .homeBoardEmptyState{
  display:grid;
  place-content:center;
  gap:8px;
  min-height:220px;
  padding:24px;
  color:#8fa6b5;
  background:radial-gradient(circle at 50% 30%,rgba(30,113,166,.16),transparent 48%),#030b10;
  text-align:center;
}
#home .homeBoardEmptyState b{color:#f0bd3f;font-size:14px;letter-spacing:.08em;}
#home .homeBoardEmptyState span{font-size:10px;}

/* Board Editor: preserve the same board silhouette and use the frame interior. */
#quick .stadiumBoardEditorPreview{
  width:100%!important;
  max-width:1120px!important;
  aspect-ratio:1574 / 999!important;
  min-height:0!important;
  margin-inline:auto!important;
}
#quick .teams{
  grid-template-columns:58px minmax(0,1fr)!important;
  width:min(94%,960px)!important;
}
#quick .editorSideTeamDisplay,
#quick .sideName{width:58px!important;}
#quick .boardGridColumn{width:100%!important;}
#quick table.board{
  width:100%!important;
  table-layout:fixed!important;
}
#quick table.board td{width:auto!important;height:38px!important;}
#quick table.board[data-board-size="50"]{width:min(100%,840px)!important;}
#quick table.board[data-board-size="50"] td{height:48px!important;}
#quick table.board[data-board-size="25"]{width:min(100%,650px)!important;}
#quick table.board[data-board-size="25"] td{height:64px!important;}

/* Game Center: one canonical board structure and one foreground frame layer. */
#dashboard .dashboardLiveBoardCard{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  transform:none!important;
}
#dashboard .dashboardLiveBoardCard::before,
#dashboard .dashboardLiveBoardCard::after,
#dashboard .dashboardLiveBoardCard>.panelTitleRow{display:none!important;}

#dashboard .dashboardLiveBoard{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-rows:46px minmax(0,1fr) 24px!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:1574 / 999!important;
  min-height:0!important;
  margin:0!important;
  padding:5.4% 6.5% 6.1%!important;
  overflow:visible!important;
  background:radial-gradient(ellipse at 50% 35%,#0a2231 0%,#04121c 52%,#01070b 100%) center/94% 92% no-repeat!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.72)) drop-shadow(0 0 8px rgba(76,177,241,.18))!important;
}
#dashboard .dashboardLiveBoard::before{display:none!important;content:none!important;}
#dashboard .dashboardLiveBoard::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:50!important;
  display:block!important;
  pointer-events:none!important;
  background:url('../themes/squares-pro-board-frame-metal.png') center/100% 100% no-repeat!important;
}
#dashboard .dashboardLiveBoard>*{position:relative!important;z-index:1!important;}
#dashboard .dashBoardMetaLine{display:none!important;}
#dashboard .dashboardLiveBoard.dashboardEmptyLeagueBoard{grid-template-rows:1fr!important;}
#dashboard .dashboardEmptyBoardState{
  display:grid!important;
  place-content:center!important;
  gap:10px!important;
  min-width:0!important;
  min-height:0!important;
  color:#8fa6b5!important;
  background:radial-gradient(circle at 50% 35%,rgba(30,113,166,.18),transparent 46%)!important;
  text-align:center!important;
}
#dashboard .dashboardEmptyBoardState b{color:#f0bd3f!important;font-size:clamp(16px,2vw,28px)!important;letter-spacing:.1em!important;}
#dashboard .dashboardEmptyBoardState span{font-size:clamp(10px,1vw,14px)!important;}

#dashboard .dashTeamTop{
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  height:46px!important;
  margin:0!important;
  padding:0 24px!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sp-board-top-color) 34%,#07131d),color-mix(in srgb,var(--sp-board-top-color) 22%,#02070b))!important;
  border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--sp-board-top-color) 66%,#dbe7ee)!important;
  clip-path:none!important;
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.1)!important;
}
#dashboard .dashTeamTop b{
  color:var(--sp-board-top-color)!important;
  background:none!important;
  font-family:var(--sp-board-top-font)!important;
  font-size:clamp(25px,var(--sp-board-top-size),42px)!important;
  font-style:italic!important;
  letter-spacing:.11em!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--sp-board-top-color)!important;
  -webkit-text-stroke:1px var(--sp-board-top-outline)!important;
  filter:none!important;
  text-shadow:0 2px 3px #000,0 0 7px color-mix(in srgb,var(--sp-board-top-color) 70%,#fff)!important;
}
#dashboard .dashTeamTopRule{display:none!important;}

#dashboard .dashBoardStage{
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#020609!important;
  border:2px solid #151e24!important;
  border-radius:0!important;
  box-shadow:0 0 0 1px #75838a,0 0 0 3px #020608,0 8px 15px rgba(0,0,0,.72)!important;
}
#dashboard .dashTeamLeft{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,#020609,color-mix(in srgb,var(--sp-board-left-color) 48%,#071018),#020609)!important;
  border:0!important;
  border-right:2px solid color-mix(in srgb,var(--sp-board-left-color) 68%,#dbe7ee)!important;
  box-shadow:inset 0 0 18px #000!important;
}
#dashboard .dashTeamLeft::before{display:none!important;content:none!important;}
#dashboard .dashTeamLeft span{
  color:var(--sp-board-left-color)!important;
  background:none!important;
  font-family:var(--sp-board-left-font)!important;
  font-size:clamp(25px,var(--sp-board-left-size),42px)!important;
  letter-spacing:.08em!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--sp-board-left-color)!important;
  -webkit-text-stroke:1px var(--sp-board-left-outline)!important;
  filter:none!important;
  text-shadow:0 2px 3px #000,0 0 7px color-mix(in srgb,var(--sp-board-left-color) 70%,#fff)!important;
}

#dashboard .dashBoardScroll{
  min-width:0!important;
  overflow:hidden!important;
  background:#020609!important;
  border:1px solid #647985!important;
  box-shadow:0 0 0 1px #05090c,inset 0 0 12px #000!important;
}
#dashboard .dashBoardTable{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  table-layout:fixed!important;
  border:0!important;
  border-collapse:collapse!important;
  background:#020609!important;
}
#dashboard .dashBoardTable td{
  height:auto!important;
  padding:1px 2px!important;
  color:#f2f5f6!important;
  background:linear-gradient(180deg,#10171c,#070c10)!important;
  border:1px solid #2d3a42!important;
  text-align:center!important;
  vertical-align:middle!important;
  text-shadow:0 1px 2px #000!important;
}
#dashboard .dashBoardTable td.dashTopHeader{
  color:#fff!important;
  background:linear-gradient(180deg,var(--sp-board-top-color),color-mix(in srgb,var(--sp-board-top-color) 62%,#01050a))!important;
  border-color:color-mix(in srgb,var(--sp-board-top-color) 62%,#dbe7ee)!important;
}
#dashboard .dashBoardTable td.dashLeftHeader{
  color:#fff!important;
  background:linear-gradient(90deg,var(--sp-board-left-color),color-mix(in srgb,var(--sp-board-left-color) 62%,#020406))!important;
  border-color:color-mix(in srgb,var(--sp-board-left-color) 62%,#dbe7ee)!important;
}
#dashboard .dashBoardTable td.dashCorner{
  background:linear-gradient(135deg,var(--sp-board-left-color) 0 48%,#071018 49% 51%,var(--sp-board-top-color) 52% 100%)!important;
  box-shadow:inset 0 0 10px #000!important;
}
#dashboard .dashHeader{font-size:clamp(17px,1.25vw,22px)!important;}
#dashboard .dashOwner{color:#f2f5f6!important;font-size:clamp(9px,.68vw,12px)!important;font-weight:600!important;}

#dashboard .dashBoardMotto{
  grid-row:3!important;
  align-self:center!important;
  justify-self:center!important;
  width:58%!important;
  min-height:24px!important;
  margin:0!important;
  padding:3px 12px!important;
  color:#efbf45!important;
  background:rgba(0,0,0,.72)!important;
  border:0!important;
  border-top:1px solid rgba(87,159,202,.28)!important;
  clip-path:none!important;
  box-shadow:none!important;
  letter-spacing:.2em!important;
}

@media(max-width:1320px){
  #dashboard .dashboardLiveBoard{grid-template-rows:42px minmax(0,1fr) 22px!important;padding:5.4% 6.4% 6%!important;}
  #dashboard .dashTeamTop{height:42px!important;min-height:42px!important;padding-inline:18px!important;}
  #dashboard .dashBoardStage{grid-template-columns:52px minmax(0,1fr)!important;}
}

@media(max-width:980px){
  #home .stadiumHomeWorkspaceGrid{grid-template-columns:1fr!important;}
  #home .homeBoardPreviewFrame{aspect-ratio:1574 / 999!important;}
  #dashboard .dashboardLiveBoard{aspect-ratio:auto!important;min-height:620px!important;padding:68px 52px 58px!important;}
  #dashboard .dashTeamTop{height:52px!important;min-height:52px!important;}
  #dashboard .dashBoardStage{grid-template-columns:62px minmax(0,1fr)!important;}
}

@media(max-width:699px){
  #home .homeBoardPreviewFrame{aspect-ratio:auto!important;min-height:520px!important;}
  #quick .stadiumBoardEditorPreview{aspect-ratio:auto!important;}
  #dashboard .dashboardLiveBoard{min-height:560px!important;padding:60px 42px 52px!important;}
  #dashboard .dashHeader{font-size:15px!important;}
  #dashboard .dashOwner{font-size:8px!important;}
}

/* Thanksgiving test preset: align live content to the measured PSD layer bounds. */
#quick .thanksgivingPayoutPreview{display:none;}
#quick.thanksgivingPresetActive .stadiumBoardEditorPreview{
  aspect-ratio:3300 / 2550!important;
  min-height:0!important;
}
#quick.thanksgivingPresetActive .teams{
  position:absolute!important;
  left:21.05%!important;
  top:27.45%!important;
  z-index:2!important;
  display:block!important;
  width:58%!important;
  max-width:none!important;
  height:47%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
#quick.thanksgivingPresetActive .boardGridColumn{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(63,67,69,.08) 0 1px,transparent 1.8px),
    radial-gradient(circle at 76% 62%,rgba(80,76,68,.055) 0 1.2px,transparent 2px),
    repeating-linear-gradient(4deg,rgba(38,43,46,.025) 0 1px,transparent 1px 7px),
    linear-gradient(103deg,#f1f1ed 0%,#e8e8e3 48%,#f3f3ef 100%)!important;
  border:4px solid #000!important;
  box-sizing:border-box!important;
}
#quick.thanksgivingPresetActive table.board{
  display:grid!important;
  grid-template-columns:repeat(11,minmax(0,1fr))!important;
  grid-template-rows:repeat(11,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
  border-spacing:0!important;
  color:#000!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
#quick.thanksgivingPresetActive table.board tbody{
  display:contents!important;
}
#quick.thanksgivingPresetActive table.board tr{
  display:contents!important;
}
#quick.thanksgivingPresetActive table.board td,
#quick.thanksgivingPresetActive table.board td.owner,
#quick.thanksgivingPresetActive table.board td.header{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:2px!important;
  box-sizing:border-box!important;
  color:#000!important;
  background:rgba(255,255,255,.035)!important;
  border:2px solid #000!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-size:clamp(10px,.78vw,14px)!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  vertical-align:middle!important;
  overflow:hidden!important;
}
#quick.thanksgivingPresetActive table.board tr:first-child td.header:not(:first-child),
#quick.thanksgivingPresetActive table.board tr:not(:first-child) td.header:first-child{
  color:#000!important;
  background:#b8bdc3!important;
  border:3px solid #000!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-size:clamp(20px,1.65vw,30px)!important;
  font-weight:1000!important;
  line-height:1!important;
}
#quick.thanksgivingPresetActive table.board tr:first-child td.header:first-child{
  color:#000!important;
  background:#b8bdc3!important;
  border:3px solid #000!important;
  box-shadow:none!important;
}
#quick.thanksgivingPresetActive table.board td.owner{
  font-size:clamp(7px,.58vw,10px)!important;
  white-space:nowrap!important;
}
#quick.thanksgivingPresetActive .thanksgivingPayoutPreview{
  position:absolute;
  left:23.45%;
  top:78.8%;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:14px minmax(0,1fr);
  align-items:start;
  column-gap:0;
  row-gap:0;
  width:50.75%;
  height:6.8%;
  padding:0 .2%;
  box-sizing:border-box;
  overflow:hidden;
  color:#17212b;
  font:800 clamp(7px,.5vw,9px)/.98 Arial, sans-serif;
  text-align:center;
  white-space:normal;
}
#quick.thanksgivingPresetActive .thanksgivingPayoutPreview[hidden]{display:none!important;}
#quick.thanksgivingPresetActive .thanksgivingPayoutEntry{
  grid-column:1/-1;
  align-self:center;
  color:#000;
  font-size:1.08em;
  font-weight:1000;
  line-height:12px;
  text-align:center;
}
#quick.thanksgivingPresetActive .thanksgivingPayoutQuarter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-width:0;
  overflow:hidden;
  color:#000;
  white-space:nowrap;
  line-height:1;
}
#quick.thanksgivingPresetActive .thanksgivingPayoutQuarterHeading{
  margin-bottom:0;
  color:#000;
  font-size:1.08em;
  font-weight:1000;
}
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutPreview{
  left:24.69%;
  top:79.93%;
  row-gap:4px;
  height:9%;
}
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutPreview,
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutEntry,
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutQuarter,
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutQuarterHeading{
  color:#fff2c7;
  text-shadow:0 2px 3px #000;
}
#quick.thanksgivingPbxPresetActive .thanksgivingPayoutEntry{
  color:#f6b83f;
  letter-spacing:.1em;
}
#dashboard.thanksgivingPbxPresetActive .stadiumEntryFeeHero{display:none!important;}