.error{
    background:#ba1f38;
    color:#fff;
    width:100%;
    z-index:10000;
    }
    
    .top{
    display:flex;
    flex-direction:row;
    align-items:center;
    width:100%;
  }
    
    .top-logo{
      display:flex;
      flex-direction:row;
      justify-content:flex-start;
      align-items:center;
      padding-left:1px;
      }
    
      .top-title{
        display:flex;
        flex-direction:row;
        justify-content:space-around;
        flex:1;
        align-items:center
        }
      
      .top-controls{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:flex-end;
      flex:1;
      }
    
    .top-controls>*{
    margin-left:4px
    }
    
    .balance{
    display:flex;
    flex-direction:row;
    border-radius:4px;
    border: 1px black solid;
    height:24px;
    box-sizing:border-box;
    background:#000;
    font-size:10px
    }
    
    .balance-label{
    padding:0px 1px;
    display:flex;
    align-items:center;
    color:#fff
    }
    
    .balance-value{
    display:flex;
    align-items:center;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    padding:0px 2px;
    background:#fff;
    color:#000;
    font-weight:bold
    }
    
    .balance-value .currency{
    color:#797d88;
    font-weight:normal
    }
    
    .top-button{
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    width:24px;
    height:24px;
    cursor:pointer;
    box-sizing:border-box;
    color:#fff;
    }
    
    .top-button:hover,.top-button:active,.top-button:focus{
    background:rgba(0,0,0,0.9)
    }
    
    .top-button>*{
    width:6px;
    height:16px
    }
    
    .info-page{
    font-family:'Noto Sans', sans-serif;
    padding:0 8px 16px;
    margin-top:24px
    }
    
    
    
    .info-page p{
    margin:0 0 8px;
    font-size:14px
    }
    
    .info-page div{
    margin-bottom:16px
    }
    
  html,body{
    margin:0;
    padding:0;
    font-family:'Noto Sans', sans-serif;
    height:100%;
    overflow:hidden;
    color:#000;
    background-color:#746863;
    font-size:14px;
    box-sizing: border-box;
    }
  
    
    .wrapper{
    display:flex;
    flex-direction:column;
      height: 100vh;
      justify-content: center;
      align-items: center;
      position:relative;
  
    }
    
    .game-area{
  
    display:flex;
    flex-direction:column;
    position:relative
    }
    
    .game-area-content{
      padding-left:5px;
      padding-right: 5px;
    }
    .game-area-results{
  
    display:flex;
    width:100%;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    z-index:+1;
    padding:0px;
    }
    
    .game-area-results>svg{
    height:74px
    }
    
    .game-area-value{
    display:flex;
    flex-direction: column;
    align-items: center;
      
    width:100%;
    }
     .game-area-value h1{
    margin:0;
    font-size:14px;
    font-weight:bold;
    color:#000
    }
  
    
    .game-area-value-row {
      display:flex;
      flex-direction: column;
      align-items: center;
      flex:1;
    }
    .game-area-value-info {
      display:flex;
      flex-direction: column;
      align-items: flex-start;
     
    }
    .game-area-value-icon {
      width:40px;
      padding: 0px 10px;
    }
  
    .game-area-results .payout{
    display:flex;
    flex-direction:row;
    text-align:right;
    padding:8px 24px;
    border-radius:8px;
    margin-top:8px;
    width:100%;
    background-color:#fff
    }
    .contentForm {
        display:flex;
        flex-direction:column;
        position:relative;
        padding-top: 3px;
        width:100%;
        z-index:+1;
    }
  

    
    
    .history{
    display:flex;
    flex-direction:row;
    color:#fff;
    background:#000}
  
    .bets{
    display:flex;
    align-items:center;
    flex-direction: row;
    overflow:hidden;
    margin-left:5px;}
    
    .bets .no-bets{
    color:rgba(255,255,255,0.57);
    font-size:10px;
    font-style:italic}
    
    .bets .entry{
    display:block;
    padding:2px 4px;
    border-radius:4px;
    margin-right:4px;
    font-size:10px;
    color:#fff}
    

    
   
    .payoutrow{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#000;
    background:#fff}
    
    .payout-calculation{
    display:flex;
    flex-direction:row;
    align-items:center;
    background-color: #fff;
    border-width:0px;
    padding:0px 0;
    font-size:14px}
    
    .payout-calculation>span{
    flex:1;
    color:rgba(0,0,0,0.57)}
    
    
    .payout-calculation .button{
    display:flex;
    flex-direction:row;
    align-items:center;
    border-radius:4px;
    border:0;
    cursor:pointer;
    background:#fff;
    color:#000}
    
    .payout-calculation .button>div{
    display:flex;
    align-items:center}
    
    .payout-calculation .button span{
    font-weight:bold;
    font-size:14px}
    
    .payout-calculation .button svg{
    width:21px;
    height:21px;
    margin-right:4px;
    fill:#000}
    
    .input-group{
    border-radius:0px;
    display:flex;
    flex-direction:row;
    height:35px;
    position:relative;
    overflow:hidden;
    border:1px solid #000}
    
    .input-group>*{
    flex:1}
    
    .input{
    display:flex;
    flex-direction:row;
    align-items:flex-end}
    
    .input .label{
    position:absolute;
    top:0;
    left:1px;
    color:#797d88;
    font-size:10px}
    
    .input .labelWhite{
        position:absolute;
        top:0;
        left:4px;
        color:#fff;
        font-size:10px}
    
   
  
    
    .stake-button{
    margin:3px;
    border:0;
    border-radius:4px;
    cursor:pointer;
    background:#000;
    color:#fff}
    
   
    .stake-button.selected{
    background:#efd68b;
    color:#000}
    
    input.align-right{
    text-align:right}
    
    
    .goal {
      width: 100%;
      height: 40px;
      position: relative;
      border-top: 2px solid black;
      border-left: 2px solid black;
      border-right: 2px solid black;
      box-sizing: border-box;
        
    }
    
  
      
      .goalkeeper {
        width: 4px;
        position: absolute;
        left: 30%;
        margin-left: -2px;
        z-index: +1;
        bottom: 0;
      }
      
  
        .controlsArea{
           border-top-left-radius:8px;
          border-top-right-radius:8px;
          background:#fff;
            margin-top:180px;
          }
          
          .controlsArea form{
          display:flex;
          flex-direction:column;
          margin:0}
          
        .control-settings {
          display:flex;
            flex-direction:row;
            align-items:center;
            background-color:#000;
        }
        
        .control-div {
          flex:1;
          display:flex;
            flex-direction:row;
            position:relative;
            box-sizing:border-box;
            align-items:center;
            background-color:#333;
            padding:2px;
              width:100%;
        }
        
        .goalyrow {
          width:100%;
          display:flex;
            flex-direction:column;
            box-sizing:border-box;
            padding:2px;
            background-color:#333;
        }
        
        .controls {
          width:100%;
          
          display:flex;
            flex-direction:column;
            box-sizing:border-box;
            background-color:#333;
        }
        .controls-labels {
        
            display:flex;
            flex-direction:row;
            align-items:center;
            font-size:10px;
            color: #fff;
            padding-left: 5px;
            padding-right: 5px;
        }
        .controls-labels label {
            flex:1;
            white-space:nowrap;
            text-overflow: clip;
            text-align:center;
            
        }
  
        .controls-labels label:first-of-type {
          flex:unset;
          width:40%;
        }
        
        .controls-stakerow {
          display: flex;
          align-items: center;
          background-color: #333;
        }
        .controls-controls {
            display:flex;
            flex-direction:row;
            align-items:center;
            background-color:#333;
            margin-bottom: 2px;
            flex:1;
        }
  
        .controls-footer {
          display:flex;
          flex-direction:row;
          align-items:flex-end;
          justify-content: flex-end;
          flex: 1;
        }
        .stake-input {
            display: flex;
            flex-direction: row;
            padding:1px;
            border-radius:2px;
            height:100%;
            box-sizing: border-box;
            background-color: #555;
            padding-left:5px;
            
        }
        .stake-input>button {
          display:block;
            width:18px;
            height:18px;
            border-radius:18px;
            cursor:pointer;
            border:0;
            appearance: none;
            outline:none;
            background-color: #333;
            color:#f18901;
        }
         .stake-input>input {
            height:100%;
            box-sizing: border-box;
            height:100%;
            min-width:0;
            display:inline-block;
            text-align:center;
            appearance: none;
            outline: none;
            border: 0;
            background-color: #555;
            font-size:12px;
            color:white;
              width: 10ch;
        }
  
      .stake-inputInput{
          width:4ch;
          }
        
        .stake-buttons {
         
          flex:1;
            display: flex;
            flex-direction: row;
            padding:1px;
          border-radius:2px;
            height:100%;
            box-sizing: border-box;
            background-color: #e8ce3c;
            padding:3px;
            margin-left:2px;
            margin-right: 2px;
        }
        
        .stake-buttons>button {
          flex:1;
            height:100%!important;
            margin:0;
            padding:0px;
            text-align:center;
            cursor:pointer;
            border:0;
            border-radius:2px;
            appearance: none;
            outline:none;
            font-size:12px;
            color:#fff;
            background: #746863;
        }

        .button-border:not(:empty) {
          transform: translateZ(0);}
  
        .CTA {
          display:flex;
            flex-direction:row;
            align-items:flex-start;
            box-sizing:border-box;
            flex:1;
            height:90px;
        
        }
        
        
        .CTA>button {
            flex:1;
            height:100%!important;
            width:46px;
            margin:0;
            padding:0;
            text-align: center;
            position:relative;
            cursor:pointer;
            border:0;
            appearance: none;
            outline:none;
            border-radius:2px;
            background-color: #f18901;
            color:#fff;
        }

        .slots{
            display:flex;
            flex-direction:row;
            align-items:center;
            margin: 0px;
            flex:1;
            border:2px;
            border-style: solid;
          }
    
          .slot-buttons {
           
              flex:1;
              display: flex;
              flex-direction: row;
              padding:1px;
              border-radius:2px;
              height:100%;
              box-sizing: border-box;
              background-color: #948772;
              padding:6px;
              margin:0px;
              border:2px;
              border-style: solid;
          }

          .slot-buttonsTop {
       
            flex:1;
            display: flex;
            flex-direction: row;
            padding:1px;
            border-radius:2px;
            height:100%;
            box-sizing: border-box;
            background-color: #948772;
            padding:6px;
            padding-top:0px;
            padding-bottom: 6px;
            margin:0px;
            border:2px;
            border-style: solid;
        }
    
        .slot-buttonsBottom {
           
          flex:1;
          display: flex;
          flex-direction: row;
          padding:1px;
          border-radius:2px;
          height:100%;
          box-sizing: border-box;
          background-color: #948772;
          padding:6px;
          padding-bottom:0px;
          padding-top: 6px;
          margin:0px;
          border:2px;
          border-style: solid;
      }
  
    .slot-buttons.winner {

        background-color: #dddd29;

    }
    /* .table-container is the whole screen's flex column. Each .rowN is a
       flex item sized by its own content (flex-shrink:0 — never manually
       given a pixel height, since that's a feature-phone-era table-layout
       habit that goes stale the moment any row's real content needs more
       space than assumed) EXCEPT .row3, which is `flex:1; min-height:0` —
       it's handed exactly whatever vertical space is left after the other
       rows claim what they actually need, computed by the browser every
       time, with no manual budget number to keep in sync. This replaced
       an earlier `<table>`/`<tr>`/`<th>` layout that required guessing a
       `calc(100vh - Npx)` budget for .game-area-content. Tusktails has no
       row5 — row4 (controls + info button) is the last row here. */
    .table-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      align-items: center;
      position:relative;
      width:100%;
      max-width: 800px;
      margin:auto;
      overflow: hidden;
    }

    .row1, .row2, .row4 {
      flex-shrink: 0;
      width: 100%;
    }

    .row3 {
      flex: 1;
      min-height: 0;
      width: 100%;
      padding: 16px;
      box-sizing: border-box;
    }

    /* Not flush against the bottom edge of the screen. */
    .row4 {
      padding-bottom: 12px;
      box-sizing: border-box;
    }

.game-area-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.game-area-contentImage {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slots {
  flex: 1;
  min-height: 0;
}

.slot-buttons svg,
.slot-buttonsTop svg,
.slot-buttonsBottom svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}