@font-face { font-family: 'Oswald'; src: url('/fonts/oswald-latin.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1A0F1F; color: #F4EAD5; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: dark; }
body { display: grid; place-items: center; min-height: 100dvh; background: radial-gradient(120% 70% at 50% -10%, rgba(232,100,44,.28), transparent 60%), radial-gradient(90% 60% at 50% 110%, rgba(194,54,107,.22), transparent 60%), #1A0F1F; }
.gate { width: min(340px, 92vw); display: flex; flex-direction: column; align-items: center; padding: max(24px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); user-select: none; }
.g-mark svg { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(242,177,52,.35)); }
.g-brand { font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 700; letter-spacing: .06em; font-size: 40px; margin: 10px 0 0; line-height: 1; }
.g-brand span { background: linear-gradient(120deg, #F2B134, #E8642C 50%, #C2366B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-sub { margin: 18px 0 14px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: #b8a596; }
.g-dots { display: flex; gap: 18px; height: 20px; align-items: center; }
.g-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(244,234,213,.5); transition: background .12s, transform .12s, border-color .12s; }
.g-dots i.on { background: #F2B134; border-color: #F2B134; transform: scale(1.12); }
.g-dots.ok i { background: #3aa39a; border-color: #3aa39a; }
.g-msg { min-height: 20px; margin: 12px 0 8px; font-size: 14px; color: #f08aa8; text-align: center; }
.g-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; margin-top: 6px; }
.g-pad button { width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(242,177,52,.22); background: rgba(244,234,213,.06); color: #F4EAD5; font: 500 30px/1 'Oswald', system-ui, sans-serif; cursor: pointer; transition: background .1s, transform .08s; touch-action: manipulation; }
.g-pad button:active, .g-pad button.press { background: rgba(242,177,52,.28); transform: scale(.94); }
.g-pad button[data-k="del"] { border-color: transparent; background: transparent; font-size: 26px; }
.g-pad button:focus-visible { outline: 3px solid #F2B134; outline-offset: 3px; }
.g-pad[aria-disabled="true"] button { opacity: .45; pointer-events: none; }
.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }
@media (max-height: 640px) { .g-pad button { width: 64px; height: 64px; font-size: 26px; } .g-brand { font-size: 32px; } }