/*
  Lucky Wheel — mobile.css (unchanged rules; tokenization not needed)
  Backup: ./legacy/mobile.css
*/

/* ==========================================================
   mobile.css — MOBILE-ONLY OVERRIDES (separate from style.css)
   Applies on small screens only.
   ========================================================== */

@media (max-width: 820px) and (hover: none) and (pointer: coarse) {

  /* Allow page scrolling on mobile (desktop keeps overflow:hidden) */
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: auto;
    /* <-- this is the key */
  }

  .controlsBar #fullscreenBtn,
  .controlsBar #historyToggleBtn {
    display: none !important;

  }

  /* page padding: tighter */
  main.wrap {
    width: 100%;
    margin: 0;
    padding: 10px;
    gap: 10px;

    /* one column */
    grid-template-columns: 1fr !important;

    /* put Stage first, Items second */
    grid-template-areas:
      "stage"
      "input";
  }

  /* main children order via areas */
  main.wrap>section.card {
    grid-area: input;
  }

  main.wrap>section.stage {
    grid-area: stage;
  }

  /* stage: default (portrait-friendly) = stacked */
  .stage {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    gap: 10px;
    height: auto;
  }

  /* wheel sizing for mobile */
  .canvasWrap {
    padding: 10px;
    --wheelSize: clamp(280px, 86vw, 520px);
  }

  /* ----------------------------------------------------------
     Mobile: disable desktop DPI/container wheel sizing logic
     ---------------------------------------------------------- */

  /* Stop container-query units from affecting wheelSize on mobile */
  .canvasWrap {
    container-type: normal !important;
  }

  /* Ensure the wheel box sizes from mobile --wheelSize only (no % height coupling) */
  .wheelArea {
    height: auto !important;
    max-height: none !important;
  }

  /* Mobile: keep the wheel host layout simple/stable */
  .canvasWrap {
    grid-template-rows: auto auto !important;
    /* wheel + controls (title usually hidden on mobile) */
  }

  @supports (width: 1cqi) {
    .canvasWrap {
      --wheelSize: clamp(280px, 86vw, 520px) !important;
    }
  }

  /* textarea: less tall by default on mobile */
  textarea {
    min-height: 180px;
  }

  /* History panel: make it not absurdly tall */
  .winnerBox {
    height: auto;
    max-height: 42vh;
  }

  #history {
    max-height: 32vh;
  }

  /* header/footer: slightly tighter (optional) */
  header {
    padding: 14px 12px;
  }

  footer {
    padding: 0 12px 12px;
  }
}

.rotateBlocker {
  display: none;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .rotateBlocker {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    background: #000;
  }

  .rotateBlocker__card {
    background: #fff;
    padding: 18px 16px;
    border-radius: 14px;
    max-width: 320px;
    text-align: center;
  }

  .rotateBlocker__title {
    font-weight: 800;
    margin-bottom: 6px;
  }

  .rotateBlocker__text {
    opacity: .75;
  }
}

@media (hover: none) and (pointer: coarse) {
  .controlsHint {
    display: none !important;
  }
}