/* ═══════════════════════════════════════════════════════════════════════════
   MAIN MENU — landscape dashboard (v3.2.43)
   Replaces the portrait-era single column (online.css) and the landscape grid
   of !important overrides (mobile.css), which squeezed the profile card into a
   230px column and overlapped at every screen size.

      ┌ header: STREET LOBBY · logo · @BLOCTCG v ───────────────────────┐
      │ profile card     │ FIND MATCH        │ VS AI                     │
      │ gold + BUY/REUP  │ OPEN PACKS        │ DECK BUILDER              │
      │ radio            │ social · leaderboard · missions · …  (grid)  │
      └──────────────────┴───────────────────────────────────────────────┘

   Heights scale with the viewport (vh in clamp) so the whole menu fits a
   360px-tall landscape phone without scrolling and fills a desktop screen.
   In lobby mode #menu-inner is hidden by lobby.css; nothing here touches that.
   ═══════════════════════════════════════════════════════════════════════════ */

#menu-screen {
  background: radial-gradient(ellipse at 50% 40%, #15130e 0%, #0a0907 60%, #060605 100%);
  overflow: hidden;
  padding: 0 !important;                 /* mobile.css pads every .screen; the grid handles insets */
}

#menu-screen #menu-inner {
  --mgap: clamp(8px, 1.8vh, 16px);
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  height: 100%;
  margin: 0 auto;
  padding:
    calc(var(--safe-top, 0px) + clamp(8px, 2vh, 20px))
    calc(var(--safe-right, 0px) + clamp(10px, 2vw, 28px))
    calc(var(--safe-bottom, 0px) + clamp(8px, 2vh, 20px))
    calc(var(--safe-left, 0px) + clamp(10px, 2vw, 28px));
  display: grid;
  grid-template-columns: clamp(210px, 26vw, 320px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "head head" "side main";
  gap: var(--mgap);
  align-content: center;                 /* tall screens: the dashboard sits in the middle */
  align-items: start;
  overflow-y: auto;                      /* only ever needed on unusually short windows */
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#menu-screen #menu-header {
  grid-area: head;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 0 clamp(6px, 1.4vh, 12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.menu-lobby-btn {
  justify-self: start;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(.72rem, 1.9vh, .9rem);
  letter-spacing: 2px;
  color: #120e04;
  background: linear-gradient(180deg, #f0d060, #c9a227);
  border: none;
  border-radius: 6px;
  padding: 0 14px;
  min-height: 34px;
  cursor: pointer;
  box-shadow: 0 2px 0 #7a5f12;
  white-space: nowrap;
}
.menu-lobby-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #7a5f12; }
#menu-screen #menu-logo { justify-self: center; display: flex; }
#menu-screen #menu-logo svg { height: clamp(20px, 5vh, 34px); width: auto; }
#menu-screen #menu-footer {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  white-space: nowrap;
}
#menu-screen #twitter-link { min-height: 30px; }

/* ── Left column: profile + radio ───────────────────────────────────────── */
#menu-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--mgap);
  min-height: 0;
}

#menu-screen #menu-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vh, 12px);
  margin: 0;
  padding: clamp(10px, 2.2vh, 18px) clamp(10px, 1.4vw, 16px);
  background: linear-gradient(180deg, #17150f 0%, #0f0e0b 100%);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 12px;
}
#menu-screen #menu-profile-card::before {
  content: '';
  position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
#menu-id-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#menu-screen #menu-avatar {
  flex: none;
  width: clamp(40px, 11vh, 64px);
  height: clamp(40px, 11vh, 64px);
  font-size: clamp(1.4rem, 6vh, 2.4rem);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1c1a14;
}
#menu-screen #menu-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#menu-screen #menu-username {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.05rem, 4.2vh, 1.6rem);
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menu-screen #menu-title-display { font-size: .7rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu-screen #menu-title-display:empty { display: none; }
#menu-stats { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#menu-screen #menu-elo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1rem, 3.4vh, 1.3rem);
  letter-spacing: 1.5px;
  color: var(--gold);
}
#menu-screen #menu-rank {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: 1.5px;
}
#menu-screen #menu-wins {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  letter-spacing: 1px;
  color: var(--muted);
}
/* The rank already shows next to the ELO; the old badge stays for the JS only. */
#menu-screen #menu-rank-badge { display: none; }
#menu-screen #menu-gold-label {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(.95rem, 3vh, 1.15rem);
  letter-spacing: 1.5px;
  color: var(--gold);
  white-space: nowrap;
  margin: 0;
}
#menu-screen #menu-gold-label .mg-unit { font-size: .75em; opacity: .7; }
#menu-screen #menu-gold-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#menu-screen .menu-gold-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: clamp(36px, 10vh, 48px);
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid;
  cursor: pointer;
  font-family: 'Bebas Neue', sans-serif;
}
#menu-screen .mgb-icon { font-size: 1rem; line-height: 1; }
#menu-screen .mgb-label { font-size: clamp(.72rem, 2.2vh, .9rem); letter-spacing: 1.5px; white-space: nowrap; }
.menu-gold-buy { border-color: rgba(212,175,55,.55); background: rgba(212,175,55,.1); color: var(--gold); }
.menu-gold-buy:active { background: rgba(212,175,55,.22); }
.menu-gold-ad { border-color: rgba(51,217,124,.55); background: rgba(51,217,124,.1); color: rgb(51,217,124); }
.menu-gold-ad:active { background: rgba(51,217,124,.22); }
.menu-gold-ad:disabled { opacity: .4; cursor: not-allowed; }

