@import url("https://fonts.googleapis.com/css2?family=Righteous&family=Roboto+Mono:wght@400;500;600;700&display=swap");



:root {

  --radius-xs: 6px;

  --radius-sm: 10px;

  --radius-md: 12px;

  --radius-lg: 14px;

  --radius-pill: 999px;



  --c-bg: #ececf1;

  --c-surface: #ffffff;

  --c-text: #1a1a1a;

  --c-muted: #5c5c5c;



  --c-accent-red: #ff4757;

  --c-accent-green: #2ed573;

  --c-accent-orange: #ffa502;

  --c-accent-blue: #3742fa;



  --border-thick: 3px solid var(--c-text);

  --border-medium: 2px solid var(--c-text);



  --shadow-hard: 6px 6px 0 var(--c-text);

  --shadow-hard-sm: 4px 4px 0 var(--c-text);



  --font-head: "Righteous", cursive;

  --font-body: "Roboto Mono", ui-monospace, monospace;



  color-scheme: light;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: var(--font-body);

  font-weight: 400;

}



html {

  -webkit-text-size-adjust: 100%;

  height: 100%;

}



html.page-scroll-hidden {

  height: auto;

  min-height: 100%;

  min-height: 100dvh;

  scrollbar-width: none;

  -ms-overflow-style: none;

}



html.page-scroll-hidden::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

}



body {

  background: var(--c-bg);

  color: var(--c-text);

  min-height: 100dvh;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 20px 16px 32px;

}



body.page-scroll-hidden {

  scrollbar-width: none;

  -ms-overflow-style: none;

}



body.page-scroll-hidden::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

}



.app {

  width: 100%;

  max-width: 420px;

}



.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;

}



.profile-trigger {

  display: flex;

  align-items: center;

  gap: 12px;

  border: none;

  background: none;

  color: inherit;

  cursor: pointer;

  padding: 0;

  font: inherit;

}



.avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--c-accent-orange);

  border: var(--border-medium);

  box-shadow: var(--shadow-hard-sm);

  display: grid;

  place-items: center;

  font-size: 15px;

  font-weight: 600;

  font-family: var(--font-head);

  color: var(--c-text);

}



.profile-name {

  font-size: 16px;

  font-weight: 600;

}



.balance-pill {

  background: var(--c-surface);

  border: var(--border-medium);

  box-shadow: var(--shadow-hard-sm);

  padding: 8px 14px;

  border-radius: var(--radius-pill);

  font-size: 14px;

  display: inline-flex;

  align-items: baseline;

  gap: 4px;

  transition: transform 0.12s ease, box-shadow 0.12s ease;

}



.balance-prefix {

  color: var(--c-muted);

  font-weight: 500;

}



.balance-value {

  font-weight: 700;

  font-variant-numeric: tabular-nums;

}



