body.create-active{overflow:hidden !important;}

body #createScreen{
  position:fixed !important;
  inset:0 !important;
  z-index:210000 !important;
  width:100vw !important;
  height:100dvh !important;
  overflow:auto !important;
  color:#c9b58c !important;
  background:
    radial-gradient(circle at 50% 34%,rgba(51,68,42,.2),transparent 34%),
    linear-gradient(145deg,#07100d 0%,#020605 52%,#10110b 100%) !important;
}

body #createScreen .bgWrap,
body #createScreen .bg{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  min-height:660px !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
}

body #createScreen .bg > img{display:none !important;}

body #createScreen #createPanel{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:660px !important;
  margin:0 !important;
  padding:6px !important;
  box-sizing:border-box !important;
}

body #createScreen #createPanel .panel[data-character-create-v503="1"]{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:648px !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:108px minmax(0,1fr) !important;
  overflow:hidden !important;
  border:1px solid #7f5d28 !important;
  border-radius:4px !important;
  background:
    linear-gradient(rgba(255,255,255,.012),rgba(255,255,255,0)),
    repeating-linear-gradient(90deg,rgba(103,79,38,.022) 0 1px,transparent 1px 54px),
    linear-gradient(135deg,rgba(8,17,14,.98),rgba(3,8,6,.99) 54%,rgba(14,15,10,.98)) !important;
  box-shadow:inset 0 0 0 4px #020504,inset 0 0 0 5px rgba(151,106,42,.34),inset 0 0 60px #000,0 0 28px #000 !important;
}

body #createScreen #createPanel .panel[data-character-create-v503="1"]::before{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  z-index:5 !important;
  border:1px solid rgba(133,94,38,.18) !important;
  border-radius:2px !important;
  pointer-events:none !important;
}

body #createScreen #createPanel .panel[data-character-create-v503="1"]::after{display:none !important;}

body #createScreen .createV503Header{
  position:relative !important;
  z-index:6 !important;
  display:grid !important;
  place-items:center !important;
  min-width:0 !important;
  padding:13px 86px 12px !important;
  border-bottom:1px solid rgba(127,91,34,.5) !important;
  background:linear-gradient(180deg,rgba(13,20,16,.9),rgba(6,11,9,.76)) !important;
  box-shadow:0 7px 22px rgba(0,0,0,.35) !important;
}

body #createScreen .createV503Heading{text-align:center !important;}
body #createScreen .createV503Heading h1{
  position:relative !important;
  margin:0 !important;
  color:#dfbd7b !important;
  font-family:"Cinzel","Trajan Pro",Georgia,serif !important;
  font-size:clamp(29px,3vw,48px) !important;
  font-weight:500 !important;
  line-height:1.04 !important;
  letter-spacing:.035em !important;
  white-space:nowrap !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 1px #000,0 0 12px rgba(190,133,51,.18) !important;
}
body #createScreen .createV503Heading h1::before,
body #createScreen .createV503Heading h1::after{
  content:"◆ ─" !important;
  display:inline-block !important;
  margin:0 22px !important;
  color:#8f672c !important;
  font-size:13px !important;
  vertical-align:middle !important;
  letter-spacing:0 !important;
}
body #createScreen .createV503Heading h1::after{content:"─ ◆" !important;}
body #createScreen .createV503Heading p{
  margin:7px 0 0 !important;
  color:#a99673 !important;
  font-family:Georgia,serif !important;
  font-size:15px !important;
}

body #createScreen .createScreenClose{
  position:absolute !important;
  top:16px !important;
  right:21px !important;
  left:auto !important;
  z-index:7 !important;
  width:58px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 0 5px !important;
  border:1px solid #a4742d !important;
  border-radius:2px !important;
  color:#f4cf7d !important;
  background:linear-gradient(145deg,#6b281a,#2b100c) !important;
  box-shadow:inset 0 0 0 3px #1c0b08,inset 0 0 0 4px rgba(205,140,52,.35),0 3px 9px #000 !important;
  font-family:Georgia,serif !important;
  font-size:46px !important;
  line-height:1 !important;
  text-shadow:0 2px 2px #000 !important;
  cursor:pointer !important;
}
body #createScreen .createScreenClose:hover{filter:brightness(1.2) !important;}

body #createScreen .createV503Main{
  position:relative !important;
  z-index:2 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(350px,32%) !important;
  gap:14px !important;
  padding:14px 18px 18px !important;
  overflow:hidden !important;
}

