/* The wall page: all the styling it needs, so it asks for nothing but tokens.css and retro.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; min-height: 100dvh; color: var(--text); font-family: var(--font-story); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px dashed var(--accent-text); outline-offset: 4px; }

.wall { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.wall__win { width: 100%; max-width: 440px; padding: 44px 32px 32px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.wall__title { display: block; }
.wall__speaker { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wall__speaker .bubble { max-width: 300px; text-align: center; font-size: 24px; }
.wall__speaker img { display: block; }
.bubble__tail { position: absolute; bottom: -10px; left: 50%; margin-left: -10px; }

.wall__form { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.label { font: 10px/1.5 var(--font-label); color: var(--dim); letter-spacing: 0.02em; text-transform: uppercase; }
.field { display: flex; align-items: center; height: 48px; padding: 0 14px; }
.field:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.field__input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 24px var(--font-terminal); color: var(--text); caret-color: var(--accent); }
.empty { margin: 0; min-height: 26px; font: 17px/1.5 var(--font-story); color: var(--dim); }
.btn--lg { min-height: 56px; padding: 0 24px; font-size: 13px; text-transform: uppercase; line-height: 1.4; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hi); }
.btn--primary:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 480px) {
  .wall { padding: 28px 16px; }
  .wall__win { padding: 40px 16px 24px; }
}