/* The lobby, with colours and panel heights copied from lobby.txt — the page
   above the game on the real server. Only the layout is reproduced: that file
   lists nineteen games and polls a site-wide chat, and this server holds one
   table and nobody to talk to.

   The real lobby sizes every panel from JavaScript in adjustElements(). Fixed
   positioning does the same thing here without a resize handler, which is the
   one place worth departing from it: there is nothing to learn from copying a
   workaround for a 2020 layout engine. */

html
{
   background-color: #eeeeee;
}

body
{
   margin: 0px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   overflow: hidden;
   user-select: none;
   color: #000000;
}

a
{
   color: #000000;
   text-decoration: none;
   cursor: pointer;
}

input, select
{
   font-family: inherit;
   font-size: 13px;
}

/* --- Panels --------------------------------------------------------------- */

#topPanel
{
   left: 0px;
   top: 0px;
   right: 0px;
   height: 32px;
   position: fixed;
   background-color: #c8c8c8;
   z-index: 2;
}

#nameTag
{
   right: 10px;
   top: 7px;
   position: absolute;
   font-size: 12px;
}

#MY_NAME
{
   width: 100px;
}

#REFRESH_BUTTON
{
   left: 10px;
   top: 4px;
   width: 190px;
   padding: 5px;
   position: absolute;
   background-color: #a8a8a8;
   font-size: 12px;
   text-align: center;
}

#REFRESH_BUTTON:hover
{
   background-color: #f0f0f0;
}

/* Beside REFRESH and the same size as it, which is his geometry for this
   button: 190px wide, 5px of padding, #a8a8a8 going white on hover. */
#ACHIEVEMENT_BUTTON
{
   left: 210px;
   top: 4px;
   width: 190px;
   padding: 5px;
   position: absolute;
   background-color: #a8a8a8;
   font-size: 12px;
   text-align: center;
}

#ACHIEVEMENT_BUTTON:hover
{
   background-color: #f0f0f0;
}

#mainPanel
{
   left: 0px;
   top: 32px;
   right: 0px;
   bottom: 64px;
   position: absolute;
   background-color: #e8e8e8;
   overflow-y: auto;
}

#columns
{
   left: 0px;
   top: 0px;
   right: 0px;
   height: 30px;
   position: sticky;
   background-color: #e8e8e8;
   font-weight: bold;
   font-size: 13px;
   z-index: 1;
}

