:root{--gold: #ffd700;--food: #66cc44;--gems: #ee44ff;--xp: #44aaff;--bg-dark: #1a1a2e;--bg-card: #16213e;--bg-card-hover: #1a2744;--text: #e8e8e8;--text-dim: #8899aa;--border: #2a3a5e;--danger: #ff4444;--success: #44cc66;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg-dark);color:var(--text);overflow:hidden}.game-container{display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto;position:relative}.resource-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(180deg,#0f1729,#16213e);border-bottom:2px solid var(--border);z-index:10;flex-shrink:0}.player-level{display:flex;flex-direction:column;align-items:center;min-width:60px}.player-level .level-num{font-size:1.1rem;font-weight:700;color:var(--xp)}.xp-bar{width:60px;height:6px;background:#333;border-radius:3px;overflow:hidden;margin-top:2px}.xp-bar-fill{height:100%;background:var(--xp);border-radius:3px;transition:width .3s}.resource-item{display:flex;align-items:center;gap:4px;font-size:.9rem;font-weight:600}.resource-item .icon{font-size:1.1rem}.resource-item.gold{color:var(--gold)}.resource-item.food{color:var(--food)}.resource-item.gems{color:var(--gems)}.resource-divider{width:1px;height:24px;background:var(--border);margin:0 4px}.main-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px}.bottom-nav{display:flex;background:linear-gradient(0deg,#0f1729,#16213e);border-top:2px solid var(--border);flex-shrink:0}.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:none;border:none;color:var(--text-dim);font-size:.7rem;cursor:pointer;transition:all .2s;font-family:inherit}.nav-btn .nav-icon{font-size:1.4rem}.nav-btn.active{color:var(--xp);background:#44aaff14}.nav-btn:hover:not(.active){color:var(--text);background:#ffffff08}.island-view{display:flex;flex-direction:column;gap:16px}.island-bg{background:linear-gradient(180deg,#1a3a5c,#0d2137,#162a44);border-radius:16px;padding:20px;position:relative;overflow:hidden;min-height:300px;border:2px solid #2a4a6a}.island-bg:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(68,170,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(68,204,68,.06) 0%,transparent 50%);pointer-events:none}.island-title{font-size:1.3rem;font-weight:700;margin-bottom:12px;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.5)}.buildings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;position:relative;z-index:1}.building-card{background:#0006;border:2px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.building-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px}.building-card:hover{transform:translateY(-2px);border-color:#48c;background:#00000080}.building-card .building-icon{font-size:2rem;margin-bottom:4px}.building-card .building-name{font-size:.85rem;font-weight:600}.building-card .building-info{font-size:.7rem;color:var(--text-dim);margin-top:2px}.gold-indicator{display:inline-flex;align-items:center;gap:3px;background:#ffd70026;color:var(--gold);padding:2px 8px;border-radius:8px;font-size:.75rem;font-weight:600;margin-top:6px;cursor:pointer;transition:all .2s}.gold-indicator:hover{background:#ffd7004d}.dragon-slots{display:flex;gap:4px;justify-content:center;margin-top:6px}.dragon-slot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;border:1px solid var(--border)}.dragon-slot.filled{background:#4af3;border-color:#48c}.dragon-slot.empty{background:#0000004d;border-style:dashed}.collect-btn{background:linear-gradient(135deg,gold,#fa0);color:#333;border:none;border-radius:8px;padding:4px 10px;font-size:.75rem;font-weight:700;cursor:pointer;margin-top:6px;transition:all .2s}.collect-btn:hover{transform:scale(1.05);box-shadow:0 2px 12px #ffd7004d}.collect-btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}.section-header{font-size:1.2rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}.dragon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.dragon-card{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .2s;position:relative}.dragon-card:hover{transform:translateY(-2px);border-color:#48c}.dragon-card.selected{border-color:var(--xp);box-shadow:0 0 12px #44aaff4d}.dragon-card .dragon-emoji{font-size:2.5rem}.dragon-card .dragon-name{font-size:.85rem;font-weight:600;margin-top:4px}.dragon-card .dragon-level{font-size:.7rem;color:var(--text-dim)}.dragon-card .dragon-stats{font-size:.7rem;color:var(--text-dim);margin-top:4px}.rarity-badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%}.element-tags{display:flex;gap:3px;justify-content:center;margin-top:4px}.element-tag{font-size:.6rem;padding:1px 6px;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.feed-btn{background:linear-gradient(135deg,var(--food),#44aa22);color:#fff;border:none;border-radius:6px;padding:4px 12px;font-size:.75rem;font-weight:600;cursor:pointer;margin-top:6px;transition:all .2s}.feed-btn:hover{transform:scale(1.05)}.feed-btn:disabled{opacity:.4;cursor:default;transform:none}.xp-bar-small{width:100%;height:4px;background:#333;border-radius:2px;overflow:hidden;margin-top:4px}.xp-bar-small-fill{height:100%;background:var(--xp);border-radius:2px;transition:width .3s}.breed-container{display:flex;flex-direction:column;gap:20px}.breed-slots{display:flex;align-items:center;justify-content:center;gap:16px}.breed-slot{width:120px;height:140px;background:var(--bg-card);border:2px dashed var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.breed-slot:hover{border-color:#48c}.breed-slot.filled{border-style:solid;border-color:var(--xp)}.breed-plus{font-size:2rem;color:var(--text-dim)}.breed-result{text-align:center}.breed-btn{background:linear-gradient(135deg,#f6a,#c4f);color:#fff;border:none;border-radius:10px;padding:10px 30px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;margin:0 auto;display:block}.breed-btn:hover{transform:scale(1.05)}.breed-btn:disabled{opacity:.4;cursor:default;transform:none}.egg-display{background:linear-gradient(135deg,#2a1a3e,#1a2a4e);border:2px solid #6644aa;border-radius:16px;padding:20px;text-align:center;margin-top:12px}.egg-emoji{font-size:3rem}.hatch-btn{background:linear-gradient(135deg,#fa0,#f60);color:#fff;border:none;border-radius:10px;padding:8px 24px;font-size:.9rem;font-weight:700;cursor:pointer;margin-top:10px;transition:all .2s}.hatch-btn:hover{transform:scale(1.05)}.battle-container{display:flex;flex-direction:column;gap:16px}.difficulty-select{display:flex;gap:12px;justify-content:center}.diff-btn{padding:10px 24px;border:2px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.diff-btn:hover{border-color:#48c}.diff-btn.easy{border-color:var(--success);color:var(--success)}.diff-btn.medium{border-color:var(--gold);color:var(--gold)}.diff-btn.hard{border-color:var(--danger);color:var(--danger)}.battle-arena{background:linear-gradient(180deg,#2a1a1a,#1a1a2e,#1a2a2a);border:2px solid #442222;border-radius:16px;padding:20px;position:relative}.battle-teams{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.team-side{flex:1;display:flex;flex-direction:column;gap:8px}.team-label{text-align:center;font-size:.85rem;font-weight:700;margin-bottom:4px}.team-label.player{color:var(--xp)}.team-label.enemy{color:var(--danger)}.battle-dragon{background:#0006;border:2px solid var(--border);border-radius:10px;padding:10px;cursor:pointer;transition:all .2s}.battle-dragon:hover{border-color:#48c}.battle-dragon.selected{border-color:var(--xp);box-shadow:0 0 8px #44aaff4d}.battle-dragon.target{border-color:var(--danger);box-shadow:0 0 8px #ff44444d}.battle-dragon.dead{opacity:.4;pointer-events:none}.battle-dragon-info{display:flex;align-items:center;gap:8px}.battle-dragon .dragon-emoji{font-size:1.8rem}.battle-dragon-name{font-size:.8rem;font-weight:600}.battle-dragon-level{font-size:.65rem;color:var(--text-dim)}.hp-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden;margin-top:4px}.hp-bar-fill{height:100%;border-radius:4px;transition:width .3s}.hp-bar-fill.high{background:var(--success)}.hp-bar-fill.medium{background:var(--gold)}.hp-bar-fill.low{background:var(--danger)}.hp-text{font-size:.65rem;color:var(--text-dim);text-align:center;margin-top:2px}.battle-vs{display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:var(--danger);padding:0 8px;align-self:center}.battle-log{background:#0006;border-radius:8px;padding:10px;max-height:120px;overflow-y:auto;font-size:.75rem;color:var(--text-dim);margin-top:12px}.battle-log p{margin-bottom:2px}.attack-btn{background:linear-gradient(135deg,var(--danger),#cc2200);color:#fff;border:none;border-radius:10px;padding:10px 30px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;display:block;margin:12px auto 0}.attack-btn:hover{transform:scale(1.05)}.attack-btn:disabled{opacity:.4;cursor:default;transform:none}.battle-result{text-align:center;padding:20px;border-radius:12px;margin-top:12px}.battle-result.win{background:linear-gradient(135deg,#44cc4426,#44cc440d);border:2px solid var(--success)}.battle-result.lose{background:linear-gradient(135deg,#ff444426,#ff44440d);border:2px solid var(--danger)}.battle-result h3{font-size:1.3rem;margin-bottom:8px}.rewards-list{display:flex;gap:16px;justify-content:center;margin-top:10px}.reward-item{display:flex;align-items:center;gap:4px;font-weight:600}.shop-section{margin-bottom:24px}.shop-section-title{font-size:1rem;font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.shop-item{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .2s}.shop-item:hover{transform:translateY(-2px);border-color:#48c}.shop-item .item-icon{font-size:2rem}.shop-item .item-name{font-size:.85rem;font-weight:600;margin-top:4px}.shop-item .item-desc{font-size:.7rem;color:var(--text-dim);margin-top:2px}.shop-price{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:6px;font-size:.8rem;font-weight:700;margin-top:6px}.shop-price.gold{background:#ffd70026;color:var(--gold)}.shop-price.gems{background:#ee44ff26;color:var(--gems)}.panel-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}.panel{background:var(--bg-card);border:2px solid var(--border);border-radius:16px;padding:20px;max-width:400px;width:100%;max-height:80vh;overflow-y:auto}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-header h3{font-size:1.1rem}.close-btn{background:none;border:none;color:var(--text-dim);font-size:1.4rem;cursor:pointer;padding:4px}.close-btn:hover{color:var(--text)}.panel-list{display:flex;flex-direction:column;gap:8px}.panel-item{display:flex;align-items:center;gap:10px;padding:10px;background:#0000004d;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.panel-item:hover{border-color:#48c}.panel-item.selected{border-color:var(--xp);background:#44aaff1a}.panel-item .item-emoji{font-size:1.5rem}.panel-item .item-details{flex:1}.panel-item .item-name{font-size:.85rem;font-weight:600}.panel-item .item-meta{font-size:.7rem;color:var(--text-dim)}.select-btn{background:linear-gradient(135deg,var(--xp),#2266cc);color:#fff;border:none;border-radius:8px;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}.select-btn:hover{transform:scale(1.05)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes glow{0%,to{box-shadow:0 0 5px #4af3}50%{box-shadow:0 0 15px #4af6}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-float{animation:float 3s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.animate-shake{animation:shake .3s ease-in-out}.animate-fade-in{animation:fadeIn .3s ease-out}.empty-state{text-align:center;padding:40px 20px;color:var(--text-dim)}.empty-state .empty-icon{font-size:3rem;margin-bottom:12px}.empty-state p{font-size:.9rem}.toast-container{position:fixed;top:60px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:8px}.toast{background:var(--bg-card);border:2px solid var(--border);border-radius:10px;padding:10px 20px;font-size:.85rem;font-weight:600;animation:fadeIn .3s ease-out;white-space:nowrap}.toast.success{border-color:var(--success);color:var(--success)}.toast.error{border-color:var(--danger);color:var(--danger)}.toast.info{border-color:var(--xp);color:var(--xp)}@media(max-width:500px){.resource-bar{gap:6px;padding:6px 10px}.resource-item{font-size:.8rem}.buildings-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.dragon-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.battle-teams{flex-direction:column}.battle-vs{transform:rotate(90deg);padding:8px 0}}