*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#fff8e7,#ffe8d6,#ffeaa7);min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:Inter,Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#game-container{border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #00000080;position:relative}#game-container canvas{display:block}.character-name-input{width:220px;padding:12px 16px;font-size:16px;font-family:Inter,sans-serif;border:3px solid #4ECDC4;border-radius:12px;background:#fff;color:#2d3436;outline:none;transition:border-color .2s,box-shadow .2s,transform .2s}.character-name-input:focus{border-color:#ff6b6b;box-shadow:0 0 0 4px #ff6b6b33;transform:scale(1.02)}.character-name-input::placeholder{color:#95a5a6}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff8e7f7;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.loading-spinner{width:70px;height:70px;border:5px solid #95E1D3;border-top:5px solid #FF6B6B;border-right:5px solid #FFE66D;border-bottom:5px solid #4ECDC4;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:#ff6b6b;font-size:20px;font-weight:600;font-family:Poppins,sans-serif}.loading-subtext{color:#636e72;font-size:14px;margin-top:10px;font-family:Inter,sans-serif}:root{--color-cream: #FFF8E7;--color-coral: #FF6B6B;--color-teal: #4ECDC4;--color-yellow: #FFE66D;--color-mint: #95E1D3;--color-peach: #FFE8D6;--color-text: #2D3436;--color-text-light: #636E72;--color-white: #FFFFFF}