body #createScreen .createClassPanel,
body #createScreen .createAvatarPanel,
body #createScreen .createNamePanel{
  min-width:0 !important;
  border:1px solid rgba(125,90,37,.58) !important;
  border-radius:3px !important;
  background:linear-gradient(145deg,rgba(6,13,11,.94),rgba(2,7,5,.96)) !important;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 24px rgba(0,0,0,.68) !important;
}

body #createScreen .createClassPanel{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:58px 78px minmax(0,1fr) !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

body #createScreen .createClassPanel > h2,
body #createScreen .createAvatarPanel > h2,
body #createScreen .createNamePanel > h2{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-bottom:1px solid rgba(127,91,34,.46) !important;
  color:#d1a659 !important;
  font-family:"Cinzel","Trajan Pro",Georgia,serif !important;
  font-size:17px !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
body #createScreen .createClassPanel > h2 span,
body #createScreen .createAvatarPanel > h2 span,
body #createScreen .createNamePanel > h2 span{margin-right:7px !important;color:#b2762d !important;}

body #createScreen .createClassTabsMount{
  min-width:0 !important;
  padding:6px !important;
  border-bottom:1px solid rgba(119,83,34,.42) !important;
}
body #createScreen #createClassRow{
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:5px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}
body #createScreen #createClassRow .classPickBtn{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  height:64px !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  padding:5px 13px !important;
  border:1px solid rgba(107,78,36,.58) !important;
  border-radius:2px !important;
  background:linear-gradient(180deg,rgba(18,23,19,.88),rgba(5,10,8,.96)) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  cursor:pointer !important;
}
body #createScreen #createClassRow .classPickBtn img{
  position:relative !important;
  inset:auto !important;
  width:44px !important;
  height:44px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 2px 3px #000) !important;
  transform:none !important;
}
body #createScreen #createClassRow .classPickBtn::after{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  padding:0 !important;
  color:#bba77e !important;
  background:none !important;
  font-family:"Cinzel","Trajan Pro",Georgia,serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.03em !important;
  text-align:left !important;
  text-transform:uppercase !important;
}
body #createScreen #createClassRow .classPickBtn[data-pclass="warrior"]::after{content:"Bojovník" !important;}
body #createScreen #createClassRow .classPickBtn[data-pclass="archer"]::after{content:"Lučištník" !important;}
body #createScreen #createClassRow .classPickBtn[data-pclass="mage"]::after{content:"Mág" !important;}
body #createScreen #createClassRow .classPickBtn:hover{border-color:#9b6d2e !important;filter:brightness(1.08) !important;}
body #createScreen #createClassRow .classPickBtn.selected,
body #createScreen #createClassRow .classPickBtn.active{
  border-color:#c28932 !important;
  background:linear-gradient(180deg,rgba(76,52,23,.76),rgba(18,14,8,.96)) !important;
  box-shadow:inset 0 0 0 2px #1f1609,0 0 10px rgba(201,139,48,.28) !important;
}
body #createScreen #createClassRow .classPickBtn.selected::after,
body #createScreen #createClassRow .classPickBtn.active::after{color:#dfbd75 !important;}
body #createScreen #createClassRow .classPickBtn[data-pclass="archer"].selected::after{color:#8cc75d !important;}
body #createScreen #createClassRow .classPickBtn[data-pclass="mage"].selected::after{color:#c687db !important;}

/* The long-lived creation skin has a more specific legacy card selector. */
body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-width:0 !important;
  height:64px !important;
  min-height:0 !important;
  max-height:64px !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  align-items:center !important;
  justify-items:stretch !important;
  gap:8px !important;
  padding:5px 13px !important;
  overflow:hidden !important;
  border-radius:2px !important;
  transform:none !important;
}
body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn img{
  position:relative !important;
  inset:auto !important;
  width:44px !important;
  height:44px !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:44px !important;
  max-height:44px !important;
  margin:0 !important;
  transform:none !important;
}
body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn::after{
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  transform:none !important;
}

