/* Saloon game chrome. Gameplay artwork, scene geometry and state styling stay
   with each game's stylesheet. Load after game CSS and before fonts.css. */

.screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
  .crazy-screen, .crash-screen, .blackjack-screen, .fruit-screen,
  .tower-screen, .online-room-screen) {
  --sg-ivory: #f0e3ca;
  --sg-sand: #b9a78e;
  --sg-brass: #b99862;
  --sg-edge: rgba(185, 152, 98, .28);
  --sg-panel: linear-gradient(145deg, rgba(43, 35, 27, .76), rgba(33, 27, 21, .7));
  --sg-field: rgba(24, 21, 17, .68);
}

/* Headings have a common rhythm without changing the play area's width. */
.screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
  .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sg-edge);
}

.screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
  .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head h1,
.fruit-screen .fs-heading h1,
.tower-screen .tw-heading h1 {
  margin-top: 9px;
  margin-bottom: 10px;
  color: var(--sg-ivory);
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 0 2px 12px #100c0870;
}

.screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
  .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head .eyebrow,
.fruit-screen > .fs-heading .fs-kicker,
.tower-screen > .tw-heading .tw-kicker {
  color: var(--sg-brass);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .13em;
}

.screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
  .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head > p,
.fruit-screen > .fs-status,
.tower-screen > .tw-status {
  color: var(--sg-sand);
  font-size: 12px;
  line-height: 1.65;
}

.fruit-screen > .fs-status,
.tower-screen > .tw-status {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sg-edge);
  margin-bottom: 18px;
}

.wheel-history,
.dice-history-panel,
.double-history-panel,
.dream-history-panel,
.crazy-history-panel,
.crash-history-panel,
.bj-history-panel,
.fs-history-panel,
.tw-history-section {
  padding: 16px;
  border: 1px solid var(--sg-edge);
  border-radius: 12px;
  background: var(--sg-panel);
  box-shadow: inset 0 1px #f6ddb208, 0 5px 18px #0d09051a;
}

.wheel-history,
.dice-history-panel,
.double-history-panel,
.dream-history-panel,
.crazy-history-panel,
.crash-history-panel {
  margin-bottom: 18px;
}

.bj-history-panel,
.fs-history-panel,
.tw-history-section {
  margin-top: 20px;
}

.wheel-history > h2,
.dice-panel-heading h2,
.crash-panel-heading h2,
.bj-panel-heading h2,
.fs-panel-title h2,
.tw-history-section > h2,
.wheel-bets-title,
.dice-bets-title,
.double-bets-heading h2,
.dream-bets-heading h2,
.crazy-bets-heading h2 {
  color: var(--sg-ivory);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: .01em;
}

.tw-history-section > h2 {
  margin: 0 0 12px;
}

