@charset "UTF-8";

@font-face {
  font-family: 'tw';
  src: url('./SourceHanSansHK-Medium-fEGo3y_5.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'twbold';
  src: url('./SourceHanSansHK-Bold-DncUv_Kj.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'kr';
  src: url('./SourceHanSansKR-Medium-CI9KI778.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'krbold';
  src: url('./SourceHanSansKR-Bold-BHBmtxhU.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'krheavy';
  src: url('./SourceHanSansKR-Heavy-w-IUs5uN.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'en';
  src: url('./SourceHanSansKR-Medium-CI9KI778.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'enbold';
  src: url('./SourceHanSansKR-Bold-BHBmtxhU.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'enheavy';
  src: url('./SourceHanSansKR-Heavy-w-IUs5uN.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'jp';
  src: url('./SourceHanSansJP-Regular-CsB2f7sW.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'jpbold';
  src: url('./SourceHanSansJP-Bold-D7PBoTRp.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'enheavy';
  src: url('./SourceHanSansJP-Bold-D7PBoTRp.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'sea';
  src: url('./sea-B4oMkQaY.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'numberCommon';
  src: url('./numberCommon-C8NBuGMn.ttf');
}

@font-face {
  font-family: 'Deco_Indt_bold';
  src: url('./Deco_Indt_bold-0Ff9PEvq.ttf');
}

:focus {
  outline: none;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0.0933333333rem;
}

body {
  background: #000;
}

#app, .root {
  position: relative;
  width: 100%;
  height: 100%;
}

.pop {
  position: absolute;
  top: 0;
  left: 0;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  background-color: transparent;
}

/* 多语言字体：组件里用 var(--font) / var(--font-bold) / var(--font-heavy) */
.lang_en {
  --font: 'en', Arial, sans-serif;
  --font-bold: 'enbold', Arial, sans-serif;
  --font-heavy: 'enbold', Arial, sans-serif;
  font-family: var(--font);
}

.lang_ja {
  --font: 'jp', sans-serif;
  --font-bold: 'jpbold', sans-serif;
  --font-heavy: 'jpbold', sans-serif;
  font-family: var(--font);
}

.lang_ko {
  --font: 'kr', sans-serif;
  --font-bold: 'krbold', sans-serif;
  --font-heavy: 'krheavy', sans-serif;
  font-family: var(--font);
  word-break: keep-all;
}

.lang_th {
  /* --font: 'sea', sans-serif;
  --font-bold: 'sea', sans-serif;
  --font-heavy: 'sea', sans-serif;
  font-family: var(--font); */
}

.lang_tw {
  --font: 'tw', sans-serif;
  --font-bold: 'twbold', sans-serif;
  --font-heavy: 'twbold', sans-serif;
  font-family: var(--font);
}

.main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parts-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.pc .main {
  background: #fff url('./pc_cover-DFILOEt-.jpg') center center / cover no-repeat;
}

.pc-slogan {
  display: none;
}

.pc .pc-slogan {
  display: block;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 46%;
  max-width: 49vw;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.pc {
  /* 750 × 1624 的内部画布等比放入 958 高的 PC 展示区域。 */
  --pc-page-scale: 0.5899014778325123;
}

.pc .parts-wrapper {
  position: absolute;
  left: 50%;
  top: 1.12rem;
  width: calc(7.5rem * var(--pc-page-scale));
  height: 9.38rem;
  /* height: 9.58rem; */
  transform: translateX(-50%);
  z-index: 51;
  /* background: url('../ossweb-img/pc_cover_in.png') no-repeat; */
  /* background-size: 100% 100%; */
}

.pc .parts-wrapper::before {
  /* content: '';
  position: absolute;
  left: -0.12rem;
  top: -0.74rem;
  z-index: 60;
  width: calc(9.84rem * var(--pc-page-scale));
  height: calc(22rem * var(--pc-page-scale));
  pointer-events: none;
  transform: scale(0.81);
  transform-origin: left top;
  background: url('../ossweb-img/feature01/bk.png') no-repeat;
  background-size: 100% 100%; */

  content: '';
  position: absolute;
  left: -0.26rem;
  top: -0.84rem;
  z-index: 60;
  width: calc(9.84rem * var(--pc-page-scale));
  /* height: calc(22rem * var(--pc-page-scale)); */
  height: calc(21.08rem * var(--pc-page-scale));
  pointer-events: none;
  transform: scale(0.85);
  transform-origin: left top;
  background: url('./bk-Bd3qP27S.png') no-repeat;
  background-size: 100% 100%;
}

.pc .parts-wrapper::after {
  content: '';
  position: absolute;
  right: -0.24rem;
  top: 0.32rem;
  z-index: 60;
  width: 0.48rem;
  height: 0.53rem;
  pointer-events: none;
  /* background: url('../ossweb-img/bk_icon2.png') no-repeat;
  background-size: 100% 100%; */
}

.top {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: .86rem;
  /* padding-bottom: 0.36rem; */
  background: url('./top_navbg-DgVc6AXR.png') left top / 100% 100% no-repeat;
}

/* 仅在普通移动浏览器补偿安全区；游戏内 WebView 已处理顶部留白。 */
html:not(.is-twitter):not(.is-ingame):not(.pc) .top {
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
}

.pc .top {
  left: 0;
  top: 0;
  width: 100vw;
  height: 0.84rem;
  padding-bottom: 0;
  transform: none;
  /* background: url('../ossweb-img/top_navbg_pc.png') no-repeat; */
  background-color: #000;
  background-size: 100% 100%;
  background: #000;
  border-bottom: 3px solid #470b0b;
  box-sizing: border-box;
}

.pc .top::before {
  flex: 1;
  height: .45rem;
  content: "";
  order: 2;
  margin: 0 .2rem;
  background: url('./head_zs-CcVy7Bii.png') no-repeat;
  background-size: 12.64rem .45rem;
}

.top-left,
.top-right {
  display: flex;
  align-items: center;
}

.top-right {
  margin-right: 0.30rem;
}

.logo {
  display: block;
  width: 2.72rem;
  height: 0.82rem;
  margin-left: 0.22rem;
}

.logo--pc {
  display: none;
}

.logo--h5 {
  margin: 0;
}

.pc .logo--h5 {
  display: none;;
}

.pc .logo--pc {
  display: block;
  margin: 0;
}

.pc .logo {
  width: 2.84rem;
  height: 0.82rem;
  order: 1;
}

.pc .top-right {
  order: 3;
}

.icon_share,
.icon_qeustion,
.icon_music,
.top_language p::before,
.user_login_bg .user_box .log_sign {
  flex: 0 0 auto;
  width: 0.44rem;
  height: 0.44rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

/* .pc .icon_share,
.pc .icon_qeustion,
.pc .icon_music,
.pc .top_language p::before,
.pc .user_login_bg .user_box .log_sign {
  width: 0.28rem;
  height: 0.28rem;
} */

.icon_share {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAADI0lEQVRYhcWYW4iNURTHf+fMoZkoM2aUGqXEA0JiQsowXgyFwotxSalxKaXcHlDGg0s55VITCaFkXF405AGTwgOF3MqT+zwY0yCTy4zRqrWn3bbPnu/7zkzzr9O319p7r+9/1lr7sr5UNpsFGAu8koaDWo9OkAI+AtccfQmwCCgEunLMde18Ay5ngKnAQ1XaiGJoO3DQkhcApyPMczEkDczzdEQhITigZAyuA1cTEBkmRH46yrMxjewHtmm7FVgC3I5po12IdFoK8c7KmEZQz2yy5LlxyaT1abxwIwEJg8OWZwyZS1EnZ/S5Sn8ubgJvPHqT2HYuDQb+OuN8c4NEfLgALI9qyIM6YGvUwelAX1MeJPYAu+JMCBEpTkhiJ7A77qQQEXeDiwIJx97AuPu5PB3KkbjY3EM4moGZ2n6px0o3Qh6Jg41ANjD+HTDFkmeoziDVG0R2AMcC/c1KotnSfQUmWgdtSb5ElgH7IpBoUbnSOtuEzDTgDNCYL5FQQv/SF9meWKO79xyVv6vuXr5EGoANHr28fDLw3tG/1qecQ7Ptjt7IkXpgnSW3azh8F60Cq30HqAoRaU1A5jiwRfeJ6U44QrilSdtN5KQV77sJiAgO6T7xLOY8IT/JEKm0OhYnJJIUg4BqQ2SMPpNs672BNnuLl7tFRz8R6XKT9W2ObO9zuMk6GhjXHyEyRNZqaOxfX4SpM1eH5MgHbcvalwvvKN0V6/uAyA9H/iw1jSFSBDwCKrRTcqTRGlzoCVWH6gr4H+Zfu31lQI0lt+mBmTVESrXslHA0KGt5yQBgBfBCSkLH6Cy9XJfH8EaxQ67YvsOY5duuFVudM7kGP+SGtRp4HINIEGk9lo9o6Vml3khp5XYeGK+yHN1PLWNPgE8e4w+A59r+onPXe8b9Ac7ZHlmoZeYIZ+BRq92kJMpUDhXpGcvTpYGxBVaoBmaUcblnQpF6qVzPokqPMR8qIo5LWwXcbxEuAieAkcBSKzTmK4F8kKkGJmjhZDBfv6v0hFOeZWsgf16uAlfMF6OkkMx3CzFZ2nIfHapLVNqyBQx3xslVUvKkBeAfnj+cFvmmsw8AAAAASUVORK5CYII=');
  background-size: .34rem .35rem;
}

.icon_qeustion {
  margin-left: 0.22rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAABwlBMVEVHcEyOjo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo7Bsgm1AAAAlXRSTlMABJgBYvmsAvYD67N0NxyHF5dICta0Gg9heAvs0/Qm0nkQmbG7E/gFCYIY9R7tvbLXlQ0OwSD9MyP+mpxabFdW6tFJY+GLG8y4Esv6jSjiJ/C8keMGrgzPsEfkt2ZLpGuKxG77NHH8B8cqkp/GZMoweyXyvnNOWcKGdY+tjhWmkFj3qkrlCDVQryKn7+eIge5yTXZeRGvXo/0AAAKaSURBVDjLjVVlWxtBEJ7YSZQYEojgCQ5FSwul0KKlSClSd3dX6u7t/N/uzu6R7R15ns6XHXkz8t7sBkAVPVSlZdubmtqzWlVIh1ISjsyjIvOR8Lawxm4f2sTX3ejEjfp5KB0IxjLl5ZlYMGBw2z9ig7mi3J3wpoquw94E90VdKi4e4L8et7Wve3mVQFzJV88cd1qc/bR0sEB9MaebmcOm0MuuHe841asFb5FlDrOQ28KNMKPOI2B1TXLioYYb3OHhSe5LXlgniyKf97zKzknK2YDY/oyibGB/GWlHbTxeoSJ7ZPG2WUQv4QYtwJkhqeymMoizbeyMIHYJXiZFtPMs1J6QyGnOUhdihB3LiOOE6xOxKTL2CmMX1ysRl3UIIbb2UOwchfrzYsSLZO3jak8aMQQ5xr0IHZtZYGuRlJz1EvAy6ey7VYGGGFQ27VKtUAb6CXiajCCiBjWIMee3G2gVPfZZDdfAGuIBB27wtsDtFOZBxGpgbe23425Kcq5Ku5zt8HbAuxJ3/YIKrHaUHsWJRxx3ZMtDpR3D5A0cKxT74xLjw/xLD5N7ou6c4iJ6ioRLeUi4B6qrkxP+cWWxI6V6nyKCLvZGSk/aYJ9Q/7C6+l4Fug2jzTAKiqcSlz7p6poJ8biaodnlUS5jgtYMwj5rcSXQNMF0mWpC9InH5XV0bofSuTEGYBhbHn4VaNugYmUqWSgWf0xTGxXS5JerWq7UC353t5p6QsBWCfRErT23HoAly0giPp/AlwJobvI7D6XljeiRvTLsSTlkj3qpUVc+BW9TPOh55381icm4Iw0mKuO2Z28G3c3Oet0Ln798+7Oe0SG+/mMtzWeC6VLNZeC/ZIOo+QU/+bHxNVwSqIdyWvY3wPeslrP9ffwF/okISF9usGgAAAAASUVORK5CYII=');
  background-size: .4rem .4rem;
}

.icon_music {
  margin-left: 0.22rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAkCAYAAAAU/hMoAAADyElEQVRYhbWYW4hWVRTHf/PNmIxGNkLQlFpRBDqoBTpYCGaioBZdiAlE8QomEZEKgkz0qPQwilRiRi9CYA9KUWIXUckpwgcHvICGKBZNozLTTGjjZWZkwX/r4njO953L9/3hcNbZZ5+9/2ettddea9d1dHRQIywF3gceB74CNuadplQDfs8A3wN7gBlAM7ABeD3vgNUmuRk4ByyKedead9CGYpzuYjawA3i+TJ+beQcvqskxwKfALxUIGobzTlJEk23ANuCxAmOkQh5NPgHsA/YmEBwpoLUFwMvRRq9JW4kLFTLqNJn9xCDQDgyIVBfwcJmJRnISXAl8KXkt8HmU5HbFtCRsFcnWCgQp4OeTnbwLOA10hgFXVyD4P3Bb8rWcBNLgQ+CY6/cdUB9Ibsow0IUakrwBzAV69WwW+wiRzLI666tIygid0JYZYBZb7p5NgY0NzpRpMKmKJHcDTwNTtThXqd3MfApo0ZppKxUJsgWxXZ9bJFkBzHfD7VS78XujpNDzU8r5jiS0X3fySMow9AlwUGTqHGkifGYayVEZfO2lhPZjcnzcpGmw3P3QFGCa5D+AbsnjjORvcVE+I2ynGJ3ju8vAN+55npP/1P1mLfLJrOh0/Sc6+d8gGMnxwIsxA5sZeiQP6X4ogcB/ke+y4AHX94aTR3mSKJOOwvK/v9UWfHZeTD9Dn4sSaf0xYKaTu5z8SOAYSDbFfDw6RY4YMCnnnm3zviLZrHVA8ljFUEN91oEHU/a7laJPI/BDJMkJbjNL7w2XAsm6MtcYrUKUgfdyP2yCNWp9U0lLJeyVqYe1SNpd/2VOPhz+opyzWxb0pIhO10KLosX54prIKk1CqHnMzIudlcY5ksZrT9byoTuhfb7b1pq1H1fC28B7wEngV9f3C/2wafgM8Hsw92dAv9Ruye3PSjwDruqeJhmZIZ+qhCG5iQ9rVje95fbtD3Ar8l3lb01Stz2/wz2fDOGlt4zvlnSZiY4r/lkleTQFYcML8tOA/VLWfdVikm8+qKy82cXOJJSk+SYlyf0pSfrFdlFaJY7ko6oGh10hdsGVDQ8BfwETykw24uLuUykJGj6WqwypILzrWlGSPW4rjMNZTbxepxYD2o1sd5gDnNc3Zv4fIzliXwWSdjzzXNyLPIcDt/XXdjCwDvgH+Dqm3wJHeLd8LBeKZEG3dP5j21c00T3lkt9h+duqMmOVRTVStS3As6pNAlpi+uUu4qqVT1om/ap7DmHpW5cX5j53qtbRXxJe04slCXt+KtQyM7eSxBKSK6pdrOjKDuAOPki6XMLsoF8AAAAASUVORK5CYII=');
  background-size: .41rem .36rem;
}

.icon_music.muted {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAETklEQVRYhcWYa6hUVRTHf3O9pfUlk4QeZETRlx5gDz+EUBZXygiKnmhQZkEZUbsHQVRfKousdhS9o6JuBdFD4gpmQqUfkh6kUWGFSg8qK7M0r9rVO7Hif2S52WfOzJm59YeBmXX22fs/a6/1X2vvRrPZpECMkTHAJcB1wCHAy8BNZUuEEEpX7xsLZsKRwGLgReBE4CDgRuCcOpONFdFbga+BWZln0+pM2N89pz0wHXgYmNpizN/tTBRjnAg8CrwZQnitV0T3BRYC89sYO1o1IMY4A3gemAIMxBiX94LohTY3cHC3E8UYxwN3ATe4sJxsnu2G6GEieG7J86Y+aR7sKhl/LDAIHJfY/wBezxG1DD1TctJwi20HbgM2y3urgIkt/kgzY7NFlyQ2m/t64G5gQvLsXeCyEMJ3KdGHpHlluFdEp1WQJOPJdcD5wKfOdijwHHB6MnYHcAdwfwjh35jeTTTGOK+C5DZgp75vrSDpYVm+CLg8ee9i4DFg/2T8l8CcEMKqsn99SweLr29z3CZgrkgVJG0nXgJeSUhaqDxioZeSJNHRTrJ2XMVzS5iPgQuA753dy47HT+bxEEIav7vhPbqzbFAG6UIefyoxpjuS46WzyzLvLlKml5Ik8WilEFfA3l8DzAY+c1lfJjt/WR8CPNPO5N6jJkvvtEnqveS3xd+TwAnAaidpJtwfZkiuVJltiySJR/dqI/YKnOq+W2JdA7ztdqVMdiy8FgB3dhhqexD9ICMVrWCysxS4FPjdjSuTnbXqTVd2QrBA3TbPBPla9ZYFyTLZMTyrra5FEk80hDAJODkzxuJtg74XdXo58JT7PUOxOTt5dyNwHmDFZEu6Zi2iwuLMGNviHyXe25JnJjv3lcjOUmX8G852oLqtronmYrRfBE8Bhp39GGX0zck821WKz5CQF+vMVRE4qg7RqjZvozxm7dyIbA3pX67bse2fA3zhbAcALwAzO1CVSqKNivFlsmOy9KDawB3OPkXd0qS6BAukW99UG7cw462L5LGUpJXJAYVAQXKCTpxDvSBJxqN2crwSWOFK4H7SxTSjDa8CVynRCkyVfYuSqSdIiZ4kjxYo63Y2qxoNOpvFn7WKt8uj4zRfbe30SLe+INlKdlaodg8mdtPUBTqR9mlHPgL21rH3/V4SpYXsjOhiwbz8rWwNxecP7jA36mr+b9LhWQqh2vBHkVay85Vk5xNnsybmAeAKYJ8MgabT5cO7IUlBNMZYJju22BO62BpOno3Kk8sUMhaTk1UY1mpMQxVqwL23iRrojzGa7DyeqUob5K2hkml3uWJwNfCzsj3FTEf6abuiqUPUYvCsDMkhJUwZSY8R3Tcd4eK0wOdJ7M7TabQWUfPGGv0eli6eDfzS4Vz3qI77P3d0ZlytMtoXQtiqqmOt2/E6UtTFN/qTBRr6vKVbEureIP4XN84eVt2s0c6eOP+vG+cCp6lI/NrOsTgL4B8rSROh9dgi5AAAAABJRU5ErkJggg==');
}

.top_language_box {
  position: relative;
  margin-left: 0.22rem;
  font-family: 'tw', sans-serif !important;
}

.top_language {
  width: 100%;
  height: 100%;
  font-size: 0.24rem;
  line-height: 1;
  color: #fff;
  text-align: left;
}

.pc .top_language {
  font-size: 0.18rem;
}

.top_language p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: .2rem;
  color: #8e8e8e;
}

.top_language p span {
  text-align: center;
  padding-right: .1rem;
}

.top_language p::after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 0.25rem;
  height: 0.23rem;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAMAAADJPRQhAAAApVBMVEVHcEyOjo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6Ojo6aqzU0AAAANnRSTlMA5h8k4Pz+FdAgV/Ks+PpOMQb1dzebcoDu1wFuglj7X0aGAwzqE8kpZYQ+vIleI7uKwd+lwGD26WRDAAAA4ElEQVQoz3WS2RqCIBCFBzQty/ZssdLS9n3j/R+tGaDCIi6YmfNzgG8A4DP8mw/W4ZdF2f8DhBVJYEMaWBB3NXH5t6mikFsxxVn0RgpEMwU2QsQSXTWIPbGhOMalU0eiuwTHKSpjgD6G0qRw5KSEWh86HobzyACjPSpeB2BNK3rzN5j3aJc1pQdy1VoatGrkeKgiIdcuk3l2Ikfy2iCoY7lcYLZYYlYPPoc2QhSGHPgQY9gwL5q2UWIBw7mdFtu2reqOVrffHe0OJBh0f5+umSPIm7bnXjHBVvYv4lwco3oC7KggMHjFTzIAAAAASUVORK5CYII=') left top / 100% 100% no-repeat;
}

.top_language.single-lang p {
  cursor: default;
  pointer-events: none;
}

.top_language.single-lang p::after {
  display: none;
}

.top_lang_list,
.top_dl_change {
  display: none;
}

.top_language.open .top_lang_list {
  display: block;
}

.top_lang_list {
  position: absolute;
  left: 50%;
  top: 0.46rem;
  box-sizing: border-box;
  width: 1.35rem;
  max-height: 2.31rem;
  transform: translateX(-50%);
  padding-top: .08rem;
  box-sizing: border-box;
  background: url('./lan_xl_box-eo9i1XCq.png') no-repeat;
  background-position: center top;
  background-size: 1.35rem 2.31rem;
}

.top_lang_list li {
  width: 100%;
  height: 0.44rem;
  font-size: 0.2rem;
  line-height: 0.44rem;
  color: #858585;
  text-align: center;
  cursor: pointer;
  /* font-family: var(--font-bold); */
  font-weight: 700;
}

.top_lang_list li:last-child {
  border-bottom: none;
}

.top_lang_list li:hover,
.top_lang_list li.on {
  color: #ff0000;
  background: url('./lan_hov_bg-HNww5Olj.png') 50% 50% / 1.62rem 0.41rem no-repeat;
}

.user_login_bg {
  position: relative;
  max-width: 1.5rem;
}

.user_box {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.4;
  cursor: pointer;
}

.user_login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.top_user_name {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0.12rem;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log_sign {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.22rem;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAE/klEQVRYha2YeYiWVRTGf/NpajZCOaVZYzUtMxVTYc0UoU2ZlVZmglZUBtE6tv1R0Ub2RyuUDdgGBplQZkkYGYWFZUZEGwShbTa2qJk1Y+VSaTkTR54rp9v3fvd+Yw+88L53Oed5771nuzUdHR30ASWgFRgLtACNwP7AHhK1BVgLfAV8DCwFPgJ6qlXVv8rx9cC1wMXAyArjBgJDgaOAKWpbDcwDHgfW5CosZY6rk+BO4LYEuSKM1NxOyarLmZSzgudL4N5Ru22jbd0yYDmwCtisvlrgYKAZOBkYB+yuvgHANZJ7HfBCXwla36NAe9T+OTBTgrdUmG/nb7HG1orQzcAR6rcffh44Bbge+LuckKItHgy8FJHrAq7QqsxJkIuxWXNs7uWSFdAuXYNzCdrKzQcmuralOvBP9cUSHXpE1GS95donSud/drQcwceASe7bSJ0O/LgLxGKYrDMkO2CSdFckeAFwtft+ErgS2P4/kgvYLtmzXZvpvrCIYF30B2/K2noTig4D7gbeAX4CfgbeA+4HjkzM7ZVfXeLajMM+5Qje61xJl5xxauXuk7XOAE6SYJNxInA7sAJ4OCHDdEzTjyEHf09M8ABZV8CtwPqEYDOcOxJjDDcC7yfGrJcTD7hMnHYSnA7spvcvgLkJgU/Lf+XiBLmSSpgr3YjL9ECwpCUOmJlwJccCl1ZBLmCyokoRTOeDrs84lUJWUq/G34EFCUUz+kAu4K5E/4suABinViN4qhtgznNTBQG29BMK+lZnEBxdFDGETTrbAWON4HGuYVlCQQMwqKDvkcTPoZ/YMzHGc2gxgk2uYXlicqW/fwgYkph/qJ5KWOH6mozgCNfwbWLyD4n+HKxNjFnl3keUor9ObZFFiq/LtH8P3JJBbokS1krwHIbkZtQe5XzkrxnbSxTSslCKGWdM6igTAo/OdD+zM8Z4DgON4DrXcFCGgD+AszLGxZiilU6hwfcbwUXAJ8CnwLBMZW8oMoQ0vQboVzD2FyUeCzNlN8cEOyW8f+QTU3hZ9bDVFQcWZD4LNea5KuS2+Q8j9ZnOEFJ0Z4Y1B3zjEsyz5VNtNVdqlbdWQQydPx/ZdhD8UIV0vW4GpipbScHO1GTdHMwCXtMTMEAF0WhVd/MyZE51txNrAsEelX3h4LfIlRRl0g2yRlv14cDxIoiyapu3r7YWOfdpSuetDvmzQG5J2XXAs7h88F0ZyDD9cXOBkHE6Em0uqjSKVK+y6jZHLhDcqj7LlsYXyLaiaT+9b9NlwU6CXQpB5wLHqB6JMUaOdpDuXkYVKIrRovHofC7WSnoMV4EWwu6csMU+kliu1q332GXYxLcrkJivcJeD34DXXdLQT9sZCqVuGSoxwW4VPDVlLnbW6bzWFDwXyQNsKEPwAbetNS7dekXfVsWdJoMyPTe4hcq6PDLLPDMxpkY1x9AyfaOcngW6VDIcHm13k7b2Xz4zh2CKXMAzii4xJrgsvCEKBv4sHgKcF0/OyWae0LmxOLpRhuKDfjjYGzNktcpo/oraX5XD3xZP6MsVcKOK9V3FLLmzlfLDMekdqCYfDL7uS/fe6xLVc6L2Hvf0Ose/Qe9jVCa0F5GrluBNZbbgKlfLLor6vMV71MrnjZeRVEQ1l+gdegLs7Plcci+5CLvrs+s1O5Pm48y/WcH+gcZZjM5Gtbf8Hp6cwYzIVsTc0nfAJbqTsZuuvgH4Bzg+D3IpGz50AAAAAElFTkSuQmCC');
  background-size: .4rem .4rem;
}

.top_dl_change {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.56rem;
  box-sizing: border-box;
  justify-content: center;
  width: 2.58rem;
  height: 1.14rem;
  margin-left: .12rem;
  background: url('./lan_xl_box_login-2VhxpV0P.png') no-repeat;
  background-size: 100% 100%;
}

.top_dl_change .top_user_name {
  position: absolute;
  left: 0;
  top: .2rem;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  font-size: .2rem;
  color: #8e8e8e;
  font-size: .18rem;
}

.user_box.open .top_dl_change {
  display: flex;
}
/* .show 时展开显示切换/登出按钮 */
.top_dl_change.visible.show {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 按钮默认隐藏，.show 时显示 */
.top_dl_change.visible a {
  display: none;
}
.top_dl_change.visible.show a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* body.is-ingame .top_dl_change {
  display: none !important;
} */

/* 游戏内：不再提供「选择服务器」「退出登录」入口 */
body.is-ingame .top_dl_change a[data-i18n='switch'],
body.is-ingame .top_dl_change a[data-i18n='logout'] {
  display: none !important;
}

.top_dl_change a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.19rem;
  height: .36rem;
  margin: 0.62rem .03rem 0;
  color: #747474;
  font-size: 0.16rem;
  line-height: 0.36rem;
  text-align: center;
  background: url('./btn_bg-BmPP-Um1.png') left top / 100% 100% no-repeat;
}

.top_dl_change a:last-child {
  margin-bottom: 0;
}

.lang_ja .top_dl_change a {
  font-size: .14rem;
  line-height: .14rem;
}

.dialog-overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
}

.dialog-overlay.show {
  display: flex;
  animation: popupOverlayIn 0.36s ease-out both;
}

.dialog-overlay.show.closing {
  animation: popupOverlayOut 0.24s ease-in both;
}

.dialog-content {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left top;
}

.common_pop .dialog-content {
  width: 6.69rem;
  min-height: 6rem;
  background-image: url('./pop_bg3-DyphEnfd.png');
}

.pop-con {
  position: absolute;
  left: 50%;
  top: 45%;
  padding-top: 0.94rem;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.dialog-overlay.show .pop-con {
  animation: popupPanelIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dialog-overlay.show.closing .pop-con {
  animation: popupPanelOut 0.24s ease-in both;
}

.pc .dialog-overlay.show .pop-con {
  animation-name: popupPanelInPc;
}

.pc .dialog-overlay.show.closing .pop-con {
  animation-name: popupPanelOutPc;
}

@keyframes popupOverlayIn {
  from {
    background-color: rgba(0, 0, 0, 0);
  }
  to {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

@keyframes popupOverlayOut {
  from {
    background-color: rgba(0, 0, 0, 0.8);
  }
  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes popupPanelIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes popupPanelOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes popupPanelInPc {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes popupPanelOutPc {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialog-overlay.show,
  .dialog-overlay.show .pop-con,
  .dialog-overlay.show.closing,
  .dialog-overlay.show.closing .pop-con {
    animation-duration: 1ms;
  }
}

.rule_dialog .dialog-close-btn,
.server_role_pop .dialog-close-btn {
  position: absolute;
  top: .7rem;
  right: .12rem;
  width: .63rem;
  height: .62rem;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA+CAMAAACr3TNIAAADJmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkFFMEExM0VBRENBMTFGMUIyMTFBMjFGNDhCMjcxQzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkFFMEExM0ZBRENBMTFGMUIyMTFBMjFGNDhCMjcxQzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQUUwQTEzQ0FEQ0ExMUYxQjIxMUEyMUY0OEIyNzFDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQUUwQTEzREFEQ0ExMUYxQjIxMUEyMUY0OEIyNzFDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pny2Up0AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABsFBMVEVHcEwAAAAAAAAAAAAAAAAAAAD39/cpJygAAAAAAAAsKisAAAAAAAAAAAAAAACUk5T39/f29vbQ0ND39/eura0AAAAAAAAAAAAAAABUUlNOTE0/PT5WVVYAAABhYWG7uru6uroAAAAAAABQTk8AAAAAAABBQUEAAAAAAAAAAAAAAAAAAAAAAAAAAABAP0AAAACCFAxSUVEvLS4AAAAAAAAAAAAAAAAAAAAAAAAAAABHRUYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/v785NzhLSktubG21tLUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABCQkIAAAAAAACfnp+dnJz39/fNzMycm5zGxcb09PTKyspkYmNgXl+gn6DLysvIx8cxLzBKSElCQEFcW1s0MjPT0tLx8fH39/dFQ0SpqKiYl5fT0tLi4eHv7++KiIl6eXri4uIyMjIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDFAyFFAxFRUVDQ0NpaWlhYWGFhYXDHhJ8fHwLe6hnAAAAjHRSTlMAbQKPSzDuTQgXTgapvAR26+eo7YgWFA4uWldpWgr6lJMMHVghEvA/JiNKRiy1Uzi/WU4lMWqTpJaoVUNSXU1afIOespdRV2OONWQQSLhBjihnOmFZimt5iKug75SnfXzqpXue5KJfXn6kn09WVFxQrdvsVYN4rMLbcWnCqzemhoywu7piZXa9uunsUFtRNhMAAAL9SURBVEjH3dfnX9pAGAfwEEYgadNhMwRByiizUBXBLe6697Z7772H3ZPEf7l3uQARs33X542Bj9/f5XKXD/dgGI7jNE1RlNdKgf+naSAxwGkqyMVZxqdSfwWdClIgAcNpLycIFfXa0/Ms56WBpzifIBCWSxBiPo7CMTrIxiqEHV+IsUEao7kIb8/38hGOxqh4Km/P9+VTcQqj2GTCnu9PJFngmWzGnp/KZBkK8/r4tD3fmeZ9XuDdLnve4XL/n76nfknWrp6Z9levH6teRluqAa2vJ0z6S5c9J+SAaLNfDmht8jyZMOeveDxyQLSZJFAA4J7jz8158qQc8MAP6XiPzE+ZnX8toFpqXO/5NwSoct313xegzvX3jyJAg+v7e7UAmbeTVnw0h+7gLkG8RKOPtZDmPVx3GHAHzuQxunl/Y4C2lziQt9GjeIO+bQzQ9Llb7aov3MP7JsevjvQWfbyJ/rQ1k2bnjwLCT8/DD6NoGRs5sfde+/n7c4A3eZpAwChaxrFGTlScOuvfDrm0cPI+OLj+ur7GD75Mpny4vmm1AvR8WLnnNQJ0fHj/K6MeoO2rvEd65tFx9QBNXx8d7oM2+V04EKDlH72q37y/Rd42UsA1c+Pn3tXn7q9uGxBww+z8cy9Ufn/Ii5b2j3FBf4jf/0Bl/jDnh0Do9+qifH6x4QOhP8NDy3MLrD0fCG1vdq2vLMHzmw0fCJ0Z2dpYGyjA86N1D/jZkvPXYCLJBHHrHvILxZ/ijDsyTVn3kHfvnBPFSXh8tuwl3gW42MGcBsNb9HUuQi55C+dXae47EhcRR+dn07U9UioiLiIund/7y8XS59mjBvXl6+zI5paz/H0g3yHfPPSgf+hzDBWHPx4xqu7ScNfGj2+uDwou9S+9g47y7ienUc2vDq2vDc5MKrnUPxV6+/qnOh1G1bm4vDKQcMeUXOrfYnw+kUm7jCqdmVsqJCOskkv9IxtJJbO826B4PruQijDTQSXX718bimHjHOpaMWWA6f4Zds34fv0PaBQ7pKhtIkkAAAAASUVORK5CYII=') left top / 100% 100% no-repeat;
}

.dialog-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .55rem;
  line-height: .55rem;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYYAAAA3CAMAAAA/vx2zAAADJmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlEQjI1OUFBRENBMTFGMTgzQjE5QjE4QjUwQTgxMTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlEQjI1OUJBRENBMTFGMTgzQjE5QjE4QjUwQTgxMTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3OURCMjU5OEFEQ0ExMUYxODNCMTlCMThCNTBBODExNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3OURCMjU5OUFEQ0ExMUYxODNCMTlCMThCNTBBODExNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Poh3RGMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAY1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////80LMUcAAAAIXRSTlMAAgMGARkYGjMXFgQVExQFBw0JDggMERASCw8KHyQnHhsR2YQlAAADU0lEQVR42u2c2XKrMBBEbbCdQPAGtsFLlv//ylvlq4FGltm1Ij2lpqaiqA8jUEvRYuGbrvZZtdrPvnkMHoPHYBSGSwQtZMknDN5YcLWDYByw6BlTrywYxBDcrVg0x9QTC4YYvFBXW+zqi0XvmHpkwWUCwWTJohmm3lnwC/+qLQkzqQDnNgG+n+2nxFBkz3b9gJbT0DYQ3FB/N0yl/vZrCMbU3xZTDyyYYrCgoUUQXJPgR0zNSEXsKiLBC0xNWfCAwR11lWB0z6JaBHiUGMLXoZW/RDi0EwbpWVrFqCIN7Yyp9CwFtaGRijmmUjGFGEzor9qJhnbHIBXTssaWVMww9Shkq0oADkP9AQnVPSCn7kNrrJBAWCEXTL2L2IorJGxkO6EAHIbjyAekvfjXPYq/sUJqQ2uukKGznzoB6hg6FH8oo/hHV4jC2U+KAH+IocfrsUfxH7oXv8LZT1whsSYBzohh7OtROLSlkG0mpfilVMhegQAhYOjxemwfWo/XYzm0ZFjxb8ye/boIABjMXBx0KP7UyNmvlwCAwS8OWtlKE6DCkMv+NrZzcRB1FmDM7Fdh+J3QGVgPcAbaFwexlMWBEdZIheEhu/i9NfJeACEGZxYH1sx+IgyTfRvLcQZiB60RAQZZ38beGnkvgADDZM7A7K2R7gKkLxiMeT3OyRr54DHI+zb21sh7tg8egwPOQO/FgX5rhMdgzbahW9YIh8GebUO39k05DHK+jb010iZAHYNFxe+WNVLD0KP4tW8bumWNIIbm4g/UOQPzs0YQg1Xbhm5ZI4DBGWfAwtmvwvBr17ahLdZINwEqDLlwaMZuG6qyRhZKrBH+KLG+bcNZWyMvGCxyBhyyRngMMz1Rrdsa4TDM9US1bmuEwzDXE9Via0SdAHUMsz1Rrdsa2SAGMxcHcqwRhfumHbyhE2IYWPwOnKjWbY3gwfoZn6jWPfsBhqHOgAsnqkdZI5fxs1+F4dDj9TjQGdh5a+SNNVJhSIx0Bqz8Z/P+AohPdPt/NlcsgBCDPzShWgAhhqmcgcBbI63WyOZ5U0lRYvj5f5dJFEV54wUp1+4XpNxab4ghFRcFdkVDSzE1a7wh5th+Q8yq6YaYAwYlC4Cphb9PyYjmMXgMvnkMprZ/uvqSBab3oE4AAAAASUVORK5CYII=') left top / 100% 100% no-repeat;
  background-position: center;
  background-size: 3.90rem .55rem;
  background-repeat: no-repeat;
}

.dialog-title span {
  color: #ececec;
  font-family: 'twbold', serif;
  font-size: 0.3rem;
  text-align: center;
}

.lang_en .dialog-title span {
  font-family: 'enbold', serif;
}

.lang_ja .dialog-title span {
  font-family: 'jpbold', serif;
}

.lang_ko .dialog-title span {
  font-family: 'krbold', serif;
}

.dialog-body {
  flex: 1;
  margin: 0.15rem auto 0;
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.75;
  text-align: center;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.dialog-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.37rem;
  height: 0.74rem;
  margin-left: .18rem;
  background: url('./btn_submit-0620IE1O.png') left top / 100% 100% no-repeat;

  &.disabled {
    filter: grayscale(1);
  }
}

.dialog-confirm-btn span {
  font-size: 0.32rem;
  color: #ffffff;
}

.server_role_pop .dialog-confirm-btn {
  width: 3.37rem;
  height: 0.74rem;
}

.rule_dialog .dialog-content {
  width: 7.49rem;
  height: 8.27rem;
  background-image: url('./pop_bg2-BLL_ubEm.png');
}

.pc .rule_dialog .dialog-content {
  transform: scale(0.8) translate(-50%, -50%);
}

.dia_time {
  width: 4.88rem;
  height: 0.44rem;
  margin: 0.5rem auto 0;
  color: #fff;
  font-size: 0.18rem;
  line-height: 0.24rem;
}

.lang_th .dia_time {
  height: 0.64rem;
  font-size: 0.24rem;
  line-height: 0.32rem;
}

.dia_rule_box {
  box-sizing: border-box;
  width: 5.38rem;
  height: 5.4rem;
  margin: 0.6rem 0 0 1.1rem;
  padding-right: 0.34rem;
  overflow: hidden auto;
  color: #cccbcb;
  font-size: 0.24rem;
  line-height: 0.34rem;
  text-align: left;
}

.lang_en .dia_rule_box,
.lang_ja .dia_rule_box {
  font-size: 0.22rem;
}

.dia_rule_p {
  margin-bottom: 0.36rem;
}

.dia_rule_p strong {
  display: block;
  margin-bottom: 0.14rem;
  color: #fff;
  font-weight: normal;
}

.dia_rule_p p {
  text-indent: 0.24rem;
}

.lang_ko .dia_rule_p p {
  text-indent: 0;
}

.dia_rule_box::-webkit-scrollbar {
  width: 0.07rem;
  height: 0.07rem;
}

.dia_rule_box::-webkit-scrollbar-track {
  /* background: url('../ossweb-img/prg_line.png') 50% 0 / 0.04rem 100% no-repeat; */
  background: #272727;
}

.dia_rule_box::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
  background-color: #4f4f4f;
}

.pop_serv_line {
  display: none;
  width: 4.24rem;
  height: 0.03rem;
  margin: 0.1rem auto 0;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAagAAAADCAYAAADGHptZAAAACXBIWXMAAAsTAAALEwEAmpwYAAABQUlEQVRYhe3XTU6DQBjG8b/GWEp142dS++FG0cOI1/IWnsLWmyh2I1WrtuoZXMwkvpmUMINDgegsfyEvDw8kw6yNr69C4BLYBEbAArWKeAy0/ri3dT8+PAaCmnkbuPHkI2Du2QPdp4vHqPeZ5WPgvaHe0c/176qfN+0t1Pfg4jGwVaHfAq818AtgexW+DgyBHR3khJ81KOC7OX4qvC88qpnL/McV+l6Oyz6Hjj6w8GiJdzz6svua3nP0fgHfz3HZf6/GLvMfaQ8b6t2S3SZPZPiB9rOKPCuPq8v5XQs/N/xwVb4BpMAX6kQ0ERdOS/AH4U/CE8M/UTtpFR4Y+R8dPXV01/nSZZ+po08tPHF0c84H6sTyG38u6KFHnzTEZf6XAr5AbXR18FnJbpMnyfB7R8+aU5XLnDMLvzN8jvqBLd2/AdbWaeTfGwkUAAAAAElFTkSuQmCC') left top / 100% 100% no-repeat;
}

.server_role_pop .pop_item {
  width: 3.16rem;
  margin: 0.8rem auto 0;
}

.server_role_pop .pop_item:last-child {
  margin-top: 0.3rem;
}

.pop_lable {
  display: none;
  width: 100%;
  height: 0.44rem;
  color: #e59d5d;
  font-size: 0.24rem;
  line-height: 0.28rem;
  text-align: left;
}

.pop_select_item {
  position: relative;
  width: 100%;
  height: 0.47rem;
  z-index: 1;
}

.pop_select_item1 {
  z-index: 2;
}

.pop_select {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 0.08rem;
  cursor: pointer;
}

.pop_select::after {
  content: '';
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  width: 0.21rem;
  height: 0.13rem;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAANCAYAAABGkiVgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExODcwQ0M0QURDQTExRjFBNjQ0RUY2NjVEMTNBQ0U0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExODcwQ0M1QURDQTExRjFBNjQ0RUY2NjVEMTNBQ0U0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTE4NzBDQzJBRENBMTFGMUE2NDRFRjY2NUQxM0FDRTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTE4NzBDQzNBRENBMTFGMUE2NDRFRjY2NUQxM0FDRTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7t5ADEAAABVElEQVR42pySzytEURTH77wmsbOxE2VrKWLFwh8gSoqF50ehWdpZWChKKRQbIhuS2CkWyoKQBWVvIZTMemQ0+Jw6l9P1xsi3Pq97zj33+86756XiOF51zg26b51BGxRgC+rcT51DBsrgBBrN3kqaxxjUQ7MmW2ABRmEGTqHCHMpCp66XA0OpzUQ88tAFD2ZzBGK40o683qEP7mAo+MJ79clHmnj0CVMkXTTAGqxrbgoOoQmWTO2Ldv8kQWQ2LrRDr3LYgyrtdk5NJd7V+/SSq7r0QRQMQDpaNHENbMIrjGtuB6pNzTxsWJMoYbJy+NjE7Tow0Sy0mr0j87IvpRNM36BbP6fWvKgShk3dLfTor+dKdSp6hg7IaZwKDHO6n006XMxUdA0D8BHkJe6Hm2IHfzMVbes9Wk3rsNx/TUUTcKDrfZgsdeAvpgUdiBj2Jg0m1KcAAwDOqkW9LyqZ2gAAAABJRU5ErkJggg==') left top / 100% 100% no-repeat;
}

.pop_select.open {
  height: auto;
}

.pop_select_p {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0.47rem;
  overflow: hidden;
  color: #000000;
  font-size: 0.18rem;
  line-height: 0.47rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01rem;
  background: url('./input_bg-BQkwpd-P.png') left top / 100% 100% no-repeat;
}

.pop_option {
  position: relative;
  display: none;
  box-sizing: border-box;
  width: 2.98rem;
  left: .1rem;
  margin: 0 auto;
  border: 1px solid #272727;
  background-color: #4f4f4f;
}

.pop_select.open .pop_option {
  display: block;
}

.pop_option li {
  box-sizing: border-box;
  width: 2.26rem;
  height: 0.47rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.18rem;
  line-height: 0.47rem;
  text-align: center;
  white-space: nowrap;
}

.pop_option li.on {
  background: linear-gradient(to right, transparent, rgba(17, 15, 15, 0.7), transparent);
}

.gloading {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.gloading svg {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin: -0.59rem 0 0 -0.59rem;
  animation: rotate 2.2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

#forhorview {
  position: fixed;
  z-index: 1002;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  background: #000;
}

#forhorview.show {
  display: flex;
}
@font-face {
  font-family: 'StartupLoadingNumber';
  src: url('./numberCommon-C8NBuGMn.ttf') format('truetype');
  font-display: swap;
}

.startup-loading {
  --startup-progress: 0%;
  position: absolute;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #090809;
  color: #f05045;
}

.startup-loading.is-complete {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.startup-loading__canvas {
  position: relative;
  flex: none;
  width: 7.5rem;
  height: 16.24rem;
  background: #0b090b url('./background-DeFLg1iw.jpg') center / 100% 100% no-repeat;
}

/* The source artwork uses a 750 × 1624 canvas. */
.startup-loading__title {
  position: absolute;
  top: 6.33rem;
  left: 1.96rem;
  width: 3.59rem;
  height: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: .01rem solid rgba(106, 103, 102, .18);
  background: rgba(19, 18, 19, .35);
  color: #b7b3b1;
  font-family: 'StartupLoadingNumber';
  font-size: .3rem;
  font-weight: 300;
  letter-spacing: .24rem;
  text-indent: .13rem;
  line-height: 1;
}

.startup-loading__stripe {
  position: absolute;
  top: 7.06rem;
  left: 0;
  width: 7.5rem;
  height: .93rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: .01rem solid rgba(158, 43, 37, .4);
  border-bottom: .01rem solid rgba(158, 43, 37, .4);
  background: repeating-linear-gradient(125deg,
    rgba(70, 24, 23, .87) 0 .24rem,
    rgba(13, 10, 12, .89) .24rem .48rem);
}

.startup-loading__stripe::before,
.startup-loading__stripe::after {
  content: '';
  position: absolute;
  top: .33rem;
  width: .01rem;
  height: .28rem;
  background: #f05045;
}

.startup-loading__stripe::before { left: 2.34rem; }
.startup-loading__stripe::after { right: 2.34rem; }

.startup-loading__stripe span {
  position: relative;
  z-index: 1;
  min-width: 1.5rem;
  padding: 0 .08rem;
  text-align: center;
  font-family: 'StartupLoadingNumber', 'Arial Narrow', sans-serif;
  font-size: .6rem;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 .05rem rgba(221, 57, 45, .35);
}

.startup-loading__track {
  position: absolute;
  top: 8.31rem;
  left: .6rem;
  width: 6.32rem;
  height: .33rem;
  background: url('./track-D5adfv0P.png') center / 100% 100% no-repeat;
}

.startup-loading__fill {
  position: absolute;
  top: .035rem;
  left: .04rem;
  width: 6.28rem;
  height: .26rem;
  background: url('./fill-ALO2yQ2C.png') left center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--startup-progress)) 0 0);
  transition: clip-path 220ms ease;
}

.startup-loading__rule {
  position: absolute;
  top: 8.77rem;
  left: .54rem;
  width: 6.52rem;
  height: .01rem;
  background: rgba(225, 56, 47, .75);
}

.startup-loading__front {
  position: absolute;
  inset: auto 0 0;
  height: 1.76rem;
  background: url('./front-DOFOBBvx.png') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.pc .startup-loading {
  display: block;
}

.pc .startup-loading__canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* Fill the PC wrapper (4.42rem × 9.38rem) without clipping the bottom frame. */
  transform: scale(var(--pc-page-scale), .5775862069);
  transform-origin: left top;
}

@media (prefers-reduced-motion: reduce) {
  .startup-loading.is-complete,
  .startup-loading__fill { transition: none; }
}
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 0.24rem;
  transform: translate(-50%, -50%);
  transition: transform 0.3s, opacity 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 3.8rem;
  padding: 0.2rem;
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  border: 1px solid #444444;
  border-radius: 0.2rem;
  opacity: 0;
  z-index: 999999;
  animation: fadeIn_toast ease-in-out 0.3s forwards 1;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
@keyframes fadeIn_toast {
from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
}
to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
}
.home[data-v-f30e95cd] {
  position: relative;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.home-video[data-v-f30e95cd] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.home-video video[data-v-f30e95cd] {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.home-video__loop[data-v-f30e95cd] {
  opacity: 0;
}
.home-video__loop.is-playing[data-v-f30e95cd] {
  opacity: 1;
}
.home-slogan[data-v-f30e95cd] {
  position: absolute;
  z-index: 1;
  top: 3.55rem;
  left: 50%;
  max-width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-slogan--stage3[data-v-f30e95cd] {
  top: 2.8rem;
}
.boss-select[data-v-f30e95cd] {
  z-index: 1;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 2.6rem;
  width: 100%;
  pointer-events: none;
}
.boss-select .boss-select-item[data-v-f30e95cd] {
  position: relative;
  flex-shrink: 0;
  width: 1.76rem;
  height: 1.54rem;
  cursor: auto;
  margin: 0 -0.2rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.boss-select .boss-select-item.act .name[data-v-f30e95cd] {
  color: #ecd576;
  text-shadow: none;
  text-shadow: 0 -0.02rem 0.01rem rgba(219, 140, 0, 0.1), 0 0.02rem 0.01rem rgba(219, 140, 0, 0.1), -0.02rem 0 0.01rem rgba(219, 140, 0, 0.1), 0.02rem 0 0.01rem rgba(219, 140, 0, 0.1), -0.02rem -0.02rem 0.01rem rgba(219, 140, 0, 0.1), 0.02rem -0.02rem 0.01rem rgba(219, 140, 0, 0.1), -0.02rem 0.02rem 0.01rem rgba(219, 140, 0, 0.1), 0.02rem 0.02rem 0.01rem rgba(219, 140, 0, 0.1);
}
.boss-select .boss-select-item.locked[data-v-f30e95cd] {
  filter: grayscale(1);
}
.boss-select .boss-select-item.locked .name[data-v-f30e95cd] {
  color: #fff;
}
.boss-select .boss-select-item .zs[data-v-f30e95cd] {
  position: absolute;
  width: 1.74rem;
  height: 1.45rem;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.boss-select .boss-select-item[data-v-f30e95cd]:nth-child(odd) {
  margin-top: -0.76rem;
}
.boss-select .boss-select-item:nth-child(odd) .name[data-v-f30e95cd] {
  bottom: auto;
  top: 1.76rem;
}
.boss-select .boss-select-item:nth-child(even) .zs[data-v-f30e95cd] {
  top: -1.4rem;
  transform: translateX(-50%) rotate(180deg);
}
.boss-select .progress[data-v-f30e95cd] {
  position: absolute;
  top: 1rem;
  width: 100%;
  text-align: center;
  font-size: 0.4rem;
  color: #ffffff;
  font-family: 'numberCommon';
}
.boss-select .name[data-v-f30e95cd] {
  position: absolute;
  bottom: 1.76rem;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.2rem;
  box-sizing: border-box;
  color: #e06969;
  line-height: 0.26rem;
  word-break: keep-all;
  font-family: var(--font-bold);
  text-shadow: 0 -0.02rem 0.01rem rgba(255, 21, 0, 0.1), 0 0.02rem 0.01rem rgba(255, 21, 0, 0.1), -0.02rem 0 0.01rem rgba(255, 21, 0, 0.1), 0.02rem 0 0.01rem rgba(255, 21, 0, 0.1), -0.02rem -0.02rem 0.01rem rgba(255, 21, 0, 0.1), 0.02rem -0.02rem 0.01rem rgba(255, 21, 0, 0.1), -0.02rem 0.02rem 0.01rem rgba(255, 21, 0, 0.1), 0.02rem 0.02rem 0.01rem rgba(255, 21, 0, 0.1);
}
.stage-boss[data-v-f30e95cd] {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 2.86rem;
  width: 100%;
  height: 1.54rem;
  pointer-events: none;
}
.stage-boss--locked[data-v-f30e95cd] {
  filter: grayscale(1);
}
.stage-boss__stripe[data-v-f30e95cd] {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 100%;
  height: 1.06rem;
  background-position: center;
  background-size: 100% 100%;
}
.stage-boss__content[data-v-f30e95cd] {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5.02rem;
  height: 1.54rem;
  transform: translateX(-50%);
  background-position: center;
  background-size: 100% 100%;
}
.stage-boss__name[data-v-f30e95cd] {
  position: absolute;
  top: 0.24rem;
  left: 1.56rem;
  display: flex;
  align-items: center;
  height: 0.65rem;
  color: #fff;
  font-family: var(--font-bold);
  font-size: 0.3rem;
  line-height: 0.33rem;
  word-break: keep-all;
}
.stage-boss__percent[data-v-f30e95cd] {
  position: absolute;
  top: 0.38rem;
  right: 0.15rem;
  color: #f4554c;
  font-family: 'numberCommon';
  font-size: 0.48rem;
  line-height: 0.49rem;
}
.stage-boss__progress[data-v-f30e95cd] {
  position: absolute;
  top: 1.05rem;
  left: 1.4rem;
  width: 3.38rem;
  height: 0.26rem;
  overflow: hidden;
}
.stage-boss__progress-fill[data-v-f30e95cd] {
  height: 100%;
  background-position: left center;
  background-size: 3.44rem 0.26rem;
  background-repeat: no-repeat;
}
.btn-start[data-v-f30e95cd] {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 4.03rem;
  height: 2.09rem;
  margin-left: -0.04rem;
  font-size: 0.42rem;
  color: #fff;
  text-align: center;
  line-height: 2.09rem;
  font-family: var(--font-bold);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.zs[data-v-f30e95cd] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.76rem;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.home > .zs[data-v-f30e95cd] {
  z-index: 1;
}
.home-slogan[data-v-f30e95cd],
.boss-select[data-v-f30e95cd],
.stage-boss[data-v-f30e95cd],
.btn-start[data-v-f30e95cd],
.home > .zs[data-v-f30e95cd] {
  animation: home-ui-fade-in-f30e95cd 0.6s ease-out both;
}
.boss-select[data-v-f30e95cd],
.stage-boss[data-v-f30e95cd],
.home > .zs[data-v-f30e95cd] {
  animation-delay: 0.12s;
}
.btn-start[data-v-f30e95cd] {
  animation-delay: 0.24s;
}
@keyframes home-ui-fade-in-f30e95cd {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.home-slogan[data-v-f30e95cd],
  .boss-select[data-v-f30e95cd],
  .stage-boss[data-v-f30e95cd],
  .btn-start[data-v-f30e95cd],
  .home > .zs[data-v-f30e95cd] {
    animation: none;
}
}
.home--returning .home-slogan[data-v-f30e95cd],
.home--returning .boss-select[data-v-f30e95cd],
.home--returning .stage-boss[data-v-f30e95cd],
.home--returning .btn-start[data-v-f30e95cd],
.home--returning > .zs[data-v-f30e95cd] {
  animation: none;
}
.lang_th .stage-boss .stage-boss__name[data-v-f30e95cd] {
  font-size: 0.28rem;
}
.lang_en .stage-boss .stage-boss__name[data-v-f30e95cd] {
  font-size: 0.24rem;
}
/*! 
 * OverlayScrollbars
 * Version: 2.17.0
 * 
 * Copyright (c) Rene Haas | KingSora.
 * https://github.com/KingSora
 * 
 * Released under the MIT license.
 */
.os-size-observer,
.os-size-observer-listener {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

.os-size-observer,
.os-size-observer-listener,
.os-size-observer-listener-item,
.os-size-observer-listener-item-final {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

.os-size-observer {
  z-index: -1;
  contain: strict;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: inherit;
  border: inherit;
  box-sizing: inherit;
  margin: -133px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0.1);
}
.os-size-observer::before {
  content: "";
  flex: none;
  box-sizing: inherit;
  padding: 10px;
  width: 10px;
  height: 10px;
}

.os-size-observer-appear {
  animation: os-size-observer-appear-animation 1ms forwards;
}

.os-size-observer-listener {
  box-sizing: border-box;
  position: relative;
  flex: auto;
  padding: inherit;
  border: inherit;
  margin: -133px;
  transform: scale(calc(1 / 0.1));
}
.os-size-observer-listener.ltr {
  margin-right: -266px;
  margin-left: 0;
}
.os-size-observer-listener.rtl {
  margin-left: -266px;
  margin-right: 0;
}
.os-size-observer-listener:empty::before {
  content: "";
  width: 100%;
  height: 100%;
}
.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item {
  display: block;
  position: relative;
  padding: inherit;
  border: inherit;
  box-sizing: content-box;
  flex: auto;
}

.os-size-observer-listener-scroll {
  box-sizing: border-box;
  display: flex;
}

.os-size-observer-listener-item {
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr;
  flex: none;
}

.os-size-observer-listener-item-final {
  transition: none;
}

@keyframes os-size-observer-appear-animation {
  from {
    cursor: auto;
  }
  to {
    cursor: none;
  }
}
.os-trinsic-observer {
  flex: none;
  box-sizing: border-box;
  position: relative;
  max-width: 0px;
  max-height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
  height: 0;
  top: calc(100% + 1px);
  contain: strict;
}
.os-trinsic-observer:not(:empty) {
  height: calc(100% + 1px);
  top: -1px;
}
.os-trinsic-observer:not(:empty) > .os-size-observer {
  width: 1000%;
  height: 1000%;
  min-height: 1px;
  min-width: 1px;
}

/**
 * hide native scrollbars
 * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
 */
/**
 * body element
 */
html[data-overlayscrollbars-body] {
  overflow: hidden;
}

html[data-overlayscrollbars-body],
html[data-overlayscrollbars-body] > body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html[data-overlayscrollbars-body] > body {
  overflow: visible;
  margin: 0;
}

/**
 * structure setup 
 */
[data-overlayscrollbars] {
  position: relative;
}

[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  display: flex;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  scroll-behavior: auto !important;
}

[data-overlayscrollbars-padding],
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  box-sizing: inherit;
  position: relative;
  flex: auto;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 0;
}

[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]) {
  --os-vaw: 0;
  --os-vah: 0;
  outline: none;
}
[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus {
  outline: none;
}
[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  min-width: 1px;
  min-height: 1px;
  width: var(--os-vaw);
  height: var(--os-vah);
}

/**
 * wrapper elements overflow:
 */
[data-overlayscrollbars~=host],
[data-overlayscrollbars-padding] {
  overflow: hidden !important;
}

[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],
[data-overlayscrollbars-padding~=noClipping] {
  overflow: visible !important;
}

/**
 * viewport overflow:
 */
[data-overlayscrollbars-viewport] {
  --os-viewport-overflow-x: hidden;
  --os-viewport-overflow-y: hidden;
  overflow-x: var(--os-viewport-overflow-x);
  overflow-y: var(--os-viewport-overflow-y);
}

[data-overlayscrollbars-viewport~=overflowXVisible] {
  --os-viewport-overflow-x: visible;
}

[data-overlayscrollbars-viewport~=overflowXHidden] {
  --os-viewport-overflow-x: hidden;
}

[data-overlayscrollbars-viewport~=overflowXScroll] {
  --os-viewport-overflow-x: scroll;
}

[data-overlayscrollbars-viewport~=overflowYVisible] {
  --os-viewport-overflow-y: visible;
}

[data-overlayscrollbars-viewport~=overflowYHidden] {
  --os-viewport-overflow-y: hidden;
}

[data-overlayscrollbars-viewport~=overflowYScroll] {
  --os-viewport-overflow-y: scroll;
}

[data-overlayscrollbars-viewport~=overflowImportant] {
  overflow-x: var(--os-viewport-overflow-x) !important;
  overflow-y: var(--os-viewport-overflow-y) !important;
}

/**
 * viewport state modifiers:
 */
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) {
  font-size: 0 !important;
  line-height: 0 !important;
}

[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::before,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)::after,
[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId) > *:not(#osFakeId) {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

[data-overlayscrollbars-viewport~=noContent][data-overlayscrollbars-viewport~=contentOverflow]:not(#osFakeId)::after {
  content: "";
  display: block !important;
  min-width: 200% !important;
  min-height: 200% !important;
  margin: 0 !important;
  clip: auto !important;
}

[data-overlayscrollbars-viewport~=measuring],
[data-overlayscrollbars-viewport~=scrolling] {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible] {
  overflow-x: hidden !important;
}

[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible] {
  overflow-y: hidden !important;
}

[data-overlayscrollbars-viewport~=noScrollbars]:not(#osFakeId) > .os-scrollbar,
[data-overlayscrollbars-viewport~=measuring]:not(#osFakeId) > .os-scrollbar {
  display: none !important;
}

/**
 * content element:
 */
[data-overlayscrollbars-content] {
  box-sizing: inherit;
}

/**
 * Display contents to bridge any flickering during deferred initialization.
 */
[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
  display: contents;
}

/**
 * optional & experimental grid mode
 */
[data-overlayscrollbars-grid],
[data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
  display: grid;
  grid-template: 1fr/1fr;
}

[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
  height: auto !important;
  width: auto !important;
}

@property --os-scroll-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-viewport-percent {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-scroll-direction {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --os-scroll-percent-directional {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.os-scrollbar {
  --os-viewport-percent: 0;
  --os-scroll-percent: 0;
  --os-scroll-direction: 0;
  --os-scroll-percent-directional: calc(
    var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) *
      var(--os-scroll-direction)
  );
}

.os-scrollbar {
  contain: size layout;
  contain: size layout style;
  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

body > .os-scrollbar {
  position: fixed;
  z-index: 99999;
}

.os-scrollbar-transitionless {
  transition: none !important;
}

.os-scrollbar-track {
  position: relative;
  padding: 0 !important;
  border: none !important;
}

.os-scrollbar-handle {
  position: absolute;
}

.os-scrollbar-track,
.os-scrollbar-handle {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,
.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle {
  pointer-events: auto;
  touch-action: none;
}

.os-scrollbar-horizontal {
  bottom: 0;
  left: 0;
}

.os-scrollbar-vertical {
  top: 0;
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-horizontal {
  right: 0;
}

.os-scrollbar-rtl.os-scrollbar-vertical {
  right: auto;
  left: 0;
}

.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden {
  opacity: 0;
  visibility: hidden;
}

.os-scrollbar-interaction.os-scrollbar-visible {
  opacity: 1;
  visibility: visible;
}

.os-scrollbar-unusable,
.os-scrollbar-unusable *,
.os-scrollbar-wheel,
.os-scrollbar-wheel * {
  pointer-events: none !important;
}

.os-scrollbar-unusable .os-scrollbar-handle {
  opacity: 0 !important;
  transition: none !important;
}

.os-scrollbar-horizontal .os-scrollbar-handle {
  bottom: 0;
  left: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateX(calc(var(--os-scroll-percent-directional) * -100%));
  width: calc(var(--os-viewport-percent) * 100%);
}

.os-scrollbar-vertical .os-scrollbar-handle {
  right: 0;
  top: calc(var(--os-scroll-percent-directional) * 100%);
  transform: translateY(calc(var(--os-scroll-percent-directional) * -100%));
  height: calc(var(--os-viewport-percent) * 100%);
}

@supports (container-type: size) {
  .os-scrollbar-track {
    container-type: size;
  }
  .os-scrollbar-horizontal .os-scrollbar-handle {
    left: auto;
    transform: translateX(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-vertical .os-scrollbar-handle {
    top: auto;
    transform: translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%));
  }
  .os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle {
    right: auto;
    left: 0;
  }
}
.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle {
  right: auto;
  left: 0;
}

.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl {
  left: 0;
  right: 0;
}

.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
  top: 0;
  bottom: 0;
}

@media print {
  .os-scrollbar {
    display: none;
  }
}
.os-scrollbar {
  --os-size: 0;
  --os-padding-perpendicular: 0;
  --os-padding-axis: 0;
  --os-track-border-radius: 0;
  --os-track-bg: none;
  --os-track-bg-hover: none;
  --os-track-bg-active: none;
  --os-track-border: none;
  --os-track-border-hover: none;
  --os-track-border-active: none;
  --os-handle-border-radius: 0;
  --os-handle-bg: none;
  --os-handle-bg-hover: none;
  --os-handle-bg-active: none;
  --os-handle-border: none;
  --os-handle-border-hover: none;
  --os-handle-border-active: none;
  --os-handle-min-size: 33px;
  --os-handle-max-size: none;
  --os-handle-perpendicular-size: 100%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0;
}

.os-scrollbar-track {
  border: var(--os-track-border);
  border-radius: var(--os-track-border-radius);
  background: var(--os-track-bg);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}
.os-scrollbar-track:hover {
  border: var(--os-track-border-hover);
  background: var(--os-track-bg-hover);
}
.os-scrollbar-track:active {
  border: var(--os-track-border-active);
  background: var(--os-track-bg-active);
}

.os-scrollbar-handle {
  border: var(--os-handle-border);
  border-radius: var(--os-handle-border-radius);
  background: var(--os-handle-bg);
}
.os-scrollbar-handle:hover {
  border: var(--os-handle-border-hover);
  background: var(--os-handle-bg-hover);
}
.os-scrollbar-handle:active {
  border: var(--os-handle-border-active);
  background: var(--os-handle-bg-active);
}

.os-scrollbar-track:before,
.os-scrollbar-handle:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
}

.os-scrollbar-horizontal {
  padding: var(--os-padding-perpendicular) var(--os-padding-axis);
  right: var(--os-size);
  height: var(--os-size);
}
.os-scrollbar-horizontal.os-scrollbar-rtl {
  left: var(--os-size);
  right: 0;
}
.os-scrollbar-horizontal .os-scrollbar-track:before {
  top: calc(var(--os-padding-perpendicular) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal .os-scrollbar-handle {
  min-width: var(--os-handle-min-size);
  max-width: var(--os-handle-max-size);
  height: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s;
}
.os-scrollbar-horizontal .os-scrollbar-handle:before {
  top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  bottom: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-horizontal:hover .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-horizontal:active .os-scrollbar-handle {
  height: var(--os-handle-perpendicular-size-active);
}

.os-scrollbar-vertical {
  padding: var(--os-padding-axis) var(--os-padding-perpendicular);
  bottom: var(--os-size);
  width: var(--os-size);
}
.os-scrollbar-vertical .os-scrollbar-track:before {
  left: calc(var(--os-padding-perpendicular) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical .os-scrollbar-handle {
  min-height: var(--os-handle-min-size);
  max-height: var(--os-handle-max-size);
  width: var(--os-handle-perpendicular-size);
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
}
.os-scrollbar-vertical .os-scrollbar-handle:before {
  left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  right: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before {
  right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);
  left: calc(var(--os-padding-perpendicular) * -1);
}
.os-scrollbar-vertical:hover .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-hover);
}
.os-scrollbar-vertical:active .os-scrollbar-handle {
  width: var(--os-handle-perpendicular-size-active);
}

/* NONE THEME: */
[data-overlayscrollbars-viewport~=measuring] > .os-scrollbar,
.os-theme-none.os-scrollbar {
  display: none !important;
}

/* DARK & LIGHT THEME: */
.os-theme-dark,
.os-theme-light {
  box-sizing: border-box;
  --os-size: 10px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 2px;
  --os-track-border-radius: 10px;
  --os-handle-interactive-area-offset: 4px;
  --os-handle-border-radius: 10px;
}

.os-theme-dark {
  --os-handle-bg: rgba(0, 0, 0, 0.44);
  --os-handle-bg-hover: rgba(0, 0, 0, 0.55);
  --os-handle-bg-active: rgba(0, 0, 0, 0.66);
}

.os-theme-light {
  --os-handle-bg: rgba(255, 255, 255, 0.44);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.55);
  --os-handle-bg-active: rgba(255, 255, 255, 0.66);
}

[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),
[data-overlayscrollbars-viewport~=scrollbarHidden],
html[data-overlayscrollbars-viewport~=scrollbarHidden] > body {
  scrollbar-width: none !important;
}

@supports not (scrollbar-width: none) {
  [data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,
  [data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,
  [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
  [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
  html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar,
  html[data-overlayscrollbars-viewport~=scrollbarHidden] > body::-webkit-scrollbar-corner {
    -webkit-appearance: none !important;
            appearance: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}
[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) {
  overflow: auto;
}.base-scrollbar[data-v-dcb58dda] {
  display: flex;
  flex-direction: column;
}
.sb-container[data-v-dcb58dda] {
  height: 100%;
  box-sizing: border-box;
}
[data-v-dcb58dda] .sb-container>div:first-child {
  overflow-x: scroll !important;
}
[data-v-dcb58dda] .sb-container>div:first-child::-webkit-scrollbar {
  display: none !important;
}
/* 自定义滚动条主题 */
[data-v-dcb58dda] .os-scrollbar {
  position: absolute;
  height: 100%;
  width: 0.07rem;
  right: 0rem;
  padding: 0 !important;
}
[data-v-dcb58dda] .os-scrollbar-handle {
  width: 0.07rem !important;
  background: #4f4f4f;
  box-sizing: border-box;
  border-radius: 0 !important;
}
[data-v-dcb58dda] .os-scrollbar-track {
  width: 0.07rem;
  height: 100%;
  top: 0;
  background: #272727;
  border-radius: 0 !important;
}
.boss-list[data-v-79585be6] {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.head[data-v-79585be6] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 1.45rem;
  left: 0;
  width: 100%;
  height: 0.74rem;
  padding: 0 0.26rem;
  box-sizing: border-box;
}
.head .title[data-v-79585be6] {
  max-width: 4rem;
  font-size: 0.4rem;
  color: #b5b5b5;
  line-height: 0.48rem;
  word-break: keep-all;
  margin-left: 0.25rem;
  font-family: var(--font-bold);
}
.head .btn-group[data-v-79585be6] {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.head button[data-v-79585be6] {
  position: relative;
  width: 0.79rem;
  height: 0.74rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.head .btn-return[data-v-79585be6] {
  width: 0.98rem;
  height: 0.66rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.head .btn-achieve.is-hot[data-v-79585be6]::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0.14rem;
  height: 0.14rem;
  background-color: #ea5248;
  border-radius: 50%;
}
.content[data-v-79585be6] {
  position: absolute;
  width: 7.2rem;
  left: 50%;
  transform: translateX(-50%);
  top: 2.5rem;
  height: calc(100% - 5.36rem);
  overflow-y: auto;
}
.content .boss-item[data-v-79585be6] {
  position: relative;
  width: 7.01rem;
  height: 2.27rem;
  margin-top: -0.1rem;
}
.content .bg[data-v-79585be6] {
  width: 100%;
  height: 100%;
  background-position: 0.42rem center;
  background-size: 6.26rem 2.14rem;
  background-repeat: no-repeat;
}
.content .num[data-v-79585be6] {
  position: absolute;
  left: 0.62rem;
  top: 0.15rem;
  font-size: 0.74rem;
  color: #ffffff;
  font-family: 'numberCommon';
}
.content .name[data-v-79585be6] {
  position: absolute;
  top: 1.12rem;
  left: 0.62rem;
  width: 1.89rem;
  height: 0.44rem;
  font-family: var(--font-bold);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.content .name span[data-v-79585be6] {
  position: absolute;
  width: 100%;
  bottom: 0.08rem;
  font-size: 0.24rem;
  line-height: 0.32rem;
  color: #fefefe;
  white-space: nowrap;
  box-sizing: border-box;
  padding-left: 0.44rem;
}
.content .completed[data-v-79585be6] {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.content .completed span[data-v-79585be6]:nth-child(1) {
  position: absolute;
  top: -0.56rem;
  left: 0;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: rgba(182, 148, 64, 0.32);
  font-family: 'numberCommon';
  font-size: 0.2rem;
  letter-spacing: 0.1rem;
  line-height: 0.2rem;
}
.content .completed span[data-v-79585be6]:nth-child(2) {
  position: absolute;
  top: -0.34rem;
  left: 0;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  color: #f2d68e;
  font-size: 0.46rem;
  font-family: var(--font-bold);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.content .progress-text[data-v-79585be6] {
  position: absolute;
  right: 0.82rem;
  top: 1rem;
  font-size: 0.54rem;
  color: #ffffff;
  font-family: 'numberCommon';
}
.content .progress-bar[data-v-79585be6] {
  position: absolute;
  bottom: 0.24rem;
  left: 0.7rem;
  width: 5.54rem;
  height: 0.31rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content .progress-bar-inner[data-v-79585be6] {
  position: absolute;
  left: 0.08rem;
  top: -0.02rem;
  width: 5.38rem;
  height: 0.26rem;
}
.content .progress-bar-inner-bg[data-v-79585be6] {
  position: absolute;
  height: 0.26rem;
  top: 0;
  left: 0;
  background-color: transparent;
  background-position: left center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.content .progress-bar-inner-bg i[data-v-79585be6] {
  position: absolute;
  top: 0;
  right: -0.06rem;
  width: 0.14rem;
  height: 0.26rem;
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.content .boss-item.comp .num[data-v-79585be6] {
  color: #b69440;
}
.content .boss-item.comp .name[data-v-79585be6] {
  top: 1.56rem;
}
.content .boss-item.comp .name span[data-v-79585be6] {
  color: #fde8ca;
}
.content .boss-item.lock .num[data-v-79585be6] {
  color: #606060;
}
.content .boss-item.lock .name[data-v-79585be6] {
  top: 1.56rem;
}
.content .boss-item.lock .name span[data-v-79585be6] {
  color: #c5c5c5;
}
.content .boss-item.act .bg[data-v-79585be6] {
  background-position: left center;
  background-size: 100% 100%;
}
.content .boss-item.act .num[data-v-79585be6] {
  color: #fff;
  left: 0.9rem;
}
.content .boss-item.act .name[data-v-79585be6] {
  left: 0.9rem;
}
.content .boss-item.act .name span[data-v-79585be6] {
  color: #fff;
}
.content .boss-item.act .progress-text[data-v-79585be6] {
  right: 0.54rem;
  color: #ef4d43;
}
.content .boss-item.act .progress-bar[data-v-79585be6] {
  left: 0.98rem;
}
.content .boss-item-6[data-v-79585be6] {
  width: 7.05rem;
  height: 3.31rem;
}
.content .boss-item-6 .bg[data-v-79585be6] {
  background-size: 6.26rem auto;
}
.content .boss-item-6 .name[data-v-79585be6] {
  top: 2.16rem;
}
.content .boss-item-6 .progress-text[data-v-79585be6] {
  top: 2.04rem;
}
.content .boss-item-6.act .bg[data-v-79585be6] {
  background-size: 7.05rem 3.31rem;
}
.content .boss-item-6.comp .name[data-v-79585be6],
.content .boss-item-6.lock .name[data-v-79585be6] {
  top: 2.6rem;
}
.content .boss-item-7[data-v-79585be6] {
  width: 7.05rem;
  height: 3.31rem;
}
.content .boss-item-7 .bg[data-v-79585be6] {
  background-size: 6.26rem auto;
}
.content .boss-item-7 .name[data-v-79585be6] {
  top: 2.6rem;
}
.content .boss-item-7.act .bg[data-v-79585be6] {
  background-size: 7.05rem 3.31rem;
}
.content .boss-item-7.comp .name[data-v-79585be6],
.content .boss-item-7.lock .name[data-v-79585be6] {
  top: 2.6rem;
}
.footer[data-v-79585be6] {
  position: absolute;
  bottom: 1.35rem;
  left: 0;
  width: 100%;
}
.footer .tips[data-v-79585be6] {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  height: 0.29rem;
  text-align: center;
  line-height: 0.29rem;
  font-size: 0.22rem;
  color: #9f9f9f;
  padding: 0 0.3rem;
  box-sizing: border-box;
  margin: 0 auto 0.06rem;
}
.footer .tips[data-v-79585be6] i {
  color: #fff;
  font-style: normal;
}
.footer .btn-group[data-v-79585be6] {
  display: flex;
  justify-content: space-between;
}
.footer button[data-v-79585be6] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.footer .btn-getnumber[data-v-79585be6] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.79rem;
  height: 0.55rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
  color: #acacac;
  font-family: var(--font-bold);
  text-align: center;
  line-height: 0.26rem;
}
.footer .btn-attack[data-v-79585be6] {
  width: 3.49rem;
  height: 1.1rem;
  font-size: 0.4rem;
  color: #ffffff;
  font-family: var(--font-bold);
  line-height: 1.1rem;
  text-align: center;
}
.footer .btn-attack.disabled[data-v-79585be6] {
  filter: grayscale(1);
}
.footer .btn-viewstory[data-v-79585be6] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.78rem;
  height: 0.55rem;
  margin-top: 0.15rem;
  font-size: 0.24rem;
  color: #acacac;
  padding-left: 0.3rem;
  box-sizing: border-box;
  font-family: var(--font-bold);
  text-align: center;
  line-height: 0.22rem;
}
.zs[data-v-79585be6] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.76rem;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.lang_en .footer .btn-getnumber[data-v-79585be6],
body.lang_en .footer .btn-viewstory[data-v-79585be6] {
  font-size: 0.22rem;
}
body.lang_en .footer .btn-viewstory[data-v-79585be6] {
  padding-left: 0.36rem;
}
body.lang_tw .boss-list .head .title[data-v-79585be6],
body.lang_ja .boss-list .head .title[data-v-79585be6] {
  word-break: normal;
}
body.lang_ja .footer .btn-getnumber[data-v-79585be6],
body.lang_ja .footer .btn-viewstory[data-v-79585be6] {
  font-size: 0.2rem;
}
body.lang_ja .footer .btn-viewstory[data-v-79585be6] {
  padding-left: 0.5rem;
  padding-right: 0.1rem;
}
body.lang_ja .content .boss-item .name span[data-v-79585be6] {
  width: 120%;
  font-size: 0.22rem;
  white-space: normal;
}
.achievement[data-v-54d5d4c6] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #ededed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.head[data-v-54d5d4c6] {
  position: absolute;
  top: 1.45rem;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 0.5rem;
  box-sizing: border-box;
}
.head h1[data-v-54d5d4c6] {
  font-size: 0.44rem;
  color: #c7c7c7;
  font-weight: 400;
  font-family: var(--font-bold);
}
.btn-return[data-v-54d5d4c6] {
  position: relative;
  width: 0.98rem;
  height: 0.86rem;
  margin-right: 0.34rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content[data-v-54d5d4c6] {
  position: absolute;
  top: 2.39rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.8rem;
  height: calc(100% - 5.2rem);
}
.section-title[data-v-54d5d4c6] {
  display: inline-block;
  padding: 0 0.15rem;
  min-width: 2.31rem;
  height: 0.38rem;
  box-sizing: border-box;
  font-size: 0.26rem;
  line-height: 0.36rem;
  color: #b9b8b8;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
  margin-left: 0.24rem;
  font-family: var(--font-bold);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.task-list[data-v-54d5d4c6] {
  padding-top: 0.24rem;
}
.task[data-v-54d5d4c6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 6.67rem;
  height: 1.39rem;
  margin-top: -0.2rem;
  background-position: right center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.task--available[data-v-54d5d4c6] {
  background-size: 100% 100%;
}
.task--available .awards[data-v-54d5d4c6] {
  margin-left: 0.4rem;
}
.task--available .task-button[data-v-54d5d4c6] {
  margin-right: 0.32rem;
}
.task--locked[data-v-54d5d4c6],
.task--failed[data-v-54d5d4c6] {
  background-size: 6.22rem 1.02rem;
  background-position: 0.36rem center;
}
.task--claimed[data-v-54d5d4c6] {
  background-size: 6.38rem 1.21rem;
}
.task--boss.task--claimed[data-v-54d5d4c6] {
  background-size: 6.38rem 1.21rem;
}
.awards[data-v-54d5d4c6] {
  display: flex;
  gap: 0.13rem;
  margin: 0 0.14rem 0 0.5rem;
}
.award[data-v-54d5d4c6] {
  position: relative;
  width: 0.69rem;
  height: 0.7rem;
  flex-shrink: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.award img[data-v-54d5d4c6] {
  position: absolute;
  top: 0.05rem;
  left: 0;
  width: 0.71rem;
  height: 0.61rem;
  object-fit: contain;
}
.award-state[data-v-54d5d4c6] {
  position: absolute;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.award-state--complete[data-v-54d5d4c6] {
  right: -0.08rem;
  bottom: -0.06rem;
  width: 0.32rem;
  height: 0.32rem;
}
.award-state--available[data-v-54d5d4c6] {
  right: -0.16rem;
  bottom: -0.16rem;
  width: 0.46rem;
  height: 0.46rem;
}
.task-copy[data-v-54d5d4c6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.22rem;
  line-height: 0.35rem;
  padding-bottom: 0.12rem;
  box-sizing: border-box;
}
.task-copy .task-reward[data-v-54d5d4c6] {
  line-height: 0.24rem;
  margin-top: 0.06rem;
}
.task-copy strong[data-v-54d5d4c6] {
  font-size: 0.24rem;
  font-weight: normal;
  line-height: 0.24rem;
  font-family: var(--font-bold);
}
.task-copy span[data-v-54d5d4c6] {
  color: #c8c8c8;
  font-family: var(--font);
}
.task--claimed[data-v-54d5d4c6],
.task--boss.task--claimed[data-v-54d5d4c6] {
  color: #aaa;
}
.task--available[data-v-54d5d4c6] {
  color: #ffd55a;
}
.task--available .awards[data-v-54d5d4c6] {
  left: 0.19rem;
}
.task--available .task-copy[data-v-54d5d4c6] {
  left: 1.07rem;
}
.task--available .task-copy span[data-v-54d5d4c6] {
  color: #f2c448;
}
.task--locked .awards[data-v-54d5d4c6],
.task--failed .awards[data-v-54d5d4c6] {
  left: 0.14rem;
}
.task--locked .task-copy[data-v-54d5d4c6],
.task--failed .task-copy[data-v-54d5d4c6] {
  left: 0.94rem;
}
.task--multi-award .task-copy[data-v-54d5d4c6] {
  left: 1.82rem;
}
.task-button[data-v-54d5d4c6] {
  flex-shrink: 0;
  position: relative;
  margin-right: 0.2rem;
}
.task-button--tips .state-button[data-v-54d5d4c6] {
  margin-bottom: 0.3rem;
}
.task-button .task-tips[data-v-54d5d4c6] {
  position: absolute;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  font-size: 0.2rem;
  color: #9d9d9d;
  letter-spacing: -0.02rem;
  font-family: var(--font);
}
.state-button[data-v-54d5d4c6] {
  width: 1.71rem;
  height: 0.5rem;
  font-size: 0.2rem;
  line-height: 0.5rem;
  color: #f4f4f4;
  white-space: nowrap;
  text-align: center;
  font-family: var(--font);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.state-button[data-v-54d5d4c6]:disabled {
  cursor: default;
}
.task--available .state-button[data-v-54d5d4c6] {
  right: 0.17rem;
  color: #fff5c7;
}
.task--locked .state-button[data-v-54d5d4c6],
.task--failed .state-button[data-v-54d5d4c6] {
  right: 0.18rem;
}
.task small[data-v-54d5d4c6] {
  position: absolute;
  right: 0.16rem;
  bottom: 0.12rem;
  font-size: 0.16rem;
  line-height: 0.2rem;
  color: #929292;
}
.section-divider[data-v-54d5d4c6] {
  position: relative;
  width: 6.28rem;
  height: 0.23rem;
  margin: -0.14rem 0 0.3rem 0.32rem;
  border-bottom: 0.02rem solid #3d3d3d;
  box-sizing: border-box;
}
.section-divider i[data-v-54d5d4c6] {
  position: absolute;
  left: 50%;
  bottom: -0.02rem;
  width: 0;
  height: 0;
  border-right: 0.14rem solid transparent;
  border-bottom: 0.14rem solid #4b4b4b;
  border-left: 0.14rem solid transparent;
  transform: translateX(-50%);
}
.achievement-section--boss .task-list[data-v-54d5d4c6] {
  padding-top: 0.26rem;
}
.damage[data-v-54d5d4c6] {
  position: absolute;
  bottom: 1.75rem;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 100%;
  height: 0.96rem;
  box-sizing: border-box;
  padding-top: 0.01rem;
  font-size: 0.31rem;
  color: #ffe071;
  font-weight: 400;
  font-family: var(--font);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.damage strong[data-v-54d5d4c6] {
  margin-left: 0.04rem;
  font-family: 'Deco_Indt_bold', sans-serif;
  font-size: 0.43rem;
  font-weight: normal;
  letter-spacing: 0.01rem;
  color: #f2f2f2;
}
.damage-icon[data-v-54d5d4c6] {
  width: 0.35rem;
  height: 0.35rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.zs[data-v-54d5d4c6] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.76rem;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body.lang_en .task-copy strong[data-v-54d5d4c6] {
  font-size: 0.2rem;
}
body.lang_en .task-copy span[data-v-54d5d4c6] {
  font-size: 0.18rem;
}
body.lang_en .state-button[data-v-54d5d4c6] {
  font-size: 0.24rem;
  width: 1.6rem;
}
body.lang_ja .task-copy strong[data-v-54d5d4c6] {
  font-size: 0.2rem;
}
body.lang_ja .task-copy span[data-v-54d5d4c6] {
  font-size: 0.18rem;
}
body.lang_ja .state-button[data-v-54d5d4c6] {
  font-size: 0.22rem;
  width: 1.6rem;
}
body.lang_th .state-button[data-v-54d5d4c6] {
  font-size: 0.28rem;
  width: 1.6rem;
}
.plot[data-v-efc3672a] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.role[data-v-efc3672a] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.text-mask[data-v-efc3672a] {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 5.63rem;
  pointer-events: none;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.dialogue[data-v-efc3672a] {
  position: absolute;
  right: 0.42rem;
  bottom: 1.86rem;
  left: 0.42rem;
  z-index: 3;
  min-height: 1.22rem;
  color: #eee;
}
.dialogue strong[data-v-efc3672a] {
  position: relative;
  display: block;
  margin-bottom: 0.15rem;
  padding-left: 0.17rem;
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 0.28rem;
  line-height: 0.34rem;
  color: #f4f4f4;
}
.dialogue strong[data-v-efc3672a]::before {
  position: absolute;
  top: 0.04rem;
  left: 0;
  width: 0.05rem;
  height: 0.24rem;
  content: '';
  background: #e60020;
}
.dialogue p[data-v-efc3672a] {
  max-width: 6.5rem;
  font-size: 0.24rem;
  line-height: 0.36rem;
  color: #d1d1d1;
  font-family: var(--font);
}
.btn-skip[data-v-efc3672a] {
  position: absolute;
  right: 0.42rem;
  bottom: 3.02rem;
  z-index: 4;
  width: 1.56rem;
  height: 0.41rem;
  box-sizing: border-box;
  padding-left: 0.1rem;
  font-family: var(--font-bold);
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.41rem;
  text-align: center;
  color: #d4d4d4;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.next-tips[data-v-efc3672a] {
  position: absolute;
  bottom: 0.37rem;
  left: 50%;
  z-index: 3;
  width: 0.39rem;
  height: 0.5rem;
  pointer-events: none;
  transform: translateX(-50%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: next-tips-efc3672a 1.2s ease-in-out infinite;
}
.role-fade-enter-active[data-v-efc3672a],
.role-fade-leave-active[data-v-efc3672a] {
  transition: opacity 0.18s ease;
}
.role-fade-enter-from[data-v-efc3672a],
.role-fade-leave-to[data-v-efc3672a],
.copy-fade-enter-from[data-v-efc3672a],
.copy-fade-leave-to[data-v-efc3672a] {
  opacity: 0;
}
.copy-fade-enter-active[data-v-efc3672a],
.copy-fade-leave-active[data-v-efc3672a] {
  transition: opacity 0.12s ease;
}
@keyframes next-tips-efc3672a {
0%,
  100% {
    transform: translate(-50%, 0);
}
50% {
    transform: translate(-50%, 0.08rem);
}
}

.spine-battle[data-v-b9944523] {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.spine-battle[data-v-b9944523] .spine-battle-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.game[data-v-067b05b6] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  font-family: 'en', Arial, sans-serif;
  background: #030918;
}
.game .pause-toggle[data-v-067b05b6],
.game .pause-resume[data-v-067b05b6] {
  display: block;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.game .pause-toggle[data-v-067b05b6] {
  position: absolute;
  top: 1.82rem;
  right: 0;
  z-index: 2;
  width: 0.87rem;
  height: 0.77rem;
}
.game .pause-overlay[data-v-067b05b6] {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.5);
}
.game .pause-title[data-v-067b05b6] {
  position: absolute;
  top: 43.3%;
  left: 50%;
  width: 7.5rem;
  height: 1.68rem;
  transform: translateX(-50%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.game .pause-resume[data-v-067b05b6] {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 1.29rem;
  height: 1.31rem;
  transform: translateX(-50%);
}
.game .data-panel[data-v-067b05b6] {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  height: 0.99rem;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  top: 0.86rem;
  left: 0;
  right: 0;
  padding: 0 0.6rem;
  box-sizing: border-box;
  z-index: 3;
}
.game .title-cont[data-v-067b05b6] {
  flex: 1;
  width: 100%;
  height: 0.39rem;
  margin-top: 0.3rem;
  line-height: 0.3rem;
}
.game .title-cont.big[data-v-067b05b6] {
  margin-top: 0.4rem;
}
.game .title-cont.big span[data-v-067b05b6] {
  font-size: 0.24rem;
}
.game .title-cont span[data-v-067b05b6] {
  font-size: 0.3rem;
  color: #f6f6f6;
  font-family: var(--font-bold);
  font-weight: 400;
  padding: 0 0.16rem;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .score-cont[data-v-067b05b6] {
  position: relative;
  flex: 1;
  text-align: right;
  margin-top: 0.4rem;
}
.game .score-cont .score-title[data-v-067b05b6] {
  position: absolute;
  width: 1.51rem;
  height: 0.32rem;
  white-space: nowrap;
  top: -0.28rem;
  right: 0.06rem;
  font-size: 0.2rem;
  text-align: left;
  padding: 0 0 0 0.4rem;
  line-height: 0.2rem;
  box-sizing: border-box;
  color: #e6e6e6;
  font-family: var(--font);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .score-cont strong[data-v-067b05b6] {
  font-size: 0.28rem;
  color: #fff;
}
.game .score-cont .score-gain[data-v-067b05b6] {
  position: absolute;
  right: 0;
  bottom: -0.8rem;
  color: #ffe676;
  font-size: 0.25rem;
  animation: score-pop-067b05b6 0.5s ease-out both;
}
.game .timer-cont[data-v-067b05b6] {
  position: relative;
  text-align: center;
  margin-top: 0.02rem;
}
.game .timer-cont strong[data-v-067b05b6] {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.8rem;
  color: #fff;
  text-align: center;
  font-weight: 400;
  font-family: 'numberCommon';
}
.game .timer-cont .timer-ripple[data-v-067b05b6] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  color: #ff675f;
  animation: timer-ripple-067b05b6 0.65s ease-out both;
  pointer-events: none;
}
.game .timer-cont.warning .timer-value[data-v-067b05b6] {
  color: #ff675f;
  animation: timer-warning-067b05b6 0.3s ease-in-out infinite alternate;
}
.game .danger-tip[data-v-067b05b6] {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  z-index: 2;
  animation: danger-breathe-067b05b6 0.35s ease-in-out infinite alternate;
  pointer-events: none;
}
.game .roulette-subsidiary[data-v-067b05b6] {
  position: absolute;
  width: 3.7rem;
  height: 1.85rem;
  left: 50%;
  top: -0.7rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.game .roulette-subsidiary.locked[data-v-067b05b6] {
  filter: grayscale(0.7);
  opacity: 0.65;
}
.game .roulette-subsidiary-mirror-cont[data-v-067b05b6] {
  position: absolute;
  width: 5.04rem;
  height: 1.64rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleY(-1);
  margin-top: -1.5rem;
  z-index: 1;
  transform-origin: center center;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .countdown[data-v-067b05b6] {
  position: absolute;
  width: 2.49rem;
  height: 0.49rem;
  top: 1.44rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  color: #ff5224;
  font-size: 0.42rem;
  font-weight: 400;
  font-family: 'numberCommon';
  text-align: center;
  line-height: 0.49rem;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .roulette-cont[data-v-067b05b6] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 6.08rem;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .roulette-cont .attack-bg[data-v-067b05b6] {
  position: absolute;
  width: 100%;
  height: 2.32rem;
  content: '';
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .roulette-canvas[data-v-067b05b6] {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2.08rem;
  width: 100%;
  height: 2.76rem;
}
.game .bullet-cont[data-v-067b05b6] {
  position: absolute;
  bottom: 1.3rem;
  left: 0.85rem;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 0.4rem;
  pointer-events: none;
}
.game .bullet-cont img[data-v-067b05b6] {
  display: block;
  width: 0.16rem;
  height: 0.4rem;
}
.game .bullet-cont .is-spent[data-v-067b05b6] {
  animation: bullet-spent-067b05b6 0.28s ease-out both;
}
.game .number-cont[data-v-067b05b6] {
  position: absolute;
  right: 1.1rem;
  bottom: 1.26rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  color: #f2842e;
  font-family: 'numberCommon';
  line-height: 1;
  text-shadow: 0 0 0.08rem rgba(255, 70, 13, 0.9);
  pointer-events: none;
}
.game .number-cont strong[data-v-067b05b6] {
  min-width: 0.55rem;
  font-size: 0.54rem;
  font-weight: 400;
  text-align: right;
  animation: ammo-number-change-067b05b6 0.22s ease-out both;
}
.game .number-cont span[data-v-067b05b6] {
  margin-left: 0.1rem;
  font-size: 0.32rem;
}
.game .number-cont i[data-v-067b05b6] {
  padding-right: 0.1rem;
}
.game .judgement-result[data-v-067b05b6] {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.8rem;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.game .judgement-result .judgement-img[data-v-067b05b6] {
  display: block;
  width: 3.78rem;
  height: 1.09rem;
}
.game .judgement-result span[data-v-067b05b6] {
  margin-left: 0.12rem;
  font-size: 0.25rem;
}
.game .judgement-result.perfect span[data-v-067b05b6] {
  color: #fff49a;
}
.game .judgement-result.great span[data-v-067b05b6] {
  color: #ffb32b;
}
.game .judgement-result.good span[data-v-067b05b6] {
  color: #fff456;
}
.game .judgement-result.normal span[data-v-067b05b6] {
  color: #e7efff;
}
.game .start-countdown[data-v-067b05b6] {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(9, 31, 58, 0.18) 0 18%, rgba(1, 5, 15, 0.74) 72%);
  pointer-events: all;
}
.game .start-countdown .start-countdown-num[data-v-067b05b6] {
  width: 2.33rem;
  height: 3.84rem;
  object-fit: contain;
}
.game .settlement[data-v-067b05b6] {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
}
.game .restart-btn[data-v-067b05b6] {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  z-index: 10;
  padding: 0.3rem 0.5rem;
  border: 1px solid #9defff;
  color: #fff;
  font-size: 0.28rem;
  border-radius: 0.2rem;
  background: rgba(4, 17, 37, 0.88);
  transform: translateX(-50%);
}
.game .statistics-cont[data-v-067b05b6] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.game .statistics-cont span[data-v-067b05b6] {
  color: #fff;
  font-size: 0.42rem;
}
.game .countdown-enter-active[data-v-067b05b6],
.game .countdown-leave-active[data-v-067b05b6] {
  transition: 0.25s ease;
}
.game .countdown-enter-from[data-v-067b05b6] {
  opacity: 0;
  transform: scale(1.8);
}
.game .countdown-leave-to[data-v-067b05b6] {
  opacity: 0;
  transform: scale(0.5);
}
.game .attack-cont[data-v-067b05b6] {
  position: absolute;
  bottom: 0.14rem;
  margin-left: 0.05rem;
  left: 50%;
  z-index: 8;
  width: 2.15rem;
  height: 2.15rem;
  transform: translateX(-50%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.game .attack-cont[data-v-067b05b6]:active:not(.disabled) {
  filter: drop-shadow(0 0.03rem 0 #9d3911);
}
.game .attack-cont.disabled[data-v-067b05b6] {
  cursor: default;
  filter: grayscale(0.8) drop-shadow(0 0.05rem 0 #333);
  opacity: 0.72;
  pointer-events: none;
}
.game .judgement-enter-active[data-v-067b05b6],
.game .judgement-leave-active[data-v-067b05b6] {
  transition: 0.18s ease;
}
.game .judgement-enter-from[data-v-067b05b6] {
  opacity: 0;
  transform: translate(-50%, 0.22rem) scale(0.7);
}
.game .judgement-leave-to[data-v-067b05b6] {
  opacity: 0;
  transform: translate(-50%, -0.12rem) scale(1.12);
}
@keyframes score-pop-067b05b6 {
from {
    opacity: 0;
    transform: translateY(0.1rem) scale(0.7);
}
35% {
    opacity: 1;
    transform: translateY(0) scale(1.15);
}
to {
    opacity: 0;
    transform: translateY(-0.18rem) scale(1);
}
}
@keyframes timer-warning-067b05b6 {
to {
    text-shadow: 0 0 0.2rem #ff1f18;
    transform: scale(1.06);
}
}
@keyframes timer-ripple-067b05b6 {
from {
    opacity: 0.75;
    transform: scale(1);
}
to {
    opacity: 0;
    transform: scale(1.8);
}
}
@keyframes danger-breathe-067b05b6 {
from {
    opacity: 0.35;
}
to {
    opacity: 1;
}
}
@keyframes bullet-spent-067b05b6 {
from {
    opacity: 1;
    filter: brightness(2);
    transform: translateY(-0.08rem) scale(1.25);
}
to {
    opacity: 0.7;
    filter: brightness(1);
    transform: translateY(0) scale(1);
}
}
@keyframes ammo-number-change-067b05b6 {
from {
    opacity: 0.45;
    transform: scale(1.35);
}
to {
    opacity: 1;
    transform: scale(1);
}
}
.pc .game .data-panel[data-v-067b05b6] {
  top: 0;
}
.pc .game .title-cont[data-v-067b05b6] {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 0.72rem;
  margin-top: 0.08rem;
  line-height: 0.32rem;
}
.pc .game .title-cont span[data-v-067b05b6] {
  display: block;
  font-size: 0.3rem;
  overflow-wrap: anywhere;
}
body.lang_en .score-cont .score-title[data-v-067b05b6],
body.lang_th .score-cont .score-title[data-v-067b05b6] {
  white-space: normal;
  height: auto;
  font-size: 0.16rem;
  background-size: 100% 0.32rem;
  background-position: center bottom;
}
body.lang_ja .game .title-cont span[data-v-067b05b6] {
  font-size: 0.24rem;
}
.result[data-v-94dbf69d] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #f5f5f5;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-top[data-v-94dbf69d] {
  display: flex;
  position: absolute;
  top: 0.94rem;
  left: 0.18rem;
  z-index: 2;
}
.page-title[data-v-94dbf69d] {
  margin: 0;
  color: #fff;
  font-family: var(--font-bold);
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 0.64rem;
  text-shadow: 0.02rem 0.03rem 0 rgba(0, 0, 0, 0.22);
}
.boss-name[data-v-94dbf69d] {
  margin-left: -0.5rem;
  margin-top: 0.06rem;
  width: 3.77rem;
  height: 0.58rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.boss-name span[data-v-94dbf69d] {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 1.18rem;
  color: #dddddd;
  font-family: var(--font-bold);
  font-size: 0.24rem;
  font-weight: 400;
  line-height: 1;
}
.result-content[data-v-94dbf69d] {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 1.56rem;
  left: 0;
  width: 100%;
}
.rating[data-v-94dbf69d] {
  position: relative;
  width: 4.2rem;
  height: 2.83rem;
  margin-left: 0.2rem;
  margin-bottom: -0.3rem;
}
.rating-label[data-v-94dbf69d] {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 0.42rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-bold);
  font-size: 0.34rem;
  font-weight: 400;
  line-height: 0.42rem;
  text-shadow: 0 0 0.1rem rgba(255, 255, 255, 0.2);
}
.rating-label img[data-v-94dbf69d] {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.1rem;
  opacity: 0.8;
}
.rating-art[data-v-94dbf69d] {
  position: absolute;
  top: 0.22rem;
  left: -0.16rem;
  width: 4.06rem;
  height: 2.76rem;
  display: block;
  object-fit: contain;
  object-position: left top;
}
.comment[data-v-94dbf69d] {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0.74rem;
  color: #f1f1f1;
  font-family: var(--font-bold);
  font-size: 0.36rem;
  font-weight: 400;
  line-height: 0.47rem;
  letter-spacing: -0.018rem;
  text-shadow: 0.02rem 0.025rem 0.02rem rgba(0, 0, 0, 0.35);
}
.statistics[data-v-94dbf69d] {
  position: relative;
  display: grid;
  grid-template-columns: 2.72rem 2.18rem 1.82rem;
  width: 6.72rem;
  margin: 0.24rem auto 0.12rem;
}
.statistics > div[data-v-94dbf69d] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.statistics > div[data-v-94dbf69d]::after {
  content: '';
  position: absolute;
  top: 0.07rem;
  right: 0;
  width: 1px;
  height: 0.78rem;
  background: rgba(255, 255, 255, 0.35);
}
.statistics > div[data-v-94dbf69d]:last-child::after {
  display: none;
}
.statistics dt[data-v-94dbf69d] {
  color: #fff;
  font-family: var(--font);
  font-size: 0.22rem;
  font-weight: 400;
  line-height: 0.3rem;
}
.statistics dd[data-v-94dbf69d] {
  margin: 0.04rem 0 0;
  color: #fff;
  font-family: 'Deco_Indt_bold';
  font-size: 0.6rem;
  font-weight: 400;
  line-height: 0.66rem;
  letter-spacing: 0.01rem;
  white-space: nowrap;
}
.squad[data-v-94dbf69d] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.04rem;
}
.squad-row[data-v-94dbf69d] {
  display: flex;
  justify-content: center;
  height: 1.6rem;
}
.squad-row img[data-v-94dbf69d] {
  display: block;
  flex: 0 0 auto;
  width: 1.33rem;
  height: 1.6rem;
}
.squad-row img + img[data-v-94dbf69d] {
  margin-left: -0.17rem;
}
.squad-row[data-v-94dbf69d]:not(:only-child):first-child {
  transform: translateX(0.15rem);
}
.separator[data-v-94dbf69d] {
  position: relative;
  width: 7.1rem;
  height: 0.02rem;
  margin: 0.3rem auto 0.2rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.38);
}
.separator i[data-v-94dbf69d] {
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 0.14rem solid transparent;
  border-bottom: 0.14rem solid rgba(255, 255, 255, 0.72);
  border-left: 0.14rem solid transparent;
  transform: translateX(-50%);
}
.actions[data-v-94dbf69d] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.action[data-v-94dbf69d] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-family: var(--font-heavy);
  font-size: 0.26rem;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0.025rem 0.025rem rgba(111, 0, 0, 0.72);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.action[data-v-94dbf69d]:active {
  filter: brightness(0.86);
  transform: translateY(0.02rem);
}
.action button[data-v-94dbf69d] {
  padding: 0 0.1rem;
  word-break: keep-all;
}
.action--secondary[data-v-94dbf69d] {
  width: 2.13rem;
  height: 1.02rem;
}
.action--secondary.disabled[data-v-94dbf69d] {
  filter: grayscale(1);
}
.action--share[data-v-94dbf69d] {
  width: 3.18rem;
  height: 1.15rem;
  font-size: 0.4rem;
  text-shadow: 0 0.03rem 0.04rem rgba(38, 0, 83, 0.75);
}
.bottom-frame[data-v-94dbf69d] {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 1.76rem;
  pointer-events: none;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
body.lang_ja .action--secondary[data-v-94dbf69d] {
  font-size: 0.24rem;
  padding: 0 0.3rem;
}
body.lang_ko .action--secondary[data-v-94dbf69d] {
  font-size: 0.24rem;
  padding: 0 0.3rem;
  word-break: keep-all;
}
body.lang_th .action--secondary[data-v-94dbf69d] {
  font-size: 0.24rem;
  padding: 0 0.3rem;
  word-break: keep-all;
}
/**
 * Swiper 14.3.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 28, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.popup[data-v-827456de] {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.popup .popup-panel[data-v-827456de] {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup h2[data-v-827456de] {
  position: absolute;
  top: 0.86rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.9rem;
  height: 0.55rem;
  box-sizing: border-box;
  font-size: 0.38rem;
  line-height: 0.55rem;
  text-align: center;
  color: #f2f2f2;
  font-weight: 400;
  font-family: var(--font-bold);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup .btn-close[data-v-827456de] {
  position: absolute;
  top: 0.7rem;
  right: 0.12rem;
  width: 0.63rem;
  height: 0.62rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup-motion-enter-active[data-v-827456de] {
  transition: background-color 0.36s ease-out;
}
.popup-motion-enter-active .popup-panel[data-v-827456de] {
  transition: opacity 0.36s ease-out, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-motion-leave-active[data-v-827456de] {
  transition: background-color 0.24s ease-in;
}
.popup-motion-leave-active .popup-panel[data-v-827456de] {
  transition: opacity 0.24s ease-in, transform 0.24s ease-in;
}
.popup-motion-enter-from[data-v-827456de],
.popup-motion-leave-to[data-v-827456de] {
  background-color: rgba(0, 0, 0, 0);
}
.popup-motion-enter-from .popup-panel[data-v-827456de],
.popup-motion-leave-to .popup-panel[data-v-827456de] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}
.pc .popup .popup-panel[data-v-827456de] {
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--pc-page-scale));
}
.pc .popup-motion-enter-from .popup-panel[data-v-827456de],
.pc .popup-motion-leave-to .popup-panel[data-v-827456de] {
  transform: translate(-50%, -50%) scale(calc(var(--pc-page-scale) * 0.9));
}
@media (prefers-reduced-motion: reduce) {
.popup-motion-enter-active[data-v-827456de],
  .popup-motion-leave-active[data-v-827456de],
  .popup-motion-enter-active .popup-panel[data-v-827456de],
  .popup-motion-leave-active .popup-panel[data-v-827456de] {
    transition-delay: 0s;
    transition-duration: 1ms;
}
}
.popup--getAttackNumber .popup-panel[data-v-827456de] {
  width: 7.49rem;
  height: 6.5rem;
}
.popup--getAttackNumber .task-list[data-v-827456de] {
  position: absolute;
  top: 2.05rem;
  left: 1rem;
}
.popup--getAttackNumber .task[data-v-827456de] {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  position: relative;
  width: 5.52rem;
  min-height: 1.02rem;
  margin-bottom: 0.16rem;
  padding: 0.1rem 0.14rem;
  box-sizing: border-box;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--getAttackNumber .task-copy[data-v-827456de] {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.04rem;
  box-sizing: border-box;
  color: #f1f1f1;
}
.popup--getAttackNumber .task-copy strong[data-v-827456de] {
  font-size: 0.24rem;
  font-weight: normal;
  line-height: 0.3rem;
  font-family: var(--font);
  font-weight: 400;
}
.popup--getAttackNumber .task-copy span[data-v-827456de] {
  font-size: 0.2rem;
  line-height: 0.2rem;
  color: #bcbcbc;
  font-family: var(--font);
}
.popup--getAttackNumber .task-button[data-v-827456de] {
  flex-shrink: 0;
  min-width: 1.58rem;
  height: 0.5rem;
  font-size: 0.23rem;
  line-height: 0.5rem;
  color: #f4f4f4;
  font-family: var(--font);
  font-weight: 400;
  padding: 0 0.15rem;
  box-sizing: border-box;
  white-space: nowrap;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--getAttackNumber .task-button[data-v-827456de]:disabled {
  cursor: default;
}
.popup--getAttackNumber .task--active .task-copy[data-v-827456de] {
  color: #f5f5f5;
}
.popup--record .popup-panel[data-v-827456de] {
  width: 7.49rem;
  height: 12.97rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--record h2[data-v-827456de] {
  top: 0.5rem;
}
.popup--record .btn-close[data-v-827456de] {
  top: 0.22rem;
}
.popup--record .record-list[data-v-827456de] {
  position: absolute;
  top: 1.4rem;
  left: 1rem;
  width: 5.56rem;
  height: 10.8rem;
  overflow-y: auto;
  padding-right: 0.11rem;
  box-sizing: border-box;
}
.popup--record .record-list-inner[data-v-827456de] {
  height: 100%;
}
.popup--record .record-item[data-v-827456de] {
  position: relative;
  width: 5.2rem;
  height: 2.17rem;
  margin-top: -0.2rem;
}
.popup--record .record-item.record-item--boss-6[data-v-827456de] {
  width: 5.17rem;
  height: 2.62rem;
  margin-top: 0.1rem;
}
.popup--record .record-item.record-item--boss-6.is-hot[data-v-827456de]::after {
  top: 0.06rem;
}
.popup--record .record-item.is-hot[data-v-827456de]::after {
  content: '';
  position: absolute;
  top: 0.34rem;
  right: 0.05rem;
  width: 0.2rem;
  height: 0.2rem;
  background: #ec3224;
  border-radius: 50%;
}
.popup--record .record-card[data-v-827456de] {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.popup--record .record-image[data-v-827456de] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.popup--record .record-name[data-v-827456de] {
  position: absolute;
  width: 4.9rem;
  height: 0.84rem;
  bottom: -0.14rem;
  left: 0.08rem;
  z-index: 1;
  font-size: 0.24rem;
  line-height: 0.74rem;
  color: #fefefe;
  padding-left: 0.6rem;
  font-family: var(--font-bold);
  box-sizing: border-box;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--record .record-lock[data-v-827456de] {
  position: absolute;
  width: 4.8rem;
  height: 1.63rem;
  left: 50%;
  top: 50%;
  margin: 0.16rem 0 0 0rem;
  transform: translate(-50%, -50%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--record .record-card--locked .record-card[data-v-827456de] {
  filter: blur(2.5px) grayscale(100%) brightness(1);
  opacity: 0.4;
}
.popup--record .record-card--complete[data-v-827456de] {
  cursor: pointer;
}
.popup--story-list .popup-panel[data-v-827456de] {
  top: 46% !important;
  width: 7.31rem;
  height: 11.65rem;
}
.popup--story-list h2[data-v-827456de] {
  top: 2.4rem;
}
.popup--story-list .btn-close[data-v-827456de] {
  top: 2.12rem;
}
.popup--story-list .story-list[data-v-827456de] {
  position: absolute;
  top: 3.35rem;
  left: 0.76rem;
  width: 5.58rem;
}
.popup--story-list .story-item[data-v-827456de] {
  display: block;
  position: relative;
  width: 5.58rem;
  height: 1.49rem;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.popup--story-list .story-item[data-v-827456de]:disabled {
  cursor: default;
}
.popup--story-list .story-image[data-v-827456de] {
  display: block;
  width: 5.58rem;
  height: auto;
}
.popup--story-list .story-name[data-v-827456de] {
  position: absolute;
  top: 0.84rem;
  left: 0.84rem;
  z-index: 1;
  color: #cfcfcf;
  font-family: var(--font-bold);
  font-size: 0.28rem;
  line-height: 0.36rem;
  white-space: nowrap;
}
.popup--story-list .story-item:disabled .story-image[data-v-827456de],
.popup--story-list .story-item:disabled .story-name[data-v-827456de] {
  filter: grayscale(1) blur(2px) brightness(0.35);
}
.popup--story-list .story-lock[data-v-827456de] {
  position: absolute;
  top: 0.36rem;
  left: 0.28rem;
  z-index: 2;
  width: 5.08rem;
  height: 0.84rem;
}
.popup--tutorial .popup-panel[data-v-827456de] {
  width: 7.49rem;
  height: 12.97rem;
}
.popup--tutorial h2[data-v-827456de] {
  top: 0.5rem;
}
.popup--tutorial .btn-close[data-v-827456de] {
  top: 0.22rem;
}
.popup--tutorial .tutorial-swiper[data-v-827456de] {
  position: absolute;
  top: 1.28rem;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 1px;
  width: 5.74rem;
  height: 11.14rem;
  overflow: hidden;
}
.popup--tutorial .tutorial-video[data-v-827456de] {
  display: block;
  width: 5.74rem;
  height: 8.07rem;
  object-fit: contain;
}
.popup--tutorial .tutorial-copy[data-v-827456de] {
  box-sizing: border-box;
  width: 5.45rem;
  margin: 0.14rem 0 0 0.1rem;
  font-size: 0.23rem;
  line-height: 0.3rem;
  color: #f1f1f1;
  white-space: pre-line;
}
.popup--tutorial .tutorial-copy p + p[data-v-827456de] {
  margin-top: 0.08rem;
}
.popup--tutorial .btn-prev[data-v-827456de],
.popup--tutorial .btn-next[data-v-827456de] {
  position: absolute;
  top: 5.57rem;
  z-index: 2;
  width: 0.48rem;
  height: 0.78rem;
}
.popup--tutorial .btn-prev[data-v-827456de]:disabled,
.popup--tutorial .btn-next[data-v-827456de]:disabled {
  opacity: 0.5;
  cursor: default;
}
.popup--tutorial .btn-prev[data-v-827456de] {
  left: 0.13rem;
  transform: rotate(180deg);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--tutorial .btn-next[data-v-827456de] {
  right: 0.07rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--share .popup-panel[data-v-827456de] {
  width: 7.5rem;
  height: 7.36rem;
  top: 40%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.popup--share .btn-close[data-v-827456de] {
  right: auto;
  top: auto;
  bottom: -1.2rem;
  left: 50%;
  width: 0.84rem;
  height: 0.82rem;
  transform: translateX(-50%);
}
.popup--share .share-bg[data-v-827456de] {
  display: block;
  width: 6.8rem;
  margin: 0.8rem auto 0;
}
.pc .popup--share .share-bg[data-v-827456de] {
  transform: scale(1.5);
  transform-origin: bottom;
}
.popup--share .share-list[data-v-827456de] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  width: 5rem;
  height: 2.66rem;
  margin: 0.48rem auto 0;
  box-sizing: border-box;
  gap: 0.1rem;
}
.popup--share .share-list a[data-v-827456de] {
  width: 1rem;
  height: 1.02rem;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.share-canvas[data-v-10fe1be4] {
  position: fixed;
  top: 0;
  left: -4000px;
  z-index: -1;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  pointer-events: none;
}
.share-bg[data-v-10fe1be4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}
.smash.smash--6 .smash-name[data-v-10fe1be4],
.smash.smash--7 .smash-name[data-v-10fe1be4] {
  color: #e9e9e9;
}
.smash.smash--6 .progress[data-v-10fe1be4],
.smash.smash--7 .progress[data-v-10fe1be4] {
  color: #ffe8a2;
}
.smash.smash--6 .data[data-v-10fe1be4],
.smash.smash--7 .data[data-v-10fe1be4] {
  color: #f7d56c;
}
.smash.smash--6 .ko-tips[data-v-10fe1be4],
.smash.smash--7 .ko-tips[data-v-10fe1be4] {
  color: #deb459;
}
.smash.smash--6 .copyright[data-v-10fe1be4],
.smash.smash--7 .copyright[data-v-10fe1be4] {
  color: #ad8737;
}
.smash .seal[data-v-10fe1be4] {
  position: absolute;
  top: 240px;
  left: 36px;
  width: 648px;
  height: 659px;
}
.smash .smash-name[data-v-10fe1be4] {
  position: absolute;
  top: 748px;
  left: 75px;
  width: 1760px;
  font-size: 400;
  color: #ffffff;
  font-family: var(--font-bold);
  font-size: 48px;
}
.smash .progress[data-v-10fe1be4] {
  position: absolute;
  top: 845px;
  left: 62px;
  width: 1760px;
  color: #1a1a1a;
}
.smash .progress p[data-v-10fe1be4] {
  font-family: var(--font-heavy);
  font-size: 42px;
  line-height: 54px;
}
.smash .data[data-v-10fe1be4] {
  position: absolute;
  top: 976px;
  left: 75px;
  width: 1760px;
  color: #1a1a1a;
  font-family: var(--font-bold);
  font-size: 30px;
  line-height: 36px;
}
.smash .data[data-v-10fe1be4] span {
  color: #d8241a;
  font-family: 'Deco_Indt_bold';
}
.smash .smash-qrcode[data-v-10fe1be4] {
  position: absolute;
  right: 84px;
  bottom: 90px;
  width: 156px;
  height: 156px;
}
.smash .ko-tips[data-v-10fe1be4] {
  position: absolute;
  bottom: 40px;
  right: 58px;
  color: #322e2b;
  font-family: var(--font);
  font-size: 20px;
  white-space: nowrap;
}
.smash .copyright[data-v-10fe1be4] {
  position: absolute;
  bottom: 18px;
  right: 58px;
  color: #313131;
  font-family: var(--font);
  font-size: 15px;
  white-space: nowrap;
}
.result-share[data-v-10fe1be4] {
  color: #ffffff;
  font-family: var(--font);
}
.result-share .share-logo[data-v-10fe1be4] {
  position: absolute;
  top: 10px;
  left: 35px;
  width: 379px;
  height: 155px;
}
.result-share .result-qrcode[data-v-10fe1be4] {
  position: absolute;
  top: 713px;
  left: 57px;
  width: 104px;
  height: 104px;
}
.result-share .ko-tips[data-v-10fe1be4] {
  position: absolute;
  bottom: 40px;
  left: 74px;
  color: #fff;
  font-family: var(--font);
  font-size: 18px;
  white-space: nowrap;
}
.result-share .copyright[data-v-10fe1be4] {
  position: absolute;
  bottom: 18px;
  left: 74px;
  color: #e4e4e4;
  font-family: var(--font);
  font-size: 15px;
  white-space: nowrap;
}
.result-share .boss-name[data-v-10fe1be4] {
  position: absolute;
  left: 186px;
  top: 494px;
  white-space: nowrap;
  font-size: 56px;
  font-family: var(--font-bold);
  color: #fff;
}
.result-share .commander[data-v-10fe1be4] {
  position: absolute;
  top: 748px;
  left: 282px;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.result-share .commander .text-zs[data-v-10fe1be4] {
  position: absolute;
  left: -40px;
  top: 0;
  width: 23px;
  height: 72px;
}
.result-share .commander span[data-v-10fe1be4] {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
}
.result-share .commander strong[data-v-10fe1be4] {
  margin-top: 6px;
  font-family: var(--font-bold);
  font-size: 40px;
  font-weight: 400;
  white-space: nowrap;
}
.result-share .score-heading[data-v-10fe1be4] {
  position: absolute;
  top: 359px;
  left: 1368px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 458px;
  height: 43px;
  font-family: var(--font-bold);
  font-size: 32px;
  font-weight: 400;
}
.result-share .score-heading img[data-v-10fe1be4] {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.result-share .score-value[data-v-10fe1be4] {
  position: absolute;
  top: 399px;
  left: 1362px;
  width: 464px;
  color: #ffffff;
  font-family: 'Deco_Indt_bold';
  font-size: 116px;
  font-weight: 400;
  line-height: 126px;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 7px 0 rgba(61, 29, 63, 0.72);
}
.result-share .share-statistics[data-v-10fe1be4] {
  position: absolute;
  top: 540px;
  left: 1365px;
  width: 454px;
  margin: 0;
}
.result-share .share-statistics div[data-v-10fe1be4] {
  display: grid;
  grid-template-columns: 234px 220px;
  width: 454px;
  height: 42px;
  margin-bottom: 11px;
  line-height: 42px;
}
.result-share .share-statistics dt[data-v-10fe1be4],
.result-share .share-statistics dd[data-v-10fe1be4] {
  margin: 0;
  font-family: var(--font-bold);
  font-size: 27px;
  font-weight: 400;
  text-align: center;
}
.result-share .share-statistics dd[data-v-10fe1be4] {
  font-family: 'Deco_Indt_bold';
  font-size: 30px;
}
.result-share .share-comment[data-v-10fe1be4] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 872px;
  left: 274px;
  width: 770px;
  height: 126px;
  font-family: var(--font-bold);
  font-size: 32px;
  line-height: 0.42rem;
  font-weight: 400;
  gap: 10px;
}
.result-share .share-comment p[data-v-10fe1be4] {
  margin: 0;
}
.result-share .share-comment p[data-v-10fe1be4]:nth-child(1) {
  white-space: nowrap;
}
.result-share .share-squad[data-v-10fe1be4] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}
.result-share .share-squad-row[data-v-10fe1be4] {
  position: absolute;
  display: flex;
  height: 177px;
}
.result-share .share-squad-row img[data-v-10fe1be4] {
  display: block;
  flex: 0 0 auto;
  width: 148px;
  height: 177px;
}
.result-share .share-squad-row img + img[data-v-10fe1be4] {
  margin-left: -20px;
}
.result-share--roles-11 .share-squad-row[data-v-10fe1be4]:nth-child(1) {
  top: 679px;
  right: 87px;
}
.result-share--roles-11 .share-squad-row[data-v-10fe1be4]:nth-child(2) {
  top: 860px;
  right: 82px;
}
.result-share--roles-7 .share-squad-row[data-v-10fe1be4]:nth-child(1) {
  top: 679px;
  right: 123px;
}
.result-share--roles-7 .share-squad-row[data-v-10fe1be4]:nth-child(2) {
  top: 860px;
  right: 91px;
}
.result-share--roles-5 .share-squad-row[data-v-10fe1be4]:nth-child(1) {
  top: 679px;
  right: 190px;
}
.result-share--roles-5 .share-squad-row[data-v-10fe1be4]:nth-child(2) {
  top: 860px;
  right: 151px;
}
.result-share--roles-3 .share-squad-row[data-v-10fe1be4]:nth-child(1) {
  top: 778px;
  right: 130px;
}
.result-share--roles-2 .share-squad-row[data-v-10fe1be4]:nth-child(1) {
  top: 778px;
  right: 194px;
}

.root[data-v-74dc0cd1] {
  overflow: hidden;
  isolation: isolate;
}

/* 在页面切换动画之外缩放，所有子页面共用同一套设计坐标。 */
.pc .root[data-v-74dc0cd1] {
  width: 7.5rem;
  height: 16.04rem;
  transform: scale(var(--pc-page-scale));
  transform-origin: top left;
}
.page-view[data-v-74dc0cd1] {
  position: absolute;
  transform-origin: center;
  will-change: opacity, transform;
}
.page-switch-enter-active[data-v-74dc0cd1],
.page-switch-leave-active[data-v-74dc0cd1] {
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.page-switch-enter-active[data-v-74dc0cd1] {
  z-index: 2;
}
.page-switch-leave-active[data-v-74dc0cd1] {
  z-index: 1;
  pointer-events: none;
}
.page-switch-enter-from[data-v-74dc0cd1] {
  opacity: 0;
  transform: translate3d(0, 0.16rem, 0) scale(1.025);
}
.page-switch-leave-to[data-v-74dc0cd1] {
  opacity: 0;
  transform: translate3d(0, -0.08rem, 0) scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
.page-switch-enter-active[data-v-74dc0cd1],
  .page-switch-leave-active[data-v-74dc0cd1] {
    transition-duration: 1ms;
}
.page-switch-enter-from[data-v-74dc0cd1],
  .page-switch-leave-to[data-v-74dc0cd1] {
    transform: none;
}
}