/* Device fixes: login hero, narrow phones, short screens, big tablets */
.login .hero .logo svg { width: 40px; height: 40px }
.login .hero { justify-content: flex-start }
.login .hero h1 { z-index: 1 }
.login .hero .herobg { position: relative; margin-top: auto; pointer-events: none }
.login .hero svg.bg { position: static; display: block; width: 100%; height: auto; max-height: 34vh }
@media (max-width: 899px) {
  .login .hero { min-height: 0; padding-bottom: 8px; gap: 14px }
  .login .hero h1 { font-size: clamp(30px, 9vw, 44px) }
  .login .hero .herobg { margin: 4px -24px 0; width: calc(100% + 48px) }
  .login .hero svg.bg { max-height: 150px }
  .login .form { align-items: flex-start; padding-top: 18px }
}
@media (min-width: 900px) { .login .hero svg.bg { max-height: 46vh } }

/* phones: the top bar keeps only the logo mark when space is short */
@media (max-width: 430px) {
  .topbar { gap: 6px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)) }
  .topbar .logo b { display: none }
  .iconbtn { min-width: 42px; height: 42px; padding: 0 10px }
  .main { gap: 18px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)) }
  .panel { border-radius: 22px; padding: 16px }
  h1 { font-size: clamp(26px, 8vw, 32px) }
  .head { align-items: flex-start }
  .head .row, .head > .btn { width: 100% }
  .head > .btn, .head .row > .btn, .head .row > select { flex: 1 1 auto }
  .grid-home { gap: 16px }
  .cards { gap: 14px }
  .xpcard { gap: 12px }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -14px; padding-inline: 14px; scrollbar-width: none }
  .tabs::-webkit-scrollbar { display: none }
  .tab { white-space: nowrap; flex: none }
  .unit { grid-template-columns: 30px minmax(0, 1fr); row-gap: 8px }
  .unit .uright { grid-column: 2; justify-content: flex-start }
  .st { min-width: 0; padding: 0 12px }
  .lessons li { gap: 8px }
  .lessons li > .row { grid-column: 1 / -1 }
  .mod > button.mhead { padding: 14px; gap: 10px }
  .stage .gbody { gap: 18px }
  .opts { gap: 10px }
  .opt, .tile { min-height: 58px; font-size: 17px; border-radius: 16px }
  .match { gap: 10px }
  .gcard { height: 260px }
  .verdict { flex-wrap: wrap; padding: 14px }
  .verdict .gbtn { width: 100% }
  .excard { padding: 14px; border-radius: 20px }
  .exitems { padding-left: 20px; font-size: 16px; line-height: 1.9 }
  .modal { padding: 24px 18px; border-radius: 26px }
  .sdots { gap: 5px }
  .acc th, .acc td { padding: 12px 14px }
}
/* very small phones (320–359 px) */
@media (max-width: 359px) {
  .nav a { font-size: 10px; padding: 6px 2px }
  .opts { grid-template-columns: minmax(0, 1fr) }
  .match { gap: 8px }
  .tile { font-size: 15px; padding: 6px }
  .stage { padding: 14px }
}
/* phones held sideways and short laptop screens */
@media (max-height: 520px) and (orientation: landscape) {
  .shell { padding-bottom: calc(60px + env(safe-area-inset-bottom)) }
  .nav a { min-height: 44px; flex-direction: row; gap: 6px; font-size: 12px }
  .nav a svg { width: 20px; height: 20px }
  .stage { min-height: calc(100dvh - 120px) }
  .stage .gbody { padding-block: 10px; gap: 14px }
  .gcard { height: 200px }
  .stage .say.huge { width: 84px; height: 84px }
  .login .hero { display: none }
}
/* tablets in portrait: give the stage and lessons more room */
@media (min-width: 700px) and (max-width: 1023px) {
  .main { padding-inline: 28px }
  .stage { min-height: calc(100dvh - 190px) }
}
/* iOS: stop zoom on focus by keeping inputs at 16px or more */
input, select, textarea { font-size: max(16px, 1em) }
.login .hero .logo svg rect { fill: #1f1d2b }