/* Guild banner creator v313 */
.oaiGuildBanner{
  --gb-primary:#741f29;
  --gb-metal:#c79a3b;
  --gb-accent:#f0d99a;
  --gb-size:230px;
  position:relative;
  display:block;
  width:var(--gb-size);
  height:var(--gb-size);
  isolation:isolate;
  flex:0 0 auto;
}

.oaiGuildBannerGlow{
  position:absolute;
  inset:16%;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--gb-primary) 60%, transparent), transparent 72%);
  filter:blur(13px);
  opacity:.48;
}

.oaiGuildBannerField{
  position:absolute;
  z-index:1;
  left:21%;
  top:17%;
  width:58%;
  height:66%;
  overflow:hidden;
  background-color:var(--gb-primary);
  background-image:
    radial-gradient(circle at 34% 25%, rgba(255,255,255,.1), transparent 35%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.035) 2px 4px),
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 42%, rgba(0,0,0,.66));
  box-shadow:inset 0 0 28px rgba(0,0,0,.78), inset 0 0 0 2px rgba(255,224,154,.13);
}

.oaiGuildBannerField::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/backround.png") center/220px 220px;
  mix-blend-mode:soft-light;
  opacity:.24;
}

.oaiGuildBannerField::after{
  content:"";
  position:absolute;
  inset:5%;
  border:1px solid rgba(255,222,155,.13);
  box-shadow:inset 0 0 16px rgba(0,0,0,.42);
}

.oaiGuildBanner[data-gb-frame="round"] .oaiGuildBannerField{
  left:20%; top:20%; width:60%; height:60%; border-radius:50%;
}
.oaiGuildBanner[data-gb-frame="kite"] .oaiGuildBannerField{
  clip-path:polygon(14% 8%, 86% 8%, 91% 50%, 73% 82%, 50% 98%, 27% 82%, 9% 50%);
}
.oaiGuildBanner[data-gb-frame="tower"] .oaiGuildBannerField{
  left:20%; top:16%; width:60%; height:67%;
  clip-path:polygon(10% 6%, 90% 6%, 91% 57%, 77% 84%, 50% 98%, 23% 84%, 9% 57%);
}
.oaiGuildBanner[data-gb-frame="hex"] .oaiGuildBannerField{
  left:20%; top:21%; width:60%; height:58%;
  clip-path:polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%);
}

.oaiGuildBannerLayer{
  position:absolute;
  z-index:3;
  inset:7%;
  display:block;
  background:none;
  -webkit-mask:none;
  mask:none;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.82));
  pointer-events:none;
}

.oaiGuildBannerLayerSvg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.oaiGuildBannerLayerDetail{
  opacity:.82;
  mix-blend-mode:luminosity;
  filter:contrast(1.16);
}

.oaiGuildBannerOrnament{
  z-index:2;
  inset:0;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.75));
}

.oaiGuildBannerSymbol{
  z-index:4;
  inset:30%;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.9));
}

.oaiGuildBanner[data-gb-symbol="swords"] .oaiGuildBannerSymbol,
.oaiGuildBanner[data-gb-symbol="tower"] .oaiGuildBannerSymbol,
.oaiGuildBanner[data-gb-symbol="raven"] .oaiGuildBannerSymbol{
  inset:27%;
}

/* Lebka má v samotném PNG větší prázdný prostor nahoře, proto ji opticky dorovnáváme. */
.oaiGuildBanner[data-gb-symbol="skull"] .oaiGuildBannerSymbol{
  transform:translate(-6%, -5%);
}

