:root{--bg: #1a1410;--panel: #261d16;--line: #3a2d22;--ink: #f6efe6;--dim: #c0a890;--accent: #d08a5a;--good: #6fbf73;--bad: #d05a5a}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#2a2018,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:520px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:28px;letter-spacing:5px;font-weight:800;color:var(--accent)}.sub{margin:3px 0 0;color:var(--dim);font-size:13px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#2a1608}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#2a1608;border-color:var(--accent)}.scoreboard{display:flex;gap:10px;justify-content:center;margin:8px 0}.readout{background:#14100c;border:1px solid var(--line);border-radius:8px;padding:5px 16px;font:800 18px ui-monospace,monospace;color:var(--accent);min-width:78px;text-align:center}.readout span{color:var(--dim);font-size:11px;display:block;font-weight:600;letter-spacing:.5px}.egg-stage{display:flex;flex-direction:column;align-items:center;margin:10px 0 4px}.egg{position:relative;width:min(60vw,240px);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f1e2cf,#d8c2a4);border-radius:50%/60% 60% 40% 40%;box-shadow:inset -10px -16px 24px #785a3259,0 6px 18px #0006;overflow:hidden}.egg .speck{position:absolute;border-radius:50%;background:#966e4640}.egg .pic{font-size:clamp(60px,26vw,120px);line-height:1;filter:grayscale(1) blur(8px);opacity:.25;transition:filter .25s ease,opacity .25s ease,transform .25s ease}.egg.hatched{animation:pop .4s ease}.egg.hatched .pic{filter:none;opacity:1;transform:scale(1.05)}.egg .crack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;pointer-events:none}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}.slots{display:flex;gap:8px;justify-content:center;margin:12px 0 6px;flex-wrap:wrap}.slot{width:44px;height:52px;border-radius:8px;border:2px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;font:800 26px ui-monospace,monospace;color:var(--ink);text-transform:lowercase}.slot.filled{border-color:var(--accent);color:var(--accent)}.slot.next{box-shadow:0 0 0 2px #d08a5a66}.keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0}.key{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:800 18px ui-monospace,monospace;text-transform:lowercase;cursor:pointer}.key:hover{border-color:var(--accent)}.key:active{transform:translateY(1px)}.key.flash-good{background:var(--good);color:#0f2410}.key.flash-bad{background:var(--bad);color:#2a0d0d}.msg{text-align:center;min-height:22px;font-weight:700;margin:4px 0;color:var(--dim)}.msg.good{color:var(--good)}.msg.bad{color:var(--bad)}.dots{display:flex;gap:6px;justify-content:center;margin:6px 0}.dot{width:11px;height:11px;border-radius:50%;background:var(--line)}.dot.done{background:var(--good)}.dot.cur{background:var(--accent)}.overlay{position:fixed;inset:0;background:#0a0704d1;display:flex;align-items:center;justify-content:center;padding:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;max-width:360px;width:100%;text-align:center}.card h2{margin:0 0 6px;color:var(--accent)}.card .big{font:800 40px ui-monospace,monospace;color:var(--accent);margin:8px 0}.card p{color:var(--dim);margin:6px 0}