@charset "UTF-8";
/* ====== 初始化 ▼ ====== */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: none;
}

body, div, dl, dt, dd, ul, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
}

button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
  overflow: visible;
  vertical-align: inherit;
}

button:focus {
  outline: none;
}

ol {
  margin: 0;
}

iframe {
  width: 100%;
}

iframe, img {
  border: 0;
}

ul {
  list-style: none;
}

.clear {
  clear: both;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

html {
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 5px; /* 垂直 scrollbar 宽度 */
  height: 5px; /* 水平 scrollbar 高度 */
}

::-webkit-scrollbar-track {
  background: transparent; /* 轨道 */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

/* ===== Firefox ===== */
* {
  scrollbar-width: thin; /* 約 5~6px */
  scrollbar-color: rgba(121, 121, 121, 0.9) transparent;
  scrollbar-width: none;
}

/* ====== 通用参数 ▼ ====== */
:root {
  --gradient-1: linear-gradient(to right, var(--c-yellow) 0%, var(--c-green-2) 100%);
  --gradient-2: linear-gradient(to left, var(--c-yellow) 0%, var(--c-green-2) 100%);
  --gradient-3: linear-gradient(to bottom, var(--c-red-5) 0%, var(--c-light) 80%);
  --gradient-4: linear-gradient(to bottom, var(--c-light) 25%, var(--c-green) 100%);
  --gradient-5: linear-gradient(to right, var(--c-purple-4) 0%, var(--c-purple-7) 100%);
  --gradient-6: linear-gradient(to bottom, var(--c-blue-5) 25%, var(--c-green-5) 100%);
  --gradient-7: linear-gradient(to right, var(--c-blue) 25%, var(--c-blue-6) 100%);
  --gradient-8: linear-gradient(to right, var(--c-light) 50%, var(--c-purple-3) 100%);
  --gradient-9: linear-gradient(to bottom, var(--c-purple-8) 20%, var(--c-purple-9) 60%);
  --gradient-10: linear-gradient(to bottom, var(--c-purple-7) 90%, var(--c-purple-9) 100%);
  --gradient-11: linear-gradient(to top, var(--c-green-10) 0%, var(--c-blue-8) 100%);
  --gradient-12: linear-gradient(to top, var(--c-green-10) 0%, var(--c-green-11) 70%);
  --gradient-13: linear-gradient(to left, var(--c-purple-7) 0%,var(--c-blue) 50%, var(--c-green-10) 60%,var(--c-purple-7) 100%);
  --gradient-14: linear-gradient(to bottom, var(--c-light) 25%, var(--c-purple-12) 100%);
  --gradient-15: linear-gradient(to bottom, var(--c-light) 25%, var(--c-blue-9) 100%);
  --gradient-16: linear-gradient(to bottom, var(--c-light) 25%, var(--c-red-9) 100%);
  --gradient-17: linear-gradient(to bottom, var(--c-light) 25%, var(--c-yellow-3) 100%);
  --charizard1: #a491fc;
  --charizard2: #ddccaa;
  --c-dark-value: 0, 0, 0 ;
  --c-dark-2: #000000;
  --c-dark-3: #262626;
  --c-gray-value: 139, 139, 139;
  --c-gray-2:#727272;
  --c-gray-3:#999999;
  --c-gray-4:#d2d2d2;
  --c-gray-5:#8b8b8b;
  --c-gray-6:#f2f2f2;
  --c-light: #ffffff;
  --c-light-value: 255, 255, 255 ;
  --c-purple:#5003a0;
  --c-purple-2:#5808fb;
  --c-purple-3:#a477fa;
  --c-purple-4:#9215ea;
  --c-purple-5:#bd58ff;
  --c-purple-6:#30004f;
  --c-purple-7:#7776ff;
  --c-purple-8:#a491fc;
  --c-purple-9:#f5edff;
  --c-purple-10:#130dff;
  --c-purple-11:#cb86ff;
  --c-purple-12:#c79af1;
  --c-yellow: #ffff00;
  --c-yellow-2: #ddccaa;
  --c-yellow-3:#fbee62;
  --c-green: #06c557;
  --c-green-2:#baf101;
  --c-green-3:#00ff00;
  --c-green-4:#7cfb65;
  --c-green-5:#aeffae;
  --c-green-6:#9ffac6;
  --c-green-7:#007130;
  --c-green-8:#aafbc7;
  --c-green-9:#009944;
  --c-green-10:#29f19c;
  --c-green-11:#c1fdc9;
  --c-green-12:#86c546;
  --c-green-13:#cce198;
  --c-red:#ca4242;
  --c-red-2:#eb6100;
  --c-red-3:#ff9f53;
  --c-red-4:#dc6f12;
  --c-red-5:#f6b786;
  --c-red-6:#e4007f;
  --c-red-7:#ffe8ce;
  --c-red-8:#ff0000;
  --c-red-9:#fcaf9a;
  --c-blue:#66dcff;
  --c-blue-2:#49a9c2;
  --c-blue-3:#0068b7;
  --c-blue-4:#00a0e9;
  --c-blue-5:#19fff4;
  --c-blue-6:#4282ec;
  --c-blue-7:#edfffc;
  --c-blue-8:#02a1f9;
  --c-blue-9:#62d7fb;
  --font-1:clamp(10px, 1vw, 12px);
  --font-2: clamp(11px, 1.1vw, 13px);
  --font-3: clamp(12px, 1.2vw, 14px);
  --font-4: clamp(14px, 1.33vw, 16px);
  --font-5: clamp(15px, 1.5vw, 18px);
  --font-6: clamp(16px, 1.67vw, 20px);
  --font-7: clamp(20px, 2.08vw, 25px);
  --font-8: clamp(24px, 2.5vw, 30px);
  --font-9: clamp(28px, 2.92vw, 35px);
  --text-halo-dark:
    drop-shadow(0 0 0px var(--c-dark-2))
    drop-shadow(0 0 1px var(--c-dark-2))
    drop-shadow(0 0 0px var(--c-dark-2))
    drop-shadow(0 0 0px var(--c-dark-2));
  --text-halo-purple:
    drop-shadow(0 0 0px var(--c-purple-6))
    drop-shadow(0 0 1px var(--c-purple-6))
    drop-shadow(0 0 0px var(--c-purple-6))
    drop-shadow(0 0 0px var(--c-purple-6));
  --text-halo-red:
    drop-shadow(0 0 0px var(--c-red))
    drop-shadow(0 0 1px var(--c-red))
    drop-shadow(0 0 0px var(--c-red))
    drop-shadow(0 0 0px var(--c-red));
  --text-halo-blue:
    drop-shadow(0 0 0px var(--c-blue-3))
    drop-shadow(0 0 1px var(--c-blue-3))
    drop-shadow(0 0 0px var(--c-blue-3))
    drop-shadow(0 0 0px var(--c-blue-3));
  --shadow-red: 3px 3px 0px var(--c-red);
  --shadow-blue: 3px 3px 0px var(--c-blue-2);
  --shadow-purple: 3px 3px 0px var(--c-purple-4);
  --animation-duration: 2s;
  --animation-gift: 2s;
  --animation-spin: 3s;
  --animation: var(--animation-duration) ease-out 1 forwards;
  --gift-duration: var(--animation-gift);
  --spin-duration: 18s var(--animation-spin);
  --grow-duration: 1.6s var(--animation-spin);
  --core-dur: 1.6s;
  --count-step: 0.20s;
  --seconds-1: .2s;
  --solid-1: 1px solid ;
  --solid-2: 2px solid ;
  --solid-3: 3px solid ;
  --solid-4: 4px solid ;
  --solid-5: 5px solid ;
  --dashed-1: 1px dashed ;
  --translate:translate(-50% , -50%);
  --scale-1: .3;
  --scale-2: .6;
  --scale-3: .35;
  --scale-4: .7;
  --scene-size: min(100vmin, 720px);
  --box-w: calc(var(--scene-size)*.43);
  --box-h: calc(var(--scene-size)*.33);
  --level-low: -1;
  --level-low-2: -2;
  --level-top: 9999;
  --level-1: 1;
  --level-2: 2;
  --level-3: 3;
  --level-4: 4;
  --level-5: 5;
  --level-6: 6;
  --level-10: 10;
  --level-30: 30;
  --level-50: 50;
  --img-1: url(../images/topic/m_bg.png) 0 70px / cover no-repeat;
}

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-image: url(../images/topic/bg_top.png), url(../images/topic/bg_bottom.jpg);
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  place-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  width: 100%;
  height: 100%;
  font-size: var(--font-4);
}
body .modal-open {
  overflow: hidden;
}

section {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.figure {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -2;
  top: 0;
}
.figure img:nth-of-type(1) {
  width: 20vh;
  position: absolute;
  top: 20%;
  left: 25%;
  z-index: 1;
  animation: gift 2s linear infinite 0.5s;
}
.figure img:nth-of-type(2) {
  width: 20vh;
  position: absolute;
  top: 32%;
  right: 4%;
  z-index: 1;
  animation: gift 2s linear infinite 0.5s;
}
.figure img:nth-of-type(3) {
  width: 40vh;
  position: absolute;
  top: 32%;
  left: 10%;
  z-index: 2;
  animation: pop 1.5s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(var(--c-dark-value), 0.35));
}
.figure img:nth-of-type(4) {
  width: 40vh;
  position: absolute;
  top: 40%;
  right: 15%;
  z-index: 2;
  animation: pop 2s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(var(--c-dark-value), 0.35));
}

.main {
  width: clamp(320px, 100%, 475px);
  height: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.main .limits .type img {
  display: none;
}

.main.normal {
  background: var(--img-1), var(--gradient-4);
}
.main.normal .boxes .limits {
  background-image: url(../images/topic/arena.png);
}
.main.normal .boxes .limits .type img:nth-of-type(1) {
  display: block;
}

.main.sill_10 {
  background: var(--img-1), var(--gradient-14);
}
.main.sill_10 .boxes .limits {
  background-image: url(../images/topic/arena_10.png);
}
.main.sill_10 .boxes .limits .type img:nth-of-type(2) {
  display: block;
}

.main.sill_20 {
  background: var(--img-1), var(--gradient-15);
}
.main.sill_20 .boxes .limits {
  background-image: url(../images/topic/arena_20.png);
}
.main.sill_20 .boxes .limits .type img:nth-of-type(3) {
  display: block;
}

.main.sill_30 {
  background: var(--img-1), var(--gradient-16);
}
.main.sill_30 .boxes .limits {
  background-image: url(../images/topic/arena_30.png);
}
.main.sill_30 .boxes .limits .type img:nth-of-type(4) {
  display: block;
}

.main.sill_50 {
  background: var(--img-1), var(--gradient-17);
}
.main.sill_50 .boxes .limits {
  background-image: url(../images/topic/arena_50.png);
}
.main.sill_50 .boxes .limits .type img:nth-of-type(5) {
  display: block;
}

#includeHeader {
  background: var(--c-light);
  position: relative;
  z-index: var(--level-top);
  box-shadow: 2px 2px 10px rgba(var(--c-gray-value), 0.5);
}

.back-to-top {
  position: sticky;
  bottom: 100px;
  margin-left: auto;
  margin-right: 16px;
  padding: 10px 14px;
  border-radius: 20px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: 0.3s;
  background: var(--c-purple-2);
  color: var(--c-light);
  box-shadow: 1px 1px 8px rgba(var(--c-dark-value), 0.3);
}

.back-to-top.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  z-index: var(--level-1);
}

.login .type {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  z-index: var(--level-2);
}
.login .type img:nth-of-type(2) {
  margin-top: -5px;
}
.login .select {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 65vh;
  transform: translate(-50%, -50%);
  z-index: var(--level-1);
}
.login .select button {
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: var(--font-7);
  font-weight: bold;
  color: var(--c-light);
}
.login .select button:nth-of-type(1)::before, .login .select button:nth-of-type(2)::before {
  position: absolute;
}
.login .select button:nth-of-type(1):hover, .login .select button:nth-of-type(2):hover {
  transform: scale(0.95);
}
.login .select button:nth-of-type(1):hover img:nth-of-type(1), .login .select button:nth-of-type(2):hover img:nth-of-type(1) {
  display: none;
}
.login .select button:nth-of-type(1):hover img:nth-of-type(2), .login .select button:nth-of-type(2):hover img:nth-of-type(2) {
  display: block;
}
.login .select button:nth-of-type(1) img:nth-of-type(1), .login .select button:nth-of-type(2) img:nth-of-type(1) {
  display: block;
}
.login .select button:nth-of-type(1) img:nth-of-type(2), .login .select button:nth-of-type(2) img:nth-of-type(2) {
  display: none;
}
.login .select button:nth-of-type(1) {
  margin-bottom: 10px;
}
.login .select button:nth-of-type(1)::before {
  content: " 登录 ";
}
.login .select button:nth-of-type(2)::before {
  content: " 注册 ";
}
.login .coin_fly img {
  position: absolute;
  z-index: var(--level-1);
}
.login .coin_fly img:nth-of-type(1) {
  left: 10px;
  top: 110px;
  animation: left_fly 0.5s ease-in forwards, right_coin 1s linear infinite;
}
.login .coin_fly img:nth-of-type(2) {
  right: 25px;
  top: 445px;
  animation: right_fly_02 0.5s ease-in forwards, right_coin 1.2s linear infinite;
}
.login .coin_fly img:nth-of-type(3) {
  right: 45px;
  top: 40px;
  animation: right_fly 0.5s ease-in forwards, right_coin2 1.5s infinite;
}
.login .shiny_fly img {
  position: absolute;
  z-index: var(--level-1);
}
.login .shiny_fly img:nth-of-type(1) {
  left: 10px;
  top: 410px;
  transform: scale(0.5);
  animation: shiny3 2.5s linear infinite;
}
.login .shiny_fly img:nth-of-type(2) {
  right: -5px;
  top: 505px;
  transform: scale(0.3);
  animation: shiny2 2.2s linear infinite;
}
.login .shiny_fly img:nth-of-type(3) {
  right: 10px;
  top: 100px;
  animation: shiny1 2s linear infinite;
}

.bg_login {
  width: 125vh;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.bg_login img {
  display: block;
  width: 100%;
  animation: spin_login 18s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

/* ====== window ▼ ====== */
#modalOverlay [data-help-id] {
  display: none !important;
}

#modalOverlay [data-help-id].is-active {
  display: flex !important;
}

