/* custom.css */

html[lang="ko"] .book,
html[lang="cn"] .book {
	text-orientation: sideways;
}

/* html[lang="cn"] .book {
	transform: scale(1);
} */

.logo__img {
	height: 4.05rem;
}

.lang__current {
	border: 0;
	color: inherit;
	font: inherit;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	border-radius: .4375rem;
	background: linear-gradient(180deg, #886040, #745836);
	box-shadow: inset 0 .125rem .125rem 0 #caa463, inset 0 -.0625rem .0625rem 0 rgba(26, 19, 11, .76);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lang__item {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: uppercase;
	cursor: pointer;
	width: 100%;
}

.lang__item_active {
	color: #e2c86a;
	pointer-events: none;
}

@media (min-width: 1200px) {
	.logo__img {
		height: 4.3rem;
	}
}

[data-section="influencers"] .influencers__wrap,
[data-section="influencers"] .influencers__streamsbox {
	display: none;
}

[data-section="influencers"] .desc,
[data-section="servcards"] .desc,
[data-section="download"] .desc {
	max-width: 46rem;
	line-height: 1.55;
}

@media (min-width: 1200px) {
	[data-section-bg="servcards"] {
		background-image: url("../images/bg.jpg") !important;
	}

	.swiper-slide-active [data-section-bg="servcards"] {
		background-image: url("../images/ChatGPT Image23_01_16.png") !important;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	[data-section-bg="download"] {
		background-image: url("../images/ChatGPT2569 08_55_00.png") !important;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	[data-section-bg="influencers"] {
		background-image: url("../images/ChatGPT Image2569 09_58_16.png") !important;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}

.download {
	text-align: center;
	padding-top: 11.25rem;
	box-sizing: border-box;
}

.download-grid {
	width: min(58rem, calc(100vw - 18rem));
	margin: 1.45rem auto 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	justify-content: center;
}

.download-card {
	position: relative;
	min-height: 24.5rem;
	padding: 1.35rem 1.25rem 1.25rem;
	border: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	--card-line: rgba(121, 90, 57, .42);
	background:
		linear-gradient(90deg, transparent, var(--card-line) 12%, var(--card-line) 88%, transparent) left 2.2rem top .6rem / calc(100% - 4.4rem) 1px no-repeat,
		linear-gradient(90deg, transparent, var(--card-line) 16%, var(--card-line) 84%, transparent) left 2.2rem bottom .62rem / calc(100% - 4.4rem) 1px no-repeat;
	box-shadow: none;
	box-sizing: border-box;
}

.download-card::before,
.staff-card::before {
	content: "";
	position: absolute;
	inset: -.18rem auto auto -.18rem;
	width: 5.45rem;
	height: 7.45rem;
	background: var(--decor-corner-left-top) left top / contain no-repeat;
	opacity: .62;
	pointer-events: none;
}

.download-card::after,
.staff-card::after {
	content: "";
	position: absolute;
	right: .55rem;
	bottom: .55rem;
	width: .42rem;
	height: .42rem;
	border: 1px solid rgba(111, 73, 38, .5);
	transform: rotate(45deg);
	background: rgba(140, 92, 43, .18);
}

.download-card_primary {
	--card-line: rgba(140, 82, 28, .5);
	background:
		linear-gradient(90deg, transparent, var(--card-line) 12%, var(--card-line) 88%, transparent) left 2.2rem top .6rem / calc(100% - 4.4rem) 1px no-repeat,
		linear-gradient(90deg, transparent, var(--card-line) 16%, var(--card-line) 84%, transparent) left 2.2rem bottom .62rem / calc(100% - 4.4rem) 1px no-repeat;
}

.download-card__label {
	margin-bottom: .45rem;
	color: #855527;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1rem;
}

.download-card__title {
	margin-bottom: .6rem;
	color: #21150c;
	font-size: 1.35rem;
	font-weight: 700;
	text-transform: uppercase;
}

.download-card__text {
	width: min(22rem, 100%);
	min-height: 4.1rem;
	color: #302218;
	font-size: .82rem;
	line-height: 1.45;
}

.download-card__btn {
	margin-top: .85rem;
	min-width: 11rem;
}

.download-card__subbox {
	position: relative;
	width: calc(100% + 2.5rem);
	margin: 2.35rem -1.25rem 0;
	padding: 1.55rem 1.9rem .2rem;
	box-sizing: border-box;
	background:
		linear-gradient(90deg, transparent, var(--card-line) 12%, var(--card-line) 88%, transparent) left 2.2rem top .6rem / calc(100% - 4.4rem) 1px no-repeat,
		linear-gradient(90deg, transparent, var(--card-line) 16%, var(--card-line) 84%, transparent) left 2.2rem bottom .62rem / calc(100% - 4.4rem) 1px no-repeat;
}

.download-card__subbox::before {
	content: "";
	position: absolute;
	inset: -.18rem auto auto -.18rem;
	width: 5.45rem;
	height: 7.45rem;
	background: var(--decor-corner-left-top) left top / contain no-repeat;
	opacity: .62;
	pointer-events: none;
}

.download-card__subbox .download-card__title {
	font-size: 1.18rem;
}

.download-card__subbox .download-card__text {
	min-height: 4.1rem;
	font-size: .78rem;
}

.download-card__subbox .download-card__btn {
	margin-top: .75rem;
	min-width: 11rem;
}

.download .btn {
	box-shadow: inset 0 2px 2px 0 #caa463, inset 0 -1px 1px 0 rgba(26, 19, 11, .76), 0 5px 6px 0 rgba(33, 14, 4, .76);
}

.download-actions {
	position: relative;
	width: max-content;
	max-width: 100%;
	margin: 1rem auto 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	background: none;
	box-sizing: border-box;
}

.download-note {
	width: min(44rem, calc(100vw - 15rem));
	margin: 1rem auto 0;
	color: #3b2a1d;
	font-size: .78rem;
	line-height: 1.45;
}

.staff-grid {
	width: min(86rem, calc(100vw - 22rem));
	margin: 1.65rem auto 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.staff-card {
	position: relative;
	min-height: 8.6rem;
	padding: 1.08rem 1rem .98rem;
	border: 0;
	--card-line: rgba(121, 90, 57, .34);
	background:
		linear-gradient(90deg, transparent, var(--card-line) 12%, var(--card-line) 88%, transparent) left 2rem top .55rem / calc(100% - 4rem) 1px no-repeat,
		linear-gradient(90deg, transparent, var(--card-line) 16%, var(--card-line) 84%, transparent) left 2rem bottom .55rem / calc(100% - 4rem) 1px no-repeat;
	box-shadow: none;
	box-sizing: border-box;
}

[data-section="influencers"] .influencers__heading {
	max-width: none;
	width: 100%;
}

.staff-card__role {
	margin-bottom: .35rem;
	color: #7b4f25;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08rem;
}

.staff-card__name {
	margin-bottom: .45rem;
	color: #24180e;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
}

.staff-card__text {
	color: #2f241b;
	font-size: .8rem;
	line-height: 1.4;
}

@media (max-width: 960px) {
	.staff-grid,
	.download-grid {
		width: min(32rem, calc(100vw - 3rem));
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.download-note {
		width: min(32rem, calc(100vw - 3rem));
	}
}

@media (max-width: 560px) {
	.staff-grid,
	.download-grid {
		width: calc(100vw - 2rem);
		grid-template-columns: 1fr;
		gap: .7rem;
	}

	.staff-card,
	.download-card {
		min-height: 0;
	}

	.download-card__text {
		min-height: 0;
	}

	.download-card__subbox .download-card__text {
		min-height: 0;
	}

	.download-note {
		width: calc(100vw - 2rem);
	}
}

.scl__ico-facebook-modern {
	display: block;
	width: 1.55rem;
	height: 1.55rem;
	overflow: visible;
}

.scl__ico-facebook-modern circle {
	fill: #e5cba8;
	transition: fill .2s, filter .2s;
}

.scl__ico-facebook-modern path {
	fill: #171412;
}

.scl__item:hover .scl__ico-facebook-modern circle {
	fill: #fff4e5;
	filter: drop-shadow(0 0 .35rem rgba(226, 200, 106, .35));
}

/* ===== KEUCEREUS desktop navigation alignment =====
   Keep the translated menu exactly centered. The language button is fixed
   immediately to the right of the menu and does not shift the menu itself. */
@media (min-width: 1200px) {
  .navigation {
    position: relative;
  }

  .navigation__menubox {
    position: absolute;
    inset: 0;
    width: min(76rem, calc(100vw - 3rem));
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 0;
    pointer-events: none;
  }

  .navigation__menu {
    grid-column: 2;
    justify-self: center;
    pointer-events: auto;
  }

  .navigation__menu .menu__content,
  .navigation__menu .menu__list {
    width: max-content;
  }

  .navigation__menu .menu__list {
    justify-content: center;
    align-items: center;
    gap: clamp(.82rem, 1.05vw, 1.28rem);
  }

  .navigation__menu .menu__el {
    width: auto;
    flex: 0 0 auto;
  }

  .navigation__menu .menu__item {
    position: relative;
    padding: .62rem 0;
    font-size: clamp(.88rem, .88vw, 1rem);
    line-height: 1.15;
    letter-spacing: .015em;
  }

  .navigation__menu .menu__item::after {
    content: "◇";
    position: absolute;
    left: 50%;
    bottom: -.22rem;
    width: 4.4rem;
    height: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #80603c;
    font-size: .72rem;
    line-height: 1;
    background:
      linear-gradient(90deg, transparent 0, #8b6a45 16%, #8b6a45 40%, transparent 40%) left center / 50% 1px no-repeat,
      linear-gradient(90deg, transparent 0, #8b6a45 16%, #8b6a45 40%, transparent 40%) right center / 50% 1px no-repeat;
    opacity: 0;
    transform: translate(-50%, .3rem) scaleX(.75);
    transition: opacity .2s ease, transform .25s ease;
    pointer-events: none;
  }

  .navigation__menu .menu__item:hover::after,
  .navigation__menu .menu__item:focus-visible::after,
  .navigation__menu .menu__item_current::after {
    opacity: 1;
    transform: translate(-50%, 0) scaleX(1);
  }

  .navigation__menu .menu__item_current {
    color: #4b3525;
    text-shadow: 0 1px rgba(255,255,255,.45);
  }

  .navigation__el_lang {
    grid-column: 3;
    justify-self: start;
    margin-left: 1rem;
    pointer-events: auto;
  }

  .navigation__el_lang .lang {
    flex: 0 0 auto;
  }
}

/* Slightly compact only on narrower desktop screens, while staying readable. */
@media (min-width: 1200px) and (max-width: 1450px) {
  .navigation__menubox {
    width: calc(100vw - 2rem);
  }

  .navigation__menu .menu__list {
    gap: .5rem;
  }

  .navigation__menu .menu__item {
    font-size: .76rem;
  }

  .navigation__el_lang {
    margin-left: .75rem;
  }
}

/* ===== Sakura Isle server information ===== */
[data-section="servcards"] .servcards__heading { margin-bottom: .7rem; }
[data-section="servcards"] .servcards__heading .desc { display: none; }
.server-showcase { width: min(78rem, calc(100vw - 8rem)); margin: 0 auto; color: #2c2119; }
.server-showcase__hero { text-align: center; margin-bottom: 1rem; }
.server-showcase__kicker { display: inline-block; color: #8a4e55; font-size: .9rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.server-showcase__hero h3 { margin: .3rem 0 .2rem; font-family: Georgia, serif; font-size: clamp(1.55rem, 1.8vw, 2rem); font-weight: 500; }
.server-showcase__hero p { margin: 0 auto; max-width: 58rem; color: #5b4738; font-size: 1.08rem; line-height: 1.45; }
.server-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .55rem; margin-bottom: .6rem; }
.server-stat { min-height: 4.8rem; padding: .6rem .35rem; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255,250,239,.83), rgba(222,199,161,.7)); border: 1px solid rgba(117,78,45,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 .2rem .5rem rgba(62,39,21,.12); }
.server-stat strong { color: #7c3e3f; font-family: Georgia, serif; font-size: 1.65rem; line-height: 1; }
.server-stat span { margin-top: .35rem; color: #4c392b; font-size: .9rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.server-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.server-panel { min-height: 6.7rem; padding: .9rem 1rem; display: flex; gap: .8rem; align-items: flex-start; background: rgba(249,239,218,.78); border: 1px solid rgba(115,76,42,.34); box-shadow: 0 .2rem .55rem rgba(61,38,20,.1); }
.server-panel--party { border-left: 3px solid #9b5658; }
.server-panel--events { border-left: 3px solid #977229; }
.server-panel__icon { flex: 0 0 2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: #fff5dc; background: linear-gradient(145deg,#9d7040,#623d25); box-shadow: 0 0 0 2px rgba(177,131,69,.2); font-size: 1rem; }
.server-panel h4 { margin: 0 0 .4rem; color: #5d3528; font-family: Georgia, serif; font-size: 1.25rem; }
.server-panel p, .server-panel li { margin: 0; color: #49382c; font-size: 1rem; line-height: 1.5; }
.server-panel ul { margin: 0; padding-left: 1rem; }
.server-event-tags { display: flex; flex-wrap: wrap; gap: .24rem; }
.server-event-tags span { padding: .28rem .52rem; color: #573b2e; background: rgba(181,137,76,.15); border: 1px solid rgba(137,91,46,.25); font-size: .9rem; }
.server-showcase__footer { margin-top: .75rem; display: flex; justify-content: center; align-items: center; gap: .65rem; color: #6d3c40; font-family: Georgia, serif; font-size: 1.08rem; text-align: center; }

@media (max-width: 900px) {
  .server-showcase { width: min(38rem, calc(100vw - 3rem)); }
  .server-stats { grid-template-columns: repeat(3, 1fr); }
  .server-panels { grid-template-columns: 1fr; }
  .server-panel { min-height: auto; }
}

@media (max-width: 560px) {
  [data-section="servcards"] .servcards__heading { margin-bottom: .4rem; }
  .server-showcase { width: calc(100vw - 2rem); max-height: calc(100vh - 10.5rem); overflow-y: auto; padding-right: .2rem; }
  .server-showcase__kicker { font-size: .7rem; }
  .server-showcase__hero h3 { font-size: 1.25rem; }
  .server-showcase__hero p { font-size: .88rem; }
  .server-stats { gap: .35rem; }
  .server-stat { min-height: 4rem; }
  .server-stat strong { font-size: 1.3rem; }
  .server-stat span { font-size: .68rem; }
  .server-panels { gap: .4rem; }
  .server-panel h4 { font-size: 1rem; }
  .server-panel p, .server-panel li { font-size: .84rem; }
  .server-event-tags span { font-size: .72rem; }
  .server-showcase__footer { padding-bottom: .5rem; font-size: .88rem; }
}

/* ===== KEUCEREUS final desktop header position =====
   Shift the complete menu + language control left as one balanced group.
   The translated menu remains centered inside its own group, regardless of
   label length, while the language control stays fixed immediately after it. */
@media (min-width: 1451px) {
  .navigation__menubox {
    transform: translateX(-140px);
  }
}

@media (min-width: 1200px) and (max-width: 1450px) {
  .navigation__menubox {
    transform: translateX(-105px);
  }
}

/* Original navigation ornament from images/decor.svg. */
@media (min-width: 1200px) {
  .navigation__menu .menu__item::before {
    content: "" !important;
    position: absolute;
    left: 50%;
    bottom: -.34rem;
    width: 5.1875rem;
    height: .6875rem;
    background: url(../images/decor.svg) center / contain no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .25s ease;
    transform: translate(-50%, .2rem) scale(.92);
  }

  .navigation__menu .menu__item::after {
    content: none !important;
    display: none !important;
  }

  .navigation__menu .menu__item:hover::before,
  .navigation__menu .menu__item:focus-visible::before,
  .navigation__menu .menu__item_current::before {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}