:root{--bg: #ffffff;--surface: #ffffff;--ink: #1a1a2e;--ink-soft: #4a4a5a;--ink-faint: #8a8a96;--line: #e7e7ec;--line-strong: #c8c8d0;--correct: #1f3a6e;--correct-ink: #ffffff;--present: #e0a23c;--present-ink: #ffffff;--absent: #6b6b76;--absent-ink: #ffffff;--key-bg: #f1f2f4;--key-bg-hover: #e6e7eb;--shadow-card: 0 12px 40px rgba(26, 26, 46, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg)}button{font-family:inherit}.app{min-height:100dvh;display:flex;flex-direction:column;align-items:stretch;background:var(--bg)}.header{display:flex;align-items:center;justify-content:center;padding:8px 24px;background:var(--surface);position:relative}.header-row{display:flex;align-items:center;justify-content:center;gap:14px}.header-mascot{width:44px;height:44px;object-fit:contain}.header-title{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}.header-tagline{margin:0;padding:10px 24px;font-size:13px;line-height:1.4;color:var(--ink-soft);text-align:center;border-bottom:1px solid var(--line);background:var(--surface)}.header-tagline strong{color:var(--correct);font-weight:700}.tagline-legend{display:inline-block;white-space:nowrap}.tagline-swatch{display:inline-block;width:.85em;height:.85em;border-radius:3px;vertical-align:-1px;margin-right:5px}.tagline-swatch-correct{background:var(--correct)}.tagline-swatch-present{background:var(--present)}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;padding:32px 16px 16px;max-width:600px;width:100%;margin:0 auto;position:relative}.toast{position:absolute;top:14px;left:50%;transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.01em;box-shadow:var(--shadow-card);z-index:5;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.board{display:flex;flex-direction:column;gap:7px;padding:4px;width:100%;max-width:340px}.row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.row-shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.tile{position:relative;aspect-ratio:1 / 1;width:100%;border:2px solid var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:clamp(20px,6vw,28px);font-weight:700;letter-spacing:.02em;color:var(--ink);background:var(--surface);-webkit-user-select:none;user-select:none;transform-style:preserve-3d}.tile-tbd{border-color:var(--correct);animation:pop .1s ease-in-out}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.tile-front,.tile-back{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.tile-back{transform:rotateX(180deg)}.tile-revealed{animation:flip .6s ease forwards}.tile-revealed .tile-back{border-radius:var(--radius-sm)}.tile-correct .tile-back{background:var(--correct);color:var(--correct-ink);border:2px solid var(--correct)}.tile-present .tile-back{background:var(--present);color:var(--present-ink);border:2px solid var(--present)}.tile-absent .tile-back{background:var(--absent);color:var(--absent-ink);border:2px solid var(--absent)}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(180deg)}}.keyboard{width:100%;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}.keyboard-row{display:flex;justify-content:center;gap:5px}.key{flex:1;min-width:0;height:54px;border:none;border-radius:var(--radius-sm);background:var(--key-bg);color:var(--ink);font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .12s ease,transform .06s ease;-webkit-tap-highlight-color:transparent}.key:hover{background:var(--key-bg-hover)}.key:active{transform:scale(.96)}.key-wide{flex:1.5;font-size:12px}.key-correct{background:var(--correct);color:var(--correct-ink)}.key-correct:hover{background:var(--correct);filter:brightness(1.08)}.key-present{background:var(--present);color:var(--present-ink)}.key-present:hover{background:var(--present);filter:brightness(1.06)}.key-absent{background:var(--absent);color:var(--absent-ink)}.key-absent:hover{background:var(--absent);filter:brightness(1.08)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a2e52;display:flex;align-items:center;justify-content:center;padding:16px;z-index:10;animation:fade-in .18s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px 28px 24px;width:100%;max-width:380px;text-align:center;position:relative;animation:modal-in .22s cubic-bezier(.2,.8,.2,1)}@keyframes modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-close{position:absolute;top:12px;right:14px;background:transparent;border:none;font-size:22px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm)}.modal-close:hover{background:var(--key-bg);color:var(--ink)}.modal-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}.modal-title{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}.modal-answer{margin:0 0 18px;font-size:15px;color:var(--ink-soft)}.modal-answer strong{color:var(--correct);letter-spacing:.04em}.modal-countdown{background:#f7f8fa;border-radius:var(--radius-md);padding:14px 18px;margin-bottom:18px}.modal-countdown-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:4px}.modal-countdown-value{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink)}.share-button{width:100%;border:none;background:var(--correct);color:var(--correct-ink);font-size:15px;font-weight:700;letter-spacing:.02em;padding:14px 20px;border-radius:var(--radius-md);cursor:pointer;transition:filter .12s ease,transform .06s ease}.share-button:hover{filter:brightness(1.08)}.share-button:active{transform:scale(.98)}@media (max-width: 380px){.header-title{font-size:22px}.header-mascot{width:36px;height:36px}.header-tagline{font-size:12px}.key{height:48px;font-size:14px}}