:root{--bg-primary: #060b14;--bg-secondary: #0d1525;--bg-surface: #111b2e;--bg-surface-hover: #162240;--text-primary: #e0e8f5;--text-secondary: #7a8ba8;--text-muted: #4a5872;--accent-cyan: #00d4ff;--accent-cyan-glow: rgba(0, 212, 255, .3);--accent-warning: #ff9f1c;--accent-warning-glow: rgba(255, 159, 28, .3);--accent-danger: #ff2257;--accent-danger-glow: rgba(255, 34, 87, .3);--accent-evolved: #a855f7;--accent-evolved-glow: rgba(168, 85, 247, .3);--accent-success: #22c55e;--stat-hunger: #ff6b35;--stat-happiness: #fbbf24;--stat-energy: #38bdf8;--border-radius: 12px;--border-radius-sm: 6px;--container-max-width: 480px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-display: "Orbitron", sans-serif;--font-mono: "Share Tech Mono", monospace;--font-size-xs: .7rem;--font-size-sm: .85rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.75rem;--font-size-xxl: 2.5rem;--glow-intensity: .5;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .6s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-mono);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:9999}#app{width:100%;max-width:var(--container-max-width);min-height:100vh;padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center}.text-center{text-align:center}.text-mono{font-family:var(--font-mono)}.text-display{font-family:var(--font-display)}.text-muted{color:var(--text-secondary)}.scaffold-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);min-height:80vh;text-align:center}.scaffold-title{font-family:var(--font-display);font-size:var(--font-size-xxl);font-weight:900;letter-spacing:.05em;color:var(--accent-cyan);text-shadow:0 0 20px var(--accent-cyan-glow),0 0 60px rgba(0,212,255,.15);animation:titlePulse 3s ease-in-out infinite}.scaffold-subtitle{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-secondary);letter-spacing:.15em;text-transform:uppercase}.scaffold-status{font-size:var(--font-size-xs);color:var(--text-muted);border:1px solid var(--text-muted);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius-sm)}.scaffold-blob{width:120px;height:120px;background:radial-gradient(circle at 40% 35%,var(--accent-cyan),var(--bg-surface));border-radius:50%/60% 60% 40% 40%;box-shadow:0 0 40px var(--accent-cyan-glow),0 0 80px #00d4ff1a;animation:blobIdle 4s ease-in-out infinite;position:relative}.scaffold-blob:before,.scaffold-blob:after{content:"";position:absolute;width:14px;height:18px;background:var(--bg-primary);border-radius:50%;top:35%}.scaffold-blob:before{left:30%}.scaffold-blob:after{right:30%}@keyframes titlePulse{0%,to{opacity:1}50%{opacity:.85}}@keyframes blobIdle{0%,to{transform:translateY(0) scale(1);border-radius:50%/60% 60% 40% 40%}25%{transform:translateY(-6px) scale(1.02);border-radius:48% 52%/58% 62% 38% 42%}50%{transform:translateY(-2px) scale(.98);border-radius:52% 48%/62% 58% 42% 38%}75%{transform:translateY(-8px) scale(1.01);border-radius:50%/56% 64% 36% 44%}}.app-layout{width:100%;display:flex;flex-direction:column;align-items:center;padding-bottom:var(--spacing-xl)}.stats-container{width:100%;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg) 0}.stat-bar{width:100%}.stat-bar__header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs);font-family:var(--font-mono);font-size:var(--font-size-sm)}.stat-bar__icon{font-size:var(--font-size-base);width:20px;text-align:center}.stat-bar__label{color:var(--text-secondary);letter-spacing:.12em;flex:1}.stat-bar__value{color:var(--text-primary);font-family:var(--font-display);font-size:var(--font-size-sm);font-weight:700;min-width:32px;text-align:right}.stat-bar__track{width:100%;height:12px;background:var(--bg-surface);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.stat-bar__fill{height:100%;border-radius:6px;transition:width 1s linear,background-color .6s ease,box-shadow .6s ease}.stat-bar--healthy .stat-bar__fill{box-shadow:0 0 8px #ffffff1a}.stat-bar--warning .stat-bar__fill{background-color:var(--accent-warning)!important;box-shadow:0 0 10px var(--accent-warning-glow)}.stat-bar--warning .stat-bar__value,.stat-bar--warning .stat-bar__label{color:var(--accent-warning)}.stat-bar--low .stat-bar__fill{background-color:#e8450e!important;box-shadow:0 0 12px #e8450e66}.stat-bar--low .stat-bar__value,.stat-bar--low .stat-bar__label{color:#e8450e}.stat-bar--critical .stat-bar__fill{background-color:var(--accent-danger)!important;box-shadow:0 0 16px var(--accent-danger-glow);animation:criticalPulse 1.2s ease-in-out infinite}.stat-bar--critical .stat-bar__value{color:var(--accent-danger);animation:criticalPulse 1.2s ease-in-out infinite}.stat-bar--critical .stat-bar__label{color:var(--accent-danger)}@keyframes criticalPulse{0%,to{opacity:1}50%{opacity:.5}}.naming-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:var(--spacing-md);text-align:center;animation:fadeIn .6s ease}.naming-title{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:900;color:var(--accent-cyan);letter-spacing:.08em;text-shadow:0 0 20px var(--accent-cyan-glow);margin-top:var(--spacing-lg)}.naming-prompt{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-secondary);max-width:300px}.naming-input{font-family:var(--font-mono);font-size:var(--font-size-lg);color:var(--accent-cyan);background:var(--bg-surface);border:1px solid var(--accent-cyan);border-radius:var(--border-radius-sm);padding:var(--spacing-sm) var(--spacing-md);text-align:center;width:260px;outline:none;transition:box-shadow var(--transition-base);letter-spacing:.1em}.naming-input:focus{box-shadow:0 0 12px var(--accent-cyan-glow),0 0 30px #00d4ff1a}.naming-input::placeholder{color:var(--text-muted);font-size:var(--font-size-sm)}.naming-charcount{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted)}.naming-submit{font-family:var(--font-display);font-size:var(--font-size-base);font-weight:700;color:var(--bg-primary);background:var(--accent-cyan);border:none;border-radius:var(--border-radius-sm);padding:var(--spacing-sm) var(--spacing-xl);cursor:pointer;letter-spacing:.1em;transition:all var(--transition-base);margin-top:var(--spacing-sm)}.naming-submit:hover:not(:disabled){box-shadow:0 0 20px var(--accent-cyan-glow);transform:translateY(-1px)}.naming-submit:disabled{opacity:.3;cursor:not-allowed}.actions-container{width:100%;display:flex;gap:var(--spacing-sm);padding:var(--spacing-md) 0}.action-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-xs);min-height:56px;background:var(--bg-surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--border-radius);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.action-btn:hover:not(:disabled){background:var(--bg-surface-hover);border-color:var(--accent-cyan);box-shadow:0 0 12px var(--accent-cyan-glow);transform:translateY(-1px)}.action-btn:active:not(:disabled){transform:translateY(0);animation:actionFlash .3s ease}.action-btn--cooldown{opacity:.4;cursor:not-allowed;border-color:var(--text-muted)}.action-btn__icon{font-size:var(--font-size-lg)}.action-btn__label{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;font-size:var(--font-size-xs)}.action-btn__timer{position:absolute;bottom:4px;right:6px;font-size:.6rem;color:var(--text-muted);font-family:var(--font-mono)}@keyframes actionFlash{0%{background:#00d4ff4d}to{background:var(--bg-surface)}}.footer-actions{width:100%;display:flex;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap;padding:var(--spacing-lg) 0 var(--spacing-md);border-top:1px solid rgba(255,255,255,.05);margin-top:var(--spacing-lg)}.footer-btn{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--text-muted);background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:var(--border-radius-sm);padding:var(--spacing-xs) var(--spacing-sm);cursor:pointer;transition:all var(--transition-fast);letter-spacing:.05em}.footer-btn:hover{color:var(--text-secondary);border-color:var(--text-secondary)}.footer-btn--danger:hover{color:var(--accent-danger);border-color:var(--accent-danger)}.pet-name{font-family:var(--font-display);font-size:var(--font-size-sm);color:var(--accent-cyan);letter-spacing:.15em;opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hidden-input{display:none}.status-message{font-family:var(--font-mono);font-size:var(--font-size-xs);text-align:center;letter-spacing:.08em;padding:var(--spacing-sm) 0;transition:color .6s ease;animation:fadeIn .6s ease}.status-message{transition:color .6s ease,opacity .3s ease;min-height:1.4em}.status-message--fading{opacity:0}.pet-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xl) 0 var(--spacing-md);position:relative;transition:all .6s ease}.pet-blob{width:120px;height:120px;border-radius:50%/60% 60% 40% 40%;position:relative;transition:all .6s ease}.pet-blob__eyes{position:absolute;top:35%;left:0;right:0;display:flex;justify-content:center;gap:28px}.pet-blob__eye{display:block;width:14px;height:18px;background:var(--bg-primary);border-radius:50%;transition:all .6s ease}.pet--normal .pet-blob{background:radial-gradient(circle at 40% 35%,var(--accent-cyan),var(--bg-surface));box-shadow:0 0 40px var(--accent-cyan-glow),0 0 80px #00d4ff1a;animation:blobIdleNormal 4s ease-in-out infinite}@keyframes blobIdleNormal{0%,to{transform:translateY(0) scale(1);border-radius:50%/60% 60% 40% 40%}25%{transform:translateY(-6px) scale(1.02);border-radius:48% 52%/58% 62% 38% 42%}50%{transform:translateY(-2px) scale(.98);border-radius:52% 48%/62% 58% 42% 38%}75%{transform:translateY(-8px) scale(1.01);border-radius:50%/56% 64% 36% 44%}}.pet--sick .pet-blob{background:radial-gradient(circle at 40% 35%,var(--accent-danger),#1a0510);box-shadow:0 0 40px var(--accent-danger-glow),0 0 80px #ff225726;animation:blobIdleSick .8s ease-in-out infinite}.pet--sick .pet-blob__eye{height:6px;border-radius:50%;opacity:.7}@keyframes blobIdleSick{0%,to{transform:translateY(0) scale(1) skew(0);border-radius:50%/60% 60% 40% 40%}15%{transform:translateY(-2px) scale(.97) skew(-3deg)}30%{transform:translateY(1px) scale(1.01) skew(2deg);border-radius:45% 55% 55% 45%/55% 65% 35% 45%}50%{transform:translateY(-1px) scale(.99) skew(-1deg)}70%{transform:translateY(2px) scale(1.02) skew(3deg);border-radius:55% 45% 45% 55%/65% 55% 45% 35%}85%{transform:translateY(-1px) scale(.98) skew(-2deg)}}.pet-static-overlay{position:absolute;top:50%;left:50%;width:130px;height:130px;transform:translate(-50%,-65%);border-radius:50%;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,34,87,.06) 2px,rgba(255,34,87,.06) 4px);animation:staticFlicker .3s steps(3) infinite;pointer-events:none;mix-blend-mode:screen}@keyframes staticFlicker{0%{opacity:.6;transform:translate(-50%,-65%) scaleY(1)}33%{opacity:.3;transform:translate(-50%,-66%) scaleY(1.02)}66%{opacity:.8;transform:translate(-50%,-64%) scaleY(.98)}to{opacity:.5;transform:translate(-50%,-65%) scaleY(1)}}.pet--sick{animation:sickPulse 2s ease-in-out infinite}@keyframes sickPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.85)}}.pet--evolved .pet-blob{background:radial-gradient(circle at 40% 35%,var(--accent-evolved),#1a0a2e);box-shadow:0 0 50px var(--accent-evolved-glow),0 0 100px #a855f733,inset 0 0 30px #a855f71a;animation:blobIdleEvolved 5s ease-in-out infinite;transform:scale(1.1)}.pet--evolved .pet-blob__eye{background:#f0e6ff;opacity:1;box-shadow:0 0 8px #f0e6ffcc,0 0 16px #a855f766}@keyframes blobIdleEvolved{0%,to{transform:translateY(0) scale(1.1);border-radius:50%/60% 60% 40% 40%}25%{transform:translateY(-8px) scale(1.12);border-radius:48% 52%/58% 62% 38% 42%}50%{transform:translateY(-4px) scale(1.08);border-radius:52% 48%/62% 58% 42% 38%}75%{transform:translateY(-10px) scale(1.11);border-radius:50%/56% 64% 36% 44%}}.pet-particles{position:absolute;top:50%;left:50%;width:160px;height:160px;transform:translate(-50%,-60%);pointer-events:none}.pet-particle{position:absolute;width:4px;height:4px;background:var(--accent-evolved);border-radius:50%;opacity:0;animation:particleFloat 3s ease-in-out infinite}.pet-particle:nth-child(1){top:10%;left:20%;animation-delay:0s}.pet-particle:nth-child(2){top:30%;left:85%;animation-delay:.5s}.pet-particle:nth-child(3){top:70%;left:10%;animation-delay:1s}.pet-particle:nth-child(4){top:80%;left:75%;animation-delay:1.5s}.pet-particle:nth-child(5){top:15%;left:65%;animation-delay:2s}.pet-particle:nth-child(6){top:55%;left:90%;animation-delay:2.5s}@keyframes particleFloat{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:.8;transform:translateY(-10px) scale(1)}80%{opacity:.6;transform:translateY(-30px) scale(.8)}to{opacity:0;transform:translateY(-40px) scale(.3)}}.pet--evolved{animation:evolvedGlow 3s ease-in-out infinite}@keyframes evolvedGlow{0%,to{filter:brightness(1) saturate(1)}50%{filter:brightness(1.1) saturate(1.15)}}.pet--normal .pet-blob__eye,.pet--evolved .pet-blob__eye{animation:eyeBlink 4s ease-in-out infinite}@keyframes eyeBlink{0%,42%,44%,to{transform:scaleY(1)}43%{transform:scaleY(.1)}}.pet--sick .pet-blob__eye{animation:none}.pet--evolved .pet-blob{animation:blobIdleEvolved 5s ease-in-out infinite,evolvedCelebration .8s ease-out 1}@keyframes evolvedCelebration{0%{transform:scale(1.1);filter:brightness(1)}30%{transform:scale(1.25);filter:brightness(1.6)}60%{transform:scale(1.05);filter:brightness(1.2)}to{transform:scale(1.1);filter:brightness(1)}}