body #createScreen .createHeroStage{
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:minmax(210px,1fr) auto 82px !important;
  background:rgba(0,0,0,.2) !important;
}
body #createScreen .createHeroVisual{
  position:relative !important;
  min-height:0 !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(124,88,35,.46) !important;
  background:
    radial-gradient(circle at 50% 31%,rgba(136,95,40,.15),transparent 37%),
    linear-gradient(180deg,#17201b,#070b09) !important;
}
body #createScreen .createHeroVisual::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,rgba(2,6,4,.78),transparent 26% 74%,rgba(2,6,4,.78)),linear-gradient(180deg,transparent 50%,rgba(2,6,4,.88)) !important;
}
body #createScreen .createHeroPortraitMount{position:absolute !important;inset:0 !important;}
body #createScreen #createAvatarMain.createHeroPortrait{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center 24% !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:saturate(.72) contrast(1.08) brightness(.76) !important;
  transform:none !important;
}
body #createScreen .createHeroClassCrest{
  position:absolute !important;
  top:15px !important;
  left:16px !important;
  z-index:3 !important;
  width:68px !important;
  height:68px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(177,126,49,.72) !important;
  background:rgba(4,8,6,.76) !important;
  box-shadow:inset 0 0 14px #000,0 3px 9px #000 !important;
}
body #createScreen .createHeroClassCrest img{width:58px !important;height:58px !important;object-fit:contain !important;filter:drop-shadow(0 2px 4px #000) !important;}
body #createScreen .createHeroClassLabel{
  position:absolute !important;
  left:100px !important;
  bottom:18px !important;
  z-index:3 !important;
  color:#e1b868 !important;
  font-family:"Cinzel","Trajan Pro",Georgia,serif !important;
  font-size:25px !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  text-shadow:0 2px 3px #000 !important;
}
body #createScreen .createHeroInfoMount{min-height:0 !important;}
body #createScreen .oaiClassInfo{
  width:100% !important;
  min-height:86px !important;
  margin:0 !important;
  padding:12px 18px !important;
  border:0 !important;
  border-bottom:1px solid rgba(117,82,33,.42) !important;
  border-radius:0 !important;
  background:linear-gradient(90deg,rgba(29,23,13,.72),rgba(4,9,7,.9)) !important;
  box-shadow:none !important;
  text-align:left !important;
}
body #createScreen .oaiClassName{display:none !important;}
body #createScreen .oaiClassTag{margin:0 0 5px !important;color:#d1ae69 !important;font-family:Georgia,serif !important;font-size:14px !important;}
body #createScreen .oaiClassInfo p{margin:0 !important;color:#a99673 !important;font-family:Georgia,serif !important;font-size:13px !important;line-height:1.35 !important;}
body #createScreen .oaiClassSpecial{margin-top:6px !important;padding:0 !important;border:0 !important;color:#8f7d5f !important;background:none !important;font-size:11px !important;}
body #createScreen .oaiClassLine{display:none !important;}

body #createScreen .createHeroTraits{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px 18px !important;
  padding:10px 18px !important;
  background:rgba(1,5,4,.75) !important;
}
body #createScreen .createHeroTrait{display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;align-items:center !important;gap:10px !important;}
body #createScreen .createHeroTrait span{color:#b6a27a !important;font-family:Georgia,serif !important;font-size:12px !important;text-transform:uppercase !important;}
body #createScreen .createHeroTrait b{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:3px !important;}
body #createScreen .createHeroTrait i{height:9px !important;border:1px solid #5a4726 !important;background:#080b09 !important;box-shadow:inset 0 0 3px #000 !important;}
body #createScreen .createHeroTrait i.filled{background:linear-gradient(180deg,#d99a31,#815111) !important;box-shadow:inset 0 0 2px #ffe09a !important;}
body #createScreen .createHeroTrait.magic i.filled,
body #createScreen .createHeroTrait.difficulty i.filled{background:linear-gradient(180deg,#a565c5,#522b6c) !important;}
body #createScreen .createHeroTrait.agility i.filled{background:linear-gradient(180deg,#83b54b,#3f6622) !important;}

