/* ============================================
   RESPONSIVE (max-width: 700px)
   ============================================ */
@media (max-width: 1200px) {
  .panel { display: none; }
  .game-area { flex-direction: column; align-items: center; }
}

@media (max-width: 700px) {
  .hdr {
    padding: 4px 10px;
    gap: 8px;
    height: 32px;
    min-height: 32px;
  }

  .logo {
    font-size: 1rem;
  }

  .hdr-phase {
    font-size: 0.65rem;
  }

  .hstat {
    font-size: 0.7rem;
    gap: 4px;
  }

  .hstat-val {
    font-size: 0.7rem;
  }

  .hstat-lbl {
    font-size: 0.5rem;
  }

  .hist-strip {
    padding: 3px 10px;
    height: 28px;
    min-height: 28px;
  }

  .h-roll {
    font-size: 0.65rem;
    min-width: 20px;
    height: 18px;
  }

  .game-area {
    padding: 4px 8px 4px;
  }

  .table {
    padding: 12px 12px 10px;
    border-width: 5px;
    border-radius: 24px 24px 10px 10px;
  }

  .table-wrap {
    max-width: 100%;
  }

  .row-place .zone {
    height: 56px;
  }

  .row-place .z-lbl {
    font-size: 1.4rem;
  }

  .row-place .zone[data-bet="place6"] .z-lbl,
  .row-place .zone[data-bet="place8"] .z-lbl {
    font-size: 0.9rem;
  }

  .row-mid .zone {
    height: 42px;
  }

  .row-field .zone {
    height: 44px;
  }

  .row-props .zone {
    height: 36px;
  }

  .row-props .z-lbl {
    font-size: 0.7rem;
  }

  .row-pass .zone {
    height: 42px;
  }

  .row-pass .z-lbl {
    font-size: 0.95rem;
  }

  .row-odds .zone {
    height: 32px;
  }

  .z-lbl {
    font-size: 0.85rem;
  }

  .z-sub {
    font-size: 0.55rem;
  }

  .field-nums {
    font-size: 0.55rem;
    gap: 3px;
  }

  .controls {
    gap: 6px;
    padding: 6px 8px;
    flex-wrap: wrap;
  }

  .chip {
    width: 34px;
    height: 34px;
    font-size: 0.6rem;
    border-width: 2px;
  }

  .btn-roll {
    padding: 8px 24px;
    font-size: 1rem;
  }

  .btn-auto {
    padding: 8px 14px;
    font-size: 0.7rem;
  }

  .strat-select {
    font-size: 0.55rem;
    padding: 4px 16px 4px 6px;
    max-width: 100px;
  }

  .msg {
    font-size: 0.75rem;
    min-width: 0;
    max-width: 160px;
  }

  .btn-sm {
    padding: 4px 8px;
    font-size: 0.6rem;
  }

  .die {
    width: 46px;
    height: 46px;
    padding: 6px;
    border-radius: 8px;
  }

  .pip {
    width: 8px;
    height: 8px;
  }

  .stat-cell {
    padding: 3px 6px;
  }

  .stat-k {
    font-size: 0.45rem;
  }

  .stat-v {
    font-size: 0.7rem;
  }

  .stats-bar {
    min-height: 32px;
  }

  .chip-stack {
    font-size: 0.6rem;
    padding: 1px 4px;
  }

  .puck {
    width: 22px;
    height: 22px;
    font-size: 0.45rem;
  }

  .result-banner {
    min-height: 30px;
    gap: 8px;
    padding: 3px 10px;
  }

  .rb-dice {
    font-size: 1rem;
  }

  .rb-text {
    font-size: 0.75rem;
  }

  .rb-pnl {
    font-size: 1.1rem;
  }

  .celebration-text {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }

  .achievement-container {
    right: 8px;
    top: 100px;
  }

  .achievement-toast {
    max-width: 220px;
    padding: 8px 12px;
  }

  .achieve-icon {
    font-size: 1.2rem;
  }

  .achieve-title {
    font-size: 0.65rem;
  }

  .achieve-desc {
    font-size: 0.55rem;
  }

  .combo-counter {
    right: 10px;
    font-size: 1.5rem !important;
  }

  .number-pop {
    font-size: 5rem;
  }

  .milestone-text {
    font-size: 3rem;
  }
}