.main {

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.card {

  background: var(--c-surface);

  border: var(--border-thick);

  border-radius: var(--radius-lg);

  padding: 22px;

  box-shadow: var(--shadow-hard);

}



.game-card {

  padding-bottom: 22px;

}



.win-block {

  text-align: center;

  margin-bottom: 18px;

}



.pw-value {

  font-family: var(--font-head);

  font-size: 40px;

  font-weight: 400;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.02em;

  color: var(--c-text);

  text-shadow: 3px 3px 0 rgba(26, 26, 26, 0.12);

}



.possible-chip {

  font-size: 11px;

  color: var(--c-text);

  background: var(--c-accent-orange);

  display: inline-block;

  padding: 5px 12px;

  border-radius: var(--radius-xs);

  margin-top: 10px;

  font-weight: 700;

  border: var(--border-medium);

  box-shadow: 3px 3px 0 var(--c-text);

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.inputs-row {

  display: flex;

  gap: 12px;

  margin-bottom: 14px;

}



.input-box {

  flex: 1;

  min-width: 0;

}



.input-label {

  display: block;

  font-size: 10px;

  color: var(--c-muted);

  margin-bottom: 6px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.input-shell {

  margin-top: 0;

  background: #f4f4f6;

  border: var(--border-medium);

  box-shadow: 3px 3px 0 var(--c-text);

  border-radius: var(--radius-sm);

  padding: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

}



.input-shell:not(.input-shell-chance) {

  padding-left: 12px;

}



.input-currency {

  color: var(--c-muted);

  font-size: 16px;

  font-weight: 700;

  flex-shrink: 0;

}



.input-shell-chance {

  position: relative;

  padding-right: 32px;

}



.input-shell input {

  width: 100%;

  min-width: 0;

  border: none;

  background: transparent;

  text-align: center;

  color: var(--c-text);

  font-size: 17px;

  outline: none;

  font-variant-numeric: tabular-nums;

  font-weight: 700;

}



.pct {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 13px;

  color: var(--c-muted);

  pointer-events: none;

  font-weight: 700;

}



.quick-row {

  display: flex;

  justify-content: space-between;

  margin-top: 8px;

  gap: 4px;

}



.quick-link {

  border: none;

  background: none;

  padding: 4px 2px;

  font-size: 11px;

  color: var(--c-accent-blue);

  cursor: pointer;

  font-family: inherit;

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 2px;

}



.slider-block {

  margin-bottom: 16px;

}



.slider-caption {

  font-size: 10px;

  color: var(--c-muted);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 10px;

  font-weight: 700;

}



.stake-track-wrap {

  position: relative;

  z-index: 1;

  height: 44px;

  margin-top: 4px;

  direction: ltr;

  touch-action: none;

  user-select: none;

  -webkit-user-select: none;

  cursor: grab;

  pointer-events: auto;

}



.stake-track-wrap:active {

  cursor: grabbing;

}



.stake-track-inner {

  position: absolute;

  left: 8px;

  right: 8px;

  top: 50%;

  transform: translateY(-50%);

  height: 10px;

  pointer-events: none;

}



.stake-track-bar {

  position: absolute;

  inset: 0;

  border-radius: var(--radius-pill);

  border: 2px solid var(--c-text);

  background: #d9d9e0;

  box-sizing: border-box;

}



.stake-win-zone {

  position: absolute;

  top: 2px;

  bottom: 2px;

  left: 2px;

  width: calc(50% - 4px);

  border-radius: var(--radius-pill);

  background: rgba(46, 213, 115, 0.45);

  transition:

    left 0.42s cubic-bezier(0.25, 0.82, 0.2, 1),

    width 0.42s cubic-bezier(0.25, 0.82, 0.2, 1);

}



.stake-boundary {

  position: absolute;

  top: -6px;

  bottom: -6px;

  width: 4px;

  margin-left: -2px;

  border-radius: 1px;

  background: var(--c-text);

  left: 50%;

  transition: left 0.42s cubic-bezier(0.25, 0.82, 0.2, 1);

  box-shadow: var(--shadow-hard-sm);

}



.stake-roll-marker {

  position: absolute;

  top: 50%;

  width: 16px;

  height: 16px;

  margin-left: -8px;

  margin-top: -8px;

  border-radius: 50%;

  background: var(--c-surface);

  border: var(--border-medium);

  left: 0%;

  opacity: 0;

  transform: scale(0.5);

  transition:

    left 0.42s cubic-bezier(0.22, 1, 0.36, 1),

    opacity 0.2s ease,

    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);

  box-shadow: 3px 3px 0 var(--c-text);

  pointer-events: none;

}



.stake-roll-marker.visible {

  opacity: 1;

  transform: scale(1);

}



.stake-roll-marker.land-pulse {

  animation: marker-pulse 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);

}



@keyframes marker-pulse {

  0% {

    transform: scale(1);

    box-shadow: 3px 3px 0 var(--c-text);

  }

  40% {

    transform: scale(1.18);

    box-shadow: 0 0 0 4px rgba(55, 66, 250, 0.35);

  }

  100% {

    transform: scale(1);

    box-shadow: 3px 3px 0 var(--c-text);

  }

}



.chance-range {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  width: 100%;

  height: 44px;

  margin: 0;

  opacity: 0;

  cursor: inherit;

  -webkit-appearance: none;

  appearance: none;

  z-index: -1;

  pointer-events: none !important;

  direction: ltr;

  visibility: hidden;

}



.chance-range::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 44px;

  height: 44px;

  cursor: grab;

}



