/* Mobile and small-tablet refinement layer */
html{
  -webkit-text-size-adjust:100%;
}

button,
input,
select{
  font:inherit;
}

button{
  touch-action:manipulation;
}

.choice,
.action-target,
.avatar-option,
.drag-item,
.sequence-item,
.primary,
.secondary,
.stat-help{
  -webkit-tap-highlight-color:rgba(50,213,196,.22);
}

@media(max-width:980px){
  .topbar{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    padding:14px 18px;
  }

  .brand{
    min-width:0;
  }

  .status{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    width:100%;
  }

  .stat-help{
    min-height:48px;
    padding:8px 6px;
    border-radius:8px;
    background:#0b2434;
    border:1px solid #ffffff18;
    line-height:1.15;
    white-space:normal;
    text-align:center;
  }

  .stat-help b,
  .stat-help small{
    display:block;
    margin:3px 0 0;
  }

  .header-profile.active{
    grid-column:1 / -1;
    justify-self:stretch;
    max-width:none;
    width:100%;
  }

  .profile-action{
    display:block;
    max-width:none;
    -webkit-line-clamp:2;
  }

  main{
    width:min(100% - 28px,1180px);
    padding:20px 0 78px;
  }

  .scenario-card{
    padding:20px;
  }

  .scenario-head{
    margin:-20px -20px 0;
    padding:20px;
  }

  .scenario-head h2{
    font-size:clamp(22px,4.5vw,28px);
  }

  .scenario-body{
    padding:20px 0;
  }

  .choices{
    gap:10px;
  }

  .choice{
    min-height:58px;
    align-items:flex-start;
    padding:16px 14px;
  }

  .choice:hover,
  .choice:focus{
    transform:none;
  }

  .learning-brief ul{
    padding-left:20px;
  }
}

@media(max-width:760px){
  body{
    overflow-x:hidden;
  }

  .app-shell{
    min-height:100svh;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:50;
    grid-template-columns:1fr;
    padding:12px 14px;
  }

  .brand-mark{
    width:38px;
    height:38px;
    flex:0 0 auto;
  }

  .brand strong{
    font-size:16px;
  }

  .brand small{
    display:block;
    font-size:10px;
  }

  .status{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .stat-help{
    font-size:11px;
    min-height:44px;
  }

  .header-profile{
    margin:0;
    padding:8px 10px;
  }

  .header-profile .stage-avatar{
    font-size:30px;
  }

  .profile-identity{
    min-width:0;
    max-width:none;
  }

  .header-profile span{
    max-width:100%;
    white-space:normal;
  }

  .profile-action{
    font-size:10px;
  }

  .screen#welcome.active,
  .character-screen.active{
    display:block;
  }

  .hero-copy,
  .mission-card,
  .character-intro,
  .character-builder{
    width:100%;
  }

  .hero-copy{
    padding:4px 0 18px;
  }

  .hero-copy h1,
  .character-intro h1,
  .result-screen h1{
    font-size:clamp(34px,10vw,48px);
  }

  .hero-copy>p:not(.eyebrow),
  .character-intro>p:last-child{
    font-size:16px;
    line-height:1.55;
  }

  .mission-card{
    min-height:0;
    padding:24px;
  }

  .character-builder{
    padding:18px;
  }

  .avatar-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }

  .avatar-option{
    min-height:58px;
    padding:8px 4px;
  }

  .avatar-option span{
    font-size:30px;
  }

  .text-input{
    min-height:48px;
    font-size:16px;
  }

  .primary,
  .secondary{
    min-height:48px;
    width:100%;
  }

  .progress-row{
    gap:10px;
    margin-bottom:12px;
  }

  .progress-row span:first-child{
    max-width:34%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .scenario-card{
    padding:16px;
  }

  .scenario-head{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:center;
    margin:-16px -16px 0;
    padding:16px;
  }

  .channel-icon{
    width:42px;
    height:42px;
    font-size:19px;
  }

  .scenario-head h2{
    font-size:23px;
    line-height:1.15;
  }

  .scenario-head time{
    font-size:12px;
  }

  .scenario-body{
    font-size:15px;
    line-height:1.55;
  }

  .message{
    padding:15px;
  }

  .challenge-meta{
    gap:8px;
    flex-wrap:wrap;
    font-size:11px;
  }

  .choices{
    display:grid;
    grid-template-columns:1fr;
  }

  .choice{
    width:100%;
    min-height:60px;
    padding:15px;
  }

  .choice span{
    flex:0 0 auto;
  }

  .feedback.show{
    padding:15px;
  }

  #actionSubmit:not(.hidden){
    right:14px;
    left:14px;
    bottom:14px;
    width:auto;
    max-width:none;
    border-radius:10px;
  }

  .next{
    margin-top:16px;
  }

  footer{
    padding:10px 14px;
    gap:10px;
  }
}

@media(max-width:560px){
  .status{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .header-profile.active{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px 10px;
  }

  .profile-action{
    grid-column:1 / -1;
    margin:2px 0 0;
    padding:8px 0 0;
    border-left:0;
    border-top:2px solid var(--cyan);
  }

  .header-profile.good .profile-action{
    border-top-color:var(--ok);
  }

  .header-profile.bad .profile-action{
    border-top-color:var(--danger);
  }

  .avatar-grid{
    grid-template-columns:repeat(5,minmax(44px,1fr));
  }

  .avatar-option span{
    font-size:27px;
  }

  .scenario-head{
    grid-template-columns:38px 1fr;
  }

  .scenario-head time{
    grid-column:2;
    margin-left:0;
  }

  .channel-icon{
    width:38px;
    height:38px;
  }

  .visual-grid{
    grid-template-columns:1fr;
  }

  .visual-grid .action-target{
    grid-template-rows:112px auto;
  }

  .mail-sim .action-target{
    display:block;
    min-height:58px;
    padding:13px 14px;
  }

  .drop-zones{
    grid-template-columns:1fr;
  }

  .drag-bank{
    display:grid;
    grid-template-columns:1fr;
  }

  .drag-item{
    width:100%;
    min-height:44px;
    text-align:left;
  }

  .sequence-item{
    align-items:flex-start;
  }

  .sequence-controls{
    margin-left:auto;
  }

  .competencies{
    grid-template-columns:1fr;
  }

  .stat-dialog-card{
    width:calc(100vw - 28px);
    max-height:calc(100svh - 28px);
    overflow:auto;
  }
}

@media(max-width:380px){
  main{
    width:calc(100% - 20px);
  }

  .topbar{
    padding:10px;
  }

  .status{
    grid-template-columns:1fr 1fr;
  }

  .avatar-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .scenario-card{
    padding:14px;
  }

  .scenario-head{
    margin:-14px -14px 0;
    padding:14px;
  }
}