:root{--primary-hue:250;--primary:hsl(var(--primary-hue),84%,54%);--primary-dark:hsl(var(--primary-hue),84%,44%);--primary-light:hsl(var(--primary-hue),84%,95%);--accent-hue:160;--accent:hsl(var(--accent-hue),84%,45%);--bg-hue:220;--bg-body:hsl(var(--bg-hue),20%,97%);--bg-card:#fff;--text-main:hsl(var(--bg-hue),40%,20%);--text-light:hsl(var(--bg-hue),20%,50%);--success:#14b866;--error:#e8304f;--shadow-sm:0 2px 4px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 24px rgba(0,0,0,.12);--radius-sm:8px;--radius-md:16px;--radius-lg:24px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-body);color:var(--text-main);line-height:1.6;height:100vh;overflow-x:hidden}.main-container{max-width:800px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.05);display:flex;flex-direction:column}.main-header{background:hsla(0,0%,100%,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;position:-webkit-sticky;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(0,0,0,.05)}.logo{font-weight:700;font-size:1.5rem;color:var(--primary);background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.animate-fadeIn{animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}h1,h2,h3{margin-bottom:1rem;color:var(--text-main);line-height:1.2}.hero{text-align:center;padding:3rem 0;background:linear-gradient(180deg,var(--primary-light) 0,hsla(0,0%,100%,0) 100%);border-radius:var(--radius-md);margin-bottom:2rem}.hero h1{font-size:2rem;margin-bottom:.5rem}.hero p{color:var(--text-light);margin-bottom:1.5rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:1.5rem;gap:1.5rem}.card{background:var(--bg-card);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-light)}.card:before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:var(--primary);opacity:.5}.card h3{font-size:1.25rem;margin-bottom:.5rem}.card-rule{font-size:.9rem;color:var(--text-light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-actions{margin-top:1rem;display:flex;justify-content:flex-end;gap:.5rem}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;font-weight:600;font-size:.9rem;color:var(--text-light)}input[type=text],textarea{width:100%;padding:1rem;border:2px solid #eee;border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;transition:border-color .2s}input[type=text]:focus,textarea:focus{outline:none;border-color:var(--primary)}.game-area{gap:2rem;padding:2rem 0}.game-area,.hint-area{display:flex;flex-direction:column;align-items:center}.hint-area{position:relative;gap:1.5rem}.btn-circle{width:80px;height:80px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:2rem;cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;transition:transform .1s,background .2s}.btn-circle:active{transform:scale(.95)}.btn-circle:hover{background:var(--primary-dark)}.word-placeholder{font-size:2.5rem;letter-spacing:.5rem;font-weight:700;color:var(--text-main);min-height:4rem}.input-area{display:flex;gap:.5rem;width:100%;max-width:500px}.input-area input{flex:1 1;font-size:1.5rem;text-align:center}.btn{padding:.75rem 1.5rem;border-radius:var(--radius-sm);border:none;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;font-size:1rem}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(100,80,255,.3)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-secondary{background:#eee;color:var(--text-light)}.btn-secondary:hover{background:#e0e0e0}.btn-icon{background:transparent;font-size:1.25rem;padding:.5rem}.btn-icon:hover{background:#f5f5f5;border-radius:50%}.btn-sm{padding:.25rem .5rem;font-size:.8rem}.feedback{padding:1rem;border-radius:var(--radius-sm);text-align:center;font-weight:600;width:100%}.feedback.success{background:#e8fcf2;color:var(--success);border:1px solid #baf7d9}.feedback.error{background:#fce8eb;color:var(--error);border:1px solid #f7bac4}.progress-bar-container{width:100%;height:8px;background:#eee;border-radius:4px;margin-top:2rem;overflow:hidden}.progress-fill{height:100%;background:var(--accent);transition:width .3s ease}.hidden{display:none!important}.main-footer{padding:2rem;text-align:center;color:var(--text-light);font-size:.8rem;margin-top:auto}@media (max-width:600px){#app{box-shadow:none}.hero h1{font-size:1.75rem}.input-area{flex-direction:column}.btn-circle{width:64px;height:64px;font-size:1.5rem}}@font-face{font-family:__Outfit_ed3508;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/98848575513c9742-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Outfit_ed3508;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Outfit_Fallback_ed3508;src:local("Arial");ascent-override:100.55%;descent-override:26.14%;line-gap-override:0.00%;size-adjust:99.45%}.__className_ed3508{font-family:__Outfit_ed3508,__Outfit_Fallback_ed3508;font-style:normal}