/* Phones and tablets. Loaded after every other stylesheet (index.html). Each rule
   sits under a width, pointer or orientation query, so desktop stays as it was.
   "Phone" below = up to 640px wide; "touch" = (pointer:coarse). */

/* ---- typing ---------------------------------------------------------------- */
/* iPhone and iPad Safari zoom the whole page into any field under 16px when it
   gets focus (and stay zoomed in). Every field of the game is 16px on touch. */
@media (pointer:coarse){
  .chat-form textarea,.chat-picker input,.chat-poll-option input,.chat-poll-foot select,.chat-channel-create input,
  .chat-panel input,.chat-panel textarea,.live-room-chat input,.bet-stake input,
  .setting-select,.setting-field input,.num-field input,
  .title-picker select,.title-editor-row select,.awe-bot-settings textarea,.discord-settings input,.acct-bio textarea,
  .pt-qty input,.bag-act select,.qty input,.ad-rolls-buy input,.duel-terms-row input[type=number],.tour-bets-form input,.title-award input{font-size:16px}
}

/* ---- lists ----------------------------------------------------------------- */
@media (max-width:640px){
  /* Leaderboards: the like button keeps only its own width, so names get the room. */
  .leaderboard-hearts{width:auto;flex:0 0 auto;min-width:28px}
}

/* ---- shops ----------------------------------------------------------------- */
@media (max-width:1100px){
  /* The picked item's counter (amount, Buy) stays pinned to the bottom of the
     screen while you browse the shelves: on phones and tablets it sat a screen
     or more further down, so tapping an item looked like it did nothing.
     Right padding: the bag button. */
  :is(.counter,.grim-counter,.glx-counter):not(.is-empty){position:sticky;bottom:calc(6px + env(safe-area-inset-bottom));z-index:20;padding-right:58px;box-shadow:0 -12px 32px #000a}
  :is(.counter,.grim-counter,.glx-counter):not(.is-empty) button{white-space:nowrap}
}

/* ---- floating controls ------------------------------------------------- */
/* The stream chat pill (bottom left) covered the site chat's message field and
   the bag; it steps aside while either is open. */
@media (max-width:640px){
  /* Pages and the bulk screen (potion table) scroll their last line clear of
     the stream pill and the bag button. */
  main.codes-page,.batch-backdrop{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  body:has(.chat-panel:not([hidden])) .live-chat.is-closed,
  body:has(.bag) .live-chat.is-closed{visibility:hidden}
}

/* ---- rolls ------------------------------------------------------------------ */
@media (max-width:640px){
  /* A bulk's first row starts under the chat button docked at the top. */
  .batch-grid{padding-top:56px}
  /* "Touch to speed up" wraps above the floating buttons instead of running
     off both edges under them. */
  .reveal-speed-hint{bottom:calc(64px + env(safe-area-inset-bottom));width:calc(100% - 32px);white-space:normal;text-align:center}
}

/* ---- minigames ----------------------------------------------------------- */
/* On phones a run fills the screen by itself (minigames.jsx, phoneScreen). */
@media (max-width:640px){
  /* Restart and big-screen buttons get a strip of their own instead of covering
     the game's score line (and Minesweeper's reveal/flag switch). */
  .mini-stage:has(>.mini-restart,>.mini-big-toggle){padding-top:46px}
  .mini-stage.is-big:has(>.mini-restart,>.mini-big-toggle){padding-top:calc(46px + env(safe-area-inset-top))}
  .mini-stage.is-big>.mini-restart,.mini-stage.is-big>.mini-big-toggle{top:calc(8px + env(safe-area-inset-top))}

  /* Games sized to the screen: Plox's well and its buttons fit without
     scrolling, Minesweeper's 16 columns get every pixel of the width. */
  .plox-board{max-height:min(64dvh,calc(100dvh - 290px))}
  .mines-game{padding:6px 2px}
  .mines-grid{gap:1px}

  /* Practice list: two games per row. */
  .practice-page{padding:12px 10px 32px}
  .practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .practice-tile{padding:11px}
  .practice-tile strong{font-size:13px}
  .practice-board-button{padding:7px 11px}
}

/* Mania draws its score in the top-right corner: on a phone the big-screen
   button moves next to Restart instead of covering it. */
@media (pointer:coarse){
  .mini-stage.is-big:has(.mania-game)>.mini-big-toggle{right:auto;left:104px}
}

/* Phone held sideways: height is what is short. The buttons sit in side
   margins, and square boards are sized by the height. */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .mini-stage.is-big:has(>.mini-restart,>.mini-big-toggle){padding-inline:max(100px,env(safe-area-inset-left))}
  .mini-stage.is-big .mines-game{width:min(100%,calc(100dvh - 56px))}
  .mini-stage.is-big .letter-grid{width:min(100%,calc(100dvh - 120px))}
  .plox-board{max-height:calc(100dvh - 160px)}
  /* Stay on Black: the steering pad sits beside the board, not under it. */
  .orbit-game:has(.orbit-pad.is-shown){width:min(100%,calc(200dvh - 220px));display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6px 16px}
  .orbit-game:has(.orbit-pad.is-shown)>.number-hud{grid-column:1/-1;margin:0}
  .orbit-game:has(.orbit-pad.is-shown)>canvas{width:min(100%,calc(100dvh - 130px));height:auto;aspect-ratio:1;justify-self:center}
  .orbit-game:has(.orbit-pad.is-shown)>.orbit-pad{height:calc(100dvh - 140px);margin:0}
  .mini-stage.is-big .orbit-game:has(.orbit-pad.is-shown){width:min(100%,calc(200dvh - 90px))}
  .mini-stage.is-big .orbit-game:has(.orbit-pad.is-shown)>canvas{width:min(100%,calc(100dvh - 70px))}
  .mini-stage.is-big .orbit-game:has(.orbit-pad.is-shown)>.orbit-pad{height:calc(100dvh - 80px)}
}

/* Practice on a phone, either way up: one compact bar (back, game, Again, your
   records) instead of three wrapped rows, and no empty band above the game. */
@media (max-width:640px),(pointer:coarse) and (max-height:500px){
  .practice-bar{gap:2px 10px;padding:6px 10px;flex-wrap:wrap}
  .practice-bar>strong{order:1;flex:1 1 0;min-width:0;display:flex;align-items:center;gap:7px;margin:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .practice-bar>strong>svg{flex:none;width:22px;height:22px}
  .practice-close{order:0;padding:4px 10px}
  .practice-again{order:2;padding:6px 14px}
  .practice-bar::after{content:"";order:3;flex-basis:100%;height:0}
  .practice-bar>span{order:4;font-size:11px}
  .practice-stage{padding:8px}
  .practice-stage .mini-games{margin:0;padding:0;border:0}
}
@media (pointer:coarse) and (max-height:500px){
  .practice-bar::after{display:none}
  .practice-bar>strong{flex:0 1 auto;margin-right:auto}
  .practice-again{order:5}
  .practice-stage{padding:4px 8px}
}

/* A run in progress on a phone or tablet: no pop-ups over the game. */
@media (pointer:coarse),(max-width:640px){
  html.mini-playing :is(.quick-notification,.stream-alerts,.chat-mention-notices,.live-chat.is-closed){display:none!important}
}