.modal-overlay {
  width: 475px;
  background: rgba(var(--c-dark-value), 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: fixed;
  inset: 0;
  transform: none;
  z-index: var(--level-10);
}

.modal-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.md.active .md-overlay {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--gradient-3);
  padding: 20px 20px 16px;
  width: 475px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(var(--c-dark-value), 0.25);
  position: relative;
  overflow: hidden;
  top: 84px;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.confirm {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: var(--level-10);
}
.confirm .c_block {
  width: 250px;
  height: 150px;
  background-color: var(--c-light);
  border-radius: 10px;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.confirm .c_block span {
  width: 100%;
  display: block;
  font-size: 20px;
  font-weight: bold;
}
.confirm .c_block button {
  display: block;
  width: 100px;
  line-height: 40px;
  border-radius: 50px;
  border: 2px solid var(--c-gray-4);
  background: var(--c-light);
  margin: 0 5px;
  cursor: pointer;
}

.records, .fence, .bound {
  display: none;
  position: relative;
  background: var(--c-light);
  padding: 20px 24px;
  border-radius: 8px;
  width: 90%;
  margin: 60px auto 60px;
  z-index: var(--level-1);
}

.records.is-active, .fence.is-active, .bound.is-active {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
}

.full_page .close-help, .records .close-help,
.fence .close-help, .bound .close-help {
  width: 36px;
  height: 36px;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 100px;
  background: var(--c-green);
  position: absolute;
  top: 8px;
  right: 15px;
  cursor: pointer;
  z-index: var(--level-1);
  border: var(--solid-1) var(--c-light);
}
.full_page .close-help::before, .records .close-help::before,
.fence .close-help::before, .bound .close-help::before {
  content: " ";
  width: 5px;
  height: 20px;
  background: var(--c-light);
  border-radius: 100px;
  transform: rotate(-45deg);
  position: absolute;
}
.full_page .close-help::after, .records .close-help::after,
.fence .close-help::after, .bound .close-help::after {
  content: " ";
  width: 5px;
  height: 20px;
  background: var(--c-light);
  border-radius: 100px;
  transform: rotate(45deg);
  position: absolute;
}

#includeRule, #includeOverview {
  height: 100%;
}
#includeRule .full_page, #includeRule .records, #includeOverview .full_page, #includeOverview .records {
  height: 100%;
  width: 100%;
}

#includeFettle {
  position: absolute;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden;
  padding: 25px 0 0 30px;
}
.tabs label {
  color: var(--c-light);
  cursor: pointer;
  display: block;
  font-size: var(--font-3);
  font-weight: bold;
  padding: 22px 0;
  background: var(--c-purple-2);
  width: 90px;
  height: 50px;
  text-align: center;
}
.tabs .tab_block {
  /* 只有支援 :has() 的瀏覽器才套用（Safari 15.4+ 才有機會） */
}
.tabs .tab_block > label {
  background: var(--c-purple-2);
  color: var(--c-light);
  border-radius: 200px 200px 0 0;
  position: relative;
  display: flex;
  justify-content: center;
}
.tabs .tab_block > label::before {
  content: " ";
  width: 38px;
  height: 33px;
  position: absolute;
  top: -15px;
  background: url(../images/rule/accessories.png) 0 0;
}
.tabs .tab_block:nth-of-type(1) > label::before {
  background-position: 0 0;
}
.tabs .tab_block:nth-of-type(2) > label::before {
  background-position: 0 -33px;
}
.tabs .tab_block:has(> input[type=radio]:checked) > label {
  background: var(--c-purple-9);
  color: var(--c-purple-2);
}
@supports selector(:has(*)) {
  .tabs .tab_block .tab_block:has(input[type=radio]:checked) > label {
    background: var(--c-purple-9);
    color: var(--c-purple-2);
  }
}
.tabs .tab_block > input[type=radio] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  transition: all 0.3s ease-in-out;
}
.tabs .tab_block > input[type=radio] + .between {
  display: flex;
  opacity: 0;
  pointer-events: none;
  padding: 15px 0 0;
  width: 100%;
  max-height: 100vh;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 73px;
  background: var(--c-purple-9);
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--level-1);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.tabs .tab_block > input[type=radio] + .between::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.tabs .tab_block > input[type=radio]:checked + .between {
  opacity: 1;
  pointer-events: auto;
}
.tabs .tab_block .time {
  padding: 15px 0;
}
.tabs .tab_block .time span:nth-of-type(2) img {
  transform: rotate(-90deg);
}
@supports selector(.x:has(input:checked)) {
  .tabs .tab_block:has(> input[type=radio]:checked) > label {
    background: var(--c-purple-9);
    color: var(--c-purple-2);
  }
}

