/* Shared look for the big screen and the phone: thick ink outlines, cartoon colours. */
:root { --ink: #1f2a4d; --paper: #fffdf6; --red: #ff5a5f; --yellow: #ffd23f; --blue: #3fa7ff; --me: #ff5a5f; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Baloo 2", "Nunito", system-ui, sans-serif; color: var(--ink); }
.hidden { display: none !important; }
.card { background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); }
h1.logo { margin: 0; font-size: 64px; line-height: 0.95; color: var(--red); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.code { font-weight: 800; letter-spacing: 1px; font-size: 20px; }
.btn { font: inherit; font-weight: 800; font-size: 20px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 20px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--ink); margin-top: 16px; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: #fff; font-size: 16px; }
.btn:disabled { opacity: .5; cursor: default; }
input { font: inherit; font-weight: 800; padding: 6px 10px; border: 4px solid var(--ink); border-radius: 14px; color: var(--ink); text-align: center; }
.err { color: #c62828; font-weight: 700; }
@media (max-width: 760px), (max-height: 520px) { h1.logo { font-size: 42px; -webkit-text-stroke-width: 6px; } }