.chance-range::-moz-range-thumb {

  width: 44px;

  height: 44px;

  border: none;

  border-radius: 50%;

  background: transparent;

  cursor: grab;

}



.number-block {

  text-align: center;

  margin: 14px 0 16px;

}



.roll-value {

  font-family: var(--font-head);

  font-size: 36px;

  font-weight: 400;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.02em;

  font-feature-settings: "tnum";

  color: var(--c-accent-blue);

  transition:

    opacity 0.08s cubic-bezier(0.25, 0.72, 0.25, 1),

    transform 0.09s cubic-bezier(0.25, 0.72, 0.25, 1);

  text-shadow: 3px 3px 0 rgba(55, 66, 250, 0.2);

}



.roll-value.tick-blur {

  opacity: 0.72;

}



.roll-value.roll-land {

  animation: roll-land-glow 0.45s ease-out;

}



@keyframes roll-land-glow {

  0% {

    color: var(--c-accent-blue);

    text-shadow: 3px 3px 0 rgba(55, 66, 250, 0.2);

    transform: scale(1);

  }

  35% {

    color: var(--c-accent-orange);

    text-shadow: 5px 5px 0 var(--c-text);

    transform: scale(1.06);

  }

  100% {

    color: var(--c-accent-blue);

    text-shadow: 3px 3px 0 rgba(55, 66, 250, 0.2);

    transform: scale(1);

  }

}



.roll-caption {

  font-size: 12px;

  color: var(--c-muted);

  margin-top: 6px;

  font-weight: 600;

}



.mult-row {

  display: flex;

  justify-content: center;

  gap: 36px;

  margin-top: 12px;

}



.mult-cell {

  text-align: center;

}



.mult-label {

  display: block;

  font-size: 10px;

  color: var(--c-muted);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-weight: 700;

}



.mult-num {

  font-size: 16px;

  font-weight: 700;

  font-variant-numeric: tabular-nums;

  color: #8a8a92;

}



.mult-cell.active .mult-num {

  color: var(--c-accent-blue);

}



.mult-cell.active .mult-label {

  color: var(--c-muted);

}



.game-actions {

  display: flex;

  gap: 12px;

  margin-bottom: 14px;

}



.game-btn {

  flex: 1;

  padding: 14px 10px;

  border: var(--border-thick);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-hard-sm);

  font-size: 16px;

  font-weight: 700;

  font-family: var(--font-head);

  cursor: pointer;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  text-decoration: none;

}



.game-btn:active:not(:disabled) {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}



.game-btn.less {

  background: var(--c-accent-blue);

  color: #fff;

}



.game-btn.more {

  background: var(--c-accent-green);

  color: var(--c-text);

}



.btn-hint {

  font-family: var(--font-body);

  font-size: 11px;

  font-weight: 600;

}



.game-btn:disabled {

  opacity: 0.4;

  cursor: not-allowed;

  transform: none;

}



.auto-row {

  display: flex;

  justify-content: center;

}



.auto-btn {

  border: var(--border-medium);

  background: var(--c-surface);

  color: var(--c-text);

  box-shadow: var(--shadow-hard-sm);

  padding: 10px 22px;

  border-radius: var(--radius-pill);

  font-size: 13px;

  font-weight: 700;

  cursor: pointer;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

  text-decoration: none;

  display: inline-block;

  box-sizing: border-box;

}



.auto-btn:active {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}



/* Game header: match balance pill height/typography (game-layout .header-right-stack) */

.header-right-stack > .auto-btn {

  padding: 8px 14px;

  font-size: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 1.15;

}



/* Native [hidden] loses to header .auto-btn display rule — enforce hide for Auto bet in Mines mode */

