/* App-wide responsive safeguards for phone, tablet, laptop, TV and 4K screens. */
html,
body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

img,
svg,
video,
canvas {
  max-width:100%;
}

input,
select,
textarea,
button {
  min-width:0;
}

.site-header,
.game-container,
.deposit-wrap,
.withdraw-wrap,
.profile-main,
.games-section {
  width:100%;
}

.hero-section,
.games-section,
.deposit-wrap,
.withdraw-wrap,
.profile-main,
.game-container {
  max-width:1920px;
  margin-left:auto;
  margin-right:auto;
}

.deposit-grid,
.withdraw-grid,
.deposit-history,
.withdraw-history,
.history-filters,
.profile-layout,
.stats-grid,
.game-board,
.action-panel,
.special-bets-info,
.game-results {
  min-width:0;
}

.history-list,
.bets-list,
.profile-form,
.deposit-form,
.qr-card,
.info-card,
.stat-box,
.game-face {
  min-width:0;
}

.history-item,
.bet-item,
.profile-form label,
.input-shell input,
.royal-field input,
.current-round,
.pool-amount,
.wallet-pop b,
.profile-chip span {
  overflow-wrap:anywhere;
}

@media (min-width:1921px) {
  .site-header {
    padding-left:max(52px, calc((100vw - 1920px) / 2 + 52px));
    padding-right:max(52px, calc((100vw - 1920px) / 2 + 52px));
  }

  .hero-section {
    min-height:760px;
  }

  .game-card {
    max-width:1120px;
  }

  .deposit-grid,
  .deposit-history,
  .history-filters {
    max-width:1320px;
  }

  .profile-layout {
    grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  }

  .game-container {
    max-width:1500px;
  }
}

@media (max-width:1180px) {
  .site-header {
    gap:14px;
  }

  .brand span {
    font-size:clamp(18px,2.4vw,24px);
  }

  .game-top-bar {
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }

  .quit-btn {
    grid-column:1 / -1;
    justify-content:center;
  }

  .profile-layout,
  .deposit-grid {
    grid-template-columns:1fr;
  }

  .preview-card {
    position:relative;
    top:auto;
  }
}

@media (max-width:850px) {
  .site-header {
    height:auto;
    min-height:74px;
    padding-top:8px;
    padding-bottom:8px;
  }

  .brand {
    min-width:0;
  }

  .brand span {
    max-width:34vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .header-actions {
    flex-shrink:0;
  }

  .mini-pop {
    max-width:calc(100vw - 24px);
  }

  .wallet-pop {
    right:-72px;
  }

  .profile-pop {
    right:-54px;
  }

  .hero-section {
    gap:8px;
  }

  .hero-content h1,
  .deposit-hero h1,
  .profile-hero h1 {
    font-size:clamp(2rem,10vw,3.5rem);
  }

  .game-card,
  .game-card-inner,
  .game-face {
    width:100%;
  }

  .game-card-inner {
    min-height:760px;
  }

  .entry-options {
    grid-template-columns:1fr;
  }

  .game-top-bar,
  .action-buttons,
  .result-buttons,
  .bet-prediction,
  .two-grid {
    grid-template-columns:1fr!important;
  }

  .game-top-bar {
    display:grid;
  }

  .game-info,
  .game-balance {
    justify-content:center;
    text-align:center;
  }

  .players-circle {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .player-seat {
    min-width:0;
  }

  .dice-container {
    flex-wrap:wrap;
  }

  .profile-hero {
    align-items:flex-start;
    flex-direction:column;
    padding:24px;
  }

  .back-home {
    width:100%;
    justify-content:center;
  }

  .history-item {
    grid-template-columns:1fr!important;
  }
}



@media (max-width:560px) {
  body {
    padding-top:70px;
  }

  .site-header {
    min-height:70px;
    padding-left:10px;
    padding-right:10px;
  }

  .brand img {
    width:40px;
    height:40px;
  }

  .brand span {
    max-width:30vw;
    font-size:16px;
  }

  .icon-btn,
  .logout-btn {
    width:42px;
    min-height:42px;
  }

  .profile-chip img {
    width:32px;
    height:32px;
  }

  .mini-pop {
    position:fixed;
    top:72px;
    right:10px!important;
    left:10px;
    width:auto;
  }

  .mini-pop:before {
    display:none;
  }

  .hero-section,
  .games-section,
  .deposit-wrap,
  .withdraw-wrap,
  .profile-main,
  .game-container {
    padding-left:14px;
    padding-right:14px;
  }

  .dice-stage {
    height:220px;
  }

  .game-face {
    padding:16px;
    border-radius:18px;
  }

  .game-card-inner {
    min-height:800px;
  }

  .game-img {
    min-height:170px;
    max-height:210px;
  }

  .entry-badge {
    left:16px;
    top:14px;
  }

  .game-tags span,
  .filter-btn,
  .status {
    max-width:100%;
  }

  .qr-card,
  .deposit-form,
  .deposit-history,
  .info-card,
  .profile-card,
  .profile-form,
  .game-board,
  .action-panel,
  .special-bets-info,
  .game-results {
    border-radius:16px;
    padding:16px;
  }

  .form-head {
    align-items:flex-start;
  }

  .form-head > i {
    width:48px;
    height:48px;
    flex:0 0 48px;
  }

  .input-shell,
  .royal-field {
    min-height:54px;
  }

  .players-circle {
    grid-template-columns:1fr!important;
  }

  .dice {
    width:64px!important;
    height:64px!important;
    font-size:2rem!important;
  }

  .toast-stack {
    left:10px!important;
    right:10px!important;
    width:auto!important;
  }
}

@media (max-width:380px) {
  .brand span {
    display:none;
  }

  .header-actions {
    gap:5px;
  }

  .game-card-inner {
    min-height:840px;
  }

  .hero-content h1,
  .deposit-hero h1,
  .profile-hero h1 {
    font-size:clamp(1.8rem,11vw,2.45rem);
  }
}