/* King of Chaos — seleção gamer das cinco classes nos portais oficiais. */
#creation[data-creation-step="class"] .creation-card.creation-wizard{width:min(1540px,98vw)!important;max-height:97vh!important;padding:9px 12px 16px!important;background:linear-gradient(180deg,#0c0906fa,#040506fc)!important}
#creation[data-creation-step="class"] #creationClassStep>h2,#creation[data-creation-step="class"] .class-list-column>h3{display:none!important}
#creation[data-creation-step="class"] .creation-progress{margin-bottom:5px!important}
#creation[data-creation-step="class"] .creation-identity-row{position:relative;z-index:5;max-width:880px!important;margin:0 auto 7px!important}
#creation[data-creation-step="class"] .class-selection-stage{display:block!important}
#creation[data-creation-step="class"] .class-front-preview-panel{display:none!important}
#creation[data-creation-step="class"] .class-list-column{width:100%!important}
#creation[data-creation-step="class"] #classGrid{position:relative!important;display:block!important;width:100%!important;aspect-ratio:128/65!important;min-height:0!important;margin:0 auto!important;padding:0!important;overflow:hidden!important;border:1px solid #9b7136!important;border-radius:4px!important;background:#080909 url('../media/class-selection-portals.png') center/100% 100% no-repeat!important;box-shadow:0 18px 44px #000d,inset 0 0 0 2px #17110a!important}
#creation[data-creation-step="class"] #classGrid .class-choice{--slot-left:7%;position:absolute!important;z-index:7!important;top:38%!important;left:var(--slot-left)!important;width:13.8%!important;height:57%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:46% 46% 16% 16%!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;transform:none!important;filter:none!important;cursor:pointer!important;animation:none!important;opacity:1!important;outline:0!important}
#creation[data-creation-step="class"] #classGrid .class-choice[data-class-id="warrior"]{--slot-left:7%}
#creation[data-creation-step="class"] #classGrid .class-choice[data-class-id="archer"]{--slot-left:25%}
#creation[data-creation-step="class"] #classGrid .class-choice[data-class-id="mage"]{--slot-left:43.1%}
#creation[data-creation-step="class"] #classGrid .class-choice[data-class-id="assassin"]{--slot-left:61%}
#creation[data-creation-step="class"] #classGrid .class-choice[data-class-id="paladin"]{--slot-left:79.1%}
#creation[data-creation-step="class"] #classGrid .class-choice::before{content:""!important;position:absolute!important;z-index:1!important;left:1%!important;right:1%!important;bottom:0!important;height:35%!important;border-radius:50%!important;background:radial-gradient(ellipse,var(--class-glow) 0%,color-mix(in srgb,var(--class-glow),transparent 55%) 36%,transparent 70%)!important;opacity:.28!important;transform:scale(.82)!important;transition:.2s ease!important;pointer-events:none!important}
#creation[data-creation-step="class"] #classGrid .class-choice::after{content:""!important;position:absolute!important;z-index:7!important;inset:0!important;border-radius:44% 44% 18% 18%!important;border:2px solid transparent!important;opacity:0!important;box-shadow:none!important;background:transparent!important;pointer-events:none!important;transition:.2s ease!important}
#creation[data-creation-step="class"] #classGrid .class-choice:hover::before,#creation[data-creation-step="class"] #classGrid .class-choice:focus-visible::before{opacity:.62!important;transform:scale(1)!important;filter:drop-shadow(0 0 11px var(--class-glow))!important}
#creation[data-creation-step="class"] #classGrid .class-choice.selected::before{opacity:.9!important;transform:scale(1.08)!important;filter:drop-shadow(0 0 16px var(--class-glow)) drop-shadow(0 0 30px var(--class-glow))!important}
#creation[data-creation-step="class"] #classGrid .class-choice.selected::after{opacity:.8!important;border-color:color-mix(in srgb,var(--class-glow),#fff 34%)!important;box-shadow:inset 0 0 24px color-mix(in srgb,var(--class-glow),transparent 65%),0 0 19px color-mix(in srgb,var(--class-glow),transparent 45%)!important}
#creation[data-creation-step="class"] #classGrid .class-preview{position:absolute!important;z-index:3!important;inset:0!important;width:auto!important;height:auto!important;min-height:0!important;display:block!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important}
#creation[data-creation-step="class"] #classGrid .class-body-preview{position:absolute!important;display:block!important;z-index:4!important;left:50%!important;bottom:4%!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;opacity:1!important;transform:translateX(-50%) scale(1.03)!important;filter:brightness(1.16) saturate(1.15) contrast(1.05) drop-shadow(0 17px 11px #000)!important;transition:transform .2s ease,filter .2s ease!important}
#creation[data-creation-step="class"] #classGrid .class-choice:hover .class-body-preview,#creation[data-creation-step="class"] #classGrid .class-choice:focus-visible .class-body-preview{opacity:1!important;transform:translateX(-50%) translateY(-1.5%) scale(1.08)!important;filter:brightness(1.28) saturate(1.2) drop-shadow(0 18px 12px #000) drop-shadow(0 0 7px var(--class-glow))!important}
#creation[data-creation-step="class"] #classGrid .class-choice.selected .class-body-preview{opacity:1!important;transform:translateX(-50%) translateY(-2%) scale(1.1)!important;filter:brightness(1.32) saturate(1.22) drop-shadow(0 18px 12px #000) drop-shadow(0 0 12px var(--class-glow))!important}
#creation[data-creation-step="class"] #classGrid.class-3d-warrior-ready .class-choice[data-class-id="warrior"] .class-body-preview,#creation[data-creation-step="class"] #classGrid.class-3d-archer-ready .class-choice[data-class-id="archer"] .class-body-preview,#creation[data-creation-step="class"] #classGrid.class-3d-mage-ready .class-choice[data-class-id="mage"] .class-body-preview,#creation[data-creation-step="class"] #classGrid.class-3d-assassin-ready .class-choice[data-class-id="assassin"] .class-body-preview,#creation[data-creation-step="class"] #classGrid.class-3d-paladin-ready .class-choice[data-class-id="paladin"] .class-body-preview{opacity:0!important}
#creation[data-creation-step="class"] #classGrid .class-state-badge{display:grid!important;place-items:center!important;position:absolute!important;z-index:10!important;top:3%!important;right:3%!important;left:auto!important;width:30px!important;height:30px!important;padding:0!important;border:2px solid #fff1b2!important;border-radius:50%!important;background:var(--class-glow)!important;color:#160d04!important;font-size:0!important;opacity:0!important;transform:scale(.65)!important;box-shadow:0 0 0 3px #090806c7,0 0 18px var(--class-glow)!important;pointer-events:none!important;transition:.2s ease!important}
#creation[data-creation-step="class"] #classGrid .class-state-badge::before{content:"✓";font:900 18px Arial,sans-serif}
#creation[data-creation-step="class"] #classGrid .class-choice.selected .class-state-badge{opacity:1!important;transform:scale(1)!important}
#creation[data-creation-step="class"] #classGrid .class-role,#creation[data-creation-step="class"] #classGrid .class-cover,#creation[data-creation-step="class"] #classGrid .class-emblem,#creation[data-creation-step="class"] #classGrid .class-weapon-preview,#creation[data-creation-step="class"] #classGrid .class-meta,#creation[data-creation-step="class"] #classGrid .class-background-mark,#creation[data-creation-step="class"] #classGrid .class-aura,#creation[data-creation-step="class"] #classGrid .class-stage-light,#creation[data-creation-step="class"] #classGrid .class-pedestal{display:none!important}
#creation[data-creation-step="class"] #classPortal3dPreview{position:absolute;z-index:6;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;overflow:hidden}
#creation[data-creation-step="class"] #classPortal3dPreview.ready{opacity:1;filter:drop-shadow(0 15px 9px #000)}
#creation[data-creation-step="class"] .class-portal-3d-canvas{display:block;width:100%!important;height:100%!important}
#creation[data-creation-step="class"] .appearance-customizer.creation-internal-settings{display:grid!important;grid-template-columns:minmax(230px,.9fr) minmax(480px,1.6fr) auto!important;align-items:center!important;gap:12px!important;margin:8px 0 0!important;padding:10px 12px!important;border:1px solid #71552e!important;border-radius:5px!important;background:linear-gradient(110deg,#17130d,#08090b 52%,#161008)!important;box-shadow:inset 0 0 28px #0009!important}
#creation[data-creation-step="class"] .appearance-heading{display:flex;align-items:center;gap:10px;text-align:left}
#creation[data-creation-step="class"] .appearance-heading>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid #dfb65f;color:#ffe6a1;background:radial-gradient(circle,#75501b,#160e07);box-shadow:0 0 16px #c58c3555}
#creation[data-creation-step="class"] .appearance-heading small{display:block;color:#8f7d5f;font:800 8px Arial;letter-spacing:.18em}
#creation[data-creation-step="class"] .appearance-heading h3{margin:2px 0!important;color:#f4d993!important;font:900 15px Georgia,serif!important;letter-spacing:.08em!important}
#creation[data-creation-step="class"] .appearance-heading p{margin:0!important;color:#9e9687!important;font-size:9px!important;line-height:1.25!important}
#creation[data-creation-step="class"] .appearance-grid{display:grid!important;grid-template-columns:repeat(3,minmax(118px,1fr))!important;gap:7px!important}
#creation[data-creation-step="class"] .appearance-grid label{display:grid!important;grid-template-columns:1fr 38px!important;align-items:center!important;gap:6px!important;min-height:44px!important;padding:5px 6px 5px 9px!important;border:1px solid #4e412d!important;border-radius:4px!important;background:#090a0c!important;color:#dac591!important;font:900 8px Arial,sans-serif!important;letter-spacing:.08em!important;cursor:pointer!important}
#creation[data-creation-step="class"] .appearance-grid input[type="color"]{width:38px!important;height:32px!important;padding:2px!important;border:1px solid #a67e3e!important;border-radius:3px!important;background:#050505!important;cursor:pointer!important}
#creation[data-creation-step="class"] .appearance-actions{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;margin:0!important}
#creation[data-creation-step="class"] .appearance-actions button{min-height:30px!important;margin:0!important;padding:5px 10px!important;border:1px solid #8b6b38!important;border-radius:3px!important;background:linear-gradient(#33291b,#11100e)!important;color:#e3cd9b!important;font:900 8px Arial,sans-serif!important;letter-spacing:.06em!important;white-space:nowrap!important}
#creation[data-creation-step="class"] #selectedClassFiles{display:none!important}
#creation[data-creation-step="class"] .creation-next-button{margin:8px auto 0!important;min-height:44px!important}
@media(max-width:1050px){#creation[data-creation-step="class"] .appearance-customizer.creation-internal-settings{grid-template-columns:1fr!important}#creation[data-creation-step="class"] .appearance-heading{justify-content:center;text-align:center}#creation[data-creation-step="class"] .appearance-actions{grid-template-columns:1fr 1fr!important}}
@media(max-width:900px){#creation[data-creation-step="class"] .creation-card.creation-wizard{width:99vw!important;padding:5px 6px 9px!important}#creation[data-creation-step="class"] .creation-progress{display:none!important}#creation[data-creation-step="class"] .creation-identity-row{grid-template-columns:1fr 1.15fr!important;margin-bottom:4px!important;gap:5px!important}#creation[data-creation-step="class"] #heroName{height:32px!important}#creation[data-creation-step="class"] .creation-gender-block .gender-selector span{min-height:32px!important;padding:7px!important}#creation[data-creation-step="class"] .appearance-customizer.creation-internal-settings{padding:7px!important}#creation[data-creation-step="class"] .appearance-heading p{display:none!important}#creation[data-creation-step="class"] .creation-next-button{width:min(420px,92%)!important;min-height:38px!important;margin:5px auto 0!important;font-size:9px!important}}
@media(max-width:620px) and (orientation:portrait){#creation[data-creation-step="class"] #classGrid{min-width:780px!important}#creation[data-creation-step="class"] .class-list-column{overflow-x:auto!important;padding-bottom:5px!important}#creation[data-creation-step="class"] .appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.appearance-customizer.creation-internal-settings{max-height:46dvh!important;overflow:auto!important}}
@media(prefers-reduced-motion:reduce){#creation[data-creation-step="class"] *{transition:none!important}}