:root { --ink: #20202c; --paper: #fff9ed; --pink: #f05d7b; --yellow: #ffd166; --blue: #5d78e8; --mint: #8fe3cf; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 88% 5%, #ffd166 0 13%, transparent 31%), linear-gradient(140deg, #5d78e8, #f05d7b 70%, #ff9c70); color: var(--ink); font-family: Nunito, Arial, sans-serif; }
.app { width: min(650px, 100%); }.game-card { padding: 30px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }.back-link { color: var(--ink); font-weight: 800; }.eyebrow { margin: 34px 0 8px; color: var(--pink); font: 800 .75rem Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }h1 { margin: 0; font: 4.6rem/.88 Bungee, Impact, sans-serif; letter-spacing: -.04em; }h1 span { color: var(--blue); text-shadow: 3px 3px 0 var(--ink); }.intro { max-width: 510px; margin: 20px 0 24px; font-size: 1.08rem; font-weight: 700; line-height: 1.45; }
.status-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; padding: 14px; border-radius: 5px; background: var(--mint); }.status-card span { font-weight: 800; }.status-card strong { white-space: nowrap; font: 800 .8rem Arial, sans-serif; text-transform: uppercase; }
form label { display: block; margin-bottom: 7px; font: 800 .8rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }.guess-row { display: flex; gap: 9px; }input { min-width: 0; flex: 1; padding: 14px; border: 2px solid var(--ink); border-radius: 5px; background: #fff; color: var(--ink); font: 800 1.1rem 'Courier New', monospace; }button { border: 2px solid var(--ink); border-radius: 5px; cursor: pointer; font: 800 .95rem Arial, sans-serif; }form button { padding: 0 20px; background: var(--yellow); }button:active { transform: translateY(2px); }.message { min-height: 1.7em; margin: 18px 0 12px; font: 800 1.25rem Bungee, Impact, sans-serif; }.message.higher { color: var(--blue); }.message.lower { color: var(--pink); }.message.correct { color: #2c9b71; }.new-game { width: 100%; padding: 12px; background: transparent; }.note { margin: 20px 0 0; color: #686572; font-size: .8rem; font-weight: 700; line-height: 1.4; }
@media (max-width: 520px) { body { padding: 16px; }.game-card { padding: 22px 18px; }h1 { font-size: clamp(3rem, 15vw, 4.6rem); }.status-card { align-items: flex-start; flex-direction: column; gap: 7px; }.guess-row { flex-direction: column; }.guess-row button { padding: 13px; } }