html,body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  height:100%;
  overflow:hidden;
  color:#000;
  background-color:#093d21;
  font-size:14px;
  box-sizing:border-box
}

.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:2px
}

.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;
  font-size:10px
}

.balance-value{
  display:flex;
  align-items:center;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  padding:0 2px;
  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,.9)
}

.top-button>*{
  width:6px;
  height:16px
}

.game-title {
  font-size:3em;
  font-weight:bold;
  color:#cc6633;
}
.game-area-results{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
  padding:0
}

.game-area-results>svg{
  height:74px
}

.game-area-value{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:30px;
  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
}

.contentForm{
  display:flex;
  flex-direction:column;
  position:relative;
  width:100%;
  z-index:1
}

.exit{
  display:flex;
  flex-direction:row
}

.bets{
  display:flex;
  align-items:center;
  flex-direction:row;
  overflow:hidden;
  flex:1;
  margin-left:5px
}

.bets .entry{
  display:block;
  padding:2px 4px;
  border-radius:4px;
  margin-right:4px;
  font-size:10px;
  color:#fff
}

.bets .entry.right{
  background:#f18901
}

.bets .entry.left{
  background:#1b9501
}

.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%;
  margin-bottom:2px;
}

.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:0 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;
  border-radius:2px;
  height:100%;
  box-sizing:border-box;
  background-color:#555;
  padding-left:5px
}

.stake-input>input{
  height:100%;
  box-sizing:border-box;
  min-width:0;
  display:inline-block;
  text-align:center;
  appearance:none;
  outline:none;
  border:0;
  background-color:#555;
  font-size:12px;
  color:#fff;
  width:5ch
}

.stake-buttons{
  flex:1;
  display:flex;
  flex-direction:row;
  border-radius:2px;
  height:100%;
  box-sizing:border-box;
  padding:3px;
  margin:0 2px
}

.stake-buttons>button{
  flex:1;
  height:100%!important;
  margin:0;
  padding:0;
  text-align:center;
  cursor:pointer;
  border:0;
  border-radius:2px;
  appearance:none;
  outline:none;
  font-size:12px;
  color:#fff;
  background:#0000
}

.stake-buttons:nth-of-type(1){
  background:#1b9501
}

.stake-buttons:nth-of-type(2){
  background:#f18901
}

/* .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-visual. This game 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-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.game-visual svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}