/* GeniusGen mobile polish — Cloudflare build v3 */
html, body { max-width: 100%; overflow-x: hidden; }
.app { width: 100%; max-width: 100%; overflow-x: hidden; }

@media screen and (max-width: 600px) {
  body > .app > header {
    width: 100%;
    min-height: 64px;
    height: auto;
    padding: 8px 10px;
    gap: 6px;
    box-sizing: border-box;
  }

  body > .app > header .logo {
    flex: 0 0 auto;
    min-width: 38px;
    max-width: 38px;
    padding: 0;
    margin: 0;
    gap: 0;
  }

  body > .app > header .logo img {
    width: 38px;
    height: 38px;
    display: block;
    margin: 0 auto;
  }

  body > .app > header .logo-word { display: none; }

  body > .app > header .header-actions {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 4px;
  }

  body > .app > header .language-toggle {
    min-width: 39px;
    padding: 6px 8px;
    font-size: .76rem;
    line-height: 1;
  }

  body > .app > header .top-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
  }

  body > .app > header .top-icon svg { width: 17px; }
  body > .app > header .top-icon.reward { display: none; }
  body > .app > header .kid-switch { display: none; }

  body > .app > header .profile {
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 4px;
    margin-left: 0;
    font-size: .72rem;
  }

  body > .app > header .profile i {
    width: 32px;
    height: 32px;
    font-size: .95rem;
  }

  body > .app > header .profile span { display: none; }

  body > .app > main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 12px 108px;
    box-sizing: border-box;
  }

  .bonus-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 2px;
  }

  .bonus-head {
    align-items: center !important;
    text-align: center;
    gap: 12px;
    margin: 2px auto 18px;
  }

  .bonus-head > div:first-child { width: 100%; }
  .bonus-head h1 {
    margin: 4px 0 6px;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.05;
  }
  .bonus-head p {
    max-width: 330px;
    margin: 0 auto;
    font-size: .88rem;
    line-height: 1.45;
  }

  .bonus-count {
    width: min(100%, 250px);
    min-width: 0;
    margin: 0 auto;
    padding: 11px 16px;
    border-radius: 16px;
  }
  .bonus-count b { font-size: 1.55rem; }
  .bonus-count span { font-size: .78rem; }

  .bonus-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto;
  }

  .bonus-grid article {
    min-width: 0;
    width: 100%;
    border-radius: 18px;
    padding: 8px;
    box-sizing: border-box;
  }

  .bonus-cover {
    width: 100%;
    min-width: 0;
    border-radius: 14px;
    padding: 10px 8px 11px;
    align-items: center;
    text-align: center;
  }

  .bonus-cover span {
    width: 100%;
    min-height: 88px;
    margin: auto 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bonus-cover span img {
    width: 86px !important;
    height: 86px !important;
    max-width: 75%;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }

  .bonus-cover small {
    font-size: .62rem;
    line-height: 1.2;
    letter-spacing: .08em;
  }

  .bonus-cover strong {
    width: 100%;
    min-height: 2.15em;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .91rem;
    line-height: 1.08;
  }

  .bonus-cover i {
    margin-top: 6px;
    font-size: .53rem;
    line-height: 1.2;
  }

  .bonus-info {
    padding: 9px 3px 3px;
    text-align: center;
  }

  .bonus-status { margin: 0 auto; }

  .bonus-info h2 {
    min-height: 2.2em;
    margin: 7px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1.12;
  }

  .bonus-info p {
    min-height: 3.2em;
    margin: 4px 0 9px;
    font-size: .72rem;
    line-height: 1.4;
  }

  .bonus-info > div {
    width: 100%;
    flex-direction: column;
    gap: 6px;
  }

  .bonus-info button,
  .bonus-info a {
    width: 100%;
    min-height: 39px;
    padding: 8px 7px;
    font-size: .73rem;
    line-height: 1.15;
  }

  body > .app > nav {
    width: calc(100% - 12px);
    max-width: 460px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 7px 5px;
    border-radius: 18px;
  }

  body > .app > nav button {
    min-width: 0;
    width: auto;
    flex: 1 1 0;
    padding: 7px 2px;
  }

  body > .app > nav button span { font-size: 10px; }
}

@media screen and (max-width: 360px) {
  body > .app > header .top-icon.profiles { display: none; }
  body > .app > header .profile { font-size: .68rem; }
  .bonus-grid { gap: 8px; }
  .bonus-grid article { padding: 7px; }
  .bonus-cover span img { width: 76px !important; height: 76px !important; }
}