/* Radio: one compact row */
#menu-screen #radio-player {
  margin: 0;
  padding: 8px 10px;
  gap: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;                       /* narrow column: controls drop to a second row */
  min-width: 0;
}
#menu-screen #radio-info { min-width: 120px; flex: 1 1 120px; display: flex; align-items: center; gap: 8px; }
#menu-screen #radio-text { min-width: 0; }
#menu-screen #radio-name, #menu-screen #radio-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu-screen #radio-name { font-size: .8rem; letter-spacing: 2px; }
#menu-screen #radio-sub { font-size: .7rem; }
#menu-screen #radio-controls { flex: none; gap: 4px; }
#menu-screen #radio-controls button { width: 32px; height: 32px; border-radius: 6px; font-size: .85rem; }
#menu-screen #radio-vol-label { min-width: 30px; font-size: .75rem; }

/* ── Right column: tiles ────────────────────────────────────────────────── */
#menu-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--mgap);
  min-height: 0;
}
#menu-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.4vh, 12px);
}
#menu-screen #menu-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 15vw, 170px), 1fr));
  gap: clamp(6px, 1.4vh, 10px);
  padding: 0;
}

.menu-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  min-width: 0;
  min-height: clamp(36px, 9.5vh, 68px);
  padding: 0 clamp(8px, 1.2vw, 16px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: #d9d5cc;
  font-family: 'Bebas Neue', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.menu-tile:hover { border-color: rgba(212,175,55,.45); color: #fff; }
.menu-tile:active { transform: scale(.98); }
.menu-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-tile .mt-icon { flex: none; font-size: clamp(.95rem, 3vh, 1.25rem); line-height: 1; }
.menu-tile .mt-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.menu-tile .mt-label {
  font-size: clamp(.78rem, 2.3vh, 1rem);
  letter-spacing: clamp(1px, .2vw, 2.5px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Primary tiles are bigger. */
#menu-primary .menu-tile { min-height: clamp(46px, 14vh, 120px); padding: 0 clamp(10px, 1.6vw, 22px); }
#menu-primary .menu-tile .mt-icon { font-size: clamp(1.2rem, 4.6vh, 2rem); }
#menu-primary .menu-tile .mt-label { font-size: clamp(.95rem, 3.4vh, 1.45rem); }
.menu-tile-hero {
  background: linear-gradient(135deg, #f3d766 0%, #d4af37 55%, #b8900f 100%);
  border-color: transparent;
  color: #120e04;
  box-shadow: 0 3px 0 #7a5f12, 0 0 24px rgba(212,175,55,.18);
}
.menu-tile-hero:hover { color: #000; border-color: transparent; }
.menu-tile-major { border-color: rgba(212,175,55,.3); }
.menu-tile-packs {
  border-color: rgba(212,175,55,.65);
  background: linear-gradient(180deg, rgba(212,175,55,.2), rgba(212,175,55,.07));
  color: var(--gold);
}
.menu-tile-social { border-color: rgba(58,143,223,.55); background: linear-gradient(180deg, rgba(58,143,223,.2), rgba(58,143,223,.07)); color: #bcdcff; }

/* Queue count sits inside FIND MATCH now. */
.menu-tile-hero #queue-count-label {
  margin: 0;
  justify-content: flex-start;
  gap: 5px;
  font-size: clamp(.6rem, 1.9vh, .78rem);
  letter-spacing: .6px;
  color: rgba(18,14,4,.75) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: inherit;
}
.menu-tile-hero #queue-count-label.qc-live { color: #0b4d24 !important; }

#menu-gold-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--gold); color: #000;
  font-family: 'Bebas Neue', sans-serif; font-size: .7rem; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 10px;
}
#menu-gold-badge:empty { display: none; }       /* was a stray gold dot */

#menu-screen .menu-turfwars { overflow: visible; }
#menu-screen .soon-badge { top: -7px; right: -5px; font-size: .62rem; padding: 1px 6px; }

/* ── Short phones (≤ 380px tall): tighten, drop the least useful details ── */
@media (max-height: 380px) {
  #menu-screen #radio-sub { display: none; }
  #menu-screen #menu-title-display { display: none; }
}

/* ── Portrait / very narrow (web on a phone held upright): stack ──────── */
@media (max-aspect-ratio: 1/1), (max-width: 560px) {
  #menu-screen { overflow-y: auto; }
  #menu-screen #menu-inner {
    height: auto;
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "head" "side" "main";
    align-content: start;
  }
  #menu-screen #menu-footer span { display: none; }
  #menu-primary .menu-tile { min-height: 64px; }
  .menu-tile { min-height: 48px; }
}