* {
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100%;
  background: white;
  overflow: scroll;
}

#sidebar {
  display: none;
}

#menu {
  background-color: black;
  flex: 0 1 auto;
  position: sticky;
  top: 0;
  display: flex;
  padding: 10px;
  gap: 10px;
  z-index: 100;
}

#menu button {
  flex: 1 1;
  height: 4em;
}

#fullscreen:not(.fullscreen) {
  font-size: 2em;
  height: 1.6666667em;
}

#fullscreen.fullscreen {
  font-weight: bold;
  line-height: 1em;
}

#menu button.selected {
  background-color: yellow;
  border-color: gold;
}

#content {
  flex: 1 1 auto;
  min-height: 0;
  container: content / size;
}

.page:not(.selected) {
  display: none;
}

.page {
  --page-margin: 2vmin;
  padding: var(--page-margin);
}

#rules {
  overflow: scroll;
}

/* looks like default h3 */
#rules ol ::marker,
#rules ol hgroup h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0 0 0;
}

#rules ol hgroup p {
  margin: 0 0 1em 0;
}

#rules > hgroup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#rules > hgroup p {
  font-size: 1.2em;
  margin: 0;
}

#rules hgroup h1 {
  margin: 0;
}

#chat:is(.selected, .sidebar) {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#chat-input {
  flex: 0 1 auto;
  border: 1px solid black;
  display: flex;
}

#chat-input input {
  border: none;
  font-size: medium;
}

#chat-input label {
  font-size: large;
  padding-left: 0.5em;
  white-space: nowrap;
}

#chat-input-username {
  flex: 0;
  padding: 0.5em;
}

#chat-input-message {
  flex: 1;
  padding: 0.5em;
}

#chat-messages {
  flex: 1 1 auto;
  overflow: auto;
  word-wrap: break-word;
  scroll-behavior: smooth;
  padding: 0 var(--page-margin);
  border: 1px solid black;
  border-bottom: 0;
}

#game.selected {
  display: contents;
}

#game .game-page:not(.shown) {
  display: none;
}

#game-lobby.shown,
#game-room.shown {
  display: flex;
  flex-flow: column;
  height: 100%;
  gap: var(--page-margin);
  padding: inherit;
  align-items: center;
}

.game-page h1 {
  margin: 0;
  text-align: center;
}

#lobby-buttons,
#room-buttons {
  flex: 0 0 10%;
  width: 100%;
  display: flex;
  flex-flow: row;
  gap: 1em;
}

.lobby-button {
  flex: 1 1 0;
  padding: 0;
  border: 1px solid black;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font: 1rem sans-serif;
}

#lobby-rooms {
  width: 100%;
  flex: 1 1 auto;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  flex-flow: column;
  gap: 5px;
  justify-content: flex-start;
}

.lobby-room {
  border: 1px solid black;
  flex: 0 0 8em;
  overflow: hidden;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  gap: 1em;
  padding: 1em;
}

.lobby-room-players {
  flex: 1;
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  flex-flow: column wrap;
  column-gap: 1em;
}

.lobby-room h2,
.lobby-room p,
#game-room p {
  margin: 0;
  font-size: medium;
}

.lobby-room-info {
  flex: 0 0 max(7em,20%);
  display: flex;
  flex-flow: column;
  text-align: center;
  justify-content: center;
}

#room-main {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  width: 100%;
  gap: 1em;
  flex-flow: column;
}

#room-main table {
  flex: 1 1 50%;
  padding: 5px;
  border: 1px solid black;
  white-space: nowrap;
  overflow: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  
  tbody {
    display: contents;
  }

  h2 {
    margin: 0;
  }

  tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-auto-flow: row;
  }

  td:nth-child(2) {
    border-bottom: 1px dotted black;
  }
}

#room-settings input:disabled {
  cursor: not-allowed;
}

#settings-edit {
  font-size: medium;
  padding: 0.5em 1em;
}

#room-settings input {
  width: 4em;
}

#room-players td:nth-child(2) {
  margin-bottom: 0.35em;
}

