/* SSP Society — production layout refinements shared by the three games. */
html { min-width: 0; }
body { min-width: 0; overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #9fffd3; outline-offset: 3px; }

/* DOUBLE: prefer one usable desktop viewport instead of tall empty padding. */
.double-page header.ssp-has-xp { gap: 14px; padding-inline: clamp(12px, 3vw, 50px); }
.double-page header.ssp-has-xp > a { white-space: nowrap; }
.double-page header.ssp-has-xp > div:first-of-type { flex: 1 1 170px; min-width: 0; }
.double-page .wallet { min-width: 0; flex: 0 1 auto; }
.double-page .wallet b { font-size: clamp(13px, 1.05vw, 20px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.double-page main { margin-top: 14px; margin-bottom: 24px; }
.double-page .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 15px; min-height: 76px; padding-bottom: 12px; }
.double-page .round { min-width: 0; }
.double-page .round b { margin-top: 7px; overflow-wrap: anywhere; }
.double-page .timer { min-width: 105px; }
.double-page .timer strong { font-size: clamp(35px, 3.5vw, 53px); }
.double-page .timer span { font-size: 9px; }
.double-page .wheel-shell { height: 124px; margin: 14px 0 11px; border-radius: 16px; }
.double-page .cell { height: 89px; font-size: 1.75rem; }
.double-page .history { margin-bottom: 12px; gap: 10px; }
.double-page .history div { gap: 4px; }
.double-page .history i { width: 26px; height: 26px; font-size: 10px; }
.double-page .bet-layout { gap: 12px; }
.double-page .controls, .double-page .bet-layout > aside { padding: 14px; border-radius: 14px; min-width: 0; }
.double-page .amount { align-items: center; }
.double-page .amount > div { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; }
.double-page .amount input { width: min(230px, 100%); padding: 8px 10px; font-size: 15px; }
.double-page .amount button { margin: 8px 2px 0; padding: 8px 9px; min-width: 35px; }
.double-page .colors { margin-top: 12px; gap: 9px; }
.double-page .colors button { height: 78px; border-radius: 10px; }
.double-page .colors b { font-size: 1.65rem; }
.double-page .colors small { font-size: 9px; }
.double-page .controls p { margin-top: 10px; min-height: 16px; font-size: 12px; line-height: 1.35; }
.double-page aside > div { min-height: 70px; }
.double-page aside h2 { margin-bottom: 10px; }
.double-page .community { gap: 10px; margin-top: 13px; }
.double-page .community article { min-height: 130px; max-height: 180px; padding: 12px; overflow: auto; scrollbar-width: thin; }
.double-page .community h3 { margin-bottom: 7px; }
.double-page .community .bet-row { gap: 8px; min-width: 0; font-size: 11px; }
.double-page .community .bet-row span { min-width: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.double-page .community .bet-row b { overflow-wrap: anywhere; text-align: right; }
.double-page .double-rankings { height: clamp(315px, calc(100dvh - 145px), 510px); }
.double-page .double-rankings .double-sidebar-total strong { font-size: clamp(16px, 1.3vw, 22px); }
.double-page .double-participant > strong { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.double-page .double-rules { margin: 12px 0 0; font-size: 12px; }
.double-page .double-rules > summary { padding: 7px 0; color: #b3bfd1; }
.double-page .double-rules[open] { background: #11151d; border-radius: 12px; padding: 12px; }
.double-page .double-rules .fairness-detail { max-width: 100%; padding: 9px 4px 12px; border-bottom: 1px solid #ffffff15; text-align: left; }
.double-page .double-rules .fairness-detail code { max-width: min(100%, 670px); display: block; overflow-wrap: anywhere; white-space: normal; }
.double-page .double-rules .fairness-detail button { margin-top: 7px; }
.double-page .double-rules .info { margin-top: 10px; }
.double-page #verify { max-height: 82dvh; overflow: auto; }

/* The lobby's balance/XP rankings should never overflow when balances grow. */
.lobby .game-grid, .lobby .game-card, .lobby .global-rank { min-width: 0; }
.lobby .global-rank { overflow: hidden; }
.lobby .global-rank .rank-entry { min-width: 0; }
.lobby .global-rank .rank-player { min-width: 0; }
.lobby .global-rank .rank-player > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby .global-rank .rank-metric { text-align: right; font-size: clamp(10px, .83vw, 13px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lobby .account { min-width: 0; }
.lobby .account b { font-size: clamp(11px, 1vw, 15px); overflow-wrap: anywhere; }

/* Fortune: the shared seven-figure wallet and large awards stay inside the machine. */
.fortune-page .controls > *, .fortune-page .metric, .fortune-page .bet { min-width: 0; }
.fortune-page .metric strong, .fortune-page .bet strong { display: block; font-size: clamp(13px, 1.25vw, 20px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fortune-page .win-flash strong, .fortune-page #winAmount { font-size: clamp(25px, 6vw, 72px); max-width: 100%; overflow-wrap: anywhere; }
.fortune-page .stage-title h1 { font-size: clamp(32px, 4.3vw, 51px); }
.fortune-page .machine-top h2 { font-size: clamp(25px, 3vw, 45px); }
.fortune-page .machine-top, .fortune-page .feature-strip { min-width: 0; }
.fortune-page .feature-strip span { min-width: 0; overflow-wrap: anywhere; }

/* Olympus: preserve the 6x5 board, but shrink fixed-size columns before clipping. */
.olympus-page main, .olympus-page .game-shell, .olympus-page .board, .olympus-page .grid { min-width: 0; max-width: 100%; }
.olympus-page .controls > *, .olympus-page .controls .bet { min-width: 0; }
.olympus-page #balance, .olympus-page #personalBest, .olympus-page #bet, .olympus-page #sideBet { font-size: clamp(12px, 1.3vw, 22px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.olympus-page .ranking li { min-width: 0; }
.olympus-page .ranking li span, .olympus-page .ranking li b { min-width: 0; overflow-wrap: anywhere; }
.olympus-page .win-toast strong, .olympus-page #preludeCounter, .olympus-page #drainValue { font-size: clamp(24px, 5vw, 56px); max-width: 96vw; overflow-wrap: anywhere; }

@media (min-width: 1150px) and (max-height: 830px) {
  .double-page main { margin-top: 10px; }
  .double-page .hero { min-height: 61px; }
  .double-page .wheel-shell { height: 108px; margin: 9px 0; }
  .double-page .cell { height: 80px; }
  .double-page .community article { max-height: 130px; min-height: 115px; }
  .double-page .colors button { height: 70px; }
  .double-page .double-rankings { max-height: 470px; }
}

@media (max-width: 1100px) {
  .double-page .double-rankings { height: clamp(260px, 44dvh, 390px); }
  .double-page main { width: min(980px, 96vw); }
  .olympus-page .game-shell { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; overflow: clip; }
  .olympus-page .game-shell:before { inset: 0; }
  .olympus-page .offer { display: none; }
  .olympus-page .mascot { grid-column: 1; grid-row: 1; min-height: 140px; max-height: 166px; border-radius: 16px 16px 0 0; overflow: hidden; }
  .olympus-page .mascot img { height: 160px; width: min(58%,380px); left: 0; right: auto; object-fit: contain; }
  .olympus-page .game-mark { right: 18px; left: auto; top: 20px; }
  .olympus-page .speech { left: auto; right: 12px; top: 90px; bottom: auto; max-width: 50%; }
  .olympus-page .board { grid-column: 1; grid-row: 2; min-height: 0; }
  .olympus-page .ranking { grid-column: 1; grid-row: 3; min-height: 0; border-radius: 0 0 16px 16px; }
}

@media (max-width: 760px) {
  .double-page header.ssp-has-xp { padding: 8px 12px; gap: 8px; }
  .double-page header.ssp-has-xp > div:first-of-type { flex: 1 0 42%; }
  .double-page header small { font-size: 8px; }
  .double-page .wallet b { font-size: clamp(12px, 3.7vw, 16px); }
  .double-page main { width: min(100% - 20px, 620px); margin-top: 9px; padding-right: 0; }
  .double-page .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .double-page .hero .round b { font-size: 11px; }
  .double-page .hero .timer { min-width: 91px; }
  .double-page .timer strong { font-size: 38px; }
  .double-page .wheel-shell { height: 109px; margin: 11px 0; }
  .double-page .cell { height: 81px; }
  .double-page .history { margin-bottom: 12px; gap: 7px; }
  .double-page .history > small { max-width: 62px; line-height: 1.4; }
  .double-page .history i { flex-shrink: 0; width: 24px; height: 24px; }
  .double-page .amount { display: flex; flex-wrap: wrap; }
  .double-page .amount > label, .double-page .amount input { width: 100%; }
  .double-page .amount > div { width: 100%; justify-content: space-between; }
  .double-page .bet-layout { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .double-page .colors { gap: 6px; }
  .double-page .colors button { height: 85px; min-width: 0; }
  .double-page .colors span { font-size: 10px; }
  .double-page .colors b { font-size: 26px; }
  .double-page .community { grid-template-columns: 1fr; }
  .double-page .community article { min-height: 83px; max-height: 158px; }
  .double-page .double-rankings { position: static; width: 100%; margin-top: 12px; height: clamp(255px, 42dvh, 350px); }
  .double-page aside > div { min-height: 0; }
  .lobby .global-rank { max-width: 100%; }
  .lobby .global-rank .rank-metric { font-size: 12px; }
  .fortune-page .controls { gap: 11px; padding: 12px; }
  .fortune-page .controls .metric strong { font-size: clamp(12px,3.1vw,17px); }
  .fortune-page .win-flash strong { font-size: clamp(28px,8vw,56px); }
  .olympus-page main { padding-inline: 6px; }
  .olympus-page .game-shell { width: 100%; }
  .olympus-page .board { max-width: 100%; min-width: 0; }
  .olympus-page .grid { min-width: 0; padding-inline: 4px; }
  .olympus-page .controls { min-width: 0; }
  .olympus-page #balance, .olympus-page #personalBest { font-size: clamp(12px,3vw,17px); }
}

@media (max-width: 375px) {
  .double-page .amount button { padding: 7px; min-width: 31px; }
  .double-page .history i { width: 22px; height: 22px; }
  .double-page .double-rankings { padding: 11px; }
  .fortune-page .stage-title h1 { font-size: 31px; }
  .fortune-page .controls { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; padding-inline: 9px; }
  .fortune-page .bet > div { gap: 3px; justify-content: flex-start; }
  .fortune-page .bet button { width: 27px; height: 27px; font-size: 19px; flex: 0 0 27px; }
  .fortune-page .bet strong { min-width: 0; font-size: 12px; }
  .fortune-page .metric strong { font-size: clamp(10px, 3.4vw, 14px); }
  .fortune-page .machine-footer { flex-wrap: wrap; gap: 5px; }
  .olympus-page .grid { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .double-page .hero:after { transition: none; }
}