/* ===========================================
   Mobile & Tablet Styles (≤1024px)
   Desktop (>1024px) never loads this file.
   =========================================== */

/* ======== TABLET BASE: ≤1024px ======== */

nav { padding: 0.8rem 1.2rem; }
nav .logo { font-size: 1.15rem; }
nav .nav-links { gap: 0.5rem; }
nav .nav-links a,
nav .nav-links button { font-size: 0.82rem; padding: 0.35rem 0.6rem; }
nav .nav-links .btn-gold { padding: 0.4rem 1rem; font-size: 0.82rem; }

.page { padding: 1.5rem 1rem; }

.welcome-hero { padding: 2rem 0.5rem; }
.welcome-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); white-space: normal; }
.welcome-hero .subtitle { font-size: 0.95rem; }
.welcome-hero .powered-by { font-size: 0.75rem; }

.birthday-box { padding: 1.5rem; }
.birthday-box h3 { font-size: 1rem; }
.birthday-inputs input { font-size: 1rem; padding: 0.7rem 0.5rem; }
.birthday-inputs input#birth-year,
.birthday-inputs input#reg-year { width: 5.5rem; }
.birthday-inputs input#birth-month,
.birthday-inputs input#reg-month { width: 5rem; }
.birthday-inputs input#birth-day,
.birthday-inputs input#reg-day { width: 5rem; }
.birthday-box .btn-reveal { padding: 0.8rem; font-size: 1rem; }
.birthday-box .skip-link { font-size: 0.78rem; }

.tianshi-bar { font-size: 0.8rem; padding: 0.6rem 0.8rem; gap: 0.5rem; }

.lottery-bar { gap: 0.4rem; }
.lottery-bar button { padding: 0.45rem 0.8rem; font-size: 0.8rem; }

.last-draw { font-size: 0.78rem; }

.upgrade-cta { padding: 1rem 1.2rem; }
.upgrade-cta p { font-size: 0.85rem; }

#grid.multi {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.8rem;
}
.card { padding: 1rem; }
.card h3 { font-size: 1.05rem; }
.card .mode-desc { font-size: 0.75rem; min-height: auto; }
.card .mode-slogan { font-size: 0.73rem; min-height: auto; }
.card .balls { min-height: auto; }
.card .elem-row { min-height: auto; }

.balls { gap: 0.3rem; }
.ball { width: 2.2rem; height: 2.2rem; font-size: 0.85rem; }
.ball-spacer { width: 0.5rem; }

.auth-card { padding: 1.5rem; max-width: 420px; }
.auth-card h2 { font-size: 1.2rem; }
.auth-card .form-group { margin-bottom: 0.85rem; }
.auth-card label { font-size: 0.82rem; }
.auth-card input,
.auth-card select { padding: 0.65rem 0.8rem; font-size: 1rem; }
.auth-card .btn-submit { padding: 0.75rem; font-size: 0.95rem; }
.auth-card .auth-switch,
.auth-card .auth-forgot,
.auth-card .auth-terms { font-size: 0.78rem; }

.profile-grid { gap: 1rem; }
.profile-card { padding: 1.2rem; }
.profile-tab { font-size: 0.75rem; padding: 0.3rem 0.8rem; }
.history-item { font-size: 0.85rem; }
.bazi-chart { font-size: 0.85rem; }

.terms-content { padding: 0 0.5rem; }
.terms-content h1 { font-size: 1.5rem; }
.terms-content h2 { font-size: 1.05rem; }
.terms-content p { font-size: 0.85rem; }

.suggest-section { padding: 1.2rem; margin-top: 2.5rem; }
.suggest-input input { font-size: 1rem; padding: 0.65rem 0.8rem; }
.suggest-item { font-size: 0.85rem; }
.suggest-meta { gap: 0.8rem; }
.suggest-disclaimer { font-size: 0.7rem; }
.suggest-tos { font-size: 0.7rem; }

footer { padding: 1.5rem 1rem; font-size: 0.72rem; }

.save-drawer { padding: 1.2rem 1.2rem calc(1.8rem + env(safe-area-inset-bottom, 0px)); }

.universe-btn { font-size: 0.88rem; padding: 0.6rem 1.5rem; }

#random-result { padding: 1.2rem; }


/* ==========================================
   PHONE: ≤480px
   ========================================== */
