*{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}#arena-wrapper{position:absolute;top:0;left:0;right:0;bottom:0}#gameCanvas{width:100%;height:100%;display:block}#webgl-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#webgl-container canvas{width:100%;height:100%}body.webgl-active #gameCanvas{display:none}body.webgl-active #webgl-container{display:block}#timer-container{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:10}#timer{background:linear-gradient(180deg,#1a3a7a,#0f2250,#0a1850);border:3px solid #fdbe02;border-radius:10px;padding:6px 20px;color:#fff;font-size:18px;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,.6);box-shadow:0 4px 12px #00000080,0 0 20px #fdbe024d,inset 0 1px #ffffff26;letter-spacing:1px;min-width:70px;text-align:center}#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:32px;height:150px;background:linear-gradient(180deg,#1a1a35,#0f0f20);border:3px solid #6d4bc7;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000080,0 0 15px #6d4bc74d,inset 0 0 15px #00000080}#elixir-fill-player{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(180deg,#9b59b6,#7b4fcc,#6d4bc7);border-radius:0 0 13px 13px;transition:height .15s ease-out;box-shadow:0 0 15px #9b59b680,inset 0 2px 4px #fff3}#elixir-fill-player:after{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent);border-radius:6px 6px 0 0}#elixir-fill-player.full{animation:elixirFullGlow 1s ease-in-out infinite}@keyframes elixirFullGlow{0%,to{box-shadow:0 0 15px #9b59b699,0 0 30px #7b4fcc4d}50%{box-shadow:0 0 25px #9b59b6e6,0 0 50px #7b4fcc80}}#elixir-fill-opponent{position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(180deg,#6b7b8c,#4a5a6b);border-radius:0 0 13px 13px;transition:height .15s ease-out;opacity:.5;box-shadow:inset 0 2px 4px #ffffff1a}.elixir-segments{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(to top,transparent 0%,transparent 9%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.3) 10%);pointer-events:none;border-radius:13px}#elixir-count-player,#elixir-count-opponent{background:linear-gradient(180deg,#2a2850,#1a1840);border:2px solid #6d4bc7;border-radius:8px;padding:3px 10px;color:#fff;font-size:14px;font-weight:800;box-shadow:0 3px 8px #0006,0 0 10px #6d4bc74d;text-shadow:0 1px 2px rgba(0,0,0,.5);letter-spacing:.5px}.player-label{font-size:10px;font-weight:800;color:#b61d1d;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(182,29,29,.4);letter-spacing:1.5px;text-transform:uppercase}.player-label.opponent{color:#1d4db6;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 8px rgba(29,77,182,.4)}#ui-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px 8px 12px;background:linear-gradient(to top,rgba(13,11,20,.95) 0%,rgba(23,21,35,.85) 50%,rgba(13,11,20,.6) 80%,transparent 100%);pointer-events:none;z-index:20}#card-hand{display:flex;gap:6px;justify-content:center;pointer-events:auto}.card-slot{width:56px;height:70px;background:linear-gradient(145deg,#2a2855,#1e1b40);border:2px solid #4a4870;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #00000080,0 0 8px #6d4bc726,inset 0 1px #ffffff14}.card-slot:hover{transform:translateY(-6px) scale(1.05);border-color:#6d4bc7;box-shadow:0 10px 22px #0000008c,0 0 18px #7b4fcc59}.card-slot.selected{border-color:#fdbe02;border-width:3px;transform:translateY(-12px) scale(1.08);box-shadow:0 12px 28px #0009,0 0 25px #fdbe0280}.card-slot.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(60%)}.card-slot.disabled:hover{transform:none;box-shadow:0 4px 12px #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:.95;transform:translate(-50%,-50%) scale(1.15);width:65px;height:80px;background:linear-gradient(145deg,#2a2855,#1e1b40);border:3px solid #fdbe02;border-radius:10px;display:none;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 18px 45px #000000a6,0 0 35px #fdbe0266}#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:-6px;left:-6px;width:22px;height:22px;background:linear-gradient(135deg,#9b59b6,#6d4bc7,#4e29a5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;border:2px solid #3d1f7a;box-shadow:0 3px 8px #4e29a599,inset 0 1px #fff3;text-shadow:0 1px 2px rgba(0,0,0,.4)}#game-over{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#0a0a14f2,#140f23fa);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;animation:gameOverFadeIn .5s ease-out;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes gameOverFadeIn{0%{opacity:0}to{opacity:1}}#game-over.hidden{display:none}#game-over-icon{font-size:80px;margin-bottom:20px;animation:iconBounce .6s cubic-bezier(.68,-.55,.265,1.55) .1s both;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}@keyframes iconBounce{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}#result-text{font-size:48px;font-weight:900;text-transform:uppercase;letter-spacing:4px;margin-bottom:15px;animation:resultSlideIn .5s ease-out .15s both}@keyframes resultSlideIn{0%{transform:translateY(-25px);opacity:0}to{transform:translateY(0);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)}#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}}