html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
}

.page,
.shell{
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}

.page{
  padding-top:max(20px, env(safe-area-inset-top));
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

.shell{
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

button,
input,
select,
textarea,
.tab,
.action,
.open-link,
.ghost-toggle,
.quiz-btn,
.primary-btn,
.secondary-btn,
.mode-btn,
.nav-link,
.small-btn,
.audio-btn,
.toggle,
.choice,
.quiz-option{
  min-height:44px;
}

input,
select,
textarea{
  font-size:16px !important;
}

.hero,
.section,
.lesson-section,
.panel,
.card,
.page-card,
.modal-card,
.quiz-card,
.license-card,
.part,
.question,
.rule-box,
.detail-box,
.line,
.empty{
  overflow-wrap:anywhere;
}

.tabs{
  scroll-snap-type:x proximity;
}

.tab{
  scroll-snap-align:start;
}

.hero-actions > *,
.nav-row > *,
.row > *,
.online-actions > *,
.actions > *{
  min-width:0;
}

.status-pill,
.pill,
.score-pill,
.lesson-meta,
.meta-chip,
.chip,
.lesson-chip,
.stat{
  max-width:100%;
  white-space:normal;
}

@media (max-width:820px){
  .hero{
    align-items:flex-start;
  }

  .hero-main{
    width:100%;
    align-items:flex-start;
  }

  .hero-actions{
    width:100%;
  }

  .hero-actions > *,
  .nav-row > *,
  .row > *,
  .online-actions > *,
  .actions > *{
    flex:1 1 180px;
  }

  .section-head,
  .set-head,
  .lesson-head,
  .online-head,
  .status,
  .status-row,
  .card-top,
  .card-actions{
    align-items:flex-start;
  }

  .panel-header,
  .panel-head{
    align-items:flex-start;
  }

  .control-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .modal-body{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:640px){
  .page{
    padding-top:max(14px, env(safe-area-inset-top));
    padding-bottom:max(24px, env(safe-area-inset-bottom));
  }

  .hero{
    padding:16px !important;
    border-radius:20px;
  }

  .section,
  .lesson-section,
  .panel,
  .card,
  .page-card{
    border-radius:16px;
  }

  .hero h1,
  h1{
    line-height:1.15;
  }

  .hero p,
  .lead{
    font-size:.9rem;
  }

  .control-grid,
  .page-grid,
  .grid.cols-4,
  .grid.cols-3{
    grid-template-columns:1fr !important;
  }

  .grid.cols-5{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .card,
  .question,
  .part,
  .rule-box,
  .detail-box,
  .line{
    padding:12px;
  }

  .modal,
  .quiz-overlay{
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .modal-head,
  .quiz-head,
  .modal-meta,
  .quiz-body{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .modal-visual,
  .stroke-wrap,
  .stroke-host{
    min-height:220px !important;
    padding:14px !important;
  }

  .modal-glyph,
  .modal-combo > .glyph-part{
    width:min(72vw, 220px) !important;
    height:min(72vw, 220px) !important;
  }

  .modal-combo > .glyph-part.small{
    width:min(42vw, 128px) !important;
    height:min(42vw, 128px) !important;
    margin-left:-12px !important;
    margin-top:34px !important;
  }

  .modal-number{
    font-size:min(18vw, 3rem) !important;
  }

  .modal-kanji,
  .modal-particle,
  .kanji-big{
    font-size:min(12vw, 2.2rem) !important;
  }

  .quiz-question .value{
    font-size:min(12vw, 1.8rem) !important;
  }

  .jp-line,
  .example,
  .modal-example,
  .qtext,
  .context{
    font-size:.94rem !important;
    line-height:1.65 !important;
  }
}

@media (max-width:420px){
  .hero-actions > *,
  .nav-row > *,
  .row > *,
  .online-actions > *{
    flex:1 1 100%;
  }

  .grid.cols-5{
    gap:8px;
  }

  .card{
    min-height:auto !important;
  }

  .glyph-box{
    width:54px;
    height:54px;
  }

  .glyph-part{
    width:42px;
    height:42px;
  }

  .glyph-part.small{
    width:28px;
    height:28px;
    margin-left:-5px;
    margin-top:8px;
  }
}