#columns span, .gameRow span
{
   top: 8px;
   position: absolute;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.colGame    { left: 10px;  width: 130px; }
.colName    { left: 150px; width: 230px; }
.colCreated { left: 390px; width: 290px; }
.colStatus  { left: 690px; width: 90px; }
.colPlayers { left: 790px; right: 10px; }

.gameRow
{
   left: 0px;
   right: 0px;
   height: 30px;
   position: relative;
   display: block;
   background-color: #dbdbdb;
   font-size: 14px;
}

.gameRow:nth-child(even)
{
   background-color: #d5d5d5;
}

.gameRow:hover
{
   background-color: #f0f0f0;
}

.gameRow.selected, .gameRow.selected:hover
{
   background-color: #ffffff;
}

#gameList .empty
{
   padding-top: 40px;
   text-align: center;
   color: #666666;
}

/* Status colours are the real lobby's: green open, blue active, red closed. */
/* Grey words rather than a padlock: the game's whole look is flat text, and
   the lobby already parses the flag off all.cgi's sixth field. Without it the
   only way to find out a game is locked is to click JOIN and be surprised by
   a password box. */
.locked       { color: #888888; font-size: 11px; padding-left: 6px; }

.statusOpen   { color: #00c000; font-weight: bold; }
.statusActive { color: #0080ff; font-weight: bold; }
.statusClosed { color: #e00000; font-weight: bold; }

#bottomPanel
{
   left: 0px;
   right: 0px;
   bottom: 0px;
   height: 64px;
   position: fixed;
   background-color: #c8c8c8;
   z-index: 2;
}

#hint
{
   left: 12px;
   top: 24px;
   position: absolute;
   font-size: 12px;
   color: #444444;
}

#JOIN_BUTTON, #HOST_BUTTON
{
   top: 10px;
   width: 225px;
   padding: 10px;
   position: absolute;
   background-color: #b8b8b8;
   font-size: 16px;
   text-align: center;
}

#JOIN_BUTTON { right: 265px; }
#HOST_BUTTON { right: 10px; }

#JOIN_BUTTON:hover, #HOST_BUTTON:hover
{
   background-color: #f0f0f0;
}

/* The reference client's disabled treatment: the same element at a quarter
   opacity, with the hover taken away so it does not look live. */
.dim, .dim:hover
{
   opacity: 0.25;
   background-color: #b8b8b8;
   cursor: default;
}

/* --- Host panel ----------------------------------------------------------- */

#pageDim
{
   left: 0px;
   top: 0px;
   right: 0px;
   bottom: 0px;
   position: fixed;
   background-color: #000000;
   opacity: 0.5;
   display: none;
   z-index: 3;
}

#hostPanel
{
   left: 50%;
   top: 50%;
   width: 500px;
   height: 400px;
   margin-left: -250px;
   margin-top: -200px;
   position: fixed;
   background-color: #e0e0e0;
   display: none;
   z-index: 4;
}

#hostHead
{
   left: 0px;
   top: 12px;
   right: 0px;
   position: absolute;
   text-align: center;
   font-size: 14px;
}

#hostList
{
   left: 10px;
   top: 40px;
   width: 480px;
   height: 60px;
   position: absolute;
   background-color: #f0f0f0;
   overflow-y: auto;
}

.typeRow
{
   display: block;
   padding: 8px 10px;
   background-color: #d0d0d0;
}

.typeRow:hover
{
   background-color: #e8e8e8;
}

.typeRow.selected, .typeRow.selected:hover
{
   background-color: #ffffff;
}

#hostForm
{
   left: 10px;
   top: 116px;
   width: 480px;
   position: absolute;
   font-size: 13px;
}

#hostForm label
{
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 260px;
   margin-bottom: 10px;
}

#hostForm input, #hostForm select
{
   width: 140px;
}

.hostNote
{
   margin: 14px 0px 0px 0px;
   width: 460px;
   font-size: 12px;
   line-height: 1.5;
   color: #555555;
}

#CANCEL_BUTTON, #HOST_GAME
{
   bottom: 10px;
   width: 215px;
   padding: 10px;
   position: absolute;
   background-color: #d0d0d0;
   text-align: center;
}

#CANCEL_BUTTON { left: 10px; }
#HOST_GAME { right: 10px; }

#CANCEL_BUTTON:hover, #HOST_GAME:hover
{
   background-color: #f0f0f0;
}

/* --- Errors --------------------------------------------------------------- */

#errorPanel
{
   right: 10px;
   bottom: 74px;
   width: 256px;
   padding: 10px;
   position: fixed;
   background-color: #ffffff;
   border-top-left-radius: 8px;
   display: none;
   z-index: 5;
}

#errorHeader
{
   display: block;
   font-size: 16px;
   margin-bottom: 4px;
}

#errorText
{
   display: block;
   font-size: 12px;
   color: #444444;
}

/* --- Achievement tracker --------------------------------------------------- */

/* Inset rather than centred on a fixed size: fifty-four rows do not fit a
   500px dialog, and the iPad this has to work on is 1024x768. The list scrolls
   and nothing here is measured in JavaScript, which is the same departure from
   lobby.txt that the note at the top of this file makes about adjustElements. */
#achievementPanel
{
   left: 20px;
   top: 52px;
   right: 20px;
   bottom: 84px;
   position: fixed;
   background-color: #e0e0e0;
   display: none;
   z-index: 4;
}

#achievementHead
{
   left: 0px;
   top: 12px;
   right: 0px;
   position: absolute;
   text-align: center;
   font-size: 14px;
}

#achievementCount
{
   left: 0px;
   top: 34px;
   right: 0px;
   position: absolute;
   text-align: center;
   font-size: 12px;
   color: #444444;
}

#achievementList
{
   left: 10px;
   top: 58px;
   right: 10px;
   bottom: 60px;
   position: absolute;
   background-color: #f8f8f8;
   overflow-y: auto;
   font-size: 13px;
}

.achRow
{
   padding: 4px 10px;
   line-height: 1.4;
}

/* The game's own panel greens an earned achievement and greys an unearned one;
   these are the same two colours. */
.achGot
{
   color: #00a000;
}

.achUnknown
{
   color: #808080;
}

.achWhat
{
   margin-left: 10px;
   color: #444444;
}

#ACHIEVEMENT_CLOSE
{
   left: 50%;
   bottom: 14px;
   width: 180px;
   margin-left: -100px;
   padding: 10px;
   position: absolute;
   background-color: #b8b8b8;
   text-align: center;
}

#ACHIEVEMENT_CLOSE:hover
{
   background-color: #f0f0f0;
}