/* NEON STREET V4 — layered illustrated anime sprites, stronger ranked VFX, responsive creator. */
:root {--chat-height:clamp(320px,45dvh,560px);--road:54px}
.app-shell {overflow-y:auto; scrollbar-color:#655183 #11182b}
.game-main {bottom:auto;min-height:590px;height:610px;padding-bottom:calc(var(--dock) + 30px)}
.world-header p {max-width:770px}
.scene {min-height:375px;background:radial-gradient(ellipse at 49% 36%,#8b50854a,transparent 35%),linear-gradient(180deg,#221a35 0%,#1b2039 40%,#20243c 75%,#172235 100%)}
.back-layer {background:radial-gradient(circle at 19% 23%,#a96efc15,transparent 22%),radial-gradient(circle at 80% 18%,#f482c522,transparent 25%),radial-gradient(#fff5 1px,transparent 2px) 0 0/94px 108px,linear-gradient(transparent 15%,#5b48701c 70%,transparent)}
.front-layer {background:linear-gradient(180deg,transparent 0 69%,#252d43 69% 75%,#3a3447 75% 78%,#1c1d2e 78% 100%),repeating-linear-gradient(94deg,transparent 0 105px,#fb8ac112 107px 108px,transparent 110px 190px)}
.scene:after {content:'';position:absolute;inset:auto 0 3% 0;height:16%;pointer-events:none;opacity:.45;background:repeating-linear-gradient(93deg,transparent 0 70px,#efa7d913 72px 75px,transparent 77px 140px);filter:blur(3px)}
.chat-dock {border-color:#946caa66;box-shadow:0 25px 90px #0607118b,0 0 50px #77458a12}
.chat-dock-head {background:linear-gradient(90deg,#5d326a35,transparent 70%)}
.chat-messages {background:radial-gradient(ellipse at 12% 0%,#b65b9b0e,transparent 55%)}
.chat-message .msg-body {box-shadow:0 6px 18px #04071922}
.bottom-dock {position:fixed;z-index:30;border-color:#986fcb65;box-shadow:0 -8px 50px #110f24b5,0 0 24px #bc69db1c}
.dock-btn:hover {background:#a878ea24;color:#ffc8e6}.dock-btn:focus-visible,.chat-switch:focus-visible,.preset-card:focus-visible{outline:3px solid #ff9bd6;outline-offset:2px}
.action-panel {position:fixed;top:auto;height:min(70dvh,700px);bottom:calc(var(--dock) + 18px);box-shadow:0 30px 120px #050714cb}
.preset-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.preset-card{grid-template-columns:112px 1fr;min-height:152px;background:linear-gradient(115deg,#23273c,#171c34);border:1px solid #776e9650}
.preset-card.selected {background:linear-gradient(125deg,#7b467d50,#22284d 65%);border-color:#e19de8;box-shadow:0 0 0 1px #b67db9,0 10px 32px #a6538b23}
.preset-thumb {height:136px;background:radial-gradient(ellipse at 50% 55%,#a970c74d,transparent 70%),#1b2037;box-shadow:inset 0 -12px 20px #05071a45}
.preset-meta {align-self:center}.preset-meta strong{font-size:14px}.preset-meta p{margin-top:10px}
.auth-overlay {overflow-y:auto;align-items:center;padding:14px}
.auth-dialog{grid-template-columns:minmax(340px,.95fr) minmax(470px,1.25fr);width:min(1350px,98vw);max-height:min(95dvh,1030px)}
.auth-left{position:relative;overflow:hidden;background:radial-gradient(circle at 47% 70%,#ce89fa44,transparent 35%),linear-gradient(160deg,#25233d,#292848 55%,#1c2846)}
.auth-left:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 58px,#fff2 59px 60px,transparent 61px 130px);opacity:.22}
.auth-headline h2 {font-family:Outfit,Inter,sans-serif;letter-spacing:-1.4px}
.auth-headline p{max-width:460px}
.auth-preview{min-height:400px;align-items:end}.preview-stage{width:100%;height:100%;justify-content:flex-end}
.preview-character{width:min(100%,310px);height:380px;max-height:45dvh;filter:drop-shadow(0 18px 24px #05031865)}
.preview-orbit {top:12%;width:min(83%,360px);height:300px;opacity:.8}
.preview-copy{padding-bottom:8px}.preview-copy strong{font-size:22px}
.auth-right {padding:28px 32px}
.anime-art {--art:url('/characters/sailor-noir.webp');position:relative;width:100%;height:100%;display:block;isolation:isolate;filter:drop-shadow(0 5px 6px #080c1944)}
.art-part {position:absolute;inset:0;display:block;background-image:var(--art);background-size:contain;background-position:center bottom;background-repeat:no-repeat;will-change:transform}
.art-torso {clip-path:polygon(0 0,100% 0,100% 71%,0 71%);z-index:2}
.art-left-leg {clip-path:polygon(0 64%,50% 64%,50% 100%,0 100%);z-index:1;transform-origin:42% 65%}
.art-right-leg{clip-path:polygon(50% 64%,100% 64%,100% 100%,50% 100%);z-index:1;transform-origin:58% 65%}
.character {width:162px;height:288px;bottom:30px;filter:drop-shadow(0 6px 10px #06050e55)}
.character .sprite-wrap{left:2px;bottom:13px;width:158px;height:275px;animation:animeIdle 4s ease-in-out infinite}
.character .shadow{left:32px;width:98px;bottom:15px;height:14px;background:radial-gradient(ellipse,#000b,transparent 70%);filter:blur(4px)}
.character .nameplate{left:7px;right:7px;bottom:0;padding:8px 9px;background:#101327de;box-shadow:0 4px 20px #05051677;white-space:nowrap}
.character .nameplate .level{font-size:10px}
.character .aura{z-index:0}.character .sprite-wrap{z-index:3}
.character .aura.active{top:0;bottom:25px;left:5px;right:5px;filter:blur(24px);background:radial-gradient(ellipse at center,transparent 20%,color-mix(in srgb,var(--aura) 90%,white 8%) 55%,transparent 77%)}
.character.glow-2 .aura.active{filter:blur(19px)}
.character.glow-3 .aura.active{filter:blur(20px);box-shadow:inset 0 0 50px color-mix(in srgb,var(--aura) 60%,transparent)}
.character.glow-4 .aura.active{filter:blur(15px);background:radial-gradient(ellipse,transparent 19%,var(--aura) 45%,transparent 70%);opacity:1}
.character .halo{z-index:1;left:7%;right:7%;top:6%;bottom:7%;border:2px solid color-mix(in srgb,var(--aura) 65%,white);border-radius:48% 52% 44% 56%;opacity:.7;box-shadow:0 0 10px var(--aura),inset 0 0 14px var(--aura),0 0 43px var(--aura);animation:orbitPulse 2.8s ease-in-out infinite alternate}
.character .particles{z-index:4;pointer-events:none}
.character .particles .particle{width:calc(3px + var(--i,0) * .35px);height:7px;left:calc(15% + var(--i,0) * 5.5%);bottom:calc(40px + var(--i,0) * 8px);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 14px var(--aura),0 0 25px var(--aura);animation:ascendGlow calc(1.5s + var(--i,0) * 0.11s) linear infinite;animation-delay:calc(-1 * var(--i,0) * .28s)}
.aura-crest{pointer-events:none;z-index:2;position:absolute;inset:10% 3% 9%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--aura) 75%,white);transform:rotate(-13deg);box-shadow:0 0 13px var(--aura), inset 0 0 17px #fff4;animation:crestSpin 10s linear infinite}
.aura-crest i{position:absolute;width:17px;height:17px;display:block;background:var(--aura);border-radius:1px 90% 1px 90%;transform:rotate(45deg);box-shadow:0 0 15px var(--aura),0 0 40px var(--aura)}
.aura-crest i:first-child{left:12%;top:13%}.aura-crest i:last-child{right:12%;bottom:15%}
.glow-4 .aura-crest{border:2px solid color-mix(in srgb,var(--aura) 65%,white);box-shadow:0 0 26px var(--aura),inset 0 0 28px var(--aura)}
.glow-1 .aura-crest,.glow-2 .aura-crest{display:none}
.character.is-moving .sprite-wrap{animation:groundWalk .64s linear infinite}
.character.is-moving .art-left-leg{animation:footstepLeft .64s ease-in-out infinite}
.character.is-moving .art-right-leg{animation:footstepRight .64s ease-in-out infinite}
.character.is-moving .art-torso{animation:torsoStride .64s ease-in-out infinite}
.character.is-moving .shadow{animation:stepShadow .64s ease-in-out infinite}
.profile-sprite .anime-art{width:120px;height:208px;z-index:1}
.preset-thumb .anime-art {width:100%;height:100%}
.preview-character .anime-art {width:100%;height:100%}
.profile-sprite .art-part,.preview-character .art-part,.preset-thumb .art-part{animation:none!important}
@keyframes animeIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes groundWalk{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}50%{transform:translateY(1px)}75%{transform:translateY(-4px)}}
@keyframes torsoStride{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes footstepLeft{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-3px)}}
@keyframes footstepRight{0%,100%{transform:rotate(-7deg) translateY(-3px)}50%{transform:rotate(7deg) translateY(0)}}
@keyframes orbitPulse{0%{transform:rotate(-10deg) scale(.95);opacity:.4}100%{transform:rotate(9deg) scale(1.07);opacity:.9}}
@keyframes crestSpin{to{transform:rotate(347deg)}}
@keyframes ascendGlow{0%{transform:translate(0,0) scale(.6) rotate(45deg);opacity:0}25%{opacity:1}72%{opacity:.8}100%{transform:translate(15px,-110px) scale(.2) rotate(195deg);opacity:0}}
@media (max-width:1100px){.auth-dialog{grid-template-columns:minmax(270px,.9fr) minmax(390px,1.2fr)}.preset-card{grid-template-columns:88px 1fr;min-height:120px}.preset-thumb{height:105px}}
@media (max-width:860px){:root{--chat-height:42dvh}.auth-dialog{grid-template-columns:1fr;width:min(650px,96vw);max-height:96dvh;overflow:auto}.auth-left{display:flex;padding:20px;gap:6px}.auth-headline h2{font-size:25px;margin:7px 0}.auth-headline p{font-size:11px;line-height:1.3}.auth-preview{min-height:180px}.preview-stage{flex-direction:row;align-items:center;justify-content:center;gap:15px}.preview-character{width:135px;height:175px;max-height:initial}.preview-orbit{width:160px;height:155px;top:0;left:10%}.preview-copy{text-align:left}.preview-copy strong{font-size:16px}.auth-right{padding:20px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-card{grid-template-columns:66px 1fr;padding:8px;gap:8px}.preset-meta p{display:none}.preset-meta strong{font-size:12px}.preset-meta small{font-size:10px}.preset-thumb{height:92px}.game-main{top:calc(98px + var(--chat-height));min-height:530px;height:570px}.world-header p{display:none}.world-header{gap:8px}.scene{min-height:350px}.action-panel{height:min(70dvh,600px)}}
@media (max-width:560px){:root{--chat-height:42dvh}.game-main{top:calc(94px + var(--chat-height));height:520px;min-height:520px}.world-header h1{font-size:22px}.world-header{flex-direction:row;align-items:center}.world-actions{display:none}.scene{min-height:325px}.auth-overlay{padding:6px}.auth-dialog{width:100%;max-height:98dvh}.auth-headline h2{font-size:23px}.auth-logo{font-size:16px}.auth-headline p{display:none}.auth-preview{min-height:180px}.preview-character{height:176px;width:143px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.preset-card{padding:6px;gap:6px;grid-template-columns:62px 1fr}.preset-meta strong{font-size:11px}.preset-meta small{font-size:8px;letter-spacing:0}.preset-thumb{height:96px}.chat-dock-head h2{font-size:17px}.character{transform:scale(.92);transform-origin:bottom center}.bottom-dock{left:6px;right:6px;bottom:6px;padding:0 4px}.dock-btn small{font-size:9px}.dock-btn span{font-size:20px}}
@media (prefers-reduced-motion:reduce){.anime-art,.art-part,.aura,.halo,.aura-crest,.particle,.sprite-wrap{animation:none!important}}

.character-accessory{position:absolute;z-index:8;left:17px;top:95px;font-size:22px;filter:drop-shadow(0 0 8px var(--aura));animation:animeIdle 2s ease-in-out infinite}
.shop-card{position:relative;overflow:hidden;background:linear-gradient(110deg,#202641df,#14192cf0);border-color:#b58ad330}.shop-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 0,#e28cff12,transparent 65%)}.shop-icon{box-shadow:inset 0 0 24px #ad79ff33,0 7px 24px #06071499}.category-row{margin-bottom:12px;gap:7px}.category-row .choice-btn{padding:9px 10px;font-size:11px}.shop-card:hover{border-color:#f6a5d388}.rating-list .glow-4{border:1px solid #ff76dd77;box-shadow:inset 0 0 24px #ff76dd18}.rating-list .glow-3{border:1px solid #f7b86a55}

.character-outfit-icon{position:absolute;z-index:9;right:12px;bottom:42px;background:#181328d9;border:1px solid #f6c7e254;box-shadow:0 0 12px #ffb9de44;border-radius:10px;font-size:16px;padding:4px;pointer-events:none}