*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0b1522;--panel: rgba(255, 255, 255, .06);--line: rgba(255, 255, 255, .14);--text: #eef4fb;--muted: #9fb3c8;--accent: #4fc3f7;--accent-2: #66bb6a;--danger: #ff5252}html,body,#root{height:100%}body{background:radial-gradient(circle at 50% 0%,#16263f 0%,var(--bg) 70%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}.app{height:100%;display:flex;justify-content:center}.game-screen{position:relative;width:100%;max-width:520px;height:100%;display:flex;flex-direction:column;padding:8px 10px 10px;gap:8px}.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex:0 0 auto}.hud-stat{display:flex;align-items:baseline;gap:6px;min-width:0}.hud-stat.hud-right{justify-content:flex-end}.hud-label{font-size:11px;letter-spacing:.08em;color:var(--muted)}.hud-stat strong{font-size:17px;font-variant-numeric:tabular-nums}.hud-next{display:flex;align-items:center;gap:8px}.hud-book{font-size:15px}.hud-discover{background:none;border:none;padding:0;cursor:pointer}.board-wrap{position:relative;flex:1 1 auto;min-height:0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}.board{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}.banner-new{position:absolute;top:14px;left:50%;transform:translate(-50%);padding:8px 18px;background:#4fc3f7eb;color:#06263a;font-weight:700;border-radius:999px;white-space:nowrap;animation:pop-in .25s ease-out;pointer-events:none}@keyframes pop-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.life-birth{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#04080f;animation:birth-fade 2s ease-out forwards;pointer-events:none}@keyframes birth-fade{0%{background:#04080f00}25%{background:#04080ff5}45%{background:#ffffffe6}70%,to{background:#04080feb}}.life-birth-inner{text-align:center;animation:birth-appear 2s ease-out forwards}@keyframes birth-appear{0%,40%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}.life-birth-face{display:block;margin:0 auto}.life-birth-name{margin-top:12px;font-size:30px;font-weight:800;letter-spacing:.04em}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:#040a12d1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay-card{width:100%;max-width:340px;padding:22px 20px;text-align:center;background:#142338;border:1px solid var(--line);border-radius:18px}.clear-title{font-size:15px;font-weight:800;letter-spacing:.28em;color:var(--accent-2)}.clear-face{display:block;margin:0 auto}.clear-name{font-size:22px;font-weight:800}.clear-text{margin-top:10px;font-size:13px;line-height:1.7;color:var(--muted)}.clear-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:14px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}.clear-hint{margin-top:12px;font-size:12px;color:var(--accent)}.overlay-actions{display:flex;gap:10px;margin-top:16px}.overlay-actions button{flex:1}.codex-overlay-panel{width:100%;max-width:480px;height:92%;max-height:640px;background:#142338;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex}.codex-overlay-panel .menu-screen{padding:18px 16px 16px}button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent;padding:10px 16px;transition:transform .08s ease,filter .15s ease}button:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#04283b;font-weight:700}.btn-secondary{background:transparent;color:var(--text);border-color:var(--line)}.btn-ghost{background:transparent;color:var(--muted);border-color:var(--line);padding:6px 12px;font-size:13px}.btn-lg{padding:14px 28px;font-size:17px}.btn-hint{background:transparent;border-color:var(--line);color:var(--muted);font-size:12px;padding:7px 12px;white-space:nowrap}.btn-hint.on{color:#ffe082;border-color:#ffe08273;background:#ffe0821a}.menu-screen{width:100%;max-width:520px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 20px;text-align:center}.menu-screen.scrollable{justify-content:flex-start;overflow-y:auto;text-align:left;align-items:stretch;gap:18px}.title-logo{display:flex;flex-direction:column;line-height:1}.title-main{font-size:46px;font-weight:800;letter-spacing:.02em;background:linear-gradient(90deg,#4fc3f7,#b39ddb,#ffd54f);-webkit-background-clip:text;background-clip:text;color:transparent}.title-sub{font-size:30px;font-weight:300;letter-spacing:.5em;color:var(--muted);padding-left:.5em}.title-tagline{font-size:13px;line-height:1.9;color:var(--muted)}.menu-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:260px;margin-top:6px}.title-best{margin-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.page-title{font-size:22px;font-weight:800}.help-block h2{font-size:15px;color:var(--accent);margin-bottom:6px}.help-block p{font-size:13px;line-height:1.85;color:var(--muted)}.help-block strong{color:var(--text)}.help-controls{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}.help-controls dt{color:var(--accent);white-space:nowrap}.help-controls dd{color:var(--muted)}.disclaimer{padding:14px;background:#ff525214;border:1px solid rgba(255,82,82,.3);border-radius:12px;font-size:12px;line-height:1.8;color:#ffcdd2}.codex-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.codex-card{display:flex;gap:10px;align-items:flex-start;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.codex-card.locked{opacity:.45}.codex-thumb{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center}.codex-thumb.unknown{font-size:26px;color:var(--muted)}.codex-body{min-width:0}.codex-name{font-size:13px;font-weight:700}.codex-name-en{font-size:10px;font-style:italic;color:var(--muted);opacity:.75}.codex-formula{font-size:11px;color:var(--accent)}.codex-comment{margin-top:4px;font-size:11px;line-height:1.6;color:var(--muted)}.codex-recipes{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}.codex-recipe-line{font-family:SF Mono,Cascadia Code,Consolas,monospace;font-size:10.5px;color:var(--accent-2);line-height:1.7}.creature-log{padding-top:4px;border-top:1px solid var(--line)}.creature-log-title{font-size:12px;color:var(--muted);margin-bottom:8px}.creature-log-title strong{color:var(--text);font-variant-numeric:tabular-nums}.creature-log-grid{display:flex;flex-wrap:wrap;gap:8px}.creature-log-item{width:40px;height:40px;display:grid;place-items:center;font-size:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.creature-log-item.locked{opacity:.4;font-size:16px;color:var(--muted)}.result-badge{font-size:13px;font-weight:800;letter-spacing:.24em;padding:6px 16px;border-radius:999px}.result-badge.clear{color:var(--accent-2);background:#66bb6a1f}.result-badge.breed{color:#ffd54f;background:#ffd54f1f}.result-badge.over{color:var(--danger);background:#ff52521f}.result-emoji{display:flex;align-items:center;justify-content:center;gap:6px;font-size:72px;line-height:1.1;position:relative;z-index:1}.result-emoji-group{position:relative;display:inline-block}.baby-peek{position:absolute;bottom:-6px;font-size:26px;z-index:0;opacity:0}.baby-peek-center{left:50%;transform:translate(-50%) translateY(10px) scale(.4);animation:baby-peek-pop .55s cubic-bezier(.34,1.56,.64,1) 1.1s forwards}@keyframes baby-peek-pop{to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.result-title{font-size:24px;font-weight:800}.result-text{font-size:13px;line-height:1.9;color:var(--muted)}.result-stats{display:flex;gap:20px;margin-top:6px}.result-stats div{display:flex;flex-direction:column;gap:2px}.result-stats span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.result-stats strong{font-size:18px;font-variant-numeric:tabular-nums}.result-best{font-size:13px;color:#ffd54f}@media (max-width: 400px){.hud{padding:6px 10px}.hud-stat strong{font-size:15px}.title-main{font-size:38px}.codex-grid{grid-template-columns:1fr}}