.s_tab {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  width: 90%;
  border-radius: 15px 15px 0 0;
}
.s_tab label {
  border-radius: 15px 15px 0 0;
}
.s_tab input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}
.s_tab > label {
  flex: 1 1 0;
  padding: 5px 0;
  height: auto;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: all 0.3s ease-in-out;
  background: var(--c-light);
  color: var(--c-purple-2);
  border: var(--solid-1) var(--c-purple-10);
}
.s_tab .panels {
  width: 100%;
}
.s_tab .panel {
  display: none;
}
.s_tab > input[type=radio]:nth-of-type(1):checked ~ .panels .panel1 {
  display: block;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  border-top: 0;
}
.s_tab > input[type=radio]:nth-of-type(2):checked ~ .panels .panel2 {
  display: block;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  border-top: 0;
}
.s_tab > input[type=radio]:checked + label {
  color: var(--c-light);
  font-weight: 700;
  background: var(--c-purple-2);
}
.s_tab .flexible .period, .s_tab .flexible .sequence {
  display: flex;
  padding: 20px;
  position: relative;
}
.s_tab .flexible .period .left, .s_tab .flexible .sequence .left {
  width: 200px;
  height: 60px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  padding-left: 15px;
  position: relative;
  z-index: var(--level-10);
}
.s_tab .flexible .period .left span, .s_tab .flexible .sequence .left span {
  position: relative;
}
.s_tab .flexible .period .left span img, .s_tab .flexible .sequence .left span img {
  position: absolute;
  right: -25px;
  top: -5px;
}
.s_tab .flexible .period .right, .s_tab .flexible .sequence .right {
  width: 100%;
  position: relative;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.s_tab .flexible .period .right span:nth-child(1), .s_tab .flexible .period .right span:nth-child(3), .s_tab .flexible .sequence .right span:nth-child(1), .s_tab .flexible .sequence .right span:nth-child(3) {
  width: 65px;
  height: 65px;
  background: var(--gradient-6);
  display: block;
  position: absolute;
  border-radius: 100px;
  border: var(--solid-1) var(--c-purple-10);
  z-index: var(--level-2);
}
.s_tab .flexible .period .right span:nth-child(1) h3, .s_tab .flexible .period .right span:nth-child(3) h3, .s_tab .flexible .sequence .right span:nth-child(1) h3, .s_tab .flexible .sequence .right span:nth-child(3) h3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: var(--level-3);
  font-size: var(--font-3);
  color: var(--c-light);
  padding-top: 4px;
}
.s_tab .flexible .period .right span:nth-child(1) h3::before, .s_tab .flexible .period .right span:nth-child(3) h3::before, .s_tab .flexible .sequence .right span:nth-child(1) h3::before, .s_tab .flexible .sequence .right span:nth-child(3) h3::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 1px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.s_tab .flexible .period .right span:nth-child(1) h3::after, .s_tab .flexible .period .right span:nth-child(3) h3::after, .s_tab .flexible .sequence .right span:nth-child(1) h3::after, .s_tab .flexible .sequence .right span:nth-child(3) h3::after {
  content: " ";
  width: 40px;
  height: 42px;
  display: block;
  position: absolute;
  z-index: var(--level-low-2);
  top: -14px;
}
.s_tab .flexible .period .right span:nth-child(1) h5, .s_tab .flexible .period .right span:nth-child(3) h5, .s_tab .flexible .sequence .right span:nth-child(1) h5, .s_tab .flexible .sequence .right span:nth-child(3) h5 {
  font-size: var(--font-1);
  padding: 5px 0 0 0;
}
.s_tab .flexible .period .right span:nth-child(2), .s_tab .flexible .sequence .right span:nth-child(2) {
  width: 100%;
  height: 30px;
  display: flex;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.s_tab .flexible .period .right span:nth-child(2)::before, .s_tab .flexible .sequence .right span:nth-child(2)::before {
  content: " ";
  width: 100%;
  height: 30px;
  display: inline-block;
  position: absolute;
  background: url(../images/rule/arrow.png);
  background-repeat: repeat-x;
  background-position: center;
  z-index: var(--level-1);
  animation: arrow-run 1s linear infinite;
}
.s_tab .flexible .period .right span:nth-child(3), .s_tab .flexible .sequence .right span:nth-child(3) {
  right: 0;
  top: 0;
}
.s_tab .flexible .period > .answer, .s_tab .flexible .sequence > .answer {
  position: absolute;
  left: 0;
  top: -6px;
  width: 100%;
  height: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 0;
  color: var(--c-dark-2);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: var(--level-10);
}
.s_tab .flexible .period > .answer .among, .s_tab .flexible .sequence > .answer .among {
  width: 100%;
  height: 100%;
  background: var(--c-gray-4);
  margin: 0 auto;
  text-align: right;
  padding-right: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-end;
  flex-direction: column;
}
.s_tab .flexible .period > .answer .among span, .s_tab .flexible .sequence > .answer .among span {
  width: auto;
  display: block;
  position: relative;
  line-height: 22px;
}
.s_tab .flexible .period:has(.question:hover) > .answer, .s_tab .flexible .sequence:has(.question:hover) > .answer {
  opacity: 1;
  transform: translateY(0);
}
.s_tab .flexible .period:has(.question:hover) > .answer.question img, .s_tab .flexible .sequence:has(.question:hover) > .answer.question img {
  display: none;
}
.s_tab .flexible .period .question, .s_tab .flexible .sequence .question {
  position: relative;
  cursor: pointer;
}
.s_tab .flexible .period .right {
  margin-right: 30px;
}
.s_tab .flexible .period .right span:nth-child(1) h3::after, .s_tab .flexible .period .right span:nth-child(3) h3::after {
  background: url(../images/rule/calendar.png) 0 84px;
}
.s_tab .flexible .period .right span:nth-child(2) {
  background: var(--gradient-7);
}
.s_tab .flexible .sequence .right {
  margin-left: 30px;
}
.s_tab .flexible .sequence .right span:nth-child(1) h3::after, .s_tab .flexible .sequence .right span:nth-child(3) h3::after {
  background: url(../images/rule/calendar.png) 0 42px;
}
.s_tab .flexible .sequence .right span:nth-child(2) {
  background: var(--gradient-5);
}
.s_tab .bottomline {
  position: relative;
}
.s_tab .bottomline::after {
  content: " ";
  border-bottom: var(--dashed-1) var(--c-dark-2);
  position: absolute;
  width: 100%;
  right: 0;
  bottom: 0;
}

.full_page .main {
  width: 475px;
  height: 100%;
  margin-top: 84px;
  background-repeat: no-repeat;
}

.full_page .main {
  background: url(../images/rule/star_bg.png) top center no-repeat, var(--gradient-9);
}

.rotation {
  width: 90px;
  height: 44px;
  background: var(--c-light);
  border: var(--solid-1) var(--c-gray-2);
  border-radius: 100px;
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--c-purple-2);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.rotation:hover {
  background: var(--c-green-8);
}

.node {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.node a {
  width: auto;
  padding: 5px;
  border: var(--solid-1) var(--c-purple-10);
  color: var(--c-purple-2);
  font-size: var(--font-4);
  font-weight: bold;
  margin: 0 2px;
}
.node a:hover {
  background: var(--c-purple-2);
  color: var(--c-light);
}

.calculate {
  width: 80%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-green);
  margin-left: -50px;
}
.calculate h3 {
  background: var(--c-green);
}
.calculate .formula {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.calculate .formula span {
  width: 100%;
  display: block;
}
.calculate .formula .for_1, .calculate .formula .for_2, .calculate .formula .for_3 {
  width: 90px;
  height: 60px;
  background: var(--c-green-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  position: relative;
  margin-right: 20px;
  font-weight: bold;
}
.calculate .formula .for_1::after {
  content: " + ";
  position: absolute;
  right: -15px;
}
.calculate .formula .for_2::after {
  content: " = ";
  position: absolute;
  right: -15px;
}
.calculate .formula .for_1 .bottomline, .calculate .formula .for_2 .bottomline {
  position: relative;
}
.calculate .formula .for_1 .bottomline::before, .calculate .formula .for_2 .bottomline::before {
  content: " ";
  border-bottom: var(--solid-1) var(--c-dark-2);
  width: 85%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: -6px;
}
.calculate .formula .for_3 span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: var(--level-3);
  font-size: var(--font-4);
  font-weight: bold;
  color: var(--c-yellow);
}
.calculate .formula .for_3 span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  white-space: pre;
  -webkit-text-stroke: 2px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.calculate .formula .for_4 {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 20px;
  margin-top: -35px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.calculate .formula .for_4 .explain_1 {
  position: absolute;
  z-index: var(--level-2);
  color: var(--c-light);
  font-size: var(--font-1);
  line-height: 12px;
}
.calculate .formula .for_4 .explain_1 span b {
  font-size: var(--font-3);
  color: var(--c-yellow);
}
.calculate .formula .for_4 .explain_1 span:nth-of-type(2) {
  margin-top: 8px;
}
.calculate .formula .for_4 img {
  position: absolute;
  z-index: var(--level-1);
  animation: spin 15s linear infinite;
}
.calculate .formula .for_4 .bottomline {
  position: relative;
}
.calculate .formula .for_4 .bottomline::before {
  content: " ";
  border-bottom: var(--dashed-1) var(--c-light);
  width: 95%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: -5px;
}

.distribution {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
}
.distribution h3 {
  background: var(--c-purple-2);
}
.distribution p {
  padding: 10px 0;
}

.blindgifts {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  position: relative;
}
.blindgifts h3 {
  background: var(--c-purple-2);
}
.blindgifts p {
  text-align: left;
  padding: 10px 0;
  font-weight: bold;
  position: relative;
}
.blindgifts .for_1, .blindgifts .for_2 {
  padding-left: 238px;
  display: block;
}
.blindgifts .for_1 p::before, .blindgifts .for_2 p::before {
  content: " ";
  width: 40px;
  height: 45px;
  position: absolute;
}
.blindgifts .for_1 {
  position: relative;
}
.blindgifts .for_1::before {
  content: " ";
  width: 100%;
  height: 2px;
  background: var(--gradient-8);
  position: absolute;
  bottom: 0;
  right: 0;
}
.blindgifts .for_1 p::before {
  left: -50px;
  top: 15px;
  background: url(../images/rule/accessories_2.png);
}
.blindgifts .for_2 {
  position: relative;
}
.blindgifts .for_2 p::before {
  left: -50px;
  top: 3px;
  background: url(../images/rule/accessories_2.png) 0 -45px;
}
.blindgifts .for_3 {
  width: 100%;
  height: 15px;
  background: var(--c-purple-2);
  position: relative;
}
.blindgifts .for_3 img {
  position: absolute;
  left: -10px;
  bottom: 0;
}

.bonuscard {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  position: relative;
  font-size: var(--font-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bonuscard h3 {
  background: var(--c-purple-2);
}
.bonuscard p {
  padding: 0 15px 10px;
  text-align: left;
}

.increase {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  position: relative;
  font-size: var(--font-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.increase h3 {
  background: var(--c-purple-2);
}
.increase p {
  padding: 0 15px 10px;
  text-align: left;
}

.enjoyalone {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  position: relative;
  font-size: var(--font-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.enjoyalone h3 {
  background: var(--c-purple-2);
}
.enjoyalone div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.enjoyalone div img {
  margin: 0 10px;
}
.enjoyalone div p {
  text-align: left;
}

.notice {
  width: 90%;
  color: var(--c-dark-2);
  text-align: left;
  padding: 10px;
  font-size: var(--font-3);
  margin-bottom: 80px;
}
.notice h3 {
  width: 100%;
  padding: 6px 0;
  font-size: var(--font-4);
  color: var(--c-dark-2);
}

.categories {
  display: flex;
  padding: 5px;
}
.categories .classify {
  width: 66px;
  height: auto;
  display: flex;
  margin: 2px;
  flex-direction: column;
  font-size: var(--font-2);
  color: var(--c-green-7);
}
.categories .classify span:nth-child(1) {
  width: 100%;
  height: 85px;
  display: block;
  background: var(--c-green-6);
}
.categories .classify span:nth-child(2) {
  width: 100%;
  height: auto;
  line-height: 22px;
  background: var(--c-gray-6);
}

.platform, .excludegame, .droprate {
  width: 90%;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-10);
  position: relative;
  font-size: var(--font-4);
  display: flex;
  flex-wrap: wrap;
}
.platform h3, .excludegame h3, .droprate h3 {
  background: var(--c-purple-2);
}
.platform p, .excludegame p, .droprate p {
  text-align: left;
  padding: 10px 15px;
  font-size: var(--font-3);
}

.droprate {
  margin-bottom: 120px;
}

.literal_red {
  color: var(--c-red-6);
}

.literal_purple {
  color: var(--c-purple-2);
}

.distribution, .calculate, .blindgifts,
.bonuscard, .increase, .enjoyalone, .platform,
.excludegame, .droprate {
  height: auto;
  border-radius: 15px;
  margin-top: 20px;
  overflow: hidden;
}
.distribution h3, .calculate h3, .blindgifts h3,
.bonuscard h3, .increase h3, .enjoyalone h3, .platform h3,
.excludegame h3, .droprate h3 {
  width: 100%;
  padding: 6px 0;
  color: var(--c-light);
  font-size: var(--font-5);
}

.records {
  display: none;
  background: none;
  padding-top: 105px;
}
.records .main {
  width: 450px;
  min-height: 80vh;
  background: none;
}
.records .main .tabs {
  padding: 14px 0 0 0;
}
.records .main .tabs > .tab_block > input[type=radio] {
  position: absolute;
  left: -9999px;
}
.records .main .tabs > .tab_block > .between {
  display: none;
}
.records .main .tabs > .tab_block > input[type=radio]:checked ~ .between {
  display: block;
}
.records .main .tabs > .tab_block > label {
  width: 135px;
  height: 60px;
  padding: 30px 0 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.records .main .tabs > .tab_block > label::before {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}
.records .main .tabs > .tab_block > label[for=records_mark-1]::before {
  background: url(../images/records/accessories.png) 0 0;
}
.records .main .tabs > .tab_block > label[for=records_mark-2]::before {
  background: url(../images/records/accessories.png) 0 -52px;
}
.records .main .tabs > .tab_block > label[for=records_mark-3]::before {
  background: url(../images/records/accessories.png) 0 -104px;
}
.records .main .tabs > .tab_block > label.is-active {
  font-weight: 700;
}
.records .main .tabs > .tab_block > label.is-active::before {
  filter: brightness(1.15) saturate(1.1);
}
.records .main .close-help {
  top: 55px;
  right: 0px;
  z-index: var(--level-2);
}

.accumulate {
  width: 100%;
  height: 47px;
  border-radius: 10px;
  background: var(--c-purple-2);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 0 90px;
  position: relative;
}
.accumulate::before {
  content: " ";
  width: 52px;
  height: 52px;
  background: url(../images/records/accessories.png) 0 -156px;
  position: absolute;
  left: 25px;
  top: -8px;
}
.accumulate span {
  font-weight: bold;
}
.accumulate span:last-child {
  font-size: var(--font-7);
  color: var(--c-green-3);
}

/* 下拉選單 */
.record-wrap {
  width: 100%;
  max-width: 475px;
  margin: 0 auto;
  color: var(--c-light);
  position: relative;
  padding: 20px;
}
.record-wrap .dropdown-trigger .value-at {
  display: none;
  width: 100%;
  color: var(--c-dark-2);
}
.record-wrap .term-bodies .term-body {
  display: none;
}
.record-wrap .fake-bodies .fake-body {
  display: none;
}

.dropdown {
  position: relative;
  margin-bottom: 12px;
  z-index: var(--level-10);
}
.dropdown:hover .dropdown-menu {
  display: block;
  width: 90%;
}
.dropdown:focus-within .dropdown-menu {
  display: block;
  width: 90%;
}

/* 顯示欄 */
.dropdown-trigger {
  background: var(--c-light);
  padding: 6px 12px;
  border-radius: 100px;
  border: var(--solid-2) var(--c-purple-2);
  color: var(--c-purple-2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-5);
  font-weight: bold;
  position: relative;
  z-index: var(--level-2);
}

/* 箭頭 */
.arrow {
  font-size: var(--font-1);
  color: var(--c-light);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.arrow::before {
  content: " ";
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--c-purple-2);
  border-radius: 100px;
  z-index: var(--level-low);
}

/* 下拉選項 */
.dropdown-menu {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
  z-index: 10;
  width: 90%;
  margin: auto;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  box-shadow: 2px 2px 15px rgba(var(--c-dark-value), 0.5);
  z-index: var(--level-1);
}
.dropdown-menu .opt {
  display: flex;
  width: 100%;
  background: var(--c-light);
  color: var(--c-dark-2);
  cursor: pointer;
  height: auto;
  padding: 0;
  position: relative;
}
.dropdown-menu .opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dropdown-menu .opt span {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dropdown-menu .opt:hover span {
  background: var(--c-purple-2);
  color: var(--c-light);
}

/* 預設隱藏 */
.record-wrap .value-at,
.record-wrap .term-body,
.record-wrap .fake-body {
  display: none;
}

/* 顯示：不要強制 block，回到原本應該的 display */
.record-wrap .value-at[data-visible="1"],
.record-wrap .term-body[data-visible="1"],
.record-wrap .fake-body[data-visible="1"] {
  display: revert;
}

/* 如果你的瀏覽器不支援 revert（極少），用這個 fallback */
@supports not (display: revert) {
  .record-wrap .value-at[data-visible="1"],
  .record-wrap .term-body[data-visible="1"],
  .record-wrap .fake-body[data-visible="1"] {
    display: block;
  }
}
.term-table {
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-2);
  border-radius: 12px;
  margin-bottom: 10px;
}
.term-table .fake-head {
  border-radius: 11px 11px 0 0;
}
.term-table .term-row {
  display: flex;
}
.term-table .term-row .term-cell {
  color: var(--c-light);
  padding: 8px;
}
.term-table .term-row .term-cell:nth-child(1) {
  flex: 2;
}
.term-table .term-row .term-cell:nth-child(2) {
  flex: 1;
}
.term-table .term-row .term-cell:nth-child(3) {
  flex: 1;
}
.term-table .term-bodies {
  width: 100%;
  border-radius: 10px;
}
.term-table .term-bodies .term-body {
  padding: 0;
}
.term-table .term-bodies .term-row {
  display: flex;
}
.term-table .term-bodies .term-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-align: center;
  font-size: var(--font-3);
  color: var(--c-dark-2);
  padding: 8px 6px;
}
.term-table .term-bodies .term-cell:nth-child(1) {
  flex: 2;
}
.term-table .term-bodies .term-cell:nth-child(2) {
  flex: 1;
}
.term-table .term-bodies .term-cell:nth-child(3) {
  flex: 1;
}

.stress_up {
  background: var(--gradient-11);
  border-radius: 12px 12px 0 0;
  border-bottom: 0;
  position: relative;
  display: flex;
  justify-content: center;
}
.stress_up span {
  position: absolute;
  z-index: var(--level-1);
}
.stress_up span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 1px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.stress_up::before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 12px 12px 0 0;
  top: 0;
  left: -4px;
  background: var(--gradient-11);
}

.stress_down {
  border-radius: 0 0 12px 12px;
  width: 100%;
  height: 100%;
  background: var(--c-light);
  border: var(--solid-3) var(--c-green-10);
  border-top: 0;
}
.stress_down b {
  font-size: var(--font-5);
  font-weight: bold;
  color: var(--c-red);
}

.limit {
  max-height: 47vh !important;
}

/* 表格 */
.fake-table {
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-2);
  border-radius: 12px;
  overflow: hidden;
  font-size: var(--font-3);
}

.fake-row {
  display: flex;
}

.fake-head {
  font-weight: 600;
  background: var(--c-purple-2);
}
.fake-head .fake-cell {
  color: var(--c-light);
}

.fake-cell {
  padding: 8px;
  text-align: center;
  color: var(--c-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fake-cell:nth-child(1) {
  flex: 2;
}
.fake-cell:nth-child(2) {
  flex: 1;
}
.fake-cell:nth-child(3) {
  flex: 1;
}
.fake-cell .data {
  font-size: var(--font-5);
  font-weight: bold;
  color: var(--c-red);
}

/* bodies 只放「滾動/隔行」等通用樣式，不放 display */
.fake-bodies .fake-body {
  max-height: 55vh;
  overflow-y: scroll !important;
  scrollbar-width: thin !important;
}
.fake-bodies .fake-body .fake-row:nth-child(odd) {
  background: var(--c-blue-7);
}

/* 狀態 */
.dispatched, .underreview, .notyet {
  padding: 3px 8px;
  color: var(--c-light);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.dispatched {
  background: var(--c-green-9);
}

.underreview {
  background: var(--c-red-2);
}

.notyet {
  background: var(--c-gray-3);
}

.precautions {
  text-align: left;
  padding: 0 25px;
  font-size: var(--font-3);
  color: var(--c-dark-2);
  line-height: 22px;
  margin-bottom: 80px;
}

.queue .fake-cell:nth-child(1) {
  flex: 1;
}
.queue .fake-cell .data {
  color: var(--c-purple-2);
  font-size: var(--font-3);
}

.bound {
  display: none;
  background: none;
}
.bound .main {
  width: 380px;
  min-height: 120px;
  padding: 20px 0px;
  background: var(--c-light);
  border-radius: 0 0 20px 20px;
  border: var(--solid-4) var(--c-green-4);
  border-top: 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  overflow: visible;
}
.bound .main span {
  line-height: 30px;
}
.bound .main b {
  font-weight: bold;
  font-size: var(--font-5);
}
.bound .main b:nth-child(2) {
  color: var(--c-red);
}
.bound .p_month {
  width: 57px;
  height: 57px;
  background: var(--c-purple-2);
  position: absolute;
  left: 45px;
  top: 30px;
  border-radius: 10px;
  border: var(--solid-2) var(--c-blue-4);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-light);
}
.bound .available {
  width: 150px;
  height: 30px;
  background: var(--gradient-5);
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -4px;
  right: -4px;
  color: var(--c-light);
  font-weight: bold;
  font-size: var(--font-5);
}
.bound .available::after {
  content: "";
  width: 33px;
  height: 50px;
  background: url(../images/game/se_box.png);
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(20deg);
  position: absolute;
  right: -5px;
}
.bound .method {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
.bound .method span {
  position: relative;
  display: flex;
  justify-content: center;
  line-height: 25px;
  padding-top: 10px;
  font-weight: bold;
  margin: 0 12px;
}
.bound .method span::before {
  content: " ";
  width: 15px;
  height: 15px;
  background: url(../images/newbie/arrow.png);
  position: absolute;
  top: -15px;
}
.bound button {
  width: 148px;
  height: 51px;
  margin: 15px 0 30px;
  font-size: var(--font-5);
  font-weight: bold;
  cursor: pointer;
  background-size: cover;
  color: var(--c-light);
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bound button::before {
  content: " 下一步 ";
  position: absolute;
}
.bound button:hover {
  transform: scale(0.95);
}
.bound button:hover img:nth-of-type(1) {
  display: none;
}
.bound button:hover img:nth-of-type(2) {
  display: block;
}
.bound button img:nth-of-type(1) {
  display: block;
}
.bound button img:nth-of-type(2) {
  display: none;
}

.bound.is-active {
  display: flex;
}

[data-help-id=newbie] .look_up, [data-help-id=newbie_2] .look_up, [data-help-id=newbie_3] .look_up {
  width: 397px;
  height: 128px;
  display: flex;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
}
[data-help-id=newbie] .look_up .se_man, [data-help-id=newbie] .look_up .oops, [data-help-id=newbie] .look_up .back_plate, [data-help-id=newbie_2] .look_up .se_man, [data-help-id=newbie_2] .look_up .oops, [data-help-id=newbie_2] .look_up .back_plate, [data-help-id=newbie_3] .look_up .se_man, [data-help-id=newbie_3] .look_up .oops, [data-help-id=newbie_3] .look_up .back_plate {
  position: absolute;
  z-index: var(--level-1);
}
[data-help-id=newbie] .look_up .se_man, [data-help-id=newbie_2] .look_up .se_man, [data-help-id=newbie_3] .look_up .se_man {
  bottom: 0px;
  right: 35px;
  z-index: var(--level-2);
}
[data-help-id=newbie] .look_up .back_plate, [data-help-id=newbie_2] .look_up .back_plate, [data-help-id=newbie_3] .look_up .back_plate {
  bottom: 0;
  width: 382px;
  height: 100px;
}
[data-help-id=newbie] .subtitle, [data-help-id=newbie_2] .subtitle, [data-help-id=newbie_3] .subtitle {
  position: absolute;
  z-index: var(--level-2);
  top: 55px;
  left: 65px;
  display: flex;
  flex-direction: column;
}
[data-help-id=newbie] .subtitle .num, [data-help-id=newbie_2] .subtitle .num, [data-help-id=newbie_3] .subtitle .num {
  font-weight: bold;
  font-size: var(--font-7);
  color: var(--c-light);
}
[data-help-id=newbie] .subtitle .num::before, [data-help-id=newbie_2] .subtitle .num::before, [data-help-id=newbie_3] .subtitle .num::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 5px var(--c-dark-2);
}
[data-help-id=newbie] .steps, [data-help-id=newbie_2] .steps, [data-help-id=newbie_3] .steps {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 12px;
}
[data-help-id=newbie] .steps::before, [data-help-id=newbie] .steps::after, [data-help-id=newbie_2] .steps::before, [data-help-id=newbie_2] .steps::after, [data-help-id=newbie_3] .steps::before, [data-help-id=newbie_3] .steps::after {
  position: absolute;
}
[data-help-id=newbie] .steps::before, [data-help-id=newbie_2] .steps::before, [data-help-id=newbie_3] .steps::before {
  content: " ";
  width: 28px;
  height: 26px;
  background: url(../images/newbie/finger_s.png);
  bottom: 0;
  left: 35px;
  animation: finger_2 0.8s infinite alternate ease-in-out;
}
[data-help-id=newbie] .steps::after, [data-help-id=newbie_2] .steps::after, [data-help-id=newbie_3] .steps::after {
  content: " 点选 ";
  left: 0;
  bottom: -5px;
}

[data-help-id=newbie_2].bound .main {
  padding: 20px 0 20px 65px;
}
[data-help-id=newbie_2].bound .main b {
  font-weight: bold;
  font-size: var(--font-5);
  color: var(--c-red-2);
}

[data-help-id=newbie_3].bound .look_up .back_plate {
  bottom: 0;
  width: 382px;
  height: 130px;
}
[data-help-id=newbie_3].bound .subtitle {
  flex-direction: inherit;
  left: inherit;
  top: 20px;
  padding-left: 30px;
}
[data-help-id=newbie_3].bound .subtitle .sign {
  position: absolute;
  top: -15px;
}
[data-help-id=newbie_3].bound button::before {
  content: " 我知道了 ";
}

.fence {
  background: none;
}
.fence .main {
  width: 380px;
  min-height: 180px;
  padding: 35px 0 30px;
  background: var(--c-light);
  border-radius: 0 0 20px 20px;
  border: var(--solid-4) var(--c-purple-2);
  border-top: 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}
.fence .betting, .fence .Online, .fence .verify {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.fence .betting span, .fence .Online span, .fence .verify span {
  width: 100%;
  margin: 8px 0;
}
.fence .betting span b, .fence .Online span b, .fence .verify span b {
  font-size: var(--font-4);
  color: var(--c-red-8);
  font-weight: 500;
}
.fence .betting button, .fence .Online button, .fence .verify button {
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: var(--font-4);
  font-weight: bold;
  color: var(--c-light);
}
.fence .betting button::before, .fence .Online button::before, .fence .verify button::before {
  position: absolute;
}
.fence .betting button:hover, .fence .Online button:hover, .fence .verify button:hover {
  transform: scale(0.95);
}
.fence .betting button:hover img:nth-of-type(1), .fence .Online button:hover img:nth-of-type(1), .fence .verify button:hover img:nth-of-type(1) {
  display: none;
}
.fence .betting button:hover img:nth-of-type(2), .fence .Online button:hover img:nth-of-type(2), .fence .verify button:hover img:nth-of-type(2) {
  display: block;
}
.fence .betting button img, .fence .Online button img, .fence .verify button img {
  width: 195px;
}
.fence .betting button img:nth-of-type(1), .fence .Online button img:nth-of-type(1), .fence .verify button img:nth-of-type(1) {
  display: block;
}
.fence .betting button img:nth-of-type(2), .fence .Online button img:nth-of-type(2), .fence .verify button img:nth-of-type(2) {
  display: none;
}
.fence .betting button::before {
  content: " 查看规则 ";
}
.fence .Online button::before {
  content: " 在线客服 ";
  color: var(--c-dark-2);
}
.fence .verify span {
  padding: 0 25px;
}
.fence .verify button::before {
  content: " 确认 ";
}

.placard .main {
  padding-top: 0;
  border-radius: 0 0 20px 20px;
  border: none;
  border-top: 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
}
.placard .main .tit {
  width: 100%;
  line-height: 58px;
  background: var(--c-green-4);
  font-size: var(--font-7);
}

[data-help-id=not_meet] .look_up, [data-help-id=not_yet] .look_up,
[data-help-id=sorry] .look_up, [data-help-id=deviant] .look_up {
  width: 397px;
  height: 128px;
  display: flex;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
}
[data-help-id=not_meet] .look_up .curtain, [data-help-id=not_meet] .look_up .se_man, [data-help-id=not_meet] .look_up .oops, [data-help-id=not_yet] .look_up .curtain, [data-help-id=not_yet] .look_up .se_man, [data-help-id=not_yet] .look_up .oops,
[data-help-id=sorry] .look_up .curtain,
[data-help-id=sorry] .look_up .se_man,
[data-help-id=sorry] .look_up .oops, [data-help-id=deviant] .look_up .curtain, [data-help-id=deviant] .look_up .se_man, [data-help-id=deviant] .look_up .oops {
  position: absolute;
  z-index: var(--level-1);
}
[data-help-id=not_meet] .look_up .curtain, [data-help-id=not_yet] .look_up .curtain,
[data-help-id=sorry] .look_up .curtain, [data-help-id=deviant] .look_up .curtain {
  bottom: -35px;
}
[data-help-id=not_meet] .look_up .se_man, [data-help-id=not_yet] .look_up .se_man,
[data-help-id=sorry] .look_up .se_man, [data-help-id=deviant] .look_up .se_man {
  bottom: 40px;
  right: 65px;
}
[data-help-id=not_meet] .look_up .oops, [data-help-id=not_yet] .look_up .oops,
[data-help-id=sorry] .look_up .oops, [data-help-id=deviant] .look_up .oops {
  left: 55px;
  top: -10px;
}
[data-help-id=not_meet] .accessories, [data-help-id=not_yet] .accessories,
[data-help-id=sorry] .accessories, [data-help-id=deviant] .accessories {
  position: absolute;
  z-index: var(--level-2);
}
[data-help-id=not_meet] .accessories span, [data-help-id=not_yet] .accessories span,
[data-help-id=sorry] .accessories span, [data-help-id=deviant] .accessories span {
  width: 42px;
  height: 42px;
  display: block;
  position: absolute;
}
[data-help-id=not_meet] .accessories span:nth-child(1), [data-help-id=not_yet] .accessories span:nth-child(1),
[data-help-id=sorry] .accessories span:nth-child(1), [data-help-id=deviant] .accessories span:nth-child(1) {
  top: -35px;
  left: -10px;
}
[data-help-id=not_meet] .accessories span:nth-child(2), [data-help-id=not_yet] .accessories span:nth-child(2),
[data-help-id=sorry] .accessories span:nth-child(2), [data-help-id=deviant] .accessories span:nth-child(2) {
  right: -160px;
  bottom: -80px;
}

[data-help-id=not_meet] .accessories span:nth-child(1), [data-help-id=not_yet] .accessories span:nth-child(1) {
  background: url(../images/fettle/accessories.png) 84px 0;
}
[data-help-id=not_meet] .accessories span:nth-child(2), [data-help-id=not_yet] .accessories span:nth-child(2) {
  background: url(../images/fettle/accessories.png) 42px 0;
}

[data-help-id=sorry] .accessories span:nth-child(1) {
  background: url(../images/fettle/accessories.png) 84px 84px;
}
[data-help-id=sorry] .accessories span:nth-child(2) {
  background: url(../images/fettle/accessories.png) 42px 84px;
}

[data-help-id=deviant] .accessories span:nth-child(1) {
  background: url(../images/fettle/accessories.png) 84px 42px;
}
[data-help-id=deviant] .accessories span:nth-child(2) {
  background: url(../images/fettle/accessories.png) 42px 42px;
}

.over.between {
  display: flex;
  padding: 15px;
  width: 100%;
  max-height: 100vh;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 74px;
  background: var(--c-purple-9);
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: var(--level-50);
  scroll-behavior: smooth;
}

.over.between::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.over_tit {
  position: absolute;
  left: 0;
  top: 6px;
}

.schedule {
  width: 100%;
  min-height: 47px;
  border-radius: 10px;
  background: var(--c-purple-2);
  text-align: left;
}
.schedule .explain {
  width: 100%;
  padding: 15px 25px;
  color: var(--c-light);
}
.schedule .explain span {
  display: block;
  position: relative;
}
.schedule .explain span::before {
  content: " * ";
  position: absolute;
  left: -10px;
}

.totalprize, .totalcard {
  width: 100%;
  height: 47px;
  border-radius: 10px;
  background: var(--c-purple-2);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 90px 0 85px;
  position: relative;
}
.totalprize::before, .totalcard::before {
  content: " ";
  width: 52px;
  height: 52px;
  position: absolute;
  left: 25px;
  top: -8px;
}
.totalprize span, .totalcard span {
  color: var(--c-light);
  font-weight: bold;
}
.totalprize span:nth-child(2), .totalcard span:nth-child(2) {
  font-size: var(--font-7);
  color: var(--c-green-3);
  position: relative;
}
.totalprize span:nth-child(2)::after, .totalcard span:nth-child(2)::after {
  color: var(--c-light);
  font-size: var(--font-5);
  position: absolute;
  top: 6px;
  right: -25px;
}

.totalprize::before {
  background: url(../images/overview/accessories.png) 0 0px;
}
.totalprize span:nth-child(2)::after {
  content: " 元 ";
}

.totalcard {
  margin-bottom: 0px;
}
.totalcard::before {
  background: url(../images/overview/accessories.png) 0 -52px;
}
.totalcard span:nth-child(2)::after {
  content: " 张 ";
}

.progressbar {
  width: 100%;
  height: auto;
  background: var(--c-light);
  border: var(--solid-1) var(--c-purple-2);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.surface {
  height: 320px;
  position: relative;
  display: flex;
  align-items: center;
}
.surface .tender {
  display: flex;
  position: absolute;
  width: 90%;
  padding-top: 10px;
}
.surface .tender .bid {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.surface .tender .bid:first-of-type {
  width: 60px;
}
.surface .tender .bid span {
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: var(--level-3);
  font-size: var(--font-1);
  color: var(--c-light);
}
.surface .tender .bid span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 1px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.surface .tender .bid .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}
.surface .tender .bid .awards {
  filter: grayscale(1);
  display: flex;
  align-items: center;
  flex-direction: column;
}
.surface .gress {
  width: 90%;
  padding: 20px;
}
.surface .gress .bar {
  width: 100%;
  height: 22px;
  border: var(--solid-1) var(--c-gray-2);
  border-radius: 100px;
  overflow: hidden;
  padding: 3px;
}
.surface .gress .bar .line {
  width: 0%;
  height: 100%;
  display: block;
  background: var(--gradient-13);
  background-size: 200% 100%;
  background-position: 200% 50%;
  border-radius: 100px;
  animation: slide_line 2s linear infinite;
}

.hint.up, .hint.dwon {
  position: absolute;
  width: 114px;
  height: 102px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.hint.up span, .hint.dwon span {
  color: var(--c-dark-2) !important;
  line-height: 16px !important;
  bottom: 0 !important;
}
.hint.up span:nth-of-type(3), .hint.dwon span:nth-of-type(3) {
  color: var(--c-yellow) !important;
  font-size: var(--font-4);
}
.hint.up span b, .hint.dwon span b {
  color: var(--c-red-8);
}
.hint.up::before, .hint.dwon::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.hint.up::after, .hint.dwon::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.hint.up {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), var(--c-green-5);
  border: var(--solid-2) var(--c-green);
  box-shadow: 0px 5px 0px 0px var(--c-green);
  bottom: 70px;
  /* 箭頭（立體） */
}
.hint.up::before {
  left: 50%;
  bottom: -17px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 17px solid var(--c-green);
  filter: drop-shadow(2px 3px 0 var(--c-green));
  transform: translateX(-50%);
}
.hint.up::after {
  left: 50%;
  bottom: -15px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 15px solid var(--c-green-5);
  transform: translateX(-50%);
}

.hint.dwon {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), var(--c-green-5);
  border: var(--solid-2) var(--c-green);
  box-shadow: 0px 5px 0px 0px var(--c-green);
  top: 58px;
  /* 箭頭（立體） */
}
.hint.dwon::before {
  left: 46%;
  top: -17px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 17px solid var(--c-green);
  filter: drop-shadow(1px 2px 0 var(--c-green));
  transform: translateX(-50%);
  transform: rotate(-180deg);
}
.hint.dwon::after {
  left: 45%;
  top: -14px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 15px solid var(--c-light);
  transform: translateX(-50%);
  transform: rotate(-180deg);
}

.fulfil .check {
  width: 42px;
  height: 42px;
  background: var(--c-green-12);
  border: var(--solid-4) var(--c-green-13);
  border-radius: 100px;
  box-sizing: content-box;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  z-index: var(--level-4);
  opacity: 0;
}
.fulfil .check::before {
  content: " ";
  width: 30px;
  height: 22px;
  background: url(../images/overview/check.png);
  background-repeat: no-repeat;
  position: absolute;
  z-index: 999;
}
.fulfil .hint.up, .fulfil .hint.dwon {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), var(--c-gray-4);
  border: var(--solid-2) var(--c-gray-3);
  box-shadow: 0px 5px 0px 0px var(--c-gray-3);
}
.fulfil .hint.up::before, .fulfil .hint.dwon::before {
  border-top: 17px solid var(--c-gray-3);
  filter: drop-shadow(1px 2px 0 var(--c-gray-3));
}
.fulfil .hint.up .content, .fulfil .hint.dwon .content {
  filter: grayscale(1);
}
.fulfil .hint.up::after {
  border-top: 15px solid var(--c-gray-4);
}
.fulfil .awards {
  filter: grayscale(0) !important;
}
.fulfil .check {
  opacity: 1;
}

.conduct .hint.up, .conduct .hint.dwon {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), var(--c-red-7);
  border: var(--solid-2) var(--c-red-2);
  box-shadow: 0px 5px 0px 0px var(--c-red-2);
}
.conduct .hint.up::before, .conduct .hint.dwon::before {
  border-top: 17px solid var(--c-red-2);
  filter: drop-shadow(1px 2px 0 var(--c-red-2));
}
.conduct .hint.up {
  bottom: 80px;
}
.conduct .hint.up::after {
  border-top: 15px solid var(--c-red-7);
}
.conduct .hint.dwon {
  top: 65px;
}

.surface .gress .line {
  width: 0%;
  transition: width 0.35s ease;
}
.surface.conduct-0-25 .gress .line {
  width: 8.3333333333%;
}
.surface.conduct-25 .gress .line {
  width: 16.6666666667%;
}
.surface.conduct-25-50 .gress .line {
  width: 25%;
}
.surface.conduct-50 .gress .line {
  width: 33.3333333333%;
}
.surface.conduct-50-250 .gress .line {
  width: 41.6666666667%;
}
.surface.conduct-250 .gress .line {
  width: 50%;
}
.surface.conduct-250-1500 .gress .line {
  width: 58.3333333333%;
}
.surface.conduct-1500 .gress .line {
  width: 66.6666666667%;
}
.surface.conduct-1500-10000 .gress .line {
  width: 75%;
}
.surface.conduct-10000 .gress .line {
  width: 83.3333333333%;
}
.surface.conduct-10000-50000 .gress .line {
  width: 91.6666666667%;
}
.surface.conduct-50000 .gress .line {
  width: 100%;
}

#collection {
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
  border: var(--solid-2) var(--c-light);
  border-radius: 100px;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#collection::before {
  content: " – ";
  font-size: var(--font-4);
  font-weight: bold;
  position: absolute;
  color: var(--c-light);
  transform: rotate(-135deg);
  margin-right: -1px;
  margin-top: 2px;
}
#collection::after {
  content: " – ";
  font-size: var(--font-4);
  font-weight: bold;
  position: absolute;
  color: var(--c-light);
  transform: rotate(135deg);
  margin-right: 1px;
  margin-top: 2px;
}
#collection::before, #collection::after {
  transition: transform 0.25s ease;
}
#collection.is-collapsed::before, #collection.is-collapsed::after {
  margin-right: 0px;
  margin-top: 0px;
}
#collection.is-collapsed::before {
  transform: rotate(45deg);
}
#collection.is-collapsed::after {
  transform: rotate(-45deg);
}

.cover {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.4s ease, transform 0.4s ease, opacity 0.3s ease;
  transform-origin: top;
}

.cover.is-collapsed {
  max-height: 0;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}

.caption {
  width: 100%;
  height: 50px;
  background: var(--gradient-12);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.caption img {
  position: absolute;
  bottom: 0;
  left: 5px;
}
.caption .illustrate, .caption .directions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.caption span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: var(--level-3);
  font-size: var(--font-5);
  color: var(--c-light);
  letter-spacing: 1px;
}
.caption span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 2px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.caption span:nth-of-type(2) {
  color: var(--c-green-3);
  font-size: var(--font-7);
  font-weight: bold;
  margin: -3px 3px 0;
}
.caption span:nth-of-type(4) {
  color: var(--c-yellow);
  font-size: var(--font-6);
  font-weight: bold;
}

.cardset {
  margin-top: 20px;
  margin-bottom: 100px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
}
.cardset .self_help {
  pointer-events: none;
}
.cardset .self_help .wrap {
  width: 142px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
}
.cardset .self_help .wrap .attribute, .cardset .self_help .wrap .assort, .cardset .self_help .wrap .bonus {
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.cardset .self_help .wrap .attribute {
  border-radius: 15px 15px 0 0;
  background: var(--c-purple-3);
  height: 30px;
}
.cardset .self_help .wrap .assort {
  background: var(--c-purple-2);
  padding: 5px;
}
.cardset .self_help .wrap .assort .scope {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.cardset .self_help .wrap .assort .scope::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--c-light);
  display: block;
  z-index: var(--level-1);
  opacity: 0.5;
}
.cardset .self_help .wrap .assort .scope img {
  filter: grayscale(1) brightness(1.1) saturate(5) contrast(1);
}
.cardset .self_help .wrap .bonus {
  border-radius: 0 0 15px 15px;
  background: var(--c-dark-2);
  color: var(--c-yellow);
  height: 30px;
  position: relative;
}
.cardset .self_help .wrap .bonus .check {
  width: 22px;
  height: 22px;
  background: var(--c-green-12);
  border-radius: 100px;
  box-sizing: content-box;
  position: absolute;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  z-index: var(--level-4);
  opacity: 0;
  right: 4px;
}
.cardset .self_help .wrap .bonus .check::before {
  content: " ";
  width: 15px;
  height: 10px;
  background: url(../images/overview/check.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 999;
}
.cardset .self_help .heading {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}
.cardset .self_help .magnifying {
  width: 22px;
  height: 22px;
  border-radius: 100px;
  background: var(--c-purple-8);
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  right: 4px;
  top: 8px;
  opacity: 0;
  z-index: var(--level-1);
}
.cardset .self_help .magnifying img {
  width: 100%;
}
.cardset .self_help.claimed {
  pointer-events: all;
}
.cardset .self_help.claimed .magnifying {
  opacity: 1;
}
.cardset .self_help.claimed .wrap .assort .scope::before {
  opacity: 0;
}
.cardset .self_help.claimed .wrap .assort .scope img {
  filter: grayscale(0);
}
.cardset .self_help.claimed .wrap .bonus .check {
  opacity: 1;
}

.card_window {
  width: 100%;
  height: 100%;
  background: url(../images/overview/lattice_bg.png) center;
  position: absolute;
  display: none;
  align-content: center;
  z-index: var(--level-top);
}
.card_window .close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 100px;
  background: none;
  position: absolute;
  top: 5%;
  right: 5%;
  cursor: pointer;
  z-index: var(--level-1);
  border: var(--solid-4) var(--c-light);
  z-index: var(--level-30);
}
.card_window .close-btn::before, .card_window .close-btn::after {
  content: " ";
  width: 5px;
  height: 20px;
  background: var(--c-light);
  border-radius: 100px;
  position: absolute;
}
.card_window .close-btn::before {
  transform: rotate(-45deg);
}
.card_window .close-btn::after {
  transform: rotate(45deg);
}
.card_window .view {
  width: 300px;
  height: 445px;
  display: grid;
  margin: auto;
  place-items: center;
  box-sizing: border-box;
}
.card_window .view img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
}

.effects {
  position: relative;
  margin: 20px;
  overflow: hidden;
  z-index: 10;
  touch-action: none;
  border-radius: 35px;
  box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(var(--c-light-value), 0), 0 55px 35px -20px rgba(var(--c-dark-value), 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
  --color1: var(--charizard1);
  --color2: var(--charizard2);
  isolation: isolate;
}
.effects:hover {
  box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(var(--c-light-value), 0.3), 0 55px 35px -20px rgba(var(--c-dark-value), 0.5);
}
.effects:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
  opacity: 0.5;
  filter: brightness(0.5) contrast(1);
  z-index: 1;
  position: absolute;
}
.effects:after {
  opacity: 1;
  background-image: url(../images/overview/sparkles.webp), url(../images/overview/holo.webp);
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  filter: brightness(1) contrast(1);
  transition: all 0.33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 35px;
  overflow: hidden;
  position: absolute;
}

.effects:before, .effects:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  transition: all 0.33s ease;
}

