/* Big screens (laptops and desktops, 1100px wide and up). Loaded last so it wins.
   mntlst is built for phones; this spreads it out so it fills a 1920×1080 screen without endless empty space. */

/* phones: the desktop-only bits don't exist */
.dcol { display: contents; }
.dsup-d, .nv-mob, .b5-mob { display: none; }

@media (min-width: 1100px) {
  :root { --pad: 40px; }

  /* ---------- sign-in: a full-screen split instead of a phone-sized card ---------- */
  body[data-view=au] #app { width: 100%; height: 100vh; margin: 0; border: 0; border-radius: 0; }
  #au.b5.on { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(460px, 1fr); height: 100%; }
  #au .b5-show { height: 100%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 45%, rgba(143,130,236,.22), transparent 70%); }
  #au .b5-wall { position: relative; left: auto; top: auto; transform: scale(1.35) rotate(-8deg); }
  #au .b5-panel { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(48px, 7vw, 140px); border-left: 1px solid rgba(255,255,255,.06); background: rgba(10,10,16,.6); }
  #au .b5-panel > * { width: 100%; max-width: 440px; }
  #au .b5-panel h1 { font-size: 46px; line-height: 1.05; }
  #au .b5-panel .b5-sub { font-size: 17px; }
  #au .b5-btn { height: 60px; font-size: 17px; }
  .b5-mob { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(143,130,236,.1); border: 1px solid rgba(143,130,236,.25); font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.75); }
  .b5-mob b { color: #fff; }
  .b5-mob svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: #c9c1ff; stroke-width: 1.8; stroke-linecap: round; }
  /* onboarding stays a card, sized to the screen */
  body[data-view=ob] #app { width: 520px; height: min(900px, 92vh); margin-top: 4vh; }

  /* ---------- the app frame ---------- */
  body:not([data-view=ob]):not([data-view=au]) #app { width: 100%; max-width: none; height: 100vh; margin: 0; border: 0; border-radius: 0; }
  body[data-view=hm] #hm { grid-template-columns: 260px 1fr; }
  #hm .body { padding-left: 36px; padding-right: 48px; }
  #hm .body > .pg { max-width: none; }

  /* sidebar: the "best on your phone" note sits under the tabs */
  .nv-mob { display: flex; flex-direction: column; gap: 6px; margin: 22px 6px 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
  .nv-mob svg { width: 26px; height: 26px; fill: none; stroke: #c9c1ff; stroke-width: 1.8; stroke-linecap: round; margin-bottom: 4px; }
  .nv-mob b { font-size: 14px; color: #fff; }
  .nv-mob span { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.55); }

  /* ---------- Home and You: one column you scroll, like on the phone ---------- */
  #hm .body > .pg, .h6, .me5 { max-width: 760px; margin-left: auto; margin-right: auto; }
  .me5 .dsup { display: block; }
  .dsup-d { display: none !important; }

  /* ---------- Feed, Search ---------- */
  .ff.ff3 { max-width: 760px; margin: 0 auto; }
  #hm .lt { max-width: 760px; margin-left: auto; margin-right: auto; }
  .x5, .x5 > * { max-width: none; }
  .t5-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ig5 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }

  /* ---------- Casino lobby: rows become grids so everything fits ---------- */

  .pg.cz-lobby, .pg.lz { max-width: 1240px !important; width: 100%; margin: 0 auto; box-sizing: border-box; }
  .cz-lobby .lz-feat { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .cz-lobby .lz-feat > * { width: auto !important; min-width: 0; }
  .cz-lobby .lz-chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .cz-lobby .lz-rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; row-gap: 16px; }
  .cz-lobby .lz-friends, .cz-lobby .lz-vip { max-width: none; }

  /* ---------- game screens: bigger on tall screens ---------- */
  #cbody > .pg:not(.cz-lobby):not(.lz) { max-width: 620px; margin: 0 auto; }
}
@media (min-width: 1100px) and (min-height: 960px) {
  #cbody > .pg:not(.cz-lobby):not(.lz) { zoom: 1.25; }
}
@media (min-width: 1100px) {
  /* ---------- Earn MP: cards in two columns ---------- */
  #ern .e7-sc > *, #rms .e7-sc > * { max-width: 1180px !important; }
  #ern .e7 { columns: 2; column-gap: 20px; }
  #ern .e7 > * { break-inside: avoid; }
  #ern .e7 > :first-child { column-span: all; }

  /* ---------- full pages (Support, Achievements) ---------- */
  .tkp-in { max-width: 860px; }
  .tkp-h { padding-left: calc(50% - 430px); padding-right: calc(50% - 430px); }
  .tkg { grid-template-columns: repeat(3, 1fr); }

  /* sheets open as centered dialogs */
  #sh:not(.full) > div { max-width: 640px; }
}