:root {
    --font2line: 1.2;
    --line2font: .833333;
    /* --body-margin-width: 2vmin; */
    --body-margin-width: 0vw;
    --body-margin-height: 0vh;
    --body-width: calc(100vw - 2 * var(--body-margin-width));
    --body-height: calc(100vh - 2 * var(--body-margin-height));
    --menu-bar-font-size: 2vh;
    --menu-bar-height: calc(var(--menu-bar-font-size) * var(--font2line));
    --menu-bar-height-total: var(--menu-bar-height);
    --menu-bar-spacing: 2.6vmin;
    --menu-bar-padding-left: 1vw;
    --menu-bar-padding-right: 1vw;
    --thin-border: .1vmin;
    --games-bar-game-spacing: 1.4vmin;
    --games-bar-margin-top: .4vh;
    --games-bar-margin-bottom: 0vh;
    --games-bar-padding-left: 1vw;
    --games-bar-padding-right: 1vw;
    --games-bar-game-margin: .4vh;
    --games-bar-game-border-radius: .4vmin;
    --games-bar-game-padding: .3vmin;
    --games-bar-game-title-font-size: 1.5vh;
    --games-bar-game-data-font-size: 1.3vh;
    --games-bar-game-data-max-width: calc(var(--games-bar-game-title-font-size)*10);
    --games-bar-game-height: calc((var(--games-bar-game-title-font-size) + var(--games-bar-game-data-font-size)*2)*var(--font2line) + var(--games-bar-game-padding)*2 + var(--thin-border)*2);
    --games-bar-game-height-total: calc(var(--games-bar-game-height) + 2*var(--games-bar-game-margin));
    --games-bar-height: calc(var(--games-bar-game-height-total) + 2*var(--thin-border));
    --games-bar-height-total: calc(var(--games-bar-height) + var(--games-bar-margin-top) + var(--games-bar-margin-bottom));
    --page-header-height: calc(var(--menu-bar-height-total) + var(--games-bar-height-total));
    --page-header-margin-top: 0vh;
    --page-header-margin-bottom: 0vh;
    --page-header-height-total: calc(var(--page-header-height) + var(--page-header-margin-top) + var(--page-header-margin-bottom));
    --arena-height: calc(var(--body-height) - var(--page-header-height-total));
    --arena-width: var(--body-width);
}

html {
    width: 100%;
    margin: 0;
    font-family: sans-serif;
    font-size: 1.6vmin;
}

body {
    width: 100%;
    margin: var(--body-margin-height) var(--body-margin-width) var(--body-margin-height) var(--body-margin-width);
    color: black;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.page {
    margin-left: auto;
    margin-right: auto;
}


.page .main {
    width: 100%;
}

.main > * {
    margin-left: auto;
    margin-right: auto;
}

.title-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2vmin;
    padding-bottom: 2vmin;
}

.page-title {
    display: inline;
    font-variant: small-caps;
    font-size: 3.2vmin;
    color: black;
    white-space: nowrap;
}

.page-title .game-type::after {
    content: "-";
}

.page-title .handle {
    text-transform: capitalize;
}

.header {
    background: #afa;
    width: 100%;
}