#room-settings td:nth-child(2) {
  margin-bottom: 0.5em;
}

#room-settings caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
  margin: 0.5em;
}

#game-content.shown {
  display: grid;
  height: 100%;
  gap: var(--page-margin);
  padding: inherit;
}

#board {
  aspect-ratio: 1/1;
  height: 100%;
  grid-area: b;
}

canvas.board {
  height: 100%;
  width: 100%;
  position: absolute;
}

.game-ui {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: flex-start;
  overflow: scroll;
}

#left {
  background-color: red;
  grid-area: l;
}

#right {
  background-color: blue;
  grid-area: r;
}

#dice-container {
  border: 1px solid black;
  display: flex;
  flex-flow: row wrap;
  gap: 1vmin;
  padding: 1vmin;
  width: fit-content;
  height: fit-content;
  cursor: pointer;
}

#dice-container:disabled {
  cursor: default;
}

.dice {
  --size: max(10vmin, 40px);
  width: var(--size);
  height: var(--size);
  font-size: calc(.8 * var(--size));
  user-select: none;
  -webkit-user-select: none;
  align-items: center;
  justify-content: center;
  display: flex;
}

#dice-player {
  background-color: aqua;
}

#dice-bridge {
  background-color: lime;
}

#dice-monster {
  background-color: darkred;
}

.penis {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  background-color: pink;
}

.big-penis {
  width: 80px;
  height: 40px;
  border: 1px solid black;
  background-color: brown;
}

.pp {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  background-color: brown;
}

@media (orientation: landscape) {
  #container {
    flex-flow: row;
  }

  #menu {
    flex-flow: column;
    width: min-content;
  }

  #rules {
    height: 100%;
    overflow: auto;
  }
}

@media (orientation: landscape) and (width > 1200px) {
  #container {
    display: grid;
    grid-template-areas: 'menu main chat';
    grid-template-columns: auto 2fr 1fr;
    grid-template-rows: 100%;
    grid-auto-flow: row;
  }

  #content {
    grid-area: main;
  }

  #sidebar {
    grid-area: chat;
    display: block;
    max-height: 100%;
  }

  #chat.sidebar {
    padding-left: 0;
  }

  #chat-menubutton {
    display: none;
  }
}

@container content (450px <= width < 600px) {
  #chat-input input {
    font-size: .8em;
  }
}

@container content (350px <= width < 450px) {
  #chat-input input {
    font-size: .6em;
  }
}

@container content (width < 350px) {
  #chat-input input {
    font-size: .5em;
  }
}

/* @container content (aspect-ratio > 2) {
  #game-content.shown {
    grid-auto-columns: 1fr max-content 1fr;
    grid-template-areas: 
      'l b r';
    grid-auto-rows: 100%;
  }
} */

@container content (4/3 < aspect-ratio) {
  #game-content.shown {
    grid-template-columns: max-content auto;
    grid-auto-rows: 1fr;
    height: 100%;
    grid-template-areas: 
      'b l'
      'b r';
  }
}

@container content (1 < aspect-ratio <= 4/3) {
  #game-content.shown {
    grid-auto-columns: 3fr 4fr;
    grid-template-areas: 
      'l b'
      'r r';
    grid-auto-rows: 1fr;
    height: 100%;
  }
}

@container content (3/4 < aspect-ratio <= 1) {
  #game-content.shown {
    grid-auto-columns: 3fr 4fr;
    grid-template-areas: 
      'l b'
      'l r';
    grid-auto-rows: 1fr;
    height: 100%;
  }
}

@container content (aspect-ratio <= 3/4) {
  #game-content.shown {
    grid-template-rows: max-content 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    grid-template-areas: 
      'b b'
      'l r';
  }

  #board {
    width: 100%;
    height: unset;
  }
}

/* @container content (aspect-ratio <= 1/2) {
  #game-content.shown {
    grid-template-rows: max-content 1fr 1fr;
    grid-template-areas: 
      'b'
      'l'
      'r';
    grid-auto-columns: 100%;
  }

  #board {
    width: 100%;
    height: unset;
  }
} */