*{box-sizing:border-box}:root{--bg: #12100e;--bg-panel: #1c1712;--bg-panel-2: #241d16;--gold: #c9a24b;--gold-bright: #e8c877;--text: #ece3d3;--text-dim: #a89a83;--danger: #c0453a;--border: #3a2f22}html,body{margin:0;height:100%;background:radial-gradient(circle at top,#1c1712,#0c0a08);color:var(--text);font-family:Georgia,Iowan Old Style,serif}#app{min-height:100vh}.logo{font-size:2rem;letter-spacing:.15em;color:var(--gold-bright);text-transform:uppercase;margin:0}.tagline{color:var(--text-dim);margin-top:.25rem}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}.auth-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:2.5rem;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 60px #00000080}.form{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;text-align:left}.form label{display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;color:var(--text-dim)}input{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:.6rem .7rem;color:var(--text);font-size:1rem;font-family:inherit}input:focus{outline:none;border-color:var(--gold)}button{cursor:pointer;font-family:inherit}button[type=submit],.play-btn{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#201808;border:none;border-radius:4px;padding:.7rem;font-weight:700;font-size:1rem;letter-spacing:.03em;margin-top:.5rem;transition:filter .15s}button[type=submit]:hover,.play-btn:hover{filter:brightness(1.1)}.ghost-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);border-radius:4px;padding:.5rem 1rem}.ghost-btn:hover{border-color:var(--gold);color:var(--gold-bright)}.switch{margin-top:1.5rem;color:var(--text-dim);font-size:.9rem}.switch a{color:var(--gold-bright);text-decoration:none}.error{color:var(--danger);min-height:1.2em;font-size:.9rem;margin:0}.loading{text-align:center;padding:3rem;color:var(--text-dim)}.screen{max-width:1000px;margin:0 auto;padding:2rem 1.5rem 4rem}.screen-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.screen h2{color:var(--text-dim);font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;margin-bottom:1.5rem}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}.char-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}.char-card.new-char{color:var(--text-dim);border-style:dashed;justify-content:center;min-height:220px;font-family:inherit;font-size:1rem}.char-card.new-char:hover{border-color:var(--gold);color:var(--gold-bright)}.plus{font-size:2rem;display:block}.char-avatar{width:90px;height:90px;border-radius:50%;position:relative;border:2px solid var(--border);overflow:hidden}.char-avatar.large{width:160px;height:160px;margin:0 auto}.char-hair{position:absolute;top:-10%;left:0;right:0;height:55%;border-radius:50% 50% 0 0/60% 60% 0 0}.char-info h3{margin:0;color:var(--gold-bright)}.char-info p{margin:.2rem 0 0;color:var(--text-dim);font-size:.85rem}.char-actions{display:flex;gap:.5rem;width:100%}.char-actions button{flex:1;border-radius:4px;padding:.5rem;font-size:.85rem;border:1px solid var(--border)}.delete-btn{background:transparent;color:var(--danger)}.delete-btn:hover{border-color:var(--danger)}.creator-layout{display:grid;grid-template-columns:220px 1fr;gap:2.5rem}.preview-pane{display:flex;justify-content:center;padding-top:1rem}.creator-form{display:flex;flex-direction:column;gap:1.5rem}.creator-form>label{display:flex;flex-direction:column;gap:.4rem;color:var(--text-dim);font-size:.9rem}fieldset{border:1px solid var(--border);border-radius:6px;padding:1rem}legend{color:var(--text-dim);padding:0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.option-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-dim);border-radius:4px;padding:.5rem;font-size:.85rem}.option-btn.selected{border-color:var(--gold);color:var(--gold-bright);background:var(--bg-panel-2)}.swatch-row{display:flex;gap:.6rem;flex-wrap:wrap}.swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);padding:0}.swatch.selected{border-color:var(--gold-bright);box-shadow:0 0 0 2px var(--bg-panel),0 0 0 4px var(--gold-bright)}@media(max-width:700px){.creator-layout{grid-template-columns:1fr}}