body #createScreen .createSetupColumn{
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  gap:14px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
}
body #createScreen .createAvatarPanel{
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:58px 48px minmax(0,1fr) !important;
  overflow:hidden !important;
}
body #createScreen .createAvatarTabsMount{padding:6px 10px 0 !important;}
body #createScreen #avatarPickerTabs{
  width:100% !important;
  height:42px !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
}
body #createScreen .avatarPickerTab{
  width:100% !important;
  min-width:0 !important;
  height:38px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 10px !important;
  border:1px solid rgba(105,76,35,.6) !important;
  border-radius:2px !important;
  color:#8e826b !important;
  background:rgba(4,9,7,.88) !important;
  box-shadow:none !important;
  font-family:Georgia,serif !important;
  font-size:12px !important;
  text-transform:uppercase !important;
}
body #createScreen .avatarPickerTab:first-child::after{content:"Muži" !important;}
body #createScreen .avatarPickerTab:nth-child(2)::after{content:"Ženy" !important;}
body #createScreen .avatarPickerTab.active{border-color:#aa7931 !important;color:#d0ac68 !important;background:rgba(56,39,18,.7) !important;}
body #createScreen .avatarGenderIcon{width:18px !important;height:18px !important;}
body #createScreen .createAvatarGridMount{min-height:0 !important;padding:10px !important;overflow:auto !important;scrollbar-color:#795729 #080c0a !important;}
body #createScreen #avatarPickerGrid{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
body #createScreen .avatarPickerGroup{display:none !important;}
body #createScreen .avatarPickerGroup.active{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:7px !important;
}
body #createScreen .avatarModalPick{
  position:relative !important;
  width:100% !important;
  min-width:0 !important;
  aspect-ratio:1 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #5d4728 !important;
  border-radius:2px !important;
  background:#070b09 !important;
  box-shadow:inset 0 0 8px #000 !important;
  cursor:pointer !important;
}
body #createScreen .avatarModalPick:hover{border-color:#a97832 !important;filter:brightness(1.1) !important;}
body #createScreen .avatarModalPick.selected{border-color:#e1a947 !important;box-shadow:inset 0 0 0 2px #3d2a11,0 0 9px rgba(224,164,63,.46) !important;}
body #createScreen .avatarModalPick img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 18% !important;filter:saturate(.78) contrast(1.04) !important;}
body #createScreen .avatarModalPick.avatarMissing{display:none !important;}
body #createScreen .avatarMissingText{display:none !important;}

body #createScreen .createNamePanel{padding:0 12px 12px !important;}
body #createScreen .createNamePanel > h2{height:52px !important;margin:0 -12px 11px !important;}
body #createScreen .createNameRow{display:grid !important;grid-template-columns:minmax(0,1fr) 48px !important;gap:7px !important;}
body #createScreen .createNameInputMount{min-width:0 !important;}
body #createScreen #nameInput{
  width:100% !important;
  height:48px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid #6d512b !important;
  border-radius:2px !important;
  color:#d7c29a !important;
  background:rgba(2,7,5,.88) !important;
  box-shadow:inset 0 0 11px #000 !important;
  font-family:Georgia,serif !important;
  font-size:16px !important;
}
body #createScreen #nameInput:focus{outline:none !important;border-color:#bc8434 !important;box-shadow:inset 0 0 11px #000,0 0 7px rgba(188,132,52,.26) !important;}
body #createScreen .createNameRandom{
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:1px solid #8f6328 !important;
  border-radius:2px !important;
  color:#d9ad5c !important;
  background:linear-gradient(180deg,#302514,#100e09) !important;
  font-size:27px !important;
  cursor:pointer !important;
}
body #createScreen .createNameRandom:hover{filter:brightness(1.16) !important;}
body #createScreen .createStartMount{margin-top:9px !important;}
body #createScreen #btnStart.createCharacterSubmit{
  width:100% !important;
  height:56px !important;
  margin:0 !important;
  padding:0 18px !important;
  border:1px solid #9a702e !important;
  border-radius:2px !important;
  color:#e2c58d !important;
  background:linear-gradient(180deg,#173b12,#092208 58%,#061506) !important;
  box-shadow:inset 0 0 0 3px #030a03,inset 0 0 0 4px rgba(143,104,42,.4),inset 0 0 18px rgba(66,113,35,.28),0 3px 9px #000 !important;
  font-family:"Cinzel","Trajan Pro",Georgia,serif !important;
  font-size:20px !important;
  font-weight:600 !important;
  letter-spacing:.025em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
body #createScreen #btnStart.createCharacterSubmit:hover{filter:brightness(1.16) !important;}

body #avatarPickerModal{display:none !important;}

@media(max-width:980px){
  body.create-active{overflow:auto !important;}
  body #createScreen .bgWrap,
  body #createScreen .bg,
  body #createScreen #createPanel{height:auto !important;min-height:100% !important;}
  body #createScreen #createPanel .panel[data-character-create-v503="1"]{height:auto !important;min-height:100dvh !important;grid-template-rows:96px auto !important;overflow:visible !important;}
  body #createScreen .createV503Main{grid-template-columns:1fr !important;overflow:visible !important;}
  body #createScreen .createClassPanel{min-height:620px !important;}
  body #createScreen .createSetupColumn{grid-template-columns:1fr !important;}
  body #createScreen .createAvatarPanel{min-height:410px !important;}
}

@media(max-width:620px){
  body #createScreen #createPanel{padding:0 !important;}
  body #createScreen #createPanel .panel[data-character-create-v503="1"]{border-radius:0 !important;grid-template-rows:88px auto !important;}
  body #createScreen .createV503Header{padding:12px 65px 10px 15px !important;place-items:start !important;}
  body #createScreen .createV503Heading{text-align:left !important;}
  body #createScreen .createV503Heading h1{font-size:25px !important;}
  body #createScreen .createV503Heading h1::before,
  body #createScreen .createV503Heading h1::after{display:none !important;}
  body #createScreen .createV503Heading p{font-size:12px !important;}
  body #createScreen .createScreenClose{top:14px !important;right:13px !important;width:48px !important;height:48px !important;font-size:38px !important;}
  body #createScreen .createV503Main{padding:10px !important;gap:10px !important;}
  body #createScreen .createClassPanel{grid-template-rows:50px auto minmax(0,1fr) !important;min-height:650px !important;}
  body #createScreen #createClassRow{grid-template-columns:1fr !important;}
  body #createScreen #createClassRow .classPickBtn{height:54px !important;}
  body #createScreen .createHeroStage{grid-template-rows:260px auto 120px !important;}
  body #createScreen .createHeroTraits{grid-template-columns:1fr !important;}
  body #createScreen .avatarPickerGroup.active{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}

/* Character creation composition refinement v505 */
body #createScreen #createPanel{
  padding:8px !important;
}

body #createScreen #createPanel .panel[data-character-create-v503="1"]{
  width:min(1540px,100%) !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  grid-template-rows:96px minmax(0,1fr) !important;
  border-color:#775729 !important;
  background:
    radial-gradient(circle at 46% 30%,rgba(64,82,52,.11),transparent 35%),
    linear-gradient(135deg,rgba(7,15,12,.99),rgba(2,7,5,.995) 58%,rgba(11,13,9,.99)) !important;
}

