*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#app{width:100%;max-width:800px;padding:20px}#game-container{position:relative;width:100%;aspect-ratio:9/16;max-height:90vh;background:#1a5f2a;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #00000080}#gameCanvas{width:100%;height:100%;display:block}#ui-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none}#elixir-bar{position:relative;width:100%;height:24px;background:#00000080;border-radius:12px;margin-bottom:10px;overflow:hidden;border:2px solid #4e29a5}#elixir-fill{height:100%;background:linear-gradient(90deg,#4e29a5,#7b4fcc);border-radius:10px;transition:width .1s ease;box-shadow:0 0 10px #7b4fcc;position:relative}#elixir-fill.full{animation:elixirGlow 2s ease-in-out infinite}@keyframes elixirGlow{0%,to{box-shadow:0 0 10px #7b4fcc,0 0 20px #7b4fcc}50%{box-shadow:0 0 20px #7b4fcc,0 0 40px #7b4fcc,0 0 60px #7b4fcc}}#elixir-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.2),transparent);border-radius:10px 10px 0 0}#elixir-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;font-size:14px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}#card-hand{display:flex;gap:10px;justify-content:center;pointer-events:auto}.card-slot{width:80px;height:100px;background:linear-gradient(145deg,#211f2e,#171523);border:3px solid #3d3d5c;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .15s ease-out;position:relative;box-shadow:0 4px 8px #0000004d}.card-slot:hover{transform:scale(1.05) translateY(-5px);box-shadow:0 8px 20px #0006,0 0 15px #7b4fcc4d}.card-slot.selected{border-color:gold;box-shadow:0 0 25px #ffd70099;transform:translateY(-10px) scale(1.02)}.card-slot.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(50%)}.card-slot.disabled:hover{transform:none;box-shadow:0 4px 8px #0000004d}.card-slot.dragging{transform:scale(1.1);box-shadow:0 12px 30px #00000080;z-index:100}.card-slot.common{border-color:#a0a0a0}.card-slot.rare{border-color:#477BSC}.card-slot.epic{border-color:#9016c6}.card-slot.legendary{border-color:#febe18;animation:legendaryShine 3s ease-in-out infinite}@keyframes legendaryShine{0%,to{box-shadow:0 4px 8px #0000004d,0 0 10px #febe184d}50%{box-shadow:0 4px 8px #0000004d,0 0 20px #febe1880}}.card-slot .card-icon{font-size:32px;margin-bottom:4px;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5))}.card-slot .card-name{font-size:10px;color:#e0e0e0;text-align:center;line-height:1.2;font-weight:700;text-transform:uppercase}.card-slot .card-cost{position:absolute;top:-6px;left:-6px;width:28px;height:28px;background:linear-gradient(135deg,#4e29a5,#7b4fcc);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;border:2px solid #3d1f7c;box-shadow:0 2px 4px #0000004d}.card-slot .rarity-bar{position:absolute;bottom:8px;width:60%;height:4px;border-radius:2px}.card-slot.common .rarity-bar{background:linear-gradient(90deg,gray,#a0a0a0)}.card-slot.rare .rarity-bar{background:linear-gradient(90deg,#477BSC,#6ba8e8)}.card-slot.epic .rarity-bar{background:linear-gradient(90deg,#9016c6,#c24ee0)}.card-slot.legendary .rarity-bar{background:linear-gradient(90deg,#febe18,gold)}.card-slot .rarity-gem{position:absolute;bottom:4px;right:6px;width:12px;height:12px;transform:rotate(45deg)}.card-slot.rare .rarity-gem{background:#477BSC;box-shadow:0 0 5px #477BSC}.card-slot.epic .rarity-gem{background:#9016c6;box-shadow:0 0 5px #9016c6}.card-slot.legendary .rarity-gem{background:#febe18;box-shadow:0 0 8px #febe18;animation:gemPulse 2s ease-in-out infinite}@keyframes gemPulse{0%,to{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.1)}}#game-over{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:gameOverFadeIn .5s ease-out}@keyframes gameOverFadeIn{0%{opacity:0}to{opacity:1}}#game-over.hidden{display:none}#result-text{font-size:48px;margin-bottom:20px;text-transform:uppercase;letter-spacing:4px;animation:resultTextPop .5s ease-out}@keyframes resultTextPop{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}#result-text.win{color:#fdbe02;text-shadow:0 0 30px rgba(253,190,2,.8),0 4px 8px rgba(0,0,0,.5)}#result-text.lose{color:#ff3b30;text-shadow:0 0 30px rgba(255,59,48,.8),0 4px 8px rgba(0,0,0,.5)}#result-subtext{font-size:24px;color:#fff;margin-bottom:30px;text-shadow:0 2px 4px rgba(0,0,0,.5)}#restart-btn{padding:15px 40px;font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,#4e29a5,#7b4fcc);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px #4e29a566}#restart-btn:hover{transform:scale(1.05);box-shadow:0 6px 25px #7b4fcc99}#restart-btn:active{transform:scale(.98)}.hidden{display:none!important}@media (max-width: 600px){#game-container{border-radius:0}.card-slot{width:70px;height:90px}.card-slot .card-icon{font-size:26px}.card-slot .card-name{font-size:9px}}