:root {
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono-font: "SFMono-Regular", Consolas, "Roboto Mono", "Fira Mono", Menlo, "Liberation Mono", monospace;

  --base-font-size: clamp(0.75rem, 1rem - 0.25vw, 0.875rem);

  --header-height: 6.5rem;


  --orange-primary: #c97000;
  --orange-highlight: #ffaa5e;
  --orange-pale: #ffdebf;

  --notice-background: #8f8;
  --notice-border: #3f3;
  --error-background: #fbb;
  --error-border: #f33;

  --pick-right: #545454;
  --pick-right-background: #8f8;
  --pick-right-points: #080;
  --pick-wrong: #545454;
  --pick-wrong-background: #fbb;
  --pick-wrong-points: #c00;
  --pick-invalid-background: #fee;
  --pick-invalid: #c33;

  --disabled-input-background: #ebebe4;

  --gray-dark: #666;
  --gray: #999;
  --gray-light-medium: #ccc;
  --gray-light: #bbb;
  --gray-lighter: #ddd;
  --gray-lightest: #eee;
  --white: #fff;
}


html { font-size: 100%; font-family: var(--body-font); text-align: left; }
body { font-size: var(--base-font-size); margin: 0 clamp(0.25rem, 2.5vw, 2rem); width: auto; }
@media (min-width: 768px) {
  body { margin: 0 2rem 0.5rem 2rem; width: clamp(auto, 920px, 1100px); }
}

