.picker{max-width:680px;margin:30px 0 40px;transition:opacity .22s,transform .22s}.picker.turning{opacity:0;transform:translateY(10px)}.picker.turned{opacity:1;transform:none}.rite-narr{font-family:var(--font-body);color:var(--text-dim);margin:0 0 18px;font-size:1.18rem;font-style:italic;line-height:1.7}.rite-narr.strong{color:var(--arcane-bright);font-size:1.4rem;font-family:var(--font-head);letter-spacing:.02em;font-style:normal}.rite-scroll{text-align:center;padding:20px 0}.rite-scroll .btn{margin-top:14px}.picker-progress{color:var(--arcane);font-family:var(--font-head);letter-spacing:.04em;margin-bottom:14px;font-size:.95rem}.picker-progress .bar{background:var(--stone-dark);border:1px solid var(--stone-light);border-radius:999px;height:5px;margin-top:10px;overflow:hidden}.picker-progress .bar-fill{background:linear-gradient(90deg, var(--arcane-deep), var(--arcane-bright));height:100%;box-shadow:0 0 10px var(--arcane-glow);transition:width .35s}.picker-q{font-family:var(--font-display);color:var(--text);margin:6px 0 18px;font-size:1.55rem}.picker-options{flex-direction:column;gap:12px;display:flex}.picker-opt{text-align:left;font-family:var(--font-body);color:var(--text);cursor:pointer;border-radius:var(--radius);background:linear-gradient(180deg, var(--stone), var(--stone-dark));border:1px solid var(--stone-light);padding:16px 20px;font-size:1.08rem;transition:border-color .14s,transform .14s,color .14s,box-shadow .14s;box-shadow:inset 0 1px #ffffff08,0 4px 12px #00000059}.picker-opt:hover{border-color:var(--arcane);color:var(--arcane-bright);box-shadow:0 0 20px var(--arcane-glow);transform:translate(4px)}.picker-back{color:var(--text-faint);cursor:pointer;font-family:var(--font-head);letter-spacing:.03em;background:0 0;border:none;margin-top:22px;font-size:.95rem}.picker-back:hover{color:var(--arcane)}.banner-choice{grid-template-columns:1fr 1fr;gap:16px;margin:6px 0;display:grid}.banner{cursor:pointer;border-radius:var(--radius);text-align:center;color:var(--text);background:linear-gradient(180deg, var(--stone), var(--stone-dark));border:1px solid var(--stone-light);flex-direction:column;gap:8px;padding:28px 22px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.banner-name{font-family:var(--font-display);font-size:1.5rem}.banner-flavor{font-family:var(--font-body);color:var(--text-dim);font-size:.98rem;font-style:italic}.banner.alliance:hover{border-color:var(--alliance);transform:translateY(-3px);box-shadow:0 0 26px #4a76c466}.banner.alliance .banner-name{color:#7ba2e0}.banner.horde:hover{border-color:var(--horde);transform:translateY(-3px);box-shadow:0 0 26px #a3312766}.banner.horde .banner-name{color:#d06a5e}.picker-result-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.2em;color:var(--arcane);margin:20px 0 14px;font-size:.8rem}.result-top,.character-card{border-radius:var(--radius);background:linear-gradient(180deg, var(--stone) 0%, var(--stone-dark) 100%);border:1px solid var(--arcane-deep);padding:32px 30px;position:relative;box-shadow:inset 0 1px #ffffff0d,0 16px 40px #0009}.result-top:before,.character-card:before{content:"";pointer-events:none;border:1px solid #3fb8c838;border-radius:2px;position:absolute;inset:6px}.result-epithet{font-family:var(--font-head);color:var(--arcane);letter-spacing:.06em;margin:0 0 2px;font-size:1.05rem;font-style:italic}.result-top h2,.char-title{font-family:var(--font-display);color:var(--silver-bright);text-shadow:0 0 22px var(--arcane-glow);margin:0 0 14px;font-size:2.2rem}.result-lore{color:var(--text);border-left:2px solid var(--arcane-deep);margin:0 0 18px;padding-left:18px;font-size:1.12rem;font-style:italic;line-height:1.75}.result-tag{color:var(--text-dim);margin:0 0 18px;font-size:.98rem}.result-why{color:var(--text);margin:0 0 20px;padding-left:22px}.result-why li{margin:5px 0}.result-grid{grid-template-columns:1fr 1fr;gap:22px;margin:16px 0;display:grid}.result-grid strong{font-family:var(--font-head);color:var(--arcane-bright);margin-bottom:6px;display:block}.result-grid ul{color:var(--text-dim);margin:0;padding-left:20px;font-size:.98rem}.result-early{color:var(--text-dim);border-top:1px solid var(--stone-light);margin:16px 0 0;padding-top:14px}.result-early strong{color:var(--arcane-bright);font-family:var(--font-head)}.kin-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:6px 0;display:grid}.kin-card{cursor:pointer;border-radius:var(--radius);text-align:center;color:var(--text);background:linear-gradient(180deg, var(--stone), var(--stone-dark));border:1px solid var(--stone-light);flex-direction:column;align-items:center;gap:8px;padding:18px 14px;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.kin-card img{border:1px solid var(--arcane-deep);background:var(--stone-void);border-radius:50%;width:90px;height:90px;box-shadow:0 0 16px #3fb8c826}.kin-card:hover{border-color:var(--arcane);box-shadow:0 0 24px var(--arcane-glow);transform:translateY(-4px)}.kin-name{font-family:var(--font-display);color:var(--silver-bright);font-size:1.15rem}.kin-flavor{font-family:var(--font-body);color:var(--text-dim);font-size:.88rem;font-style:italic;line-height:1.45}.character-card{text-align:center}.char-banner{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.16em;border-radius:999px;margin-bottom:16px;padding:4px 16px;font-size:.8rem;display:inline-block}.char-banner.alliance{color:#9dbef0;border:1px solid var(--alliance);background:#4a76c41f}.char-banner.horde{color:#e08b7f;border:1px solid var(--horde);background:#a331271f}.char-emblem{border:1px solid var(--arcane);background:var(--stone-void);width:120px;height:120px;box-shadow:0 0 30px var(--arcane-glow);border-radius:50%;margin-bottom:12px}.character-card .result-lore{text-align:left}.char-line{flex-wrap:wrap;justify-content:center;gap:26px;margin:18px 0;display:flex}.char-line span{font-family:var(--font-head);color:var(--text);flex-direction:column;font-size:1.05rem;display:flex}.char-line strong{font-family:var(--font-body);color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px;font-size:.78rem;font-style:italic;font-weight:400}.character-card .result-early{text-align:left}.picker-actions{flex-wrap:wrap;gap:14px;margin:30px 0 16px;display:flex}.picker-disclaimer{color:var(--text-faint);font-size:.9rem;font-style:italic}@media (width<=560px){.result-grid,.banner-choice{grid-template-columns:1fr}.char-line{gap:16px}}
