/* responsive-phone.css — Phone layout overrides */

/* ---------------- PHONE LAYOUT ---------------- */
@media (max-width: 640px) {
  /* top bar: drop the small logo + username text so everything fits */
  header { padding: 0 8px; }
  .header-left, .header-right { gap: 6px; min-width: 0; }
  .header-logo { font-size: 1.7rem; letter-spacing: 0; white-space: nowrap; flex-shrink: 0; }
  .username-text { display: none; }
  .user-profile { padding: 3px; gap: 0; }
  .coins-badge { padding: 5px 10px; font-size: 1.3rem; gap: 5px; }
  .streak-badge { padding: 5px 8px; font-size: 1.3rem; gap: 4px; }
  .hamburger-menu-item.phone-only { display: flex; }  /* "Pages" opens the hidden sidebar */

  /* lobby: smaller logo and shapes */
  .diagonal-logo { margin-bottom: 10px; }
  .diagonal-logo .app, .diagonal-logo .ssule { font-size: 6.4rem; letter-spacing: 1px; }
  .diagonal-logo .app { transform: translate(-30px, -2px); }
  .diagonal-logo .ssule { transform: translate(20px, 2px); }
  .hero-subtitle { font-size: 1.7rem; padding: 0 18px; margin-top: 6px; }
  .square-green { width: 78px; height: 78px; top: 6%; right: 7%; border-radius: 12px; }
  .pentagon-orange { width: 54px; height: 54px; top: 30%; left: 4%; }
  .triangle-red { --tri-scale: 0.5333; top: 9%; left: 16%; }
  .triangle-red-right { --tri-scale: 0.5333; bottom: 27%; right: 6%; }
  .circle-blue { width: 48px; height: 48px; bottom: 25%; left: 9%; }
  .daily-reward-card { bottom: 14px; right: 14px; padding: 8px 14px; gap: 10px; max-width: calc(100vw - 112px); }
}

/* very small phones: not enough room for the top-bar logo */
@media (max-width: 380px) { .header-logo { display: none; } }