@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900;1000&display=swap");
:root{font-family:"Nunito",system-ui,-apple-system,sans-serif;color:#f6f8ff;background:#0d1829;font-synthesis:none}
*{box-sizing:border-box}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffe579;outline-offset:3px}body{margin:0;background:radial-gradient(ellipse at 50% -25%,#28466c 0%,#101e34 42%,#0a1424 100%);min-height:100vh}img{max-width:100%}.hidden{display:none!important}
.app{max-width:1500px;margin:auto;padding:0 22px}.site-header{height:77px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:13px;font-size:20px;letter-spacing:.055em;font-weight:1000;text-shadow:0 2px 2px #0009}.brand b{color:#ffd34c}.brand-ball{width:34px;height:34px;border:3px solid #f7f9ff;border-radius:50%;background:linear-gradient(#f25052 0 45%,#202539 45% 55%,#fff 55%);position:relative;box-shadow:0 3px 0 #101423}.brand-ball:after{content:"";position:absolute;width:10px;height:10px;border:3px solid #25283c;background:#fff;border-radius:50%;left:9px;top:9px}.header-actions{display:flex;align-items:center;gap:18px}.online-indicator{font-size:11px;font-weight:900;letter-spacing:.12em;color:#95aecb}.online-indicator span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55e6a4;box-shadow:0 0 12px #55e6a4;margin-right:6px}.secondary-btn,.outline-btn{color:#f5f8ff;border:1px solid #6783ad5b;border-radius:10px;background:#243956;padding:10px 16px;font-size:13px;font-weight:900;box-shadow:inset 0 1px #ffffff24}.secondary-btn:hover,.outline-btn:hover{background:#365377}
.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(300px,430px) minmax(200px,1fr);gap:35px;align-items:start;justify-content:center;padding:20px 0 18px}.left-panel,.right-panel{padding-top:55px;max-width:315px}.left-panel{justify-self:end}.right-panel{justify-self:start;width:100%}.eyebrow{font-size:10px;font-weight:1000;letter-spacing:.19em;color:#81beff}.left-panel h1{font-size:clamp(31px,3vw,46px);line-height:1.04;letter-spacing:-.045em;margin:15px 0 14px;font-weight:1000}.left-panel h1 em{font-style:normal;color:#ffce48}.left-panel>p{color:#a6b6cb;font-size:14px;line-height:1.7;margin-bottom:32px}.panel-card{display:flex;gap:13px;align-items:center;margin:19px 0}.panel-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(150deg,#31527d,#203853);box-shadow:inset 0 1px #ffffff25}.panel-card b,.panel-card small{display:block}.panel-card b{font-size:13px}.panel-card small{font-size:11px;color:#8da6c4;padding-top:4px}.desktop-tip{margin-top:45px;border:1px solid #254767;background:#122a43;border-radius:13px;padding:17px;color:#4fd4ff;font-weight:1000;font-size:11px;letter-spacing:.12em}.desktop-tip p{font-weight:600;line-height:1.65;color:#b0c6e1;letter-spacing:normal;font-size:12px;margin:9px 0 0}
.game-container{background:linear-gradient(#263f5d,#172d4a);padding:11px;border:1px solid #557ba350;border-radius:19px;box-shadow:0 24px 55px #0007,inset 0 1px #e1effe1d;width:100%;margin:0 auto}.battle-top{height:65px;display:flex;justify-content:space-between;align-items:center;gap:4px;padding:0 6px 10px}.player-info{display:flex;gap:9px;align-items:center;min-width:0}.player-info b,.player-info small{display:block;white-space:nowrap}.player-info b{font-size:12px;font-weight:1000}.player-info small{font-size:9px;color:#92afd0;margin-top:3px}.player-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-weight:1000;border:2px solid #ffffff73;box-shadow:0 3px 0 #0005}.red-avatar{background:linear-gradient(140deg,#f87369,#b83349)}.blue-avatar{background:linear-gradient(140deg,#53c5ff,#2775d5)}.battle-center{text-align:center;flex-shrink:0}.battle-center #clock{display:block;font-weight:1000;font-size:27px;line-height:1.1;letter-spacing:.03em;text-shadow:0 3px #0a142a}.battle-center small{font-weight:900;color:#bcd2e6;letter-spacing:.09em;font-size:8px}.score{display:flex;align-items:center;gap:5px;font-size:19px;font-weight:1000}.score-red{color:#ff8587}.score-blue{color:#65d3ff}.score-separator{color:#8eabc4}
.arena-outer{border:5px solid #493c2e;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 2px #978061,0 5px 0 #0d1b2d}.arena{width:100%;aspect-ratio:5/8;position:relative;overflow:hidden;touch-action:manipulation;background-color:#6abf69;background-image:linear-gradient(120deg,#ffffff12 1px,transparent 1px),linear-gradient(30deg,#00000010 1px,transparent 1px),repeating-conic-gradient(#ffffff0b 0% 25%,#00000008 0% 50%);background-size:34px 34px,56px 56px,70px 70px;box-shadow:inset 0 0 32px #0005}.ground{position:absolute;left:0;right:0;height:47.8%;pointer-events:none}.red-ground{top:0;background:linear-gradient(#bde78c22,#62883d10)}.blue-ground{bottom:0;background:linear-gradient(#1a7bdf0c,#10409c21)}.arena:before,.arena:after{content:"";position:absolute;z-index:4;top:0;bottom:0;width:3%;background:repeating-linear-gradient(0deg,#594a37 0px,#8d7450 12px,#594a37 13px,#86704e 18px);border:2px solid #4a3d2b;pointer-events:none}.arena:before{left:0}.arena:after{right:0}.lane{position:absolute;width:20%;height:96%;top:2%;border-left:2px dashed #f7efbc28;border-right:2px dashed #f7efbc28;pointer-events:none}.lane-left{left:18%}.lane-right{right:18%}
.river{position:absolute;top:47.85%;height:4.3%;width:100%;background:repeating-linear-gradient(115deg,#32b8dc 0 15px,#43c9ee 16px 26px,#249eca 27px 38px);border-top:4px solid #a9cbbc;border-bottom:4px solid #a9cbbc;box-shadow:0 1px 7px #0a63879c;z-index:2}.river-ripples{width:100%;height:100%;background:repeating-linear-gradient(12deg,transparent 0 30px,#b3ebff45 31px 34px,transparent 35px 65px);animation:flowRiver 3s linear infinite}@keyframes flowRiver{to{background-position:75px 0}}.bridge{position:absolute;z-index:5;top:50%;width:23%;height:8.5%;transform:translate(-50%,-50%);border:5px solid #5b4730;border-radius:5px;background:repeating-linear-gradient(0deg,#d6a568 0 17%,#8f6139 17.5% 20%,#d2a16a 20% 37%);box-shadow:0 4px 3px #0007,inset 4px 0 #f3d3a070,inset -4px 0 #573d2e61;pointer-events:none}.bridge:before,.bridge:after{content:"";position:absolute;width:9%;height:110%;background:#80613e;top:-5%;border:1px solid #60482d}.bridge:before{left:-8%}.bridge:after{right:-8%}.bridge-left{left:28%}.bridge-right{left:72%}.arena-divider{position:absolute;z-index:2;top:50%;left:0;right:0;border-top:2px solid #e2f7ff49;pointer-events:none}.arena-layer{position:absolute;inset:0;pointer-events:none}
.tower{position:absolute;z-index:8;width:13%;height:9.1%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 5px 3px #18371db0)}.tower--king{width:16%;height:10.2%}.tower-body{position:relative;width:87%;height:76%;background:linear-gradient(110deg,#c4c7c5 0 23%,#fcf8da 25% 41%,#8d989e 43% 100%);border:3px solid #53646b;border-bottom:6px solid #4b6576;border-radius:7px 7px 4px 4px;box-shadow:inset 0 4px #ffffffa3,0 6px 0 #253c42}.tower--red .tower-body{border-bottom-color:#8e3336}.tower--blue .tower-body{border-bottom-color:#2a76bd}.tower-top{position:absolute;left:-7%;top:-20%;width:114%;height:35%;background:linear-gradient(#f56772,#a92e40);color:#ffe5a0;text-align:center;font-size:16px;font-weight:1000;border:2px solid #7e3b3f;border-radius:6px;text-shadow:1px 1px #693c3c}.tower--blue .tower-top{background:linear-gradient(#43c5f5,#1269b2);border-color:#155686}.tower-face{display:grid;place-items:center;width:70%;height:52%;position:absolute;top:31%;left:15%;border-radius:4px;background:#52667a;color:#e0e9ec;font-weight:1000;font-size:19px;border:2px solid #d7d6c2}.tower--king .tower-face{background:#7f5b28;color:#ffdf65}.tower.destroyed{filter:grayscale(1) brightness(.5);opacity:.6}.tower.destroyed .tower-body{transform:rotate(-10deg)}.tower--king:not(.awakened) .tower-face{color:#9a9a9a}.health{position:absolute;border:1px solid #1b2634;background:#17253a;border-radius:4px;padding:2px;height:10px;overflow:hidden;box-shadow:0 1px 2px #0008}.health-fill{height:100%;background:linear-gradient(#78e8ff,#1c9ce3);border-radius:2px;transition:width .1s linear}.tower--red .health-fill,.unit--red .health-fill{background:linear-gradient(#ffad95,#df3349)}.tower-health{width:125%;top:-27%}.tower-hp-text{position:absolute;top:-45%;font-size:clamp(8px,1.8vw,12px);font-weight:1000;color:white;text-shadow:1px 2px #10253b,0 0 4px #10253b}.tower.hurt .tower-body{filter:brightness(1.7)}
.unit{position:absolute;width:12%;height:7.3%;transform:translate(-50%,-60%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 2px #11291586)}.unit img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 1px #0009)}.unit--red img{transform:scaleX(-1)}.unit-shadow{position:absolute;left:10%;right:10%;bottom:4%;height:21%;border-radius:50%;background:#182d2380;filter:blur(3px)}.unit-health{width:94%;top:-18%;height:7px;z-index:5;padding:1px}.unit-level{position:absolute;z-index:6;left:-12%;top:-25%;width:16px;height:16px;border-radius:5px;background:#2798e5;border:1px solid white;color:white;font-size:10px;font-weight:1000;display:grid;place-items:center}.unit--red .unit-level{background:#d84957}.unit.hurt img{filter:brightness(2) drop-shadow(0 1px 2px #fff)}
.projectile{position:absolute;width:3.7%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px 4px #fff7;background:#f8c84a;z-index:999}.projectile--electric{background:#ffeb4f;box-shadow:0 0 15px 6px #fbea72}.projectile--water{background:#52caff;box-shadow:0 0 15px 6px #5cdcff}.projectile--fire{background:#ff7436;box-shadow:0 0 13px 7px #ffbc53}.projectile--grass{background:#90ed55;box-shadow:0 0 12px 5px #90ec76}.projectile--ghost{background:#9c67e8;box-shadow:0 0 13px 7px #784be9}.projectile--psychic{background:#f880d8;box-shadow:0 0 13px 7px #f868c8}.projectile--dragon{background:#9b79ff}.projectile--rock{background:#8b7762}.projectile--tower{background:#f8b947;box-shadow:0 0 7px 4px #e3a54b}.battle-effect{position:absolute;transform:translate(-50%,-50%);width:8%;aspect-ratio:1;border-radius:50%;border:4px solid #fffbbb;box-shadow:0 0 17px #ffffffaa;animation:hitPulse .3s ease-out forwards;z-index:998}.battle-effect--spawn{border-color:#80e6ff;width:12%;box-shadow:0 0 14px #54d4ff}.battle-effect--ghost{border-color:#b28df9}.battle-effect--fire{border-color:#ffa348}@keyframes hitPulse{from{transform:translate(-50%,-50%) scale(.4)}to{transform:translate(-50%,-50%) scale(1.6)}}
.placement-overlay{position:absolute;left:3%;right:3%;top:52.2%;bottom:0;z-index:1000;pointer-events:none;background:#43c9ff1a;box-shadow:inset 0 0 0 3px #8feaff80;opacity:0;transition:opacity .12s;display:grid;place-items:center}.placement-overlay span{color:white;font-size:11px;font-weight:1000;text-shadow:0 2px 4px #0c4869;background:#163d69bb;padding:7px 11px;border-radius:15px}.arena.placing .placement-overlay{opacity:1}.battle-message{position:absolute;z-index:1500;top:48%;left:50%;width:85%;transform:translate(-50%,-50%) scale(.85);text-align:center;font-size:clamp(19px,5vw,34px);font-weight:1000;color:#ffe869;text-shadow:0 4px 0 #643626,0 6px 8px #000c;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.battle-message.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.battle-bottom{padding:14px 5px 1px}.bottom-player{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.next-card{display:flex;gap:6px;align-items:center;color:#91a9c6;letter-spacing:.08em;font-size:9px;font-weight:1000}.next-card img{height:32px;width:35px;image-rendering:pixelated;object-fit:contain;background:#1b3656;border:2px solid #41658e;border-radius:5px;padding:2px}.hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.battle-card{padding:0;min-width:0;position:relative;height:111px;border:3px solid #dbb65e;border-radius:9px;background:linear-gradient(150deg,#c8eafc 0%,#86b5d1 58%,#577899 100%);box-shadow:inset 0 0 0 2px #fff3b59a,0 4px 0 #71512a,0 6px 7px #071421aa;color:#263344;transition:transform .1s,border-color .1s;touch-action:none;overflow:visible}.battle-card.selected{transform:translateY(-10px);border-color:#fff88e;box-shadow:0 0 0 3px #f4ec6c73,0 6px 0 #896b26}.battle-card.cannot-afford{filter:saturate(.45) brightness(.7)}.battle-card .card-art{height:72px;display:grid;place-items:center;overflow:hidden}.card-art img{width:86%;height:90%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 1px #1326317b)}.card-cost,.collection-cost{position:absolute;top:-10px;left:-8px;border-radius:50%;height:27px;width:27px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#d67bfb,#8837cf 65%,#54208c);color:white;text-shadow:0 2px #47206d;border:3px solid #f1dcff;box-shadow:0 2px #442e66;font-size:15px;font-weight:1000;z-index:2}.card-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;font-size:11px;line-height:1.4;font-weight:1000;background:#e7f0f9c4;border-top:1px solid #7390a6}.card-attack{display:block;font-size:8px;line-height:1.5;font-weight:1000;color:#3f5c7b;background:#e7f0f9c4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.type-fire{background-image:linear-gradient(145deg,#ffdcb9,#df9773,#9f5d50)}.type-water{background-image:linear-gradient(145deg,#bff2fe,#76bae9,#4f80b0)}.type-grass{background-image:linear-gradient(145deg,#e5f5b8,#a5cc7c,#7ca07a)}.type-electric{background-image:linear-gradient(145deg,#fff6b1,#f3d671,#d7aa5a)}.type-ghost{background-image:linear-gradient(145deg,#e2c6f5,#a187d0,#7061a9)}.type-psychic{background-image:linear-gradient(145deg,#ffe0ee,#e8a1c2,#ac709e)}
.elixir-info{display:flex;align-items:center;justify-content:space-between;margin:15px 0 5px}.elixir-label{font-weight:1000;font-size:11px;color:#d9e7f7;letter-spacing:.08em}.elixir-label b{font-size:18px;color:#eab1ff}.elixir-label span{color:#8299b9}.keyboard-hint{font-size:9px;color:#7b9bbc;font-weight:900;letter-spacing:.09em}.elixir-track{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;height:16px;padding:3px;border:1px solid #6179a1;background:#0a1429;border-radius:9px;box-shadow:inset 0 2px 3px #0009}.elixir-cell{position:relative;overflow:hidden;border-radius:3px;background:#37264f}.elixir-cell:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--fill);background:linear-gradient(#f3b9ff,#bc4cda 55%,#8f31bd);box-shadow:inset 0 1px #ffeaff}.battle-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;color:#b9c8db;font-size:10px;font-weight:800}.battle-footer #restart{background:transparent;border:0;color:#9fcfff;font-size:11px;font-weight:1000;white-space:nowrap}.status-bump{animation:statusBump .23s}@keyframes statusBump{50%{color:#ff7878;transform:translateX(3px)}}
.side-heading{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.09em;font-weight:1000;margin:0 0 15px}.side-heading span{color:#78bfff}.deck-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.preview-card{position:relative;display:grid;place-items:center;aspect-ratio:1;background-color:#82b9d2;border:2px solid #d8bb83;border-radius:8px;box-shadow:0 3px 0 #6c502d}.preview-card img{width:94%;height:95%;object-fit:contain;image-rendering:pixelated}.preview-card span{position:absolute;top:-7px;left:-5px;border-radius:50%;background:#a444d2;border:2px solid #e8a8ff;color:white;font-size:10px;font-weight:1000;width:19px;height:19px;text-align:center}.outline-btn{margin-top:17px;width:100%;background:transparent;text-align:center}.type-hint{margin-top:40px;display:grid;gap:12px;padding:17px;background:#142943;border:1px solid #2b4869;border-radius:13px;color:#d5e4f7;font-weight:800;font-size:12px}.type-hint strong{font-size:10px;color:#8fa9c7;letter-spacing:.12em;margin-bottom:3px}.page-footer{padding:15px 0 20px;border-top:1px solid #ffffff15;text-align:center;color:#5b7694;font-size:9px;letter-spacing:.11em;font-weight:900}
.modal-backdrop{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:18px;background:#061323ce;backdrop-filter:blur(7px)}.modal-panel{width:min(420px,100%);background:linear-gradient(155deg,#25476c,#152d4d);border:2px solid #7da3c650;border-radius:20px;padding:34px;box-shadow:0 25px 70px #000b,inset 0 1px #ffffff32;text-align:center}.modal-crown{font-size:56px;color:#ffda62;text-shadow:0 5px #8f592b}.modal-panel h2{font-size:31px;font-weight:1000;margin:14px 0 9px;letter-spacing:-.04em}.modal-panel h2 span{color:#ffd557}.modal-panel p{font-size:14px;line-height:1.65;color:#b9d1e9}.intro-icons{font-size:26px;letter-spacing:.15em;margin:25px 0}.primary-btn{display:block;width:100%;border:2px solid #ffe9a2;color:#523b11;border-radius:12px;background:linear-gradient(#ffe385,#f9b83e);box-shadow:0 5px #9d6320,0 9px 12px #0005;padding:12px;font-size:14px;font-weight:1000;letter-spacing:.06em}.primary-btn:hover{filter:brightness(1.07)}.primary-btn:disabled{opacity:.4;filter:grayscale(1);cursor:not-allowed}.modal-panel>small{display:block;color:#91aac7;margin-top:19px;font-weight:800;font-size:10px}.result-panel{max-width:360px}
.deck-modal-content{max-width:720px;width:100%;max-height:min(92vh,960px);overflow:auto;text-align:left;padding:25px}.modal-header{display:flex;align-items:start;justify-content:space-between}.modal-header h2{margin:4px 0}.modal-header h2 span{font-size:13px;color:#82c7fd;vertical-align:middle}.close-btn{border:none;background:#3d5572;color:white;width:34px;height:34px;border-radius:8px;font-size:17px}.deck-modal-content p{font-size:12px;margin:6px 0 20px}.collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:25px}.collection-card{border:3px solid #9eafba;border-radius:11px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:134px;padding:14px 3px 5px;color:#29405d;overflow:visible}.collection-card img{height:72px;max-width:95%;object-fit:contain;image-rendering:pixelated}.collection-card b{font-size:12px}.collection-card small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}.collection-card.in-deck{border-color:#ffdb62;box-shadow:0 0 0 2px #ffe58c55}.collection-check{position:absolute;right:-7px;top:-8px;color:white;background:#36ba77;font-size:13px;font-weight:1000;border:2px solid white;width:23px;height:23px;border-radius:50%;display:grid;place-items:center}.drag-ghost{position:fixed;width:80px;height:80px;z-index:3500;pointer-events:none;transform:translate(-50%,-65%);filter:drop-shadow(0 0 9px #fff)}.drag-ghost img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
@media(max-width:1100px){.workspace{grid-template-columns:1fr minmax(300px,425px);gap:23px}.left-panel{display:none}.right-panel{justify-self:start;padding-top:55px}}@media(max-width:780px){.app{padding:0 10px}.site-header{height:54px}.brand{font-size:16px;gap:9px}.brand-ball{width:26px;height:26px;border-width:2px}.brand-ball:after{width:8px;height:8px;left:6px;top:6px;border-width:2px}.online-indicator{display:none}.secondary-btn{font-size:11px;padding:7px 10px}.workspace{display:block;padding:8px 0}.right-panel{display:none}.game-container{max-width:395px;border-radius:12px;padding:7px}.battle-top{height:55px;padding-bottom:6px}.battle-center #clock{font-size:23px}.battle-top .player-info b{font-size:10px}.battle-top .player-avatar{width:27px;height:27px}.battle-bottom{padding:9px 4px 1px}.bottom-player{margin-bottom:10px}.bottom-player .player-avatar{width:28px;height:28px}.battle-card{height:93px;border-width:2px}.battle-card .card-art{height:59px}.card-name{font-size:10px}.card-attack{font-size:7px}.card-cost{height:23px;width:23px;font-size:13px}.elixir-info{margin-top:9px}.elixir-track{height:14px}.battle-footer{margin-top:7px}.page-footer{font-size:8px;padding:8px 0}.arena-outer{border-width:4px}}@media(max-width:385px){.game-container{max-width:350px}.hand{gap:5px}.battle-card{height:86px}.battle-card .card-art{height:53px}.brand{font-size:14px}.collection{gap:8px}.collection-card{height:110px}.collection-card img{height:55px}.collection-card b{font-size:10px}}@media(max-height:760px) and (max-width:780px){.game-container{max-width:335px}.battle-card{height:82px}.battle-card .card-art{height:50px}.site-header{height:46px}.battle-top{height:49px}}


/* Iteración 2: rejilla de 18×32, previsualización por casilla y ocupación real */
.placement-overlay{inset:0;top:0;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));grid-template-rows:repeat(32,minmax(0,1fr));background:transparent;box-shadow:none;z-index:1000}
.grid-tile{border:1px solid #ffffff22;background:#ea47471e;min-width:0;min-height:0;position:relative;transition:background .07s}
.grid-tile.deployable{background:#50c9ff36;border-color:#e5f9ff4a;box-shadow:inset 0 0 0 1px #51daff15}
.grid-tile.hover-valid{background:#58f5d28c!important;box-shadow:inset 0 0 0 3px #edffad,0 0 12px #c1ffab!important;z-index:1}
.grid-tile.hover-invalid{background:#ff6263a8!important;box-shadow:inset 0 0 0 2px #ffe9e6!important;z-index:1}
.arena:not(.placing) .grid-tile{visibility:hidden}
.tower-foundation{position:absolute;z-index:3;border:3px solid #35465a;border-radius:3px;background:repeating-linear-gradient(45deg,#959ba2 0 8px,#727d89 8px 16px);box-shadow:inset 0 0 7px #0e1d38aa,0 5px #20333670;transform:scale(.98);pointer-events:none}
.tower-foundation--red{border-color:#aa4656}
.tower-foundation--blue{border-color:#3e83b8}
.tower-foundation.destroyed{opacity:.35;filter:grayscale(1)}
.unit.summoning{animation:summonDrop .5s cubic-bezier(.25,1.6,.6,1)}
@keyframes summonDrop{0%{opacity:0;filter:drop-shadow(0 -55px 14px #ffffffc0);transform:translate(-50%,-225%) scale(1.9)}62%{opacity:1}100%{transform:translate(-50%,-60%) scale(1);filter:drop-shadow(0 3px 2px #11291586)}}
.elixir-mode-row{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:10px;color:#93c5e8;font-weight:900}
.elixir-mode-row>span{flex:1;white-space:nowrap;font-size:9px}
.elixir-mode-row select{background:#11273e;color:#e2ebff;border:1px solid #476e92;border-radius:6px;max-width:160px;font-size:9px;padding:4px}
.side-wallet{font-size:12px;color:#f7cc67;font-weight:900;margin:-5px 0 17px}
.account-btn{max-width:144px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.packs-btn{white-space:nowrap}
.packs-btn b{background:#f1ca62;color:#382c16;border-radius:5px;padding:1px 5px}
.collection-wallet{color:#ffda82;font-size:13px;font-weight:900;margin:0 0 16px}
.collection-card{height:180px;justify-content:space-between;padding:12px 4px 6px;overflow:visible}
.collection-card.locked{filter:saturate(.35);opacity:.66}
.collection-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;width:100%;padding:0;border:0;background:transparent;color:#263344;min-width:0}
.collection-pick img{height:69px;max-width:95%;object-fit:contain;image-rendering:pixelated}
.collection-pick b{font-size:12px}
.collection-pick small{white-space:normal;font-size:9px;padding:0 2px;line-height:1.2}
.upgrade-btn{color:#fff7de;background:linear-gradient(#5e9c53,#367b4c);border:1px solid #96e87d;box-shadow:0 2px #225338;border-radius:6px;min-height:25px;width:92%;font-size:10px;font-weight:1000}
.upgrade-btn:disabled{opacity:.52;filter:grayscale(.6);cursor:not-allowed}
.profile-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
.profile-stat{padding:12px;background:#10283f;border:1px solid #496787;border-radius:10px}
.profile-stat small,.profile-stat b{display:block}
.profile-stat small{font-size:10px;color:#8bc8ee}
.profile-stat b{font-size:21px;color:#f7fbff}
.profile-note{font-size:11px!important;color:#9faac4}
.profile-form{text-align:left;display:grid;gap:12px;margin:20px 0 0}
.profile-form label{font-weight:900;font-size:12px}
.profile-input{font:inherit;width:100%;background:#10283f;border:2px solid #6384aa;border-radius:8px;padding:13px;color:#fff}
.profile-form p{font-size:11px}
.packs-panel{width:min(730px,100%);max-height:92vh;overflow:auto}
.pack-info{font-size:12px!important;margin:14px 0 22px}
.pack-shell{position:relative;width:190px;height:275px;margin:10px auto 22px;background:linear-gradient(145deg,#267abb 2%,#0e3f77 24%,#122852 51%,#18477e 78%,#eac45c 100%);border:4px solid #e6ca75;border-radius:16px 16px 10px 10px;box-shadow:0 12px 22px #0008,inset 0 0 0 2px #ffffff66;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:26px 6px 18px;touch-action:pan-y;user-select:none;cursor:grab}
.pack-shell:before{content:"";position:absolute;left:-5px;right:-5px;top:16%;border-top:2px dashed #c9ddf4a1}
.pack-logo{font-size:18px;font-weight:1000;color:#ffd764;letter-spacing:.12em;text-shadow:2px 3px #06254c}
.pack-illustration{font-size:75px;filter:drop-shadow(0 5px 4px #0009)}
.pack-name{font-size:11px;letter-spacing:.2em;font-weight:1000;color:white}
.pack-tear{font-size:9px;font-weight:1000;color:#dbeaff;letter-spacing:.08em}
.pack-reveal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 0 27px}
.pack-card{position:relative;border:3px solid #ebd18c;border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:14px 4px 10px;color:#203d4e;min-width:0;box-shadow:0 4px #8e6633;animation:packFlip .48s backwards;transform-origin:center}
@keyframes packFlip{0%{opacity:0;transform:rotateY(85deg) translateY(-22px)}100%{opacity:1;transform:rotateY(0) translateY(0)}}
.pack-card img{height:105px;width:100%;object-fit:contain;image-rendering:pixelated}
.pack-card b{font-size:11px}
.pack-card small{font-size:8px;font-weight:1000}
.pack-rarity{position:absolute;top:-8px;right:-5px;background:#ae55cd;color:#fff;border:2px solid white;border-radius:8px;padding:2px 4px;font-size:12px;font-weight:1000}
.pack-title{font-size:23px;color:#ffdf69;margin-top:22px}
.battle-stats{font-size:11px!important;color:#8dc1e1!important}
.battle-rewards{font-size:13px!important;color:#ffdf80!important;font-weight:900}
@media(max-width:780px){.header-actions{gap:5px}.account-btn,.packs-btn{font-size:10px;padding:6px 5px;max-width:86px}.account-btn span{display:inline-block;max-width:54px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.elixir-mode-row select{max-width:140px}.pack-card img{height:74px}.pack-reveal{gap:4px}.pack-card{padding:10px 2px 5px}.pack-card b{font-size:9px}.collection-card{height:148px}.collection-pick img{height:59px}}
@media(max-width:385px){.brand{font-size:12px;gap:4px}.header-actions{gap:3px}.header-actions .secondary-btn{font-size:9px;padding:5px 4px}.account-btn{max-width:65px}.account-btn span{max-width:36px}.packs-btn{max-width:70px}.elixir-mode-row{font-size:8px}.elixir-mode-row select{max-width:114px}.collection-card{height:133px}.collection-pick img{height:46px}.collection-pick b{font-size:10px}.upgrade-btn{font-size:9px}}


/* Iteración 3 — pantalla principal y menú inferior */
.app.in-lobby .game-container .battle-top,
.app.in-lobby .game-container .arena-outer,
.app.in-lobby .game-container .battle-bottom{display:none}
.app.in-battle #lobby-screen,.app.in-battle .bottom-nav,
.app.in-battle .left-panel,.app.in-battle .right-panel{display:none!important}
.app.in-battle .workspace{display:flex;justify-content:center}
.app.in-battle .game-container{width:min(100%,485px);max-width:485px}
.app.in-battle .site-header{height:52px}
.app.in-battle .page-footer{display:none}
.header-wallet{display:inline-flex;align-items:center;font-size:12px;color:#ffd87c;font-weight:1000}
.lobby-screen{padding:65px 20px 55px;min-height:550px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px}
.lobby-emblem{display:grid;place-items:center;width:96px;height:96px;background:linear-gradient(140deg,#568ad1,#194476);border:3px solid #b9d6fd;border-radius:27px;box-shadow:0 9px 0 #15253a,0 15px 22px #061c3277;font-size:50px;margin-bottom:14px}
.lobby-screen h2{font-size:30px;font-weight:1000;line-height:1.1;letter-spacing:-.035em;margin:6px 0}
.lobby-screen h2 span{color:#ffd868}
.lobby-screen>p{color:#aec9e4;font-size:13px;line-height:1.65;max-width:320px;margin:0 auto}
.lobby-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:13px 0 17px;width:100%}
.lobby-highlights span{padding:8px 3px;background:#102641;border:1px solid #466a90;border-radius:8px;font-size:10px;font-weight:1000;white-space:nowrap}
.lobby-hint{margin-top:15px!important;font-size:11px!important}
.bottom-nav{position:sticky;bottom:0;z-index:120;background:linear-gradient(#1e3c60,#122842);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;max-width:650px;margin:0 auto 20px;padding:8px;border-radius:17px;border:1px solid #587da1;box-shadow:0 12px 23px #0009,inset 0 1px #a9c5e442}
.nav-item{border:0;min-height:63px;border-radius:11px;background:transparent;color:#a9c2dd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-weight:1000;font-size:11px;letter-spacing:.02em;white-space:nowrap}
.nav-item:hover{background:#31567b;color:#fff}
.nav-item.active{background:linear-gradient(#3976af,#22537d);color:#ffdf77;box-shadow:inset 0 1px #91cfff,0 3px 0 #0b1e34}
.nav-icon{font-size:23px;line-height:1}
.nav-item b{font-size:9px;border-radius:9px;padding:2px 5px;background:#7544a9;color:white}
.surrender-button{border:1px solid #ee9991;border-radius:7px;background:#672f40;color:#ffe6df;font-size:11px;font-weight:1000;padding:6px 9px;white-space:nowrap}
.surrender-button:hover{background:#a84951}
.surrender-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:27px}
.surrender-actions .secondary-btn{min-height:45px}
.danger-btn{background:#d95159;color:white;font-weight:1000;border:2px solid #f7aaa8;border-radius:10px;box-shadow:0 4px #862d35}
.result-back-button{margin-top:13px;width:100%}

/* La torre y la caja de colisión ocupan exactamente el mismo rectángulo de baldosas. */
.tower,.tower--king{box-sizing:border-box}
.tower-body{height:96%;width:96%;border:3px solid #53646b;border-bottom-width:6px;border-radius:4px;box-shadow:inset 0 4px #ffffffa3,0 4px 0 #253c42}
.tower--king .tower-body{height:96%;width:96%}
.tower-top{top:-9%;height:28%;border-radius:3px;font-size:clamp(10px,2.3vw,17px)}
.tower-face{top:36%;height:49%;font-size:clamp(12px,2.6vw,21px)}
.tower-foundation{border:2px solid #364758;background:repeating-linear-gradient(45deg,#b8c0c3 0 6px,#798b95 6px 12px);box-shadow:inset 0 0 0 2px #ffffff60,0 4px #132f4170;transform:none}
.tower-health{width:100%;top:-29%;height:9px}
.tower-hp-text{top:-49%;font-size:clamp(9px,1.8vw,12px)}

/* Grilla clara y consistente: la sombra sólo indica dónde no se puede invocar. */
.arena.placing .placement-overlay{opacity:1;inset:0;top:0;bottom:0;left:0;right:0;background:none;box-shadow:none}
.placement-overlay .grid-tile{visibility:hidden;background:#243b5736;border:1px solid #d8edf1c0;box-shadow:inset 0 0 0 1px #071d2326;transition:none}
.arena.placing .placement-overlay .grid-tile{visibility:visible}
.arena.placing .placement-overlay .grid-tile.blocked{background:#a42e406e;border-color:#efbec77d}
.arena.placing .placement-overlay .grid-tile.blocked.checker{background:#b7465275}
.arena.placing .placement-overlay .grid-tile.deployable{background:#e2e9d547;border-color:#fffceeeb;box-shadow:inset 0 0 0 1px #fffad539}
.arena.placing .placement-overlay .grid-tile.deployable.checker{background:#d1e7c65b}
.arena.placing .placement-overlay .grid-tile.hover-valid{background:#8cfcadbb!important;border:2px solid #fffda4!important;box-shadow:inset 0 0 0 2px #36ba61,0 0 18px #a6ff87!important;z-index:2}
.arena.placing .placement-overlay .grid-tile.hover-invalid{background:#ff5a68bb!important;border:2px solid #ffe5df!important;z-index:2}
.placement-target{position:absolute;width:5.55556%;height:3.125%;z-index:1100;pointer-events:none;opacity:0;transition:opacity .07s;display:flex;align-items:center;justify-content:center;background:#77ef9999;border:2px solid #fff7a4;box-shadow:0 0 0 2px #378850,0 0 13px #fff89c;border-radius:2px}
.placement-target.visible{opacity:1}
.placement-target.invalid{background:#fd5c6c99;border-color:#fff0e8;box-shadow:0 0 0 2px #c12b3a,0 0 12px #f9787d}
.placement-target-art{position:absolute;bottom:55%;width:160%;height:190%;display:grid;place-items:center;filter:drop-shadow(0 2px 3px #0c252cc9)}
.placement-target-art img{max-height:100%;max-width:100%;object-fit:contain;image-rendering:pixelated}
#placement-coordinates{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#162e44e8;border-radius:5px;padding:1px 4px;font-size:9px;font-weight:1000;color:#fff}
.drag-ghost{opacity:.68;width:72px;height:72px;filter:drop-shadow(0 0 5px #ffe5a5);transform:translate(-50%,-112%)}
@media(max-width:780px){
  .site-header{height:56px}.header-wallet{font-size:10px}
  .workspace{padding-bottom:75px}.app.in-battle .workspace{padding-bottom:0}
  .bottom-nav{position:fixed;left:5px;right:5px;bottom:env(safe-area-inset-bottom,0px);margin:0;border-radius:13px 13px 8px 8px;padding:5px;gap:2px}
  .nav-item{min-height:58px;font-size:10px;gap:3px}.nav-icon{font-size:21px}
  .lobby-screen{min-height:500px;padding:35px 18px}
  .app.in-battle .game-container{max-width:405px}
  .tower-top{font-size:11px}.tower-face{font-size:12px}
}


/* ITERACIÓN 4: una pantalla completa en móvil, sin scroll durante el combate.
   El campo usa el alto SOBRANTE, nunca su anchura como referencia fija. */
@media (max-width: 780px) {
  html, body { margin: 0; width: 100%; min-width: 0; max-width: 100%; overflow-x: clip; }
  .app.in-battle {
    height: 100vh; /* respaldo */
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) 5px env(safe-area-inset-bottom, 0px);
    overflow: hidden;
  }
  .app.in-battle .site-header {
    flex: 0 0 38px;
    height: 38px;
    min-height: 0;
    padding-inline: 3px;
    gap: 4px;
  }
  .app.in-battle .brand {
    gap: 6px;
    font-size: clamp(11px, 3.7vw, 17px);
    letter-spacing: .025em;
    white-space: nowrap;
    min-width: 0;
  }
  .app.in-battle .brand-ball { flex: 0 0 23px; width: 23px; height: 23px; }
  .app.in-battle .brand-ball:after { left: 5px; top: 5px; }
  .app.in-battle .header-wallet {
    flex: 0 0 auto;
    font-size: clamp(9px, 2.5vw, 11px);
    white-space: nowrap;
  }
  .app.in-battle .workspace {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 4px 0 3px !important;
    overflow: hidden;
    align-items: stretch;
    justify-content: center;
  }
  .app.in-battle .game-container {
    display: flex;
    flex-direction: column;
    flex: 0 1 410px;
    width: min(100%, 410px);
    max-width: 410px;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    padding: 4px 4px 5px;
    overflow: hidden;
    border-radius: 10px;
  }
  .app.in-battle .battle-top {
    display: flex;
    flex: 0 0 43px;
    height: 43px;
    padding: 0 3px 4px;
    min-width: 0;
  }
  .app.in-battle .battle-top .player-info { gap: 5px; }
  .app.in-battle .battle-top .player-avatar { width: 26px; height: 26px; flex-shrink: 0; }
  .app.in-battle .battle-top .player-info b { font-size: 10px; }
  .app.in-battle .battle-top .player-info small { font-size: 8px; }
  .app.in-battle .battle-center #clock { font-size: 22px; }
  .app.in-battle .battle-center small { font-size: 7px; }
  .app.in-battle .score { font-size: 17px; gap: 3px; }

  /* Las dos dimensiones se resuelven con container units para conservar 5:8
     tanto en pantallas estrechas como en pantallas bajas/landscape. */
  .app.in-battle .arena-outer {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    max-height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-width: 3px;
    padding: 0;
    container-type: size;
    overflow: hidden;
    background: #142a35;
  }
  .app.in-battle .arena {
    flex: 0 0 auto;
    width: min(100cqw, 62.5cqh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 5 / 8;
    touch-action: none;
  }
  @supports not (width: 1cqw) {
    .app.in-battle .arena { height: 100%; width: auto; }
  }

  /* Controles compactos, siempre completos y visibles. */
  .app.in-battle .battle-bottom {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    padding: 5px 2px 0;
  }
  .app.in-battle .bottom-player { height: 26px; margin: 0 0 7px; }
  .app.in-battle .bottom-player .player-avatar { width: 25px; height: 25px; }
  .app.in-battle .bottom-player .player-info { gap: 5px; }
  .app.in-battle .bottom-player .player-info b { font-size: 10px; }
  .app.in-battle .bottom-player .player-info small { font-size: 8px; }
  .app.in-battle .next-card { gap: 5px; font-size: 8px; }
  .app.in-battle .next-card img { width: 29px; height: 26px; }
  .app.in-battle .hand {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
  }
  .app.in-battle .battle-card {
    width: 100%;
    min-width: 0;
    height: clamp(52px, 9.4dvh, 78px);
    padding: 0;
    border-width: 2px;
    border-radius: 7px;
  }
  .app.in-battle .battle-card .card-art {
    height: calc(100% - 24px);
    min-height: 0;
    overflow: hidden;
  }
  .app.in-battle .battle-card .card-art img {
    max-height: 100%;
    max-width: 86%;
    object-fit: contain;
  }
  .app.in-battle .card-name {
    font-size: clamp(8px, 2.4vw, 10px);
    line-height: 13px;
    height: 13px;
  }
  .app.in-battle .card-attack {
    font-size: 7px;
    line-height: 11px;
    height: 11px;
  }
  .app.in-battle .card-cost {
    width: 21px;
    height: 21px;
    top: -5px;
    left: -4px;
    border-width: 2px;
    font-size: 12px;
  }
  .app.in-battle .elixir-info {
    margin: 7px 0 1px;
    min-height: 14px;
    height: 14px;
    align-items: center;
  }
  .app.in-battle .elixir-label { font-size: 10px; }
  .app.in-battle .elixir-label b { font-size: 15px; }
  .app.in-battle .keyboard-hint { font-size: 8px; }
  .app.in-battle .elixir-mode-row {
    display: flex;
    min-width: 0;
    min-height: 22px;
    margin: 2px 0;
    gap: 4px;
    font-size: 9px;
  }
  .app.in-battle .elixir-mode-row > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 9px;
  }
  .app.in-battle .elixir-mode-row label { flex-shrink: 0; }
  .app.in-battle .elixir-mode-row select {
    flex: 0 1 132px;
    min-width: 78px;
    width: 0;
    max-width: 132px;
    font-size: 9px;
    height: 22px;
  }
  .app.in-battle .elixir-track {
    margin: 1px 0 0;
    height: 14px;
    flex-shrink: 0;
  }
  .app.in-battle .battle-footer {
    display: flex;
    min-width: 0;
    min-height: 24px;
    margin: 4px 0 0;
    gap: 5px;
    align-items: center;
    font-size: 9px;
  }
  .app.in-battle #status-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app.in-battle .surrender-button {
    min-height: 23px;
    padding: 2px 7px;
    font-size: 10px;
    flex: 0 0 auto;
  }

  /* Los diálogos nunca se salen de la pantalla. Su contenido puede desplazarse
     DENTRO del diálogo, sin desplazar la arena ni sus controles. */
  .modal-backdrop { max-height: 100dvh; min-width: 0; overflow: hidden; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .modal-panel { min-width: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .deck-modal-content, .packs-panel { max-height: 100%; }
}
@media (max-width: 780px) and (max-height: 690px) {
  .app.in-battle .site-header { flex-basis: 32px; height: 32px; }
  .app.in-battle .battle-top { flex-basis: 36px; height: 36px; }
  .app.in-battle .battle-top .player-info small { display: none; }
  .app.in-battle .battle-center #clock { font-size: 19px; }
  .app.in-battle .bottom-player { height: 22px; margin-bottom: 4px; }
  .app.in-battle .bottom-player .player-info small { display: none; }
  .app.in-battle .battle-card { height: clamp(49px, 9dvh, 62px); }
  .app.in-battle .elixir-info { margin-top: 4px; }
  .app.in-battle .elixir-mode-row { min-height: 19px; }
  .app.in-battle .elixir-mode-row select { height: 19px; }
  .app.in-battle .battle-footer { margin-top: 2px; min-height: 20px; }
  .app.in-battle .surrender-button { min-height: 20px; }
}
@media (max-width: 360px) {
  .app.in-battle .brand { font-size: 11px; }
  .app.in-battle .header-wallet { font-size: 9px; }
  .app.in-battle .hand { gap: 4px; }
  .app.in-battle .elixir-mode-row > span { font-size: 8px; }
  .app.in-battle .elixir-mode-row select { flex-basis: 102px; }
}