@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;600;700;900&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--rh: #CCFF00;--xrp: #013eda;--bg: #000;--surface: #0d0d0d;--border: #2a2a2a;--text: #fff;--muted: #888}html,body,#root{height:100%;overflow:hidden}body{font-family:Space Mono,monospace;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#444}.desktop-only{display:flex}.mobile-only{display:none}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}.app-header{height:calc(32px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);border-bottom:1px solid #1a1a1a;flex-shrink:0;background:#000;position:relative;z-index:10}.app-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.logo-text{font-family:Space Mono,monospace;font-size:13px;font-weight:700;letter-spacing:.2em}.app-header-right{display:flex;align-items:center;gap:12px}.app-nav{display:flex}.nav-btn{font-family:Space Mono,monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;border:1px solid #333;padding:5px 10px;cursor:pointer}.hamburger-btn{background:transparent;border:1px solid #333;color:#cf0;font-size:18px;padding:4px 8px;cursor:pointer;font-family:Space Mono,monospace}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#0a0a0a;border-bottom:2px solid #CCFF00;padding:8px 16px;display:flex;flex-direction:column;gap:0;z-index:20}.mobile-menu-btn{font-family:Space Mono,monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;background:transparent;border:none;padding:12px 0;cursor:pointer;text-align:left;border-bottom:1px solid #1a1a1a}.app-main{flex:1;display:flex;overflow:hidden;background:#000}.side-bg-left{position:relative;overflow:hidden;background:#000;width:28.6vh;flex-shrink:0}.side-bg-right{position:relative;overflow:hidden;background:#000;width:33.33vh;flex-shrink:0}.side-bg-left>img{position:absolute;top:50%;left:50%;width:100vh;height:28.6vh;object-fit:cover;transform:translate(-50%,-50%) rotate(-90deg)}.side-bg-right>img{position:absolute;top:50%;left:50%;width:100vh;height:33.33vh;object-fit:cover;transform:translate(-50%,-50%) rotate(90deg)}.center-content{flex:1;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid #1a1a1a;border-right:1px solid #1a1a1a;background:#000;position:relative}.graffiti-top-border{height:4px;background:repeating-linear-gradient(90deg,#CCFF00 0px,#CCFF00 8px,transparent 8px,transparent 12px,#013eda 12px,#013eda 20px,transparent 20px,transparent 24px);flex-shrink:0}.app-footer{height:calc(20px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid #1a1a1a;display:flex;align-items:center;justify-content:center;font-family:Space Mono,monospace;font-size:8px;color:#555;text-transform:uppercase;letter-spacing:.15em;background:#000;flex-shrink:0}@media(max-width:768px){.center-content{border-left:none;border-right:none;max-width:100%}.app-header-inner{padding:0 12px}.logo-text{font-size:11px}.app-footer{font-size:8px;height:calc(24px + env(safe-area-inset-bottom))}}@keyframes spin{to{transform:rotate(360deg)}}.preview-panel{width:320px;border-left:2px solid #2a2a2a;background:#000;display:flex;flex-direction:column;flex-shrink:0;z-index:100}@media(max-width:768px){.preview-panel{position:absolute;bottom:0;left:0;right:0;width:100%;height:60vh;border-left:none;border-top:2px solid #CCFF00;box-shadow:0 -10px 40px #000000f2;background:#050505fa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.anim-idle{animation:breath 3s infinite ease-in-out}.anim-attack{animation:lungeRight .6s cubic-bezier(.175,.885,.32,1.275)}.anim-attack-right{animation:lungeLeft .6s cubic-bezier(.175,.885,.32,1.275)}.anim-hit{animation:shake .4s ease-in-out}.anim-defend{animation:defendGlow .6s ease-out}@keyframes breath{0%{transform:scale(1)}50%{transform:scale(1.03) translateY(-2px)}to{transform:scale(1)}}@keyframes lungeRight{0%{transform:translate(0) scale(1);filter:brightness(1)}40%{transform:translate(120px) scale(1.15);filter:brightness(1.3)}to{transform:translate(0) scale(1);filter:brightness(1)}}@keyframes lungeLeft{0%{transform:translate(0) scale(1);filter:brightness(1)}40%{transform:translate(-120px) scale(1.15);filter:brightness(1.3)}to{transform:translate(0) scale(1);filter:brightness(1)}}@keyframes shake{0%{transform:translate(0) rotate(0)}20%{transform:translate(-15px) rotate(-3deg);filter:brightness(2) contrast(2) hue-rotate(90deg)}40%{transform:translate(15px) rotate(3deg);filter:brightness(.5) contrast(2) hue-rotate(-90deg)}60%{transform:translate(-10px) rotate(-2deg);filter:brightness(1.5)}80%{transform:translate(10px) rotate(2deg);filter:brightness(.8)}to{transform:translate(0) rotate(0);filter:brightness(1) contrast(1)}}@keyframes defendGlow{0%{transform:scale(1)}30%{transform:scale(.9);filter:drop-shadow(0 0 40px #00ffcc) brightness(1.5)}to{transform:scale(1)}}