/* Live utility controls sit in the blank recesses of the illustrated stone console. */
.reference-stage .reference-utilities {
  position:absolute;
  left:59.689%;
  top:64.930925%;
  right:auto;
  bottom:auto;
  display:block;
  width:35.885167%;
  height:auto;
  min-width:0;
  min-height:0;
  max-width:none;
  aspect-ratio:3/1;
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  z-index:3;
  isolation:isolate;
  pointer-events:none;
}
.brick-console-art {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.reference-stage .reference-utilities .bet-actions {
  position:absolute;
  left:12.35%;
  right:12.15%;
  top:44%;
  bottom:auto;
  width:auto;
  height:20%;
  min-height:28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:4.7%;
  margin:0;
  padding:0;
  transform:translateY(-50%);
  z-index:1;
  pointer-events:auto;
}
.reference-stage .reference-utilities .bet-actions button {
  position:relative;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.24cqw;
  flex:none;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0 3%;
  border:0;
  border-radius:3px;
  background:transparent;
  box-shadow:none;
  color:#ffe8b3;
  font:400 clamp(12px,1.136364cqw,19px)/1 var(--game-font);
  letter-spacing:0;
  text-shadow:0 1px 2px #080b05,0 0 5px #111204;
  white-space:nowrap;
  pointer-events:auto;
}
.reference-stage .reference-utilities .bet-actions button span {
  position:static;
  display:block;
  margin:0;
  padding:0;
  color:inherit;
  font:400 clamp(9px,.807416cqw,14px)/1.15 var(--game-font);
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
.reference-stage .reference-utilities .bet-actions button:not(:disabled):hover {
  background:#ffed9e12;
  box-shadow:inset 0 0 12px #ffe9a215;
  filter:brightness(1.16);
}
.reference-stage .reference-utilities .bet-actions button:not(:disabled):active {
  transform:translateY(1px);
}
.reference-stage .reference-utilities .bet-actions button:focus-visible {
  outline:2px solid #fff0b7;
  outline-offset:-3px;
}
.reference-stage .reference-utilities .bet-actions button:disabled {
  opacity:.48;
  color:#c7b28b;
  filter:none;
}
.reference-stage .reference-utilities .total-meter {
  position:absolute;
  inset:auto;
  left:16%;
  right:16%;
  top:58%;
  bottom:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:8%;
  width:auto;
  height:15%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
  z-index:1;
  pointer-events:none;
}
.reference-stage .reference-utilities .console-readout {
  display:grid;
  grid-template-columns:37% minmax(0,1fr);
  align-items:center;
  gap:4%;
  min-width:0;
  height:100%;
  padding:0 3%;
}
.reference-stage .reference-utilities .console-readout > span {
  position:static;
  display:block;
  inset:auto;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  background:none;
  color:#e7cda1;
  font:400 clamp(7px,.55cqw,10px)/1.15 var(--game-font);
  letter-spacing:.015em;
  white-space:nowrap;
}
.reference-stage .reference-utilities .total-meter .console-readout strong {
  position:static;
  display:block;
  inset:auto;
  width:100%;
  height:auto;
  min-width:0;
  margin:0;
  padding:0;
  color:#fff0c0;
  font:400 clamp(9px,min(1.15cqw,calc(9cqw / var(--console-amount-length,4))),22px)/1 var(--game-font);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  text-align:right;
  text-shadow:0 1px 3px #050a03;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:auto;
  cursor:default;
}
.reference-stage .reference-utilities .console-readout.is-long-amount {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:1px;
}
.reference-stage .reference-utilities .console-readout.is-long-amount > span {
  text-align:center;
  font-size:clamp(5.5px,.42cqw,8px);
  line-height:1;
}
.reference-stage .reference-utilities .total-meter .console-readout.is-long-amount strong {
  text-align:center;
  font-size:clamp(9px,min(.96cqw,calc(15cqw / var(--console-amount-length,11))),18px);
}
.reference-stage .reference-utilities #available { display:none; }

@media (min-width:901px) {
  .reference-stage .spin-area { top:52.391073%; }
}

@media (max-width:900px) and (orientation:portrait) {
  .reference-stage #main-scene {
    grid-template-rows:clamp(145px,41vw,215px) auto 126px auto;
  }
  .reference-stage .reference-utilities {
    position:relative;
    inset:auto;
    display:block;
    grid-column:1/-1;
    grid-row:4;
    justify-self:center;
    align-self:center;
    width:min(100%,600px);
    height:auto;
    max-width:600px;
    margin:27px auto 2px;
    aspect-ratio:3/1;
  }
  .reference-stage .reference-utilities .bet-actions {
    top:44%;
    height:20%;
    min-height:32px;
    transform:translateY(-50%);
    gap:4.7%;
  }
  .reference-stage .reference-utilities .bet-actions button {
    min-height:32px;
    padding:0 2%;
    gap:2px;
    font-size:clamp(11px,3vw,18px);
  }
  .reference-stage .reference-utilities .bet-actions button span {
    font-size:clamp(7.5px,2.35vw,13px);
    letter-spacing:0;
  }
  .reference-stage .reference-utilities .total-meter {
    left:16%;
    right:16%;
    top:58%;
    height:15%;
    padding:0;
  }
  .reference-stage .reference-utilities .console-readout > span {
    font-size:clamp(6px,1.8vw,9px);
    letter-spacing:0;
  }
  .reference-stage .reference-utilities .total-meter .console-readout strong {
    font-size:clamp(7px,min(3.2vw,calc(78px / var(--console-amount-length,4))),15px);
  }
  .reference-stage .reference-utilities .console-readout.is-long-amount { gap:1px; }
  .reference-stage .reference-utilities .console-readout.is-long-amount > span { font-size:6px; }
  .reference-stage .reference-utilities .total-meter .console-readout.is-long-amount strong {
    font-size:clamp(7.5px,min(2.55vw,calc(38vw / var(--console-amount-length,11))),11px);
  }
  .reference-stage .console-controls { grid-template-rows:auto auto; }
  .reference-stage .console-controls .categories { grid-row:2; }
}

@media (max-width:360px) and (orientation:portrait) {
  .reference-stage #main-scene { grid-template-rows:140px auto 118px auto; }
}