/* Writing controls stay inside the visible area, including the software keyboard. */
:root {
  --game-header-height: 64px;
  --game-footer-height: 76px;
}
.game-writing #input-view,
.game-writing .screen[data-phase="input"] {
  padding-top: calc(
    var(--game-header-height) + var(--game-status-height, 0px) + 8px
  );
  padding-bottom: calc(var(--game-footer-height) + 16px);
}
.game-writing .input-hdr {
  position: fixed;
  top: var(--viewport-top, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 430px);
  min-height: 60px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  gap: 12px;
  align-items: center;
  z-index: 40;
}
.game-letter {
  font-family: var(--nv-font-display);
  font-size: var(--fs-3xl);
  line-height: 1;
}
body.kids-mode {
  font-size: var(--fs-xl);
}
.kids-mode .game-letter {
  font-size: var(--fs-4xl);
}
.kids-mode .cat-name,
.kids-mode .cat-card .cat-name {
  font-size: var(--fs-sm);
}
.game-time {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 800;
}
.game-writing .timer-num {
  font-size: var(--fs-2xl);
  line-height: 1;
  display: inline;
}
.game-round {
  font-size: var(--fs-sm);
  font-weight: 800;
  max-width: 38%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-writing .game-submit {
  position: fixed;
  bottom: var(--viewport-bottom, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 430px);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: var(--nv-bg, #fff);
  box-shadow: var(--shadow-sticky);
  z-index: 40;
}
.game-submit .btn {
  width: 100%;
  min-height: 48px;
  padding: 10px;
}
#solo-save-status {
  margin: 0 0 4px;
  font-size: var(--fs-xs);
}
.game-writing .cat-card input {
  scroll-margin-block: 80px;
  min-width: 0;
  font-size: var(--fs-md);
}
.kids-mode .cat-card input,
.kids-mode.game-writing .cat-card input {
  font-size: var(--fs-2xl);
  min-height: 64px;
}
.game-status {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 430px);
  z-index: 50;
}
.game-writing .game-status {
  top: calc(var(--viewport-top, 0px) + var(--game-header-height));
}
.game-status > * {
  position: static;
  transform: none;
  max-width: none;
  margin: 0;
  padding: 6px 12px;
  background: var(--color-tint-gold);
  color: var(--color-tint-gold-text);
  font-size: var(--fs-sm);
}
.game-status .btn--text {
  color: inherit;
}
.cat-name,
.rank-row,
.player-chip,
.review-word {
  overflow-wrap: anywhere;
  min-width: 0;
}
button,
.icon-btn,
.react-btn {
  min-height: 44px;
}
@media (min-width: 640px) {
  .game-writing .input-hdr,
  .game-writing .game-submit {
    width: min(100%, 720px);
  }
}
@media (min-width: 1024px) {
  .game-writing .input-hdr,
  .game-writing .game-submit {
    width: min(100%, 1040px);
  }
}
.word-xl,
.hdr-title,
.dispute-by {
  overflow-wrap: anywhere;
}
.icon-btn,
.react-btn {
  min-width: 44px;
}


/* Keep the shared footer (links + theme toggle) scrollable above the fixed submit bar. */
.game-writing .site-footer {
  padding-bottom: calc(var(--game-footer-height) + 16px + env(safe-area-inset-bottom, 0px));
}