/* v4 — mobile encyclopedia reader polish */
@media screen and (max-width: 700px) {
  html, body, .gge-overlay {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .gge-overlay {
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* Compact, balanced reader toolbar */
  .gge-toolbar {
    min-height: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
    gap: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px !important;
    align-items: stretch !important;
  }

  .gge-toolbar > div {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .gge-toolbar > div img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .gge-toolbar > div span {
    min-width: 0 !important;
  }

  .gge-toolbar > div b {
    font-size: .98rem !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  .gge-toolbar > div small {
    margin-top: 3px !important;
    font-size: .72rem !important;
    line-height: 1.25 !important;
  }

  .gge-toolbar button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    font-size: .74rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .gge-toolbar .gge-close {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
  }

  /* Reader becomes a natural mobile article instead of a squeezed A4 page */
  .gge-reader {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 44px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .gge-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    padding: 22px 18px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-shadow: 0 8px 24px rgba(31, 52, 79, .10) !important;
  }

  .gge-page:before {
    width: 6px !important;
  }

  /* Header: icon | title | topic icon, no collisions */
  .gge-page > header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 0 0 14px !important;
  }

  .gge-page > header > span {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
  }

  .gge-page > header > div {
    min-width: 0 !important;
  }

  .gge-page header small {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: .66rem !important;
    line-height: 1.2 !important;
    letter-spacing: .07em !important;
  }

  .gge-page h2,
  .gge-page > header h2 {
    margin: 0 !important;
    font-size: 1.28rem !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
    overflow-wrap: anywhere !important;
  }

  .gge-page > header p {
    margin: 4px 0 0 !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  .gge-page > header > b {
    align-self: center !important;
    font-size: 1.65rem !important;
    line-height: 1 !important;
  }

  /* Body typography */
  .gge-lead {
    margin: 18px 0 !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }

  .gge-page h3 {
    margin-top: 0 !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  .gge-page p,
  .gge-page li,
  .gge-pair p,
  .gge-guide p,
  .gge-intro aside p {
    font-size: .90rem !important;
    line-height: 1.5 !important;
  }

  .gge-goal {
    margin: 16px 0 !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
  }

  .gge-goal p {
    margin-top: 5px !important;
  }

  /* Visual cards */
  .gge-visual {
    min-height: 0 !important;
    margin-top: 14px !important;
    padding: 15px !important;
    gap: 10px !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  .gge-visual img {
    width: 96px !important;
    height: 96px !important;
    max-width: 34vw !important;
  }

  .gge-visual small {
    margin-bottom: 6px !important;
    font-size: .63rem !important;
    line-height: 1.2 !important;
  }

  .gge-visual strong {
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }

  .gge-facts {
    margin-top: 16px !important;
  }

  .gge-facts p {
    gap: 9px !important;
    padding: 9px 0 !important;
    font-size: .88rem !important;
    line-height: 1.45 !important;
  }

  .gge-facts i {
    flex-basis: 26px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: .78rem !important;
  }

  .gge-pair,
  .gge-guide {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .gge-pair section,
  .gge-guide section {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .gge-guide section > b {
    font-size: 1.65rem !important;
  }

  .gge-intro aside,
  .gge-check {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 14px !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }

  /* Mobile contents list */
  .gge-contents > div {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 16px !important;
  }

  .gge-contents button {
    min-height: 54px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    padding: 9px 10px !important;
    border-radius: 11px !important;
  }

  .gge-contents button span {
    font-size: 1.2rem !important;
  }

  .gge-contents button b {
    font-size: .80rem !important;
    line-height: 1.25 !important;
  }

  .gge-contents button small {
    font-size: .66rem !important;
    line-height: 1.2 !important;
  }

  /* Footer participates in document flow; never covers content */
  .gge-page > footer {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(117, 145, 158, .18) !important;
    gap: 10px !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
  }

  /* Covers remain premium, but no giant desktop typography */
  .gge-cover {
    min-height: calc(100svh - 205px) !important;
    padding: 30px 18px !important;
    justify-content: center !important;
  }

  .gge-cover > img {
    width: 178px !important;
    height: 178px !important;
    max-width: 58vw !important;
  }

  .gge-cover > small {
    margin-top: 18px !important;
    font-size: .65rem !important;
    line-height: 1.3 !important;
    letter-spacing: .14em !important;
  }

  .gge-cover h1,
  .ane-cover h1,
  .lme-cover h1,
  .ffe-cover h1,
  .ihe-cover h1,
  .dae-cover h1,
  .cte-cover h1,
  .spe-cover h1 {
    margin: 14px 0 !important;
    font-size: 2.35rem !important;
    line-height: .98 !important;
    overflow-wrap: normal !important;
  }

  .gge-cover > p {
    margin: 0 !important;
    max-width: 310px !important;
    font-size: .93rem !important;
    line-height: 1.45 !important;
  }

  .gge-cover > div {
    margin-top: 14px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .gge-cover > div b {
    padding: 7px 9px !important;
    font-size: .65rem !important;
  }
}

@media screen and (max-width: 380px) {
  .gge-reader { padding: 8px !important; }
  .gge-page { padding: 19px 15px 18px !important; }
  .gge-page > header { grid-template-columns: 40px minmax(0,1fr) auto !important; gap: 8px !important; }
  .gge-page > header > span { width: 40px !important; height: 40px !important; }
  .gge-page h2, .gge-page > header h2 { font-size: 1.18rem !important; }
  .gge-lead { font-size: .93rem !important; }
  .gge-toolbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 46px !important; }
  .gge-toolbar .gge-close { width: 46px !important; min-width: 46px !important; max-width: 46px !important; }
}