*{margin:0;padding:0;box-sizing:border-box}:root{--grass-green:#7CB342;--pure-white:#FFFFFF;--golden-yellow:#FFD700;--bright-orange:#FF8C00;--crimson-red:#E53935;--text-dark:#2E2E2E;--text-light:var(--pure-white);--shadow-heavy:rgba(0, 0, 0, 0.4);--border-radius:12px;--border-radius-large:25px;--transition-medium:0.3s ease;--spacing-md:16px;--spacing-lg:24px}body{font-family:'Cairo','Fredoka One',Arial,sans-serif;color:var(--text-light);overflow-x:hidden}.background-blur{background-image:url(background.png);background-size:cover;background-position:center;background-attachment:fixed;filter:blur(4px);position:fixed;top:-10px;right:-10px;bottom:-10px;left:-10px;z-index:-1}#main-container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.header-section,.title-section,.category-title{text-align:center}.header-section{margin-bottom:var(--spacing-lg)}.logo-container{display:inline-block;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.main-logo{height:100px;filter:drop-shadow(0 8px 16px var(--shadow-heavy))}.subtitle{font-size:clamp(1.1rem, 3vw, 1.4rem);opacity:.95;max-width:600px;margin:0 auto;font-weight:600}.status-container{display:flex;justify-content:center;align-items:stretch;gap:var(--spacing-md);margin:var(--spacing-lg) auto;flex-wrap:wrap}.active-users-display,.countdown-wrapper{background:rgb(255 255 255 / .9);backdrop-filter:blur(10px);padding:10px 20px;border-radius:var(--border-radius-large);border:2px solid var(--golden-yellow);color:var(--text-dark);font-family:'Fredoka One',sans-serif;text-align:center;display:flex;flex-direction:column;justify-content:center}.timer-display,.users-count{font-size:1.8em;color:var(--bright-orange)}.selection-section{text-align:center;margin:var(--spacing-lg) auto}.selection-counter{background:rgb(0 0 0 / .25);padding:12px 25px;border-radius:var(--border-radius);display:inline-block;font-size:1.2em;font-weight:600}#selected-count{color:var(--golden-yellow)}.selection-message{display:none;background:var(--crimson-red);padding:var(--spacing-md);border-radius:var(--border-radius);margin-top:var(--spacing-md);animation:shake 0.5s ease-in-out}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.category-tabs{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.tab-btn{background:#fff;border:2px solid #ddd;color:#333;padding:10px 20px;border-radius:10px;font-weight:800;cursor:pointer;transition:all var(--transition-medium)}.tab-btn:hover{transform:translateY(-3px)}.tab-btn.active{background:var(--grass-green);border-color:var(--golden-yellow);color:#fff;transform:translateY(-3px)}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md)}.item-card{background:rgb(255 255 255 / .95);border-radius:var(--border-radius);padding:var(--spacing-md);text-align:center;cursor:pointer;transition:all var(--transition-medium);position:relative;border:3px solid #fff0}.item-card:hover{transform:translateY(-5px);border-color:var(--grass-green)}.item-card.selected{border-color:var(--golden-yellow);transform:translateY(-5px)}.item-card.selected::after{content:'✓';position:absolute;top:8px;right:8px;background:var(--golden-yellow);color:var(--text-dark);width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900}.item-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:8px;font-size:.7em;font-weight:900;color:var(--text-light)}.item-badge[data-rarity="LEGENDARY"]{background:linear-gradient(135deg,#FF6B35,#F7931E)}.item-badge[data-rarity="EPIC"]{background:linear-gradient(135deg,#9C27B0,#E91E63)}.item-badge[data-rarity="RARE"]{background:linear-gradient(135deg,#2196F3,#03DAC6)}.item-badge[data-rarity="COMMON"]{background:linear-gradient(135deg,#4CAF50,#8BC34A)}.item-image{width:100px;height:100px;object-fit:contain;margin-bottom:10px}.item-title{font-family:'Fredoka One',sans-serif;font-size:1.1em;color:var(--text-dark)}.continue-btn{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:linear-gradient(145deg,var(--bright-orange),#FF6B35);color:#fff;border:3px solid var(--golden-yellow);padding:15px 35px;border-radius:50px;font-size:1.2em;font-weight:900;cursor:pointer;transition:all var(--transition-medium);display:none;z-index:1000}.continue-btn:hover{transform:translateX(-50%) translateY(-5px)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .7);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:10000;padding:var(--spacing-md);opacity:0;animation:fadeIn 0.4s forwards}.modal-content{background:var(--pure-white);border-radius:var(--border-radius-large);padding:var(--spacing-lg);max-width:500px;width:100%;box-shadow:0 10px 50px rgb(0 0 0 / .3);border:2px solid var(--golden-yellow);color:var(--text-dark);text-align:center;max-height:90vh;overflow-y:auto;animation:modalSlideIn 0.5s forwards;transform:scale(.9)}@keyframes fadeIn{to{opacity:1}}@keyframes modalSlideIn{to{transform:scale(1)}}.modal-header h3{font-family:'Fredoka One',sans-serif;font-size:1.8em}.confirmation-text{font-size:1.1em;line-height:1.6;color:#444;margin:var(--spacing-lg) 0}.selected-items-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:var(--spacing-lg) 0}.selected-item-preview{background:#f0f0f0;border-radius:8px;padding:5px 8px;display:flex;align-items:center;gap:8px}.preview-image{width:40px;height:40px}.preview-title{font-size:.85em;font-weight:600}.input-group input{width:100%;border:2px solid #ddd;background-color:#f9f9f9;padding:15px;border-radius:10px;font-size:1.2em;text-align:center;font-weight:600;transition:all 0.3s ease}.input-group input:focus{outline:none;border-color:var(--grass-green);box-shadow:0 0 10px rgb(124 179 66 / .2)}.user-error{color:var(--crimson-red);display:none;margin-top:10px;font-weight:600}.modal-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-lg)}.modal-btn{flex:1;background:var(--grass-green);color:#fff;border:none;padding:15px 25px;border-radius:10px;font-size:1.1em;font-weight:700;cursor:pointer;font-family:'Fredoka One',sans-serif;transition:all var(--transition-medium)}.modal-btn:hover{transform:translateY(-2px)}.modal-btn.cancel-btn{background:#757575}.progress-bar{width:100%;height:10px;background:#e0e0e0;border-radius:10px;margin-top:20px;overflow:hidden}.progress-fill{width:0%;height:100%;background:var(--grass-green);transition:width 1.1s ease-in-out}#generation-log{width:100%;margin:20px 0;text-align:left}#generation-log p{margin-bottom:10px;padding:10px;color:#333;background-color:#f0f0f0;border-radius:8px;display:flex;align-items:center;gap:10px;animation:fadeInText 0.5s ease-out;font-weight:600}#generation-log p .log-icon{color:var(--grass-green)}@keyframes fadeInText{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.success-icon,.verification-icon{font-size:4em;display:block;margin:15px auto;animation:popIn 0.5s ease-out}.success-icon{color:var(--grass-green)}.verification-icon{color:var(--golden-yellow)}@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}@media (max-width:768px){.items-grid{grid-template-columns:repeat(2,1fr)}.modal-buttons{flex-direction:column;align-items:stretch}}@media (max-width:480px){.subtitle{font-size:1.1rem}.status-container{flex-direction:column}.modal-btn{padding:12px}}