.wheel-history-strip,
.dice-history-strip,
.double-history-strip,
.dream-history-strip,
.crazy-history-strip,
.crash-history,
.fs-history,
.tw-history {
  scrollbar-color: #70583a transparent;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.wheel-history-strip > span:not(.wheel-history-result),
.dice-history-strip > span:not(.dice-history-result),
.double-history-strip > span:not(.double-history-result),
.dream-history-strip > span:not(.dream-history-result),
.crazy-history-strip > span:not(.crazy-history-result),
.crash-empty,
.bj-history-empty,
.fs-history > .fs-muted,
.tw-history > p {
  color: var(--sg-sand);
  font-size: 12px;
  line-height: 1.6;
}

.wheel-history-result,
.dice-history-result,
.double-history-result,
.dream-history-result,
.crazy-history-result,
.crash-history-chip {
  font-variant-numeric: tabular-nums;
}

/* Warm translucent fills keep betting controls readable over the saloon. */
.wheel-balance-row,
.dice-balance-row,
.crash-balance-row,
.bj-balance-row {
  gap: 12px;
  color: var(--sg-sand);
  font-size: 13px;
}

.wheel-balance-row > strong,
.dice-balance-row > strong {
  border-color: var(--sg-edge);
  border-radius: 8px;
  background: rgba(33, 28, 21, .66);
  color: var(--sg-ivory);
  font-size: 14px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.crash-balance-row > span,
.bj-balance-row > span,
.fs-balance > span,
.tw-wallet > span {
  color: var(--sg-sand);
  font-size: 12px;
}

.crash-balance-row > strong,
.bj-balance-row > #blackjack-balance,
.fs-balance > strong,
.tw-wallet > strong {
  color: var(--sg-ivory);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.wheel-stake-entry input,
.dice-stake-entry input,
.crash-amount-wrap,
.bj-amount-wrap,
.tw-setup input {
  border: 1px solid rgba(185, 152, 98, .45);
  border-radius: 9px;
  background: var(--sg-field);
  color: var(--sg-ivory);
  box-shadow: inset 0 2px 5px #0003;
}

.wheel-stake-entry input,
.dice-stake-entry input {
  height: 50px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.crash-amount-wrap input,
.bj-amount-wrap input {
  height: 49px;
  color: var(--sg-ivory);
}

.wheel-stake-entry input::placeholder,
.dice-stake-entry input::placeholder {
  color: #a9987f;
}

.wheel-stake-entry input:focus,
.dice-stake-entry input:focus,
.crash-amount-wrap:focus-within,
.bj-amount-wrap:focus-within,
.tw-setup input:focus-visible {
  border-color: #d0ac70;
  box-shadow: 0 0 0 3px #c5a36b1a, inset 0 2px 5px #0003;
}

.wheel-stake-entry button,
.wheel-presets button,
.dice-stake-entry button,
.dice-presets button,
.crash-stake-entry > button,
.crash-presets button,
.bj-stake-entry > button,
.bj-presets button {
  min-height: 44px;
  border-radius: 9px;
  font-size: 14px;
}

.wheel-stake-entry button:not(:disabled),
.wheel-presets button:not(:disabled),
.dice-stake-entry button:not(:disabled),
.dice-presets button:not(:disabled),
.crash-stake-entry > button:not(:disabled),
.crash-presets button:not(:disabled),
.bj-stake-entry > button:not(:disabled),
.bj-presets button:not(:disabled),
.tw-setup fieldset button:not(:disabled):not([aria-pressed="true"]) {
  border-color: rgba(185, 152, 98, .42);
  background: linear-gradient(180deg, rgba(71, 54, 35, .62), rgba(45, 35, 25, .54));
  color: #e9c991;
  box-shadow: inset 0 1px #f4d49b1a, 0 2px 3px #100b071a;
}

.wheel-stake-entry button:not(:disabled):hover,
.wheel-presets button:not(:disabled):hover,
.dice-stake-entry button:not(:disabled):hover,
.dice-presets button:not(:disabled):hover,
.crash-stake-entry > button:not(:disabled):hover,
.crash-presets button:not(:disabled):hover,
.bj-stake-entry > button:not(:disabled):hover,
.bj-presets button:not(:disabled):hover,
.tw-setup fieldset button:not(:disabled):not([aria-pressed="true"]):hover {
  background: rgba(79, 60, 37, .76);
  border-color: #b99862;
}

.wheel-presets,
.dice-presets,
.crash-presets,
.bj-presets {
  gap: 8px;
}

.wheel-stake-hint,
.wheel-number-hint,
.wheel-note,
.dice-stake-hint,
.bj-bet-hint,
.tw-hint {
  color: var(--sg-sand);
  font-size: 11px;
  line-height: 1.65;
}

.wheel-bets-title,
.dice-bets-title {
  margin-top: 22px;
  margin-bottom: 12px;
}

.double-bets-heading,
.dream-bets-heading,
.crazy-bets-heading {
  margin: 24px 0 12px;
}

.double-bets-heading > span,
.dream-bets-heading > span,
.crazy-bets-heading > span {
  color: var(--sg-sand);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Outcome colors, selection outlines and locked states are game specific. */
.wheel-main-choices .wheel-choice,
.dice-choice,
.double-choice,
.dream-choice,
.crazy-choice {
  border-radius: 10px;
}

.wheel-main-choices .wheel-choice b {
  border-radius: 0 9px 9px 0;
}

.wheel-number-toggle {
  border-radius: 10px;
}

.wheel-number-grid .wheel-number {
  min-height: 42px;
  border-radius: 8px;
}

.dice-table {
  border-color: var(--sg-edge);
  border-radius: 12px;
  background: var(--sg-panel);
}

.crash-bet-panel,
.bj-bet-panel {
  padding: 18px;
  border: 1px solid var(--sg-edge);
  border-radius: 12px;
  background: var(--sg-panel);
  box-shadow: inset 0 1px #f6ddb208;
}

.crash-amount-label,
.bj-amount-label {
  color: var(--sg-sand);
}

.crash-auto-row {
  padding-top: 16px;
  padding-bottom: 16px;
}

.crash-auto-input {
  border-color: var(--sg-edge);
  border-radius: 8px;
  background: var(--sg-field);
}

.crash-auto-input input {
  height: 42px;
}

.crash-action,
.bj-deal,
.bj-play-button,
.tw-main-button {
  min-height: 52px;
  border-radius: 9px;
}

.crash-action:not(:disabled):not([data-action="cashout"]):not(.is-cashout),
.bj-deal:not(:disabled),
.tw-main-button:not(:disabled):not(.tw-cashout),
.fs-spin:not(:disabled) {
  background: linear-gradient(165deg, #e1c28a, #bb9153);
  border-color: #e5c990;
  color: #2e2114;
  box-shadow: inset 0 1px #fff0cc85, 0 3px 0 #644b2d;
}

.bj-bet-hint {
  margin-bottom: 0;
}

.bj-private-badge,
.tw-floor-count {
  border-color: var(--sg-edge);
  border-radius: 7px;
  background: rgba(36, 30, 23, .66);
  color: #d4bb90;
}

/* Fruit and Tower use their own compact control composition. */
.fs-controls,
.tw-controls {
  border-color: var(--sg-edge);
  border-radius: 12px;
  background: var(--sg-panel);
  box-shadow: inset 0 1px #f6ddb208;
}

.fs-balance,
.tw-wallet {
  border-bottom-color: var(--sg-edge);
}

.fs-balance {
  padding: 14px;
}

.fs-stake-row {
  padding: 14px;
  gap: 10px;
}

.fs-stake-row > label,
.tw-setup label,
.tw-setup legend {
  color: var(--sg-sand);
  font-size: 11px;
}

.fs-stake-adjust {
  flex-direction: column;
  gap: 5px;
}

.fs-stake-adjust button {
  width: 36px;
  height: 32px;
  border-radius: 8px;
}

.fs-stake-adjust button:not(:disabled) {
  background: rgba(56, 44, 32, .62);
  border-color: rgba(185, 152, 98, .42);
  color: #e9c991;
  box-shadow: inset 0 1px #f4d49b1a;
}

.fs-secondary-actions {
  border-top-color: var(--sg-edge);
}

.fs-secondary-actions > button {
  min-height: 56px;
  font-size: 12px;
}

.fs-secondary-actions > button:not(:disabled) {
  background: rgba(44, 37, 28, .54);
  color: var(--sg-ivory);
}

.fs-secondary-actions small {
  color: var(--sg-sand);
  font-size: 10px;
}

.tw-setup input {
  min-height: 47px;
}

.tw-setup fieldset button {
  height: 44px;
  border-radius: 7px;
}

.fs-history-item,
.tw-history article {
  border-radius: 8px;
}

.fs-history-item:not(.is-win),
.tw-history article {
  border-color: var(--sg-edge);
  background: #211d17;
}

.fs-history-item small,
.tw-history article,
.bj-history-item small,
.crash-wager-amount,
.crash-wager-result small {
  color: var(--sg-sand);
  font-size: 11px;
}

/* Shared live room ledger. Result colors and connection states are retained. */
.room-feed,
.crash-room-feed {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--sg-edge);
  border-radius: 12px;
  background: linear-gradient(145deg, #25251c, #1d1d16);
  box-shadow: inset 0 1px #dfd4b009;
}

.room-feed-heading {
  margin-bottom: 16px;
}

.room-feed-heading h2 {
  margin-top: 7px;
  margin-bottom: 6px;
  color: var(--sg-ivory);
  font-size: 21px;
  line-height: 1.2;
}

.room-feed-heading p,
.room-feed-empty {
  color: var(--sg-sand);
  font-size: 12px;
  line-height: 1.65;
}

.room-connection-state {
  border-color: var(--sg-edge);
  border-radius: 7px;
  background: #1d1c16;
  color: #c8b28a;
  font-size: 10px;
}

.room-wager-list {
  gap: 10px;
  padding: 0;
}

.room-player-card {
  padding: 13px;
  border-color: #a38d5e29;
  border-radius: 9px;
  background: linear-gradient(145deg, #2d2b20, #23221a);
  box-shadow: inset 0 1px #f0e2bd06;
}

.room-player-identity .room-wager-player,
.crash-wager-name {
  color: var(--sg-ivory);
  font-size: 13px;
}

.crash-wager-profile { display: flex; grid-column: 1 / span 2; align-items: center; gap: 9px; min-width: 0; }
.crash-wager-profile .crash-wager-avatar { flex: none; }
.player-vk-link { min-height: 44px; color: inherit; text-decoration: none; border-radius: 7px; touch-action: manipulation; }
.player-vk-link::after { content: 'VK'; flex: none; padding: 3px 4px; border: 1px solid #bd9b6260; border-radius: 4px; color: #cdb17b; font-size: 8px; line-height: 1; }
.player-vk-link:hover { background: #c1a16612; }
.player-vk-link:hover .room-wager-player,.player-vk-link:hover .crash-wager-name { color: #ffe1a2; }
.player-vk-link:focus-visible { outline: 2px solid #d6b374; outline-offset: 3px; }

.room-player-avatar,
.crash-wager-avatar {
  border-color: #997a4c;
  background: #393122;
  color: #e4c78f;
}

.room-player-total span {
  color: var(--sg-sand);
  font-size: 9px;
}

.room-player-total strong {
  font-size: 12px;
}

.room-player-bet {
  padding: 9px 10px;
  border-color: #aa986024;
  background: #17181366;
  font-size: 12px;
}

.room-player-bet .room-wager-amount {
  font-size: 12px;
}

.room-wager-selection {
  color: #d0c4ab;
}

.crash-wager,
.bj-history-item {
  padding-top: 13px;
  padding-bottom: 13px;
  border-bottom-color: var(--sg-edge);
}

.double-rules,
.dream-rules,
.lightning-rules,
.crazy-rules,
.crash-rules,
.bj-rules,
.fs-rules,
.tw-rules {
  margin-top: 22px;
  color: var(--sg-sand);
  border-top-color: var(--sg-edge);
  font-size: 12px;
  line-height: 1.7;
}

.double-rules > summary,
.dream-rules > summary,
.lightning-rules > summary,
.crazy-rules > summary,
.crash-rules > summary,
.bj-rules > summary,
.fs-rules > summary,
.tw-rules > summary {
  min-height: 36px;
  color: #ddc69f;
  font-size: 13px;
  line-height: 1.7;
}

/* Focus is limited to chrome controls, so scene interaction stays untouched. */
.wheel-stake-entry button:focus-visible,
.wheel-presets button:focus-visible,
.dice-stake-entry button:focus-visible,
.dice-presets button:focus-visible,
.crash-stake-entry > button:focus-visible,
.crash-presets button:focus-visible,
.crash-action:focus-visible,
.bj-stake-entry > button:focus-visible,
.bj-presets button:focus-visible,
.bj-deal:focus-visible,
.bj-play-button:focus-visible,
.tw-main-button:focus-visible,
.tw-setup button:focus-visible {
  outline: 2px solid #e5c990;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
    .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head {
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  .screen:is(.wheel-screen, .dice-screen, .double-screen, .dream-screen,
    .crazy-screen, .crash-screen, .blackjack-screen, .online-room-screen) > .sub-head h1,
  .fruit-screen .fs-heading h1,
  .tower-screen .tw-heading h1 {
    font-size: 30px;
  }

  .wheel-history,
  .dice-history-panel,
  .double-history-panel,
  .dream-history-panel,
  .crazy-history-panel,
  .crash-history-panel,
  .bj-history-panel,
  .fs-history-panel,
  .tw-history-section,
  .crash-bet-panel,
  .bj-bet-panel,
  .room-feed,
  .crash-room-feed {
    padding: 14px;
  }

  .room-feed-heading {
    flex-wrap: wrap;
    gap: 12px;
  }

  .room-feed-heading h2 {
    font-size: 19px;
  }

  .room-player-card {
    padding: 11px;
  }

  .wheel-stake-entry input,
  .dice-stake-entry input,
  .wheel-stake-entry button,
  .dice-stake-entry button {
    height: 48px;
  }

  .wheel-stake-entry button,
  .wheel-presets button,
  .dice-stake-entry button,
  .dice-presets button,
  .crash-presets button,
  .bj-presets button {
    font-size: 13px;
  }

  .fs-stake-row {
    padding: 12px;
    gap: 7px;
  }
}

@media (max-width: 360px) {
  .fruit-screen .fs-heading h1 {
    font-size: 27px;
  }

  .fs-stake-adjust button {
    width: 31px;
  }

  .fs-amount-wrap input {
    font-size: 20px;
  }

  .room-player-total strong,
  .room-player-bet .room-wager-amount {
    font-size: 11px;
  }
}