:root{
  --bg:#171513;--panel:#22211e;--panel2:#11100f;--line:#756d57;--gold:#d7bb65;--green:#62d25a;--red:#d65a4a;--blue:#5ba6ff;--text:#eee5d0;--muted:#b9ad91;
}
*{box-sizing:border-box} body{margin:0;background:#0c0b0a;color:var(--text);font-family:"Courier New",monospace;image-rendering:pixelated;background-image:radial-gradient(circle at top,#302a21,#0c0b0a 55%)}
a{color:#9ee778}.wrap{max-width:1220px;margin:0 auto;padding:18px}.wrap.small{max-width:760px}.topbar{border-bottom:4px solid #3d372d;background:#12110f;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 18px;position:sticky;top:0;z-index:5;box-shadow:0 4px 0 #000}.brand{font-size:24px;color:var(--gold);font-weight:bold;letter-spacing:1px}.topbar nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.topbar a,.coins{border:2px solid #554d3d;background:#1d1b18;padding:8px 10px;text-decoration:none;color:var(--text)}.coins{color:#99e06d}.footer{max-width:1220px;margin:30px auto;padding:16px;color:var(--muted);border-top:2px solid #3d372d}.hero{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}.hero h1,.card h1{font-size:46px;color:var(--gold);text-shadow:3px 3px #000}.subtitle{font-size:18px;color:var(--muted);line-height:1.5}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.feature-grid div,.card,.panel,.rule-box{background:linear-gradient(#24211d,#151412);border:3px solid var(--line);box-shadow:0 0 0 3px #080807 inset,0 6px 0 #000;padding:16px}.auth-card,.login-card{max-width:470px;margin:0 auto}label{display:block;margin:12px 0;color:var(--gold)}input{width:100%;padding:12px;background:#0c0b0a;border:2px solid #6b624d;color:var(--text);font:inherit}.btn{display:inline-block;background:#1a6a20;border:3px solid #90db66;color:#efffdd;text-decoration:none;padding:12px 18px;font:bold 16px "Courier New",monospace;box-shadow:0 0 0 3px #0b310f inset;cursor:pointer;text-align:center}.btn:hover{filter:brightness(1.12)}.btn.gold{background:#6b4b16;border-color:#e8bd54;box-shadow:0 0 0 3px #3b2607 inset}.btn.wide{width:100%;margin-top:12px}.btn.huge{font-size:28px;min-width:330px}.notice{padding:12px;margin:12px 0;border:2px solid}.notice.success{border-color:#78e668;background:#18351a}.notice.error{border-color:#e96868;background:#381817}.arena-card{display:grid;grid-template-columns:360px 1fr 330px;gap:16px}.lab-screen,.train-screen{align-items:stretch}.lab-left h2,.lab-right h3,.panel h3,.card h2{color:var(--gold);margin-top:0}.hpbar,.old-hp{position:relative;height:26px;border:3px solid #555;background:#090909;margin:8px 0}.hpbar span,.old-hp span{display:block;height:100%;background:linear-gradient(90deg,#1b8130,#73e86c)}.hpbar b,.hp-num{position:absolute;left:0;right:0;top:1px;text-align:center;text-shadow:2px 2px #000;font-size:20px}.parts-list{display:flex;flex-direction:column;gap:8px}.part-row,.mini-row{border:2px solid #4b4436;background:#11100e;padding:8px;display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center}.part-row .slot{color:var(--gold);font-weight:bold}.part-row .part-name{font-weight:bold}.part-row .origin{color:var(--muted);font-size:13px}.lvl{color:#f5d86a}.skill{display:inline-block;padding:3px 7px;border:2px solid #555;background:#111;color:#fff;margin:2px;font-weight:bold}.skill.ice{color:#a8d9ff;border-color:#478dcb}.skill.fire{color:#ff9c43;border-color:#b95422}.skill.poison{color:#88ee61;border-color:#3e9d35}.skill.bleed{color:#ff6969;border-color:#ba3434}.skill.wind{color:#93d8ff;border-color:#5e89b7}.skill.stun{color:#fce064;border-color:#b09524}.skill.heal{color:#88ff88;border-color:#3aab47}.stage{min-height:440px;border:4px solid #3e392f;background:linear-gradient(#222,#101010);position:relative;overflow:hidden;box-shadow:0 0 0 4px #080807 inset}.stage:before,.stone-stage:before{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:repeating-linear-gradient(0deg,#4d4b45 0 12px,#55534d 12px 24px);opacity:.9}.stage:after,.stone-stage:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 5px);pointer-events:none}.rule-box{margin-top:12px;color:#ddd}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats-grid div{border:2px solid #4b4436;background:#11100e;padding:10px}.stats-grid b{color:#8ff077;float:right}.res-list div{display:flex;justify-content:space-between;border-bottom:1px solid #3c372e;padding:6px}.skill-strip{display:flex;flex-wrap:wrap;gap:8px}.retro-arena{border:5px solid #433d34;background:#141210;box-shadow:0 0 0 5px #060606 inset;padding:10px}.arena-top{display:grid;grid-template-columns:1fr 100px 1fr;align-items:start;gap:12px}.fighter-ui{position:relative;padding:0 10px}.fighter-ui h2{font-size:28px;margin:4px 0;color:#fff;text-shadow:3px 3px #000}.fighter-ui.right{text-align:right}.timer{text-align:center;background:#8b2b27;border:4px solid #897359;color:#fff;font-size:48px;font-weight:bold;line-height:70px;text-shadow:3px 3px #000}.old-hp span{background:linear-gradient(#2b62ff,#0e36b1)}.stone-stage{height:460px;position:relative;background:#4d4b45;border:4px solid #231f1b;margin:10px 0;overflow:hidden}.crowd{position:absolute;left:0;right:0;top:0;height:110px;background:repeating-linear-gradient(90deg,#1b1a21 0 4px,#777 4px 6px,#2c2b31 6px 9px);opacity:.85}.gate{position:absolute;left:45%;top:105px;width:120px;height:120px;background:#050505;border:12px solid #3a3732;border-radius:60px 60px 0 0}.stone-stage .monster-sprite{position:absolute;bottom:58px;left:105px}.stone-stage .monster-sprite.flip{left:auto;right:120px}.guts-bar{display:grid;grid-template-columns:1fr 150px 1fr 70px 110px 70px;gap:0;align-items:center;margin:8px 34px}.meter{height:22px;border:3px solid #6c6c72;background:#222}.meter span{display:block;height:100%;background:#92cdf8}.hitbox,.guts-num,.guts-label{border:3px solid #5f594c;background:#282b38;text-align:center;font-size:24px;font-weight:bold;padding:5px}.guts-num,.guts-label{background:#7a683d;color:#fff}.battle-panels{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:10px}.battle-action{text-align:center;margin:14px 0}.result-card{margin-top:20px}.battle-log{max-height:420px;overflow:auto;background:#0b0a09;border:2px solid #5c5342;padding:10px}.battle-log div{padding:6px;border-bottom:1px solid #333}.battle-log span{color:var(--gold);font-weight:bold}.train-screen{grid-template-columns:1fr 1.25fr}.train-stage{min-height:620px}.train-row{display:grid;grid-template-columns:1.2fr .8fr 180px;gap:8px;align-items:center;border:2px solid #4b4436;background:#11100e;padding:10px;margin:8px 0}.compact{grid-template-columns:repeat(4,1fr)}
/* Cute grotesque CSS monster sprite. Animal identities are shown in panels/tooltips; visual remains retro-pixel and low-poly inspired. */
.monster-sprite{width:310px;height:280px;position:relative;image-rendering:pixelated;filter:contrast(1.05) saturate(.95)}.monster-sprite.flip{transform:scaleX(-1)}.monster-sprite.flip .sprite-name{transform:scaleX(-1)}.sprite-body{position:absolute;left:58px;top:70px;width:190px;height:145px;border-radius:42% 46% 35% 38%;background:#83a77c;border:5px solid #29251e;box-shadow:inset 12px -18px rgba(0,0,0,.25),0 8px 0 rgba(0,0,0,.4)}.monster-sprite.fire .sprite-body{background:#a8775d}.monster-sprite.ice .sprite-body{background:#8eb9bd}.monster-sprite.poison .sprite-body{background:#77a878}.monster-sprite.bleed .sprite-body{background:#a66c6c}.monster-sprite.wind .sprite-body{background:#8ca3a8}.monster-sprite.stun .sprite-body{background:#afa05d}.monster-sprite.heal .sprite-body{background:#7faf75}.eye{position:absolute;top:35px;width:32px;height:32px;border-radius:50%;background:#f6f0b3;border:5px solid #25221d}.eye:after{content:"";position:absolute;left:9px;top:8px;width:10px;height:10px;border-radius:50%;background:#000;box-shadow:4px 3px 0 #284}.eye1{left:48px}.eye2{left:110px}.mouth{position:absolute;left:70px;top:82px;width:55px;height:28px;background:#1b0808;border:4px solid #2a1b1b;border-radius:0 0 40px 40px}.mouth:before{content:"▲ ▲ ▲";font-size:11px;color:#fff;position:absolute;left:5px;top:-4px}.stitches{position:absolute;left:40px;top:8px;color:#351b18;font-weight:bold}.sprite-ears:before,.sprite-ears:after{content:"";position:absolute;top:18px;width:32px;height:84px;background:#b98e8a;border:5px solid #2a231e;border-radius:45% 45% 5% 5%;z-index:0}.sprite-ears:before{left:92px;transform:rotate(-12deg)}.sprite-ears:after{left:168px;transform:rotate(16deg)}.sprite-horns:before,.sprite-horns:after{content:"";position:absolute;top:60px;width:43px;height:43px;border:12px solid #8d7a5b;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;z-index:3}.sprite-horns:before{left:53px;transform:rotate(-55deg)}.sprite-horns:after{right:38px;transform:rotate(145deg)}.sprite-wings:before,.sprite-wings:after{content:"";position:absolute;top:95px;width:75px;height:72px;background:#6a536c;border:5px solid #28211e;clip-path:polygon(0 50%,100% 0,70% 100%);z-index:0}.sprite-wings:before{left:0}.sprite-wings:after{right:0;transform:scaleX(-1)}.sprite-tail{position:absolute;left:210px;top:150px;width:92px;height:44px;border:16px solid #5b6c54;border-left:0;border-bottom:0;border-radius:0 80px 0 0;z-index:1}.sprite-tail:after{content:"";position:absolute;right:-20px;top:-17px;width:24px;height:24px;background:#333;border:4px solid #111;clip-path:polygon(50% 0,100% 100%,0 100%)}.sprite-weapon{position:absolute;left:15px;top:155px;font-size:46px;text-shadow:3px 3px #000;z-index:5}.sprite-shadow{position:absolute;left:40px;bottom:15px;width:220px;height:24px;background:rgba(0,0,0,.45);border-radius:50%;z-index:0}.sprite-name{position:absolute;left:0;right:0;bottom:-12px;text-align:center;color:#fff;text-shadow:2px 2px #000;font-weight:bold}.lab-center .monster-sprite,.train-stage .monster-sprite{position:absolute;left:50%;top:50%;transform:translate(-50%,-45%) scale(1.15)}.train-stage .monster-sprite{transform:translate(-50%,-45%) scale(1.35)}@media(max-width:950px){.hero,.arena-card,.battle-panels,.train-screen{grid-template-columns:1fr}.arena-top{grid-template-columns:1fr}.timer{order:-1}.stone-stage .monster-sprite{transform:scale(.8);left:0}.stone-stage .monster-sprite.flip{right:0}.guts-bar{grid-template-columns:1fr;margin:8px}.topbar{position:relative;align-items:flex-start;flex-direction:column}}
select{width:100%;padding:12px;background:#0c0b0a;border:2px solid #6b624d;color:var(--text);font:inherit;margin-top:6px}.btn[disabled],button[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(1)}.btn.small{font-size:12px;padding:6px 8px;margin-top:8px}.stable-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}.compact-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.mini-card{border:2px solid #4b4436;background:#11100e;padding:12px}.mini-card.active,.monster-card.active{border-color:#8df06d;box-shadow:0 0 0 3px #1f5d20 inset}.mini-stage{height:260px;position:relative;overflow:hidden;background:#171513;border:3px solid #4b4436;margin:10px 0}.mini-stage .monster-sprite{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.62)}.mini-stage .monster-sprite.flip{transform:translate(-50%,-50%) scaleX(-1) scale(.62)}.egg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.egg-card{background:#11100e;border:3px solid #6b624d;box-shadow:0 4px 0 #000;padding:14px;display:flex;flex-direction:column;gap:8px;text-align:center}.egg-sprite{font-size:76px;filter:drop-shadow(4px 4px #000)}.compact-layout{grid-template-columns:repeat(3,1fr)}.breed-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}.breed-form .huge{grid-column:1 / -1;width:100%}.monster-card details{margin-top:8px}.monster-card summary{cursor:pointer;color:var(--gold);margin:8px 0}.monster-card .mini-row{grid-template-columns:80px 1fr;line-height:1.35}.battle-log code,code{background:#0d0c0b;border:1px solid #4b4436;padding:2px 5px;color:#f4d978}@media(max-width:900px){.hero,.arena-card,.compact-layout,.breed-form{grid-template-columns:1fr}.arena-card{display:block}.card,.panel{margin-bottom:16px}.stone-stage .monster-sprite{left:10px;transform:scale(.72);transform-origin:bottom left}.stone-stage .monster-sprite.flip{right:5px;transform:scaleX(-1) scale(.72);transform-origin:bottom right}.guts-bar{grid-template-columns:1fr;margin:8px}.battle-panels{grid-template-columns:1fr}.topbar{position:static;display:block}.topbar nav{margin-top:10px}.brand{font-size:20px}}

/* v3 Retro PS1-style battle VFX replay. Gameplay stays server-side; this is visual only. */
.muted{color:var(--muted);font-size:14px}.stone-stage.screen-shake{animation:screenShake .28s steps(4,end)}@keyframes screenShake{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-2px)}50%{transform:translate(-5px,2px)}75%{transform:translate(3px,1px)}}
.vfx-layer{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;image-rendering:auto}.round-flash{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%) scale(.8);z-index:25;background:#111;border:4px solid #d9bc68;box-shadow:0 0 0 4px #000;color:#fff;padding:12px 26px;font-size:34px;font-weight:bold;text-shadow:3px 3px #000;opacity:0;pointer-events:none}.round-flash.show{animation:roundFlash .75s steps(5,end)}@keyframes roundFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.battle-vfx{position:absolute;top:52%;left:25%;width:150px;height:150px;transform:translate(-50%,-50%);z-index:22;text-align:center;animation:vfxPop .95s steps(7,end) forwards;filter:drop-shadow(4px 4px 0 #000)}.battle-vfx.enemy{left:74%}.battle-vfx.player{left:26%}.battle-vfx b{position:absolute;left:0;right:0;bottom:5px;font:bold 15px "Courier New",monospace;color:#fff;text-shadow:2px 2px #000}.vfx-symbol{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:58px;z-index:3;text-shadow:3px 3px #000}.vfx-ring{position:absolute;left:50%;top:50%;width:28px;height:28px;border:7px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);opacity:.75;animation:vfxRing .9s steps(6,end) forwards}.vfx-bit{position:absolute;left:50%;top:50%;width:16px;height:16px;background:currentColor;box-shadow:0 0 16px currentColor}.vfx-bit.b1{transform:translate(-65px,-35px)}.vfx-bit.b2{transform:translate(48px,-10px)}.vfx-bit.b3{transform:translate(-15px,52px)}@keyframes vfxPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-4deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(5deg)}}@keyframes vfxRing{0%{width:18px;height:18px;opacity:1}100%{width:170px;height:100px;opacity:0}}
.vfx-fire{color:#ff7b22}.vfx-fire .vfx-bit{clip-path:polygon(50% 0,90% 100%,10% 100%);background:#ffdf43}.vfx-ice{color:#9ee7ff}.vfx-ice .vfx-bit{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#dff8ff}.vfx-poison{color:#84ff58}.vfx-poison .vfx-bit{border-radius:50%;background:#75d94c}.vfx-bleed{color:#ff4c4c}.vfx-bleed .vfx-symbol{font-size:68px;transform:translate(-50%,-50%) rotate(-26deg)}.vfx-bleed .vfx-ring{border-radius:0;width:140px;height:16px;transform:translate(-50%,-50%) rotate(-22deg)}.vfx-wind{color:#8bdcff}.vfx-wind .vfx-ring{border-style:dashed;animation:vfxSpin .9s steps(6,end) forwards}.vfx-stun{color:#ffe65a}.vfx-stun .vfx-bit{clip-path:polygon(40% 0,100% 0,60% 45%,100% 45%,35% 100%,55% 55%,15% 55%)}.vfx-heal{color:#90ff78}.vfx-heal .vfx-ring{border-color:#90ff78}.vfx-heal .vfx-symbol{font-size:64px}.vfx-burn{color:#ff7b22}.vfx-slow{color:#9ee7ff}@keyframes vfxSpin{0%{width:30px;height:30px;opacity:1;transform:translate(-50%,-50%) rotate(0deg)}100%{width:180px;height:90px;opacity:0;transform:translate(-50%,-50%) rotate(360deg)}}
.damage-number{position:absolute;top:44%;left:25%;z-index:26;font:bold 34px "Courier New",monospace;color:#fff;text-shadow:3px 3px #000,-2px -2px #000;animation:damageFloat 1s steps(7,end) forwards}.damage-number.enemy{left:73%}.damage-number.player{left:24%}.damage-number.fire{color:#ff9b33}.damage-number.ice{color:#b8efff}.damage-number.poison{color:#9dff74}.damage-number.bleed{color:#ff6767}.damage-number.wind{color:#9fdcff}.damage-number.stun{color:#ffe966}.damage-number.heal,.damage-number.heal-num{color:#9aff85}@keyframes damageFloat{0%{opacity:0;transform:translate(-50%,20px) scale(.7)}20%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-85px) scale(1)}}
.effect-toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:28;background:#111;border:3px solid #d7bb65;box-shadow:0 0 0 3px #000;color:#fff;padding:8px 14px;font:bold 15px "Courier New",monospace;text-shadow:2px 2px #000;animation:toastPop 1.25s steps(5,end) forwards}@keyframes toastPop{0%{opacity:0;bottom:0}15%,80%{opacity:1;bottom:22px}100%{opacity:0;bottom:48px}}
.monster-sprite.vfx-cast{filter:brightness(1.4) contrast(1.25) drop-shadow(0 0 8px #fff)}.monster-sprite.vfx-hit{animation:hitWobble .38s steps(3,end)!important;filter:contrast(1.8) brightness(1.15) saturate(1.4)}.monster-sprite.vfx-heal{filter:brightness(1.45) drop-shadow(0 0 15px #8fff65)}@keyframes hitWobble{0%,100%{margin-left:0}25%{margin-left:-8px}50%{margin-left:8px}75%{margin-left:-4px}}
@media(max-width:900px){.battle-vfx{left:24%;transform:translate(-50%,-50%) scale(.75)}.battle-vfx.enemy{left:76%}.damage-number{font-size:24px}.round-flash{font-size:24px}}
.notice.warning{border-color:#f2d56b;background:#3b3014;color:#fff1b3}

/* v5 Real Gaming Site Homepage */
.landing-hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;min-height:640px;padding:34px 0 22px;position:relative}
.landing-hero:before{content:"";position:absolute;inset:-18px -40px auto -40px;height:520px;background:radial-gradient(circle at 20% 15%,rgba(117,255,99,.22),transparent 28%),radial-gradient(circle at 72% 24%,rgba(215,187,101,.18),transparent 31%),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,0));z-index:-1;pointer-events:none}.eyebrow{display:inline-block;color:#91ef69;border:2px solid #365b2d;background:#10190e;padding:6px 9px;font-weight:bold;letter-spacing:1px;font-size:13px}.hero-copy h1{font-size:72px;line-height:.95;margin:16px 0;color:#f7d978;text-shadow:5px 5px #000,0 0 22px rgba(215,187,101,.3)}.subtitle.big{font-size:21px;max-width:750px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.trust-row{display:flex;gap:10px;flex-wrap:wrap;color:#c9f7b4}.trust-row span{background:#10100e;border:2px solid #4c6d3c;padding:8px 10px}.landing-login{position:relative;overflow:hidden}.landing-login:before{content:"PLAYER TERMINAL";position:absolute;right:-35px;top:20px;transform:rotate(25deg);color:rgba(215,187,101,.17);font-size:34px;font-weight:bold}.homepage-arena{margin:24px 0 28px;background:linear-gradient(#24211d,#11100e);border:4px solid #756d57;box-shadow:0 0 0 4px #050505 inset,0 8px 0 #000;padding:18px}.arena-titlebar{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:12px}.arena-titlebar h2,.skill-showcase h2,.steps-section h2,.final-cta h2,.game-card h2{margin:8px 0 0;color:#f7d978;font-size:36px;text-shadow:3px 3px #000}.mini-timer{font-size:38px;line-height:54px;width:76px}.home-battle-card{display:grid;grid-template-columns:1fr 90px 1fr;gap:10px}.fighter-preview{background:#14120f;border:3px solid #554d3d;padding:10px}.fighter-preview.right{text-align:right}.fighter-name{font-size:26px;font-weight:bold;color:#fff;text-shadow:3px 3px #000}.vs-stone{display:flex;align-items:center;justify-content:center;background:#8b2b27;border:4px solid #897359;color:#fff;font-size:38px;font-weight:bold;text-shadow:3px 3px #000}.home-stage{grid-column:1 / -1;height:460px;position:relative;overflow:hidden;border:4px solid #231f1b;background:#4d4b45}.home-stage:before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(0deg,#4d4b45 0 12px,#5c5a52 12px 24px);opacity:.95}.home-stage:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px);pointer-events:none}.home-stage .monster-sprite{position:absolute;left:110px;bottom:54px;z-index:2}.home-stage .monster-sprite.flip{left:auto;right:125px}.arena-bottom-strip{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.arena-bottom-strip div{background:#1b1a18;border:3px solid #5f594c;padding:10px;display:flex;justify-content:space-between;gap:8px}.arena-bottom-strip b{color:#f7d978}.arena-bottom-strip span{color:#9fff78;font-weight:bold}.landing-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:14px;margin:28px 0}.game-card{background:linear-gradient(#24211d,#151412);border:3px solid var(--line);box-shadow:0 0 0 3px #080807 inset,0 6px 0 #000;padding:18px;min-height:178px}.game-card h3{color:#f7d978;font-size:24px;margin:0 0 8px}.game-card p{color:#c8bea5;line-height:1.45}.spotlight{background:radial-gradient(circle at top left,rgba(98,210,90,.16),transparent 45%),linear-gradient(#29251f,#151412)}.mini-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.mini-tags span{border:2px solid #574f3d;background:#100f0d;color:#fff;padding:6px 8px;font-weight:bold}.skill-showcase{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:center;background:#11100e;border:4px solid #3e392f;padding:24px;margin:32px 0}.skill-showcase p{color:#c8bea5;line-height:1.55;font-size:17px}.skill-icons-big{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.skill-icons-big .skill{font-size:19px;padding:12px 14px}.steps-section{margin:36px 0}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.steps-grid div{background:#151412;border:3px solid #5f594c;padding:18px;box-shadow:0 5px 0 #000}.steps-grid b{display:inline-block;color:#0c0b0a;background:#d7bb65;padding:6px 8px;margin-bottom:12px}.steps-grid h3{color:#fff;margin:0 0 8px;font-size:22px}.steps-grid p{color:#c8bea5}.final-cta{text-align:center;border:4px solid #756d57;background:radial-gradient(circle at center top,rgba(117,255,99,.2),transparent 44%),#11100e;padding:36px;margin:34px 0 8px;box-shadow:0 0 0 4px #050505 inset}.final-cta p{color:#c8bea5;font-size:18px}@media(max-width:1050px){.landing-hero,.skill-showcase{grid-template-columns:1fr}.hero-copy h1{font-size:52px}.landing-grid,.steps-grid,.arena-bottom-strip{grid-template-columns:1fr 1fr}.home-battle-card{grid-template-columns:1fr}.vs-stone{min-height:70px}.home-stage .monster-sprite{left:20px;transform:scale(.75);transform-origin:bottom left}.home-stage .monster-sprite.flip{right:20px;transform:scaleX(-1) scale(.75);transform-origin:bottom right}}@media(max-width:640px){.landing-grid,.steps-grid,.arena-bottom-strip{grid-template-columns:1fr}.hero-copy h1{font-size:40px}.hero-actions .huge{min-width:0;width:100%;font-size:20px}.home-stage{height:360px}.home-stage .monster-sprite{transform:scale(.58);left:0}.home-stage .monster-sprite.flip{transform:scaleX(-1) scale(.58);right:0}.arena-titlebar{display:block}.topbar nav a,.topbar .coins{display:inline-block;margin:4px 0}}

/* v6 Morpets bright lively homepage + branding */
body.home-page{
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.92), transparent 18%),
    radial-gradient(circle at 80% 12%, rgba(250,255,200,.72), transparent 24%),
    linear-gradient(180deg,#65c5ff 0%,#a8e6ff 18%,#dff7ff 50%,#f6fbff 100%);
  color:#17324b;
  font-family: "Trebuchet MS", Arial, sans-serif;
  image-rendering:auto;
}
body.home-page a{color:#1369b8}
body.home-page .wrap{max-width:1320px;padding:24px 18px 36px}
body.home-page .topbar{
  border-bottom:0;
  background:linear-gradient(180deg,#0f2f5f,#0c2242);
  border-radius:0 0 20px 20px;
  margin:0 auto;
  max-width:1280px;
  padding:16px 24px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
body.home-page .brand{font-size:34px;color:#ffcb4c;letter-spacing:1px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
body.home-page .brand-gem{color:#6be0ff;font-size:22px;vertical-align:middle}
body.home-page .topbar nav a,
body.home-page .coins{
  border:2px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#f2f8ff;
  border-radius:14px;
  padding:10px 14px;
}
body.home-page .coins{color:#d9ff8c;background:rgba(163,255,52,.1)}
.logo-mark{font-weight:900;font-size:88px;line-height:.9;color:#ffbf47;text-shadow:0 6px 0 #6f4207,0 10px 22px rgba(0,0,0,.2)}
.morpets-hero{display:grid;grid-template-columns:1.1fr 400px;gap:30px;align-items:start;padding:24px 0 10px}
.hero-left h1{font-size:68px;line-height:1.02;margin:14px 0 16px;color:#17324b;max-width:820px;text-wrap:balance}
.hero-sub{font-size:24px;line-height:1.45;max-width:760px;color:#2d5375;margin:0 0 22px}
.eyebrow.bright,.section-label{display:inline-block;background:#ffffff;border:2px solid #9ad6ff;border-radius:999px;padding:8px 14px;color:#2a6fa7;font-weight:800;letter-spacing:.06em;font-size:13px;box-shadow:0 6px 14px rgba(53,141,190,.14)}
.section-label.centered{display:table;margin:0 auto 16px}
.btn.lime{background:linear-gradient(180deg,#dcff4f,#b4df15);border-color:#8cb715;color:#223300;box-shadow:0 0 0 3px rgba(255,255,255,.36) inset,0 10px 16px rgba(68,102,0,.18);border-radius:18px;font-family:"Trebuchet MS",Arial,sans-serif}
.btn.sky{background:linear-gradient(180deg,#70daff,#53bced);border-color:#2397d6;color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28) inset,0 10px 16px rgba(47,131,182,.18);border-radius:18px;font-family:"Trebuchet MS",Arial,sans-serif}
.hero-actions .btn.huge{font-size:28px;min-width:230px}
.feature-pills{display:flex;gap:10px;flex-wrap:wrap}.feature-pills span{background:#ffffff;border:2px solid #cdeeff;border-radius:999px;padding:9px 12px;color:#24587d;font-weight:700;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.bright-login{background:rgba(255,255,255,.94);border:2px solid #b8e4ff;box-shadow:0 16px 32px rgba(21,103,153,.18);border-radius:24px;color:#17324b}
.bright-login h2{color:#17324b}.bright-login label{color:#25597d;font-weight:700}.bright-login input{background:#f4fbff;border:2px solid #b8def5;color:#17324b;border-radius:14px}.bright-login p{color:#40627e}
.visual-showcase{display:grid;grid-template-columns:1.1fr .95fr;gap:18px;margin:18px 0 20px}
.showcase-card{background:rgba(255,255,255,.92);border:2px solid #bfe6ff;border-radius:26px;padding:22px;box-shadow:0 18px 34px rgba(28,122,171,.12)}
.showcase-card h2{font-size:38px;line-height:1.08;margin:14px 0;color:#17324b}.showcase-card p{font-size:18px;line-height:1.5;color:#4b6c88}
.showcase-image{width:100%;display:block;border-radius:22px;margin-top:14px}.showcase-image.framed{border:6px solid #e2d4b0;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.home-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 24px}
.home-feature{padding:24px;border-radius:24px;box-shadow:0 14px 30px rgba(0,0,0,.1)}
.home-feature h3{margin:0 0 8px;font-size:30px;color:#17324b}.home-feature p{font-size:18px;line-height:1.45;color:#355978;margin:0}
.feature-yellow{background:linear-gradient(180deg,#fff8d0,#ffef9e)}
.feature-blue{background:linear-gradient(180deg,#e5f7ff,#c8edff)}
.feature-purple{background:linear-gradient(180deg,#f0e9ff,#e2d8ff)}
.meet-strip{background:#fff;border:2px solid #cdefff;border-radius:24px;padding:18px 18px 14px;box-shadow:0 16px 28px rgba(0,0,0,.08);margin:0 0 24px}.meet-image{width:100%;display:block;border-radius:16px}
.bright-showcase{background:linear-gradient(180deg,#ffffff,#eef9ff);border:2px solid #c5ebff;border-radius:26px;box-shadow:0 16px 28px rgba(0,0,0,.08)}
body.home-page .skill-showcase h2, body.home-page .steps-section h2, body.home-page .final-cta h2{color:#17324b;text-shadow:none}
body.home-page .skill-showcase p, body.home-page .steps-grid p, body.home-page .final-cta p{color:#476680}
body.home-page .steps-grid div{background:#fff;border:2px solid #cbeeff;border-radius:20px;box-shadow:0 14px 24px rgba(0,0,0,.08)}
body.home-page .steps-grid b{background:#a9e352;color:#1f3500;border-radius:999px;padding:8px 12px}
body.home-page .steps-grid h3{color:#17324b}
.bright-final-cta{background:linear-gradient(180deg,#d9f9ff,#ffffff);border:2px solid #c8ebff;border-radius:26px;box-shadow:0 18px 34px rgba(0,0,0,.1)}
body.home-page .footer{max-width:1280px;border-top:0;color:#325b7a;background:rgba(255,255,255,.72);border:2px solid #d6f1ff;border-radius:20px;margin:22px auto 38px;padding:18px;box-shadow:0 10px 20px rgba(0,0,0,.06)}
body.home-page .notice.success{background:#eaffdb;border-color:#a6db64;color:#214100}
body.home-page .notice.error{background:#ffe7e7;border-color:#f39393;color:#7a1616}

@media (max-width:1100px){
  .morpets-hero,.visual-showcase,.home-features-grid{grid-template-columns:1fr}
  .hero-left h1{font-size:52px}
}
@media (max-width:700px){
  .logo-mark{font-size:60px}
  .hero-left h1{font-size:40px}
  .hero-sub{font-size:19px}
  .hero-actions .btn.huge{width:100%;min-width:0;font-size:22px}
  .showcase-card h2{font-size:30px}
  .home-feature h3{font-size:24px}
}


/* v7 Morpets full in-game bright/lively aesthetic pass */
body.app-page{
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.85), transparent 18%),
    radial-gradient(circle at 85% 6%, rgba(255,245,140,.55), transparent 22%),
    linear-gradient(180deg,#69caff 0%,#b9ecff 28%,#eafaff 62%,#fffdf2 100%);
  color:#17324b;
  font-family:"Trebuchet MS", Arial, sans-serif;
  image-rendering:auto;
}
body.app-page .wrap{max-width:1240px;padding:20px}
body.app-page a{color:#0d6db7}
body.app-page .topbar{
  border-bottom:0;
  background:linear-gradient(180deg,#123a70,#0c2448);
  border-radius:0 0 18px 18px;
  box-shadow:0 8px 22px rgba(4,54,106,.22);
  padding:14px 20px;
}
body.app-page .brand{
  color:#ffcb4c;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.35);
}
body.app-page .brand-gem{color:#6be0ff}
body.app-page .topbar a,
body.app-page .coins{
  border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:13px;
  padding:9px 12px;
  font-family:"Trebuchet MS",Arial,sans-serif;
  font-weight:800;
}
body.app-page .coins{background:rgba(185,255,55,.16);color:#dfff71}
body.app-page .footer{
  border-top:0;
  color:#315b7c;
  background:rgba(255,255,255,.75);
  border:2px solid #c8ebff;
  border-radius:20px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}
body.app-page h1,
body.app-page .hero h1,
body.app-page .card h1{
  color:#17324b;
  text-shadow:none;
  font-family:"Trebuchet MS",Arial,sans-serif;
}
body.app-page h2,
body.app-page h3,
body.app-page .lab-left h2,
body.app-page .lab-right h3,
body.app-page .panel h3,
body.app-page .card h2{
  color:#17324b;
  font-family:"Trebuchet MS",Arial,sans-serif;
}
body.app-page .subtitle,
body.app-page .card p,
body.app-page .panel p,
body.app-page .rule-box{
  color:#456983;
  line-height:1.5;
}
body.app-page .card,
body.app-page .panel,
body.app-page .rule-box,
body.app-page .feature-grid div{
  background:linear-gradient(180deg,#ffffff,#f2fbff);
  border:2px solid #bde7ff;
  border-radius:22px;
  box-shadow:0 14px 28px rgba(30,121,170,.12);
  color:#17324b;
}
body.app-page label{color:#285d84;font-family:"Trebuchet MS",Arial,sans-serif;font-weight:800}
body.app-page input{
  background:#f8fdff;
  border:2px solid #b8def5;
  color:#17324b;
  border-radius:14px;
  font-family:"Trebuchet MS",Arial,sans-serif;
}
body.app-page .btn{
  font-family:"Trebuchet MS",Arial,sans-serif;
  border-radius:16px;
  background:linear-gradient(180deg,#dfff4f,#a7d91b);
  border-color:#83b214;
  color:#203300;
  box-shadow:0 0 0 3px rgba(255,255,255,.35) inset,0 9px 15px rgba(62,102,0,.18);
}
body.app-page .btn.gold{
  background:linear-gradient(180deg,#ffcf5a,#f19b24);
  border-color:#cc7622;
  color:#402300;
}
body.app-page .notice.success{background:#eaffdb;border-color:#a6db64;color:#214100}
body.app-page .notice.error{background:#ffe7e7;border-color:#f39393;color:#7a1616}
body.app-page .notice.warning{background:#fff4cf;border-color:#ebc762;color:#5c4100}

/* brighter lab/dashboard grids */
body.app-page .feature-grid,
body.app-page .stats-grid,
body.app-page .steps-grid{
  font-family:"Trebuchet MS",Arial,sans-serif;
}
body.app-page .part-row,
body.app-page .mini-row,
body.app-page .stats-grid div,
body.app-page .train-row{
  background:#ffffff;
  border:2px solid #bfe6ff;
  border-radius:16px;
  color:#17324b;
  box-shadow:0 8px 16px rgba(0,0,0,.05);
}
body.app-page .part-row .slot,
body.app-page .part-row .part-name,
body.app-page .lvl{color:#16395e}
body.app-page .part-row .origin{color:#54748c}
body.app-page .skill{
  border-radius:999px;
  background:#fff;
  font-family:"Trebuchet MS",Arial,sans-serif;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

/* bright retro arena: still PS1 inspired, but sunny and lively */
body.app-page .retro-arena,
body.app-page .homepage-arena{
  background:linear-gradient(180deg,#fff8e6,#f8efd6);
  border:4px solid #d6b56b;
  border-radius:20px;
  box-shadow:0 16px 32px rgba(116,88,31,.16);
}
body.app-page .arena-top,
body.app-page .home-battle-card{
  font-family:"Courier New",monospace;
}
body.app-page .fighter-ui h2,
body.app-page .fighter-name{
  color:#fff;
  text-shadow:3px 3px #17324b;
}
body.app-page .timer,
body.app-page .vs-stone{
  background:linear-gradient(180deg,#df3c3c,#a61f23);
  border-color:#ffcf5a;
  border-radius:14px;
}
body.app-page .stone-stage,
body.app-page .home-stage,
body.app-page .stage{
  border:5px solid #d0b072;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(63,132,190,.25) 0,rgba(63,132,190,0) 40%),
    linear-gradient(180deg,#a6d9ff 0%,#def8ff 26%,#c9b68a 27%,#bfa777 100%);
  box-shadow:0 0 0 4px rgba(255,255,255,.5) inset,0 12px 24px rgba(0,0,0,.12);
}
body.app-page .stone-stage:before,
body.app-page .home-stage:before,
body.app-page .stage:before{
  background:
    linear-gradient(180deg,#d1c5a2,#bfae82),
    repeating-linear-gradient(0deg,#d8c89c 0 12px,#c5b17f 12px 24px);
  opacity:.92;
}
body.app-page .crowd{
  background:
    repeating-linear-gradient(90deg,#4d6fa3 0 4px,#ffe083 4px 6px,#c35a5a 6px 9px,#62b46f 9px 12px);
  opacity:.65;
}
body.app-page .gate{
  background:#29445d;
  border-color:#826d48;
}
body.app-page .guts-bar .hitbox,
body.app-page .guts-bar .guts-num,
body.app-page .guts-bar .guts-label,
body.app-page .arena-bottom-strip div{
  border-color:#c7a666;
  background:#fff7df;
  color:#17324b;
  border-radius:10px;
}
body.app-page .guts-label,
body.app-page .arena-bottom-strip b{color:#956900}
body.app-page .battle-panels{gap:14px}
body.app-page .battle-log{
  background:#ffffff;
  border:2px solid #bfe6ff;
  border-radius:16px;
  color:#17324b;
}
body.app-page .battle-log div{border-bottom:1px solid #d9eefb}
body.app-page .battle-log span{color:#167dc4}

/* Morpets official sprite palette: brighter, cuter, lively */
body.app-page .monster-sprite{
  filter:saturate(1.25) contrast(1.03) drop-shadow(0 10px 10px rgba(0,0,0,.22));
}
body.app-page .sprite-body{
  background:#62cfe0;
  border-color:#21435c;
  box-shadow:inset 13px -18px rgba(0,95,120,.18),0 8px 0 rgba(0,0,0,.25);
}
body.app-page .monster-sprite.fire .sprite-body{background:#ff9363}
body.app-page .monster-sprite.ice .sprite-body{background:#77d8ff}
body.app-page .monster-sprite.poison .sprite-body{background:#81dc77}
body.app-page .monster-sprite.bleed .sprite-body{background:#ff7a90}
body.app-page .monster-sprite.wind .sprite-body{background:#75d7d8}
body.app-page .monster-sprite.stun .sprite-body{background:#ffdf61}
body.app-page .monster-sprite.heal .sprite-body{background:#8be576}
body.app-page .eye{background:#fff6a7;border-color:#243952}
body.app-page .eye:after{background:#10151d;box-shadow:5px 3px 0 #20a5d6}
body.app-page .mouth{background:#421316;border-color:#2a1b1b}
body.app-page .sprite-ears:before,
body.app-page .sprite-ears:after{background:#ff9cc7;border-color:#26455c}
body.app-page .sprite-horns:before,
body.app-page .sprite-horns:after{border-color:#ffe09b;border-right-color:transparent;border-bottom-color:transparent}
body.app-page .sprite-wings:before,
body.app-page .sprite-wings:after{background:#cf8dff;border-color:#26455c}
body.app-page .sprite-tail{border-color:#2ebc8d}
body.app-page .sprite-name{
  color:#17324b;
  background:rgba(255,255,255,.72);
  border:2px solid #bde7ff;
  border-radius:999px;
  text-shadow:none;
  bottom:-24px;
}

/* dashboard/lab panels get colorful badges */
body.app-page .res-list div{
  border-bottom:1px solid #d9eefb;
  color:#17324b;
}
body.app-page .auth-card,
body.app-page .login-card{
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  border:2px solid #bde7ff;
  border-radius:22px;
}

/* mobile app-page fixes */
@media(max-width:900px){
  body.app-page .topbar{border-radius:0 0 14px 14px}
  body.app-page .topbar nav a,
  body.app-page .topbar .coins{margin:3px}
}

/* v9 Admin Dashboard */
.admin-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:18px 0}
.admin-stats .card{text-align:center;padding:16px}
.admin-stats b{font-size:34px;color:#0b78c7}
.admin-search{display:flex;gap:10px;margin:12px 0 18px}
.admin-search input{max-width:360px}
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.admin-table th{text-align:left;color:#24587d;padding:8px}
.admin-table td{background:#fff;border-top:2px solid #bfe6ff;border-bottom:2px solid #bfe6ff;padding:10px;vertical-align:top}
.admin-table td:first-child{border-left:2px solid #bfe6ff;border-radius:12px 0 0 12px}
.admin-table td:last-child{border-right:2px solid #bfe6ff;border-radius:0 12px 12px 0}
.inline-admin{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inline-admin input[type=number]{width:105px;padding:8px}
.inline-admin .btn{padding:8px 10px;font-size:13px}
.btn.danger{background:linear-gradient(180deg,#ff9b9b,#e94c4c)!important;border-color:#bf2e2e!important;color:#fff!important}
.admin-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.admin-columns .mini-row{display:block;margin:8px 0}
.admin-columns .mini-row b{display:block;color:#17324b}
@media(max-width:1000px){.admin-stats,.admin-columns{grid-template-columns:1fr 1fr}.inline-admin{display:grid;grid-template-columns:1fr 1fr}.admin-search{display:block}.admin-search input{max-width:100%;margin-bottom:8px}}
@media(max-width:640px){.admin-stats,.admin-columns{grid-template-columns:1fr}.inline-admin{grid-template-columns:1fr}.admin-table{font-size:13px}}