:root { --lime: #b4ff19; --lime-soft: #d4ff62; --ink: #0b0d0d; --panel: #151918; --white: #f5f6ef; --muted: #929b8e; --danger: #e8482e; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--white); background: radial-gradient(circle at 74% 30%, #172118 0, var(--ink) 42%); font-family: 'Space Mono', monospace; }
body::before, body::after { position: fixed; z-index: -1; content: ''; pointer-events: none; opacity: .28; }
body::before { inset: 0; background: repeating-linear-gradient(118deg, transparent 0 110px, #223127 111px 112px, transparent 113px 220px); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.app-shell { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 28px 0 38px; }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; margin-bottom: 18px; padding: 0 18px; overflow: hidden; border: 1px solid #314331; background: linear-gradient(105deg, #162019e6, #0d1210e8 55%, #182419d9); box-shadow: 0 10px 30px #0007, inset 0 1px 0 #d4ff6217; backdrop-filter: blur(12px); }
.topbar::before { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(118deg, transparent 0 12%, #b4ff1910 12.2% 12.5%, transparent 12.7% 70%, #b4ff190d 70.2% 70.5%, transparent 70.7%), radial-gradient(circle at 10% 50%, #b4ff1920, transparent 24%); }
.topbar::after { position: absolute; right: 16%; bottom: -34px; width: 130px; height: 65px; content: ''; border: 1px solid #b4ff1940; border-radius: 100% 0; transform: rotate(-18deg); opacity: .75; }
.topbar > * { position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 16px/13px 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.brand b { color: var(--lime); font-size: 19px; }
.brand-mark { color: var(--lime); font-size: 30px; transform: rotate(20deg); display: inline-block; }
.topbar-tag, .leaf-stamp, .eyebrow, .hud-label, .game-tip { color: var(--lime); font-size: 10px; letter-spacing: .18em; }
.panel { position: relative; min-height: 650px; overflow: hidden; border: 1px solid #2b352d; background: linear-gradient(120deg, #111513e8, #090b0bd9); box-shadow: 0 22px 80px #0008; }
.identity-screen { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: clamp(34px, 7vw, 90px); }
.leaf-stamp { position: absolute; top: 30px; right: 38px; border: 1px solid #b4ff1980; padding: 10px 14px; transform: rotate(-3deg); }
.hero-copy { z-index: 1; }
.eyebrow { margin: 0 0 18px; }
h1 { margin: 0; font: 800 clamp(68px, 10vw, 140px)/.78 'Barlow Condensed', sans-serif; letter-spacing: -.035em; }
h1 span { color: var(--lime); }
.intro { margin: 30px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.identity-form { z-index: 1; width: min(330px, 100%); justify-self: end; padding: 28px; border: 1px solid #3c493a; background: #131815d9; }
.identity-form label { display: block; color: var(--white); font-size: 11px; letter-spacing: .14em; margin-bottom: 11px; }
.name-row { display: flex; gap: 7px; }
input { position: relative; z-index: 2; min-width: 0; flex: 1; border: 1px solid #475545; background: #0a0d0b; color: var(--white); -webkit-text-fill-color: var(--white); caret-color: var(--lime); opacity: 1; padding: 14px; font: 12px 'Space Mono', monospace; outline: none; appearance: none; }
input::placeholder { color: #829080; opacity: .72; -webkit-text-fill-color: #829080; }
input:focus { border-color: var(--lime); box-shadow: 0 0 0 2px #b4ff1925; }
button { cursor: pointer; font: 700 11px 'Space Mono', monospace; }
.random-name { width: 47px; border: 1px solid var(--lime); background: #b4ff1918; color: var(--lime); font-size: 22px; }
.form-hint { min-height: 30px; margin: 9px 0 21px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.form-hint.error { color: var(--danger); }
.primary-button { width: 100%; padding: 15px; border: 0; background: var(--lime); color: var(--ink); letter-spacing: .07em; }
.primary-button span { float: right; font-size: 17px; line-height: 10px; }
.hero-dragon { position: absolute; right: 14%; bottom: -80px; width: 330px; height: 330px; border-radius: 50%; background: #24282a; opacity: .82; box-shadow: inset -20px -24px 0 #1c2021, 0 0 70px #b4ff1912; }
.hero-dragon::before, .hero-dragon::after { content: ''; position: absolute; top: 86px; width: 72px; height: 92px; border-radius: 50%; background: var(--white); border: 8px solid #131515; box-shadow: inset 0 0 0 18px var(--lime), inset 0 0 0 31px #050706; }
.hero-dragon::before { left: 72px; }.hero-dragon::after { right: 72px; }
.horn { position: absolute; top: -75px; width: 42px; height: 110px; background: var(--lime); clip-path: polygon(45% 0, 100% 100%, 0 78%); }.horn-left { left: 78px; transform: rotate(-7deg); }.horn-right { right: 78px; transform: rotate(7deg); }
.eye { position: absolute; z-index: 1; top: 126px; width: 23px; height: 23px; border-radius: 50%; background: var(--white); }.eye-left { left: 105px; }.eye-right { right: 105px; }.smile { position: absolute; left: 112px; bottom: 86px; width: 108px; height: 45px; border-bottom: 7px solid #0b0d0d; border-radius: 50%; }
.game-screen { padding: 8px 0 0; }.hud { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 20px; align-items: end; padding: 18px 4px 20px; }.hud-label { display: block; margin-bottom: 6px; font-size: 9px; }.hud strong { font-size: 14px; }.pause-button { border: 1px solid #4c5a4b; padding: 10px 13px; background: transparent; color: var(--white); }.pause-button span { color: var(--lime); margin-left: 8px; }.canvas-wrap { position: relative; width: 100%; border: 1px solid #364236; background: #080a09; box-shadow: 0 18px 50px #0009; }.canvas-wrap canvas { display: block; width: 100%; height: auto; image-rendering: auto; }.canvas-message { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #0b0e0de8; color: var(--white); font: 700 44px 'Barlow Condensed', sans-serif; }.mobile-controls { display: none; }.game-tip { text-align: center; margin: 17px 0; font-size: 9px; }.game-tip span { margin: 0 9px; color: #4e5a4d; }
[hidden] { display: none !important; }
@media (max-width: 720px) { .app-shell { width: min(100% - 24px, 560px); padding-top: 15px; }.topbar { height: 43px; }.topbar-tag { font-size: 8px; }.identity-screen { display: block; min-height: 700px; padding: 80px 24px 32px; }.leaf-stamp { top: 24px; right: 24px; }.identity-form { position: absolute; right: 24px; bottom: 28px; left: 24px; width: auto; }.hero-dragon { right: -55px; bottom: 225px; width: 270px; height: 270px; opacity: .48; }.hero-dragon::before, .hero-dragon::after { top: 70px; width: 60px; height: 78px; }.hero-dragon::before { left: 57px; }.hero-dragon::after { right: 57px; }.horn { top: -62px; width: 35px; height: 90px; }.horn-left { left: 64px; }.horn-right { right: 64px; }.eye { top: 105px; width: 19px; height: 19px; }.eye-left { left: 86px; }.eye-right { right: 86px; }.smile { left: 90px; bottom: 73px; width: 90px; }.hud { grid-template-columns: 1fr 1fr; gap: 15px; }.pause-button { grid-column: span 2; }.mobile-controls { display: block; margin-top: 16px; text-align: center; }.mobile-controls div { display: flex; justify-content: center; gap: 8px; }.mobile-controls button { width: 48px; height: 42px; border: 1px solid #546550; background: #142017; color: var(--lime); }.mobile-controls > button { width: 48px; height: 42px; border: 1px solid #546550; background: #142017; color: var(--lime); } }