:root {
  --fntFace: Truculenta, sans-serif;
  --fntSizeBase: 22px;
  --clrHtmlBg: hsl(33, 83%, 96%);
  --clrWhite: white;
  --clrBlack: hsl(0, 0%, 18%);
  --clrLight: hsl(195, 70%, 85%);
  --clrAltLight: hsl(167, 49%, 87%);
  --clrNegLight: hsl(359, 100%, 89%);
  --clrNegDark: hsl(359, 100%, 69%);
  --clrDark: hsl(184, 70%, 20%);
  --clrHeaderBg: hsl(184, 70%, 20%);
  --clrErrorStrong: hsl(356, 100%, 60%);
  --clrGrey: hsl(210, 3%, 72%);
  --clrLinkBlue: hsl(192, 77%, 83%);
  --maxMainWidth: 500px; /* Keep in sync with media selector */
  --headerHeight: 60px;
}

/* Global overrides */
* { box-sizing: border-box; }
a { color: var(--clrLinkBlue); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  display: inline-block; margin: 0;
  width: 100%; padding: 8px; border-radius: 6px;
  font-size: 24px; font-family: inherit; color: var(--clrDark);
  font-weight: bold; text-transform: uppercase;
  background-color: var(--clrLight);
  border: 1pt solid var(--clrWhite);
  &.negative { background-color: var(--clrNegLight); }
  &.vspace { margin: 4px 0; }
  &:disabled { background-color: var(--clrGrey); }
}

& input[type=text] {
  box-shadow: none; -webkit-box-shadow: none; -webkit-appearance: none; outline: none;
  -webkit-border-radius: 6px; border-radius: 6px; border: none;
  font-size: var(--fntSizeBase); font-family: inherit; color: var(--clrBlack);
  display: inline-block; padding: 9px 14px; width: 100%;
  margin-bottom: 16px;
  transition: background-color 0.7s ease-out;
  &.error {
    transition: none;
    background-color: var(--clrErrorStrong);
  }
}

