/*
 * Responsive board-only correction.
 * Keeps the reference reel engine and DOM, but replaces its asymmetric,
 * partially cropped mobile presentation with centered complete rows.
 */

@media (max-width: 530px) {
  .header-spacer { margin-top: 12px; }

  .slot-wrapper {
    width: calc(100% - 20px);
    max-width: 410px;
    height: 387px;
    margin: 0 auto 10px;
  }

  .slot-machine {
    top: 52px;
    left: 0;
    width: 100%;
    height: 0;
    transform: none;
  }

  .reel {
    top: 0;
    width: 123px;
    height: 369px;
    border-radius: 9px;
    transform-origin: top center;
  }

  .reel-one {
    left: 9px;
    right: auto;
    transform: scale(.88);
    transform-origin: top left;
  }

  .reel-two {
    left: 50%;
    right: auto;
    transform: translateX(-50%) scale(.88);
  }

  .reel-three {
    right: 9px;
    left: auto;
    transform: scale(.88);
    transform-origin: top right;
  }

  .reel-strip { margin-top: 0; }
  .reel-two .reel-strip { margin-top: -246px; }
  .reel-three .reel-strip { margin-top: -123px; }

  .reel-one.is-spinning .reel-strip,
  .reel-two.is-spinning .reel-strip,
  .reel-three.is-spinning .reel-strip { margin-top: -12669px; }

  .win-line { top: 159px; }

  .slot-wrapper::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    content: "×2      ×4      ×6      ×10";
    border: 3px solid #6d3d19;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #b84324 0%, #8f1a12 48%, #56100b 100%);
    box-shadow: inset 0 3px 0 rgba(255, 212, 112, .2), inset 0 -7px 12px rgba(0, 0, 0, .34), 0 3px 0 #2e1708;
    color: #f3c53d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-style: italic;
    font-weight: 800;
    line-height: 38px;
    text-align: center;
    text-shadow: 0 0 9px rgba(255, 214, 79, .74), 0 2px 0 rgba(0, 0, 0, .7);
    white-space: pre;
  }

  .slot-wrapper::before {
    top: 44px;
    left: 0;
    width: 100%;
    height: 343px;
    border-width: 9px;
    border-radius: 0 0 12px 12px;
  }

  .spin-action {
    width: 100%;
    height: 54px;
    margin-top: 8px;
  }

  .spin-button { width: min(300px, calc(100% - 90px)); }
  .music-toggle { top: 7px; right: 8px; left: auto; }
}

@media (max-width: 400px) {
  .slot-wrapper { height: 365px; }
  .slot-wrapper::before { height: 321px; }
  .reel-one { transform: scale(.82); }
  .reel-two { transform: translateX(-50%) scale(.82); }
  .reel-three { transform: scale(.82); }
  .win-line { top: 148px; }
}

@media (max-width: 370px) {
  .slot-wrapper { height: 339px; }
  .slot-wrapper::before { height: 295px; }
  .reel-one { transform: scale(.75); }
  .reel-two { transform: translateX(-50%) scale(.75); }
  .reel-three { transform: scale(.75); }
  .win-line { top: 136px; }
}

@media (max-width: 340px) {
  .slot-wrapper { height: 306px; }
  .slot-wrapper::before { height: 262px; }
  .reel-one { transform: scale(.66); }
  .reel-two { transform: translateX(-50%) scale(.66); }
  .reel-three { transform: scale(.66); }
  .win-line { top: 119px; }
}

/* Taller phones get four complete rows without oversized tiles. */
@media (max-width: 530px) and (min-height: 760px) {
  .slot-wrapper { height: 475px; }
  .slot-wrapper::before { height: 431px; }
  .reel { height: 492px; }
  .reel-one { transform: scale(.84); }
  .reel-two { transform: translateX(-50%) scale(.84); }
  .reel-three { transform: scale(.84); }
  .win-line { top: 155px; }
}

@media (max-width: 400px) and (min-height: 760px) {
  .slot-wrapper { height: 446px; }
  .slot-wrapper::before { height: 402px; }
  .reel-one { transform: scale(.78); }
  .reel-two { transform: translateX(-50%) scale(.78); }
  .reel-three { transform: scale(.78); }
  .win-line { top: 144px; }
}

@media (max-width: 370px) and (min-height: 760px) {
  .slot-wrapper { height: 416px; }
  .slot-wrapper::before { height: 372px; }
  .reel-one { transform: scale(.72); }
  .reel-two { transform: translateX(-50%) scale(.72); }
  .reel-three { transform: scale(.72); }
  .win-line { top: 133px; }
}