/* Phone layout fixes. Loaded last on every template; desktop is untouched. */

@media screen and (max-width: 768px) {
  body { overflow-x: clip; }

  /* Header: logo was hidden below 900px, leaving an empty 60px bar. */
  header { height: 64px; padding: 0 16px; justify-content: space-between; }
  nav { padding-top: 0; height: 100%; display: flex; align-items: center; justify-content: space-between; }
  .logo-title { display: flex !important; position: static; }
  .logo { height: 34px; box-shadow: 0 0 40px rgba(136, 108, 255, 0.6); }
  .title { font-size: 18px; padding-top: 0; }
  .nav-links { flex-direction: row; margin: 0; padding: 0; width: auto; }
  .nav-links li { margin: 0; }
  .nav-links a,
  .nav-links a.button-kick { padding: 6px 16px; margin: 0; font-size: 15px; }

  /* Huge empty band above the first heading. */
  .text .title[data-v-1d580398] { margin-top: 0; }
  #appContent > .row.text:first-child { margin-top: 12px !important; }
  header + br, header + br + br { display: none; }

  /* Platform switcher: one row of three small logos instead of a tall stack. */
  .toggle-images {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    margin-top: 16px !important;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .toggle-images .vertical-line { display: none; }
  .toggle-images .image-wrapper { flex: 1 1 0; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; }
  .toggle-images .game-image { width: 100%; max-width: 110px; height: 34px; object-fit: contain; margin: 0; }
  .toggle-images > .game-image { flex: 1 1 0; min-width: 0; }
  .toggle-images .game-image:hover { transform: none; }
  .toggle-images .label { margin-top: 6px; }
  .toggle-images .price-wrapper { font-size: 15px !important; white-space: nowrap; }

  /* Home: tighten the gap before the sign-up cards. */
  #appContent > .row.text[style*="margin-top: 80px"] { margin-top: 24px !important; }
  .card-container { gap: 8px; }
  .card-container .css-1o7r9kk { width: 100%; max-width: 340px; margin: 10px auto; box-sizing: border-box; }

  /* Leaderboard headline + buttons. */
  #appContent .row.text .title { font-size: 30px; line-height: 1.15; }
  #appContent .row.text .subtitle { font-size: 15px; }
  .btn-row { flex-direction: column; gap: 10px; }
  .btn-row > * { width: 100%; max-width: 320px; justify-content: center; box-sizing: border-box; }

  /* Podium: winner first, and compact cards. */
  .css-oijls1 { order: -1; }
  .css-oijls1, .css-jehefp { padding: 16px 16px 14px !important; }
  .css-2w2ovy img[alt$="avatar"] { width: 64px !important; height: 64px !important; }
  .css-2w2ovy { margin: 12px 0 !important; }
  .css-gqrafh { gap: 14px; padding: 8px 0 !important; }
  /* Stacked cards: backdrop blur + 100px glow rendered as blocky light patches between/below them. */
  .css-oijls1, .css-jehefp {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 0 28px rgba(136, 108, 255, 0.35) !important;
  }

  /* Table: show the rank, keep "$ 1,000" on one line, nothing spills out. */
  #appContent .row.list { margin: 8px 0; padding: 12px 10px; align-items: center; flex-wrap: nowrap; }
  #appContent .row.list > div { padding: 0 4px; min-width: 0; width: auto; }
  #appContent .row.list > .hide-mobile { display: block !important; flex: 0 0 34px; max-width: 34px; font-weight: 700; }
  #appContent .row.list > .hide-mobile b { display: none; }
  #appContent .row.list > .col-5 { flex: 1 1 auto; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #appContent .row.list > .col-5 img { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; }
  #appContent .row.list > .col-2:not(.hide-mobile) { flex: 0 0 64px; max-width: 64px; text-align: right; }
  #appContent .row.list > .col-3 { flex: 0 0 92px; max-width: 92px; text-align: right; }
  #appContent .row.list .price-wrapper { white-space: nowrap; font-size: 14px; justify-content: flex-end; }
  #appContent .row.list.details { padding-top: 0; padding-bottom: 0; font-size: 13px; opacity: 0.8; }
  #appContent .row.list.details > div { font-size: 13px; white-space: nowrap; overflow: visible; }
  #appContent .row.list.details > .hide-mobile { font-size: 0; }
  #appContent .row.list.details > .hide-mobile::before { content: "#"; font-size: 13px; }

  /* Rules modal fits short screens. */
  .rules-modal-content { margin: 12vh auto; max-height: 76vh; overflow-y: auto; }
}

@media screen and (max-width: 380px) {
  #appContent .row.text .title { font-size: 26px; }
  #appContent .row.list { padding: 10px 6px; }
  #appContent .row.list .price-wrapper,
  #appContent .row.list > .col-5 { font-size: 13px; }
  #appContent .row.list > .col-2:not(.hide-mobile) { flex-basis: 58px; max-width: 58px; }
  #appContent .row.list > .col-3 { flex-basis: 84px; max-width: 84px; }
}

/* Kick player: small corner mini-player instead of a box covering the page. */
@media screen and (max-width: 768px) {
  .draggable {
    width: 220px;
    height: 162px;
    left: auto !important;
    top: auto !important;
    right: 10px;
    bottom: 10px;
    transform: none;
    border-width: 1px;
    box-shadow: 0 0 30px rgba(138, 79, 255, 0.6);
  }
  .draggable .controls { padding: 2px; }
  .draggable .drag-handle { font-size: 14px; padding: 0 8px; }
  .draggable .close-btn { font-size: 22px; line-height: 26px; padding: 0 12px; }
  .draggable iframe { height: calc(100% - 30px); }
}

/* Touch screens: a tap leaves :hover stuck, so podium cards stayed scaled 1.05 (spilling past the screen)
   and the LB buttons stayed lit. Desktop hover is untouched. */
@media (hover: none) {
  .css-oijls1:hover, .css-jehefp:hover { transform: none; }
  .prev-lb-btn:hover, .rules-btn:hover { transform: none; }
  .prev-lb-btn:hover svg { transform: none; }
}