.header-right-stack > #btnAuto[hidden] {

  display: none !important;

}



.auto-btn.on {

  background: var(--c-accent-green);

  color: var(--c-text);

}



/* History: separate container, no visible scrollbar */

.history-container {

  padding: 16px 18px 14px;

}



.history-toolbar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 10px 14px;

  margin-bottom: 10px;

}



.history-heading {

  font-family: var(--font-head);

  font-size: 13px;

  color: var(--c-text);

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin: 0;

}



.history-tabs {

  display: flex;

  gap: 6px;

}



.history-tab {

  border: var(--border-medium);

  background: var(--c-surface);

  color: var(--c-muted);

  padding: 6px 12px;

  border-radius: var(--radius-pill);

  box-shadow: 3px 3px 0 var(--c-text);

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  cursor: pointer;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

}



.history-tab:active {

  transform: translate(1px, 1px);

  box-shadow: 2px 2px 0 var(--c-text);

}



.history-tab:hover {

  color: var(--c-text);

}



.history-tab--active,

.history-tab[aria-selected="true"] {

  background: var(--c-accent-orange);

  color: var(--c-text);

}



.history-scroll {

  max-height: 200px;

  overflow-y: auto;

  overscroll-behavior: contain;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

}



.history-scroll::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

}



.history-list {

  list-style: none;

}



.history-item {

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 6px 14px;

  align-items: center;

  font-size: 13px;

  padding: 10px 4px;

}



.history-item + .history-item {

  border-top: 2px dashed rgba(26, 26, 26, 0.2);

}



