*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,Segoe UI,sans-serif;background:linear-gradient(135deg,#0f0c29,#1a1a2e,#24243e);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#app{width:100%;max-width:420px;padding:8px}#game-container{position:relative;width:100%;aspect-ratio:9/16;max-height:96vh;background:#1a5f2a;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px #fdbe0266,0 15px 50px #0009;transform-style:preserve-3d;perspective:1200px}#arena-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;transform-style:preserve-3d;transform:rotateX(55deg);transform-origin:center 80%}#gameCanvas{width:100%;height:100%;display:block}#timer-container{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:10}#timer{background:linear-gradient(180deg,#2a2a4a,#1a1a2e);border:2px solid #fdbe02;border-radius:8px;padding:4px 14px;color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 2px 8px #0006}#timer.overtime{border-color:#ff3b30;animation:overtimePulse 1s ease-in-out infinite}@keyframes overtimePulse{0%,to{box-shadow:0 0 8px #ff3b3080}50%{box-shadow:0 0 20px #ff3b30cc}}#elixir-container-left,#elixir-container-right{position:absolute;top:8px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:4px}#elixir-container-left{left:6px}#elixir-container-right{right:6px}.elixir-bar-wrapper{display:flex;flex-direction:column;align-items:center;gap:3px}#elixir-bar-player,#elixir-bar-opponent{width:26px;height:140px;background:linear-gradient(180deg,#1a1a2e,#0f0f1a);border:2px solid #6d4bc7;border-radius:13px;position:relative;overflow:hidden;box-shadow:0 2px 8px #0006,inset 0 0 12px #00000080}#elixir-fill-player{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#9b59b6,#6d4bc7);border-radius:0 0 11px 11px;transition:height .1s ease-out;box-shadow:0 0 10px #9b59b666}#elixir-fill-player:after{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent);border-radius:6px 6px 0 0}#elixir-fill-player.full{animation:elixirFullGlow 1.5s ease-in-out infinite}@keyframes elixirFullGlow{0%,to{box-shadow:0 0 12px #9b59b680}50%{box-shadow:0 0 25px #9b59b6cc,0 0 40px #7b4fcc66}}#elixir-fill-opponent{position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(180deg,#7f8c8d,#5d6d7e);border-radius:0 0 11px 11px;transition:height .1s ease-out;opacity:.5}.elixir-segments{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(to top,transparent 0%,transparent 9.5%,rgba(0,0,0,.25) 9.5%,rgba(0,0,0,.25) 10%);pointer-events:none}#elixir-count-player,#elixir-count-opponent{background:linear-gradient(180deg,#2c2c54,#1a1a2e);border:2px solid #6d4bc7;border-radius:6px;padding:2px 7px;color:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 5px #0000004d}.player-label{font-size:9px;font-weight:700;color:#4a90d9;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:1px}.player-label.opponent{color:#d94a4a}#ui-overlay{position:absolute;bottom:0;left:0;right:0;padding:8px 6px 10px;background:linear-gradient(to top,rgba(15,12,30,.92) 0%,rgba(15,12,30,.7) 60%,transparent 100%);pointer-events:none;z-index:20}#card-hand{display:flex;gap:5px;justify-content:center;pointer-events:auto}.card-slot{width:52px;height:65px;background:linear-gradient(145deg,#252245,#1a1a35);border:2px solid #3d3d5c;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .12s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 8px #00000080,inset 0 1px #ffffff0d}.card-slot:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 8px 18px #00000080,0 0 12px #7b4fcc40}.card-slot.selected{border-color:#fdbe02;border-width:2px;transform:translateY(-10px) scale(1.06);box-shadow:0 10px 22px #00000080,0 0 20px #fdbe0273}.card-slot.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(60%)}.card-slot.disabled:hover{transform:none;box-shadow:0 3px 8px #00000080}.card-slot.dragging{opacity:.4;transform:scale(.95);cursor:grabbing}.card-slot.drag-over{border-color:#fdbe02;background:linear-gradient(145deg,#352f55,#2a2545)}#drag-ghost{position:fixed;pointer-events:none;z-index:1000;opacity:.9;transform:translate(-50%,-50%) scale(1.1);width:60px;height:75px;background:linear-gradient(145deg,#252245,#1a1a35);border:2px solid #fdbe02;border-radius:8px;display:none;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 15px 40px #0009,0 0 30px #fdbe024d}#drag-ghost .card-icon{font-size:28px;margin-bottom:2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}#drag-ghost .card-name{font-size:7px;color:#b0b0b0;text-align:center;font-weight:600;text-transform:uppercase}#drag-ghost .card-cost{position:absolute;top:-6px;left:-6px;width:22px;height:22px;background:linear-gradient(135deg,#7b4fcc,#5a35a8);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;border:2px solid #4a2885;box-shadow:0 2px 6px #4e29a580}#drag-ghost.invalid{border-color:#ff3b30;box-shadow:0 15px 40px #0009,0 0 30px #ff3b3066}#drag-ghost.invalid .card-cost{background:linear-gradient(135deg,#cc3b30,#a82a22);border-color:#8a2018}#game-container.drag-active{cursor:grabbing}.card-slot .card-icon{font-size:24px;margin-bottom:1px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.card-slot .card-name{font-size:6px;color:#b0b0b0;text-align:center;line-height:1;font-weight:600;text-transform:uppercase;letter-spacing:.2px;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-slot .card-cost{position:absolute;top:-5px;left:-5px;width:20px;height:20px;background:linear-gradient(135deg,#7b4fcc,#5a35a8);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:10px;border:2px solid #4a2885;box-shadow:0 2px 5px #4e29a580}#game-over{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0a0a14eb,#0a0a14f2);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:gameOverFadeIn .4s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes gameOverFadeIn{0%{opacity:0}to{opacity:1}}#game-over.hidden{display:none}#game-over-icon{font-size:70px;margin-bottom:15px;animation:iconBounce .5s cubic-bezier(.68,-.55,.265,1.55) .1s both}@keyframes iconBounce{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.15) rotate(8deg)}to{transform:scale(1) rotate(0);opacity:1}}#result-text{font-size:44px;font-weight:800;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;animation:resultSlideIn .4s ease-out .15s both}@keyframes resultSlideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}#result-text.win{color:#fdbe02;text-shadow:0 0 25px rgba(253,190,2,.7),0 3px 6px rgba(0,0,0,.4)}#result-text.lose{color:#ff3b30;text-shadow:0 0 25px rgba(255,59,48,.7),0 3px 6px rgba(0,0,0,.4)}#crowns-container{display:flex;gap:12px;margin-bottom:15px;animation:resultSlideIn .4s ease-out .25s both}.crown{font-size:32px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.crown:not(.empty){animation:crownEarned .4s ease-out .4s both}.crown.empty{opacity:.25;filter:grayscale(1)}@keyframes crownEarned{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.2) rotate(15deg)}to{transform:scale(1) rotate(0)}}#result-subtext{font-size:18px;color:#bdc3c7;margin-bottom:25px;animation:resultSlideIn .4s ease-out .3s both}#restart-btn{padding:14px 40px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7b4fcc,#5a35a8);border:none;border-radius:10px;cursor:pointer;transition:all .15s ease;box-shadow:0 5px 18px #4e29a573;text-transform:uppercase;letter-spacing:1.5px;animation:resultSlideIn .4s ease-out .4s both}#restart-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px #4e29a58c}#restart-btn:active{transform:translateY(0) scale(.98)}.hidden{display:none!important}@media (max-width: 380px){#app{padding:4px}#game-container{border-radius:10px}.card-slot{width:46px;height:58px}.card-slot .card-icon{font-size:20px}.card-slot .card-name{font-size:5px}#elixir-bar-player,#elixir-bar-opponent{width:24px;height:120px}#timer{font-size:14px;padding:3px 10px}}