.oaiGuildBannerLayer[data-gb-asset="frame_round"]{ --gb-asset:url("../img/ui/guild_banners/frame_round.png"); }
.oaiGuildBannerLayer[data-gb-asset="frame_kite"]{ --gb-asset:url("../img/ui/guild_banners/frame_kite.png"); }
.oaiGuildBannerLayer[data-gb-asset="frame_tower"]{ --gb-asset:url("../img/ui/guild_banners/frame_tower.png"); }
.oaiGuildBannerLayer[data-gb-asset="frame_hex"]{ --gb-asset:url("../img/ui/guild_banners/frame_hex.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_swords"]{ --gb-asset:url("../img/ui/guild_banners/symbol_swords.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_wolf"]{ --gb-asset:url("../img/ui/guild_banners/symbol_wolf.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_crown"]{ --gb-asset:url("../img/ui/guild_banners/symbol_crown.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_dragon"]{ --gb-asset:url("../img/ui/guild_banners/symbol_dragon.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_tower"]{ --gb-asset:url("../img/ui/guild_banners/symbol_tower.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_raven"]{ --gb-asset:url("../img/ui/guild_banners/symbol_raven.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_star"]{ --gb-asset:url("../img/ui/guild_banners/symbol_star.png"); }
.oaiGuildBannerLayer[data-gb-asset="symbol_skull"]{ --gb-asset:url("../img/ui/guild_banners/symbol_skull.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_wings"]{ --gb-asset:url("../img/ui/guild_banners/ornament_wings.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_laurel"]{ --gb-asset:url("../img/ui/guild_banners/ornament_laurel.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_axes"]{ --gb-asset:url("../img/ui/guild_banners/ornament_axes.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_horns"]{ --gb-asset:url("../img/ui/guild_banners/ornament_horns.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_chains"]{ --gb-asset:url("../img/ui/guild_banners/ornament_chains.png"); }
.oaiGuildBannerLayer[data-gb-asset="ornament_rays"]{ --gb-asset:url("../img/ui/guild_banners/ornament_rays.png"); }

#guildGatePanel.oaiGuildBannerGate{
  width:min(940px, calc(100% - 70px));
  max-height:calc(100% - 48px);
  overflow:auto;
  padding:18px 22px 20px;
  scrollbar-color:rgba(203,151,62,.72) rgba(20,12,7,.45);
}

#guildGatePanel.oaiGuildBannerGate > h3{
  margin-bottom:5px;
  text-align:center;
}

#guildGatePanel.oaiGuildBannerGate > .guildHint{
  margin-bottom:12px;
  text-align:center;
}

.oaiGuildCreateLayout{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:18px;
  min-width:0;
}

.oaiGuildBannerPreviewPanel,
.oaiGuildBannerControls{
  border:1px solid rgba(211,157,65,.32);
  border-radius:15px;
  background:
    radial-gradient(circle at 50% 20%, rgba(129,69,27,.2), transparent 48%),
    linear-gradient(180deg, rgba(26,16,9,.93), rgba(13,8,5,.94));
  box-shadow:inset 0 0 28px rgba(255,205,113,.035), 0 10px 28px rgba(0,0,0,.28);
}

.oaiGuildBannerPreviewPanel{
  display:flex;
  min-height:440px;
  padding:16px 14px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}

.oaiGuildBannerEyebrow{
  color:#b88e50;
  font:700 10px/1.3 "Cinzel", Georgia, serif;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

.oaiGuildBannerPreviewStage{
  display:grid;
  place-items:center;
  width:252px;
  height:252px;
  margin:4px auto 2px;
  background:radial-gradient(circle, rgba(144,85,31,.18), transparent 65%);
}

.oaiGuildBannerPreviewName{
  min-height:27px;
  color:#f3d69a;
  font:800 20px/1.25 "Cinzel", Georgia, serif;
  letter-spacing:.5px;
  text-shadow:0 2px 8px #000;
}

.oaiGuildBannerControls{
  padding:12px;
}

.oaiGuildBannerSection + .oaiGuildBannerSection{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(204,151,65,.17);
}

.oaiGuildBannerSectionHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.oaiGuildBannerSectionTitle{
  color:#ebcf96;
  font:800 12px/1.2 "Cinzel", Georgia, serif;
  letter-spacing:.45px;
}

.oaiGuildBannerSectionValue{
  color:#9b8665;
  font-size:10px;
}

.oaiGuildBannerChoiceGrid{
  display:grid;
  gap:6px;
}

.oaiGuildBannerChoiceGrid--frames{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.oaiGuildBannerChoiceGrid--symbols{ grid-template-columns:repeat(8, minmax(0,1fr)); }
.oaiGuildBannerChoiceGrid--ornaments{ grid-template-columns:repeat(7, minmax(0,1fr)); }

.oaiGuildBannerChoice{
  position:relative;
  display:flex;
  min-width:0;
  height:62px;
  padding:3px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#a99573;
  background:linear-gradient(160deg, rgba(65,45,26,.58), rgba(18,12,8,.9));
  border:1px solid rgba(190,141,61,.25);
  border-radius:9px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.oaiGuildBannerChoice:hover{
  transform:translateY(-1px);
  border-color:rgba(231,182,85,.66);
}

.oaiGuildBannerChoice.is-selected{
  border-color:#e0aa45;
  background:linear-gradient(160deg, rgba(126,74,26,.68), rgba(30,17,9,.94));
  box-shadow:0 0 0 1px rgba(255,210,108,.32), inset 0 0 16px rgba(255,188,63,.09), 0 0 12px rgba(213,139,35,.14);
}

.oaiGuildBannerChoice .oaiGuildBanner{
  --gb-size:52px;
}

.oaiGuildBannerNoneChoice{
  font:900 22px/1 "Cinzel", Georgia, serif;
  opacity:.72;
}

.oaiGuildBannerColors{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:7px;
}

.oaiGuildBannerColor{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:7px;
  align-items:center;
  min-height:43px;
  padding:5px 7px;
  color:#d4bd91;
  font:700 10px/1.25 "Cinzel", Georgia, serif;
  background:rgba(13,8,5,.58);
  border:1px solid rgba(190,141,61,.2);
  border-radius:9px;
}

.oaiGuildBannerColor input[type="color"]{
  width:34px;
  height:31px;
  padding:2px;
  cursor:pointer;
  border:1px solid rgba(232,187,93,.45);
  border-radius:7px;
  background:#160e08;
}

.oaiGuildBannerPresets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.oaiGuildBannerPreset{
  display:flex;
  gap:3px;
  align-items:center;
  min-height:25px;
  padding:3px 7px 3px 4px;
  cursor:pointer;
  color:#a99675;
  font-size:9px;
  background:rgba(18,11,7,.75);
  border:1px solid rgba(190,141,61,.2);
  border-radius:999px;
}

.oaiGuildBannerPreset:hover{ border-color:rgba(231,182,85,.62); color:#ecd19c; }
.oaiGuildBannerPresetSwatch{ width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }

#guildGatePanel.oaiGuildBannerGate #guildNameInput{
  margin-top:12px;
}

#guildGatePanel.oaiGuildBannerGate > .guildBtnRow{
  justify-content:center;
}

#guildGatePanel.oaiGuildBannerGate > .guildBtnRow .guildBtn{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,214,139,.11), rgba(0,0,0,0) 40%),
    linear-gradient(180deg, rgba(48,12,12,.34), rgba(10,4,4,.52)),
    url("../img/ui/left_menu_burgundy_texture_v2.png") center/150% 230% no-repeat;
  border-color:rgba(208,155,72,.78);
  color:#ffe0a0;
  text-shadow:0 2px 3px rgba(0,0,0,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,225,164,.22),
    inset 0 -8px 14px rgba(8,3,3,.36),
    0 8px 15px rgba(0,0,0,.36),
    0 0 0 1px rgba(62,20,12,.82);
}

#guildGatePanel.oaiGuildBannerGate > .guildBtnRow .guildBtn:hover,
#guildGatePanel.oaiGuildBannerGate > .guildBtnRow .guildBtn:focus-visible{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,227,162,.18), rgba(0,0,0,0) 42%),
    linear-gradient(180deg, rgba(86,24,20,.28), rgba(18,5,5,.42)),
    url("../img/ui/left_menu_burgundy_texture_v2.png") center/150% 230% no-repeat;
  border-color:rgba(239,185,91,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,238,190,.32),
    inset 0 -8px 14px rgba(8,3,3,.3),
    0 9px 17px rgba(0,0,0,.38),
    0 0 16px rgba(223,80,55,.18),
    0 0 0 1px rgba(84,28,16,.86);
}

#guildGatePanel.oaiGuildBannerGate > .guildBtnRow .guildBtn:active{
  transform:translateY(1px);
}

.oaiGuildCreateCost{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:6px;
  vertical-align:middle;
}

.oaiGuildCreateGoldIcon{
  display:inline-block;
  width:22px;
  height:18px;
  background:url("../img/ui/gold.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.72));
}

.oaiGuildCreateCostValue{
  color:#ffe2a0;
  font-variant-numeric:tabular-nums;
}

.guildEmblemBox.guildEmblemBox--banner{
  padding:0;
  overflow:visible;
  background:radial-gradient(circle, rgba(109,65,28,.22), rgba(18,11,7,.78));
}

.guildEmblemBox.guildEmblemBox--banner .oaiGuildBanner{
  --gb-size:92px;
}

.oaiGuildBoardBanner{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-right:9px;
  flex:0 0 54px;
}

.oaiGuildBoardBanner .oaiGuildBanner{ --gb-size:54px; }

#inventoryScreen #invStatsPanel .oaiSfGuildBadge.oaiGuildBannerApplied::before,
#shopScreen .oaiShopStatsStatic .oaiShopGuildBadge.oaiGuildBannerApplied::before{
  content:none !important;
  display:none !important;
}

#inventoryScreen #invStatsPanel .oaiSfGuildEmblem.oaiGuildBannerMount,
#shopScreen .oaiShopStatsStatic .oaiShopGuildEmblem.oaiGuildBannerMount{
  display:grid !important;
  place-items:center !important;
  left:50% !important;
  top:59px !important;
  width:130px !important;
  height:130px !important;
  max-width:none !important;
  overflow:visible !important;
  transform:translate(-50%,-50%) !important;
  line-height:normal !important;
}

#inventoryScreen #invStatsPanel .oaiSfGuildEmblem.oaiGuildBannerMount .oaiGuildBanner,
#shopScreen .oaiShopStatsStatic .oaiShopGuildEmblem.oaiGuildBannerMount .oaiGuildBanner{
  --gb-size:128px;
}

@media (max-width:980px){
  #guildGatePanel.oaiGuildBannerGate{ width:calc(100% - 30px); max-height:calc(100% - 24px); }
  .oaiGuildCreateLayout{ grid-template-columns:230px minmax(0,1fr); gap:12px; }
  .oaiGuildBannerPreviewPanel{ min-height:390px; }
  .oaiGuildBannerPreviewStage{ width:210px; height:210px; }
  .oaiGuildBannerPreviewStage .oaiGuildBanner{ --gb-size:205px; }
  .oaiGuildBannerChoiceGrid--symbols{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .oaiGuildBannerChoiceGrid--ornaments{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

@media (max-width:700px){
  .oaiGuildCreateLayout{ grid-template-columns:1fr; }
  .oaiGuildBannerPreviewPanel{ min-height:260px; }
  .oaiGuildBannerColors{ grid-template-columns:1fr; }
}