/* PSARI King of the Wild — HUD layout / legibility correction.
   Presentation only: no symbol, RNG, payout, or game state changes.
   All values continue to be supplied by the existing data-* rendering code. */
:root {
  --psari-hud-font: Arial, Helvetica, sans-serif;
  --psari-title-font: Georgia, 'Times New Roman', serif;
  --psari-cream: #fff0c4;
  --psari-gold: #ffda7c;
}
.development-ribbon {
  font-family: var(--psari-hud-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.35px;
  line-height: 1.15;
}
.bottom-notice {
  font-family: var(--psari-hud-font);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .045em;
}
.bottom-notice [data-credit-equation] {
  font-family: var(--psari-hud-font);
  font-size: 11px;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
}
.psari-pot-hud .psari-pot-heading b {
  font-size: 14px;
  line-height: 1.12;
  letter-spacing: .045em;
}
.psari-pot-hud .psari-pot-heading small {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}
.psari-pot-tier {font-size: 12px;line-height: 1.15;letter-spacing: 0}
.psari-pot-tier b {font-size: 12px}
.psari-pot-pot small {font-size: 12px;line-height: 1.1}
@media(min-width:901px) {
  .desktop-stage>.left-console {
    left: 22px;
    width: 468px;
    padding: 10px 13px;
    gap: 13px;
    justify-content: flex-start;
    min-width: 0;
  }
  .desktop-stage .left-actions {
    gap: 6px;
    flex: none;
    align-items: center;
  }
  .desktop-stage .hud-round {
    width: 53px;
    height: 53px;
    flex: 0 0 53px;
    border-width: 2px;
    font: 800 24px/1 var(--psari-hud-font);
  }
  .desktop-stage .hud-history {font: 900 20px/1 var(--psari-title-font)}
  .desktop-stage .credit-readout {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    font-family: var(--psari-hud-font);
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: 0;
    text-shadow: 0 1px 3px #1b0808;
    overflow: visible;
  }
  .desktop-stage .credit-readout span {
    display: grid;
    grid-template-columns: minmax(0,1fr) max-content;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--psari-gold);
    font: 800 18px/1.15 var(--psari-hud-font);
  }
  .desktop-stage .credit-readout b {
    color: var(--psari-cream);
    font: 900 22px/1.05 var(--psari-hud-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    white-space: nowrap;
    min-width: 0;
  }
  .desktop-stage>.status-pendant {
    top: 708px;
    height: 215px;
    width: 653px;
    padding: 11px 24px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    overflow: hidden;
  }
  .desktop-stage .status-pendant .status-overline {
    flex: none;
    margin: 1px 0 0;
    font: 800 12px/1.18 var(--psari-hud-font);
    letter-spacing: .16em;
    color: #f9d68f;
    white-space: nowrap;
  }
  .desktop-stage .status-pendant .win-title {
    flex: none;
    margin: 0;
    font: 900 37px/1.07 var(--psari-title-font);
    letter-spacing: .015em;
    max-width: 98%;
    white-space: nowrap;
  }
  .desktop-stage .status-pendant .win-value {
    flex: none;
    margin: 0;
    font: 900 55px/1 var(--psari-title-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: .015em;
    white-space: nowrap;
    color: #fff2c0;
  }
  .desktop-stage .status-pendant .status-message {
    flex: none;
    min-height: 15px;
    max-width: 94%;
    margin: 0;
    font: 700 12px/1.25 var(--psari-hud-font);
    letter-spacing: .025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff0d7;
  }
  .desktop-stage .status-pendant .psari-credit-details {
    flex: none;
    min-height: 13px;
    margin: 0;
    font: 800 11px/1.2 var(--psari-hud-font);
    letter-spacing: .025em;
    white-space: nowrap;
    color: #ffd884;
  }
  .desktop-stage .status-pendant .psari-results-strip {
    flex: none;
    width: 94%;
    min-height: 46px;
    margin: auto 0 0;
    padding: 5px 9px;
    gap: 0;
    border: 1px solid #da9b51a0;
    border-radius: 8px;
  }
  .desktop-stage .psari-results-strip>div {
    gap: 3px;
    padding: 0 6px;
    justify-content: center;
  }
  .desktop-stage .psari-results-strip span {
    font: 800 10px/1 var(--psari-hud-font);
    letter-spacing: .06em;
    color: #edc58d;
  }
  .desktop-stage .psari-results-strip b {
    font: 900 19px/1 var(--psari-title-font);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: var(--psari-cream);
  }
  .desktop-stage>.desktop-bet-note {display:none}
}
@media(max-width:900px) {
  /* Fix the 801–900px tablet breakpoint, where the mobile pots were hidden. */
  .desktop-stage>.psari-pot-hud{display:none!important}
  .mobile-game>.psari-pot-hud{display:block!important}
  .mobile-win {
    padding: 14px 12px 12px;
  }
  .mobile-win [data-status] {
    font: 800 11px/1.25 var(--psari-hud-font);
    letter-spacing: .11em;
  }
  .mobile-win [data-winlabel] {
    font: 900 clamp(23px,6vw,31px)/1.12 var(--psari-title-font);
    letter-spacing: .02em;
  }
  .mobile-win [data-lastwin] {
    font: 900 clamp(35px,9vw,48px)/1.1 var(--psari-title-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
  .mobile-win [data-message] {
    font: 700 11px/1.35 var(--psari-hud-font);
    letter-spacing: 0;
    white-space: normal;
    margin: 4px auto;
    overflow-wrap: anywhere;
  }
  .mobile-win [data-credit-details] {
    font: 800 10px/1.3 var(--psari-hud-font);
    letter-spacing: .015em;
    overflow-wrap: anywhere;
  }
  .mobile-win .psari-results-strip {width:100%;margin-top:10px;gap:0;padding:9px 2px}
  .mobile-win .psari-results-strip>div {gap:5px;padding:0 2px}
  .mobile-win .psari-results-strip span {font:800 8px/1.2 var(--psari-hud-font);letter-spacing:.02em}
  .mobile-win .psari-results-strip b {font:900 clamp(12px,3.8vw,17px)/1.1 var(--psari-title-font);font-variant-numeric:tabular-nums}
  .mobile-metrics>div {min-width:0}
  .mobile-metrics strong {font:900 clamp(13px,4vw,19px)/1.2 var(--psari-hud-font);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}
  .mobile-game>.psari-pot-hud .psari-pot-heading b {font-size:12px}
  .mobile-game>.psari-pot-hud .psari-pot-heading small {font-size:8px}
  .mobile-game>.psari-pot-hud .psari-pot-tier {font-size:10px}
  .mobile-game>.psari-pot-hud .psari-pot-pot small {font-size:11px}
}
@media(max-width:380px) {
  .mobile-game>.psari-pot-hud .psari-pot-heading {align-items:flex-start}
  .mobile-game>.psari-pot-hud .psari-pot-heading small {max-width:45%;text-align:right}
  .mobile-metrics strong {font-size:13px}
}

/* Replace unsupported special-character button glyphs with crisp scalable icons. */
.left-actions .hud-round{display:grid;place-items:center}
.left-actions .hud-round svg{width:27px;height:27px;display:block;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;filter:drop-shadow(0 0 3px #9c5a23)}
.mobile-links button{display:flex;align-items:center;justify-content:center;gap:4px}
.mobile-links svg{width:14px;height:14px;display:block;flex:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}