body #createScreen .createV503Header{
  padding:11px 82px 10px !important;
}

body #createScreen .createV503Heading h1{
  font-size:clamp(31px,2.75vw,43px) !important;
  letter-spacing:.055em !important;
}

body #createScreen .createV503Heading p{
  margin-top:5px !important;
  font-size:13px !important;
}

body #createScreen .createScreenClose{
  top:14px !important;
  right:17px !important;
  width:55px !important;
  height:55px !important;
}

body #createScreen .createV503Main{
  grid-template-columns:minmax(0,1fr) clamp(410px,27vw,480px) !important;
  gap:14px !important;
  padding:14px 16px 16px !important;
}

body #createScreen .createClassPanel{
  grid-template-rows:54px 72px minmax(0,1fr) !important;
}

body #createScreen .createClassPanel > h2,
body #createScreen .createAvatarPanel > h2,
body #createScreen .createNamePanel > h2{
  font-size:16px !important;
}

body #createScreen .createClassTabsMount{
  padding:5px !important;
}

body #createScreen #createClassRow .classPickBtn,
body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn{
  height:61px !important;
  max-height:61px !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  padding:4px 12px !important;
}

body #createScreen #createClassRow .classPickBtn img,
body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn img{
  width:39px !important;
  height:39px !important;
  max-width:39px !important;
  max-height:39px !important;
}

body #createScreen .createHeroStage{
  grid-template-rows:minmax(260px,1fr) auto 82px !important;
}

body #createScreen .createHeroVisual{
  background:
    radial-gradient(circle at 50% 38%,rgba(106,78,37,.08),transparent 36%),
    linear-gradient(90deg,rgba(2,7,5,.84),rgba(3,8,6,.08) 27% 73%,rgba(2,7,5,.84)),
    linear-gradient(180deg,rgba(4,9,7,.2),rgba(2,6,4,.82)),
    url("../img/elf.png") center 48%/cover no-repeat !important;
}

body #createScreen .createHeroVisual::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 50% 44%,transparent 0 28%,rgba(2,6,4,.16) 54%,rgba(2,6,4,.76) 100%) !important;
}

body #createScreen .createHeroVisual::after{
  z-index:3 !important;
  background:
    linear-gradient(90deg,rgba(2,6,4,.9),transparent 17% 83%,rgba(2,6,4,.9)),
    linear-gradient(180deg,rgba(2,6,4,.05) 48%,rgba(2,6,4,.94) 100%) !important;
}

body #createScreen .createHeroPortraitMount{
  z-index:2 !important;
}

