/* Phones and tablets — measured on the original (inspin.me, v3892): one switch at 950px wide. Narrower, the
   game stacks: a 60px header (☰ first, then the coins and the header's buttons), the table under it at the width
   of the screen, then the messenger filling the rest — its tabs (38px), the messages, the input row (50px). The
   side rail, the leaders' strip and the footer are not there: the rail's buttons are in the ☰ drawer, the photo
   feed is a tab of the chat, the music player sits inside the music tab (main.js moves them). Windows open full
   screen. The original also makes everything a little smaller on small screens (its root font 11 → 8px). */

/* only on phones and tablets: the ☰ of the header, the photo-feed tab */
.m-menu, .mtab.m-only { display: none !important; }
.chat-body > .chat-feed, .chat-body > .chat-music-video { display: none; }

@media (max-width: 950px) {
  /* the pause page in the table's (small) area: "back to the table" and "another table" stay in sight at its bottom
     while the rest scrolls under them */
  .ps-buttons { position: sticky; bottom: 0; z-index: 3; margin: 0 -8px; padding: 14px 8px 10px; background: linear-gradient(180deg, rgba(26, 10, 52, 0) 0%, rgba(26, 10, 52, .88) 34%); }
  .ps-buttons .ps-faq { display: none; }
  html, body, #app { height: 100%; height: 100dvh; }
  /* a private conversation on a phone: the messages get the room — 🗑, 🚫, "ask for a subscription" and the day's
     limit are in the bar's ⋯ menu, and the quick gift row is left out (gifts: the profile, the 🎁 by the message box) */
  .dm-bar .dm-del, .dm-bar .dm-block, .dm-askbar, .dm-gifts.small, .dm-msgs + .dm-quota { display: none; }
  .dm-bar .dm-dots { display: grid; margin-inline-start: auto; }
  .chat.in-conv .chat-header { display: none; }

  /* the frame: header + table on top, the messenger below */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: min(calc(83vw + 104px), 54vh, 54dvh) minmax(0, 1fr); }
  .rail, .footer { display: none !important; }
  .room { grid-column: 1; grid-row: 1; }
  .messenger { grid-column: 1; grid-row: 2; min-height: 0; }
  .room .table { padding: 60px 0 12px; }

  /* the header: ☰, the coins and the buttons the panel shows on phones, spread over the width */
  /* (a tablet keeps them together in the middle, like the original's 500px group; a phone spreads them) */
  .topbar { height: 60px; gap: 10px; padding: 0 6px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .m-menu { display: grid !important; }
  .m-hide, .top-spacer { display: none !important; }
  .top-btn { flex: none; width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
  .coins-btn { flex: none; height: 40px; padding-block: 0; padding-inline: 10px 4px; font-size: .95rem; }
  .league-badge { flex: none; min-width: 0; height: 40px; padding: 0 3px; gap: 0; }
  .league-badge .lb-texts { display: none; }
  .lb-num { width: 32px; height: 32px; }

  /* the messenger: tabs, messages, input */
  /* the tabs fill their row (no empty strip above them): more room for the chat */
  .mtabs { height: 36px; align-items: stretch; padding-top: 0; }
  .mtabs .mtab { height: auto; }
  .mtab.m-only { display: flex !important; }
  .mtab svg { width: 22px; height: 20px; }
  .chat-input-row { height: 50px; }
  /* the side buttons beside the table's messages (about the table, your design, songs on/off, game sounds on/off),
     a little smaller than on a computer */
  .side-btns { top: 6px; inset-inline-end: 8px; gap: 6px; }
  .side-btn { width: 30px; height: 30px; font-size: 14px; }
  .side-btn.music, .side-btn.sound { font-size: 13px; }
  .chat-body.with-side > div:not(.side-btns) { padding-inline-end: 46px; }

  /* the photo feed as a tab, like the original's on a phone (v3894, 375px): four photos a row (84×131, 8px apart,
     the name and the age on the photo), no title and no message box, and "to the leaders" as a green bar kept at
     the bottom with its price in an orange pill */
  .on-feed .chat-header, .on-feed .chat-input-row { display: none; }
  .chat-body > .chat-feed:not([hidden]) { display: block; flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
  .chat-feed .feed { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 100%; height: auto; padding: 8px 8px 0; overflow: visible; background: #fff; }
  .chat-feed .feed-list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start; }
  .chat-feed .feed-item { width: 100%; height: auto; aspect-ratio: 84 / 131; margin: 0; border-radius: 10px; border-width: 2px; border-color: var(--nc, #e3dcef); background: #e7e7e7; box-shadow: 0 0 0 1px rgba(43, 26, 85, .12); }
  .chat-feed .feed-name { display: flex; font-size: 12px; padding: 20px 6px 6px; }
  .chat-feed .feed-bar { order: 3; position: sticky; bottom: 0; z-index: 2; flex: none; display: flex; align-items: center; gap: 6px; height: 48px; margin: 2px 4px 10px;
    padding-inline: 16px 7px; border-radius: 10px; background: #01c138; box-shadow: 0 -6px 10px #fff; }
  .chat-feed .feed-buy { flex: 1; min-width: 0; width: auto; max-width: none; height: 100%; padding: 0; overflow: visible; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 0; background: none; box-shadow: none; }
  /* pause / resume beside the price: a clear white button with its words and a drawn icon (two bars / a triangle,
     centred by construction — a ⏸ character sits off-centre in many fonts); orange while the feed is paused */
  .chat-feed .feed-pause { order: 2; flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px;
    border-radius: 10px; background: #fff; color: #018a28; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
  .chat-feed .feed-pause::before { content: ''; flex: none; width: 11px; height: 13px; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%); border-radius: 1px; }
  .chat-feed .feed-pause .fp-long { display: none; }
  .chat-feed .feed-pause .fp-short { display: inline; }
  .chat-feed .feed-pause.on { background: #fdaa26; color: #fff; }
  .chat-feed .feed-pause.on::before { width: 11px; height: 13px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .chat-feed .feed-buy img { display: none; }
  .chat-feed .feed-buy-text { font-size: 15px; font-weight: 600; text-align: start; text-shadow: none; }
  .chat-feed .feed-buy-price { margin: 0; height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 10px; background: #fdaa26; font-size: 14px; font-weight: 700; }

  /* the music player inside the music tab, above its lists */
  .chat-body:has(> .chat-music-video:not([hidden])) { flex-direction: column; }
  .chat-body > .chat-music-video:not([hidden]) { display: block; flex: none; }
  .chat-music-video .video-player { height: auto; max-height: 34vh; overflow: hidden; }
  /* the music tab on a phone: no title row and no message box (the lists get the room) */
  .on-music .chat-header { display: none; }
  /* playing: a small player on Now playing … */
  .chat-music-video .video-player:has(> .vp-stage:not([hidden])) { height: 132px; max-height: none; }
  /* … and a mini strip while searching or browsing: the picture small at the start, the song's name beside it */
  .chat-body:not([data-mu="now"]) > .chat-music-video .video-player:has(> .vp-stage:not([hidden])) { height: 64px; }
  .chat-body:not([data-mu="now"]) > .chat-music-video .vp-stage { display: flex; align-items: stretch; background: #17121f; }
  .chat-body:not([data-mu="now"]) > .chat-music-video .vp-stage > div:first-child { position: relative; inset: auto; flex: 0 0 114px; width: 114px; height: 64px; }
  .chat-body:not([data-mu="now"]) > .chat-music-video .vp-stage iframe { width: 114px; height: 64px; }
  .chat-body:not([data-mu="now"]) > .chat-music-video .vp-stage .vp-info { position: static; flex: 1; min-width: 0; padding: 6px 10px; background: none; flex-wrap: nowrap; }
  .chat-body:not([data-mu="now"]) > .chat-music-video .vp-info .vp-buttons { display: none; }
  /* the music lists on a phone: a slimmer sub-tab bar and search controls, so more songs show at once */
  .mu-tabs { padding: 4px 4px 3px; }
  .mu-tab { gap: 1px; font-size: 10px; }
  .mu-tab i { width: 24px; height: 24px; }
  .mu-tab i svg { width: 18px; height: 18px; }
  .mu-src { padding: 1px; }
  .mu-src > * { min-height: 26px; padding-block: 0; font-size: 12px; }
  .mu-search { height: 34px; }
  /* nothing playing: the "turn the video on" bar is slim, and out of the way while searching or browsing */
  .chat-body:not([data-mu="now"]) > .chat-music-video .video-player:has(> .vp-stage[hidden]) { display: none !important; }
  /* idle: a short bar ("play your music" · turn the video on); playing: the 16:9 picture */
  .chat-music-video .vp-idle { position: static; flex-direction: row; justify-content: space-between; gap: 10px; padding: 6px 12px; }
  .chat-music-video .vp-idle-text { font-size: 13px; max-width: none; text-align: start; }
  .chat-music-video .btn.vp-on { padding: .45em 1em; font-size: 12px; flex: none; }

  /* windows (profiles, gift screen, leagues …) take the whole screen, like the original's */
  .room-screen { position: fixed; inset: 0; z-index: 50; }
  .md { width: min(322px, 88vw); }
}

/* small screens: a little smaller, as the original does (by width or by height) */
@media (max-width: 950px) and (max-width: 450px), (max-width: 950px) and (max-height: 700px) {
  .topbar { gap: 3px; padding: 0 4px; justify-content: space-between; }
  .top-btn { width: 38px; height: 38px; font-size: 19px; }
  .coins-btn { height: 38px; font-size: .9rem; }
}
@media (max-width: 950px) and (max-width: 359px), (max-width: 950px) and (max-height: 600px) {
  .topbar { gap: 2px; padding: 0 3px; }
  .top-btn { width: 34px; height: 34px; font-size: 17px; }
  .coins-btn { height: 34px; font-size: .82rem; padding-block: 0; padding-inline: 8px 3px; }
  .lb-num { width: 28px; height: 28px; }
}

/* a short screen: the table takes a little more of the height, with less room above and below the ring */
@media (max-width: 950px) and (max-height: 700px) {
  .shell { grid-template-rows: min(calc(83vw + 96px), 58vh, 58dvh) minmax(0, 1fr); }
  .room .table { padding: 52px 0 10px; }
}


/* a tablet held upright (iPad and the like): the table may take more of the tall screen (the chat keeps over a
   third), so the seats are not small on a big screen */
@media (min-width: 600px) and (max-width: 950px) and (orientation: portrait) {
  .shell { grid-template-rows: min(calc(83vw + 104px), 64vh, 64dvh) minmax(0, 1fr); }
}

/* a phone turned sideways (short and wide): the chat beside the table, on the side a line starts from (the grid
   follows the page's direction), the table in the rest — the original pushes its chat off the screen there */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
  .shell { grid-template-columns: min(340px, 44vw) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .messenger { grid-column: 1; grid-row: 1; }
  .room { grid-column: 2; grid-row: 1; }
  .room .table { padding: 52px 0 10px; }
  .mtabs { height: 34px; }
  .chat-input-row { height: 46px; }
}

/* a phone held upright, typing in the chat (the keyboard open): the chat takes the whole screen, like a messenger —
   the table and its top bar step aside until the keyboard closes (my turn to kiss still shows: table.js floatKiss) */
@media (max-width: 950px) and (orientation: portrait) {
  .shell:has(.chat.typing) { grid-template-rows: 0 minmax(0, 1fr); }
  .shell:has(.chat.typing) > .room { display: none; }
}