.h-name {

  font-weight: 700;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.h-meta {

  grid-column: 1 / -1;

  font-size: 11px;

  color: var(--c-muted);

  font-weight: 500;

}



.h-bet {

  font-variant-numeric: tabular-nums;

  color: var(--c-muted);

  text-align: right;

  font-weight: 600;

}



.h-result {

  font-weight: 800;

  font-variant-numeric: tabular-nums;

  text-align: right;

  font-size: 12px;

}



.h-result.win {

  color: #0a8238;

}



.h-result.lose {

  color: var(--c-accent-red);

}



.modal-overlay {

  position: fixed;

  inset: 0;

  z-index: 100;

  background: rgba(26, 26, 26, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease;

}



.modal-overlay[hidden] {

  display: none;

}



.modal-overlay.open {

  opacity: 1;

  pointer-events: auto;

}



.modal-sheet {

  position: relative;

  width: 100%;

  max-width: 380px;

  background: var(--c-surface);

  border: var(--border-thick);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-hard);

  padding: 28px 26px;

  transform: scale(0.94);

  transition: transform 0.22s ease;

}



.modal-x {

  position: absolute;

  top: 14px;

  right: 12px;

  width: 34px;

  height: 34px;

  border: var(--border-medium);

  border-radius: 50%;

  background: #f4f4f6;

  color: var(--c-text);

  font-size: 22px;

  line-height: 1;

  cursor: pointer;

  display: grid;

  place-items: center;

  padding: 0;

  box-shadow: 3px 3px 0 var(--c-text);

}



.modal-x:hover {

  background: #fff;

}



.modal-overlay.open .modal-sheet {

  transform: scale(1);

}



.modal-title {

  font-family: var(--font-head);

  font-size: 13px;

  color: var(--c-muted);

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 16px;

  font-weight: 400;

}



.modal-avatar {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  margin: 0 auto 12px;

  background: var(--c-accent-orange);

  border: var(--border-medium);

  box-shadow: var(--shadow-hard-sm);

  display: grid;

  place-items: center;

  font-size: 28px;

  font-weight: 600;

  font-family: var(--font-head);

  color: var(--c-text);

}



.modal-name {

  text-align: center;

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 18px;

}



.modal-balance {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 16px;

  background: #f4f4f6;

  border: var(--border-medium);

  box-shadow: 3px 3px 0 var(--c-text);

  border-radius: var(--radius-sm);

  font-size: 13px;

  color: var(--c-muted);

  margin-bottom: 18px;

  font-weight: 600;

}



.modal-balance strong {

  color: var(--c-text);

  font-size: 18px;

  font-variant-numeric: tabular-nums;

  font-weight: 800;

}



.modal-close {

  width: 100%;

  padding: 14px;

  border: var(--border-medium);

  border-radius: var(--radius-sm);

  box-shadow: var(--shadow-hard-sm);

  background: var(--c-surface);

  color: var(--c-text);

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  text-decoration: none;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

}



.modal-close:active {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}


/* —— Game mode: Dice / Mines under header (centered row) —— */



.game-mode-nav {

  width: 100%;

  display: flex;

  justify-content: center;

  margin-bottom: 18px;

}



.game-mode-nav__inner {

  display: flex;

  flex-direction: row;

  align-items: stretch;

  justify-content: stretch;

  gap: 10px;

  width: 100%;

  box-sizing: border-box;

}



.game-history-tag {

  display: inline-block;

  padding: 3px 8px;

  border-radius: var(--radius-xs);

  border: var(--border-medium);

  font-size: 10px;

  font-weight: 800;

  font-family: var(--font-body);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.game-history-tag--dice {

  background: rgba(55, 66, 250, 0.18);

}



.game-history-tag--mines {

  background: rgba(255, 71, 87, 0.14);

}



.game-nav__btn {

  flex: 1;

  min-width: 0;

  padding: 10px 8px;

  text-align: center;

  border: var(--border-thick);

  border-radius: var(--radius-md);

  background: var(--c-surface);

  color: var(--c-text);

  box-shadow: var(--shadow-hard-sm);

  font-size: 11px;

  font-weight: 800;

  font-family: var(--font-body);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  cursor: pointer;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

}



.game-nav__btn:active {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}



.game-nav__btn--active {

  background: var(--c-accent-orange);

  box-shadow: var(--shadow-hard-sm);

}



.game-nav__btn:focus-visible {

  outline: 2px solid var(--c-accent-blue);

  outline-offset: 2px;

}



/* Mines (project styles only) */



.mines-controls-card .slider-caption {

  margin-bottom: 8px;

}



.mines-bomb-row {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 6px;

}



.mines-bomb-badge {

  display: inline-grid;

  place-items: center;

  min-width: 36px;

  padding: 8px 10px;

  border: var(--border-medium);

  border-radius: var(--radius-sm);

  background: #f4f4f6;

  box-shadow: 3px 3px 0 var(--c-text);

  font-size: 16px;

  font-weight: 800;

  font-variant-numeric: tabular-nums;

}



.mines-range {

  flex: 1;

  height: 10px;

  accent-color: var(--c-accent-green);

  cursor: pointer;

}



.mines-tick-labels {

  display: flex;

  justify-content: space-between;

  font-size: 9px;

  font-weight: 700;

  color: var(--c-muted);

  margin-bottom: 14px;

  padding: 0 2px;

}



.mines-bet-box {

  margin-bottom: 14px;

}



.mines-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.mines-actions--single .game-btn {

  width: 100%;

}



.game-btn.game-btn--waiting:disabled {

  opacity: 0.85;

  cursor: not-allowed;

  transform: none;

}



.mines-board-card {

  padding-bottom: 18px;

}



.mines-board-caption {

  margin-bottom: 10px;

}



.mines-steps-caption {

  margin-bottom: 8px;

  margin-top: 4px;

}



.mines-grid-wrap {

  margin-bottom: 14px;

}



.mines-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 6px;

  max-width: 100%;

}



.mines-cell {

  aspect-ratio: 1;

  min-height: 0;

  border: var(--border-medium);

  border-radius: var(--radius-sm);

  background: var(--c-surface);

  box-shadow: 3px 3px 0 var(--c-text);

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

  padding: 0;

  color: var(--c-text);

}



.mines-cell:active:not(:disabled) {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}



.mines-cell:disabled {

  cursor: default;

  transform: none;

}



.mines-cell--safe {

  background: rgba(46, 213, 115, 0.35);

  cursor: default;

}



.mines-cell--mine {

  background: rgba(255, 71, 87, 0.4);

  cursor: default;

}



.mines-cell__mine-wrap {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  pointer-events: none;

}



.mines-mine-icon {

  display: grid;

  place-items: center;

  line-height: 1;

}



.mines-mine-emoji {

  font-size: 1.35rem;

  line-height: 1;

  display: block;

}



.mines-h-badge {

  display: inline-block;

  margin-left: 4px;

  padding: 2px 6px;

  border-radius: var(--radius-xs);

  border: 1px solid var(--c-text);

  font-size: 10px;

  font-weight: 800;

  vertical-align: middle;

  opacity: 0.85;

}



.game-unified-history .history-empty .h-meta {

  text-align: center;

  grid-column: 1 / -1;

}



.mines-step-strip-wrap {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



.mines-mult-row {

  flex-wrap: nowrap;

  min-height: 52px;

  align-items: stretch;

  gap: 8px;

  justify-content: flex-start;

  margin-top: 0;

}



.mines-mult-row .mult-cell {

  flex: 0 0 auto;

  min-width: 72px;

}



.mines-step-arrow {

  flex: 0 0 auto;

  align-self: center;

  color: var(--c-muted);

  font-weight: 800;

  font-size: 12px;

  padding: 0 2px;

}



/* Centered game column + full-width shell */



.app.app--shell {

  max-width: 100%;

  width: 100%;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

}



.app__body {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  min-width: 0;

  width: 100%;

}



.app__center {

  width: 100%;

  max-width: 420px;

}



.app__center--game {

  display: flex;

  flex-direction: column;

  width: 100%;

}



.game-scroll--hide-scrollbar {

  min-width: 0;

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

}



.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* Page shell: game header + mobile burger */



.game-top-shell {

  position: relative;

  width: 100%;

}



.header--game {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  width: 100%;

  margin-bottom: 18px;

  position: relative;

}



.header--game-guest {

  flex-wrap: nowrap;

}



.header-guest-bar {

  display: flex;

  flex: 1;

  min-width: 0;

  gap: 10px;

  align-items: stretch;

}



.header-guest-bar__btn {

  flex: 1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 10px 12px;

  min-width: 0;

}



.header-guest-bar__btn--accent {

  background: var(--c-accent-blue);

  color: #fff;

}



.header-burger {

  display: none;

  border: var(--border-thick);

  background: var(--c-surface);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-hard-sm);

  width: 44px;

  height: 44px;

  padding: 0;

  cursor: pointer;

  color: var(--c-text);

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition:

    transform 0.08s ease,

    box-shadow 0.08s ease;

}



.header-burger:active {

  transform: translate(2px, 2px);

  box-shadow: 2px 2px 0 var(--c-text);

}



.header-burger .bi {

  font-size: 1.5rem;

  line-height: 1;

}



.header-burger__lines {

  display: block;

  width: 20px;

  height: 2px;

  background: var(--c-text);

  border-radius: 1px;

  box-shadow:

    0 -6px 0 var(--c-text),

    0 6px 0 var(--c-text);

}



.header--game .header__sheet {

  display: flex;

  flex: 1;

  min-width: 0;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

  width: 100%;

}



.header--game .header__sheet-left {

  flex-shrink: 0;

  min-width: 0;

}



@media (max-width: 639px) {

  .game-top-shell {

    margin-bottom: 12px;

    z-index: 20;

  }



  /* Sheet anchors to shell (header + game nav row) so it opens below Dice/Mines/Burger */

  .game-top-shell > .header--game {

    position: static;

    margin-bottom: 0;

  }



  .header--game {

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    margin-bottom: 12px;

  }



  /* Burger lives in game nav row (.game-mode-nav__burger), not inside header */

  .game-mode-nav__inner .game-mode-nav__burger {

    display: inline-flex !important;

    flex: 1 1 0;

    min-width: 0;

    width: auto !important;

    height: auto !important;

    align-self: stretch;

    box-sizing: border-box;

    min-height: 44px;

    padding: 10px 8px;

  }



  /* Two-tab row: Dice + Mines split width when guest */

  .game-mode-nav__inner:not(.game-mode-nav__inner--with-burger) .game-nav__btn {

    flex: 1 1 0;

    min-width: 0;

  }



  /* Three equal columns */

  .game-mode-nav__inner--with-burger .game-nav__btn {

    flex: 1 1 0;

    min-width: 0;

  }



  .game-mode-nav {

    margin-bottom: 10px;

  }



  /* Collapsed toolbar: drawer relative to shell, not zero-height header */

  .game-top-shell .header--game .header__sheet {

    display: none;

    flex: none;

    flex-direction: column;

    align-items: stretch;

    width: auto;

    padding: 14px;

    background: var(--c-surface);

    border: var(--border-thick);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-hard);

    z-index: 450;

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    margin-top: 6px;

  }



  .header--game.header--open .header__sheet {

    display: flex;

  }



  .header--game.header--game-guest {

    margin-bottom: 12px;

  }



  .header--game .header-right-stack {

    flex-wrap: wrap;

    justify-content: flex-start;

    gap: 8px;

  }



  .header--game .profile-dropdown {

    z-index: 500;

  }



  .app.app--shell {

    gap: 8px;

  }



  .header--game.header--game-guest {

    flex-direction: row;

    align-items: stretch;

  }



  body {

    padding: 12px 8px 20px;

  }

}



