/* FingerWPM mobile layout and soft-keyboard support. */
.mobile-typing-input{
  position:fixed;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  min-width:1px;
  min-height:1px;
  padding:0;
  margin:0;
  border:0;
  opacity:0;
  pointer-events:none;
  resize:none;
  overflow:hidden;
  font-size:16px; /* prevents iOS focus zoom */
  line-height:1;
  transform:translate(-50%,-50%);
  z-index:0;
}

@media (max-width:720px){
  html,body{max-width:100%;overflow-x:hidden}
  .app{
    width:calc(100% - 20px)!important;
    padding-top:8px!important;
  }

  .top-row.site-header{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-height:0!important;
    padding-bottom:10px!important;
  }
  .header-brand{
    width:100%;
    justify-content:center;
    margin:0!important;
  }
  .header-brand .brand-logo,
  .brand-logo{
    height:44px!important;
    max-width:min(230px,72vw)!important;
  }
  .header-nav.app-tools{
    width:100%!important;
    margin:0!important;
    order:initial!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .header-nav.app-tools .header-nav-link,
  .header-nav.app-tools .test-tab{
    min-height:36px!important;
    padding:0 10px!important;
    font-size:12.5px!important;
  }
  .header-icon-btn{
    width:36px!important;
    height:36px!important;
    border-radius:9px!important;
  }
  .auth-login-btn,.auth-user-btn{
    min-height:36px!important;
    font-size:12px!important;
  }
  .auth-login-btn{padding:0 11px!important}
  .auth-user-btn{max-width:132px!important}

  .test-status-bar{
    min-height:0!important;
    padding:10px 0 2px!important;
    overflow:visible!important;
  }
  .test-status-bar .live-stats{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr)) 34px;
    gap:5px!important;
    align-items:center!important;
  }
  .test-status-bar .stat{
    min-width:0;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    text-align:center;
  }
  .test-status-bar .stat-label{font-size:8.5px!important;letter-spacing:.05em!important}
  .test-status-bar .stat-value{font-size:17px!important;min-width:0!important}
  .test-status-bar .restart-btn{width:34px!important;height:34px!important}

  .typing-zone{
    padding-top:14px!important;
    padding-bottom:42px!important;
  }
  .typing-start-hint{
    margin-bottom:9px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .toolbar{
    width:100%;
    margin-bottom:14px!important;
    gap:9px!important;
  }
  .summary{
    width:100%;
    font-size:12px!important;
    line-height:1.35;
  }
  .selects{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px!important;
  }
  .select-wrap{
    min-width:0;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
  }
  .select-label{font-size:9px!important;letter-spacing:.05em!important}
  .simple-select{
    width:100%!important;
    min-width:0!important;
    height:38px;
    padding:7px 24px 7px 8px!important;
    font-size:12px!important;
    background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%!important;
  }

  #words-container{
    width:100%!important;
    height:calc(3.4em + 28px)!important;
    min-height:94px;
    padding:11px 12px!important;
    font-size:clamp(19px,5.2vw,23px)!important;
    line-height:1.7!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  #words-container.rtl{
    font-size:clamp(22px,6vw,28px)!important;
    line-height:1.72!important;
  }
  #words-container.typing-privacy-locked::after{
    font-size:13px!important;
    padding:0 18px;
    text-align:center;
  }

  .certificate-mode-entry{margin-top:18px!important}
  .certificate-mode-actions{display:grid!important;grid-template-columns:1fr!important}
  .certificate-mode-btn{width:100%!important;min-height:40px}
  .certificate-level-scale{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .results{margin-top:38px!important;padding-top:28px!important}
  .results-head{gap:12px!important}
  .result-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metric{padding:14px 10px!important;min-width:0}
}

@media (max-width:420px){
  .app{width:calc(100% - 16px)!important}
  .header-brand .brand-logo,.brand-logo{height:41px!important;max-width:210px!important}
  .header-nav.app-tools{gap:4px!important}
  .header-nav.app-tools .header-nav-link,
  .header-nav.app-tools .test-tab{padding:0 8px!important;font-size:12px!important}
  .header-icon-btn{width:34px!important;height:34px!important}
  .auth-login-btn,.auth-user-btn{min-height:34px!important}
  .test-status-bar .live-stats{grid-template-columns:repeat(4,minmax(0,1fr)) 32px;gap:3px!important}
  .test-status-bar .stat-label{font-size:8px!important}
  .test-status-bar .stat-value{font-size:16px!important}
  .selects{gap:5px!important}
  .simple-select{height:36px;padding-left:6px!important;font-size:11px!important}
  #words-container{min-height:92px;font-size:19px!important;padding:10px!important}
}

@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .top-row.site-header{gap:5px!important}
  .header-brand .brand-logo,.brand-logo{height:36px!important}
  .typing-zone{padding-top:8px!important}
  #words-container{min-height:82px!important}
}