*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1410;overflow:hidden;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;color:#e8dcc8}#landing{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:center;background:#1a1410}#landing:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(200,168,78,.06) 0%,transparent 70%),radial-gradient(ellipse at 50% 100%,rgba(110,78,46,.1) 0%,transparent 50%);pointer-events:none}.landing-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.5rem;padding:2rem;max-width:520px;width:100%;animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.hero-frame{position:relative;width:100%;max-width:420px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px #c8a84e4d,0 4px 24px #0009,0 0 80px #c8a84e14}.hero-frame:after{content:"";position:absolute;inset:0;border-radius:12px;border:1px solid rgba(200,168,78,.15);pointer-events:none}.hero-image{display:block;width:100%;height:auto;image-rendering:auto}.menu-buttons{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:320px}.btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:.9rem 1.5rem;border:2px solid transparent;border-radius:8px;font-family:MedievalSharp,cursive;font-size:1.25rem;letter-spacing:.03em;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.btn:focus-visible{outline:2px solid #dac06a;outline-offset:2px}.btn-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.btn-new{background:linear-gradient(180deg,#c8a84e,#a08030);color:#1a1410;border-color:#dac06a;box-shadow:0 2px 12px #c8a84e4d,inset 0 1px #ffffff26}.btn-new:hover{background:linear-gradient(180deg,#dac06a,#c8a84e);box-shadow:0 4px 20px #c8a84e66,inset 0 1px #fff3;transform:translateY(-1px)}.btn-new:active{transform:translateY(0);box-shadow:0 1px 6px #c8a84e33}.btn-continue{background:linear-gradient(180deg,#4a7a3a,#3a5e2e);color:#e8dcc8;border-color:#5a9a48;box-shadow:0 2px 12px #4a7a3a40,inset 0 1px #ffffff1a}.btn-continue:hover{background:linear-gradient(180deg,#5a9a48,#4a7a3a);box-shadow:0 4px 20px #4a7a3a59,inset 0 1px #ffffff26;transform:translateY(-1px)}.btn-continue:active{transform:translateY(0);box-shadow:0 1px 6px #4a7a3a33}.hidden{display:none!important}.fade-out{opacity:0;pointer-events:none;transition:opacity .4s ease}#builder{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:center;background:#1a1410;overflow-y:auto}#builder:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 20%,rgba(200,168,78,.04) 0%,transparent 60%),radial-gradient(ellipse at 50% 100%,rgba(110,78,46,.08) 0%,transparent 40%);pointer-events:none}.builder-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;max-width:860px;width:100%;animation:fadeIn .5s ease-out}.builder-title{font-family:MedievalSharp,cursive;font-size:1.75rem;color:#c8a84e;text-align:center;letter-spacing:.04em}.builder-layout{display:flex;gap:1.5rem;width:100%;align-items:flex-start;min-height:360px}@media(max-width:700px){.builder-layout{flex-direction:column;align-items:center}}.builder-preview{display:flex;flex-direction:column;align-items:center;gap:.75rem;flex-shrink:0}.preview-rotate{display:flex;align-items:center;justify-content:center;gap:.75rem}.rotate-btn{width:32px;height:32px;border:1px solid rgba(200,168,78,.2);border-radius:6px;background:#2a221a;color:#9a8e78;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.rotate-btn:hover{border-color:#c8a84e;color:#dac06a;background:#c8a84e1a}.rotate-label{font-size:.75rem;font-weight:600;color:#9a8e78;text-transform:uppercase;letter-spacing:.08em;min-width:50px;text-align:center}.preview-frame{background:linear-gradient(180deg,#4a4540,#2e2a24,#3a3530);border:2px solid rgba(200,168,78,.25);border-radius:8px;padding:1rem;display:flex;justify-content:center;align-items:center;width:224px;height:324px}.preview-frame canvas{image-rendering:pixelated;image-rendering:crisp-edges}.char-name-display{font-family:MedievalSharp,cursive;font-size:1.1rem;color:#dac06a;min-height:1.4em;text-align:center}.builder-categories{display:flex;flex-direction:column;gap:.25rem;flex-shrink:0;width:150px}.category-item{display:block;width:100%;padding:.6rem .85rem;border:1px solid rgba(200,168,78,.12);border-radius:6px;background:transparent;color:#9a8e78;font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;text-align:left;cursor:pointer;transition:all .15s ease}.category-item:hover{background:#c8a84e0f;color:#e8dcc8;border-color:#c8a84e40}.category-item.active{background:#c8a84e1f;color:#dac06a;border-color:#c8a84e59}.builder-options{flex:1;min-width:0;min-height:280px}.option-panel{display:none;flex-direction:column;gap:.75rem}.option-panel.active{display:flex}.option-title{font-size:.75rem;font-weight:600;color:#9a8e78;text-transform:uppercase;letter-spacing:.08em}.control-input{background:#2a221a;border:1px solid rgba(200,168,78,.2);border-radius:6px;padding:.5rem .75rem;color:#e8dcc8;font-family:Inter,sans-serif;font-size:.95rem;width:100%}.control-input::placeholder{color:#9a8e78}.control-input:focus{outline:none;border-color:#c8a84e;box-shadow:0 0 0 2px #c8a84e26}.swatch-grid{display:flex;gap:.5rem;flex-wrap:wrap}.swatch{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 1px #0006;cursor:pointer;transition:all .15s ease;position:relative}.swatch:hover{transform:scale(1.15);border-color:#fff6}.swatch.active{border-color:#dac06a;box-shadow:0 0 0 1px #0006,0 0 8px #c8a84e80}.style-grid{display:flex;gap:.5rem;flex-wrap:wrap}.style-card{padding:.55rem 1rem;border:1px solid rgba(200,168,78,.2);border-radius:6px;background:#2a221a;color:#e8dcc8;font-family:MedievalSharp,cursive;font-size:.95rem;cursor:pointer;transition:all .15s ease}.style-card:hover{border-color:#c8a84e;background:#c8a84e1a}.style-card.active{border-color:#dac06a;background:#c8a84e2e;color:#dac06a;box-shadow:0 0 8px #c8a84e40}.btn-begin{margin-top:.5rem;max-width:280px}#screen{position:relative;width:100%;height:100vh;display:flex;justify-content:center;align-items:center}