h3 {
    font-size: 2.0vmin;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: var(--menu-bar-height);
    background-color: #f9f9f9;
    box-shadow: 0vmin .8vmin 1.6vmin 0vmin rgba(0,0,0,0.2);
    padding: 1.2vmin 1.6vmin;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.in-block {
    padding-left: 3.2vmin;
}

.warning {
    color: red;
    border: var(--thin-border) solid red;
    font-style: italic;
    font-size: 1.6vmin;
    padding: 1.6vmin;
    margin: 1.6vmin;
}

table.light {
    border-collapse: collapse;
    padding: .2vmin;
}

table.light td, th {
    border: var(--thin-border) solid #a9a9a9;
    padding: .3vmin .7vmin .3vmin .7vmin;
}

.username {
    font-weight: bold;
}

.handle {
    font-weight: bold;
}

.game-type {
    font-variant: small-caps;
    text-transform: capitalize;
}

.game-name {
    font-variant: small-caps;
    text-transform: uppercase;
}

.page-message {
    font-style: italic;
    font-size: 1.6vmin;
}

.response-error {
    display: block-inline;
    text-align: center;
    color: red;
    margin-top: 1.6vmin;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------ */
/* page-header */

.page-header {
    height: var(--page-header-height);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* row-reverse puts on same row; column puts games below, */
    /* giving room for more games */
    flex-direction: column;
    margin: var(--page-header-margin-top) 0 var(--page-header-margin-bottom) 0;
    color: #444;
}

/* ------------------------------------------------------------ */
/* menu-bar */

.menu-bar {
    height: var(--menu-bar-height);
    display: flex;
    flex-direction: row-reverse;
    padding-left: var(--menu-bar-padding-left);
    padding-right: var(--menu-bar-padding-right);
}

.menu-bar > * {
    margin-left: var(--menu-bar-spacing);
}

a.menu-bar-item {
    font-variant: small-caps;
    font-size: var(--menu-bar-font-size);
}

.menu-bar-text {
    font-variant: small-caps;
    font-size: var(--menu-bar-font-size);
    white-space: nowrap;
}

.menu-bar-item.active > .menu-bar-text {
    text-decoration: underline;
}

.menu-bar-item:hover > .menu-bar-text {
    text-decoration: underline;
}

.menu-account {
    text-transform: capitalize;
    font-weight: bold;
}

.menu-new-game {
}

.menu-bar-new-game-list {
    display: flex;
    flex-direction: column;
}

.new-game-item {
    display: block;
}

/* ------------------------------------------------------------ */
/* login page */

.login-page .main {
    width: max-content;
    margin: auto;
}

.login-area {
    padding-top: 1.6vmin;
    padding-left: 3.2vmin;
}

.login-area input[type="submit"] {
    margin: 1.6vmin;
    border-radius: .5vmin;
    padding: .5vmin;
    font-size: 1.6vmin;
    white-space: nowrap;
}

.login-area input[type="submit"]:hover {
    background: gray;
    box-shadow: .5vmin 4vmin -1vmin rgba(0,0,0,0.57);
    transition: all 0.2s ease 0s;
}

/* ------------------------------------------------------------ */
/* account page */

.account-page .main {
    width: max-content;
    margin: auto;
}

/* ------------------------------------------------------------ */
/* herd page */

.game-herd {
}

.game-herd-summary-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: solid var(--thin-border) #ccc;
    padding-bottom: 2vmin;
}

.game-link-area {
    font-size: 1.6vmin;
}

.game-link-area .game-link-label {
    color: gray;
}

.game-link-area .game-link {
    color: black;
    font-family: monospace;
}

.game-status-area {
    display: block;
    font-size: 1.9vmin;
    padding-top: 1.6vmin;
}

.user-status-area {
    display: block;
    font-size: 1.9vmin;
    padding-top: 1vmin;
}

.user-status-area .person-status {
    font-weight: bold;
}

.game-status-area .message.people-count {
    font-style: italic;
    font-size: 1.6vmin;
}

.control-actions-area {
    margin-top: 2vmin;
    display: flex;
    justify-content: center;
}

.herd-actions-area {
    margin-top: 1vmin;
    display: flex;
    justify-content: center;
}

.herd-area {
    margin-left: 3.2vmin;
    margin-right: 3.2vmin;
    padding: 1.6vmin;
    background: #f4f4f4;
    border-radius: .7vmin;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
}

.action {
    margin: .1vmin .3vmin .1vmin .3vmin;
    font-size: 1.6vmin;
    white-space: nowrap;
    background: none;
    padding: .3vmin;
    border-radius: .3vmin;
}

.control-actions-area .action {
    font-size: 2vmin;
    padding: .2vmin;
    border: solid var(--thin-border) #ccc;
}

.herd-actions-area .action {
    font-size: 1.6vmin;
    padding: .2vmin;
    border: solid var(--thin-border) #ccc;
}

.control-actions-area .control-action-start {
     color: green;
}

/* .control-action-join:not([disabled]) { */
/*     color: green; */
/* } */

.control-actions-area .control-action-cancel {
     color: red;
}

/* .control-action-complete:not([disabled]) { */
/*     color: red; */
/* } */

.game-link {
    text-decoration: none;
    color: black;
    font-size: 1.6vmin;
    white-space: nowrap;
}

.player-list-area {
    display: block;
    text-align: center;
}

.player-list-container {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
    background: white;
}

#player-list td.name {
    text-align: left;
}

#player-list td.actions {
    text-align: center;
}

#invitations > * {
    margin-top: .7vmin;
}

.game-parameters {
    display: inline-block;
    width: 100%;
}

.param {
    display: block;
    width: 100%;
    padding: .7vmin;
}

.game-parameters .param-desc {
    font-size: 1.6vmin;
}

.game-parameters label.param-desc {
    margin-right: 1.6vmin;
}

.param[paramtype=player_order] > * {
    vertical-align: middle;
}

.player-order {
    display: inline-block;
    position: relative;
    width: 200vmin;
    height: 200vmin;
    border: var(--thin-border) solid #888;
    border-radius: .7vmin;
    background: #efc;
    margin: .7vmin;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
}

.player-slot {
    min-width: 8vmin;
    padding: .3vmin;
    font-weight: bold;
    border: solid var(--thin-border) gray;
    border-radius: .3vmin;
    background: white;
    text-align: center;
}