/* Mines: tighter fit on screen */



#viewMines .main {

  gap: 10px;

}



#viewMines .mines-board-card,

#viewMines .mines-controls-card {

  padding: 12px 14px 14px;

}



.game-unified-history {

  flex-shrink: 0;

  margin-top: 16px;

  padding: 16px 14px 14px;

}



/* X logo: below history card — brand black tile + white glyph (official-style mark) */



.game-social-x-slot {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10px 0 16px;

  margin-top: 2px;

}



.game-social-x-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border-radius: 10px;

  background: #000000;

  color: #ffffff;

  text-decoration: none;

  box-shadow: none;

  transition: background 0.16s ease, transform 0.16s ease, opacity 0.16s ease;

}



.game-social-x-link:hover {

  background: #000000;

  opacity: 0.92;

  transform: scale(1.04);

}



.game-social-x-link:active {

  transform: scale(0.98);

  opacity: 1;

}



.game-social-x-link:focus-visible {

  outline: 2px solid currentColor;

  outline-offset: 3px;

}



.game-social-x-svg {

  width: 17px;

  height: 17px;

  display: block;

}



#viewMines .mines-grid {

  max-width: min(58vw, 240px);

  gap: 4px;

  margin-left: auto;

  margin-right: auto;

}



#viewMines .mines-grid-wrap {

  margin-bottom: 8px;

}



#viewMines .mines-cell {

  font-size: 11px;

}



#viewMines .mines-mine-emoji {

  font-size: 1.05rem;

}



#viewMines .mines-step-strip-wrap {

  margin-top: 4px;

}



#viewMines .mines-mult-row {

  gap: 4px;

  min-height: 44px;

}



#viewMines .mines-mult-row .mult-cell {

  min-width: 50px;

  padding: 4px 4px;

}



#viewMines .mines-mult-row .mult-label {

  font-size: 8px;

}



#viewMines .mines-mult-row .mult-num {

  font-size: 13px;

}



#viewMines .mines-bomb-badge {

  padding: 6px 8px;

  min-width: 32px;

  font-size: 14px;

}



#viewMines .slider-caption {

  margin-bottom: 4px;

}



@media (max-height: 740px) {

  #viewMines .mines-grid {

    max-width: min(52vw, 210px);

    gap: 3px;

  }



  #viewMines .mines-board-card,

  #viewMines .mines-controls-card {

    padding: 10px 12px 12px;

  }



  #viewMines .mines-mult-row .mult-cell {

    min-width: 44px;

  }



  .game-unified-history .history-scroll {

    max-height: 120px;

  }

}