/* Input bars: the game's search / write-message boxes redrawn — white
   field, thick dark-brown outline, soft inset shade at the top.
   Touch sizes: 52px tall, 17px text (>=16px stops iOS zooming in). */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field > label, .field-label { font-size: 16px; color: var(--brown-dark); }
.input-wrap { position: relative; display: flex; }
.input {
  width: 100%; min-height: var(--tap);
  padding: 10px 13px 11px;
  font-family: var(--font-body); font-weight: 700; font-size: 17px;
  color: #33291d;
  background: #fff;
  border: 3px solid var(--brown);
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #ece6d8;
  outline: none; appearance: none; -webkit-appearance: none;
  scroll-margin: 90px 0 120px;     /* stays clear of keyboard / action bar */
}
.input::placeholder { color: #8f8474; opacity: 1; }
.input:focus {
  border-color: var(--brown-dark);
  box-shadow: inset 0 3px 0 #ece6d8, 0 0 0 4px var(--blue);
}
.input[readonly] { background: var(--panel-grey); box-shadow: none; color: var(--brown); }
.input[aria-invalid="true"] { border-color: var(--error); background: #fff4f2; box-shadow: inset 0 3px 0 #f9dcd8; }
.input[aria-invalid="true"]:focus { box-shadow: inset 0 3px 0 #f9dcd8, 0 0 0 4px #f6a5a0; }
.input-wrap .input.has-toggle { padding-right: 58px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 46px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--panel-grey); border: 2px solid var(--panel-line); border-radius: 8px;
  color: var(--brown-dark); cursor: pointer;
}
.pw-toggle svg { width: 24px; height: 24px; }
.pw-toggle[aria-pressed="true"] .eye-slash { display: none; }
.field-hint { font-size: 14px; color: #6f604b; }
.field-error { display: flex; align-items: flex-start; gap: 7px; font-size: 15px; color: var(--error); }
.field-error::before {
  content: "✕"; flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  color: #fff; background: var(--red); border: 2px solid var(--red-dark); border-radius: 4px;
}
.check + .field-error { margin-top: -10px; }

/* password strength: the HUD level bar idea */
.strength { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6f604b; min-height: 20px; }
.strength-bar { flex: 1; height: 12px; background: #fff; border: 2px solid var(--brown); border-radius: 7px; overflow: hidden; }
.strength-bar i { display: block; height: 100%; width: 0; background: var(--red); transition: width .15s; }
.strength[data-level="2"] i { background: #f5a623; }
.strength[data-level="3"] i, .strength[data-level="4"] i { background: #7ccc1c; }
.strength [data-level-text] { min-width: 5.5em; text-align: right; }

/* checkbox: a game tick box; the whole row is the 48px tap target */
.check { display: flex; gap: 12px; align-items: center; min-height: 48px; font-size: 16px; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 32px; height: 32px; background: #fff;
  border: 3px solid var(--brown); border-radius: 7px; cursor: pointer;
  display: grid; place-items: center;
}
.check input:checked { background: var(--green); border-color: var(--green-dark); }
.check input:checked::after {
  content: ""; width: 9px; height: 16px; margin-top: -4px;
  border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(40deg);
}
.check input[aria-invalid="true"] { border-color: var(--error); background: #fff4f2; }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--blue); }

/* form-level messages */
.alert {
  padding: 11px 13px; border-radius: 10px; font-size: 16px;
  border: 3px solid var(--red-dark); background: #ffe9e6; color: #7a1414;
  scroll-margin-top: 16px;
}
.alert-ok { border-color: var(--green-dark); background: #effbd2; color: #245c0d; }
.alert-info { border-color: var(--blue-deep); background: #e3f6fd; color: #10506c; }
.form-actions { display: grid; gap: 12px; margin-top: 2px; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 16px; margin: -6px 0; }

/* Sticky action bar for long forms (account): stays in thumb reach,
   clears the home indicator, and steps aside when the screen is short
   (keyboard open, landscape) so it never covers the focused field. */
.action-bar {
  position: sticky; bottom: 0; z-index: 4;
  margin: 2px calc(var(--gutter) * -1) 0;
  padding: 10px var(--gutter) calc(8px + var(--safe-b));
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 12px);
}
@media (max-height: 520px) { .action-bar { position: static; } }

/* result states (verify, sent, done) */
.state { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0 4px; }
.state-icon {
  width: 66px; height: 66px; border-radius: 8px;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l5 5L19.500 7' fill='none' stroke='%23fff' stroke-width='4.500'/%3E%3C/svg%3E") center / 76% no-repeat;
  border: 4px solid var(--green-dark); box-shadow: 4px 5px 0 var(--green-dark);
  transform: rotate(-3deg); margin: 0 4px 8px 0;
}
.state[data-kind="error"] .state-icon {
  background-color: var(--red); border-color: var(--red-dark); box-shadow: 4px 5px 0 var(--red-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23fff' stroke-width='4.500'/%3E%3C/svg%3E");
}
.state[data-kind="wait"] .state-icon {
  background: none; box-shadow: none; transform: none; border-radius: 50%;
  border: 9px solid var(--panel-grey); border-top-color: var(--blue);
  animation: spin 1s linear infinite;
}
.state[data-kind="mail"] .state-icon {
  width: 84px; height: 62px; border: 0; box-shadow: none; transform: rotate(-3deg); border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 62'%3E%3Crect x='4' y='6' width='76' height='52' rx='7' fill='%23fdf6e0' stroke='%234a3c2b' stroke-width='5'/%3E%3Cpath d='M7 11l35 26 35-26' fill='none' stroke='%234a3c2b' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='68' cy='14' r='11' fill='%232bbcef' stroke='%233f5f6b' stroke-width='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.state p { color: var(--brown); max-width: 34ch; }
.state .btn { width: calc(100% - 3px); margin-top: 6px; }
.state .alert { width: 100%; }

/* 6-digit confirmation code (verify.html): a form inside a centred state */
.state .form { width: 100%; text-align: left; }
.state .form .btn { width: 100%; margin-top: 0; }
.input-code { text-align: center; font-size: 24px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }