/* KING OF CHAOS — Character Creation Royal / MMO Layer
   Visual-only. Keeps creation IDs/classes and JS contracts untouched. */

#creation.screen{
  padding:22px!important;
  background:
    linear-gradient(90deg,rgba(3,4,7,.86) 0%,rgba(3,4,7,.48) 32%,rgba(3,4,7,.28) 58%,rgba(3,4,7,.82) 100%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.72)),
    url('../fundo.png') center/cover no-repeat fixed!important;
  overflow:auto!important;
  align-items:flex-start!important;
  scrollbar-width:thin;
  scrollbar-color:#9f7937 #100d09;
}
#creation.screen::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,210,105,.13),transparent 26%),
    radial-gradient(circle at 18% 72%,rgba(75,119,163,.12),transparent 30%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px);
  box-shadow:inset 0 0 160px #000;
}
#creation .creation-card{
  --royal-gold:#d6ab55;
  --royal-light:#ffe7a1;
  --royal-dark:#5e3f16;
  position:relative;z-index:1;
  width:min(1220px,calc(100vw - 44px))!important;
  max-height:none!important;
  margin:18px auto 36px!important;
  overflow:visible!important;
  padding:38px 38px 42px!important;
  border-radius:10px!important;
  border:1px solid #9d7a3f!important;
  background:
    linear-gradient(180deg,rgba(36,29,22,.97),rgba(11,12,15,.985)),
    radial-gradient(circle at 50% 0%,rgba(218,170,76,.12),transparent 32%)!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.82),
    0 0 0 3px rgba(38,26,13,.95),
    0 0 0 5px rgba(176,132,58,.42),
    inset 0 0 0 1px rgba(255,231,166,.16),
    inset 0 0 60px rgba(0,0,0,.5)!important;
}
#creation .creation-card::before,
#creation .creation-card::after{
  content:"♛";position:absolute;top:-22px;width:54px;height:54px;display:grid;place-items:center;
  color:#f3d37f;font:26px Georgia,serif;background:radial-gradient(circle,#4a361d,#17100a 68%);
  border:2px solid #a87b34;box-shadow:0 6px 20px #000,inset 0 0 16px #c8933c33;transform:rotate(45deg);z-index:3;
}
#creation .creation-card::before{left:-18px}
#creation .creation-card::after{right:-18px}
#creation .creation-card::before,#creation .creation-card::after{line-height:1}
#creation .creation-card h2{
  position:relative;margin:0 auto 28px!important;padding:2px 80px 18px!important;width:max-content;max-width:100%;
  color:#fff0bd!important;font:900 clamp(28px,3vw,42px)/1 Georgia,'Times New Roman',serif!important;
  letter-spacing:.10em!important;text-transform:uppercase;text-shadow:0 3px 0 #3f2d12,0 0 25px rgba(255,210,98,.24)!important;
}
#creation .creation-card h2::before{content:"✦  ESCOLHA SUA LENDA  ✦";display:block;margin-bottom:9px;color:#b89350;font:800 10px/1.2 Arial,sans-serif;letter-spacing:.30em;text-shadow:none}
#creation .creation-card h2::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#8d682e,#ffe19a,#8d682e,transparent);box-shadow:0 1px #2b1d0c}
#creation .creation-card>label:first-of-type{
  max-width:560px;margin:0 auto 20px!important;padding:12px 14px 14px!important;color:#d7c49a!important;font-weight:900!important;letter-spacing:.08em!important;
  background:linear-gradient(180deg,rgba(45,35,24,.86),rgba(19,17,15,.9));border:1px solid #6f5733;border-radius:6px;box-shadow:inset 0 0 18px #0008,0 8px 24px #0004;
}
#creation #heroName{
  margin-top:8px!important;height:48px!important;padding:0 16px!important;border:1px solid #99733a!important;border-radius:4px!important;
  color:#fff0c9!important;font:800 16px Georgia,serif!important;letter-spacing:.05em;background:linear-gradient(#0c0c0e,#17130e)!important;
  box-shadow:inset 0 3px 10px #000,0 0 0 1px #2b2115!important;outline:none!important;
}
#creation #heroName:focus{border-color:#e6bc67!important;box-shadow:inset 0 3px 10px #000,0 0 16px #c6933c44!important}
#creation .creation-card>h3{
  position:relative;margin:28px 0 14px!important;color:#f0d48f!important;font:900 15px Georgia,serif!important;letter-spacing:.12em!important;text-transform:uppercase!important;text-align:left!important;
}
#creation .creation-card>h3::after{content:"";display:inline-block;vertical-align:middle;width:min(320px,45%);height:1px;margin-left:14px;background:linear-gradient(90deg,#8f6b31,transparent)}
#creation .gender-selector{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:0 auto 24px}
#creation .gender-selector label{margin:0!important;cursor:pointer}
#creation .gender-selector input{position:absolute;opacity:0;pointer-events:none}
#creation .gender-selector span{
  min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #5c503d;border-radius:5px;
  color:#c8c0ad;font-weight:900;letter-spacing:.08em;background:linear-gradient(#27231d,#131311);box-shadow:inset 0 0 15px #0008;transition:.18s ease;
}
#creation .gender-selector input:checked+span{color:#fff0bd;border-color:#c39243;background:linear-gradient(#574224,#241a0e);box-shadow:inset 0 0 20px #d9a74b22,0 0 16px #d9a74b26}

/* Class roster */
#creation #classGrid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin:0!important;padding:5px!important;
}
#creation #classGrid .class-choice{
  position:relative!important;display:block!important;min-height:430px!important;padding:8px!important;overflow:hidden!important;border-radius:6px!important;
  border:1px solid #665232!important;background:linear-gradient(160deg,#211b15,#0a0c10 72%)!important;
  box-shadow:0 12px 28px #0008,inset 0 0 0 1px rgba(255,255,255,.035)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
#creation #classGrid .class-choice::before{content:"";position:absolute;inset:4px;z-index:1;pointer-events:none;border:1px solid rgba(204,160,79,.26);clip-path:polygon(0 0,32px 0,32px 2px,2px 2px,2px 32px,0 32px,0 100%,32px 100%,32px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 32px),0 calc(100% - 32px),0 0)}
#creation #classGrid .class-choice:hover{transform:translateY(-5px)!important;border-color:#b78b44!important;box-shadow:0 20px 38px #000b,0 0 18px #b98a3c24!important}
#creation #classGrid .class-choice.selected{transform:translateY(-6px)!important;border-color:#f2cc72!important;background:linear-gradient(160deg,#3c2b16,#0d1015 70%)!important;box-shadow:0 22px 42px #000c,0 0 0 2px #6a481b,0 0 28px #e3b24b44,inset 0 0 30px #d6a64e14!important}
#creation .class-role{top:14px!important;left:14px!important;border-radius:3px!important;border-color:#6e5b3d!important;background:#15120ed9!important;color:#d9c28d!important;letter-spacing:.13em!important}
#creation .class-state-badge{top:14px!important;right:14px!important;border-radius:3px!important;background:linear-gradient(#8c672b,#3b2810)!important;border-color:#e0b75c!important;color:#fff2bb!important;box-shadow:0 3px 12px #0009!important}
#creation .class-preview{
  height:230px!important;border-radius:3px!important;border:1px solid #3f3528!important;
  background:radial-gradient(circle at 50% 26%,rgba(79,93,118,.75),rgba(18,20,25,.95) 54%,#08090b 88%)!important;
  box-shadow:inset 0 0 55px #000d!important;
}
#creation .class-preview::after{content:"";position:absolute;left:8%;right:8%;bottom:10px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,221,139,.20),transparent 68%);filter:blur(3px)}
#creation .class-emblem{color:#e8c574!important;text-shadow:0 0 15px #d19a3c66!important}
#creation .class-body-preview{filter:drop-shadow(0 14px 14px #000)!important}
#creation .class-choice.selected .class-body-preview{filter:drop-shadow(0 18px 16px #000) drop-shadow(0 0 12px var(--class-glow,#e5bb60))!important}
#creation .class-cover{border-radius:3px!important;background:linear-gradient(180deg,transparent 25%,rgba(7,7,8,.78) 68%,rgba(7,7,8,.98))!important}
#creation .class-cover span{color:#d8b86e!important}
#creation .class-cover strong{font-family:Georgia,serif!important;color:#fff0c0!important}
#creation .class-meta{position:relative;z-index:4;padding:13px 10px 7px!important;text-align:center!important}
#creation .class-choice b{font-size:21px!important;color:#f7dd9c!important;text-transform:uppercase;letter-spacing:.08em!important;text-shadow:0 2px #000!important}
#creation .class-choice small{color:#bdb39f!important}
#creation .class-subtitle{color:#d6ae62!important;font-style:normal!important;font-weight:800!important;letter-spacing:.04em!important}
#creation .class-lore{color:#9f9b91!important;line-height:1.55!important}
#creation .class-tags span{border-radius:3px!important;border-color:#5b4c34!important;background:#15130fe8!important;color:#d8c69e!important}
#creation .class-file-tag,#creation #selectedClassFiles{display:none!important}

/* Appearance */
#creation .appearance-customizer{
  margin:28px 0!important;padding:20px!important;border-radius:6px!important;border:1px solid #685433!important;
  background:linear-gradient(145deg,rgba(35,29,21,.96),rgba(11,12,14,.98))!important;box-shadow:inset 0 0 35px #0009,0 12px 28px #0006!important;
}
#creation .appearance-customizer h3{margin:0 0 6px!important;color:#f0d48f!important;font:900 16px Georgia,serif!important;letter-spacing:.1em!important;text-transform:uppercase}
#creation .appearance-customizer p{color:#aaa18f!important}
#creation .appearance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
#creation .appearance-grid label{padding:10px!important;border-radius:4px!important;border:1px solid #4c4232!important;background:#11110f!important;color:#cdbd98!important;text-align:center!important;letter-spacing:.05em!important}
#creation .appearance-grid input[type=color]{height:42px!important;border:1px solid #74582d!important;border-radius:2px!important;background:#080808!important}
#creation .appearance-actions{justify-content:center!important}
#creation .appearance-actions button{min-height:42px;border-radius:4px!important}

/* Blessings / powers */
#creation #blessingGrid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;
}
#creation #blessingGrid .choice{
  position:relative;min-height:84px!important;padding:12px 14px!important;border-radius:5px!important;border:1px solid #554832!important;
  background:linear-gradient(135deg,#211d17,#0f1012)!important;box-shadow:inset 0 0 20px #0008!important;transition:.16s ease;
}
#creation #blessingGrid .choice::after{content:"BÊNÇÃO";position:absolute;right:8px;top:6px;font:800 8px Arial,sans-serif;letter-spacing:.15em;color:#6e624f}
#creation #blessingGrid .choice:hover{transform:translateY(-2px);border-color:#9d773a!important}
#creation #blessingGrid .choice.selected{border-color:#e4b85e!important;background:linear-gradient(135deg,#4a3519,#141310)!important;box-shadow:0 0 18px #dca64927,inset 0 0 22px #e6b95a10!important}
#creation #blessingGrid .choice img{width:52px!important;height:52px!important;padding:5px;border-radius:50%;border:1px solid #8a6b39;background:radial-gradient(circle,#30291d,#0c0c0d);filter:drop-shadow(0 0 8px #d8ab5130)}
#creation #blessingGrid .choice b{color:#ead59f!important;font-family:Georgia,serif!important;letter-spacing:.05em}
#creation #blessingGrid .choice small{color:#9f9a8f!important}
#creation #beginGame{
  position:relative;display:block;width:min(520px,100%);min-height:58px;margin:30px auto 0!important;border-radius:4px!important;
  border:1px solid #e0b75b!important;color:#fff4c8!important;font:900 16px Georgia,serif!important;letter-spacing:.14em!important;text-shadow:0 2px #402b0e!important;
  background:linear-gradient(180deg,#ad7c31 0%,#694719 48%,#34220d 52%,#5d3d14 100%)!important;
  box-shadow:0 8px 20px #000a,inset 0 1px #ffe399,inset 0 -1px #1c1005,0 0 20px #c9943930!important;
}
#creation #beginGame::before,#creation #beginGame::after{content:"◆";margin:0 13px;color:#ffe29b}
#creation #beginGame:hover{filter:brightness(1.14)!important;box-shadow:0 10px 25px #000b,inset 0 1px #fff0b8,0 0 26px #e1b15255!important}
#creation #beginGame:active{transform:translateY(1px)}

@media (max-width:980px){
  #creation .creation-card{width:calc(100vw - 24px)!important;padding:28px 22px 34px!important}
  #creation #classGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #creation .appearance-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #creation #blessingGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  #creation.screen{padding:7px!important;background-position:center!important}
  #creation .creation-card{width:calc(100vw - 12px)!important;margin:6px auto 20px!important;padding:22px 10px 28px!important;border-radius:6px!important}
  #creation .creation-card::before,#creation .creation-card::after{display:none}
  #creation .creation-card h2{padding:0 5px 14px!important;font-size:25px!important;letter-spacing:.05em!important}
  #creation .creation-card h2::before{font-size:8px;letter-spacing:.18em}
  #creation .creation-card>h3{text-align:center!important;margin-top:23px!important}
  #creation .creation-card>h3::after{display:none}
  #creation #classGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:0!important}
  #creation #classGrid .class-choice{min-height:305px!important;padding:5px!important}
  #creation .class-preview{height:155px!important}
  #creation .class-role{top:9px!important;left:8px!important;font-size:7px!important;padding:4px 5px!important;max-width:64px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #creation .class-state-badge{top:9px!important;right:8px!important;font-size:7px!important;padding:4px 5px!important}
  #creation .class-meta{padding:9px 4px 3px!important}
  #creation .class-choice b{font-size:14px!important;letter-spacing:.03em!important}
  #creation .class-choice small{font-size:9px!important;line-height:1.3!important}
  #creation .class-subtitle{font-size:8px!important}
  #creation .class-lore{display:none!important}
  #creation .class-tags{gap:3px!important;margin-top:6px!important}
  #creation .class-tags span{padding:3px 4px!important;font-size:7px!important}
  #creation .class-cover{display:none!important}
  #creation .appearance-customizer{padding:14px 9px!important}
  #creation .appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #creation .appearance-grid label:last-child{grid-column:1/-1}
  #creation #blessingGrid{grid-template-columns:1fr!important}
  #creation #blessingGrid .choice{min-height:70px!important}
  #creation .gender-selector{gap:6px!important}
  #creation .gender-selector span{font-size:11px!important}
  #creation #beginGame{min-height:54px;font-size:13px!important;letter-spacing:.08em!important}
}
@media (prefers-reduced-motion:reduce){#creation *,#creation *::before,#creation *::after{animation:none!important;transition:none!important}}