:root{--bg:#141824;--panel:#1f2536eb;--panel-solid:#1f2536;--line:#2f3850;--text:#e8ecf5;--muted:#9aa3b8;--gold:#f5c542;--hp:#e5484d;--ok:#3dd68c;--cost1:#9aa3b8;--cost2:#3dd68c;--cost3:#4f9dff;--creador:#ff7043;--vendedor:#4fc3f7;--granjero:#4caf50;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:15px;overflow:hidden}#app{padding:var(--sat) var(--sar) var(--sab) var(--sal);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}#stage{flex:1;min-height:0;position:relative}#c,#fx2d{touch-action:none;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#fx2d{pointer-events:none}button{font:inherit;color:inherit}.btn{border:1px solid var(--line);background:var(--panel-solid);cursor:pointer;touch-action:manipulation;border-radius:10px;min-width:44px;min-height:44px;padding:0 14px;font-weight:600}.btn:active{transform:scale(.96)}.btn.primary{color:#2a1d00;background:linear-gradient(#ffd65a,#e0a823);border-color:#ffdf7a}.btn:disabled{opacity:.45}.screen{z-index:20;text-align:center;background:#0a0c14db;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.screen h1{color:var(--gold);letter-spacing:1px;margin:0 0 8px;font-size:2.2rem}.small{font-size:.85rem}.muted{color:var(--muted)}.warn{color:var(--gold)}.row{align-items:center;display:flex}.gap{gap:8px}[hidden]{display:none!important}#hud{z-index:5;padding:6px 10px 4px}.hud-row{align-items:center;gap:8px;max-width:560px;margin:0 auto;display:flex}.hud-item{background:var(--panel);border:1px solid var(--line);border-radius:999px;align-items:center;gap:2px;min-width:64px;padding:6px 10px;font-size:1.05rem;font-weight:800;display:flex}.hud-item.gold .hud-val{color:var(--gold)}.hud-round{white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--muted);flex:1;font-size:.95rem;font-weight:700;overflow:hidden}.hud-actions{gap:6px;display:flex}.btn.icon{width:44px;padding:0;font-size:1.15rem}.hud-item.hit{animation:.45s hit}.hud-item.tick{animation:.3s tick}@keyframes hit{0%,to{background:var(--panel);transform:translate(0)}20%{background:#e5484d99;transform:translate(-4px)}50%{transform:translate(4px)}}@keyframes tick{50%{transform:scale(1.12)}}#synergies{z-index:4;flex-direction:column;gap:4px;max-height:calc(100% - 16px);display:flex;position:absolute;top:8px;left:8px;overflow-y:auto}.syn{border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:8px;align-items:center;gap:6px;min-height:34px;padding:3px 8px;font-size:.85rem;font-weight:700;display:flex}.syn.tier0{opacity:.6}.syn.tier1{border-color:#c08a52;box-shadow:inset 3px 0 #c08a52}.syn.tier2{border-color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}.syn-icon{font-size:1rem}.syn.more{color:var(--muted);justify-content:center}#panel{background:linear-gradient(180deg, #14182400 0, var(--bg) 14px);z-index:5;padding:6px 8px 8px;position:relative}.panel-content{flex-direction:column;justify-content:flex-end;gap:6px;max-width:560px;height:252px;margin:0 auto;display:flex}.level-row{align-items:center;gap:6px;display:flex}.level{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.xpbar{background:#0b0d14;border-radius:4px;flex:1;min-width:30px;height:8px;overflow:hidden}.xpfill{background:linear-gradient(90deg,#4f9dff,#8cc4ff);height:100%;transition:width .3s}.level-row .btn{padding:0 10px;font-size:.9rem}.btn.locked{border-color:var(--gold)}.shop{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}.card{border:2px solid var(--cost1);background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--origin) 35%, transparent), transparent 70%), var(--panel-solid);cursor:pointer;touch-action:manipulation;border-radius:10px;flex-direction:column;justify-content:space-between;align-items:center;gap:2px;height:92px;padding:6px 3px 4px;display:flex;position:relative;overflow:hidden}.card:active{transform:scale(.95)}.card.cost2{border-color:var(--cost2)}.card.cost3{border-color:var(--cost3)}.card.empty{border-style:dashed;border-color:var(--line);background:0 0}.card.poor{opacity:.45}.card.merge{animation:1.1s ease-in-out infinite alternate glow}.card.merge3{border-color:var(--gold)}@keyframes glow{0%{box-shadow:0 0 #f5c54200}to{box-shadow:0 0 14px #f5c542e6}}.merge-tag{color:var(--gold);font-size:.7rem;position:absolute;top:2px;right:4px}.card-shape{color:var(--origin);font-size:1.4rem;line-height:1}.card-name{text-align:center;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;font-size:.7rem;font-weight:700;line-height:1.1;display:-webkit-box;overflow:hidden}@media (max-width:380px){.card-shape{font-size:1.1rem}.card-name{font-size:.64rem}}.card-traits{font-size:.8rem}.card-cost{color:var(--gold);font-size:.8rem;font-weight:800}.btn.fight{letter-spacing:1px;width:100%;min-height:48px;font-size:1.1rem}.inventory{align-items:center;gap:6px;min-height:44px;padding-bottom:2px;display:flex;overflow-x:auto}.item{border:2px solid var(--c);background:var(--panel-solid);touch-action:none;cursor:grab;border-radius:10px;flex:none;width:44px;height:44px;font-size:1.3rem}.item.ghost{z-index:50;pointer-events:none;opacity:.9;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.combat-bar{flex:1;justify-content:space-between;align-items:center;gap:8px;min-height:56px;display:flex}.wave-label{font-weight:800}.sell-zone{border:2px dashed var(--hp);pointer-events:none;background:#e5484d40;border-radius:12px;justify-content:center;align-items:center;font-size:1.3rem;font-weight:800;display:none;position:absolute;top:0;bottom:0;left:0;right:0}#panel.selling .sell-zone{display:flex}#panel.selling.over .sell-zone{background:#e5484d8c}#sheet{z-index:30;pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}.sheet-backdrop{opacity:0;background:#00000073;transition:opacity .2s;position:absolute;top:0;bottom:0;left:0;right:0}.sheet{max-width:560px;padding:8px 16px calc(16px + var(--sab));background:var(--panel-solid);border:1px solid var(--line);border-radius:18px 18px 0 0;flex-direction:column;gap:10px;margin:0 auto;transition:transform .22s;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(105%)}#sheet.open{pointer-events:auto}#sheet.open .sheet-backdrop{opacity:1}#sheet.open .sheet{transform:translateY(0)}.sheet-grip{background:var(--line);border-radius:2px;width:40px;height:4px;margin:0 auto 4px}.sheet-head{align-items:center;gap:12px;display:flex}.sheet-head h3{margin:0 0 4px}.sheet-head p{margin:0}.swatch{border:3px solid var(--cost1);border-radius:12px;flex:none;width:52px;height:52px}.swatch.cost2{border-color:var(--cost2)}.swatch.cost3{border-color:var(--cost3)}.swatch.big-icon{background:#0b0d14;justify-content:center;align-items:center;font-size:1.8rem;display:flex}.stars{color:var(--gold)}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips.center{justify-content:center}.chip{border:1px solid var(--line);background:#0b0d14;border-radius:999px;padding:3px 9px;font-size:.82rem}.trait-granjero{border-color:var(--granjero)}.trait-creador{border-color:var(--creador)}.trait-vendedor{border-color:var(--vendedor)}.stats{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.stat{background:#0b0d14;border-radius:8px;flex-direction:column;padding:6px 8px;font-size:.8rem;display:flex}.stat b{font-size:1rem}.ability p,.tiers p{color:var(--muted);margin:4px 0 0}.tier.on{color:var(--text)}.sheet-close{width:100%}.logo{filter:drop-shadow(0 4px 12px #f5c54266);font-size:4rem;line-height:1}.menu-buttons{flex-direction:column;gap:10px;width:min(300px,100%);display:flex}.btn.big{min-height:52px;font-size:1.05rem}.btn.danger{border-color:var(--hp);color:#ff9a9d}.screen.end.won h1{color:var(--gold)}.screen.end.lost h1{color:#ff9a9d}.settings-box{background:var(--panel-solid);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:12px;width:min(320px,100%);padding:16px;display:flex}.setting{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.setting input[type=range]{width:55%;accent-color:var(--gold)}.setting input[type=checkbox]{width:24px;height:24px;accent-color:var(--gold)}.banner{background:var(--panel);border:2px solid var(--line);text-align:center;z-index:6;pointer-events:none;border-radius:16px;padding:14px 28px;animation:.3s bannerIn;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.banner.won{border-color:var(--gold)}.banner.lost{border-color:var(--hp)}.banner-title{font-size:1.8rem;font-weight:900}.banner.won .banner-title{color:var(--gold)}.banner.lost .banner-title{color:#ff9a9d}.banner-sub{margin-top:4px;font-weight:700}.banner.out{opacity:0;transition:opacity .3s}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}}.loot-row{justify-content:center;gap:10px;margin-top:8px;display:flex}.loot-slot{border:2px dashed var(--line);opacity:.7;border-radius:10px;place-items:center;width:44px;height:44px;font-size:1.6rem;display:grid}.loot-slot.open{opacity:1;border:2px solid var(--c,var(--gold));box-shadow:0 0 14px var(--c,var(--gold));animation:.45s cubic-bezier(.2,1.6,.4,1) lootPop}@keyframes lootPop{0%{transform:scale(.3)rotate(-20deg)}}@media (prefers-reduced-motion:reduce){.loot-slot.open{animation:none}}#toasts{top:calc(64px + var(--sat));z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{background:var(--panel-solid);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:700;animation:.2s toastIn}.toast.error{border-color:var(--hp)}.toast.good{border-color:var(--gold);color:var(--gold)}.toast.out{opacity:0;transition:all .25s;transform:translateY(-6px)}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}}.debug{right:6px;bottom:calc(6px + var(--sab));z-index:60;background:#000000b3;border-radius:6px;max-width:240px;padding:4px 6px;font:11px monospace;position:fixed}.debug summary{cursor:pointer;color:var(--muted)}.dbg-btns{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.dbg-btns button{padding:4px 6px;font:11px monospace}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (min-width:700px) and (orientation:landscape){#app{max-width:640px;margin:0 auto;left:0;right:0}}.logo-img{filter:drop-shadow(0 6px 14px #00000080);width:min(52vw,220px);height:auto}.portrait-img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.card-shape:has(.portrait-img){width:2.1rem;height:2.1rem}.swatch:has(.portrait-img){background:#0b0d14}.cam-reset{z-index:4;position:absolute;top:8px;right:8px}.inv-row{align-items:center;gap:6px;display:flex}.inv-row .inventory{flex:1;min-width:0}.codex-btn{flex:none}.sheet.wide{max-height:86vh}.sheet-back{align-self:flex-start;padding:4px 10px;font-size:.85rem}.codex-title{margin:0}.codex-tabs{gap:6px;display:flex}.codex-tab{opacity:.7;flex:1;padding:6px 4px;font-size:.85rem}.codex-tab.on{opacity:1;border-color:var(--gold);color:var(--gold)}.codex-body{flex:auto;min-height:0;overflow-y:auto}.codex-body p{margin:0 0 8px}.item-ico{border:2px solid var(--c);background:#0b0d14;border-radius:8px;justify-content:center;align-items:center;width:30px;height:30px;font-size:1rem;line-height:1;display:inline-flex}.recipe-grid{grid-template-columns:repeat(7,minmax(0,1fr));place-items:center;gap:4px;display:grid}.recipe-grid button{cursor:pointer;background:0 0;border:0;border-radius:10px;padding:2px}.rg-corner{color:var(--muted);font-weight:800}.rg-head .item-ico{opacity:.55}.rg-head.owned .item-ico{opacity:1;box-shadow:0 0 0 2px var(--gold)}.rg-cell .item-ico{opacity:.8}.rg-cell.ready .item-ico{opacity:1;box-shadow:0 0 8px 2px var(--gold)}.recipe-line{align-items:center;gap:6px;display:flex}.combos{flex-direction:column;gap:4px;display:flex}.combo{border:1px solid var(--line);cursor:pointer;text-align:left;background:#0b0d14;border-radius:10px;align-items:center;gap:6px;padding:3px 6px;display:flex}.combo-name{font-size:.85rem}.codex-group{margin-bottom:10px}.codex-group-title{margin-bottom:4px;display:block}.codex-hero-list{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px;display:grid}.codex-hero{border:1px solid var(--line);cursor:pointer;background:#0b0d14;border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;display:flex}.codex-hero-name{text-align:center;font-size:.75rem;font-weight:700}.swatch.small{border-width:2px;width:44px;height:44px}.swatch.tiny{border-width:2px;border-radius:8px;width:32px;height:32px}.codex-syns{flex-direction:column;gap:6px;display:flex}.codex-syn{border:1px solid var(--line);cursor:pointer;text-align:left;background:#0b0d14;border-radius:12px;flex-direction:column;gap:6px;padding:8px;display:flex}.codex-syn-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.codex-syn-heroes{flex-wrap:wrap;gap:4px;display:flex}