:root{--primary: #FFD93D;--secondary: #6BCB77;--accent: #4D96FF;--error: #FF6B6B;--white: #FFFFFF;--text: #2D3436;--bg: #F0F4F8;--radius: 20px;--shadow: 0 8px 16px rgba(0, 0, 0, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg);color:var(--text);display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;margin:0;overflow-x:hidden}#root{width:100%;max-width:500px;height:100vh;padding:10px;display:flex;flex-direction:column;justify-content:center;margin:0 auto}button{cursor:pointer;border:none;font-family:inherit;transition:transform .2s active}button:active{transform:scale(.95)}.card{background:var(--white);border-radius:var(--radius);padding:min(1.5rem,3vh);box-shadow:var(--shadow);text-align:center;max-height:98vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%}.nav-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2vh;width:100%}.icon-btn{background:none;font-size:1.8rem;padding:5px;text-decoration:none}.header-stats{display:flex;gap:1.5rem;font-size:1.1rem;font-weight:700;margin-bottom:2vh;color:#555}.stat-item span{color:var(--accent);margin-left:.3rem}.game-grid-container{background:#f8f9fa;padding:12px;border-radius:var(--radius);box-shadow:inset 0 2px 4px #0000000d;margin-bottom:2vh;width:100%;max-width:45vh;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center}.grid{display:grid;gap:6px;width:100%;height:100%}.tile{border-radius:8px;cursor:pointer;transition:all .1s ease;border:none;box-shadow:0 2px 4px #0000001a}.state-screen{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;animation:fadeIn .5s ease-out}.hero-icon{font-size:5rem;margin-bottom:2vh;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.state-screen h2{font-size:2.2rem;color:var(--text);margin-bottom:1.5vh}.state-screen p{color:#666;margin-bottom:4vh;line-height:1.5;max-width:300px}.btn-main{background:var(--accent);color:#fff;padding:1.2rem 3rem;font-size:1.3rem;font-weight:700;border-radius:15px;width:80%;max-width:300px;box-shadow:0 6px #3a75cc;margin-bottom:2vh}.btn-main:active{transform:translateY(4px);box-shadow:none}.btn-sub{background:#e9ecef;color:#495057;padding:.8rem 2rem;font-size:1rem;font-weight:600;border-radius:12px;width:60%;max-width:250px}.result-card{background:#f8f9fa;padding:2rem;border-radius:var(--radius);width:80%;max-width:300px;margin-bottom:4vh;border:3px solid var(--primary)}.result-card .label{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:.5rem}.result-card .value{font-size:3.5rem;font-weight:800;color:var(--accent);margin-bottom:1rem}.rank-badge{background:var(--secondary);color:#fff;padding:.5rem 1rem;border-radius:20px;display:inline-block;font-weight:700}.ad-container{width:100%;min-height:100px;background:#f8f9fa;border-radius:12px;margin-top:1vh;display:flex;justify-content:center;align-items:center;border:1px dashed #ced4da}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}