.effects.active:after, .effects:hover:after {
  filter: brightness(1) contrast(1);
  opacity: 1;
}

.effects.active, .effects:hover {
  animation: none;
  transition: box-shadow 0.1s ease-out;
}

.effects.active:before,
.effects:hover:before {
  animation: none;
  background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: 0.88;
  filter: brightness(0.66) contrast(1.33);
  transition: none;
}

.effects.active:before,
.effects:hover:before,
.effects.active:after,
.effects:hover:after {
  animation: none;
  transition: none;
}

.effects.animated {
  transition: none;
  animation: holoCard 12s ease 0s 1;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-image: radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.effects.animated:before {
  transition: none;
  animation: holoGradient 12s ease 0s 1;
}
.effects.animated:after {
  transition: none;
  animation: holoSparkle 12s ease 0s 1;
}

.message {
  font-size: var(--font-1);
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  height: 375px;
  pointer-events: none;
  z-index: var(--level-3);
}
.message .girdle {
  position: relative;
}
.message .bounce {
  width: clamp(130px, 3vw, 146px);
  height: clamp(45px, 10vw, 56px);
  background: rgba(var(--c-light-value), 0.9);
  border: var(--solid-2) var(--c-purple);
  position: absolute;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: var(--level-1);
}
.message .bounce:nth-of-type(2) span:nth-child(1) img, .message .bounce:nth-of-type(3) span:nth-child(1) img {
  left: inherit;
  right: -35px;
}
.message .bounce span {
  display: block;
  width: 100%;
}
.message .bounce span:nth-child(1) img {
  width: 35px;
  height: 35px;
  display: block;
  background: var(--c-purple);
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: var(--translate);
  z-index: var(--level-1);
}
.message .bounce span:nth-child(1)::before {
  content: "恭喜";
}
.message .bounce span:nth-child(2) {
  font-size: var(--font-4);
  font-weight: bold;
  color: var(--c-red-2);
}
.message .bounce span:nth-child(2)::before, .message .bounce span:nth-child(2)::after {
  font-size: var(--font-1);
  color: var(--c-dark-2);
}
.message .bounce span:nth-child(2)::before {
  content: "获得";
}
.message .bounce span:nth-child(2)::after {
  content: "元";
}

.open {
  width: 100%;
  height: 100%;
  background: rgba(var(--c-dark-value), 0.85);
  position: absolute;
  z-index: var(--level-50);
  color: var(--c-light);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.open .close {
  width: 36px;
  height: 36px;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 100px;
  background: var(--c-green);
  position: absolute;
  right: 20px;
  top: -10px;
  border: var(--solid-1) var(--c-light);
  z-index: var(--level-2);
  cursor: pointer;
}
.open .close::before {
  content: " ";
  width: 5px;
  height: 20px;
  background: var(--c-light);
  border-radius: 100px;
  transform: rotate(-45deg);
  position: absolute;
}
.open .close::after {
  content: " ";
  width: 5px;
  height: 20px;
  background: var(--c-light);
  border-radius: 100px;
  transform: rotate(45deg);
  position: absolute;
}
.open .greet {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.open .greet .box_three {
  position: absolute;
  z-index: var(--level-4);
  right: 80px;
  top: 10px;
  animation: box_three 0.5s linear forwards, leftright 1s linear infinite 0.8s;
}
.open .greet .curtain {
  position: absolute;
  z-index: var(--level-3);
  bottom: -25px;
}
.open .greet .s_box {
  width: 150px;
  position: absolute;
  bottom: 25px;
  z-index: var(--level-2);
  animation: bounceShakeDepth 1.5s linear infinite;
}
.open .greet .glow_s {
  position: fixed;
  z-index: var(--level-1);
  animation: spin 5s linear infinite;
  margin-top: 20px;
}
.open .greet .coin_fly img {
  position: absolute;
}
.open .greet .coin_fly img:nth-of-type(1) {
  left: 30px;
  top: 60px;
  animation: right_coin 0.5s linear infinite, left_fly_op 0.3s linear forwards;
}
.open .greet .coin_fly img:nth-of-type(2) {
  right: 35px;
  top: 110px;
  animation: right_coin2 0.5s linear infinite, right_fly_op 0.3s linear forwards;
}
.open .greet .star_fly img {
  position: absolute;
}
.open .greet .star_fly img:nth-of-type(1) {
  left: -20px;
  top: 150px;
  animation: leftright 0.7s linear infinite, left_star1 0.5s linear forwards;
}
.open .greet .star_fly img:nth-of-type(2) {
  left: 100px;
  top: -15px;
  animation: leftright 1.2s linear infinite, left_star2 0.5s linear forwards;
}
.open .greet .star_fly img:nth-of-type(3) {
  right: 0;
  top: 60px;
  transform: scale(0.7);
  animation: leftright 1.5s linear infinite, left_star3 0.5s linear forwards;
}
.open button {
  width: 190px;
  height: 65px;
  margin: 10px 0 30px;
  font-size: var(--font-8);
  font-weight: bold;
  cursor: pointer;
  background-size: cover;
  color: var(--c-light);
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--level-5);
}
.open button::before {
  content: " 开启 ";
  position: absolute;
}
.open button:hover {
  transform: scale(0.95);
}
.open button:hover img:nth-of-type(1) {
  display: none;
}
.open button:hover img:nth-of-type(2) {
  display: block;
}
.open button img:nth-of-type(1) {
  display: block;
}
.open button img:nth-of-type(2) {
  display: none;
}

.stars_pot {
  width: 100%;
}
.stars_pot img {
  position: absolute;
}
.stars_pot img:nth-of-type(1) {
  left: 10px;
  top: 250px;
  animation: right_diamond 3s linear infinite;
}
.stars_pot img:nth-of-type(2) {
  right: -40px;
  top: 380px;
  animation: right_diamond 1.5s linear infinite;
}
.stars_pot img:nth-of-type(3) {
  left: -160px;
  top: 540px;
  animation: right_diamond 3s linear infinite;
}

.options {
  width: 100%;
  position: absolute;
  z-index: var(--level-low);
}
.options ul {
  width: 440px;
  height: 45px;
  background: var(--c-light);
  border: var(--solid-1) rgba(var(--c-gray-value));
  border-radius: 100px;
  display: flex;
  margin: 0 auto;
  box-shadow: inset 0px 2px 5px 0 rgba(var(--c-gray-value), 0.5);
}
.options ul li:nth-of-type(1), .options ul li:nth-of-type(2) {
  display: inline-block;
  width: 50%;
  font-size: var(--font-5);
}
.options ul li:nth-of-type(1) a, .options ul li:nth-of-type(2) a {
  width: 100%;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-weight: bold;
  transition: 0.25s;
}
.options ul li:nth-of-type(1) a::before, .options ul li:nth-of-type(2) a::before {
  content: "";
  width: 23px;
  height: 23px;
  display: block;
  margin-right: 8px;
}
.options ul li:nth-of-type(1) a {
  color: var(--c-gray-2);
}
.options ul li:nth-of-type(1) a:hover {
  font-size: var(--font-6);
  color: var(--c-dark-2);
  filter: brightness(0);
}
.options ul li:nth-of-type(1) a::before {
  background: url(../images/options_icon.png);
}
.options ul li:nth-of-type(2) a {
  color: var(--c-dark-2);
  border: var(--solid-2) var(--c-green-2);
  background: var(--gradient-1);
}
.options ul li:nth-of-type(2) a:hover {
  background: var(--gradient-2);
}
.options ul li:nth-of-type(2) a::before {
  background: url(../images/options_icon.png) 0 23px;
}

.container {
  max-width: 1200px;
  height: 88px;
  margin: auto;
  position: relative;
}
.container h1 {
  display: flex;
}

.infor {
  width: 100%;
  height: auto;
  z-index: var(--level-4);
  position: relative;
  margin-top: 10px;
}
.infor .left, .infor .right {
  display: block;
  position: absolute;
  width: auto;
  padding: clamp(0px, 1vw, 10px);
}
.infor .left {
  left: 15px;
  cursor: pointer;
}
.infor .left:hover .gain {
  opacity: 1;
}
.infor .left h3 {
  font-size: var(--font-4);
  color: var(--c-dark-2);
  margin-bottom: 8px;
  text-align: left;
}
.infor .left .member {
  width: -moz-fit-content;
  width: fit-content;
  min-width: clamp(100px, 30vw, 125px);
  line-height: 23px;
  background: var(--c-light);
  border-radius: 30px;
  color: var(--c-dark-2);
  border: var(--solid-2) var(--c-dark-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 40px;
}
.infor .left .member::before {
  content: "";
  width: 40px;
  height: 40px;
  background: url(../images/game/member_icon.png);
  position: absolute;
  left: -8px;
}
.infor .left .member span {
  width: clamp(65px, 20vw, 110px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infor .left .gift_box {
  width: 37px;
  height: 37px;
  background: var(--c-light);
  border: var(--solid-2) var(--c-dark-2);
  border-radius: 100px;
  display: flex;
  padding: 4px;
  position: absolute;
  right: -8px;
}
.infor .left .gift_box::before {
  content: " ";
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--c-red);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: var(--level-1);
  animation: twinkle 1s infinite;
  opacity: 1 !important;
}
.infor .left .gift_box img {
  animation: updown 1s infinite;
}
.infor .left .gain {
  width: 280px;
  height: auto;
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(var(--c-dark-value), 0.7);
  border: var(--solid-5) rgba(var(--c-dark-value), 0.2);
  color: var(--c-light);
  padding: 10px 5px;
  border-radius: 10px;
  transition: opacity 0.25s ease;
  top: 160px;
  left: 70%;
  z-index: var(--level-2);
  word-break: break-all;
  text-align: left;
  font-size: var(--font-3);
}
.infor .left .gain b {
  color: var(--c-yellow);
}
.infor .left .gain ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 8px;
}
.infor .left .gain ul li {
  width: 58px;
  height: 58px;
  margin: 0 3px;
  background: var(--c-dark-3);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.infor .left .gain ul li span {
  width: 20px;
  height: 20px;
  background: var(--c-gray-3);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: var(--level-1);
  right: 0;
  bottom: 0;
}
.infor .left .gain ul li img {
  filter: grayscale(1);
}
.infor .left .gain .check::before {
  content: " ";
  width: 42px;
  height: 33px;
  background: url(../images/game/check.png);
  position: absolute;
  z-index: var(--level-1);
}
.infor .left .gain .check span {
  background: var(--c-green-3);
  color: var(--c-dark-2);
}
.infor .left .gain .check img {
  filter: grayscale(0);
}
.infor .right {
  right: clamp(0px, 1vw, 15px);
}
.infor .right button {
  display: inline-block;
  transition: 0.2s;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 20vw;
}
.infor .right button:nth-of-type(1)::before, .infor .right button:nth-of-type(2)::before {
  position: absolute;
}
.infor .right button:nth-of-type(1):hover, .infor .right button:nth-of-type(2):hover {
  transform: scale(0.95);
}
.infor .right button:nth-of-type(1):hover img:nth-of-type(1), .infor .right button:nth-of-type(2):hover img:nth-of-type(1) {
  display: none;
}
.infor .right button:nth-of-type(1):hover img:nth-of-type(2), .infor .right button:nth-of-type(2):hover img:nth-of-type(2) {
  display: block;
}
.infor .right button:nth-of-type(1) img:nth-of-type(1), .infor .right button:nth-of-type(2) img:nth-of-type(1) {
  display: block;
}
.infor .right button:nth-of-type(1) img:nth-of-type(2), .infor .right button:nth-of-type(2) img:nth-of-type(2) {
  display: none;
}

.game {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.game .type {
  width: clamp(80%, 40vh, 100%);
  height: auto;
  margin: 0 auto;
}

.boxes {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.boxes .limits {
  height: 83vh;
  background-repeat: no-repeat;
  background-position: center 26vh;
  background-size: 125% auto;
  inset: 0;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.boxes .limits .operate {
  height: 33vh;
  margin-top: 10px;
}
.boxes .limits .type img {
  display: none;
}

.boxes::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.element {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: var(--level-2);
}
.element img {
  position: absolute;
  /* purple_ball */
  /* left_circle */
  /* left_shape */
  /* right_diamond */
  /* right_coin */
  /* right_coin2 */
  /* right_star */
}
.element img:nth-child(1) {
  width: 20px;
  left: 10px;
  top: -10px;
  animation: purple_ball ease-in-out 1s infinite;
}
.element img:nth-child(2) {
  width: 50px;
  left: 25px;
  top: 65px;
  animation: left_circle ease-in-out 1.5s infinite;
}
.element img:nth-child(3) {
  width: 70px;
  left: 5px;
  bottom: 80px;
  animation: left_shape ease-in-out 1.5s infinite;
}
.element img:nth-child(4) {
  width: 20px;
  right: 20px;
  top: -20px;
  animation: right_diamond ease-in-out 1.5s infinite;
}
.element img:nth-child(5) {
  width: 50px;
  left: 50px;
  animation: right_coin ease-in 1.5s infinite;
}
.element img:nth-child(6) {
  width: 50px;
  right: 50px;
  transform: rotate(-45deg);
  animation: right_coin2 ease-in-out 1.5s infinite;
}
.element img:nth-child(7) {
  width: 90px;
  right: -30px;
  animation: right_star ease-in-out 1.5s infinite;
}

.se_box {
  display: inline-block;
  transform-style: preserve-3d;
}
.se_box:nth-child(n) {
  position: relative;
}
.se_box:nth-child(-n+3) {
  width: 85px;
}
.se_box:nth-child(1) {
  margin-left: 50px;
}
.se_box:nth-child(3) {
  margin-right: 50px;
}
.se_box:nth-child(n+4):nth-child(-n+6) {
  width: 100px;
  top: -50px;
}
.se_box:nth-child(4) {
  margin-left: 75px;
}
.se_box:nth-child(6) {
  margin-right: 75px;
}
.se_box:nth-child(n+7):nth-child(-n+9) {
  width: 120px;
  top: -120px;
}

.se_box:nth-child(1) {
  animation-delay: 0s;
}
.se_box:nth-child(2) {
  animation-delay: 2s;
}
.se_box:nth-child(3) {
  animation-delay: 4s;
}
.se_box:nth-child(4) {
  animation-delay: 6s;
}
.se_box:nth-child(5) {
  animation-delay: 8s;
}
.se_box:nth-child(6) {
  animation-delay: 10s;
}
.se_box:nth-child(7) {
  animation-delay: 12s;
}
.se_box:nth-child(8) {
  animation-delay: 14s;
}
.se_box:nth-child(9) {
  animation-delay: 16s;
}

.center {
  z-index: var(--level-5);
  bottom: 0;
  width: auto;
  display: flex;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 20px auto 0;
}
.center span {
  display: block;
  width: 150px;
  line-height: 45px;
  font-size: var(--font-6);
  font-weight: bold;
  color: var(--c-light);
  position: relative;
  z-index: var(--level-1);
}
.center span img {
  position: absolute;
  width: 34px;
  margin-left: 10px;
  margin-top: 10px;
  animation: finger linear 1s infinite;
}
.center span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.center button {
  width: 148px;
  height: 51px;
  font-size: var(--font-5);
  font-weight: bold;
  cursor: pointer;
  background-size: cover;
  color: var(--c-light);
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.center button::before {
  content: " 随机选 ";
  position: absolute;
}
.center button:hover {
  transform: scale(0.95);
}
.center button:hover img:nth-of-type(1) {
  display: none;
}
.center button:hover img:nth-of-type(2) {
  display: block;
}
.center button img:nth-of-type(1) {
  display: block;
}
.center button img:nth-of-type(2) {
  display: none;
}

.order {
  width: 100%;
  position: relative;
  bottom: 0;
  z-index: var(--level-4);
}
.order .left, .order .right {
  display: block;
  position: absolute;
  width: 150px;
  line-height: 90px;
  color: var(--c-light);
}
.order .left {
  bottom: -90px;
  left: -95px;
  width: 280px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 115px;
  padding-top: 65px;
  transition: 1s;
}
.order .left img {
  position: absolute;
  top: 0;
  left: 0;
}
.order .left img:nth-of-type(1) {
  display: block;
}
.order .left img:nth-of-type(2) {
  display: none;
}
.order .left .rate {
  margin-left: 15px;
  position: absolute;
}
.order .left .rate span {
  width: auto;
  line-height: 30px;
  display: block;
}
.order .left .rate span:nth-child(1) {
  font-size: var(--font-4);
  color: var(--c-light);
  font-weight: bold;
  z-index: var(--level-2);
  position: relative;
}
.order .left .rate span:nth-child(1)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-purple);
  filter: var(--text-halo-purple);
}
.order .left .rate span:nth-child(1)::after {
  content: "";
  width: 52px;
  height: 88px;
  background: url(../images/game/se_box_s.png) -52px 0;
  position: absolute;
  z-index: var(--level-low-2);
  display: block;
  top: -65px;
  left: 12px;
}
.order .left .rate span:nth-child(2) {
  font-size: var(--font-8);
  color: var(--c-yellow);
  font-weight: bold;
  z-index: var(--level-2);
  position: relative;
}
.order .left .rate span:nth-child(2)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 8px var(--c-dark-2);
  filter: var(--text-halo-dark);
}
.order .left .rate span:nth-child(2)::after {
  content: "次";
  font-size: 16px;
  position: absolute;
  color: var(--c-light);
  background: var(--c-purple);
  border-radius: 100px;
  width: 25px;
  line-height: 25px;
  bottom: 0;
  right: -20px;
}
.order .right {
  width: 280px;
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  bottom: -100px;
  right: -110px;
  padding-left: 55px;
  padding-top: 65px;
  cursor: pointer;
}
.order .right:hover span::after {
  animation: bounceShakeDepth 1s infinite;
}
.order .right img {
  position: absolute;
  top: 0;
  left: 0;
}
.order .right span {
  font-size: var(--font-6);
  color: var(--c-light);
  font-weight: bold;
  z-index: var(--level-2);
  position: relative;
}
.order .right span::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-purple);
  filter: var(--text-halo-purple);
}
.order .right span::after {
  content: "";
  width: 52px;
  height: 88px;
  background: url(../images/game/se_box_s.png) -104px 0;
  position: absolute;
  z-index: var(--level-low-2);
  display: block;
  top: -45px;
  left: 20px;
}

#includeArea {
  pointer-events: all;
}

.scene {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  z-index: var(--level-2);
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  overflow: visible;
  z-index: var(--level-4);
}

.core {
  position: absolute;
  inset: 0;
  margin: 50px auto 0;
  width: 90%;
  height: 70%;
  aspect-ratio: 1;
  transform: scale(0.2);
  animation: grow var(--grow-duration) cubic-bezier(0.2, 0.9, 0.15, 1) forwards;
  opacity: 0;
  z-index: var(--level-2);
  border-radius: 20px;
}

.coin-fountain {
  position: fixed;
  left: 0;
  bottom: 0%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: var(--level-1);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.coin-fountain.is-active {
  opacity: 1;
}

.coin {
  position: absolute;
  bottom: 0;
  width: 90px;
  height: 90px;
  background-image: url("../images/game/coin.png");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 1;
}

.reselect {
  width: 80%;
  height: 50px;
  margin: 10px;
  font-size: var(--font-5);
  font-weight: bold;
  border-radius: 50px;
  border: var(--solid-1) var(--c-purple-3);
  cursor: pointer;
  background: var(--c-purple-2);
  color: var(--c-light);
}
.reselect:hover {
  color: var(--c-purple-2);
  background: var(--c-light);
}

.frequency {
  width: 100%;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  margin-top: 8px;
}
.frequency::before {
  content: "我还可以抽";
  font-size: var(--font-5);
}
.frequency::after {
  content: "次";
  font-size: var(--font-5);
}
.frequency b {
  width: 80px;
  margin: 0 6px;
  display: inline-block;
  background: var(--c-light);
  border: var(--solid-2) var(--c-purple-3);
  border-radius: 100px;
  font-size: var(--font-7);
  color: var(--c-purple-2);
}

.play {
  width: 100%;
  height: auto;
  margin: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  bottom: 0;
}

.play-btn {
  width: 100px;
  height: 100px;
  margin: 5px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  color: var(--c-light);
  border-radius: 10px;
  transform: skew(-10deg, 0deg);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/game/grid_s.png);
  background-size: 100%;
  background-position: 0 18px;
  background-repeat: no-repeat;
  transition: 0.2s;
}
.play-btn:nth-of-type(1) {
  background-color: var(--c-red-3);
  box-shadow: var(--shadow-red);
}
.play-btn:nth-of-type(1):hover {
  background-color: var(--c-red-2);
}
.play-btn:nth-of-type(1) span:nth-of-type(1) {
  color: var(--c-red-2);
}
.play-btn:nth-of-type(1) span:nth-of-type(1)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-light);
}
.play-btn:nth-of-type(1) span:nth-of-type(2)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-red);
}
.play-btn:nth-of-type(1) span:nth-child(3)::before {
  background: var(--c-red-4);
}
.play-btn:nth-of-type(2) {
  background-color: var(--c-blue);
  box-shadow: var(--shadow-blue);
}
.play-btn:nth-of-type(2):hover {
  background-color: var(--c-blue-4);
}
.play-btn:nth-of-type(2) span:nth-of-type(1) {
  color: var(--c-blue-3);
}
.play-btn:nth-of-type(2) span:nth-of-type(1)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-light);
}
.play-btn:nth-of-type(2) span:nth-of-type(2)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-blue-3);
}
.play-btn:nth-of-type(2) span:nth-child(3)::before {
  background: var(--c-blue-2);
}
.play-btn:nth-of-type(3) {
  background-color: var(--c-purple-5);
  box-shadow: var(--shadow-purple);
}
.play-btn:nth-of-type(3):hover {
  background-color: var(--c-purple-4);
}
.play-btn:nth-of-type(3) span:nth-of-type(1) {
  color: var(--c-purple);
}
.play-btn:nth-of-type(3) span:nth-of-type(1)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-light);
}
.play-btn:nth-of-type(3) span:nth-of-type(2)::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-purple);
}
.play-btn:nth-of-type(3) span:nth-of-type(3)::before {
  background: var(--c-purple-4);
}
.play-btn span {
  transform: skew(10deg, 0deg);
}
.play-btn span:nth-child(1), .play-btn span:nth-child(2), .play-btn span:nth-child(3) {
  position: absolute;
}
.play-btn span:nth-child(1) {
  top: 8px;
  left: 8px;
}
.play-btn span:nth-child(2) {
  font-size: var(--font-9);
}
.play-btn span:nth-child(3) {
  bottom: 8px;
  right: 8px;
  font-size: var(--font-4);
}
.play-btn span:nth-child(3)::before {
  content: " ";
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 100px;
  border: var(--solid-2) var(--c-light);
  position: absolute;
  z-index: var(--level-low);
  right: -5px;
  bottom: -3px;
}