@media (max-width: 480px) {

  /* ---- Hamburger & Nav ---- */
  .hamburger {
    display: block;
    background: none; border: none;
    color: var(--text); font-size: 1.4rem;
    cursor: pointer; padding: 0.2rem 0.4rem; line-height: 1;
  }
  nav .nav-links { display: none; }
  nav {
    padding: 0.6rem 0.8rem;
    display: flex; justify-content: space-between; align-items: center;
  }
  nav .logo { font-size: 1rem; }

  /* ---- Mobile Drawer ---- */
  .mobile-overlay {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 999;
  }
  .mobile-overlay.open { display: block; }

  .mobile-drawer {
    display: block;
    position: fixed; top: 0; right: -280px; width: 260px; height: 100%;
    background: var(--bg); z-index: 1000;
    transition: right 0.26s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.5);
    padding: 1rem;
  }
  .mobile-drawer.open { right: 0; }

  .mobile-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600; color: var(--gold);
  }
  .mobile-drawer-close {
    background: none; border: none; color: var(--text);
    font-size: 1.5rem; cursor: pointer; padding: 0.2rem 0.4rem;
  }
  .mobile-drawer-body a,
  .mobile-drawer-body button {
    display: block; width: 100%; padding: 0.8rem 0.6rem;
    border: none; background: none; color: var(--text);
    text-align: left; font-size: 1rem; font-family: inherit;
    cursor: pointer; border-radius: 0.5rem; text-decoration: none;
  }
  .mobile-drawer-body a:hover,
  .mobile-drawer-body button:hover { background: rgba(255,255,255,0.05); }
  .mobile-drawer-body .btn-gold {
    display: inline-block; width: auto; margin-top: 0.4rem;
  }
  .mobile-drawer-body .lang-trigger {
    margin-top: 0.5rem; font-size: 0.9rem;
  }

  /* ---- General Layout ---- */
  body { overflow-x: hidden; }
  main { overflow-x: hidden; }
  .page {
    padding: 0.8rem 0.5rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ---- Welcome ---- */
  .welcome-hero { padding: 1.5rem 0.3rem; }
  .welcome-hero h1 { font-size: 1.6rem; white-space: normal; }
  .welcome-hero .subtitle { font-size: 0.82rem; white-space: normal; }
  .welcome-hero .powered-by { font-size: 0.65rem; }
  .birthday-box { padding: 1rem 0.7rem; margin: 0.8rem auto; max-width: 100%; }
  .birthday-box h3 { font-size: 0.95rem; }
  .birthday-inputs { gap: 0.25rem; }
  .birthday-inputs input { padding: 0.6rem 0.35rem; font-size: 16px; }
  .birthday-inputs input#birth-year,
  .birthday-inputs input#reg-year { width: 5rem; }
  .birthday-inputs input#birth-month,
  .birthday-inputs input#reg-month { width: 4.5rem; }
  .birthday-inputs input#birth-day,
  .birthday-inputs input#reg-day { width: 4.5rem; }
  .btn-reveal { padding: 0.7rem 1.5rem; font-size: 0.9rem; }
  .skip-link { font-size: 0.72rem; }
  .cta-tagline { margin: 0.6rem 0 0.8rem; }
  .cta-slogan { font-size: 0.78rem; }
  .cta-disclaimer { font-size: 0.65rem; }
  .element-display { font-size: 1.3rem; }

  /* ---- Tianshi ---- */
  .tianshi-bar { font-size: 0.72rem; gap: 0.35rem; padding: 0.5rem 0.6rem; }

  /* ---- Lottery Bar ---- */
  .lottery-bar { gap: 0.3rem; }
  .lottery-bar button { padding: 0.4rem 0.55rem; font-size: 0.72rem; }

  /* ---- Last Draw ---- */
  .last-draw { font-size: 0.72rem; }
  .last-draw .ball-mini {
    width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
    font-size: 0.55rem; margin: 0 0.08rem;
  }

  /* ---- Upgrade CTA ---- */
  .upgrade-cta { padding: 0.9rem 0.8rem; margin: 0.6rem 0; }
  .upgrade-cta p { font-size: 0.8rem; }

  /* ---- Cards / Grid ---- */
  #grid { margin-top: 0.3rem; }
  #grid.multi {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }
  #grid.single .card { max-width: 100%; }
  .card { padding: 0.4rem 0.3rem; border-radius: 0.5rem; }
  .card h3 { font-size: 0.62rem; margin-bottom: 0.1rem; }
  .card .mode-desc { font-size: 0.48rem; margin-bottom: 0.2rem; line-height: 1.2; }
  .card .mode-slogan { font-size: 0.48rem; margin-top: 0.15rem; line-height: 1.2; }
  .card .save-btn { top: 0.15rem; right: 0.15rem; font-size: 0.72rem; }

  .balls { gap: 0.1rem; margin: 0.15rem 0; }
  .ball { width: 1rem; height: 1rem; font-size: 0.5rem; }
  .ball-spacer { width: 0.22rem; }
  .elem-row { gap: 0.1rem; margin: 0.1rem 0; }
  .elem-tag { font-size: 0.4rem; padding: 0.04rem 0.12rem; border-radius: 0.15rem; }
  .card-actions { padding-top: 0.15rem; }
  .copy-btn { opacity: 1; font-size: 0.5rem; }

  /* ---- Auth Cards ---- */
  .auth-card {
    padding: 1.1rem 0.9rem;
    margin: 0.3rem auto;
    border-radius: 0.9rem;
    max-width: 100%;
  }
  .auth-card h2 { font-size: 1.15rem; margin-bottom: 0.9rem; }
  .auth-card .form-group { margin-bottom: 0.6rem; }
  .auth-card label { font-size: 0.78rem; }
  .auth-card input,
  .auth-card select {
    padding: 0.55rem 0.6rem;
    font-size: 16px;
    width: 100%;
  }
  .auth-card .btn-submit { padding: 0.65rem; font-size: 0.9rem; }
  .auth-card .auth-switch,
  .auth-card .auth-forgot,
  .auth-card .auth-terms { font-size: 0.7rem; }
  .auth-card .error-msg { font-size: 0.75rem; margin-bottom: 0.6rem; }
  .auth-card .gender-why { font-size: 0.68rem; }
  #page-register .auth-card > p { font-size: 0.75rem; margin-bottom: 0.5rem; }

  /* ---- Profile ---- */
  .profile-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .profile-card { padding: 0.9rem; }
  .profile-card h3 { font-size: 0.95rem; }
  .profile-tabs {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
  }
  .profile-tab {
    white-space: nowrap;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
  }
  .history-item { padding: 0.5rem 0; font-size: 0.8rem; }
  .history-meta { font-size: 0.68rem; }
  .bazi-chart { font-size: 0.8rem; line-height: 1.9; }
  .guide-card { font-size: 0.75rem; }
  .guide-item { padding: 0.45rem 0.55rem; }
  .guide-row { font-size: 0.7rem; }
  .guide-alert-item { font-size: 0.7rem; }
  .hist-del { top: 0.2rem; right: 0.2rem; font-size: 0.72rem; }
  .load-more-btn { font-size: 0.72rem; padding: 0.35rem; }

  /* ---- Terms & Privacy ---- */
  .terms-content { padding: 0; }
  .terms-content h1 { font-size: 1.3rem; margin-bottom: 1rem; }
  .terms-content h2 { font-size: 0.95rem; margin-top: 1rem; }
  .terms-content p { font-size: 0.8rem; line-height: 1.55; }

  /* ---- Suggestions ---- */
  .suggest-section { padding: 0.9rem; margin-top: 1.5rem; }
  .suggest-section h3 { font-size: 0.9rem; }
  .suggest-input { flex-direction: column; gap: 0.35rem; }
  .suggest-input input { font-size: 16px; padding: 0.55rem 0.6rem; }
  .suggest-input button { padding: 0.55rem 1rem; font-size: 0.82rem; }
  .suggest-item { font-size: 0.8rem; flex-wrap: wrap; }
  .suggest-item .vote-btn { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
  .suggest-meta { flex-direction: column; gap: 0.25rem; }
  .suggest-disclaimer { white-space: normal; font-size: 0.65rem; }
  .suggest-tos { font-size: 0.65rem; }
  .suggest-author { font-size: 0.68rem; }
  .suggest-toggle { font-size: 0.72rem; }
  .delete-suggest-btn { font-size: 0.85rem; }

  /* ---- Universe Button ---- */
  .universe-btn {
    width: calc(100% - 1rem);
    max-width: 300px;
    font-size: 0.8rem;
    padding: 0.55rem 0.8rem;
  }

  /* ---- Random Result ---- */
  #random-result { padding: 0.8rem; border-radius: 0.8rem; }

  /* ---- Footer ---- */
  footer { padding: 1rem 0.6rem; font-size: 0.68rem; line-height: 1.5; }

  /* ---- Toast ---- */
  .toast { width: 90%; max-width: 300px; font-size: 0.8rem; padding: 0.55rem 0.9rem; }

  /* ---- Save Drawer ---- */
  .save-drawer {
    border-radius: 1.2rem 1.2rem 0 0;
    padding: 0.9rem 0.9rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  }
  .drawer-msg { font-size: 0.82rem; }
  .drawer-btn { font-size: 0.8rem; padding: 0.55rem 1.3rem; }

  /* ---- Misc ---- */
  .lang-menu { min-width: 90px; }
  #loading { padding: 1.5rem; }
  .particle { font-size: 0.65rem; }
}