:root{font-family:system-ui,Segoe UI,sans-serif;color:#f2e9d8;background:#0d111b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0%,#283047,#0d111b 65%);min-height:100vh}#app{max-width:1040px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #485064;padding-bottom:20px}small{color:#e8ae60;letter-spacing:3px;font-weight:bold}h1{margin:4px 0;color:#f8cb78;font-family:Georgia,serif;font-size:clamp(30px,5vw,52px);letter-spacing:2px}header p{margin:0;color:#aab0c0}.resources{display:flex;gap:10px;flex-wrap:wrap}.resources span,.pill{background:#202a3d;border:1px solid #45516b;border-radius:10px;padding:10px 14px}nav{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}button{cursor:pointer;color:#f7e6cc;background:#273348;border:1px solid #53617c;border-radius:9px;padding:12px 17px;font-weight:700}button:hover,button.active{background:#725332;border-color:#e6b66e}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:#bd7c35;border-color:#edbd78;color:#10151f}main{min-height:450px}.panel{background:linear-gradient(150deg,#202b3d,#161d2c);border:1px solid #3d4a60;border-radius:15px;padding:22px;margin-bottom:16px;box-shadow:0 10px 25px #0003}h2,h3{font-family:Georgia,serif;color:#f6cb88;margin-top:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}.hero{border:1px solid #52627c;border-radius:12px;padding:18px;background:#1b2535;text-align:center}.hero.selected{border:2px solid #e6b66e}.portrait{font-size:68px;line-height:1.4}.stat{color:#c7c8d0;font-size:14px}.muted{color:#aeb5c4}.battlefield{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;text-align:center}.fighter{background:#111b2b;border:1px solid #47546a;border-radius:12px;padding:20px}.fighter .portrait{font-size:82px}.versus{font-family:Georgia,serif;font-size:25px;color:#e9b45d}.bar{height:10px;background:#384255;border-radius:8px;overflow:hidden;margin:10px 0}.fill{height:100%;background:#65c78e}.enemy .fill{background:#e87772}.log{white-space:pre-line;line-height:1.6;color:#e7d6bb}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.tag{display:inline-block;border:1px solid #67718a;border-radius:99px;padding:4px 10px;font-size:12px;color:#d9dce7}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:35px;color:#929db2;font-size:12px}footer button{font-size:12px;padding:8px}.weapon{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #3b4659;padding:14px 0}.weapon:last-child{border-bottom:0}@media(max-width:650px){#app{padding:12px}header{align-items:flex-start;flex-direction:column}.battlefield{grid-template-columns:1fr;gap:6px}.fighter .portrait{font-size:55px}.versus{font-size:16px}.panel{padding:15px}}

/* Custom Solana Soul pixel-art characters */
.portrait{height:170px;display:flex;align-items:center;justify-content:center;margin:4px auto 12px;overflow:hidden;background:radial-gradient(circle,#283850,#111b2b 75%);border-radius:12px}
.sprite{width:100%;height:100%;max-width:170px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 7px 4px #0007)}
.hero .portrait{height:165px}
.fighter .portrait{height:190px}
.attack-motion .sprite{animation:lunge .45s ease-in-out}
.hit-motion .sprite{animation:shake .45s ease-in-out}
@keyframes lunge{0%,100%{transform:translateX(0)}50%{transform:translateX(25px) scale(1.07)}}
@keyframes shake{0%,100%{transform:translateX(0);filter:none}25%,75%{transform:translateX(8px);filter:brightness(1.8)}50%{transform:translateX(-8px);filter:brightness(1.8)}}
@media(max-width:650px){.fighter .portrait{height:140px}.hero .portrait{height:150px}}

/* Minimal pixel forest arena: CSS scenery, no extra image downloads */
.arena{position:relative;isolation:isolate;overflow:hidden;padding:25px 16px 18px;border:2px solid #48694d;border-radius:12px;background:linear-gradient(180deg,#203d48 0%,#30594f 55%,#496f45 56%,#3b5c3a 80%,#283f2d 100%)}
.arena:before{content:"";position:absolute;inset:0 0 44%;z-index:-1;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 34px,#1d3436 34px 46px,transparent 46px 80px),linear-gradient(180deg,transparent,#183e3b)}
.arena .fighter{position:relative;background:#101c25b8;border-color:#68866b;backdrop-filter:blur(2px)}
.arena .portrait{background:radial-gradient(ellipse at bottom,#4d6e4a88,transparent 72%)}
.arena .versus{font-weight:900;color:#fff0b4;text-shadow:0 2px 3px #14251c}
.damage-pop{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:#ffe28a;font-size:28px;font-weight:900;text-shadow:2px 2px #472b2b;opacity:0;pointer-events:none}
.damage-pop.show{animation:damage-float .65s ease-out}
.victory-notice{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:5;white-space:nowrap;color:#ffdf88;font-size:clamp(24px,4vw,38px);font-weight:900;text-shadow:2px 3px #273b26;background:#13271ee8;border:2px solid #dfb967;border-radius:10px;padding:10px 18px;animation:appear .15s ease-out;pointer-events:none}
@keyframes damage-float{0%{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-25px)}}
@keyframes appear{from{opacity:0}to{opacity:1}}
.attack-motion .sprite{animation:tiny-lunge .28s ease-out}
.hit-motion .sprite{animation:tiny-hit .28s ease-out}
@keyframes tiny-lunge{50%{transform:translateX(9px)}}
@keyframes tiny-hit{50%{filter:brightness(1.4)}}
@media(prefers-reduced-motion:reduce){.attack-motion .sprite,.hit-motion .sprite,.damage-pop.show,.victory-notice{animation:none}}
#wallet{margin-left:10px}

.r-common{--rc:#b8bcc4}.r-uncommon{--rc:#4ade80}.r-rare{--rc:#60a5fa}.r-legendary{--rc:#fbbf24}.r-mythic{--rc:#c084fc}
.rar{color:var(--rc);font-weight:700}
.winfo{display:flex;align-items:center;gap:14px}
.wimg{width:64px;height:64px;flex:none;image-rendering:pixelated;background:#0004;border:2px solid var(--rc);border-radius:10px}
.wimg.big{width:200px;height:200px}
.r-legendary.wimg{box-shadow:0 0 10px #fbbf2466}.r-mythic.wimg{box-shadow:0 0 14px #c084fc99}
.reveal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000a;cursor:pointer}
.reveal-card{text-align:center;padding:26px 34px;background:linear-gradient(150deg,#202b3d,#161d2c);border:2px solid var(--rc);border-radius:18px;box-shadow:0 0 40px var(--rc);animation:pop .35s ease-out}
.reveal-rar{letter-spacing:4px;margin-top:8px}.reveal-card h2{margin:6px 0}.reveal-card small{opacity:.6}
.reveal.r-mythic .reveal-card{animation:pop .35s ease-out,pulse 1.6s ease-in-out infinite .35s}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{50%{box-shadow:0 0 70px var(--rc)}}

.stats{display:flex;gap:30px;flex-wrap:wrap;margin:8px 0}.big{font-size:1.35rem}
.row-right{display:flex;align-items:center;gap:10px}
input[type=number],select{background:#141b29;color:#f7e6cc;border:1px solid #53617c;border-radius:9px;padding:11px 12px;font:inherit;max-width:150px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;background:#725332;color:#fff;border:1px solid #e6b66e;border-radius:10px;padding:12px 18px;box-shadow:0 8px 24px #0008;animation:pop .25s ease-out}

.e-Fire{--rc:#f87171}.e-Water{--rc:#60a5fa}.e-Earth{--rc:#a3e635}.e-Lightning{--rc:#facc15}
.portrait[class*="e-"]{border-radius:12px;box-shadow:inset 0 0 0 2px var(--rc),0 0 14px #0006;background:#0003}
.tag[class*="e-"]{color:var(--rc);border-color:var(--rc)}
.chip{display:inline-block;background:#0004;border:1px solid #53617c;border-radius:20px;padding:2px 9px;font-size:.78rem;margin:4px 4px 0 0;color:#e9dcc3}
.cthumb{width:64px;height:64px;flex:none;border:2px solid var(--rc);border-radius:10px;overflow:hidden;background:#0006}
.cthumb img{width:100%;height:100%;object-fit:cover;object-position:top;image-rendering:pixelated}
select{max-width:230px!important}

/* Solana Soul branding */
.logo{height:76px;width:76px;vertical-align:middle;margin-right:12px;filter:drop-shadow(0 0 12px #ff9a2e99)}
.coin{height:1.25em;width:1.25em;vertical-align:-.25em;margin-right:2px;filter:drop-shadow(0 0 3px #ff9a2e88)}

/* social + buy links */
.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.buy-label{font-weight:700;color:#f8cb78;letter-spacing:.5px}
.soc{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #45516b;background:#202a3d;transition:transform .15s,box-shadow .15s}
.soc:hover{transform:translateY(-2px) scale(1.07);box-shadow:0 0 14px #ff9a2e88}
.soc img{width:24px;height:24px;display:block}
.soc.buy{border-color:#f8cb78;padding:0;overflow:hidden}.soc.buy img{width:100%;height:100%}
.soc.discord{background:#5865F2;border-color:#7983f5}
.soc.x{background:#000;border-color:#555}

/* XP bar */
.xp{margin:8px 0;text-align:left}
.xp-label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.85rem}
.bar.xpbar{height:14px;border:1px solid #6b5a2e;margin:5px 0}
.bar.xpbar .fill{background:linear-gradient(90deg,#f8cb78,#ff9a2e);transition:width .4s ease}

/* Buy token stays left; Discord + X sit alone on the far right edge */
.social{width:100%;justify-content:space-between}
.social-left,.social-right{display:flex;align-items:center;gap:10px}