/* Mobile overrides for TapeType trainer (desktop untouched) */
:root{
  --textBoxH: 46vh;
}

/* Safe area + spacing */
body{
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.container{
  padding-left: 12px;
  padding-right: 12px;
}

/* Ensure virtual keyboard can appear (iOS hates offscreen inputs) */
#ghostInput{
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0.01 !important;
  pointer-events: none !important;
}

/* Add a small top nav for mobile version */
.mobile-nav{
  display:flex;
  gap:10px;
  margin: 10px 0 6px;
}
.mobile-nav__btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
}

/* Toolbar & stats: make them scroll instead of wrapping into chaos */
.toolbar{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.toolbar-left, .toolbar-right{
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.toolbar-left::-webkit-scrollbar,
.toolbar-right::-webkit-scrollbar{ display:none; }

.stats{
  display:flex;
  gap:10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.stats::-webkit-scrollbar{ display:none; }
.pill{ min-width: 140px; }

/* Textbox: bigger + better touch feel */
.text-box{
  height: var(--textBoxH);
  border-radius: 18px;
}
.stack-outer{
  padding: 14px 12px;
}
.stack-inner{
  font-size: clamp(22px, 6.2vw, 34px);
  line-height: 1.35;
}

/* Modals: fill screen nicely */
.modal-card{
  width: min(96vw, 720px);
  max-height: 86vh;
}
textarea#customText{
  min-height: 34vh;
}

/* Avoid accidental zoom on focus */
input, textarea, select, button{
  font-size: 16px;
}