:root{--paper: #fbf4e4;--panel: #fffdf8;--ink: #2b2a26;--muted: #7a7263;--line: #e7dcc4;--t-fire: #ef6b43;--t-water: #3aa0e6;--t-grass: #56ab5b;--t-electric: #efbb2a;--t-rock: #b08a5e;--t-air: #8db8de;--shadow: 0 10px 26px -14px rgba(43, 42, 38, .5);--radius: 18px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(circle at 12% 18%,rgba(239,187,42,.12),transparent 22%),radial-gradient(circle at 88% 12%,rgba(58,160,230,.12),transparent 24%),radial-gradient(circle at 78% 88%,rgba(86,171,91,.12),transparent 26%);line-height:1.55}h1,h2,h3{font-family:"Baloo 2",system-ui,sans-serif;margin:0;line-height:1.1}.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}.hero{text-align:center;padding:clamp(34px,6vw,64px) 0 clamp(20px,3vw,32px)}.badge{display:inline-block;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--ink);padding:.3rem .9rem;border-radius:999px;transform:rotate(-1.5deg)}.hero h1{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:800;margin:.7rem 0 .3rem;letter-spacing:-.01em}.hero h1 .pop{color:var(--t-fire)}.hero p{margin:.2rem auto 0;max-width:52ch;color:var(--muted);font-size:clamp(1rem,2vw,1.15rem)}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:1.4rem 0 .4rem;justify-content:center}.search{flex:1 1 240px;max-width:360px;font:inherit;padding:.6rem 1rem;border:2px solid var(--ink);border-radius:999px;background:var(--panel)}.search:focus{outline:3px solid var(--t-electric);outline-offset:1px}.filters{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}.chip{font:inherit;font-weight:700;font-size:.82rem;cursor:pointer;padding:.34rem .8rem;border-radius:999px;border:2px solid var(--ink);background:var(--panel);color:var(--ink);transition:transform .1s ease}.chip:hover{transform:translateY(-1px)}.chip[aria-pressed=true],.arena-launch.active{background:var(--ink);color:var(--paper)}main{padding:1.4rem 0 4rem}#grid[hidden],#filters[hidden],#battle-arena[hidden],#empty[hidden]{display:none!important}.arena{margin:0 0 clamp(26px,4vw,42px)}.arena-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.9rem}.arena-heading h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800}.arena-badge{background:#315b7d;transform:rotate(1deg)}.arena-stage{border:2.5px solid var(--ink);border-radius:var(--radius);background:linear-gradient(135deg,rgba(49,91,125,.16),transparent 42%),linear-gradient(315deg,rgba(239,107,67,.14),transparent 44%),var(--panel);box-shadow:var(--shadow);padding:clamp(14px,3vw,24px)}.arena-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem;margin-bottom:1rem}.pet-select{display:grid;gap:.25rem;min-width:min(100%,230px);font-weight:800;color:var(--ink)}.pet-select span{font-family:"Baloo 2",sans-serif;font-size:.9rem}.pet-select select{width:100%;min-height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-weight:700;padding:.45rem .7rem}.battle-button{min-height:44px;border:2px solid var(--ink);border-radius:10px;background:#e6f0fa;color:var(--ink);cursor:pointer;font:inherit;font-weight:900;padding:.48rem .9rem;box-shadow:0 4px 0 var(--ink);transition:transform .1s ease,box-shadow .1s ease}.battle-button:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}.battle-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.battle-button.primary{background:var(--t-electric)}.battle-button:disabled{cursor:wait;transform:none;box-shadow:0 2px 0 var(--ink);opacity:.78}.pet-select select:focus-visible,.battle-button:focus-visible{outline:4px solid var(--t-fire);outline-offset:3px}.reload{position:relative;flex:1 1 150px;min-width:min(100%,150px);min-height:44px;overflow:hidden;border:2px solid var(--ink);border-radius:10px;background:#ffffffb8;display:grid;place-items:center}.reload span{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,var(--t-fire),var(--t-electric));transition:width .1s linear}.reload b{position:relative;z-index:1;font-family:"Baloo 2",sans-serif;font-size:.95rem;font-weight:900}.battle-heads{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(10px,2.4vw,20px);margin:.2rem 0 .8rem}.battle-name{min-width:0;border:2px solid var(--ink);border-radius:14px;background:var(--panel);padding:.7rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.35rem .55rem}.battle-name.bot{text-align:right;grid-template-columns:auto 1fr auto}.battle-name span{border:2px solid var(--ink);border-radius:999px;padding:.05rem .5rem;font-family:"Baloo 2",sans-serif;font-size:.85rem;font-weight:900}.battle-name strong{min-width:0;font-family:"Baloo 2",sans-serif;font-size:clamp(1.15rem,3vw,1.55rem);line-height:1;overflow-wrap:anywhere}.battle-name .type{justify-self:end;font-style:normal}.battle-name small{grid-column:1 / -1;color:var(--muted);font-family:"Baloo 2",sans-serif;font-size:.9rem;font-weight:900}.health{grid-column:1 / -1;height:16px;border:2px solid var(--ink);border-radius:999px;background:#ffffffb8;overflow:hidden}.health span{display:block;height:100%;border-right:2px solid rgba(43,42,38,.35);background:linear-gradient(90deg,#56ab5b,#efbb2a,#ef6b43)}.versus{align-self:center;display:grid;place-items:center;width:clamp(48px,8vw,68px);aspect-ratio:1;border:2.5px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--paper);font-family:"Baloo 2",sans-serif;font-weight:900;font-size:1.2rem}.arena-scene{position:relative;height:clamp(260px,40vw,420px);overflow:hidden;border:2.5px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 55%),linear-gradient(180deg,#e6f0fa,#fffdf8 62%,#ece0cf)}.arena-scene canvas{position:relative;z-index:1;width:100%;height:100%;display:block}.arena-pet{position:absolute;left:50%;top:48%;z-index:2;width:clamp(116px,25vw,220px);height:clamp(96px,21vw,180px);display:grid;place-items:center;transform-origin:50% 72%;pointer-events:none;filter:drop-shadow(0 12px 8px rgba(43,42,38,.24));will-change:transform}.arena-pet svg{width:100%;height:100%;overflow:visible}.arena-pet img{width:100%;height:100%;object-fit:contain}.arena-pet-mount,.arena-fallback-art{grid-area:1 / 1;width:100%;height:100%}.arena-pet-mount{position:relative;z-index:2}.arena-fallback-art{z-index:1;opacity:.88}.arena-pet .emoji{font-size:clamp(3rem,11vw,6.5rem);line-height:1}.arena-standby{min-height:150px;border:2.5px dashed rgba(43,42,38,.36);border-radius:14px;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.74),transparent 48%),linear-gradient(180deg,#e6f0fa,#fffdf8);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.8rem;padding:1rem;text-align:center}.arena-standby strong{min-width:0;font-family:"Baloo 2",sans-serif;font-size:clamp(1.15rem,4vw,1.8rem);overflow-wrap:anywhere}.arena-standby span{display:grid;place-items:center;width:48px;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--paper);font-family:"Baloo 2",sans-serif;font-weight:900}.battle-actions{position:sticky;bottom:.65rem;z-index:2;display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,.7fr);gap:.75rem;margin-top:.8rem;padding:.65rem;border:2px solid var(--ink);border-radius:14px;background:#fffdf8f0;box-shadow:var(--shadow)}.fire-action{width:100%}.battle-result{margin:1rem 0 0;border-top:2px dashed rgba(43,42,38,.24);padding-top:.75rem;font-family:"Baloo 2",sans-serif;font-size:clamp(1.15rem,3vw,1.55rem);font-weight:900;text-align:center}.winner-popup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:1rem;background:#2b2a267a}.winner-popup.hidden{display:none}.winner-card{width:min(92vw,420px);border:3px solid var(--ink);border-radius:18px;background:var(--panel);box-shadow:0 28px 56px -24px #0000008c;padding:clamp(18px,4vw,28px);text-align:center}.winner-card h3{margin:.75rem 0 1rem;font-size:clamp(2rem,7vw,3.25rem);font-weight:900;color:var(--t-fire)}.arena-empty{margin:0;text-align:center;font-weight:800;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(16px,2.4vw,26px)}.card{background:var(--panel);border:2.5px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 16px 30px -14px #2b2a268c}.card:focus-visible{outline:4px solid var(--t-electric);outline-offset:4px}.card[aria-expanded=true]{transform:translateY(-2px);box-shadow:0 18px 34px -16px #2b2a269e}.card.hidden{display:none}.art{position:relative;aspect-ratio:5 / 4;display:grid;place-items:center;border-bottom:2.5px solid var(--ink);background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.5),transparent 60%),var(--tint, #efe7d3)}.art img{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.18))}.art .emoji{font-size:clamp(3rem,9vw,4.2rem);line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}.art .anim{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 5px rgba(0,0,0,.16))}.art .anim-mount{width:100%;height:100%;display:grid;place-items:center;filter:drop-shadow(0 5px 5px rgba(0,0,0,.16))}.art .anim-mount svg{width:100%;height:100%}.num{position:absolute;top:10px;left:12px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1rem;color:#2b2a2673}.card-body{padding:.85rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}.card-body h2{font-size:1.5rem;font-weight:800}.types{display:flex;gap:.4rem;flex-wrap:wrap}.type{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#fff;padding:.18rem .62rem;border-radius:999px;border:2px solid rgba(0,0,0,.18)}.flavor{margin:0;font-size:.94rem;color:var(--muted)}.author{margin:.1rem 0 0;font-size:.74rem;font-weight:700;color:var(--ink);opacity:.6}.card-details{display:none}.card[aria-expanded=true] .card-details{display:block}.card-details .flavor{margin-top:.2rem}.details-hint{align-self:flex-start;margin-top:auto;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:.84rem;color:var(--ink);border-bottom:2px solid var(--t-electric)}.stats{margin:.2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;border-top:2px dashed var(--line);padding-top:.6rem}.stats div{text-align:center}.stats dt{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.stats dd{margin:.1rem 0 0;font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.92rem}.t-fire{--tint: #fde4dc}.t-water{--tint: #dcecfa}.t-grass{--tint: #ddf0de}.t-electric{--tint: #fbf0cf}.t-rock{--tint: #ece0cf}.t-air{--tint: #e6f0fa}.type.fire{background:var(--t-fire)}.type.water{background:var(--t-water)}.type.grass{background:var(--t-grass)}.type.electric{background:var(--t-electric);color:#4a3a00}.type.rock{background:var(--t-rock)}.type.air{background:var(--t-air);color:#1f3850}.empty{text-align:center;color:var(--muted);padding:3rem 1rem;font-weight:700}.empty code{background:var(--panel);border:1px solid var(--line);padding:.1rem .4rem;border-radius:5px}footer{text-align:center;padding:1.5rem 0 3rem;color:var(--muted);font-weight:700}footer a{color:var(--t-fire)}@media (max-width: 720px){.arena-heading{align-items:start;flex-direction:column}.arena-controls{align-items:stretch}.pet-select,.battle-button,.reload{flex:1 1 100%}.battle-heads{grid-template-columns:1fr}.battle-name,.battle-name.bot{text-align:left}.versus{justify-self:center}.arena-standby{grid-template-columns:1fr}.arena-standby span{justify-self:center}.battle-actions{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){.card,.battle-button{transition:none}}