body, html { width: 100%; height: 100%; margin: 0; padding:0; }
body { background: black; color: white; }

/*
#opponents { position: fixed; right: 5px; top: 5px; width: calc(100% - 250px);}
#game-status { position: absolute; top:5px; left: 0; }
.main-pill-bottle { position: fixed; top:15px; left: 15px; }
*/

@media only screen and (min-width: 512px) {
    body { padding: 15px; margin: 8px; width: 512px; margin: auto; height: calc( 100% - 30px );}
    #opponents { width: 25%;}
}

select, input { border-radius: 10px; padding: 2px 6px; }

#game-grid { width: 100%; height:100%; position: relative; touch-action: manipulation; }
#game-status { display: inline-block; width: 25%; position:absolute; top:15px; }
#main { display: inline-block; width: 50%; margin-left: 25%; position:absolute; }
#opponents { position:absolute; right:0; top:15px; width: 80px;}
#opponents .pill-bottle-root > h3 { margin:0; }

.cache-status { position: fixed; top:0; background-color: black; color: yellowgreen; padding:15px; z-index:2; }

#my-settings { display: inline-block; padding:5px; width:calc(100% - 10px); }
#multiplayer { display: inline-block; padding:5px; width:calc(100% - 10px); }

/*
#multi-rooms-table { border:1px solid white; border-collapse: collapse;}
#multi-rooms-table th, #multi-rooms-table td { border: 1px solid white; }

#multi-room-template { display: none; }

*/
#multiplayer .my-room { /*background-color: #4caf50;*/ border-color:greenyellow;}



#menu label { display: block; position:relative; margin-bottom:7px; line-height:35px; }
#menu label > span, #menu label input, #menu label select { float:right; }
#menu label::after { content: ""; clear: both; display: table; }

#menu label input { height: 28px; }
#menu label select { height: 36px; }

#menu fieldset { width: calc( 100% - 32px); }
#menu button, button { border-radius: 10px; margin-bottom: 7px; padding: 8px 10px; background-color: black; color: white; }
#menu label button { margin-bottom: 0; }

#menu .btn-group button { border-radius: 0;  }
#menu .btn-group button:first-child { border-radius: 10px 0 0 10px;  }
#menu .btn-group button:last-child { border-radius: 0 10px 10px 0;  }

#menu .btn-group .btn { border: 2px outset buttonface; }
#menu .btn-group .btn:first-child { border-radius: 10px 0 0 10px; }
#menu .btn-group .btn:last-child { border-radius: 0 10px 10px 0; }

#menu { position: relative; vertical-align: top; }

.room-template .readyness { float: right; }

.row { width: 100%; display:inline-block;}
.col-10 { width:calc( 83.3% - 2px ); display:inline-block; }
.col-8 { width:calc( 66.6% - 2px ); display:inline-block; }
.col-6 { width:calc( 50% - 2px ); display:inline-block; }
.col-2 { width:calc( 16.6% - 2px ); display:inline-block; }

#players button { text-align:left; }

#players { list-style-type: none; padding-left:0; }

#multiplayer .room-player-list {
    padding-left:0;
    list-style-type: none;
    width:100%;
}
#multiplayer .room-player-list .lvl { width: 6em; text-align:center; }
#multiplayer .room-player-list .kick { text-align: center; }
#multiplayer .room-player-list .player-name { text-align: left; }

.chat-box { height: 100px; overflow-y:auto; overflow-x:hidden; border: 0px solid gray; border-width:2px 0;}
.chat-form { position: relative; padding: 6px 0; }
.chat-input { width: calc( 100% - 60px ); }
.chat-form .chat-submit { position: absolute; top:0; right:0;}

.chat-box p { border: 1px solid blue; background-color:blue; color: white; border-radius: 0 10px 10px 0; padding: 2px 10px 2px 0; margin: 2px 15px 2px 0;}
.chat-box p.my-chat { border-color: yellowgreen; background-color: hsla(120, 50%, 50%, 1); color: white; border-radius: 10px 0 0 10px; padding: 2px 0 2px 10px; margin: 2px 0 2px 15px; }




/** Dr Mario **/

.pill-bottle-root { display: inline-block; position:relative; }
.pill-bottle-root .pill-bottle-status { font-size: 9px; }

.pill-bottle-root .pill-bottle-msg { position:absolute; top: 90px; left: 0; bottom: 16px; right: 64px; background-color:rgba(55,55,55,.5); font-weight: bold; line-height: 78px; text-align:center;}

.pill-bottle-root.pill-bottle-preview > h3 { width: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  font-size: .75em; }

#opponents .pill-bottle-root .pill-bottle-msg { top:110px; }
/*.dr-mario .pill-bottle-root canvas.pill-bottle-canvas { border: 1px solid gainsboro; display: inline-block; }*/

/* Tap Controller */
.game-in-progress .tap-controller,
.tap-controller.shown { display: block; position: fixed; top:0; left:0; bottom:0; right:0; }
.tap-controller { display:none; user-select: none; -o-user-select:none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; touch-action: manipulation; }

.tap-controller .zone { border: 2px solid limegreen; color: limegreen; position: absolute; display: block; background-color: rgba(55,55,55,.5); touch-action: manipulation;}

.game-in-progress .tap-controller .zone { opacity:.25; background-color: transparent; }

#overlay { position: absolute; top:0; left: 0; display: table; background-color: rgba(55,55,55,.5); width: 100%; height: 100%; z-index:10; }
#overlay > div { display: table-cell; vertical-align: middle; color: greenyellow; text-align: center; }

.current { background-color: gainsboro; color: black; }
.stats-table { width:100%; border-collapse: collapse}

.stats-table td, .stats-table th { border-width: 1px 0; }

.stats-table thead tr th { border: 1px dotted white; border-top-width: 0; }
.stats-table thead tr th:first-child {border-left:0;}
.stats-table thead tr th:last-child {border-right:0;}
.stats-table thead tr:last-child th { border-width: 0 0 3px; border-bottom-style: double; }
.stats-table tfoot td { border-top: 3px double white; }
.stats-table .num { width:75px; }
.stats-table tr:nth-child(2n) { background-color: rgba(55,55,55,.5); }

#overlay .after-game-stats .winner { background-color: rgba(185,242,185,.75); color: rgb(32,24,28); }
#overlay .after-game-stats { background-color: rgba(55,55,55,.5); color: white; }