table, td { text-align: left; position: relative; border-collapse: collapse; }
th { text-align: center; }
form { margin: 0; }
a { color: var(--orange-primary); }
a:hover { color: var(--gray-dark); }
ul, ol { text-align: left; }
pre { font-family: var(--mono-font); text-align: left; }
abbr { border-bottom: 1px dotted #333; }
h1 { clear: both; background: #bbb; font-size: calc(var(--base-font-size) * 1.67); font-weight: normal; text-align: left; margin: 0.25rem 0 0.25rem 0; padding: 0.15rem; }
h2 { clear: both; background: #ddd; font-size: calc(var(--base-font-size) * 1.3); font-weight: normal; text-align: left; margin: 0 0 0.25rem 0; padding: 0.15rem; }
h1 input { font-size: var(--base-font-size); }
input, select { font-family: var(--body-font); font-size: var(--base-font-size); border: 1px solid #999; }
input:disabled, select:disabled { background: var(--disabled-input-background); }

#notice { background: var(--notice-background); margin: 0.3em; padding: 0.3em; border: 1px solid var(--notice-border); font-size: var(--base-font-size); text-align: left; }
#error { background: var(--error-background); margin: 0.3em; padding: 0.3em; border: 1px solid var(--error-border); font-size: var(--base-font-size); text-align: left; }

#notYet { font-size: calc(var(--base-font-size) * 1.67); text-align: center; }


#header { display: grid; grid-template-columns: 18% 57% 25%; gap: 0; font-size: var(--base-font-size); width: 100%; height: auto; margin: 0; padding: 0; border-bottom: 2px solid var(--gray-dark); text-align: center; }
#title { min-height: var(--header-height); display: flex; align-items: center; padding: 0; background: #ddd; }
#title #logo { width: 100%; height: auto; object-fit: contain; }
#countdownArea { min-height: var(--header-height); padding: 0 1rem; background: #ddd; }
#countdownArea td { text-align: center; }
#menu { font-size: var(--base-font-size); width: 100%; min-height: var(--header-height); padding: 0; background: var(--orange-pale); text-align: center; vertical-align: text-top; }
#menu a { color: var(--gray-dark); }
#menu a:hover { color: var(--orange-primary); }
#menu #name { font-size: 1.1rem; font-weight: bold; background: var(--orange-highlight); padding: 0.1rem; border-bottom: 2px solid var(--orange-primary); }
@media (max-width: 768px) {
  #header { grid-template-columns: 30% 70%; }
  #menu { clear: both; width: 100%; grid-column-end: span 2; }
}

#countdown { font-weight: bold; font-variant-numeric: tabular-nums; font-size: 1.3rem; padding: 0.3rem; }
#countdown span { padding: 0.15em; }

#login { padding: 0.5rem 0; }
#login input { font-family: var(--body-font); font-size: var(--base-font-size); text-align: left; }
#login .label { font-weight: bold; text-align: right; padding-right: 0.2rem; }
#login #loginButton { background: var(--orange-highlight); text-align: center; }


#adminPanel { background: var(--orange-primary); color: #fff; border-bottom: 2px solid var(--gray-dark); text-align: center; }
#adminPanel span { display: inline-block; margin: 0 0.5em; }
#adminPanel a { color: var(--orange-pale); margin: 0 0.25em; }
#adminPanel a:hover { color: #ccc; }

#main { clear: both; width: 100%; margin: 0; padding: 0.5rem 0; }

#bracketContainer { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; }
#bracketContainer #bracket { order: 1; width: 100%; min-width: 0; max-width: 100%; }
#bracketContainer #bracket h1, #bracketContainer #bracket h2 { margin-top: 0.5rem; }
#bracketContainer #bracket .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
#bracketContainer #bracket .table-scroll table { margin-bottom: 0.5rem; padding-bottom: 0.5rem; width: max-content; }
#bracketContainer #bracket #tiebreakers { max-width: 100%; }
#bracketContainer #bracket .submit { text-align: center; background: var(--orange-pale); margin: 1rem 0; padding: 0.3rem; }
#bracketContainer #bracket .submit input { background: var(--orange-highlight); border: 1px solid var(--orange-primary); }
#bracketContainer .sidebar { order: 2; }
@media (max-width: 768px) {
  #bracketContainer { display: grid; grid-template-columns: 1fr; }
}

#footer { clear: both; width: auto; margin: 0; color: var(--gray-dark); font-size: 0.75rem; padding: 0.3em; border-top: 2px solid var(--gray-dark); border-bottom: 1px solid var(--gray-dark); background: #eee; }
#footer a, #footer a:visited { color: var(--gray-dark); }
#footer a:hover { color: var(--orange-primary); }

#nav { margin: 0 0.2em; padding: 0.2em; }
#nav ul { padding-left: 1em; }
#nav li { list-style-type: none; margin: 0; padding: 0; font-size: calc(var(--base-font-size) * 0.8) }

#settings input { font-family: var(--body-font); text-align: left; }
#settings .label { font-weight: bold; text-align: right; padding-right: 0.2rem; }

#introContainer { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1rem; }
#introContainer #social { order: 1; }
#introContainer #intro { order: 2; font-size: 1.1rem; }
#introContainer #scores { order: 3; }
@media (max-width: 768px) {
  #introContainer { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  #social { display: none; }
}
#socialPrompt { color: var(--gray-dark); padding: 0.5em 0; }

#scores { width: auto; }

#standings { background: var(--orange-pale); padding: 0.5rem; text-align: center; }
#standings h1 { background: var(--orange-highlight); font-size: 1.2rem; text-align: center; border-bottom: 2px solid var(--orange-primary); margin: 0.25rem 0 0.5rem 0; }
#standings table { width: 100%; }
#standings #yourScore { text-align: center; font-weight: bold; font-size: 1.8rem; }
#standings #outOf { text-align: center; font-weight: bold; font-size: 1rem; color: var(--gray-dark); }
#standings .roundScore { text-align: right; font-variant-numeric: tabular-nums; }
#standings .roundAvailable { text-align: left; font-variant-numeric: tabular-nums; color: var(--gray-dark); }
#standings #rankings .score { text-align: right; font-variant-numeric: tabular-nums; }

#faq { margin-top: 2em; }
#faq table { margin: 0.3em; max-width: 100%; font-size: var(--base-font-size); }
#faq .question { font-weight: bold; background: #ddd; font-size: calc(var(--base-font-size) * 1.3); margin-top: var(--base-font-size); margin-bottom: calc(var(--base-font-size) * 0.5); padding: 0.15rem; }
#faq p, #faq li { margin: calc(var(--base-font-size) * 0.75) 0.15rem; }
#faqNav ol { margin-left: 1.5em; padding-left: 1.5em; text-indent: -1.5em; }

.podLocation { display: flex; justify-content: center; align-items: center; font-weight: bold; width: 2rem; height: 100%; font-size: calc(var(--base-font-size) * 0.83); text-align: center; vertical-align: middle; transform: rotate(-90deg); transform-origin: center; }
.matchup { text-align: left; padding: 0.3rem; }

.pick { text-align: center; padding: 0.3rem; }
.pick input { text-align: center; font-size: 0.875rem; margin: 1px; border: 1px solid #999; }
.pick .invalid { background: var(--pick-invalid-background); color: var(--pick-invalid); font-weight: bold; }
.pick .invalid:disabled { color: #999; }
.pick .right { background: var(--pick-right-background); color: var(--pick-right); }
.pick .wrong { background: var(--pick-wrong-background); color: var(--pick-wrong); }

.pick .gameTime { font-size: var(--base-font-size); text-align: center; }
.pick .network { font-size: calc(var(--base-font-size) * 0.83); text-align: center; }
.pick .winner { font-size: var(--base-font-size); font-weight: bold; text-align: center; }
.pick .gameResult { font-size: calc(var(--base-font-size) * 0.83); text-align: center; color: #999; }

.pick .locks { font-size: calc(var(--base-font-size) * 0.83); font-weight: normal; color: #999; }
.pick .locked { font-size: calc(var(--base-font-size) * 0.83); font-weight: bold; color: #999; }
.pick .points { font-size: calc(var(--base-font-size) * 0.83); font-weight: bold; color: var(--pick-right-points); }
.pick .noPoints { font-size: calc(var(--base-font-size) * 0.83); font-weight: normal; color: var(--pick-wrong-points); }

.seed { font-size: calc(var(--base-font-size) * 0.83); color: var(--gray-dark); padding-right: 0.35em; font-weight: normal; }

.explain, .explain a { clear: both; text-align: left; color: var(--gray-dark); }
.explain a:hover { color: var(--orange-primary); }


#scoringContainer .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
#scoringContainer .table-scroll table { margin-bottom: 0.5rem; padding-bottom: 0.5rem; width: max-content; }
#dbpicks td { font-size: calc(var(--base-font-size) * 0.67); }
#dbpicks .right { font-weight: bold; color: var(--pick-right-points); background: var(--pick-right-background); }
#dbpicks .wrong { font-weight: normal; color: var(--pick-wrong-points); background: var(--pick-wrong-background); }
#dbpicks .undetermined { font-weight: normal; color: #999; background: #ddd; }
#dbpicks .invalid { font-weight: bold; color: var(--pick-invalid-background); background: var(--pick-invalid); }   /* invert colors */
#dbpicks .roundScore { font-weight: bold; text-align: center; background: #ccc; padding: 0 1em; }

#text-standings p { margin: 0; }