.gift_all {
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -70px;
}

.gift, .shake {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transform-origin: center bottom;
  z-index: var(--level-3);
  transition: opacity 0.4s ease;
}

.gift.moving, .shake.moving {
  animation: gift var(--gift-duration) ease-in-out 1 forwards;
}

.gift.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.turn-on {
  display: flex;
}

.turn-off {
  display: none;
}

.animation {
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  width: 54%;
  display: flex;
}

.glow {
  width: 200%;
  position: fixed;
  left: -50%;
  top: 10%;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.2);
}

.glow-inner {
  animation: spin 10s linear infinite;
  will-change: transform;
}

.glow.is-active {
  animation: glowEntrance 1.2s ease-out forwards;
}

.starlight {
  animation: starlight 20s linear infinite;
  backface-visibility: hidden;
}

.box {
  --w-box: var(--box-w);
  --h-box: var(--box-h);
  height: calc(var(--h-box) + 0.02 * var(--scene-size));
  position: relative;
  width: var(--w-box);
  animation: box var(--animation);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box.off {
  animation: none;
}

.box-base {
  position: absolute;
  top: -12px;
  width: 300px;
  height: 404px;
  background: url(../images/game/gift_box_bottom.png);
  background-size: contain;
}

.shell {
  position: relative;
  margin: 0 0 calc(var(--scene-size) * -0.09);
  z-index: var(--level-1);
}

.shell.moving {
  animation: shell var(--animation);
}

.shell-base {
  background: url(../images/game/gift_box_up.png);
  background-size: contain;
  height: 78px;
  right: 0;
  width: 300px;
}

.gift, .gift *, .stage, .stage *, .shake, .shake * {
  animation-play-state: paused !important;
}

.gift.active, .gift.active *, .shake.active, .shake.active * {
  animation-play-state: running !important;
}

.stage.active, .stage.active * {
  animation-play-state: running !important;
}

.stage.active .core {
  animation-delay: 0s !important;
}

.stack {
  height: 10em;
  --deal-dur: 0.45s;
  --deal-delay-step: 0.05s;
  --ball-dur: 0.7s;
  --ball-delay: calc(var(--deal-dur) + 9 * var(--deal-delay-step));
  --count-start: calc(var(--ball-delay) + var(--ball-dur));
  text-align: center;
  padding: 15px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stack h2 {
  font-size: var(--font-8);
  font-weight: bold;
  color: var(--c-light);
}
.stack h2::before {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px var(--c-dark-2);
  filter: var(--text-halo-dark);
}

.stack__cards {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 0 100px 0;
}

.stack:has(.stack__cards .stack__card:nth-child(7)) {
  --deal-dur: 0.6s;
  --deal-delay-step: 0.16s;
  --ball-delay: calc(var(--deal-dur) + 9 * var(--deal-delay-step));
  --count-start: calc(var(--ball-delay) + var(--ball-dur));
}

.stack__card {
  position: absolute;
  inset: 0;
  margin: 120px auto 0;
  width: 6em;
  aspect-ratio: 5/7;
  --final-x: 0em;
  --final-y: 0em;
  --final-rot: 0deg;
  --final-scale: 1;
}

.card {
  width: 100%;
  height: 100%;
  border-radius: 0.6em;
  box-shadow: 0 0.05em 0.7em rgba(var(--c-dark-value), 0.3);
  opacity: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-dark-2);
  font-weight: 700;
  transform: translate(3em, 0.8em) rotate(-15deg) scale(0.9);
  animation-name: deal;
  animation-duration: var(--deal-dur);
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.35, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.stack__card:nth-child(1) {
  --final-x: -9em;
}

.stack__card:nth-child(2) {
  --final-x: -7em;
}

.stack__card:nth-child(3) {
  --final-x: -5em;
}

.stack__card:nth-child(4) {
  --final-x: -3em;
}

.stack__card:nth-child(5) {
  --final-x: -1em;
}

.stack__card:nth-child(6) {
  --final-x: 1em;
}

.stack__card:nth-child(7) {
  --final-x: 3em;
}

.stack__card:nth-child(8) {
  --final-x: 5em;
}

.stack__card:nth-child(9) {
  --final-x: 7em;
}

.stack__card:nth-child(10) {
  --final-x: 9em;
  --final-y: 0.7em;
}

.stack__card:nth-child(1) .card,
.stack__card:nth-child(2) .card,
.stack__card:nth-child(3) .card,
.stack__card:nth-child(4) .card,
.stack__card:nth-child(5) .card,
.stack__card:nth-child(6) .card,
.stack__card:nth-child(7) .card,
.stack__card:nth-child(8) .card,
.stack__card:nth-child(9) .card,
.stack__card:nth-child(10) .card {
  background: var(--c-light);
}

.stack__card:nth-child(10) .card {
  animation-delay: calc(var(--deal-delay-step) * 4.5);
}

.stack__card:nth-child(9) .card {
  animation-delay: calc(var(--deal-delay-step) * 4);
}

.stack__card:nth-child(8) .card {
  animation-delay: calc(var(--deal-delay-step) * 3.5);
}

.stack__card:nth-child(7) .card {
  animation-delay: calc(var(--deal-delay-step) * 3);
}

.stack__card:nth-child(6) .card {
  animation-delay: calc(var(--deal-delay-step) * 2.5);
}

.stack__card:nth-child(5) .card {
  animation-delay: calc(var(--deal-delay-step) * 2);
}

.stack__card:nth-child(4) .card {
  animation-delay: calc(var(--deal-delay-step) * 1.5);
}

.stack__card:nth-child(3) .card {
  animation-delay: calc(var(--deal-delay-step) * 1);
}

.stack__card:nth-child(2) .card {
  animation-delay: calc(var(--deal-delay-step) * 0.5);
}

.stack__card:nth-child(1) .card {
  animation-delay: calc(var(--deal-delay-step) * 0);
}

.stack__cards:has(> .stack__card:nth-child(2)) > .stack__card:last-child {
  --final-rot: 15deg;
  --final-scale: 1.4;
}

.stack__cards:not(:has(> .stack__card:nth-child(2))) > .stack__card {
  --final-x: 0em;
  --final-y: 0em;
  --final-rot: 0deg;
  --final-scale: 1.75;
  top: 0px;
}

.stack__cards:not(:has(> .stack__card:nth-child(2))) .card {
  animation-delay: 0s;
}

.stack__cards:has(> .stack__card:nth-child(2)):not(:has(> .stack__card:nth-child(3))) > .stack__card:nth-child(1) {
  --final-x: -3em;
}
.stack__cards:has(> .stack__card:nth-child(2)):not(:has(> .stack__card:nth-child(3))) > .stack__card:nth-child(2) {
  --final-x: 1em;
}

.numbers {
  position: absolute;
  top: 210px;
  left: 50%;
  transform: translate(-50%, 20px) scale(0.8);
  box-shadow: 0 0.05em 0.7em rgba(var(--c-dark-value), 0.5);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--c-dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  color: var(--c-light);
  font-family: system-ui, sans-serif;
  opacity: 0;
  animation-name: numbers-pop-in;
  animation-duration: var(--ball-dur);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: var(--ball-delay);
}
.numbers span {
  position: absolute;
  top: 29px;
  left: 25px;
  font-size: var(--font-8);
  font-weight: bold;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: center;
  animation-fill-mode: forwards;
  display: block;
  animation-name: numFinal;
  animation-duration: var(--count-step);
  animation-delay: var(--count-start);
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
}
.numbers span::before {
  content: "x";
  position: absolute;
  left: -15px;
  font-size: var(--font-7);
  font-weight: bold;
}

.stack .txt {
  opacity: 0;
  font-size: 1.4rem;
  width: 300px;
  height: 200px;
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin-top: 30px;
}
.stack .txt span {
  width: 100%;
  font-size: 25px;
  font-weight: bold;
}
.stack .txt .e-card, .stack .txt .n-card, .stack .txt .r-card, .stack .txt .sr-card,
.stack .txt .ssr-card, .stack .txt .ur-card, .stack .txt .urplus-card,
.stack .txt .bonus, .stack .txt .accumulation {
  font-size: var(--font-);
  font-weight: bold;
}
.stack .txt .e-card span, .stack .txt .n-card span, .stack .txt .r-card span, .stack .txt .sr-card span,
.stack .txt .ssr-card span, .stack .txt .ur-card span, .stack .txt .urplus-card span,
.stack .txt .bonus span, .stack .txt .accumulation span {
  color: var(--c-red);
  font-weight: bold;
}
.stack .txt .e-card::after, .stack .txt .n-card::after, .stack .txt .r-card::after, .stack .txt .sr-card::after,
.stack .txt .ssr-card::after, .stack .txt .ur-card::after, .stack .txt .urplus-card::after {
  content: "张";
}
.stack .txt .e-card::before {
  content: "小e卡";
}
.stack .txt .n-card::before {
  content: "小e N卡";
}
.stack .txt .r-card::before {
  content: "小e R卡";
}
.stack .txt .sr-card::before {
  content: "小e SR卡";
}
.stack .txt .ssr-card::before {
  content: "小e SSR卡";
}
.stack .txt .ur-card::before {
  content: "小e UR卡";
}
.stack .txt .urplus-card::before {
  content: "小e UR+卡";
}
.stack .txt .subjoin {
  animation: addmore 2s linear infinite;
}
.stack .txt .subjoin span::before {
  content: "盲盒奖金加码";
}
.stack .txt .subjoin::after {
  content: "卡";
}
.stack .txt .addmore {
  width: 320px;
  height: 42px;
  background: var(--c-red-2);
  color: var(--c-light);
  position: relative;
  margin: 5px 0;
}
.stack .txt .addmore::before {
  content: " ";
  width: 53px;
  height: 71px;
  background: url(../images/game/subjoin.png);
  position: absolute;
  top: -25px;
  left: -25px;
  transform: rotate(-15deg);
  animation: sway 1s linear infinite;
}
.stack .txt .bonus::before {
  content: "奖金";
}
.stack .txt .bonus::after {
  content: "元";
}
.stack .txt .accumulation::before {
  content: "累积奖金";
}
.stack .txt .accumulation::after {
  content: "元";
}
.stack .txt.show {
  opacity: 1;
}

.continue, .back {
  width: 80%;
  display: inline-block;
  text-align: center;
  padding: 5px 0;
  border-radius: 30px;
  margin-top: 15px;
  cursor: pointer;
  border: var(--solid-1) var(--c-purple-3);
  font-size: var(--font-6);
  font-weight: bold;
}

.continue {
  color: var(--c-purple-3);
  background: var(--c-light);
}
.continue:hover {
  color: var(--c-light);
  background: var(--c-purple-2);
}

.back {
  color: var(--c-light);
  background: var(--c-purple-2);
}
.back:hover {
  color: var(--c-purple-3);
  background: var(--c-light);
}

.stage .stack, .stage .stack * {
  animation-play-state: paused !important;
}

.stage.stack-start .stack, .stage.stack-start .stack * {
  animation-play-state: running !important;
}

/* ====== 移动装置 ====== */
@media (max-width: 1200px) {
  body {
    background-image: url(../images/topic/bg_top_have.png), url(../images/topic/bg_bottom.jpg);
  }
  .full_page .main {
    margin-top: 60px;
  }
  .modal {
    top: 0;
  }
  .element {
    top: 42vh;
  }
  .figure {
    display: none;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1199.98px) and (max-height: 600px) and (orientation: landscape) {
  .boxes .limits {
    background-position: center 42vh;
    height: 135vh;
  }
  .boxes .limits .operate {
    height: 45vh;
  }
  .element {
    top: 75vh;
  }
  .gift_all {
    height: 600px;
    margin-top: 0;
  }
  .shell-base {
    width: 200px;
    height: 53px;
  }
  .box-base {
    width: 200px;
    height: 269px;
    top: 5px;
  }
  .play {
    margin: -80px 0 -60px 0;
  }
  .login .select {
    top: 75vh;
  }
  .scene {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (max-width: 600px) {
  .coin {
    left: -36px;
    bottom: -36px;
    width: 72px;
    height: 72px;
  }
  .boxes .limits {
    height: 90vh;
  }
  .boxes .limits .operate {
    height: clamp(260px, 30vh, 300px);
    margin-top: 2vh;
  }
  .se_box:nth-child(-n+3) {
    width: clamp(50px, 14.5vw, 85px);
    top: clamp(5px, -8vh, -50px);
  }
  .se_box:nth-child(n+4):nth-child(-n+6) {
    width: clamp(70px, 18vw, 100px);
    top: clamp(-50px, -8vh, -50px);
  }
  .se_box:nth-child(n+7):nth-child(-n+9) {
    width: clamp(90px, 22vw, 120px);
    top: clamp(-120px, 22vw, -120px);
  }
  .gift_all {
    height: 80vh;
    margin-top: 0;
  }
  .shell-base {
    width: 200px;
    height: 53px;
  }
  .box-base {
    width: 200px;
    height: 269px;
    top: 0;
  }
  .login .select {
    top: 65vh;
  }
  .element {
    top: 50vh;
  }
  .scene {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (max-width: 480px) {
  #includeRule, #includeOverview {
    width: 100%;
  }
  .modal-overlay {
    width: 100%;
  }
  .modal {
    overflow: inherit;
    width: 100%;
    top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .records .main {
    width: 95vw;
  }
  .records .main .tabs label[for=records_mark-1],
  .records .main .tabs label[for=records_mark-2],
  .records .main .tabs label[for=records_mark-3] {
    width: 110px;
  }
  .node a {
    padding: 3px;
  }
  .records .tabs .tab_block > input[type=radio] + .between {
    max-height: 80vh;
  }
  .fake-bodies .fake-body {
    max-height: 480px;
  }
  .categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
  }
  .blindgifts .for_1,
  .blindgifts .for_2 {
    padding-left: 44vw;
  }
  .blindgifts .for_3 img {
    position: absolute;
    left: -70px;
    bottom: 0;
    width: 55%;
  }
  .calculate .formula .for_1,
  .calculate .formula .for_2,
  .calculate .formula .for_3 {
    margin-right: 15px;
  }
  .calculate .formula .for_4 {
    right: 0;
  }
  .hint.up, .hint.dwon {
    width: 23vw;
  }
  .bonuscard br {
    display: none;
  }
  .gift_all {
    height: 630px;
  }
  .shell-base {
    width: 200px;
    height: 53px;
  }
  .box-base {
    width: 200px;
    height: 269px;
    top: -16px;
  }
  .boxes .limits {
    background-position: center 31vh;
    height: 85vh;
  }
  .se_box:nth-child(-n+3) {
    top: 1vh;
  }
  .se_box:nth-child(n+4):nth-child(-n+6) {
    top: -2vh;
  }
  .se_box:nth-child(n+7):nth-child(-n+9) {
    top: -7vh;
  }
  .infor .left .gain {
    left: 80%;
  }
}
@media (max-width: 380px) {
  .records .tabs .tab_block > input[type=radio] + .between {
    max-height: 75vh;
  }
  .records .main .tabs label[for=records_mark-1],
  .records .main .tabs label[for=records_mark-2],
  .records .main .tabs label[for=records_mark-3] {
    width: 108px;
  }
  .fake-bodies .fake-body {
    max-height: 300px;
  }
  .limit {
    max-height: 200px !important;
  }
  .node a {
    padding: 1px;
  }
  .play-btn {
    width: 90px;
  }
  .game .type {
    margin-top: 20px;
  }
  .infor .left, .infor .right {
    padding: 0;
  }
  .infor .right button {
    max-width: 65px;
  }
  .boxes .limits .operate {
    height: 230px;
    margin-top: 0;
  }
  .se_box:nth-child(4) {
    margin-left: clamp(36px, 22vw, 30px);
  }
  .se_box:nth-child(6) {
    margin-right: clamp(36px, 22vw, 30px);
  }
  .infor {
    margin-top: 10px;
  }
  .categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .login .select {
    top: 65vh;
  }
  .fence .main {
    width: 95vw;
  }
  [data-help-id=newbie] .look_up,
  [data-help-id=newbie_2] .look_up,
  [data-help-id=newbie_3] .look_up {
    width: 92vw;
  }
  .bound .main {
    width: 91.5vw;
  }
  .s_tab .flexible .period > .answer .among,
  .s_tab .flexible .sequence > .answer .among {
    padding-right: 20px;
  }
}
@media (max-width: 320px) {
  .infor .left, .infor .right {
    padding: 0;
  }
  .infor .right button {
    max-width: 65px;
  }
}
/* ====== 动态设定 ====== */
@keyframes shake {
  0% {
    transform: translateX(0) translatex(0px) translateZ(50px);
  }
  5% {
    transform: translateX(-5px) translateY(-3px) translateZ(-50px);
  }
  10% {
    transform: translateX(5px) translateY(3px) translateZ(50px);
  }
  20% {
    transform: translateX(-5px) translateY(-3px) translateZ(-50px);
  }
  25% {
    transform: translateX(0) translateY(0px) translateZ(50px);
  }
  100% {
    transform: translateX(0) translateY(0px) translateZ(-50px);
  }
}
@keyframes bounceShakeDepth {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1) translateZ(0);
    opacity: 1;
  }
  20% {
    transform: translate(-8px, -18px) rotate(-8deg) scale(1.05) translateZ(40px);
    opacity: 1;
  }
  40% {
    transform: translate(8px, -10px) rotate(8deg) scale(1.12) translateZ(80px);
    opacity: 1;
  }
  60% {
    transform: translate(-6px, -20px) rotate(-6deg) scale(1.05) translateZ(40px);
    opacity: 1;
  }
  80% {
    transform: translate(6px, -12px) rotate(6deg) scale(1.02) translateZ(10px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1) translateZ(0);
    opacity: 1;
  }
}
@keyframes gift {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(5deg);
  }
  30% {
    transform: rotate(-5deg);
  }
  45% {
    transform: rotate(4deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes box {
  0%, 62% {
    transform: none;
  }
  64% {
    transform: scaleY(1.04);
  }
  66%, 76% {
    transform: scaleY(0.94);
    transform-origin: bottom center;
  }
  78% {
    transform: scaleY(1.18);
  }
  79% {
    transform: translateY(-44px);
  }
  82% {
    transform: none;
  }
  84% {
    transform-origin: bottom left;
    transform: rotate(-2deg) translateY(-2px);
  }
  86% {
    transform: none;
  }
  88% {
    transform-origin: bottom right;
    transform: rotate(1deg) translateY(-1px);
  }
  90% {
    transform: none;
  }
}
@keyframes shell {
  0%, 30% {
    transform: none;
  }
  33%, 62% {
    transform: translateY(0);
  }
  64% {
    transform: translateY(0) scaleY(1.06);
  }
  66%, 80% {
    transform-origin: bottom;
    transform: translateY(10px) scaleY(0.9);
  }
  79% {
    transform: translateY(-44px);
  }
  83% {
    transform: translateY(-120px) scaleY(1.3);
  }
  86%, 88% {
    transform-origin: top;
    transform: translateY(-120px) scaleY(0.9);
  }
  100% {
    transform: translateY(-120px) scaleY(0.9);
  }
}
@keyframes twinkle {
  0% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  12% {
    opacity: 0.92;
    transform: scale(1.06);
  }
  26% {
    opacity: 0.64;
    transform: scale(0.98);
  }
  46% {
    opacity: 1;
    transform: scale(1.12);
  }
  70% {
    opacity: 0.72;
    transform: scale(0.99);
  }
  100% {
    opacity: 0.66;
    transform: scale(1);
  }
}
@keyframes updown {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1.1) rotate(-5deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin_login {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes coin-fly {
  0% {
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }
  100% {
    transform: translateX(var(--x-move)) translateY(var(--y-move)) scale(0.7) rotate(360deg);
  }
}
@keyframes glowEntrance {
  0% {
    opacity: 0;
    transform: scale(0.2);
    filter: brightness(0.5) blur(4px);
  }
  40% {
    opacity: 1;
    transform: scale(1.15);
    filter: brightness(1.6) blur(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}
@keyframes grow {
  0% {
    transform: scale(0.08);
    filter: blur(1.5px);
    opacity: 0;
  }
  65% {
    transform: scale(1.06);
    filter: blur(0.3px);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes deal {
  0% {
    opacity: 0;
    transform: translate(3em, 0.8em) rotate(-15deg) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translate(calc(var(--final-x) * 0.7), -0.4em) rotate(8deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(var(--final-x), var(--final-y)) rotate(var(--final-rot)) scale(var(--final-scale));
  }
}
@keyframes numbers-pop-in {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -12px) scale(1.08);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, 4px) scale(0.96);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes numFade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes numFinal {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes finger {
  0% {
    margin-top: 0px;
  }
  50% {
    margin-top: 10px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes finger_2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes purple_ball {
  0% {
    margin-top: 0px;
    opacity: 0;
    transform: rotate(-45deg);
  }
  50% {
    margin-top: 10px;
    opacity: 1;
  }
  100% {
    margin-top: 0px;
    opacity: 0;
    transform: rotate(45deg);
  }
}
@keyframes left_circle {
  0% {
    top: 30px;
    left: 10px;
    transform: rotate(0deg);
  }
  50% {
    top: 60px;
    left: 20px;
  }
  100% {
    top: 30px;
    left: 10px;
    transform: rotate(-360deg);
  }
}
@keyframes left_shape {
  0% {
    transform: rotate(0deg);
    transform: scale(1);
    bottom: 85px;
  }
  15% {
    transform: rotate(-25deg);
    transform: scale(1.2);
    bottom: 70px;
  }
  50% {
    transform: rotate(25deg);
    bottom: 40px;
  }
  70% {
    transform: rotate(-25deg);
    bottom: 40px;
  }
  100% {
    transform: rotate(0deg);
    bottom: 85px;
  }
}
@keyframes right_diamond {
  0% {
    margin-top: 0px;
    opacity: 0;
    transform: rotate(45deg);
  }
  50% {
    margin-top: 10px;
    opacity: 1;
  }
  100% {
    margin-top: 0px;
    opacity: 0;
    transform: rotate(-45deg);
  }
}
@keyframes right_coin {
  0% {
    margin-top: 0px;
    transform: rotate(5deg);
  }
  25% {
    margin-top: -10px;
    transform: rotate(-5deg);
  }
  25% {
    margin-top: -10px;
    transform: rotate(0deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(5deg);
  }
}
@keyframes right_coin2 {
  0% {
    margin-top: 0px;
    transform: rotate(-55deg);
  }
  25% {
    margin-top: 5px;
    transform: rotate(-65deg);
  }
  50% {
    margin-top: -10px;
    transform: rotate(-60deg);
  }
  100% {
    margin-top: 0px;
    transform: rotate(-55deg);
  }
}
@keyframes right_star {
  0% {
    transform: rotate(0deg);
    transform: scale(1);
    bottom: 150px;
  }
  25% {
    transform: rotate(25deg);
    transform: scale(1.2);
    bottom: 100px;
  }
  75% {
    transform: rotate(-25deg);
    bottom: 100px;
  }
  100% {
    transform: rotate(0deg);
    bottom: 150px;
  }
}
@keyframes starlight {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(1);
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(2.5);
  }
}
@keyframes arrow-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(30px);
  }
}
@keyframes holoSparkle {
  0%, 100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }
  5%, 8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }
  13%, 16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }
  35%, 38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }
  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}
@keyframes holoGradient {
  0%, 100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }
  5%, 9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
  13%, 17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }
  35%, 39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }
  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}
@keyframes holoCard {
  0%, 100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  5%, 8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }
  13%, 16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }
  35%, 38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }
  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}
@keyframes left_fly {
  0% {
    left: 170px;
    top: 290px;
    opacity: 0;
  }
  100% {
    left: 10px;
    top: 110px;
    opacity: 1;
  }
}
@keyframes right_fly {
  0% {
    right: 205px;
    top: 280px;
    opacity: 0;
  }
  100% {
    right: 45px;
    top: 40px;
    opacity: 1;
  }
}
@keyframes right_fly_02 {
  0% {
    right: 235px;
    top: 285px;
    opacity: 0;
  }
  100% {
    right: 25px;
    top: 445px;
    opacity: 1;
  }
}
@keyframes leftright {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes box_three {
  0% {
    right: 90px;
    top: 20px;
    transform: scale(0) rotate(90deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    right: 80px;
    top: 10px;
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes left_fly_op {
  0% {
    left: 170px;
    top: 290px;
    opacity: 0;
  }
  100% {
    left: 30px;
    top: 60px;
    opacity: 1;
  }
}
@keyframes right_fly_op {
  0% {
    right: 95px;
    top: 150px;
    opacity: 0;
  }
  100% {
    right: 35px;
    top: 110px;
    opacity: 1;
  }
}
@keyframes left_star1 {
  0% {
    left: 150px;
    top: 200px;
    opacity: 0;
  }
  100% {
    left: -20px;
    top: 150px;
    opacity: 1;
  }
}
@keyframes left_star2 {
  0% {
    left: 150px;
    top: 200px;
    opacity: 0;
  }
  100% {
    left: 100px;
    top: -15px;
    opacity: 1;
  }
}
@keyframes left_star3 {
  0% {
    right: 60px;
    top: 170px;
    opacity: 0;
  }
  100% {
    right: 0;
    top: 60px;
    opacity: 1;
  }
}
@keyframes shiny1 {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  100% {
    transform: rotate(0deg) scale(0);
  }
}
@keyframes shiny2 {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(0.3);
  }
  100% {
    transform: rotate(0deg) scale(0);
  }
}
@keyframes shiny3 {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(0.5);
  }
  100% {
    transform: rotate(0deg) scale(0);
  }
}
@keyframes slide_line {
  to {
    background-position: 0% 50%;
  }
}
@keyframes pop {
  0% {
    transform: rotate(0deg) scale(0.96);
  }
  12% {
    transform: rotate(5deg) scale(1.06);
  }
  15% {
    transform: rotate(5deg) scale(1.06);
  }
  26% {
    transform: rotate(-5deg) scale(0.98);
  }
  30% {
    transform: rotate(-5deg) scale(0.98);
  }
  45% {
    transform: rotate(4deg) scale(1.12);
  }
  46% {
    transform: rotate(4deg) scale(1.12);
  }
  60% {
    transform: rotate(-4deg) scale(0.99);
  }
  70% {
    transform: rotate(-4deg) scale(0.99);
  }
  75% {
    transform: rotate(0deg) scale(0.99);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
@keyframes sway {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(0deg);
  }
}
@keyframes addmore {
  0% {
    transform: scale(0.96);
  }
  12% {
    transform: scale(1.06);
  }
  15% {
    transform: scale(1.06);
  }
  26% {
    transform: scale(0.98);
  }
  30% {
    transform: scale(0.98);
  }
  45% {
    transform: scale(1.12);
  }
  46% {
    transform: scale(1.12);
  }
  60% {
    transform: scale(0.99);
  }
  70% {
    transform: scale(0.99);
  }
  75% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}/*# sourceMappingURL=style.css.map */