@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap";:root{--bg:#06090f;--bg-card:#0b1120;--bg-card-deep:#080e1a;--bg-card-mid:#0d1428;--border:#1a2840;--border-mid:#243650;--border-bright:#2d4a70;--border-accent:#3a65a0;--accent:#2e6bc4;--accent-dim:#1a4480;--accent-glow:#2e6bc42e;--accent-glow-lg:#2e6bc414;--red:#a82828;--red-bright:#d43a3a;--red-glow:#a8282840;--gold:#b8901e;--gold-bright:#d4aa30;--gold-glow:#b8901e33;--green:#1e8045;--green-bright:#28a85e;--text:#8aa0bc;--text-bright:#c0d4ec;--text-dim:#3a5070;--text-muted:#1c2c40;--font-display:"Rajdhani", system-ui, sans-serif;--font-heading:"Orbitron", "Rajdhani", system-ui, sans-serif;--font-mono:"Share Tech Mono", "Courier New", monospace;--str:#b83030;--end:#c07020;--agi:#1e8a4a;--int:#2464b0;--vit:#7a3a8a;--per:#5a4a9a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg);height:100%}body{background:var(--bg);height:100%;color:var(--text-bright);font-family:var(--font-display);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}#root{flex-direction:column;max-width:480px;min-height:100svh;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.ambient-bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.ambient-bg:before{content:"";background:radial-gradient(70% 55% at 28% 30%,#143c8c2e 0%,#0000 100%),radial-gradient(55% 65% at 72% 70%,#0819501f 0%,#0000 100%);animation:28s ease-in-out infinite alternate drift-a;position:absolute;inset:-20%}.ambient-bg:after{content:"";background:radial-gradient(60% 45% at 68% 18%,#19469621 0%,#0000 100%),radial-gradient(45% 60% at 22% 80%,#0a235a1a 0%,#0000 100%);animation:35s ease-in-out infinite alternate drift-b;position:absolute;inset:-20%}@keyframes drift-a{0%{transform:translate(0)scale(1)}to{transform:translate(6%,9%)scale(1.08)}}@keyframes drift-b{0%{transform:translate(0)scale(1.06)}to{transform:translate(-7%,-6%)scale(.96)}}.ambient-bg+*{z-index:1;position:relative}body:after{content:"";pointer-events:none;z-index:9998;background:repeating-linear-gradient(#0000 0 3px,#0000000a 3px 4px);position:fixed;inset:0}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-mid)}h1,h2,h3,h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.mono{font-family:var(--font-mono)}.sl-card{background:var(--bg-card);border:1px solid var(--border);padding:16px;position:relative}.sl-card:before{content:"";border:1px solid var(--border-mid);pointer-events:none;position:absolute;inset:3px}button{font-family:var(--font-display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;outline:none;font-weight:600;transition:all .15s}.sl-btn{border:1px solid var(--border-bright);color:var(--text);background:0 0;justify-content:center;align-items:center;padding:10px 24px;font-size:13px;display:inline-flex;position:relative}.sl-btn:before{content:"";border:1px solid var(--border);pointer-events:none;transition:border-color .15s;position:absolute;inset:2px}.sl-btn:hover{border-color:var(--accent);color:var(--text-bright);background:var(--accent-glow)}.sl-btn:hover:before{border-color:var(--accent-dim)}.sl-btn:active{transform:scale(.97)}.sl-btn-accent{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px var(--accent-glow), inset 0 0 12px var(--accent-glow-lg)}.sl-btn-accent:hover{border-color:var(--text-bright);color:var(--text-bright)}.sl-btn-red{border-color:var(--red-bright);color:var(--red-bright);box-shadow:0 0 12px var(--red-glow), inset 0 0 12px var(--red-glow)}.sl-btn-red:hover{color:#f04040;border-color:#f04040}.sl-btn-gold{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px var(--gold-glow), inset 0 0 10px var(--gold-glow)}.sl-btn:disabled{opacity:.25;cursor:not-allowed;box-shadow:none}.sl-label{border:1px solid var(--border-mid);letter-spacing:.18em;color:var(--text-dim);font-size:10px;font-family:var(--font-mono);text-transform:uppercase;align-items:center;gap:8px;padding:3px 12px;display:inline-flex}.sl-label-accent{border-color:var(--border-accent);color:var(--accent)}.sl-bar-track{background:var(--bg-card-deep);border:1px solid var(--border);width:100%;height:6px;position:relative;overflow:hidden}.sl-bar-fill{background:linear-gradient(90deg, var(--accent-dim), var(--accent));transition:width .8s;position:absolute;top:0;bottom:0;left:0}.page{padding:14px 14px calc(96px + env(safe-area-inset-bottom,0px));padding-top:calc(14px + env(safe-area-inset-top,0px));z-index:1;flex:1;position:relative;overflow-y:auto}.page-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;display:flex}.page-title{letter-spacing:.14em;color:var(--accent);font-size:16px}.stat-STR{color:var(--str)}.stat-END{color:var(--end)}.stat-AGI{color:var(--agi)}.stat-INT{color:var(--int)}.stat-VIT{color:var(--vit)}.stat-PER{color:var(--per)}.sl-divider{background:linear-gradient(90deg, transparent, var(--border-mid) 30%, var(--border-mid) 70%, transparent);height:1px;margin:12px 0}input{background:var(--bg-card-deep);border:1px solid var(--border-mid);color:var(--text-bright);font-family:var(--font-mono);outline:none;width:100%;padding:13px 16px;font-size:16px;transition:border-color .15s}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes rank-pulse{0%,to{box-shadow:0 0 12px}50%{box-shadow:0 0 28px}}@keyframes penalty-pulse{0%,to{opacity:.06}50%{opacity:.14}}@keyframes wave-drift-1{0%{transform:scale(1)translate(0)}50%{transform:scale(1.35)translate(-7%,7%)}to{transform:scale(1)translate(0)}}@keyframes wave-drift-2{0%{transform:scale(1.2)translate(6%,-5%)}50%{transform:scale(.85)translate(-5%,9%)}to{transform:scale(1.2)translate(6%,-5%)}}@keyframes pulse-dot{0%{opacity:.2;transform:scale(.8)}to{opacity:.85;transform:scale(1.2)}}.anim-fade-up{animation:.3s both fade-up}.anim-slide-dn{animation:.28s both slide-down}input::placeholder{color:var(--text-muted)}input:focus{border-color:var(--accent)!important;box-shadow:0 0 16px var(--accent-glow)!important}