body #createScreen #createAvatarMain.createHeroPortrait{
  top:0 !important;
  right:auto !important;
  bottom:0 !important;
  left:50% !important;
  width:min(62%,660px) !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  opacity:.94 !important;
  filter:saturate(.78) contrast(1.07) brightness(.88) drop-shadow(0 12px 18px rgba(0,0,0,.82)) !important;
  transform:translateX(-50%) scale(1.04) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%) !important;
}

body #createScreen .createHeroClassCrest{
  top:14px !important;
  left:15px !important;
  width:62px !important;
  height:62px !important;
}

body #createScreen .createHeroClassCrest img{
  width:52px !important;
  height:52px !important;
}

body #createScreen .createHeroClassLabel{
  left:82px !important;
  bottom:17px !important;
  z-index:4 !important;
  font-size:24px !important;
}

body #createScreen .oaiClassInfo{
  min-height:76px !important;
  padding:10px 17px !important;
  text-align:center !important;
}

body #createScreen .oaiClassTag{
  margin-bottom:4px !important;
  font-size:13px !important;
}

body #createScreen .oaiClassInfo p{
  font-size:12px !important;
}

body #createScreen .oaiClassSpecial{
  margin-top:4px !important;
  font-size:10px !important;
}

body #createScreen .createHeroTraits{
  gap:7px 20px !important;
  padding:10px 17px !important;
}

body #createScreen .createSetupColumn{
  grid-template-rows:minmax(0,1fr) auto !important;
  gap:12px !important;
}

body #createScreen .createAvatarPanel{
  grid-template-rows:54px 50px minmax(0,1fr) !important;
}

body #createScreen .createAvatarGridMount{
  padding:9px !important;
}

body #createScreen .avatarPickerGroup.active{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
}

body #createScreen .avatarModalPick{
  aspect-ratio:1.02 !important;
}

body #createScreen .avatarModalPick img{
  object-position:center 15% !important;
  filter:saturate(.86) contrast(1.06) brightness(.92) !important;
}

body #createScreen .createNamePanel{
  padding:0 11px 11px !important;
}

body #createScreen .createNamePanel > h2{
  height:48px !important;
  margin:0 -11px 10px !important;
}

body #createScreen #nameInput,
body #createScreen .createNameRandom{
  height:45px !important;
}

body #createScreen .createNameRandom{
  width:45px !important;
}

body #createScreen .createNameRow{
  grid-template-columns:minmax(0,1fr) 45px !important;
}

body #createScreen #btnStart.createCharacterSubmit{
  height:52px !important;
  font-size:18px !important;
}

@media(max-width:1180px) and (min-width:981px){
  body #createScreen .createV503Main{
    grid-template-columns:minmax(0,1fr) 390px !important;
  }
  body #createScreen #createAvatarMain.createHeroPortrait{
    width:min(72%,600px) !important;
  }
}

@media(max-width:980px){
  body #createScreen #createPanel .panel[data-character-create-v503="1"]{
    width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
  }
  body #createScreen .createV503Main{grid-template-columns:1fr !important;}
  body #createScreen #createAvatarMain.createHeroPortrait{width:min(78%,620px) !important;}
}

@media(max-height:760px) and (min-width:981px){
  body #createScreen #createPanel .panel[data-character-create-v503="1"]{grid-template-rows:82px minmax(0,1fr) !important;}
  body #createScreen .createV503Heading h1{font-size:33px !important;}
  body #createScreen .createV503Heading p{font-size:11px !important;}
  body #createScreen .createScreenClose{top:10px !important;width:50px !important;height:50px !important;}
  body #createScreen .createV503Main{padding:10px 13px 13px !important;}
  body #createScreen .createClassPanel{grid-template-rows:48px 65px minmax(0,1fr) !important;}
  body #createScreen #createClassRow .classPickBtn,
  body #createScreen #createPanel .panel[data-character-create-v503="1"] #createClassRow .classPickBtn{height:54px !important;max-height:54px !important;}
  body #createScreen .createAvatarPanel{grid-template-rows:48px 44px minmax(0,1fr) !important;}
  body #createScreen .createAvatarTabsMount{padding-top:3px !important;}
  body #createScreen .avatarPickerTab{height:35px !important;}
  body #createScreen .createHeroStage{grid-template-rows:minmax(210px,1fr) auto 70px !important;}
  body #createScreen .createHeroTraits{padding:7px 14px !important;}
  body #createScreen .createHeroTrait i{height:7px !important;}
  body #createScreen .createNamePanel > h2{height:42px !important;}
  body #createScreen #btnStart.createCharacterSubmit{height:47px !important;}
}