body {background:url("./img/fon.jpg")}

.hidden {display: none !important;}

game-map table {border: 3px solid darkslateblue; border-collapse: collapse; width:100%; table-layout: fixed;}
game-map table td { border: 1px solid silver; width: 20%; padding: 0;}

game-room {display: block; height: 100%; position: relative;}
game-room .fon {height: auto; width: 100%;}
game-room .fon.close  {position: absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 10;}

game-room .el {background-color: #1c0201; position: absolute;width: 25%; height: 25%; border: 1px  solid #555;
                display: flex; justify-content: center; align-items: center; }
game-room .el svg {max-width: 80%; max-height: 80%; height: auto; width: auto;}

game-room .portal {bottom: 0; left: 0; z-index: 1;  border-bottom:none; border-left:none; border-radius: 0 15px 0 0;}
game-room .live {top: 0; left: 0; z-index: 20; border-top:none; border-left:none; border-radius: 0 0 15px 0;}
game-room .box {bottom: 0; right: 0; z-index: 1; border-bottom:none; border-right:none; border-radius: 15px 0 0 0; }
game-room .box.horizontal {background:linear-gradient(to right,#666 0%, #1c0201 50%, #666 100%); }
game-room .box.vertical {background:linear-gradient(#666 0%, #1c0201 50%, #666 100%);}
game-room .web {top: 0; right: 0; z-index: 20; border-top:none; border-right:none; border-radius: 0 0 0 15px ;}
game-room .web b {position: absolute; color: #fff; text-shadow: #000 2px 2px 2px, #000 -2px -2px 2px; font-size: 20px;}
game-room .web.red path {fill:#ff1111}

game-room .chip {position: absolute; bottom: 20%; right: 35%; width: 30%; height: 30%; z-index: 30;}

game-party {display: flex; justify-content: center;}
game-party .preRight {width: 64px; display: flex; flex-direction: column; justify-content: space-between;}
game-party .right {display: flex;  min-width: 250px; flex-direction: column;}
game-party .right .control { padding:10px;}
game-party .right .keys {display: grid; grid-template-columns:1fr 1fr 1fr; grid-gap: 8px;}
.keys .key {background-color: #1c0201; border-radius: 10px; border: 1px solid silver; padding: 5px; height: 30px;}
.keys .key svg {height: 30px;width: 100%; fill:#f9dc5c; cursor: pointer; opacity: 0.8;}
.keys .key:hover  svg {opacity: 1;}
.keys .key:active svg {fill:#ff1111}
.keys .key.active svg {fill:#ff111199}
.keys .key.end {grid-column: 1/4;}

.status {display: flex;align-items: center;}
.photo {width: 160px; height: 260px; outline:1px solid silver; }

game-party .right .flex {flex:1; margin: 0 10px 10px 10px;border:1px solid silver;outline:1px solid #f9dc5c;}
game-party .right .chat { height: 300px;  background: #40443b;padding: 0 10px; font-size: 90%;   width: 208px;
    overflow-y: scroll; scrollbar-width: thin; scrollbar-color:  #f9dc5c #1c0201; font-family: "PT Sans", "Arial", sans-serif; }
game-party .right .chat p {margin: 3px 0; color:gold; opacity: .7; font-size: 12px;}
game-party .right .chat p b {opacity: .9; font-weight: 900; font-size: 14px;}
game-party .right .chat p:first-child { font-size: 14px; opacity: 1;}

dragon-scale {margin: 10px; border: 1px solid silver; padding: 5px; background-color: #1c0201; border-radius: 10px;}
dragon-scale svg { fill: silver;}

.preRight .box {margin: 10px; border: 1px solid silver; padding: 5px; background-color: #1c0201; border-radius: 10px; flex:1}

.glass {position: absolute; top:0; left: 0; width: 100%; height: 100%; background:url("./img/fon.jpg"); z-index: 100;
    display: flex; justify-content: center; align-items: center; }
.glass .popup {border:1px solid silver;outline:1px solid #f9dc5c;padding: 10px;background-color: #1c0201; max-width: 90vh;
    color: #f9dc5c; font-size: 24px;}
.glass .popup .btn {border-radius: 10px; border: 1px solid silver; padding: 5px; cursor: pointer; text-align: center; color: #ff1111;}
.glass .popup img {max-height: 90vh;}
.glass .popup .legend {text-align: justify; text-indent: 50px;}