/* The light on top of the car */
.police-car .light {
  animation: police-flash 0.61s infinite alternate;
}

/* The main body of the car */
.police-car {
  /* Animate a drop-shadow to simulate a glow from the light */
  animation: car-glow 0.61s infinite alternate;
  z-index: 999;
}

/* Keyframes for the light flashing from red to orange */
@keyframes police-flash {
  from {
    fill: red;
    /* ADDED: A red glow for the light source itself */
    filter: drop-shadow(0.5em 0 0.5em red);
  }
  to {
    fill: blue;
    /* ADDED: An orange glow for the light source itself */
    filter: drop-shadow(0.5em 0 0.5em blue);
  }
}

/* Keyframes for the car's glow, matching the light's colors */
@keyframes car-glow {
  from {
    /* A red glow with 1em blur cast onto the car */
    filter: drop-shadow(0 0 0.5em rgba(255, 0, 0, 0.752));
  }
  to {
    /* An orange glow with 1em blur, matching the light */
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 255, 0.775));
  }
}
.character-container{
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    border-radius: 50%;
    overflow: hidden;
}
.body-wrapper svg{
    width: 100%;
    height: 100%;
}
.trade-final-panel.bid-sell {}

.bid-sell-players {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}


/* 单个结果行的容器 */
.bid-sell-player.final {
  /* 动画初始状态：透明且在下方 */
  opacity: 0;
  transform: translateY(20px);

  /* 定义动画效果：当 opacity 或 transform 变化时，平滑过渡 */
  /* 你可以根据喜好调整这里的时长和缓动函数 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;

  /* 保持 flex 布局（如果 bid-sell-player 是 flex 容器） */
  display: flex;
  align-items: center;
  width: 100%;
  /* 根据需要调整行间距 */
}

/* 动画触发后的最终状态 */
.bid-sell-player.final.visible {
  opacity: 1;
  transform: translateY(0);
}

.bid-sell-player.final .name {
  margin: 0 10px;
  flex-grow: 1;
  /* 让名字占据多余空间 */
}

.bid-sell-player.final .money {
  font-weight: bold;
}

.bid-sell-player.final .crown {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 0;
  top: 0;
  translate: 0 -50%;
  aspect-ratio: 1;
  height: 1.4em;
}

.bid-sell-player.final .crown svg {
  rotate: 30deg;
  width: 100%;
  height: 100%;
}

.bid-sell-player {
  box-sizing: border-box;
  height: 3.19em;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.2em 1em;
  background-color: #aeaab714;
  border-radius: 0.5em;
  position: relative;
}

.bid-sell-player.my {}

.bid-sell-player .character-container {
  height: 70%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.bid-sell-player .name {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
  margin-left: 0.5em;
  font-size: 1.2em;
  font-family: Segoe UI, sans-serif, Segoe UI Emoji;
  font-weight: 300;

}

.bid-sell-player .money {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: white;
  padding-left: 0.5em;
}

.final-trade-column.bid-sell-city {
  justify-content: center;
}

.mortgage-money {
  font-size: 1.4em;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  color: #ffffffcf;
  text-align: center;
}

.trade-explain {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 5px 0;
  align-content: center;
  text-align: center;
  font-size: 1.2em;
  color: #9c9f9f;
  line-height: 1;
  font-family: Segoe UI, sans-serif, Segoe UI Emoji;
  font-weight: 300;
}

.trade-explain span,
.trade-explain div {
  display: inline-block;
  height: 1em;
}

.trade-explain img {
  height: 1em;
}

.trade-outdated {
  color: rgb(255, 63, 63);
}

.trade-fianl-title .trade-explain {
  font-size: 0.7em;
}

.trade-city-lvl-icon {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 0;
  top: 0;
  translate: 0 -50%;
  aspect-ratio: 1;
  height: 16px;
  gap: 5px;
}

.trade-city-lvl-icon img,
.trade-city-lvl-icon svg {
  height: 100%;
  rotate: 30deg;
}

.trade-window-bank {
  width: 30px;
  aspect-ratio: 1;
}

.trade-window-bank svg {
  width: 100%;
  height: 100%;
}

.dashb-trade-banner-flex {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  flex: 1 0 2.5em;
  align-items: center;
}

.inspect-container {
  position: relative;
  right: 0;
  z-index: 100;
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: calc(1*var(--center-w));
  ;
  opacity: 0.5;
}

.inspect-icon {
  margin: 0 0.4em;
  display: flex;
  position: relative;
}


.inspect-icon svg {
  position: relative;
  aspect-ratio: 1;
  width: 1.6em;
  transform: scaleX(-1);
  fill: #baafd4;
  z-index: 10;
  animation: eye-look 2s ease-in-out infinite;
}

@keyframes eye-look {
  0% {
    transform: scaleX(1);
    /* Look to the left */
  }

  94% {
    transform: scaleX(1);
    /* Look to the right */
  }

  95% {
    transform: scaleY(0.1);
    /* Close eye */
  }

  100% {
    transform: scaleY(0.1);
    /* Close eye */
  }
}

.inspect-avatar {
  display: flex;
  position: relative;
  transition: 0.5s;
  align-items: center;
}

.inspect-avatar .character-container {
  position: absolute !important;
  aspect-ratio: 1;
  width: 2em;
}

.action-avatars-container {
  width: 1.4em;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transition: 0.5s;
}

.z-index-999 {
  z-index: 999;
}

.z-index-9 {
  z-index: 9;
}

.desktop-money {
  margin: 0.5em 1em 2em 1em;
}

.desktop-wheel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.desktop-slider-wrapper {
  width: 100%;

}

.desktop-slider-wrapper .slider {
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

.desktop-slider-wrapper .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.desktop-slider-wrapper .slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* NEW: Flex container for the min/max labels */
.desktop-slider-wrapper .labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* Space between slider and text */
  padding: 0 2px;
  /* Small padding to align with slider ends */
  font-size: 0.85em;
  font-weight: 500;
  color: #555;
}

/* Main container for the whole component */
.currency-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1em;
  max-width: 320px;
  margin: auto;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}

/* Container for the slider and its input display */
.slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Wrapper for the input field to position the '$' prefix */
.input-wrapper {
  position: relative;
  width: 50%;
  max-width: 150px;
  margin-bottom: 10px;
  /* Add some space between input and slider */
}

.input-wrapper::before {
  content: '$';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  pointer-events: none;
}

.currency-input-field {
  width: 100%;
  height: 3em;
  box-sizing: border-box;
  padding: 10px 10px 10px 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-left: 20px;
}

/* NEW: Wrapper for slider and labels */
.slider-and-labels-wrapper {
  width: 90%;
  translate: 0 -1em;
}

.money-slider {
  --thumb-size: 10px;
  -webkit-appearance: none;

  width: 100%;
  cursor: default;
  -moz-appearance: none;
       appearance: none;
  height: 6px;
  /* Slightly thinner track */
  background: none;
  border-radius: 3px;
  outline: none;
  /* Prevent user interaction */
}

.money-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  /* Just slightly larger than 6px track */
  height: var(--thumb-size);
  background: #eeeeee;
  border-radius: 50%;
  border: none;
  translate: 0 -2px;
  /* Optional for visibility */
  /* Align thumb vertically */
}

.money-slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: #eeeeee;
  border-radius: 50%;
  border: none;
  translate: 0 -2px;
}

/* Firefox track fix */
.money-slider::-moz-range-track {
  background: linear-gradient(to right,
      #eeeeee 0%,
      #eeeeee calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e 100%);
  height: 6px;
  border-radius: 3px;
}

.money-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
      #eeeeee 0%,
      #eeeeee calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e 100%);
  height: 6px;
  border-radius: 3px;
}


/* Unfilled color */
/* Optional: disabled pointer events to prevent user interaction */
.money-slider:disabled {
  pointer-events: none;
}

/* NEW: Flex container for the min/max labels */
.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* Space between slider and text */
  padding: 0 2px;
  /* Small padding to align with slider ends */
  font-size: 0.85em;
  font-weight: 500;
  color: #cabbea;
}

.button-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1em;
}

.adjust-button {
  flex: 1;
  padding: 0.5em 0;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 0.4em;
  color: #ffffffb3;
  background-color: #7547e0;
  transition: background-color 0.2s;
}

.adjust-button:hover {
  filter: brightness(1.2);
}

@media (max-width: 600px) {
  .input-group {
    font-size: 1.4em;
  }

  .bid-sell-player {
    padding: 1em 1em;
    font-size: 1.2em;
    height: unset;
  }

  .adjust-button {
    font-size: 1.4em;
    padding: 0.8em 0;
  }


  .trade-city-lvl-icon {
    height: 12px;
  }


  .inspect-avatar .character-container {
    width: 1.7em;
  }

  .action-avatars-container {
    width: 0.8em;
  }


  .inspect-icon svg {
    width: 1.2em;
  }

}
.player-banner-popup .character-container {
    filter: brightness(0.8);
}

.userInfoTop {
    display: flex;
    align-items: flex-start;
    flex-direction: rwo;
    animation: scaleup .3s cubic-bezier(.25, 0, 0, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgb(19, 15, 29);
    background-image: linear-gradient(to right bottom, rgb(19, 15, 29), rgb(26, 15, 29));
    border-radius: .5rem;
    box-sizing: border-box;
    padding: 5rem 1.2rem 0 1.2rem;
    max-width: 564px;
    width: 96vw;
    height: calc(96*var(--vh));
    position: absolute;
    z-index: 700;
}

@keyframes scaleup {
    0% {
        opacity: 0;
        transform: scale(.875);
    }

}

.tabs {
    width: 28%;
    white-space: nowrap;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow-y: scroll;
    overflow-x: hidden;

}

.tab {
    display: flex;
    font-size: large;
    align-items: center;
    padding: 0 1rem 0 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #baafd47d;
    height: 3rem;
    width: 60%;
    margin: 0.2rem 0.5rem 0.2rem 0;
}

.tab:hover {
    color: #cccccc;
    background: #2b2848;
}

.tab svg {
    height: 1.2rem;
    width: 1.2rem;
    margin-right: 0.2rem;
}

/* 高亮目标 */
.highlight-1 {
    color: #ddd;
    background: #222039;
}

.userInfoTop .content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    position: relative;
    width: 72%;
}

.content-fixed-head {
    box-sizing: border-box;
    padding-bottom: 1rem;
    align-content: end;
    justify-items: center;
    padding: 0 8px;
}

.content-scrollable-container {
    box-sizing: border-box;
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    justify-items: center;
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px 1px 5px 8px;
    /* compenstate the scroll bar */
    width: 92%;
}

