:root{--bg: #0d1b1e;--bg-light: #14282c;--turquoise: #2a9d8f;--turquoise-light: #40b5a7;--turquoise-dark: #1d7066;--text: #e8f3f1;--text-dim: #8fbdb5;--accent: #e9c46a;--danger: #e76f51;--success: #2a9d8f;--card-bg: #1a3a3a;--card-border: #2a6b6b}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.screen{min-height:100vh;padding:16px;display:flex;flex-direction:column;align-items:center}.loading-screen{justify-content:center;gap:16px}.spinner{width:40px;height:40px;border:3px solid var(--turquoise-dark);border-top-color:var(--turquoise-light);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{border:none;border-radius:14px;padding:14px 20px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .1s,box-shadow .2s;color:#fff;background:var(--turquoise)}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--turquoise),var(--turquoise-dark));box-shadow:0 4px 15px #2a9d8f4d}.btn-primary:hover{box-shadow:0 6px 20px #2a9d8f66}.btn-large{width:100%;padding:16px;font-size:1.05rem}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-back{background:transparent;border:1px solid var(--card-border);color:var(--text-dim);padding:8px 14px;border-radius:10px;font-size:.9rem;cursor:pointer;margin-bottom:12px}.auth-screen{justify-content:center}.auth-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:24px;padding:32px 24px;width:100%;max-width:360px;text-align:center}.logo{font-size:2.2rem;margin-bottom:8px;background:linear-gradient(135deg,var(--turquoise-light),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--text-dim);margin-bottom:24px;font-size:.95rem}.hint{color:var(--text-dim);font-size:.8rem;margin-top:16px}.error-msg{background:#e76f5126;color:var(--danger);padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:.9rem}.wizard-screen{max-width:480px;margin:0 auto}.wizard-header{width:100%;margin-bottom:20px}.progress-bar{display:flex;gap:8px;margin-bottom:12px}.progress-step{flex:1;height:4px;background:var(--bg-light);border-radius:2px;transition:background .3s}.progress-step.active{background:var(--turquoise)}.wizard-step{width:100%;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-title{font-size:1.5rem;margin-bottom:8px;text-align:center}.step-desc{color:var(--text-dim);text-align:center;margin-bottom:24px;font-size:.95rem;line-height:1.5}.hint-text{display:block;margin-top:8px;font-size:.85rem;color:var(--accent);font-style:italic}.options-grid{display:flex;flex-direction:column;gap:12px}.option-card{position:relative;background:var(--card-bg);border:2px solid var(--card-border);border-radius:20px;padding:24px;text-align:left;color:var(--text);cursor:pointer;overflow:hidden;transition:transform .15s,border-color .2s}.option-card:hover{transform:translateY(-2px)}.option-card:active{transform:scale(.98)}.card-glow{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;pointer-events:none}.option-card:hover .card-glow{opacity:1}.card-icon{font-size:2.5rem;margin-bottom:12px}.option-card h3{font-size:1.2rem;margin-bottom:6px}.option-card p{color:var(--text-dim);font-size:.9rem;line-height:1.4}.card-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--turquoise-light);opacity:0;transition:opacity .2s}.option-card:hover .card-arrow{opacity:1}.role-badge{display:inline-block;background:#2a9d8f33;color:var(--turquoise-light);padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:700;margin-top:8px;margin-bottom:6px}.academy-magic{border-color:#4a3a6b}.academy-magic .card-glow{background:radial-gradient(circle at 80% 20%,rgba(138,43,226,.15),transparent 60%)}.academy-magic.option-card:hover{border-color:#8a2be2;box-shadow:0 0 25px #8a2be233}.academy-magic.option-card:before{content:"ᚠ ᚢ ᚦ ᚨ ᚱ ᚲ";position:absolute;bottom:8px;right:12px;font-size:.7rem;color:#8a2be240;letter-spacing:2px;pointer-events:none}.academy-magic.option-card:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(138,43,226,.03) 10px,rgba(138,43,226,.03) 20px);animation:runeGlow 4s linear infinite;pointer-events:none}@keyframes runeGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.academy-mercenary{border-color:#5a5a5a}.academy-mercenary .card-glow{background:radial-gradient(circle at 20% 80%,rgba(160,160,160,.12),transparent 60%)}.academy-mercenary.option-card:hover{border-color:#888;box-shadow:0 0 25px #a0a0a026}.academy-mercenary.option-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(120,120,120,.1) 0%,transparent 50%),repeating-linear-gradient(-60deg,transparent,transparent 15px,rgba(80,80,80,.08) 15px,rgba(80,80,80,.08) 16px);pointer-events:none}.academy-mercenary.option-card:after{content:"";position:absolute;top:20px;right:30px;width:40px;height:3px;background:linear-gradient(90deg,transparent,rgba(180,180,180,.4),transparent);transform:rotate(-25deg);border-radius:2px;box-shadow:8px 12px #b4b4b433,-5px 25px #b4b4b426;pointer-events:none}.preview-card{position:relative;background:var(--card-bg);border:2px solid var(--card-border);border-radius:20px;padding:32px;text-align:center;margin-bottom:24px;overflow:hidden}.preview-card.academy-magic{border-color:#4a3a6b}.preview-card.academy-magic .preview-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 50%,rgba(138,43,226,.12),transparent 70%);animation:pulseMagic 3s ease-in-out infinite}@keyframes pulseMagic{0%,to{opacity:.5}50%{opacity:1}}.preview-card.academy-mercenary{border-color:#5a5a5a}.preview-card.academy-mercenary .preview-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(120,120,120,.08) 0%,transparent 50%),repeating-linear-gradient(-60deg,transparent,transparent 20px,rgba(80,80,80,.06) 20px,rgba(80,80,80,.06) 21px)}.preview-card.academy-mercenary:after{content:"";position:absolute;top:15px;right:40px;width:50px;height:2px;background:linear-gradient(90deg,transparent,rgba(180,180,180,.3),transparent);transform:rotate(-20deg);box-shadow:5px 15px #b4b4b426;pointer-events:none}.preview-content{position:relative;z-index:1}.preview-icon{font-size:3rem;margin-bottom:12px}.preview-name{font-size:1.5rem;font-weight:700;margin-bottom:4px}.preview-spec{color:var(--text-dim);font-size:.9rem;margin-bottom:8px}.preview-role{display:inline-block;background:#2a9d8f33;color:var(--turquoise-light);padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:700}.name-form{width:100%}.name-input{width:100%;background:var(--bg-light);border:2px solid var(--card-border);border-radius:14px;padding:16px;color:var(--text);font-size:1.1rem;text-align:center;margin-bottom:8px;outline:none;transition:border-color .2s}.name-input:focus{border-color:var(--turquoise)}.name-input::placeholder{color:var(--text-dim)}.field-error{color:var(--danger);font-size:.85rem;margin-bottom:12px;text-align:center}.character-card{position:relative;background:var(--card-bg);border:2px solid var(--card-border);border-radius:24px;padding:28px;width:100%;max-width:400px;overflow:hidden}.character-card.academy-magic{border-color:#4a3a6b}.character-card.academy-magic .card-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 70% 30%,rgba(138,43,226,.1),transparent 60%)}.character-card.academy-magic:before{content:"ᚠ ᚢ ᚦ ᚨ ᚱ";position:absolute;top:12px;right:16px;font-size:.65rem;color:#8a2be233;letter-spacing:2px}.character-card.academy-mercenary{border-color:#5a5a5a}.character-card.academy-mercenary .card-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(120,120,120,.06) 0%,transparent 50%),repeating-linear-gradient(-60deg,transparent,transparent 18px,rgba(80,80,80,.05) 18px,rgba(80,80,80,.05) 19px)}.character-card.academy-mercenary:after{content:"";position:absolute;top:18px;right:35px;width:35px;height:2px;background:linear-gradient(90deg,transparent,rgba(180,180,180,.25),transparent);transform:rotate(-22deg);box-shadow:4px 10px #b4b4b41f}.character-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;position:relative;z-index:1}.character-icon{font-size:2.5rem}.character-name{font-size:1.4rem;margin-bottom:2px}.character-meta{color:var(--text-dim);font-size:.85rem}.character-role{display:inline-block;margin-top:6px;background:#2a9d8f33;color:var(--turquoise-light);padding:2px 10px;border-radius:12px;font-size:.7rem;font-weight:700}.character-level{text-align:center;font-size:1.1rem;color:var(--accent);margin-bottom:16px;position:relative;z-index:1}.stats-grid-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;position:relative;z-index:1}.stat-mini{background:#0003;padding:10px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}.stat-label{color:var(--text-dim);font-size:.85rem}.stat-val{font-weight:700;color:var(--text)}.character-resources{display:flex;gap:12px;justify-content:center;position:relative;z-index:1}.res-item{background:#0003;padding:8px 16px;border-radius:12px;font-size:.95rem}@media (min-width: 480px){.screen{padding:24px}}