/* Layout, specifics */
html, body { width: 100%; margin: 0; padding: 0; }
html {
  height: 100vh; background-color: var(--clrHtmlBg);
  user-select: none; -webkit-user-select: none;
}
html.noscroll { overflow-y: hidden; touch-action: none; -ms-touch-action: none; }
@media (max-width: 500px) {
  html { background-color: var(--clrDark); }
}
body {
  min-height: 100%;
  font-family: var(--fntFace); font-size: var(--fntSizeBase);
  color: var(--clrWhite); line-height: 1.2;
  display: flex; justify-content: center;

}
main {
  width: 100%; max-width: var(--maxMainWidth); min-height: 100%;
  padding: var(--headerHeight) 0 8px;
  background-color: var(--clrDark);
  background-image: url("/static/tree-bottom.svg");
  background-position: bottom; background-repeat: no-repeat; background-size: 100% auto;
}
main.shortBottom { background-position: center calc(100% + 140px); }
header {
  .centrer {
    height: 100%; position: absolute;
    background-color: var(--clrHeaderBg); width: 100%; max-width: var(--maxMainWidth);
    & h1 { margin: 0; font-size: 48px; font-weight: bold; padding: 0 16px; }
    & img { position: absolute; top: -18px; right: 0; }
  }
  width: 100%; height: var(--headerHeight);
  position: fixed; top: 0; left: 0;
  display: flex; justify-content: center;
  color: white;
}
.content { padding: 0 16px; }
.content.centered { text-align: center; }
.variant { display: none; }
.variant.visible { display: block; }
.hidden { display: none; }
h2 {
  color: var(--clrLight); font-weight: bold; font-size: 34px;
  margin: 16px 0;
}
img.lightSectionEdge { display: block; width: calc(100% + 32px); margin: 0 -16px; }
div.lightSection {
  background-color: var(--clrAltLight); margin-top: 8px;
  color: var(--clrBlack);
  & h2 { margin-top: 8px; color: var(--clrBlack); }
}
#pnlPassIntro { margin-top: 16px; }
#pnlBottomSpacer { height: 288px; }
li { margin: 8px 0; }
#pnlStatus {
  position: fixed; bottom: 16px; width: 100%; padding: 0 16px;
  max-width: var(--maxMainWidth);
}
main.shortBottom #pnlStatus { bottom: 8px; }
#pnlStatus section {
  width: 100%; display: flex; justify-content: space-between; column-gap: 8px;
  & div {
    background-color: var(--clrWhite); border-radius: 6px; padding: 6px 12px;
    color: var(--clrBlack); font-weight: bold;
    & img { display: inline; height: var(--fntSizeBase); vertical-align: bottom; margin-bottom: 1px; }
  }
  & .grow {
    flex-grow: 1; max-width: 60%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
#pnlGameStart { margin: 24px 0; }
#qrHost {
  display: flex; align-items: center; margin-top: 12px;
  & svg { border-radius: 6px; }
  & .left { width: 300px; max-width: 70%; }
  & .right {
    padding-left: 16px;
    & p { font-size: 18px; margin: 0; }
    & p#lblGameId {
      font-size: 36px; font-weight: bold;
      user-select: text; -webkit-user-select: text;
    }
  }
}
#partnerCode {
  & p { font-size: 18px; margin: 16px 0 8px 0; }
  & div { display: flex; align-items: center; justify-content: space-between; }
  & input { display: block; width: calc(60% - 4px); margin: 0; text-align: center; text-transform: uppercase; }
  & button { display: block; width: calc(40% - 4px); }
}
p.smol { font-size: 18px; }
p.narrow { padding: 0 48px; }
span.playerName { font-width: bold; color: var(--clrLight); }
#pnlConnecting { padding-left: 48px; padding-right: 48px; }
#pnlRoundInfo {
  & div:first-of-type p {
    display: inline-block; margin-bottom: 8px; margin-top: 16px;
    padding: 4px 16px; border-radius: 6px;
    background-color: var(--clrWhite); color: var(--clrBlack);
  }
  & div:nth-of-type(2) { margin-bottom: 16px; }
}
#btnHonest.chosen { border-color: var(--clrDark); }
#btnHonest.chosen:disabled { border-color: var(--clrBlack); background-color: var(--clrLight); }
#btnSteal.chosen { border-color: var(--clrNegDark); background-color: var(--clrNegLight); }
div.whitebox {
  background-color: var(--clrWhite); border-radius: 6px; padding: 8px 32px; margin-bottom: 4px;
  color: var(--clrBlack);
  & img { width: 120px; }
  & h3 { color: var(--clrDark); margin: 0; }
  & p { margin: 8px 0 4px 0; }
  & span.playerName { color: var(--clrDark); font-weight: bold; }
}
#btnNextRound { margin-bottom: 4px; }
#pnlGameReview,
#pnlLeaderBoard {
  & div.whitebox { padding-left: 12px; padding-right: 12px; }
  & table {
    width: 100%; border-collapse: collapse;
    & img { width: 24px; display: inline-block; margin-bottom: -4px; }
    & th { border-bottom: 2px dotted var(--clrGrey); padding: 3px; font-weight: normal; vertical-align: bottom; }
    & td { vertical-align: middle; padding: 3px 0; font-weight: bold; }
    & td:first-of-type { text-align: right; }
  }
}
#pnlLeaderBoard table {
  & th { text-align: left; }
  & td { text-align: left; }
  & th:first-of-type { text-align: center; }
  & td:first-of-type { text-align: center; }
  & td .thin { font-weight: normal; }
}
#pnlAdmin table {
  & th:last-of-type { text-align: left; padding-left: 8px; }
  & td:last-of-type { text-align: left; padding-left: 8px; }
}

@font-face {
  font-display: block;
  font-family: 'Truculenta';
  font-style: normal;
  font-weight: 400;
  src: url('static/Truculenta-Regular.woff2') format('woff2');
}
@font-face {
  font-display: block;
  font-family: 'Truculenta';
  font-style: normal;
  font-weight: 600;
  src: url('static/Truculenta-Bold.woff2') format('woff2');
}