.info-container {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.identity-info-container {
    display: flex;
    box-sizing: border-box;
    width: 92%;
    padding: 1.5rem 1rem;
    background: rgb(41, 32, 63);
    border-radius: 1rem;
}

.chat-to .nickname {
    font-size: large;
    align-content: end;
    color: #ddd;
    width: 100%;
    padding: 0.2rem 0;
}

.name-container {
    font-size: medium;
    color: grey;
    width: 100%;
    padding: 0.5rem 0 0 1rem;
}

.dressed-character-container {
    display: block;
    align-content: center;
    width: 5rem;
}

.dressed-character-container .character-container {
    width: 4rem;
    height: 4rem;
}

.player-info-and-buttons .avatar .character-container {
    height: 4em;
    aspect-ratio: 1;
    margin-right: 3px;
    flex-shrink: 0;
}

.player-info-and-buttons .avatar>svg {
    width: 70px;
    aspect-ratio: 1;
    border-radius: 35px;
    background-color: #888888;
}

.player-info-and-buttons .avatar {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.side .player-info-and-buttons .avatar {
    padding: 0 1em;
    font-size: 0.82em;
}

.popup .player-info-and-buttons .avatar {
    padding: 0 5em;
}

.player-info-and-buttons .avatar .nickname {
    font-size: 1.7em;
    align-content: end;
    color: #dddddde3;
    overflow: hidden;
    white-space: nowrap;
    
}

.buttons {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

/* Add to existing CSS */
.buttons-container {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    width: 100%;
}

.vote {
    box-shadow: 0 0.1em 0.5em #130f1d;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    border: 0;
    border-radius: 0.7em;
    color: #f6f6f6;
    opacity: 0.7;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word;
    white-space: nowrap;
    height: 2em;
    aspect-ratio: 2.6;
    font-size: 1.4em;
    box-sizing: border-box;
    line-height: 1;
}

.microphone {
    box-shadow: 0 0.1em 0.5em #130f1d;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    border: 0;
    border-radius: 0.7em;
    color: #f6f6f6;
    opacity: 0.7;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word;
    white-space: nowrap;
    height: 2em;
    aspect-ratio: 2.6;
    font-size: 1.4em;
    box-sizing: border-box;
    line-height: 1;
}

.not-voting {
    cursor: pointer;
    background-color: #b0b0b014;
}


.i-voted {
    cursor: not-allowed;
    background-color: #902f17;
}

.i-not-voted {
    cursor: pointer;
    background-color: #c93915;
}

.not-voting:hover,
.i-not-voted:hover {
    filter: brightness(1.2);
}

.vote svg {
    fill: #ffffff;
    height: 100%;
}

.player-info-and-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

.chat-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-top: 1px solid #37375a69;
    margin: 1em 0;
    flex: 1;
}

.chat-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: visible;
    color: #fff;
    justify-content: end;
}

.side .chat-content {
    padding: 1em 1em;

}

.popup .chat-content {
    padding: 1em 3em;

}

.chat-to {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 0.5em;
    font-size: 1.6em;
}

.chat-to .character-container {
    width: 20px;
    aspect-ratio: 1;
}

.chat-target-avatar {
    display: flex;
    flex-direction: row;
    font-size: inherit;
    position: relative;
    align-items: center;
}


.chat-target-avatar .text {
    padding-right: 0.2em;
    color: rgb(176 170 195 / 51%);
    white-space: nowrap;
}

.chat-target-avatar .character-container {

    width: 1.4em;
    aspect-ratio: 1;
}

.chat-target-avatar>svg {
    width: 2em;
    aspect-ratio: 1;
}

.chat-target-avatar .nickname {
    white-space: nowrap;
    font-size: inherit;
    color: #cccccc;
    overflow: hidden;
    max-width: 6em;
    
}

.scrollable {
    height: 0;
    flex: 1 1 0;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;
    justify-content: end;

}

.chat-message-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.chat-message-player {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    align-items: end;
    font-size: 1.5em;
    color: #b1b5d387
}

.chat-message-player .name {
    overflow: hidden;
    max-width: 5em;
    white-space: nowrap;
    
}

.chat-message-player .character-container {
    width: 2em;
    aspect-ratio: 1;
}

.chat-from-me {
    align-items: end;
}

.chat-from-me .chat-message-player {
    display: none;
}

.chat-from-others {
    align-items: start;
}

.chat-input-container {
    display: flex;
    gap: 0.6em;
    border-top: 1px solid #37375a69;
}

.side .chat-input-container {
    padding: 1.6em 2px 2px 2px;
}

.popup .chat-input-container {
    padding: 1.6em 3em;

}

.chat-input {
    width: 0;
    height: 1.4em;
    flex: 1;
    padding: 0.7em 1.3em;
    border: none;
    border-radius: 24px;
    background: #00000061;
    color: rgb(210, 210, 210);
    font-size: 1.6em;
    transition: outline 0.3s;
    outline: 2px solid transparent;
    

}


.chat-input:focus-visible {
    outline: 2px solid #3a447180;
}


.chat-input::-moz-selection {
    background-color: #9a8fef;
}


.chat-input::selection {
    background-color: #9a8fef;
}

.chat-send {
    cursor: pointer;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background: #00000061;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: #baafd4cc;
}

.chat-send svg {
    height: 62%;
    padding-left: 0.7em;
}

.chat-send:hover {
    filter: brightness(1.2)
}

.chat-from-others .chat-message {
    border-radius: 0em 1em 1em 1em;
}

.chat-from-me .chat-message {
    border-radius: 1em 0em 1em 1em;
}

.chat-message {
    background: #ffffff42;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    word-break: break-word;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.6em;
    color: #e1e1e1;
    
}


.chat-message:last-child {
    margin-bottom: 0;
}

.otherInfo-container {
    flex: 1;
}

.logout-container {
    width: 100%;
    display: flex;
    align-items: end;
    flex-direction: column;
    margin: 1rem;
}

.username {
    font-size: medium;
    color: grey;
    width: 100%;
    padding: 0.2rem 0rem;
}

.logout-button {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 0.5rem;
    padding: 6px 10px;
    font-size: 18px;
    color: #baafd4cc;
}

.logout-button svg {
    width: 18px;
    aspect-ratio: 1;
    fill: #baafd4cc;
    margin-right: 4px;
}

.logout-button:hover {
    filter: brightness(1.2);
    background: #2b2848;
}

.item {
    background: #2a2a49;
    border-radius: 1rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.items-container {}

.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 5rem);
    grid-auto-rows: 5rem;
    justify-content: center;
    gap: 0.5rem;
    width: 80%;
    min-width: calc(3* 5rem + 2* 0.5rem);
    margin: 1rem 0 0 0;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.all-store-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 7rem);
    grid-auto-rows: 10rem;
    justify-content: center;
    gap: 0.5rem;
    width: 80%;
    min-width: calc(3* 5rem + 2* 0.5rem);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.store-item {
    background: #2a2a49;
    border-radius: 1rem;
    padding: 0.0 1.5rem 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.store-item-icon {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
}

.icon-size-adjust {
    display: flex;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
}

.item-name {
    font-size: small;
    margin: 0 0 0.5rem 0;
    color: #d8d8d8;
}

.item-price {

    font-size: medium;
    display: flex;
    color: #ddbf1e;
}

.item-price svg {
    width: 1rem;
    margin: 0 0.5rem;
}

/* 添加在userInfo.css中 */
.gift-code-container {
    display: flex;
    flex-direction: column-reverse;
    margin: 10px 0 5px 0;
    width: 80%;
    max-width: 500px;
}

.gift-code-inputs {
    display: flex;
    gap: 10px;
    height: -moz-fit-content;
    height: fit-content;
    margin-bottom: 10px;
}

.gift-input {
    flex: 1;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #2a2a49;
}

.gift-input::-moz-selection {
    background-color: #9a8fef;
}

.gift-input::selection {
    background-color: #9a8fef;
}

.gift-redeem-btn {
    background-color: #7b47e0;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gift-redeem-btn:hover {
    background-color: #865bdc;
}

.gift-code-message {
    color: #4CAF50;
    font-size: 14px;
    margin-top: 5px;
}

.gift-code-message.error {
    color: #f44336;
}

.new-version {
    font-size: 0.9em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.new-version svg {
    width: 1.4em;
    height: 1.4em;
    rotate: 180deg;
    padding-top: 0.1em;
}

@media (max-width: 600px) {


    .userInfoTop {
        height: calc(80*var(--vh));
        top: calc(10*var(--vh));
        padding: 2rem 1.2rem 0;
    }

    .tab {
        font-size: small;
        box-sizing: border-box;
        padding: 0 0 0 0.5rem;
        width: 90%;

    }

    .tab svg {
        width: 1rem;
        aspect-ratio: 1;
    }

    .dressed-character-container .character-container {
        width: 3rem;
        height: 3rem;

    }

    .items {
        grid-template-columns: repeat(auto-fill, 3.5rem);
        grid-auto-rows: 3.5rem;
        gap: 0.25rem;
        min-width: calc(3* 3.5rem + 2* 0.25rem);
        margin: 0.5rem 0 0 0;
        border-radius: 0.25rem;
        padding: 0.25rem;
    }

    .all-store-items {
        grid-template-columns: repeat(auto-fill, 3.5rem);
        grid-auto-rows: 5rem;
        gap: 0.25rem;
        width: -moz-fit-content;
        width: fit-content;
        min-width: calc(3* 2.5rem + 1* 0.5rem);
        margin: 0.5rem 0 0 0;
        border-radius: 0.25rem;
        padding: 0.25rem;
    }

    .store-item {
        padding: 0;
        border-radius: 0.5rem;
    }

    .store-item-icon {
        width: 100%;
        height: 60%;
        justify-content: center;
    }

    .icon-size-adjust {
        width: 3rem;
    }

    .item-name {
        font-size: x-small;
        margin: 0 0 0.2rem 0;
    }

    .item-price {
        font-size: x-small;
    }

    .item-price svg {
        width: 0.6rem;
        margin: 0 0.2rem;
    }

    .gift-code-inputs {
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .gift-input {
        padding: 4px 6px;
        font-size: 0.8rem;
        width: 70%;
    }

    .gift-redeem-btn {
        box-sizing: border-box;
        white-space: nowrap;
    }

    .chat-container {}

    .chat-input {
        width: 70%;
    }

    .section {
        padding: 0 0.5rem;
    }

    .logout-container .logout-button {
        height: 2rem;
        width: 5rem;
        font-size: 0.8rem;
    }
}
.rc-segmented {
  display: inline-block;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.04);
}
.rc-segmented-group {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  border-radius: 2px;
}
.rc-segmented-item {
  position: relative;
  min-height: 28px;
  padding: 4px 10px;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  cursor: pointer;
}
.rc-segmented-item-selected {
  background-color: white;
  color: #262626;
}
.rc-segmented-item:hover,
.rc-segmented-item:focus {
  color: #262626;
}
.rc-segmented-item-disabled,
.rc-segmented-item-disabled:hover,
.rc-segmented-item-disabled:focus {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
.rc-segmented-item-label {
  z-index: 2;
  line-height: 24px;
}
.rc-segmented-item-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.rc-segmented-thumb {
  background-color: white;
  position: absolute;
  width: 0;
  height: 100%;
  padding: 4px 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.rc-segmented-vertical .rc-segmented-group {
  flex-direction: column;
}
.rc-segmented-vertical .rc-segmented-item {
  width: 100%;
  text-align: left;
}
.rc-segmented-vertical .rc-segmented-thumb {
  width: 100%;
  height: 0;
  padding: 0 4px;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.rc-segmented-disabled .rc-segmented-item,
.rc-segmented-disabled .rc-segmented-item:hover,
.rc-segmented-disabled .rc-segmented-item:focus,
.rc-segmented-disabled .rc-segmented-item:hover,
.rc-segmented-disabled .rc-segmented-item:hover:hover,
.rc-segmented-disabled .rc-segmented-item:focus:hover,
.rc-segmented-disabled .rc-segmented-item:focus,
.rc-segmented-disabled .rc-segmented-item:hover:focus,
.rc-segmented-disabled .rc-segmented-item:focus:focus {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
.rc-segmented-thumb-motion-appear-active,
.rc-segmented-thumb-motion-enter-active {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform, width;
}
.rc-segmented-rtl {
  direction: rtl;
}
.rc-segmented-item:focus {
  outline: none;
}
.rc-segmented-item-focused {
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.setting-list-button .rc-slider {
    width: 100%;
}

.setting-list-button .rc-slider-rail {
    background-color: #5e5e5e;
}

.setting-list-button .rc-slider-track {
    background-color: #fdfdfd;
}


.setting-list-button .rc-slider-handle {
    border: none;
    background-color: #e0ddea;
}

.setting-list-button .rc-slider-mark-text {
    white-space: nowrap;
}

.setting-list-button .rc-slider-mark {
    top: 14px;
    font-size: calc(0.028*var(--setting-w));
}

/* mobileGameTabs.css */
.player-banner-popup {
  --chat-w: min(calc(0.72 * var(--center-h)), var(--center-w));
  font-size: calc(0.023*var(--chat-w));

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2em;
  background: var(--c-g-panel);

  box-sizing: border-box;
}

.player-banner-popup.side {
  width: 100%;
  height: 50vh;
  padding: 2em 1em 0em;
}

.player-banner-popup.popup {
  padding: 3em 1em 0;
  z-index: 700;
  height: calc(0.8*var(--center-h));
  width: var(--chat-w);
  position: absolute;
  right: 50%;
  top: 0;
  transform: translate(50%, calc((100vh - (20 - var(--board-unit-num)) * var(--board-unit)) * 0.5 + var(--board-unit) + 2em));

}

/* Tab bar at the bottom */
.mobile-tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 3.5rem;
  background-color: #27274e4d;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.05);
  z-index: 10;
  scrollbar-width: none;
}

.mobile-tab-bar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.mobile-tab-bar {}

.mobile-tab {
  flex: 1;
  height: 100%;
  color: #888;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  cursor: pointer;
}

.mobile-tab svg {
  aspect-ratio: 1;
  height: 5em;
}

.mobile-tab.active {
  color: #ffffff;
}

.mobile-tab.active svg {
  /* assuming icons inherit currentColor */
  fill: currentColor;
}

/* Content area with horizontal swipe */
.mobile-tab-content {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mobile-tab-content::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.mobile-section {
  scroll-snap-align: start;
  min-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.setting-touch-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chat-touch-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.exit {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
  color: #e4e3e8cc;
}

.exit svg {
  height: 25px;
  width: 50px;
  scale: 1.5 1.2;
}

.exit>svg {
  margin-left: 8px;
  margin-right: 9px;
  fill: #baafd4cc;
}

.select {}

.targets-container {
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  /* Hides the scrollbar in Firefox */
}

.targets-container::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.all svg {
  color: #ccc6dc;
}

.target {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 30px;
  height: 50px;
  width: 50px;
  align-items: center;
  filter: brightness(0.5);
  margin: 0 5px;
}

.all.target {
  background-color: #6e6e8b;

}

.target.highlight {
  filter: drop-shadow(black 0px 0px 0.2em) drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 0.25em);
}

.target>svg {
  height: 50px;
  aspect-ratio: 1;
}

.target .character-container {
  height: 50px;
  aspect-ratio: 1;
}

.target-select-nickname {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  color: #baafd4cc;
  padding-top: 5px;
}

.avatar .point {
  flex: 1 0 4em;
  display: flex;
  flex-direction: row;
  justify-content: end;
  font-size: 1.8em;
  display: flex;
  align-items: center;
  color: #e6d995;
  line-height: 1;
}

.avatar .point img {
  width: 1.6em;
  aspect-ratio: 1;
}


@media (max-width: 600px) {
  .player-banner-popup.popup {
        font-size: calc(0.03*var(--chat-w));
    height: calc(48 * var(--vh));
    top: var(--vh);
    transform: translate(50%, 0);
  }

}
.skill {
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    align-items: center;
    background-image: linear-gradient(to top left, #411fc4, #c34bdf);
    border-radius: .25em;
    color: #fff;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word;
    padding: 0;
    font-size: 0.9rem;
    height: calc(2 * var(--grid-em));
    width: calc(5 * var(--grid-em));
    writing-mode: horizontal-tb;
    margin: 0 calc(0.5 * var(--grid-em));
}


.skill:hover {
    filter: brightness(1.2);
    cursor: pointer;
}

.skill svg {
    width: 1rem;
    fill: #ffffff;
}


.right-margin svg {
    margin-right: 3px;
}

.skill-passive::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 50%, rgb(0 0 0 / 56%) 100%);
}

.skill-active {
    box-shadow: 0 0 5px #3F51B5, 0 0 20px #3F51B5;
}

/* --- 技能动画容器 --- */
.skill-banner {
    position: absolute;
    top: 30%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 130px;
    width: calc(80*var(--vh));
    background: linear-gradient(to left, transparent, black 30%);
    flex-direction: row;
    overflow: hidden;
    left: 50%;
    translate: -50% -50%;
    z-index: 100;
}

/* --- 动画状态 --- */
.skill-banner.entering {
    animation: rushInFromRight 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

.skill-banner.exiting {
    animation: slideOutToRight 0.5s ease-in forwards;
}


/* --- 技能文字 --- */
.skill-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-name {
    font-size: 23px;
    color: #949494;
}

.used-skill {
    font-size: 16px;
    color: #8b8b8b;
}

.skill-banner .skill-name {
    font-size: 30px;
    color: #ffffff;
}


/* --- 头像 --- */
.skill-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #333;
    /* 图片加载失败时的底色 */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    /* 内阴影增加立体感 */
}

.skill-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    /* 保证图片不变形地填充满容器 */
}

.skill-info.lijiacheng {
    position: absolute;
    top: 10%;
    left: 50%;
    translate: -50% 0;
    max-width: 80%;
    height: 100px;
    overflow: hidden;
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 150;
    opacity: 0.8;
}

.dice-pair {
    display: flex;
    flex-direction: column;
    font-size: 10px;
}

.skill-popup-bounce {
    animation: skill-popup-bounce 0.5s ease-out;
}

.dice-pair .dice {
    padding: 3px;
}

.dice-pair .dice.a {
    transition: none;
}

/* --- 定义动画关键帧 --- */
@keyframes rushInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes skill-popup-bounce {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }

    70% {
        transform: scale(0.95) translateY(5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.hero-intro-container {
    width: 13em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-intro-name {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: rgb(213, 217, 223);
    border-bottom: 1px solid white;
}

.hero-intro-skill {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    font-size: 15px;
    color: rgb(196 193 203);
    margin-top: 8px;

}

.hero-intro-skill .skill-name {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: rgb(176 170 195);
}

.skill-type {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgb(196 193 203);
}

.skill-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

.hero-intro-append {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 14px;
    color: rgb(255 255 255 / 35%);
    margin-top: 10px;
}

.rocket {
    position: absolute ;
    z-index: 9;
    bottom: 0;
    /* Start at the bottom of the father */
    left: 50%;
    transform: translateX(-50%);
    transition: bottom 2s linear;
    z-index: 100;
    /* Smooth transition for vertical movement */
}

.rocket .character-container {
    position: absolute !important;
    width: 30px;
    height: 30px;
    top: 27%;
    left: 50%;
    translate: -50% 0;
}

.rocket>svg {
    width: 100px;
    height: 100px;
}

.flame {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
    /* Initial state hidden, appear with animation */
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
    transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

/* Adjust flame styles for better appearance */
.flame1 {
    width: 25px;
    /* Slightly wider */
    height: 50px;
    /* Taller */
    background: radial-gradient(circle at 50% 90%, #FF6600, #FF3300);
    /* Orange to darker orange */
    z-index: 3;
}

.flame2 {
    width: 20px;
    /* Slightly wider */
    height: 40px;
    /* Taller */
    background: radial-gradient(circle at 50% 90%, #FFCC00, #FF9900);
    /* Yellow to orange-yellow */
    z-index: 2;
    animation-delay: 0.1s;
    /* Reduced delay for closer interaction */
}

.flame3 {
    width: 15px;
    /* Slightly wider */
    height: 30px;
    /* Taller */
    background: radial-gradient(circle at 50% 90%, #FFFF00, #FFCC00);
    /* Bright yellow to yellow */
    z-index: 1;
    animation-delay: 0.2s;
    /* Reduced delay */
}

/* Animation for flame appearance */
.rocket.flames .flame,
.rocket.moving .flame,
.rocket.launched .flame {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
    animation: flameFlicker 0.3s infinite alternate;
}


/* Keyframes for rocket movement */
@keyframes launchUp {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 110%;
        /* Moves past the top of the father */
    }
}

/* Existing flame flicker animation */
@keyframes flameFlicker {

    0%,
    100% {
        transform: translateX(-50%) scaleY(1);
    }

    50% {
        transform: translateX(-50%) scaleY(1.2);
    }
}

@media (max-width: 600px) {
    .skill {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    .skill svg {
        width: 0.7rem;
        margin: 0 0.2rem;
        fill: white;
    }

    .dice-pair {
        font-size: 8px;
    }
}
:root {
    --toastify-color-warning: #29203e !important;
}

.Toastify__toast-body {

    font-size: 1rem;
}

.lobby-top {
    transition: opacity 0.5s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* use shorter border to caculate em */
/* if use width, then font size = 1vw */
/* if use height, then font size = 0.3vh */
/* 竖屏 */
.center-container {
    font-size: 0.46vw;
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    /* 
    background-image: url("../resource/pics/lobby_background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

/* 横屏 */
@media (orientation: landscape) {
    .center-container {
        font-size: 0.24vh;
    }
}

/* 内容层亮度恢复动画 */
@keyframes dark-disappear {
    to {
        filter: brightness(1);
    }
}

/* 暗幕消失动画 */
@keyframes dark-disappear-bg {
    to {
        opacity: 0;
    }
}


.title-emerge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 110;
}

@keyframes title-emerge {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }

}

.show-up-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    margin-top: 0;
    transform: scale(1);
    z-index: 110;
    opacity: 1;
    font-size: 0.8em;
    /* Initial hidden state */
}

@keyframes flyIn {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.light {
    visibility: hidden;
    top: -60em;
    width: 400em;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 999;

    transform-origin: center top;
}

@keyframes light-flicker-on {
    0% {
        opacity: 0;
    }

    /* 突然通电 */
    8% {
        opacity: 1;
    }

    13% {
        opacity: 0.32;
    }

    /* 第二次，不那么猛 */
    22% {
        opacity: 0.75;
    }

    30% {
        opacity: 0.42;
    }

    /* 决定性亮起 */
    42% {
        opacity: 0.75;
    }

    /* 稳定前的小回落（关键） */
    65% {
        opacity: 0.65;
    }

    /* 常亮 */
    95% {
        z-index: 999;
    }

    100% {
        opacity: 1;
        z-index: 10;
    }
}

@keyframes light-spread {
    from {
        transform: scaleY(0.92);
    }

    to {
        transform: scaleY(1);
    }
}


.skyline {
    filter: brightness(1.2) contrast(1.1);
    bottom: -66em;
    position: absolute;
    pointer-events: none;
    z-index: 20;
}

.skyline img {
    width: 100%;
}

@media (orientation: portrait) {
    .skyline {
        width: 260em;
    }
}

.building1 {
    width: 2.9rem;
    position: absolute;
    top: 6.2rem;
    right: 21.1rem;
}

.building2 {
    width: 2rem;
    position: absolute;
    top: 8.2rem;
    right: 26.6rem;
}

.building3 {
    width: 3.6rem;
    position: absolute;
    top: 7.9rem;
    right: 16.1rem;
}

.building4 {
    width: 2.6rem;
    position: absolute;
    top: 9.4rem;
    right: 30.4rem;
}

@keyframes b {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(200px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}

.skyWheel {
    width: 5rem;
    position: absolute;
    top: 9.4rem;
    right: 10.6rem;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.SkylineMain {}

.lobby-background-emerge {}

@keyframes lobby-background-emerge {
    0% {
        opacity: 0;
        transform: scale(0.7);

    }

}

.lobby-title {
    line-height: 1;
    margin-top: 0.5em;
    font-size: 70em;
    font-weight: 600;
    z-index: 20;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, .7), 0 8px 0 rgb(0 0 0 / 55%);
}

.lobby-subtitle {
    height: -moz-fit-content;
    margin-bottom: 0.4em;
    font-size: 32em;
    font-weight: 600;
    z-index: 10;
    color: var(--c-title-sub);
    margin-top: -0.1em;
    perspective: 200px;
    text-shadow: 0 0.1em #12393ea3;
}

.lobby-subtitle-inner {
    /* transform: rotateX(-30deg); */
    transform-origin: bottom;
}

.title-shrink {
    font-size: 3rem
}

.subtitle-shrink {
    font-size: 1.5rem
}

.center-container .start {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    gap: 12em;
    justify-items: center;
}

.lobby-nickname {
    background: var(--c-nickname);
    border: 0;
    border-radius: .5em;
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .25);
    color: #fff;
    padding: .75em 1em;
    box-sizing: border-box;
    width: 15em;
    font-size: 10em;
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.542);
}

.lobby-nickname::-moz-selection {
    background-color: #9a8fef;
}

.lobby-nickname::selection {
    background-color: #9a8fef;
}

.start-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 26em;
    width: 5.8em;
    height: 2em;
    margin: 0;
    border: 0;
    border-radius: .25em;
    color: white;
    background-color: var(--c-button);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.2em 0em rgb(61 134 19), 0 0.2em 0.5em #000000;
}

.start-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.1em 0em rgb(61 134 19), 0 0.2em 0.5em #000000;
}

.lobby-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0;
    border: 0;
    padding: 0.5em 1em;
    border-radius: .25em;
    font-size: 10.4em;
    color: #edeaf3;
    background-color: var(--c-button-sub);
    box-shadow: 0 0.4em 0em rgb(81, 128, 54), 0 0.4em 0.5em #000000;
}

.lobby-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em 0em rgb(61 134 19), 0 0.4em 0.5em #000000;
}


.homepage-sub-buttons {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    width: 149em;
}

.homepage-sub-buttons.shrink-size {
    width: -moz-fit-content;
    width: fit-content;
}

.room-display-page {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    animation: scaleup .3s cubic-bezier(.25, 0, 0, 1);
    background: transparent;
    border-radius: .5rem;
    box-sizing: border-box;
    max-width: 564px;
    padding-bottom: 2rem;
    width: calc(100vw - 2rem);
    position: relative;
    z-index: 10;

}

@keyframes scaleup {
    0% {
        opacity: 0;
        transform: scale(.875);
    }

}

.room-display-head {
    display: flex;
    width: 80%;
    justify-content: end;
}

.refresh-rooms {
    align-items: center;
    justify-content: center;
    display: none;
    border-radius: 0.5em;
    color: white;
    background-color: transparent;
    border-width: medium;
    border-color: rgb(255 255 255 / 64%);
    height: 2rem;
    width: 2rem;
}

.refresh-rooms svg {
    width: 100%;
    height: 100%;
}

.room-banners {
    flex-direction: column;
    width: 80%;
    display: flex;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: scroll;

}

.room-banner {
    padding: 0 1rem;
    font-size: 1rem;
    background: var(--c-g-panel);
    border-radius: .5rem;
    color: #d4cde5;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1;
    transition: .2s;
}

.room-banner:hover {
    filter: brightness(1.5);
}

.room-id {
    align-items: flex-start;
    flex-grow: 1;
    flex-wrap: wrap;
    padding: 1em 0;
    text-align: start;
}

.room-Players {
    margin: 0 1rem;
}

.room-started {}

.room-display-modal {
    background: rgba(0, 0, 0, .75);
    position: fixed;
    inset: 0;
    z-index: 2;
}

.feedback-page-link {
    bottom: 1em;
    position: absolute;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #ffffff8f;
    font-size: var(--grid-em);
    white-space: nowrap;
}

.feedback-page-link svg {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

.feedback-page-link:hover {
    filter: brightness(1.2);
}

.head {
    height: -moz-fit-content;
    height: fit-content;
    width: 1080px;
    max-width: 98vw;
    z-index: 40;
    display: flex;
    flex-direction: row-reverse;
    margin: 1rem 0;
}

.head-elment {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: calc(1.5* var(--grid-em));
    width: calc(5* var(--grid-em));
}

.login-icon svg {
    height: calc(1.5* var(--grid-em));
    width: calc(1.5* var(--grid-em));
}

.login-text {
    display: flex;
    padding-bottom: 3px;
    height: 100%;
    font-size: 18px;

    color: #baafd4cc;
}

.login-icon {
    color: #baafd4cc;
    display: flex;
}

.head .language {
    font-size: 13em;
    background: #1e5c79;
    border-radius: 0.5em;
    padding: 0 0.6em;
    opacity: 0.7;
}

.head .language svg path {
    transition: 0.2s;
}

.language.zh svg path:first-child {
    fill: white;
}

.language.zh svg path:last-child {
    fill: rgba(152, 152, 152, 0.789);
}

.language.en svg path:first-child {
    fill: rgba(152, 152, 152, 0.789);
}

.language.en svg path:last-child {
    fill: white;
}

.modal {
    position: fixed;
    inset: 0;
    background: #0000004d;
    backdrop-filter: blur(5px);
}

.mode-choose-top {
    width: 240px;
    max-width: 100vw;
    padding: 40px 10px;
    background: #130f1d;
    border-radius: 8em;
    box-shadow: 0 0 5em #000;
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    align-items: center;
    height: fit-content;
    min-height: 16rem;
    max-height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: transform .2s;
    z-index: 500;
}

.mode-choose-icon {
    position: absolute;
    right: 100%;
    top: 50%;
    translate: -5px -50%;
    color: #aba6d4;
    margin-right: 5px;
    scale: 1.6;
}

.mode-choose-bar {

    width: 90%;
    display: flex;
    margin: 0.3rem 0.5rem;
    height: 2.4rem;
    background-color: #5d47b8;
    border-radius: 10px;
    font-size: calc(0.8 * var(--grid-em));
    border: 0;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
}

.in-room-alert {
    color: #b86950 !important;
    background-color: currentColor !important;
    box-shadow: 0 0 2em currentColor !important;
}

.in-room-alert .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0;
    width: 100%;
}

.in-room-alert .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #09220acc;
    border-radius: 50%;
    margin-right: 0.8em;
    opacity: 0.5;
    height: 2.2em;
    aspect-ratio: 1;
    animation: backForth 1s ease 0s infinite normal none;
}

@keyframes backForth {
    0% {
        transform: translate(12%);
        animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
    }

    50% {
        transform: translate(-4%);
        animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
    }

    100% {
        transform: translate(12%);
    }
}

.in-room-alert .icon svg {
    width: 56%;
    margin-left: 0.1em;
}

.in-room-alert .fa-secondary {
    fill: #c2c2c2c7
}

.in-room-alert .fa-primary {
    fill: #fefefe
}

.in-room-alert-text {
    color: #ffffffb8;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
}

.in-room-alert-text span {
    background-color: #134a148c;
    border-radius: 0.2em;
    padding: 0.15em 0.25em;
    margin: 0 0.2em;
}

.contact-link {
    z-index: 30;
    display: flex;
    flex-direction: row;
    gap: 0.4em;
    bottom: 1em;
    position: absolute;
    text-decoration: none;
    opacity: 0.7;
    color: #baafd4;
    font-size: var(--window-em);
    white-space: nowrap;
}

.contact-link::before {
    content: "";
    position: absolute;
    inset: -1em;
    background:
        radial-gradient(120% 60% at center,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.5) 40%,
            rgba(0, 0, 0, 0.0) 70%);
    filter: blur(6px);
    z-index: -1;
}

.contact-link a {
    color: inherit;
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.contact-link a svg {
    width: 1em;
    margin-right: 0.2rem;
    fill: #baafd4cc;
}

.players-group {
    padding: 3em;
    font-size: 10em;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: black;
    border-radius: 2em;
    box-shadow: 0em 0em 4em 3em #000000;
}

.players-group .qq {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.players-group .qq img {
    width: 1.5em;
    height: 1.5em;
}

.players-group .wechat {}

.players-group>img {
    width: 8em;
    height: 8em;

}

.lobby-update {
    font-size: medium;
    z-index: 150;
    position: absolute;
    max-width: 80%;
    width: 400px;
    top: 10%;
    overflow-y: scroll;
    height: 80%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;

}


@media (max-width: 600px) {
    .head-elment {
        height: -moz-fit-content;
        height: fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding-right: 0.5rem;
    }

    .login-icon svg {
        height: 1.5rem;
        width: 1.5rem;
    }

    .login-text {
        font-size: 18px;
    }

    .logout-button {
        height: 1rem;
        width: 1rem;
        font-size: 1rem;
    }



    .skyline img {
        opacity: 1;
    }



}

/* CSS: floating effect */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}
@media (min-width: 600px) {
    .hover-scaleup:hover {
        scale: 1.2;
    }
}

.h-divider {
    height: 0;
    border-top: solid 1px rgba(255, 255, 255, 0.388);
}

.v-divider {
    width: 0;
    border-left: solid 1px rgba(255, 255, 255, 0.388);
}

.hover-shine:hover {
    filter: brightness(1.2);
}

.hover-rotate:hover {
    transform: rotate(90deg);
}

.highlight {
    filter: brightness(1);
}

.gradient2Sides {
    background-image: linear-gradient(135deg, #fff3, #ffffff1f 12%, #ffffff0a 50%, #ffffff14 83%, #fff3);
}

.gradientLeft {
    background-image: linear-gradient(135deg, #fff6, #ffffff12);
}

.gradientLeftSmall {
    background-image: linear-gradient(135deg, #fff3, #ffffff1f 20%, #ffffff12);
}

.glow {
    box-shadow: 0 0 5px currentColor, 0 0 20px currentColor;
}

.shadow {
    box-shadow: 0 0.3em 0.5em #130f1d;
}

.shadow-1 {
    box-shadow: 0em 0em 0.5em #130f1d;
}

.shape-shadow {
    filter: drop-shadow(black 0px 0px 0.5em) drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 0.75em);
}

.shape-shadow-b0 {
    filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 0.8em);
}

.shape-shadow-b1 {
    filter: drop-shadow(rgba(0.5, 0.5, 0.5, 0.5) 0px 0px 0.3em);
}

.shape-shadow-w0 {
    filter: drop-shadow(rgba(255, 255, 255, 0.8) 0px 0px 0.8em);
}

.ellipse-shadow {
    background-image: radial-gradient(transparent 50%, rgb(0 0 0 / 56%) 100%);
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.button-press {}

.button-press:active {
    transform: translate(2px, 2px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.disableB {
    filter: brightness(0.5);
    pointer-events: none;
}

.invisible {
    visibility: hidden !important;
}

.absolute-left {
    position: absolute !important;
    left: 0 !important;
    translate: -100% 0 !important;
}

.absolute-overlay {
    position: absolute !important;
    inset: 0 !important;
}

.absolute-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    translate: -50% -50% !important;
}

.hide {
    display: none !important;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes scaling {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.scaling {
    animation: scaling 3s ease-in-out infinite;
}

@keyframes emerge-scale-move {
    0% {
        opacity: 0;
        transform: scale(0.875) translateY(10px);

    }

}

.emerge-scale-move {
    animation: emerge-scale-move 0.25s linear;
}

@keyframes emerge-scale-move-30px {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }

    70% {
        transform: scale(0.95) translateY(5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-scale-move-30px {
    animation:
        emerge-scale-move-30px 0.5s ease-out forwards,
        disappear 0.5s ease-in 1s forwards;
}

@keyframes disappear {
    0% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }
}

@keyframes emerge-scale-from-dark {
    0% {
        filter: brightness(0);
        opacity: 0;
        transform: scale(0.875) translateY(10px);

    }

}

.emerge-scale-from-dark {
    animation: emerge-scale-from-dark 0.25s linear;
}

@keyframes emerge-scale {
    0% {
        opacity: 0;
        scale: 0.875;
    }

}

.emerge-scale {
    animation: emerge-scale 0.25s linear;
}

@keyframes emerge {
    0% {
        opacity: 0;
    }
}

.emerge {
    animation: emerge 0.25s linear;
}

@keyframes popup-bounce {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(0.5em);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-0.25em);
    }

    70% {
        transform: scale(0.95) translateY(0.125em);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-popup {
    animation: popup-bounce 0.5s ease-out;
}

@keyframes popup-bounce-2 {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50%);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-25%);
    }

    70% {
        transform: scale(0.95) translateY(10%);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-popup-adaptive {
    animation: popup-bounce-2 0.5s ease-out;
}

@keyframes popup-bounce-1 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    50% {
        opacity: 1;
        transform: translateY(-10px);
    }

    70% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

.emerge-popup-no-scale {
    animation: popup-bounce-1 0.5s ease-out;
}

.smash-in {
    animation: smash-in 0.6s ease-out
}

@keyframes smash-in {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    20% {
        transform: scale(1.3);
        opacity: 1;
    }

    35% {
        transform: scale(0.95) translateY(-5%);
    }

    50% {
        transform: scale(1.05) translateY(2.5%);
    }

    65% {
        transform: scale(1) translateY(-1.3%);
    }

    80% {
        transform: scale(1) translateY(0.6%);
    }

    90% {
        transform: scale(1) translateY(-0.3%);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.anime-expand {
    animation: anime-expand 0.125s ease-in
}

@keyframes anime-expand {
    0% {
        transform: scale(0, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}
.light-rays-container {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.button-highlight {
    display: block;
    background-image: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .25) 80%, transparent);
    bottom: 0;
    left: -200%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(-20deg);
    width: 200%;

    animation: slidein 3s infinite;
}

@keyframes slidein {
    0% {
        left: -200%;
    }

    100% {
        left: 200%;
    }
}


.button {
    box-shadow: 0 0.5em 1em #000000cf;

    justify-content: center;
    cursor: pointer;

    overflow: hidden;
    align-items: center;
    background: var(--c-g-button);
    /* background-image: linear-gradient(to top left, #6647e0, #8c47e0); */
    border: 0;
    border-radius: .25em;
    color: #fff;
    display: inline-flex;
    position: relative;
    transition: filter 1s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    word-break: break-word;

    padding: 0;
    font-size: calc(0.85 * var(--game-em));
    height: calc(2 * var(--grid-em));
    width: calc(5 * var(--grid-em));

    writing-mode: horizontal-tb;
    margin: 0 calc(0.5 * var(--grid-em));
    line-height: 0;
}

.button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em 1em #000000cf;
}

.button.volume {
    box-shadow: 0 0.4em #278a64, 0 0.2em 0.5em #000000;
}

.button.volume:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em #278a64, 0 0.2em 0.5em #000000;
}

.button svg {
    width: 1rem;
    margin: 0 0.2rem;
    fill: white;
}

.button:not(.disableB):hover {
    filter: brightness(1.2)
}


.start-game {
    font-size: calc(2 * var(--grid-em));
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.button-progress {
    position: absolute;
    height: 100%;
    left: 0;

    background: black !important;
    mix-blend-mode: saturation;
    z-index: 999;
}

.match-button-progress.disableB {
    background: grey;
}


.popup-button {
    overflow: hidden;
    margin: 0;
    box-shadow: none;
    font-size: calc(0.8 * var(--grid-em));
    width: 5.8em;
    height: 2.6em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background: var(--c-g-button);
    border-radius: 0.2em;
    color: white;
    cursor: pointer;
}

.end-tooltip {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.popup-lvlb:hover {}

.popup-lvlb:not(.disableB):hover {
    filter: brightness(1.2)
}

.button-alert-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.no-money-alert {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    top: -50%;
    left: calc(50% + 0.5rem);
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: calc(0.8 * var(--grid-em));
    color: #fefefe;
    opacity: 0;
}

.no-money-alert-on {
    animation: disappear 1s;
}

@keyframes disappear {

    from,
    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.transparent {
    opacity: 0.01;
    pointer-events: none;
}

.start-button-align-margin {
    margin-right: 0.2rem;
}

.startb-tooltip {}

.invite-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--grid-em)
}

.invite-text {
    text-align: center;
    font-size: 1em;
    margin-bottom: 0.5em;
    color: #ffffffe1;
}

.invite-link {
    border: none;
    border-radius: 0.5em;
    background-color: #ffe0d8;
    color: black;
    padding: 0.5em 0em 0.5em 1em;
    font-size: 1em;
    width: 12.8em;
    box-sizing: border-box;
    outline: none;
}

.invite-link:focus {
    outline: none;
    /* Ensures no outline appears on focus */
    box-shadow: 0 0 0 2px #ff9e8c;
    /* Optional: Add a custom focus style */
}

.invite-link-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.invite-button {
    box-shadow: 0 .2em .5em #503f7a;

    justify-content: center;
    cursor: pointer;

    overflow: hidden;
    align-items: center;
    background-color: #20da84;
    background-image: linear-gradient(to top left, #6647e03f, #8c47e030);
    border: 0;
    border-radius: .25em;
    color: #fff;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    word-break: break-word;

    padding: 0;
    font-size: 0.9em;
    height: calc(2 * var(--grid-em));
    width: calc(5 * var(--grid-em));

    writing-mode: horizontal-tb;
    margin-left: 0.6em;
}

.robot-disableB {
    pointer-events: none;
}


.auction-button svg {
    height: 20px;
    aspect-ratio: 1;
}

.button-progress-bar {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #4a258b;
    /* linear-gradient(to right, #7147e0, #6327a3); */
    z-index: 0;
}

@keyframes growBar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}




.button .button-highlight {
    display: none !important;
    /* hides the original highlight */
}

@keyframes buttonFlicker {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.0);
    }

    50% {
        box-shadow: 0 0 0.4em 0.4em rgba(255, 255, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.0);
    }
}

.button.end.flicker::before {
    animation: buttonFlicker 1s ease-in-out;
}

.button.end {
    overflow: visible !important;
}

.button.end::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    /* 初始无光 */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}


@media (max-width: 600px) {
    .center-button-container .button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    .center-button-container .button svg {
        width: 0.8rem;
        margin: 0 0.2rem;
        fill: white;
    }

    .accept .button {
        font-size: 0.9rem;
        width: 5rem;
        height: 2rem;
    }

    .gameover-buttons .gameover-button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    .popup-button {
        font-size: calc(1 * var(--grid-em));
        width: 6.5em;
        height: 2.8em;
    }

}
.board {
    z-index: 10;
    width: 100vw;
    height: calc(100*var(--vh));
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    align-items: center;
}

.background-image {
    position: fixed;
    inset: 0;
    background-color: var(--c-g-background);
    /* background-image: url("../resource/pics/lobby_background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

.play-area {
    position: absolute;
    translate: -50% -50%;
    top: calc(50*var(--vh));
    left: 50vw;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    align-content: center;
    justify-items: center;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 10;
}

/* city and bar */
.city-destroied {
    animation: shake-and-implode 1s ease-out forwards;
    /* 1s for fast effect */
    transform-origin: center;
}

@keyframes shake-and-implode {

    /* --- Phase 1: The Shake (0% to 80%) --- */
    /* Shake quickly with fast rotation */
    0% {
        transform: rotate(0deg) scale(1);
    }

    6% {
        transform: rotate(-10deg) scale(1);
    }

    12% {
        transform: rotate(10deg) scale(1);
    }

    18% {
        transform: rotate(-8deg) scale(1);
    }

    24% {
        transform: rotate(8deg) scale(1);
    }

    30% {
        transform: rotate(-6deg) scale(1);
    }

    36% {
        transform: rotate(6deg) scale(1);
    }

    42% {
        transform: rotate(-6deg) scale(1);
    }

    48% {
        transform: rotate(6deg) scale(1);
    }

    54% {
        transform: rotate(-4deg) scale(1);
    }

    60% {
        transform: rotate(4deg) scale(1);
    }

    66% {
        transform: rotate(2deg) scale(1);
    }

    72% {
        transform: rotate(2deg) scale(1);
    }

    78% {
        transform: rotate(2deg) scale(1);
    }

    84% {
        transform: rotate(2deg) scale(1);
    }

    /* --- Pause for Suspense (80% to 90%) --- */
    90% {
        transform: rotate(2deg) scale(1);
        /* Keep the shake state */
    }

    /* --- Phase 2: The Sudden Implosion (90% to 100%) --- */
    100% {
        transform: rotate(0deg) scale(0);
        /* Collapse to the center */
    }
}


.board-grid {
    --volume-c: #14333d;
    --volume-c-l: color-mix(in srgb, currentColor, black 50%);
    --volume: 0.5em;
    block-size: 100%;
    min-inline-size: 100%;
    inline-size: 0;
    box-sizing: border-box;

    align-items: center;
    backdrop-filter: blur(3px) saturate(1.1);
    background-color: var(--grid-background);
    /* background-image: radial-gradient(circle, transparent, rgb(141 195 183 / 31%) 200%); */
    border-radius: .5em;
    box-sizing: border-box;
    color: #45ddff;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    font-size: calc(0.7 * var(--grid-em));
}

.board-grid.app {
    font-size: calc(0.4 * var(--grid-em));
    --volume: 1em
}

@media(orientation: portrait) {
    .board-grid {
        justify-content: initial;
        font-size: calc(0.6 * var(--grid-em));
    }
}

.top .board-grid:not(.layout-corner) {
    box-shadow: 0 var(--volume) var(--volume-c);
}

.top .board-grid.buyable-color:not(.layout-corner) {
    box-shadow: 0 var(--volume) var(--volume-c-l);
}

.left .board-grid:not(.layout-corner) {
    box-shadow: var(--volume) 0 var(--volume-c);
}

.left .board-grid.buyable-color:not(.layout-corner) {
    box-shadow: var(--volume) 0 var(--volume-c-l);
}

.right .board-grid:not(.layout-corner) {
    box-shadow: calc(-1 * var(--volume)) 0 var(--volume-c);
}

.right .board-grid.buyable-color:not(.layout-corner) {
    box-shadow: calc(-1 * var(--volume)) 0 var(--volume-c-l);
}

.bottom .board-grid:not(.layout-corner) {
    box-shadow: 0 calc(-1 * var(--volume)) var(--volume-c);
}

.bottom .board-grid.buyable-color:not(.layout-corner) {
    box-shadow: 0 calc(-1 * var(--volume)) var(--volume-c-l);
}

@media(orientation: portrait) {
    .board-grid {
        justify-content: initial;
    }
}

.board-grid * {
    font-weight: 400;
}

.board-grid.tax,
.board-grid.surprise,
.board-grid.auction,
.board-grid.bank {
    justify-content: space-evenly;
}

.board-grid .toll {
    color: white;
    z-index: 10;
    background-color: #000000ab;
    border-radius: 0.4em;
    line-height: 0.8;
    padding: 0.3em;
}

.board-grid .price {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #00000036;
    border-radius: 0.5em;
    color: white;
    line-height: 0.8;
    padding: 0.4em 0.4em;
    z-index: 10;
}

@media (orientation: landscape) {

    .top .board-grid .price,
    .top .city .icon {
        margin-bottom: 1.2em;
    }

    .bottom .board-grid .price,
    .bottom .city .icon {
        margin-top: 1.2em;
    }

    .right .board-grid .price,
    .right .city .icon {
        margin-left: 1.2em;
    }

    .left .board-grid .price,
    .left .city .icon {
        margin-right: 1.2em;
    }
}
@media (orientation: portrait) {

    .top .city .icon {
        margin-bottom: .4em;
    }

    .bottom .city .icon {
        margin-top: .4em;
    }

    .right .city .icon {
        margin-left: .4em;
    }

    .left .city .icon {
        margin-right: .4em;
    }
}
@media (orientation: portrait) {
    .board-grid .price {
        margin: 0.3em;
    }
}

.board-grid .name {
    z-index: 10;
    color: #000000c4;
}

.city-background {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    filter: brightness(0.8);
}

.ctiy .name {
    display: flex;
    font-size: calc(0.7 * var(--grid-em));
    justify-content: center;
    align-items: center;
    block-size: 20%;
    z-index: 5;
    filter: drop-shadow(0 0 .1em #000000a8);
    padding: 2px;
    font-weight: 100;
}

.nonCity-name {}

.passive-name {
    color: grey
}

.hide-city-name {
    opacity: 0;
}

.city-halo {
    z-index: 999;
}

.city-halo::before {
    content: "";
    position: absolute;
    inset: 0;
    color: inherit;
    border-radius: inherit;
    animation: halo 3s;
    box-shadow:
        0 0 3em 0.25em
}

@keyframes halo {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.national-flag-container {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #010323;

    inset: 0;
    position: absolute;
    border-radius: inherit;
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    right: 0;
    top: 0;
    z-index: 0;
}

.show-flag {
    filter: blur(0px);
    opacity: 0.2;

}

.national-flag-container img {
    flex-shrink: 0;
    width: 150%;
    opacity: 0.6;
    filter: blur(4px);
}

.board-grid.energy,
.board-grid.airport {}

.city .icon {
    z-index: 10;
    width: 2em;
    height: 2em;
}

.city .icon svg {
    width: 100%;
    height: 100%;
}

.energy .icon,
.airport .icon {
    display: flex;
    color: white;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: 0.5s;
    padding: 0.2em;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.top .energy .icon,
.bottom .energy .icon,
.top .airport .icon,
.bottom .airport .icon {
    max-width: calc(0.7*var(--board-unit));

}

.right .energy .icon,
.left .energy .icon,
.right .airport .icon,
.left .airport .icon {
    max-height: calc(0.7*var(--board-unit));

}

.top .airport svg {
    rotate: 180deg !important;
}

.right .airport svg {
    rotate: 0deg !important;
}

.bottom .airport svg {
    rotate: 0deg !important;
}

.left .airport svg {
    rotate: 0deg !important;
}


.tax .icon,
.auction .icon,
.bank .icon,
.surprise .icon {
    display: flex;
    block-size: 50%;
    inline-size: 100%;
    justify-content: center;
    align-items: center;
}

.auction .icon img {
    inline-size: 86%;

}

.tax .icon svg {
    inline-size: 50%;
    block-size: 70%;
}

.bank .icon img,
.surprise .icon img {
    inline-size: 56%;
}

@media (orientation: landscape) {
    .auction .icon img {
        inline-size: 66%;

    }

    .tax .icon svg {
        inline-size: 50%;
        block-size: 70%;
    }

    .bank .icon img,
    .surprise .icon img {
        inline-size: 46%;
    }
}

.tax.icon {
    filter: drop-shadow(rgba(240, 240, 240, 0.5) 0px 0.25em 0.5em);
}

.icon.question {
    filter: drop-shadow(rgba(255, 149, 188, 0.5) 0px 0.25em 0.5em);
}

.bank.icon {
    filter: drop-shadow(rgba(243, 223, 6, 0.5) 0px 0.25em 0.2em);
}

.auction.icon {
    scale: 1.5;
    filter: drop-shadow(rgba(243, 109, 6, 0.5) 0px 0.25em 0.2em);
}

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

/**
 * 为顶级城市添加一个黑色、缓缓脉动的光晕动画
 */
.lvl-change-anime.top {
    /* animation: top-level-glow 5s ease-in-out infinite; */
}

@keyframes top-level-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgb(10, 27, 42));
    }

    50% {
        filter: drop-shadow(0 0 4px rgb(222, 206, 26));
    }
}

.lvlUp {
    animation: lvlUpAnimation 2s;
}

.lvlDown {
    animation: lvlDownAnimation 0.5s ease-in-out;
}

@keyframes lvlUpAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    5% {
        transform: scale(1.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes lvlDownAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.symbol-opaque {
    opacity: 1;
    filter: contrast(1.5);
}

.transparent {
    color: #00000000;
}

.hide {
    display: none;
}

.house-lvl {
    font-size: calc(0.7 * var(--grid-em));
    position: absolute;
    z-index: 10;
    filter: drop-shadow(0 0 .1em #000000a8);

}


.city-owned-flag {
    display: block;
    block-size: 35%;
    inline-size: 0;
    min-inline-size: 50px;
    border-radius: inherit;
}

.left .board-grid {
    writing-mode: vertical-rl;
}

.right .board-grid {
    writing-mode: vertical-rl;
    flex-direction: column-reverse;
}

.top .board-grid {
    flex-direction: column-reverse;
}

.bottom .board-grid {}

.city-alert {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    background-image: linear-gradient(to top left, #e5561a, #e0bc47);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 23px 10px 10px;
    border: none;
    max-width: 100px;
    z-index: 10;
}

.PopoverClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: -5px;
    border: none;
    background: none;
    z-index: 999;
}

.PopoverClose svg {
    width: calc(1.6 * var(--grid-em));
    height: calc(1.6 * var(--grid-em));
    color: white;
}

.city-popup {
    position: relative;
    display: grid;
    z-index: 501;
    background-color: #38a7ca;
    border-radius: .5em;
    box-shadow: 0 0 4em -1.5em #000, 0 0 .5em rgba(0, 0, 0, .25);
    color: #fff;
    grid-auto-flow: row;
    gap: 10px;
    padding: 1em;
    font-size: calc(0.8 * var(--grid-em));
    writing-mode: horizontal-tb;
    border: none;
    justify-items: center;
}

.city-popup-arrow {
    fill: #309bc2;
    transform: translateY(-1px)
}


.popup-city-top {
    top: 100%;
}

.popup-city-bottom {
    bottom: 100%;
}

.popup-city-left {
    left: 100%;
}

.popup-city-right {
    right: 100%;
}

.popup-lvl {
    display: grid;
    grid-template:
        'd a'
        'c b';
    gap: 1em;
    justify-content: space-evenly;
    justify-items: center;
    z-index: 20;
}

.popup-lvl .a {
    grid-area: a;
}

.popup-lvl .b {
    grid-area: b;
}

.popup-lvl .c {
    word-break: break-all;
    grid-area: c;
    background-image: linear-gradient(to bottom, #36b986, #c00b0b54);
}

.popup-lvl .d {
    grid-area: d;
}

.popup-bottom {
    display: grid;
    grid-auto-flow: row;
    gap: 0.5em;
    justify-content: space-evenly;
}

.city-info-cost {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    position: relative;
}

.city-info-cost .h-divider {
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
}

.buy-sell-cost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 4.2em;
}

.buy-cost-adjust {}

.popup-info {
    gap: 0.5em;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
    margin-top: 1em;
}

.non-city-info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    white-space: pre-wrap;

}

.non-city-info .grid {
    display: grid;
    grid-template-columns: auto auto;
}

.non-city-info .grid .content {
    max-width: 8em;
    margin: 2px 0;
    justify-self: start;
    text-align: left;
}

.non-city-info .grid .title {
    justify-self: end;
}

#popup-0 .icon {
    rotate: 180deg;
}


#popup-5 .icon,
#popup-15 .icon,
#popup-25 .icon,
#popup-35 .icon {
    rotate: 90deg;
}

.popup-info-up {}

.popup-info-bottom {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--c-g-light-text);
    border: 1px 0 0 0;
}

.popup-top {}

.popup-tail {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333;
}

.bar {
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
}

.board-grid .energy img {
    width: 160%;
    height: 160%;
    padding-left: 0.7em;
}

.left .energy img {}

.left svg {
    transform: rotate(90deg);
    width: 100%;
    height: 100%;
}

.left img {
    transform: rotate(90deg);
}

.left .house-lvl {
    right: 35%;
    top: 18%;
}

.top .house-lvl {
    top: 35%;
    right: 18%;
}

.right svg {
    transform: rotate(270deg);
}

.right img {
    transform: rotate(270deg);
}

.right .house-lvl {
    rotate: 180deg;
    left: 35%;
    top: 18%;
}


.center {
    width: calc(var(--board-unit) * var(--board-unit-num));
    height: calc(var(--board-unit) * (18 - var(--board-unit-num)));
    box-sizing: border-box;

    display: grid;
    grid-template-rows: 35% 6% 14% 45%;
    justify-items: center;

    border-radius: .5em;
    background-color: var(--c-g-center);
    box-shadow:
        inset 0 0 1em rgb(0 0 0 / 24%), inset 0 0 2em rgb(141 234 251 / 46%);

    position: relative;
}


.bottom .house-lvl {
    top: 35%;
    right: 18%;
}

.dice-container {
    justify-content: center;
    color: rgba(244, 224, 4, 0.75);
    margin-bottom: calc(1 * var(--grid-em));
    z-index: 100;
}


.center-button-container {

    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-button-left {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

.center-button-mid {
    display: flex;
    justify-content: space-around;
    position: relative;
    align-items: center;
}

.center-button-right {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

.center-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(0.8 * var(--grid-em));
    width: 90%;
    text-align: center;
}

.notice-full-screen-container {
    background-color: #00000080;
    box-shadow: 0 0 60px black;
    z-index: 520;
    box-sizing: border-box;
    border-radius: 0.5rem;
    position: absolute;
    max-width: 100%;
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
    padding: calc(3 * var(--grid-em));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    animation: show 0.2s;
}

@keyframes show {
    0% {
        opacity: 0;
    }

}

.close-button {
    height: 3em;
    width: 3em;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #2d86a2;
    transition: .2s;
    position: absolute;
    right: 0;
    top: 0;
}

.close-button:hover {
    transform: rotate(90deg);
}

.close-button svg {
    width: 100%;
    height: 100%;
}

.notice-full-screen {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: calc(1 * var(--grid-em));
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* 优化移动端滚动体验 */
    padding: 0 3em;

    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}


.center-bottom {
    font-size: calc(0.023*var(--center-w));
    margin: 0.6em 0;
    border-radius: 1.2rem;
    width: 94%;
    display: grid;
    grid-template-columns: 49% 2% 49%;
    background-color: #144b62e8;
    align-items: center;
    position: relative;
    border: 1px solid #ffffff0f;
    border: 0.2em solid #daf7fc;
    box-shadow: inset 0 0 0.5em #1bcafb80, inset 0 0 2.1em #ffffff, 0 0 1.1em #02daff, 0 0 2.1em #ffffff;
}

@media (orientation: portrait) {
    .center-bottom {
        box-shadow: inset 0 0 0.5em #1bcafb80, inset 0 0 2.1em #ffffffad, 0 0 1.1em #02daff80, 0 0 2.1em #ffffff87;
    }
}

.center-bottom-divider {
    transform-origin: top;
    width: 1px;
    height: 70%;
    border: none;
    background-color: #ffffff14;
    justify-self: center;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.center-bottom-divider-shrink {
    transform-origin: top;
    scale: 0.9;
}

.dashb {
    position: relative;
    justify-items: center;
    height: 100%;
    padding: 1em;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    overflow: hidden;
    box-sizing: border-box;
}


.info-trade {
    width: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.info-banner {
    box-sizing: border-box;
    height: 2.8rem;
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0.3em 0.5em;
    border-radius: calc(0.4 * var(--grid-em));
    position: relative;
    flex: none;
}

.info-banner.background-color {
    background-color: #aeaab730;
}

.info-banner.trade-info-bannner {
    background-color: #aeaab714;
}

.info-banner-click-region {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    width: 0;
    height: 100%;
    border-radius: inherit;
    position: relative;
    z-index: 10;
}

.player-banner-dropdown {
    transform-origin: right;
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: end;
    background-color: #54576c;
    border-radius: inherit;
    animation: flyFromRight 0.5s ease-in-out;
    z-index: 10;
}

@keyframes flyFromRight {
    0% {
        transform: translate(100%, 0);
    }
}

.player-banner-dropdown .button {
    box-shadow: none;
    font-size: calc(0.8 * var(--grid-em));
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: calc(0.5 * var(--grid-em));
    background-image: linear-gradient(45deg, #9b3e3e, #ba763d);
}

.player-banner-dropdown .button:hover {
    background-image: linear-gradient(45deg, #9b3e3e, #ba763d);
}

.disable-vote-kick {
    filter: brightness(0.5);
}

.player-banner-dropdown-modal {
    position: fixed;
    inset: 0;
}

@keyframes soft-blink {
    0% {
        border-color: #ffffff10;
    }

    50% {
        border-color: #ffffff54;
    }

    100% {
        border-color: #ffffff10;
    }
}

.highlightt::before {
    content: '';
    inset: 0;
    position: absolute;
    border-radius: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff63;
    animation: soft-blink 1.5s ease-in-out infinite;
    transition: border-color 0.5s;
}

.trade-info-bannner {}

.trade-info-bannner:hover {
    background-color: #ffffff66;
}

.player-bannner-icon {
    display: flex;
    transition: 0.5s;

}

.player-bannner-icon>svg {
    width: calc(2 * var(--grid-em));
    height: calc(2 * var(--grid-em));
}

.player-bannner-icon .character-container {
    width: 2.5em;
    height: 2.5em;
}

.player-banner-name {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    margin-left: calc(0.5 * var(--grid-em));

}

.main-name {
    transition: 0.5s;
}

.progress-full {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(0.2 * var(--grid-em));
    background-color: rgba(128, 128, 128, 0.63);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    overflow: hidden;
}

.info-bid-progress-bar {
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;

}

.trade-info-mortgage-countdown {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: calc(1 * var(--grid-em));
    font-weight: bold;
    aspect-ratio: 1;
    z-index: 999;
    color: #FFD700;
    text-shadow: 0 0 5px #080808, 0 0 10px #090909, 0 0 15px #000000;
    border-radius: 0.5em;
}

.pay-countdown {
    display: flex;
    width: calc(2* var(--grid-em));
    height: calc(2* var(--grid-em));
    transition: 0.5s;
    position: relative;
}

.pay-countdown svg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.player-banner-kick {
    filter: brightness(0.8);
    transition: .2s;
    z-index: 100;
}

.player-banner-kick:hover {
    filter: brightness(1);
}

.player-banner-money-container {
    position: relative;
    margin-left: 5px;
    flex-grow: 1;
    display: flex;
    justify-content: end;
}

.player-banner-money {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.ondebt-color {
    color: #d92525;
}

.trade-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.4em;
    margin: 0 1em;
    color: white;
}

.trade-arrow svg {
    width: 100%;
    height: 100%;
}

.board-grid.start,
.board-grid.sleep,
.board-grid.auction,
.board-grid.prison {
    padding: 0.5em;
}

.auction .name,
.sleep .name,
.prison .name,
.start .name {
    display: flex;
    justify-content: center;
    font-size: calc(0.8 * var(--grid-em));
    font-weight: 800;
    block-size: unset;
}

.start .icon,
.sleep .icon,
.prison .icon {
    width: 64%;
}

.start img,
.sleep img,
.prison img {
    width: 94%;
}

.board-grid.start svg,
.board-grid.sleep svg,
.board-grid.prison svg {
    width: 100%;
    height: auto;
    transform: rotate(0deg);
}



#grid-0 .name {
    color: rgb(176, 222, 45);
}

#grid-0 .icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

#grid-0 svg {
    rotate: 180deg;
}

.left #grid-0 {
    display: flex;
    flex-direction: column-reverse;
    writing-mode: vertical-rl;
    padding: 3px;
}

#grid-10 .icon {
    transform: rotate(-90deg);
    display: flex;
    justify-content: center;
    align-content: center;
}

#grid-10 .name {
    color: #403d38;
    font-weight: 800;
}

#grid-10 svg {
    transform: rotate(90deg);
}

.right #grid-10 {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    padding: 0;
}

.right #grid-10 .icon {
    height: 70%;
    margin-left: 0.2em;
}

#grid-20 .name {
    color: #00408f;
}

#grid-20 .icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.right #grid-20 {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    padding: 0;
}

.right #grid-20 img {
    rotate: 90deg;
    padding: 3px;
    width: 80%;
}

#grid-30 .name {
    color: #ff8100;
}

#grid-30 .icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.left #grid-30 {
    display: flex;
    flex-direction: column-reverse;
    writing-mode: vertical-rl;
    padding: 3px;
}

.left #grid-30 .icon {
    height: 70%;
}

.your-turn-animation {
    width: 150%;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.your-turn-animation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.759);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: flicker 1.5s;
}


@keyframes flicker {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.character.turn {
    z-index: 999;
}

.turn.flicker .character-container {
    animation: active-pulse 1.5s ease-in-out 2s infinite;
}

@keyframes active-pulse {

    0%,
    100% {
        transform: scale(1.0);
        filter:
            drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter:
            drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.2em white) brightness(1.2);
    }
}

.police-car .character-container {
    scale: 2;
    filter: drop-shadow(0 0 2px black);
    animation: popup-bounce 0.5s ease-out;
    rotate: 90deg;
    border-radius: unset;
}

.character {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
    font-size: calc(var(--board-unit)*0.5);
    position: absolute;
    transition: 500ms;
}

.character .character-container {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
}

.character-scale {
    display: flex;
    animation: scale .2s cubic-bezier(0, 0, 0, 1) 1;
    filter: drop-shadow(0 0 .5em black) drop-shadow(0 0 .75em rgba(0, 0, 0, .25));
    /* transition: transform .2s; */
}

.character-scale .character-container {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
}

@keyframes scale {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}


.stage {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.stage-dim {
    background-color: ##000000bf;
}

/* join */
.join-container {
    width: 100vw;
    height: calc(100*var(--vh));
    align-items: center;
    backdrop-filter: blur(.25em);
    -webkit-backdrop-filter: blur(.25em);
    background: rgba(19, 15, 29, .75);
    border-radius: .5em;
    display: flex;
    justify-content: center;
    transform-origin: top right;
    transition: opacity .2s;
    z-index: 999;

    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    justify-self: center;
}

.choose-container {
    position: absolute;
    top: 10%;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 1em;
    justify-content: center;
    justify-items: center;
    font-size: calc(0.8 * var(--grid-em));
}

@media (orientation: portrait) {
    .choose-container {
        top: 25%;
    }
}

.choose-title {
    display: flex;
    justify-content: center;
}

.choose-roles {
    display: grid;
    gap: .75em;
    grid-template: repeat(3, 1fr)/repeat(4, 1fr);
    margin: 1em;
}

.role-container {
    width: 4em;
    height: 4em;
    background-color: transparent;
    border: 0;
    border-radius: 3em;
    cursor: pointer;
    padding: 0;
    position: relative;
    transform: scale(.75);
    transition: .2s;
    transform-origin: 50% 50%;
}

.role-container .role-default-face {
    display: none;
}

.role-container:hover .role-default-face {
    display: block;
}

.enlarged .role-default-face {
    display: block;
}

.enlarged {
    transform: scale(1.1);
    /* 按钮被点击时放大到110% */
    filter: drop-shadow(0 0 10px currentColor);
}

.accept {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.trade-target-modal {
    background: rgba(0, 0, 0, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.trade-target-panel {
    --my-w: min(calc(0.4 * var(--center-h)), var(--center-w));
    width: var(--my-w);
    font-size: calc(0.07*var(--my-w));
    padding: 1rem;
    border-radius: 0.8em;
    background: var(--c-g-panel);
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 16rem;
    max-height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: transform .2s;
    box-sizing: border-box;

    z-index: 500;
}

.trade-target-title {
    color: #9e8fc5;
    font-weight: 600;
    padding: 0 1rem 1rem;
    text-align: center;
}

.trade-targets {
    position: relative;
    align-items: center;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 50%;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;

}

.player-banner {
    width: 90%;
    display: flex;
    margin: 0.2em 0.6em;
    padding: 0.4em 0.5em;
    height: 3em;
    background: #557685;
    background: linear-gradient(176deg, rgba(85, 118, 133, 1) 0%, rgba(85, 124, 133, 1) 53%, rgba(85, 108, 133, 1) 100%);
    border-radius: inherit;
    border: 0;
    align-items: center;
}


.player-banner .character-container {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.bidding-button-background {
    color: white;

}

.bidding-button-background svg {
    width: calc(1.8* var(--grid-em));
    height: calc(1.8* var(--grid-em));
}

.tenFold-borrow-button {
    background-image: linear-gradient(to top left, #411fc4, #c34bdf);
}

.player-name {
    color: rgb(255, 255, 255);
    align-items: center;
    margin-left: 0.6em;
    text-wrap-mode: nowrap;
    overflow: hidden;

}

.player-banner:hover {
    filter: brightness(1.2);
}

.button.tenFold-borrow-button.bidding-button-background:hover {
    filter: brightness(1.2);
    background-image: linear-gradient(to top left, #411fc4, #c34bdf);
}

.trade-final-panel {
    font-size: calc(0.03*var(--trade-w));
    width: var(--trade-w);
    max-height: min(var(--center-h), calc(2 * var(--center-w)));
    box-sizing: border-box;
    gap: 1em;
    padding: 3em 2em 2em;
    border-radius: 0.8em;
    background: var(--c-g-panel);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: transform .2s;
    z-index: 500;
}

.skill-award-bid {
    background-image: linear-gradient(to top left, #000000, #b63d3d);
    box-shadow: 0 0 20px #e45656, 0 0 40px #e03a3a;
}

.skill-award-bid-button {
    background-image: linear-gradient(to top left, #695d0c, #ffde00);
}

.button.bidding-button-background.skill-award-bid-button:hover {
    background-color: yellow;
    background-image: linear-gradient(to top left, #695d0c, #ffde00);
    filter: brightness(1.2);

}

.trade-fianl-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.trade-fianl-content {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 1em;
}

.trade-final-content-money-cities {
    flex-grow: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 48% 4% 48%;
    width: 100%;
}

.bid-countdown-bar {
    width: 80%;
    height: calc(1* var(--grid-em));
    border-radius: calc(0.5* var(--grid-em));
    background-color: #262a4c;
}

.bid-countdown-bar.award-progress-bar {
    background-color: #c57c7c;

}

.bit-countdown-progress {
    width: 0;
    background-color: yellow;
    height: 100%;
    border-radius: inherit;
}

.final-trade-column {
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: .5em 1em 1.5em;
    gap: 1em;
}

.trade-column-name {
    margin: 0.5rem 0;
    display: flex;
    justify-content: center;

}

.trade-column-money {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    -webkit-appearance: none;
    margin: 0;
}

.auction-column {
    justify-content: center;
}

.auction-money {
    padding: .5em;
}

.mortgage-illustration {
    display: grid;
    grid-template-columns: 5em 5em;
    color: #54576c;
    font-size: 1.2em;
    -moz-column-gap: 1em;
         column-gap: 1em;
}

.mortgage-illustration .left {
    justify-self: end;
    text-align: end;
}

.bidding-name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.bidding-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 calc(0.5* var(--grid-em));
    gap: calc(0.5 * var(--grid-em));
    position: relative;
    width: 100%;
}

.bidding-player .name {
    white-space: nowrap;
    overflow: hidden;

}

.bidding-icon {
    display: flex;
    transition: 0.5s;
}

.bidding-icon .character-container {
    width: 2.08em;
    height: 2.08em;

}

.bidding-preposition {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #54576c;
    font-weight: 500;
    font-size: 1.2em;
    padding: 0.2em 0;

}

.bidding-price {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 900;
    font-size: 2em;
    transition: font-size 0.3s;
}

.mortgagePayTarget-container {
    display: flex;
    flex-direction: column;
    gap: calc(0.2* var(--grid-em));
    align-items: center;
}

.due-round {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: calc(1* var(--grid-em));

}


.trade-column-money .rc-slider-rail {
    background-color: #3f3260 !important;
}

.trade-column-money .rc-slider-track {
    background-color: white !important;
}

.trade-column-money .rc-slider-dot {}

.trade-column-money .rc-slider-mark {}

.trade-column-money .rc-slider-handle {
    opacity: 1;
    border: none !important;
    background-color: #e0ddea;
    box-shadow: 0 0 10px rgb(244 244 244);
}

.trade-column-money .rc-slider-disabled .rc-slider-handle {
    background-color: #6a6182;
    box-shadow: none;

}

.trade-column-money .rc-slider-disabled .rc-slider-track {
    background-color: rgb(144, 144, 144) !important;
}

.trade-column-money .rc-slider-handle:focus,
.trade-column-money .rc-slider-handle:active,
.trade-column-money .rc-slider-handle-dragging {
    box-shadow: 0 0 10px 4px white !important;
    border: none;
}

/* Ensure no glow when disabled and focused/active/dragging */
.trade-column-money .rc-slider-disabled .rc-slider-handle:focus,
.trade-column-money .rc-slider-disabled .rc-slider-handle:active,
.trade-column-money .rc-slider-disabled .rc-slider-handle-dragging {
    box-shadow: none !important;
}

.rc-slider-dot {
    background-color: #3f3260 !important;
    border: 0 !important;
}

.rc-slider-dot-active {
    background-color: white !important;
}

.trade-column-money .rc-slider-disabled .rc-slider-dot-active {
    background-color: rgb(144, 144, 144) !important;
}

.rc-slider-disabled {
    background-color: transparent !important;
}

.money-text {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 1px 0px;
    font-size: 16px;
    width: 100%;
    align-items: center;
    align-self: center;
    font-size: 1em;
    text-align: center;
    border: 0;
    width: -moz-fit-content;
    background-color: transparent;
    width: 3em;
    color: white;
}

.input-symbol {
    color: #adadad;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #308eb5;
    border: none;
    border-radius: 0.8em;
    overflow: hidden;
    height: 1.6em;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 3em;
    max-width: 5em;
    overflow: hidden;
    padding: 0 0.6em;
}


.trade-cities-container {
    position: relative;
    align-items: center;
    flex-direction: column;
    display: flex;
    max-height: calc(50*var(--vh));
    overflow-y: auto;
    overflow-x: hidden;
}

.trade-column-city {
    position: relative;
    align-items: center;
    background: 0 0;
    border: 2px solid hsla(0, 0%, 100%, .1);
    border-radius: .5em;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    line-height: 1em;
    padding: 0.6em;
    text-align: initial;
    transition: .2s;
    width: 100%;
    font-size: 1.2em;
}

@media (min-width: 601px) {
    .trade-column-city:hover {
        background: #d5cbfe99;
    }
}

.disable-trade-city-banner {
    filter: brightness(0.5);
}

.disable-trade-city-banner:hover {
    background: 0 0;
}

.trade-column-city-icon {
    height: 1.2em;
    width: 1.2em;
    margin: 0 0.5em 0 0;
}

.trade-column-city-icon svg {
    width: 100%;
    height: 100%;
}

.trade-column-city-icon img {
    width: 100%;
    height: 100%;
    border-radius: 0.2em;
}

.trade-column-city-icon .energy {
    width: 150%;
    height: 150%;
}

.trade-column-city-name {
    word-break: break-word;
    font-size: 1em;
    flex: 1 0 0;
}

.trade-column-city-price {
    font-size: 1em;

}

.trade-city-highlight {
    background: #6647e0;
    border-color: #6647e0;
    color: #fff
}


.send-trade {
    display: flex;
    justify-content: space-around;
}

.plane-merge {
    animation: emerge-scale 0.5s linear;
}

.plane-adjust {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    z-index: 1;
    filter: drop-shadow(0 0 1px #000000ab);

}

@keyframes emerge-scale {
    0% {
        opacity: 0;
        scale: 0.3;
    }
}

.rotate-reminder {
    color: #3c7c3c !important;
    background-color: currentColor !important;
    box-shadow: 0 0 2em currentColor !important;
    width: 90%;
    margin: 10px auto;
}

.rotate-reminder .inside {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0;
    width: 100%;
}

.rotate-reminder .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.8em;
    height: 2.2em;
    aspect-ratio: 1;
    animation: flick-rotate 1.2s ease-in-out infinite;
    color: rgb(255 255 255 / 67%);
}

@keyframes flick-rotate {

    /* Start position: no rotation */
    0%,
    100% {
        transform: rotate(0deg);
    }

    /* Middle of animation: rotated 90deg clockwise */
    50% {
        transform: rotate(90deg);
    }
}

/* 
.rotate-reminder .icon svg {
    width: 56%;
    margin-left: 0.1em;
} */


.rotate-reminder .text {
    color: #ffffffb8;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
}

.game-toast {
    z-index: 200 !important;
    top: calc((100vh - ((20 - var(--board-unit-num)) * var(--board-unit))) / 2 + var(--board-unit)) !important;

}

.toast-dark-background {
    background: linear-gradient(0deg #425ca4 #304378) !important;
}

@media (max-width: 600px) {

    .center-bottom {
        font-size: calc(0.05*var(--center-w));
    }

    .trade-arrow {
        margin: 0;
    }

    .popup-info {
        font-size: 10px;
    }

    .non-city-info {
        font-size: 10px;
    }

    .info {
        padding: 0 0.2rem;
    }

    .player-banner-money {
        font-size: 0.6rem;
    }


    .info-banner {
        padding: 0 0.2em;
        height: 2.5rem;
    }

    .bidding-button-background svg {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5em;

    }


    .player-banner .character-container {
        margin-left: 0.5em;
    }

    .main-name {
        display: none;
    }

    .choose-title {
        font-size: 1rem;
    }





    .send-trade button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }


    .trade-final-panel {
        padding: 3em 1em 2em;
    }

    .trade-column-city-icon {}

    .trade-fianl-title {
        font-size: 1.8em;
    }

    .trade-column-city {
        padding: 1em 0.6em;
    }

    .trade-column-name {
        font-size: 1.2em;
    }

    .center {
        grid-template-rows: 35% 6% 19% 40%
    }

    .center-button-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        gap: 5px
    }


    .player-bannner-icon>svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .city-popup {
        max-width: 12rem;
    }

    .background-image {
        background-repeat: repeat;
        background-size: 270px;
        background-position: top left;
        filter: blur(2px);
    }

}

@media (max-height: 561px) {

    .center-button-container {
        margin-top: 0;
    }
}
.dice-container {

    position: relative;
    display: flex;
    font-size: calc(1 * var(--grid-em));
}

.camera {
    transform-style: preserve-3d;
    transform: rotateX(59deg) rotateZ(45deg) rotateY(0);
}

.dice-shadow {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    width: 10em;
    height: 1em;
    background: radial-gradient(ellipse at center, rgb(85 31 31), rgb(72 33 33));
    border-radius: 50%;
    filter: blur(0.5em);
    transform-style: preserve-3d;
    z-index: -1;
}

.jump-container {
    --color: rgb(255, 173, 173);
    display: flex;
    justify-content: center;
    align-items: end;
    transition: 1s cubic-bezier(0, 0, 0, 1);
    color: #c53c44;
}
.jump-container.invisible {
    display: none;
}
/* 金黄色闪烁光晕效果 */
@keyframes glow-effect {
    0% {
        filter: drop-shadow(0 0 0px var(--color)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 calc(0.5 * var(--grid-em)) var(--color)) brightness(1.2);
        /* 增加光环的大小和亮度 */
    }

    100% {
        filter: drop-shadow(0 0 0px var(--color)) brightness(1);
        /* 归回原状态 */
    }
}

/* 当骰子丢出6点时的动画效果 */
.jump-container.highlight-glow {
    animation: glow-effect 1s ease-in-out;
    /* 持续时间0.6秒的闪烁效果 */
}

.jump {
    transform: translateY(-3em);
}

.dice {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    transform-style: preserve-3d;
    width: 3em;
    height: 3em;
}

.dice.a {
    transition: 1s cubic-bezier(0, 0, 0, 1);
}

.dice.b {
    transition: 1s cubic-bezier(0, 0, 0, 1);
}

.dice .side {
    color: inherit;
    box-sizing: border-box;
    border-radius: 0.8em;
    background-color: currentColor;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-areas:
        "one two three"
        "four five six"
        "seven eight nine";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    padding: 0.5em;
    width: 100%;
}

.upnow {
    background-color: #fefefe;
}

.dice .inside {
    background-color: #de7178;
}

.side i {
    display: block;
    background-color: #000;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    height: 0.5em;
    width: 0.5em;
}

[data-side="2"] i:nth-of-type(1),
[data-side="3"] i:nth-of-type(1),
[data-side="4"] i:nth-of-type(1),
[data-side="5"] i:nth-of-type(1),
[data-side="6"] i:nth-of-type(1) {
    grid-area: one;
}

[data-side="4"] i:nth-of-type(2),
[data-side="5"] i:nth-of-type(2),
[data-side="6"] i:nth-of-type(2) {
    grid-area: three;
}

[data-side="6"] i:nth-of-type(3) {
    grid-area: four;
}

[data-side="1"] i:nth-of-type(1),
[data-side="3"] i:nth-of-type(2),
[data-side="5"] i:nth-of-type(3) {
    grid-area: five;
}

[data-side="6"] i:nth-of-type(4) {
    grid-area: six;
}

[data-side="4"] i:nth-of-type(3),
[data-side="5"] i:nth-of-type(4),
[data-side="6"] i:nth-of-type(5) {
    grid-area: seven;
}

[data-side="2"] i:nth-of-type(2),
[data-side="3"] i:nth-of-type(3),
[data-side="4"] i:nth-of-type(4),
[data-side="5"] i:nth-of-type(5),
[data-side="6"] i:nth-of-type(6) {
    grid-area: nine;
}

[data-side="1"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="7"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="2"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="8"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="3"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(1.5em);
}

[data-side="9"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(1.45em);
}

[data-side="4"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(1.5em);
}

[data-side="10"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(1.45em);
}

[data-side="5"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="11"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="6"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(1.5em);
}

[data-side="12"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(1.45em);
}
[data-side="13"] ,
[data-side="14"] ,
[data-side="15"] {
    height: 90% !important;
    width: 90% !important;
}

[data-side="13"] {
    transform: rotate3d(1, 0, 0, 90deg);
}

[data-side="14"] {
    transform: rotate3d(0, 1, 0, 90deg);
}

[data-side="15"] {
    transform: rotate3d(0, 0, 0, 90deg);
}

.a[data-roll="1"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="2"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="3"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}

.a[data-roll="4"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}

.a[data-roll="5"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="6"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}

.b[data-roll="1"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}

.b[data-roll="2"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}

.b[data-roll="3"] {
    transform: rotateX(-540deg) rotateY(-630deg) rotateZ(-360deg);
}

.b[data-roll="4"] {
    transform: rotateX(-540deg) rotateY(-810deg) rotateZ(-360deg);
}

.b[data-roll="5"] {
    transform: rotateX(-450deg) rotateY(-900deg) rotateZ(-360deg);
}

.b[data-roll="6"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
:root {
    --toastify-color-warning: #29203e !important;
    /* the length of one grid */
    --board-unit: 9.09vh;
    /* top bar gird counts */
    --board-unit-num: 9;
    --board-unit-length: 9.09vh;

    --center-w: calc(var(--board-unit) * var(--board-unit-num));
    --trade-w: min(calc(0.72 * var(--center-h)), var(--center-w));
    --center-h: calc(var(--board-unit) * 18 - var(--board-unit) * var(--board-unit-num));
    /* grid count is decided by the w/h ratio*/
    /* grid size is decided by the count and the window size */
    /* the font size of grid should decided by grid size */
    /* the whole font size should decided by the center width, means count*(grid size or font size of grid) */
    --grid-em: calc(var(--board-unit)* 0.25);
    --game-em: calc(0.03*var(--center-w));
    --vh: 1vh;
    --window-em: 4vw;
    /* colors */
    /* --c-background: #180f1d;
    --c-button: #5432da;
    --c-button-sub: #4a08c1;
    --c-button-prominent: yellow;
    --c-button-warning: red;

    --c-title: white;
    --c-title-sub: #b5b9fd;
    --c-nickname: #2d2445;

    --c-board: black; */
    --c-background: #080b27;
    --c-button: #65e11d;
    --c-button-sub: #5fa639;
    --c-button-head: #ffffff40;
    --c-button-prominent: yellow;
    --c-button-warning: red;

    --c-title: white;
    --c-title-sub: #67d9fa;
    --c-nickname: #062634;


    --c-board: black;
    /* main page vaiable */
    --light-delay: 1.5s;
    /* game color */
    --c-g-background: #13224c;

    --c-g-center: rgba(95, 95, 95, 0);
    --c-g-grid: #1d266d;
    --c-g-panel: #344881;
    --c-g-button:
        /* 上边缘高光 */
        radial-gradient(120% 80% at 50% 0%,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.08) 35%,
            rgba(255, 255, 255, 0.00) 60%),
        /* 下边缘高光 */
        radial-gradient(120% 80% at 50% 100%,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.05) 35%,
            rgba(255, 255, 255, 0.00) 60%),
        /* 中部轻微压暗，让边缘更“立” */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.05)),
        #36b986;

    --c-g-light-text: #d3e1e7;
    --c-g-text: #aac1cd;
}

@media (orientation: landscape) {
    :root {
        --window-em: 2.6vh;
    }
}

body,
span[role="img"] {}

* {
    font-family: Segoe UI, sans-serif, Segoe UI Emoji;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Global selection style */
*::-moz-selection {
    background-color: transparent;
}
*::selection {
    background-color: transparent;
}

*:focus {
    outline: none;
}

/* Exclude input by resetting its selection style */
input::-moz-selection {
    background-color: rgba(219, 219, 219, 0.318);
    /* or use system default */
}
input::selection {
    background-color: rgba(219, 219, 219, 0.318);
    /* or use system default */
}

html,
body {
    margin: 0;
    transition: 0s;
}

#root {
    height: 100vh;
    width: 100vw;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;

    /* accent-color: #6647e0; */
    background-attachment: fixed;
    --color-cyan: rgba(0, 255, 255, 0.4);
    --color-pink: rgba(255, 182, 193, 0.5);
    --color-green: rgba(152, 251, 152, 0.4);

    --bg-main: #9ac5d5;
    --size: 68px;
    --c1: #509abd;
    background:
        /* 原有几何纹理 */
        linear-gradient(45deg, var(--c1) 25%, transparent 25%) 0 0 / var(--size) var(--size),
        linear-gradient(-45deg, var(--c1) 25%, transparent 25%) 0 0 / var(--size) var(--size),
        linear-gradient(45deg, transparent 75%, var(--c1) 75%) 0 0 / var(--size) var(--size),
        linear-gradient(-45deg, transparent 75%, var(--c1) 75%) 0 0 / var(--size) var(--size),

        var(--bg-main);
    /* background-color: #130f1d;
    background-image: linear-gradient(to bottom right, #130f1d, #1a0f1d); */
    color: #fff;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}

/* #root:has(.start-anime)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(1px);


    background:
        radial-gradient(ellipse 30% 100% at 50% 20%,
            rgba(0, 88, 123, 0.6) 0%,
            rgba(0, 88, 123, 0.32) 30%,
            rgba(0, 88, 123, 0.15) 60%,
            rgba(0, 88, 123, 0.03) 85%,
            rgba(0, 88, 123, 0) 100%);

    opacity: 0;
    animation: show-backlight 0.8s ease-out calc(var(--light-delay) + 0.5s) forwards;
} */

@media (orientation: portrait) {


    #root:has(.start-anime)::after {


        background:
            radial-gradient(ellipse 80% 100% at 50% 20%,
                rgba(51, 142, 175, 0.6) 0%,
                rgba(51, 142, 175, 0.32) 30%,
                rgba(51, 142, 175, 0.15) 60%,
                rgba(51, 142, 175, 0.03) 85%,
                rgba(51, 142, 175, 0) 100%);
    }
}

@keyframes show-backlight {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Scrollbar container */
::-webkit-scrollbar {
    width: 4px;
    /* or as thin as you like */
    height: 4px;
}

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

/* Scrollbar thumb (the draggable bar) */
::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.6);
    /* semi-transparent gray */
    border-radius: 2px;
}

/* Optional: On hover, make the thumb darker */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(85, 85, 85, 0.8);
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(136, 136, 136, 0.6) transparent;
    }
}


.Toastify__toast-body {
    font-size: var(--grid-em);
}

/* 
.Toastify__toast-container {
    justify-items: center !important;
} */

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.feedback {
    width: 100%;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 0;
}
.feedbacks-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    width: 30rem;
    max-width: 90%;
}
.feedback-entry-container {
    width: 30rem;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: #cbcbcb;
}
.feedback-entry-content{
    font-size: 1em;
    word-break: break-all;
}
.feedback-entry-time{
    font-size: 0.8em;
    color: #899eab;
    min-width: 9em;

}
.feedback-input {
    box-sizing: border-box;
    display: flex;
    height: 5rem;
    width: 100%;
    border-radius: 0.4rem;
    border-width: 0;
    outline: none;
    padding: 1em;
}

.feedback-submit-wrapper {
    width: 30rem;
    max-width: 90%;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: end;
}

input[type="text"]::-moz-placeholder {
    color: #999;
    font-style: italic;
    text-align: left;
    padding-right: 20px;
}

input[type="text"]::placeholder {
    color: #999;
    font-style: italic;
    text-align: left;
    padding-right: 20px;
}

.feedback-loading {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 10px solid;
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
.login-container {
    position: fixed;
    transform: translate(-50%, -50%);
    top: calc(50*var(--vh));
    left: 50vw;
    width: 18rem;
    max-width: 98vw;
    background-color: #29203f;
    box-shadow: 5px 5px 50px black;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem 1.8rem;
    gap: 0.5em;
    z-index: 130;
}

.login-entry {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.entry-name {
    font-weight: 300;
    display: block;
    font-size: 1.1rem;
    color: #baafd4cc;
}

.entry-input {
    width: 95%;
    background-color: transparent;
    border: none;
    color: white;
    outline: none;
    border-bottom: 1px solid #baafd4cc;
    font-size: 0.5em;
    font-weight: 300;
    padding-bottom: 4px;
    margin-top: 10px;
}
.entry-input::-moz-placeholder{
    
    font-style: italic;
    font-size:15px;
}
.entry-input::placeholder{
    
    font-style: italic;
    font-size:15px;
}
.entry-input::-moz-selection{
    background-color: white;
}
.entry-input::selection{
    background-color: white;
}
.login-terms {
    color: #646f7d;
    font-size: .9em;
}

.login-button-container {
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.login-button {
    display: flex;
    background-color: rgb(66, 133, 244);
    background-image: linear-gradient(to left top, rgb(66, 133, 244), rgb(66, 88, 244));
    color: #fff;
    border: none;
    outline: none;
    border-radius: 2rem;
    padding: 0.3em 2rem 0.5em 2rem;
    font-size: .5em;
    font-weight: 500;
    cursor: pointer;
}
.login-button-enable{
}
.login-button-enable:hover {
    background-color: #7590cf;
}

input[type="password"]::-ms-reveal {
    filter: invert(1);
}

input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-background-clip: text;
            -webkit-text-fill-color: white;
            -webkit-transition: background-color 0s 600000s, color 0s 600000s !important;
            transition: background-color 0s 600000s, color 0s 600000s !important;
            
        }

.grey {
    filter: brightness(0.5);
}

.illegal-input {
    color: #e0513b;
    font-size: 0.45em;
}
@media (max-width: 600px) {
.login-container{
    top:calc(25*var(--vh));
}
}
.rc-slider {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 5px 0;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
  position: absolute;
  height: 4px;
  background-color: #abe2fb;
  border-radius: 6px;
}
.rc-slider-track-draggable {
  z-index: 1;
  box-sizing: content-box;
  background-clip: content-box;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  transform: translateY(-5px);
}
.rc-slider-handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: #fff;
  border: solid 2px #96dbfa;
  border-radius: 50%;
  cursor: pointer;
  cursor: grab;
  opacity: 0.8;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
  outline: none;
  box-shadow: none;
}
.rc-slider-handle:focus-visible {
  border-color: #2db7f5;
  box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: grabbing;
}
.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  color: #999;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.rc-slider-mark-text-active {
  color: #666;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  border-radius: 50%;
  cursor: pointer;
}
.rc-slider-dot-active {
  border-color: #96dbfa;
}
.rc-slider-dot-reverse {
  margin-right: -4px;
}
.rc-slider-disabled {
  background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}
.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-track {
  bottom: 0;
  left: 5px;
  width: 4px;
}
.rc-slider-vertical .rc-slider-track-draggable {
  border-top: 0;
  border-bottom: 0;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-left: 5px solid rgba(0, 0, 0, 0);
  transform: translateX(-5px);
}
.rc-slider-vertical .rc-slider-handle {
  position: absolute;
  z-index: 1;
  margin-top: 0;
  margin-left: -5px;
  touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-step {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-dot {
  margin-left: -2px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
  0% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}
.rc-slider-tooltip {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
  display: none;
}
.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
  min-width: 24px;
  height: 24px;
  padding: 6px 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}

.tooltip {
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    z-index: 10;
}

/* 当 Popover 打开时，应用进入动画 */
.tooltip[data-state='open'] {
    animation: scale-in 0.2s ease-out;
}

/* 当 Popover 关闭时，应用退出动画 */
.tooltip[data-state='closed'] {
    animation: scale-out 0.3s ease-in;
}

/* --- ✨ 这里是魔法发生的地方 ✨ --- */
.tooltip[data-side='top'] {
    transform-origin: bottom center;
}

.tooltip[data-side='bottom'] {
    transform-origin: top center;
}

.tooltip[data-side='left'] {
    transform-origin: right center;
}

.tooltip[data-side='right'] {
    transform-origin: left center;
}

.tooltip-arrow {
    transform: translateY(-1px)
}

.parts-close-button {
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ffffff;
    background-color: #ebebeb17;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0em 0.5em #000000;
}

.parts-close-button:hover {
    transform: rotate(90deg);
}


.parts-close-button svg {
    width: 100%;
    height: 100%;
    scale: 1.5;
}

.parts-close-button-2 {
    height: 1.8rem;
    aspect-ratio: 1;
    right: 0.2rem;
    top: -1.3rem;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ffffff;
    background-color: #231939;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0.3em 0.5em #000000;
}


.parts-close-button-2:hover {
    transform: rotate(90deg);
}


.parts-close-button-2 svg {
    width: 100%;
    height: 100%;
    scale: 1.5;
}

.parts-minimize-button {
    height: 2rem;
    aspect-ratio: 1;
    right: 0.2rem;
    top: 0.2rem;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ffffff;
    background-color: #231939;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0.3em 0.5em #000000;
}

.minimize-dash {
    width: 0.8rem;
    height: 0.2rem;
    background-color: white;
}

.tutorial {
        position: relative;
    display: grid;
    grid-auto-flow: row;
    background-image: linear-gradient(to top left, #1ecb0e, #07bade);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 10px 10px;
    border: none;
    max-width: 100px;
    z-index: 10;
}

.tutorial-arrow {
        fill: #1cbe50;
    scale: 1.2;
}

.doller-symbol{
    color: rgb(214 213 213);
}
.widescreen-side-columns {
    padding: 1rem;
    justify-content: center;
    display: flex;
    position: relative;
    width: 100vw;
}

.widescreen-side-columns .left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 35vh;
    padding-right: 1em;
    box-sizing: border-box;
}

.widescreen-side-columns .right-column {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    min-width: 0;
    width: 35vh;
    height: 95vh;
}

.head-container {
    position: relative;
    box-sizing: border-box;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    font-size: calc(1.6 * var(--grid-em));
}

.head-title {
    border: 0;
    background-color: transparent;
    color: white;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

.game-name-1 {
    color: white;
    white-space: nowrap;
    font-size: 2em;
}

.game-name-2 {
    white-space: nowrap;
    font-size: 1.6em;
    color: #5ecaf0;
    align-content: end;
}

.palce-holder {
    width: calc(var(--board-unit) * (var(--board-unit-num)) + 2 * var(--board-unit-length));
    height: calc(var(--board-unit) * (20 - var(--board-unit-num)));
    position: relative;
}

.settings-container {}

.settings-container.side {
    width: 100%;
    font-size: calc(0.4 * var(--grid-em));
    max-width: 50em;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 98vh;
    overflow: hidden;
    padding: 4em 0;
    margin: 0 calc(1 * var(--grid-em));
    box-sizing: border-box;
    gap: 0.8em;
    border-radius: 2em;
    flex-direction: column;
    display: flex;
    background: var(--c-g-panel);
}

.settings-container.popup {
    --setting-w: min(calc(0.5 * var(--center-h)), calc(var(--board-unit) + var(--center-w)));
    font-size: calc(0.025*var(--setting-w));
    width: var(--setting-w);
    max-height: min(calc(0.8*var(--center-h)), calc(2 * var(--center-w)));
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    overflow: hidden;
    padding: 4em 0em;
    background: var(--c-g-panel);
    z-index: 750;
}

.settings-container>.title {
    color: #b2aacd;
    font-size: 3em;
    text-align: center;
}

.settings-container .options {
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1em 5em;
    gap: 1em;
    filter: brightness(0.9);
}

.options>.title {
    font-size: 2.6em;
    text-align: center;
    width: 100%;
    color: var(--c-g-text);
    margin-bottom: 0.4em;
}

.hrizontal-divider {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #ffffffb8;
    width: 100%;
    padding: 20px 30px 0 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.vertical-divider {
    width: 1px;
    background-color: #ffffffa1;
    height: 80%;
}

.settings-list-text {
    margin: 0 1em;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.settings-list-text-title {
    font-size: 2.2em;
    line-height: 1;
    color: #e0dfe6;
}

.settings-list-text-describ {
    color: #9287ae9e;
    font-size: 1.8em;
}


.toggle-button {
    --toggle-buton-width: calc(2.6* var(--grid-em));
    border-radius: calc(1* var(--toggle-buton-width));
    width: var(--toggle-buton-width);
    height: calc(0.48* var(--toggle-buton-width));
    background-color: #4D4D4D;
}

.toggled-button {
    background-color: #6647e0;
}

.toggle-disabled {
    filter: brightness(0.5);
}

.toggle-button-ball {
    background-color: #ffffff;
    width: calc(0.48* var(--toggle-buton-width));
    height: calc(0.48 * var(--toggle-buton-width));
    border-radius: calc(0.24 * var(--toggle-buton-width));

}

.toggled-button-ball {
    transform: translate(calc(0.52 * var(--toggle-buton-width)), 0);
}

.react-toggle--checked .react-toggle-track {
    background-color: #6647e0 !important;
}

.setting-banner-top {
    padding-bottom: 1.5em;
    border-radius: 1em;
    padding: 2em;
}

.setting-banner-container {
    width: 100%;
    display: grid;
    grid-template-columns: 4.6em 16em auto;
    grid-template-rows: 2.6em auto auto;
    grid-template-areas:
        "a b c"
        "a d ."
        "a e e";
    gap: 0.4em;
    align-items: center;
}

.setting-banner-container .a {
    grid-area: a;
}

.setting-banner-container .b {
    grid-area: b;
}

.setting-banner-container .c {
    grid-area: c;
}

.setting-banner-container .d {
    grid-area: d;
}

.setting-banner-container .e {
    grid-area: e;
}

.setting-banner-zindex {
    position: relative;
    z-index: 10;
}

.setting-list-icon {
    justify-content: start;
    display: flex;
}

.setting-list-icon svg {
    width: 3em;
    height: 3em;
    color: var(--c-g-light-text);
}

.setting-list-button {
    margin-left: auto;
    padding-left: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    width: 6em;
    opacity: 0.9;
    width: 100%;
    padding: 0.4em 0;
    box-sizing: border-box;
}

.rc-segmented {
    background-color: #e6e6e678 !important;
    border-radius: 1em;
}

.rc-segmented-item-selected {
    border-radius: 1em;
}

.rc-segmented-item {
    width: 3em;
    min-height: 17px;
}

.rc-segmented-item-label {
    font-size: 1.4em;
    line-height: initial;
}

.win-mode .rc-segmented-item {
    width: 8.9em;
}

.rc-segmented-thumb {
    border-radius: 1em;

}

/* 
.Dropdown-root {
    scale: calc(var(--board-unit-scale) * 0.8);
}

.Dropdown-control {
    padding: 2px 32px 2px 5px !important;
} */
.Dropdown-root .Dropdown-option.is-selected {
    background-color: #b1a4d6;
    color: #ffffff;
}

.Dropdown-root .Dropdown-option {
    color: rgb(255 255 255 / 80%);
}

.Dropdown-root .Dropdown-menu {
    background-color: #3e3752;
    border: none;
    border-radius: 0.3rem;
}

.Dropdown-root.is-open .Dropdown-arrow {
    border-color: transparent;
}

.Dropdown-root .Dropdown-arrow {
    border-color: transparent;
}


.Dropdown-root .Dropdown-control {
    color: rgb(255, 255, 255);
    background: rgb(62, 55, 82);
    -webkit-text-fill-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0.5em;
    padding: 0.5rem 1rem 0.5rem 0.8rem;
    font-size: 16px;
    transition: all 200ms ease;
}

.game-mode {
    background-color: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 5px 7px 5px 3px;
    box-sizing: border-box;
    font-size: 2.4em;
    justify-items: center;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    width: 3em;
}

.setting-player-number {
    background-color: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 5px 7px 5px 3px;
    box-sizing: border-box;
    font-size: medium;
    justify-items: center;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.setting-player-number:focus {
    border-bottom-color: #e3eaf0;
}

.Dropdown-root .Dropdown-option:hover {
    background-color: #d2cbe5;
    color: white;
}

.collapsable-page {
    padding: calc(1 * var(--grid-em)) 0;
    box-sizing: border-box;
    pointer-events: none;
    align-items: center;
    position: relative;
    z-index: 10;
    display: flex;
    width: calc(var(--board-unit) * var(--board-unit-num));
    height: calc(var(--board-unit) * (18 - var(--board-unit-num)));
    background-color: #130f1df5;
    border-radius: 0.5rem;
}

.mobile-vertical {
    flex-direction: column;
}

.mobile-back-trans {
    background-color: #29203f00
}

.collapsable-page .head-container {
    width: 48%;
    justify-content: center;
}

.mobile-vertical .head-container {
    justify-content: center;
}

.collapsable-page-ref {
    width: 100vw;
    height: calc(100*var(--vh));
    display: flex;
    justify-content: center;
    align-items: center;
}

.collapse-button {
    pointer-events: all;
    color: white;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: calc(1 * var(--grid-em));

    border: 0;
    border-radius: calc(0.75* var(--grid-em));
    width: calc(6* var(--grid-em));
    height: calc(1.5* var(--grid-em));


    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.233);
}

.collapse-button:hover {
    background-color: rgba(255, 255, 255, 0.458);
}

.collapse-button svg {
    transition: 0.2;
    width: calc(1.5* var(--grid-em));
    height: calc(1.5* var(--grid-em));
}

.rotate-svg svg {
    transform: rotate(180deg);
}

@media (max-width: 600px) {

    .setting-region-title {
        font-size: 20px;
    }

    .settings-container.popup {
        font-size: calc(0.025*var(--setting-w));

    }

    .toggle-button {
        --toggle-buton-width: 40px;
    }

}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* @media (max-aspect-ratio: 1/1) {
    .board-grid {
        block-size: var(--board-unit-mobile) !important;
        min-inline-size: var(--board-unit-mobile) !important;
    }

    .center {
        width: calc(var(--board-unit-mobile) * var(--board-unit-num)) !important;
        height: calc(var(--board-unit-mobile) * (18 - var(--board-unit-num))) !important;
    }

    .corner {
        block-size: var(--board-unit-mobile) !important;
        inline-size: var(--board-unit-mobile) !important;
    }
} */
.nopage{
    font-size: 7em;
}
.Dropdown-root {
  position: relative;
}

.Dropdown-control {
  position: relative;
  overflow: hidden;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  color: #333;
  cursor: default;
  outline: none;
  padding: 8px 52px 8px 10px;
  transition: all 200ms ease;
}

.Dropdown-control:hover {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.Dropdown-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  content: ' ';
  display: block;
  height: 0;
  margin-top: -ceil(2.5);
  position: absolute;
  right: 10px;
  top: 14px;
  width: 0
}

.is-open .Dropdown-arrow {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
}

.Dropdown-menu {
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.Dropdown-menu .Dropdown-group > .Dropdown-title{
  padding: 8px 10px;
  color: rgba(51, 51, 51, 1);
  font-weight: bold;
  text-transform: capitalize;
}

.Dropdown-option {
  box-sizing: border-box;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  display: block;
  padding: 8px 10px;
}

.Dropdown-option:last-child {
  border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
}

.Dropdown-option:hover {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-option.is-selected {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-noresults {
  box-sizing: border-box;
  color: #ccc;
  cursor: default;
  display: block;
  padding: 8px 10px;
}

.outside {
    --color: #0e1e29;
    box-sizing: border-box;
    --dice-size: 6.6vh;
    --dot-size: calc(var(--dice-size)/6);
    --dot-step: calc(var(--dice-size)/4);
    --pane-duration: 0.4s;
    align-items: center;
    animation: outsideAnime .3s cubic-bezier(0, .25, 0, 1) both;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    max-width: 50vh;
    padding: 2em 1em;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 10;
    font-size: 2.4vh;
}

@media (orientation: portrait) {
    .outside {
        --dice-size: 13vw;
        width: 100vw;
        font-size: 4vw;
    }
}

@keyframes outsideAnime {
    0% {
        opacity: 0;
        transform: scale(.875)
    }
}

.mid {
    animation: midAnime 10s linear infinite
}

.loading-dice {
    animation: midAnime calc(var(--pane-duration)*6*4) infinite cubic-bezier(.16, 1, .3, 1);
    animation-delay: calc(var(--pane-duration)*-1);
    border: calc(var(--dot-size)/1.5) solid;
    border-radius: calc(var(--dice-size)/3);
    color: var(--color);
    height: var(--dice-size);
    position: relative;
    width: var(--dice-size)
}

@keyframes midAnime {
    25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(.5turn)
    }

    75% {
        transform: rotate(270deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.dot {
    animation-duration: calc(var(--pane-duration)*6);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.5, 2, .5, .75);
    background: currentColor;
    border-radius: var(--dot-size);
    height: var(--dot-size);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--dot-size)
}

.dot.dot1 {
    animation-name: dot1
}

.dot.dot2 {
    animation-name: dot2
}

.dot.dot3 {
    animation-name: dot3
}

.dot.dot4 {
    animation-name: dot4
}

.dot.dot5 {
    animation-name: dot5
}

.dot.dot6 {
    animation-name: dot6
}

@keyframes dot1 {

    0%,
    to {
        transform: translate(-50%, -50%)
    }

    16.66%,
    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), calc(-50% + var(--dot-step)))
    }
}

@keyframes dot2 {

    0%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    16.66%,
    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), calc(-50% - var(--dot-step)))
    }
}

@keyframes dot3 {

    0%,
    16.66%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    33.33% {
        transform: translate(-50%, -50%)
    }

    50%,
    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), calc(-50% - var(--dot-step)))
    }
}

@keyframes dot4 {

    0%,
    33%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    50%,
    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), calc(-50% + var(--dot-step)))
    }
}

@keyframes dot5 {

    0%,
    50%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    66.67% {
        transform: translate(-50%, -50%)
    }

    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), -50%)
    }
}

@keyframes dot6 {

    0%,
    66.67%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), -50%)
    }
}

.loader .title {
    font-size: 1.5em;
    margin-top: 2em;
    color: var(--color);
    opacity: 0.8;
}

.details {
    color: var(--color);
    font-size: .875em;
    font-weight: 600;
    height: 5em;
    overflow: visible;
    margin-top: 2em;

}

.span-head {
    border-inline-end: 2px solid rgba(146, 135, 174, .333);
    color: var(--color);
    opacity: 0.8;
    display: inline-flex;
    line-height: 1;
    padding-inline-end: .5em;
    vertical-align: -8%;
    margin-inline-end: .5em;
}

.span-head svg {
    margin-inline-end: .5em;
    overflow: visible;
    box-sizing: content-box;
    display: var(--fa-display, inline-block);
    height: 1em;
    vertical-align: -0.125em;
}

.span-text {
}