.game-parameters:not([readonly]) .player-slot:hover {
    background: yellow;
}

.player-order .player-slot {
    position: absolute;
}

.player-order[numslots="4"] .player-slot[slot="0"] {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.player-order[numslots="4"] .player-slot[slot="1"] {
    left: 2%;
    top: 50%;
    transform: translateY(-50%);
}

.player-order[numslots="4"] .player-slot[slot="2"] {
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.player-order[numslots="4"] .player-slot[slot="3"] {
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

.param[paramtype=player_teams] > * {
    vertical-align: top;
}

.param[paramtype=player_teams] table {
    padding-left: .5vmin;
    padding-right: .5vmin;
    border: var(--thin-border) solid #ccc;
    background: white;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
}

.player-teams {
    display: inline-flex;
    flex-direction: column;
}

.player-team {
    min-height: 2.4vmin;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .3vmin;
    margin: .5vmin;
    background: #eee;
    border: var(--thin-border) solid #ccc;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
}

.player-team[mx="1"] {
    min-width: 10vmin;
}

.player-team[mx="2"] {
    min-width: 19vmin;
}

.player-team[mx="3"] {
    min-width: 28vmin;
}

.player-team[mx="4"] {
    min-width: 37vmin;
}

.player-team[mx="5"] {
    min-width: 46vmin;
}

.player-team[mx="6"] {
    min-width: 55vmin;
}

.player-team[mx="7"] {
    min-width: 64vmin;
}


.player-team label {
    min-width: 5vmin;
    margin-right: .5vmin;
}

.player-team .player-slot {
    overflow-x: hidden;
    margin-left: .2vmin;
    margin-right: .2vmin;
}

/* ------------------------------------------------------------ */
/* games page */

.games-list-area {
    width: max-content;
    margin-top: 3.2vmin;
    margin-left: auto;
    margin-right: auto;
}

.games-list-container {
    display: inline-block;
    box-shadow: .4vmin .4vmin .3vmin rgba(0,0,0,0.2);
    background: white;
}

table#games .game-type::after {
    content: "-";
}

table#games td.game-host {
    text-align: center;
}

table#games td.game-status {
    text-align: center;
}

table#games td.user-status {
    text-align: center;
}

table#games td.actions {
    /* text-align: center; */
}

table#games td.game-players {
    max-width: 20vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------ */
/* games bar */

.games-bar {
    /* height: var(--games-bar-height); */
    /* box-sizing: border-box; */
    flex-grow: 1;
    /* display: flex; */
    /* flex-direction: row; */
    margin: var(--games-bar-margin-top) 0 var(--games-bar-margin-bottom) 0;
    padding-left: var(--games-bar-padding-left);
    padding-right: var(--games-bar-padding-right);
    border-top: solid var(--thin-border) #ccc;
    border-bottom: solid var(--thin-border) #ccc;
}

.games-bar > *:nth-child(n+2) {
    margin-left: var(--games-bar-game-spacing);
}

.games-bar-game {
    height: var(--games-bar-game-height);
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: var(--games-bar-game-padding);
    margin-top: var(--games-bar-game-margin);
    margin-bottom: var(--games-bar-game-margin);
    border: solid var(--thin-border) #ccc;
    border-radius: var(--games-bar-game-border-radius);
    background: white; /* for animation */
}

.games-bar-game.active {
    border-color: solid black;
    box-shadow: 0 0 var(--games-bar-game-margin) var(--games-bar-game-margin) rgba(0,0,0,0.2);
}

.games-bar-game .menu-bar-text {
    max-width: var(--games-bar-game-data-max-width);
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

@keyframes menu-bar-your-turn {
    from { }
    /* 50%  { transform: scale(1.2); background: #ff0; } */
    /* 100%  { background: #ff8 } */
    50%  { transform: scale(1.1);; }
    100%  { }
}

.games-bar-game[active-state="turn"] {
    animation: menu-bar-your-turn .3s ease forwards;
}

.games-bar-game .menu-bar-text {
    font-size: var(--games-bar-game-title-font-size);
    white-space: nowrap;
}

.games-bar-game .game-type::after {
    content: "-";
}

.games-bar-game .game-data {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: var(--games-bar-game-data-font-size);
}

.game-data > * {
    max-width: var(--games-bar-game-data-max-width);
    overflow: hidden;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
}

.games-bar-game[active-state="turn"] .user-status {
    background: #ff0;
}

.games-bar-game[user-state="invited"] .user-status {
    background: #ff0;
}

/* ------------------------------------------------------------ */
/* play page */

.play-arena {
    width: var(--arena-width);
    height: var(--arena-height);
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
}