/* play.css — pódio "Melhores jogadores" da Arena, classificação completa, menu JOGAR (bot / online) e a parte
   Online (OnlineLobby) dentro do menu. Plástico mate com os tokens de base.css; brilho só no 1.º lugar. */

/* ── pódio na Arena ── */
.arena-rank { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; padding: 26px 4px 0; border-bottom: 3px solid var(--border-ink); }
.pod { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pod-who { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 100%; min-width: 0; margin-bottom: 6px; }
.pod-who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 .82rem var(--font-sans); }
.pod-who small { font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.pod-crown { position: absolute; top: -24px; filter: drop-shadow(0 2px 0 #090C10); }
.pod-step { width: 100%; display: grid; place-items: center; border: 3px solid var(--border-ink); border-bottom: none; border-radius: 10px 10px 0 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -6px 0 rgba(0, 0, 0, .15); }
.pod-step span { font: 400 1.6rem var(--font-display); color: #F8FAFC; -webkit-text-stroke: 1.6px var(--border-ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--border-ink); }
.p1 .pod-step { height: 76px; background: linear-gradient(#FFD166, #FFB703); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -6px 0 #B87D00, 0 0 18px rgba(255, 183, 3, .35); }
.p2 .pod-step { height: 56px; background: linear-gradient(#E2E8F0, #94A3B8); }
.p3 .pod-step { height: 42px; background: linear-gradient(#F59E0B, #B45309); }
.rk-ava { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--border-ink); background: var(--m, #64748B);
  color: var(--text-inverse); font: 400 1.25rem var(--font-display); box-shadow: 0 3px 0 #090C10, inset 0 2px 0 rgba(255, 255, 255, .45); }
.p1 .rk-ava { width: 54px; height: 54px; font-size: 1.5rem; }
.rk-ava.empty { background: var(--surface-3); color: var(--text-muted); }
.rk-ava.big { width: 58px; height: 58px; font-size: 1.6rem; background: var(--color-accent); }
.rk-me { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 700; font-size: .88rem; }
.rk-me b { margin-left: auto; font-family: var(--font-num); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.rk-pos { font-family: var(--font-num); font-weight: 700; font-size: 1.2rem; color: var(--color-primary); }
.rk-all { justify-content: center; }

/* ── classificação completa ── */
.rk-modal { width: min(560px, 94vw); }
.rk-list { list-style: none; margin: 12px 0 0; padding: 8px; max-height: 60vh; overflow-y: auto; background: var(--surface-1); border-radius: 12px; box-shadow: var(--shadow-tray); }
.rk-list li { display: grid; grid-template-columns: 34px 34px 1fr auto 56px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.rk-list li + li { border-top: 1px solid rgba(148, 163, 184, .12); }
.rk-list li.me { background: rgba(255, 183, 3, .18); box-shadow: inset 0 0 0 2px var(--color-primary); }
.rk-list .pos { text-align: center; font-family: var(--font-num); font-weight: 700; color: var(--m, var(--text-muted)); }
.rk-list .rk-ava { width: 32px; height: 32px; font-size: .95rem; border-width: 2px; }
.rk-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.rk-list small { color: var(--text-muted); font-weight: 700; }
.rk-list b { text-align: right; font-family: var(--font-num); color: var(--color-primary); font-variant-numeric: tabular-nums; }
.rk-list .empty { display: block; color: var(--text-muted); }

/* ── menu JOGAR ── */
.play-menu { width: min(720px, 94vw); }
.pm-title { margin-bottom: 14px; }
.pm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; font: inherit; color: var(--text-main); cursor: pointer;
  background: var(--surface-1); border: 3px solid var(--border-ink); border-radius: var(--radius-md); box-shadow: 0 5px 0 #090C10;
  transition: transform 120ms var(--ease-out-snappy), background 120ms; }
.pm-tab:hover { transform: translateY(-2px); background: var(--surface-3); }
.pm-tab.on { background: var(--surface-3); box-shadow: 0 5px 0 #090C10, inset 0 0 0 3px var(--color-primary); }
.pm-tab b { display: block; font: 400 1.15rem var(--font-display); -webkit-text-stroke: 1px var(--border-ink); paint-order: stroke fill; }
.pm-tab small { color: var(--text-muted); font-weight: 700; }
.pm-body { margin-top: 16px; min-height: 230px; }
.pm-bot { display: flex; flex-direction: column; gap: 12px; }
.pm-go { justify-content: center; }

/* ── Online dentro do menu ── */
.online-box .lobby { max-width: none; padding: 0; }
.ol-sign { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ol-sign-ico { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-1); box-shadow: var(--shadow-tray); }
.ol-sign .text-in { width: 100%; max-width: 320px; text-align: center; }
.ol-google { min-width: 280px; justify-content: center; }
.ol-me { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px; background: var(--surface-1); border-radius: var(--radius-md); box-shadow: var(--shadow-tray); }
.ol-name small { display: block; margin-top: 4px; color: var(--text-muted); font-weight: 700; }
.ol-elo { text-align: center; }
.ol-elo b { display: block; font-family: var(--font-num); font-size: 2rem; line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ol-elo small { color: var(--text-muted); font-weight: 800; }
.ol-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin: 14px 0 12px; }
.ol-actions .btn { justify-content: flex-start; gap: 12px; text-align: left; }
.ol-actions .btn span small { display: block; font: 700 .78rem var(--font-sans); opacity: .8; -webkit-text-stroke: 0; }
.ol-join { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; }
.ol-join .lbl { margin: 0; }
.ol-join .code-in { width: 120px; text-transform: uppercase; letter-spacing: .2em; font-family: var(--font-num); }
.ol-out { margin-top: 6px; }

@media (max-width: 620px) {
  .pm-tabs, .ol-actions { grid-template-columns: 1fr; }
  .ol-me { grid-template-columns: auto 1fr; }
  .ol-elo { grid-column: 1 / -1; }
}

/* ecrãs baixos (portátil com ~600 px de altura): o menu cabe sem deslizar */
@media (max-height: 720px) {
  .play-menu { padding-top: 16px; padding-bottom: 16px; }
  .pm-title { margin-bottom: 10px; }
  .pm-tab { padding: 10px 12px; }
  .pm-tab .icon, .pm-tab svg { width: 28px; height: 28px; }
  .pm-body { margin-top: 12px; min-height: 0; }
  .ol-sign-ico { display: none; }
  .ol-sign { gap: 6px; }
  .ol-sign p { margin: 0; }
  .ol-actions { margin: 10px 0 8px; }
}