/* #id .class */

/* [[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ Menu ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] */

@font-face {
    font-family: RoundTC;
    src: url(fonts/ChironGoRoundTC-VariableFont_wght.ttf);
}

:root {
    --dbg: hsl(200,10%,0%);
    --bg: hsl(200,10%,5%);
    --lbg: hsl(200,10%,10%);
    --llbg: hsl(200,10%,15%);
    --bord: hsl(200,10%,30%);
    --text: hsl(200,10%,95%);
    --prim: hsl(200,90%,60%);
    --dprim: hsl(200,90%,50%);
    --sec: hsl(200,90%,30%);
    --acct: hsl(170,80%,60%);
    --shad: hsla(0,0%,0%,0.75);
    --game-speed-factor: 1;
}

html {
    font-family: RoundTC, Arial;
    font-size: 1.5vw;
    font-weight: 500;
    user-select: none;
}
.div {
    font-weight: 500;
}

#gameLogo {
    position: fixed;
    opacity: 0;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
    z-index: 10000;
    transition: top  1s ease, opacity 0.75s linear;
    width: 45vw;
    filter: drop-shadow(0 0 0.5vw #a5a5a5a9);
    pointer-events: none;
}
#verText {
  display: flex;
  position: fixed;
  transform: translate(-100%, -100%);
  top: 100vh;
  left: 100vw;
  width: 20vw;
  z-index: 2001;
  color: var(--text);
  padding-bottom: 1vw;
  padding-right: 1.75vw;
  pointer-events: none;
  justify-content: right;
}

/* Frames */
.frame {
    position: fixed;
    transform: translate(-50%, 0);
    top: 50%;
    left: 50%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
    padding: 1vw;
}
.fullFrame {
    position: fixed;
    transform: translate(-50%, 0);
    top: 0;
    left: 50vw;
    width: 100vw;
    height: 100vh;
}
#mainMenu {
    display: flex;
}
#backBtn {
    position: fixed;
    display: none;
    transform: translate(0, 0);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    justify-content: center;
    padding-top: 70vh;
    cursor: default;
    z-index: 3999;
}
.indexMenu {
    z-index: 4000;
    background-color: hsla(200,10%,15%,95%);
    height: 80vh;
    width: 80vw;
    transform: translate(-50%, -50%);
    border-top-left-radius: 3vw;
    border-bottom-left-radius: 3vw;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 0 3vw var(--shad);
    border: 0.2vw solid var(--bord);
}
.indexMenu::-webkit-scrollbar {
  margin: 0.3vw;
}
.indexMenu::-webkit-scrollbar-thumb {
  background-color: var(--bord); /* 用边框色变量，保持风格统一 */
  transition: background-color 0.2s ease; /* hover时变色动画 */
  border-radius: 0vw;
}
.indexMenu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 167, 167, 0.6); /* 亮一点的颜色，提示可拖动 */
}
#loadingTop {
    background-color: black;
    top: -50vh;
    z-index: 9999;
    transition: top 0.4s ease-out;
}
#loadingBottom {
    background-color: black;
    top: 50vh;
    z-index: 9999;
    transition: top 0.4s ease-out;
}
#background {
    background-image: linear-gradient(var(--lbg),var(--bg));
    z-index: -9999;
}
#canvas {
    display: flex;
    margin: -10px auto;
    background: transparent;
    opacity: 0.5;
}
#sideBar {
    position: fixed;
    display: flex;
    background-color: var(--lbg);
    height: 100vh;
    width: 3.5vw;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    gap: 3.5vh;
    padding-top: 3vh;
    box-shadow: 1vw 0 3vw var(--shad);
    z-index: 5000;
}
.toast {
  position: fixed;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  background: var(--llbg);
    opacity: 0.9;
  color: #fff;
  padding: 0.4vw 0.8vw;
  border-radius: 0.5vw;
  font-size: 1rem;
  text-align: center;
  z-index: 10000;
  transition: top 0.3s ease;
  width: auto;
  max-width: 80%;
  box-sizing: border-box;
    border: 0.1vw solid var(--bord);
}

/* Texts */
p {
    color: var(--text);
}
.indexText {
    width: 100%;
    line-height: 1.5;
    word-wrap: break-word;
    font-weight: 400;
    margin: 1.5vh;
}

/* Buttons */
button {
    font-family: RoundTC, Arial;
    color: var(--text);
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: 150ms;
    align-items: center;
    justify-items: center;
    font-weight: 500;
}
.menuBtn {
    font-size: 1.125vw;
    background-color: var(--prim);
    width: 10vw;
    padding: 0.75vw 1.25vw;
    color: var(--text);
    border-radius: 2vw;
    text-shadow: 0 0 0.75vw var(--bord);
    align-items: center;
    justify-content: center;
}
.menuBtn:hover {
    opacity: 1;
    box-shadow: 0 0 0.5vw var(--prim);
}
.menuBtn:active {
    opacity: 1;
    background-color: var(--dprim);
    box-shadow: 0 0 0.75vw var(--prim);
}
#startBtn {
    position: fixed;
    display: flex;
    transform: translate(0, 0);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    justify-content: center;
    padding-top: 70vh;
    cursor: pointer;
}
.sideBarBtn {
    position: relative;
    display: flex;
    background: transparent;
    background-size: contain;
    width: 60%;
    aspect-ratio: 1/1;
    background-repeat: no-repeat;
}
.sideBarBtn::after {
  position: absolute;
  bottom: 0%;
  left: 150%;
  background: var(--llbg);
  color: white;
  font-size: 0.75rem;
  padding: 0.3vw 0.6vw;
  border-radius: 0.4vw;
  white-space: nowrap;
  visibility: hidden; 
  opacity: 0;
  transition: opacity 0.1s;
}
.sideBarBtn:hover::after {
  visibility: visible;
  opacity: 1;
}
#toMenuBtn {
    background-image: url(images/home.png);
}
#toMenuBtn::after {
    content: "主頁";
}
#whaleGame {
    position: relative;
    display: flex;
    background: transparent;
    background-size: contain;
    width: 60%;
    aspect-ratio: 1/1;
    background-image: url(images/whaleGameLogo.png);
    pointer-events: none;
    cursor: default;
}
#indexBtn {
    background-image: url(images/book-alt.png);
}
#indexBtn::after {
    content: "圖鑑";
}
#tutorialBtn {
    background-image: url(images/question-square.png);
}
#tutorialBtn::after {
    content: "教學";
}
#rankingBtn {
    background-image: url(images/crown.png);
}
#rankingBtn::after {
    content: "排行";
}
#infoBtn {
  position: absolute;
  top: 84vh;
    background-image: url(images/square-info.png);
}
#infoBtn::after {
    content: "關於";
}
#settingBtn {
  position: absolute;
  top: 92.5vh;
    background-image: url(images/settings-sliders.png);
}
#settingBtn::after {
    content: "設定";
}

/* [[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[ Main ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]] */

#preparation {
    display: none;
    background-color: var(--lbg);
    border-top-left-radius: 6vh;
    border-bottom-left-radius: 6vh;
    position: fixed;
    transform: translate(0, 0);
    top: 0;
    left: 30vw;
    width: 70vw;
    height: 100vh;
    box-shadow: -1vw 0 3vw var(--shad);
    transition: left 0.4s ease-out;
    z-index: 100;
}
#inv {
    position: relative;
    background-color: transparent;
    box-sizing: border-box;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    transform: translate(0,-100%);
    top: 96vh;
    left: 2.5vw;
    width: 40.5vw;
    height: 24vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 0.75vw;
    padding-right: 0.75vw;
    padding-top: 8.65vh;
}
#inv::-webkit-scrollbar {
  margin: 0.3vw;
  height: 0.75vw;
  top: 1vw;
}
#inv::-webkit-scrollbar-thumb {
  background-color: var(--bord); /* 用边框色变量，保持风格统一 */
  transition: background-color 0.2s ease; /* hover时变色动画 */
  border-radius: 0vw;
}
#inv::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 167, 167, 0.6); /* 亮一点的颜色，提示可拖动 */
}
#invBorder {
    display: flex;
    position: absolute;
    background-color: transparent;
    border: 0.1vw solid var(--bord);
    box-sizing: border-box;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    transform: translate(0,-100%);
    top: 96vh;
    left: 2.5vw;
    width: 40.5vw;
    height: 16vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 0.75vw;
    padding-right: 0.75vw;
}
.invEle {
    display: flex;
    position: relative;
    background-color: gray;
    height: 80%;
    aspect-ratio: 1/1;
    border-radius: 0.5vw;
  font-weight: 700;
    text-shadow: 0 0 0.2vw #000;
    font-size: 2vw;
    box-sizing: border-box;
    flex-shrink: 0;
  margin: 0;
  padding: 0;
    justify-content: center;
    align-content: center;
}
#mapFrame {
    position: fixed;
    display: none;
    transform: translate(0,-50%);
    top: 50vh;
    grid-template-columns: repeat(11,6vw);
    grid-template-rows: repeat(6,6vw);
    gap: 1vw;
    margin-left: 5vw;
    z-index: -50;
}
.mapBox {
    display: flex;
    position: relative;
    aspect-ratio: 1/1;
    background-color: hsla(200,10%,11%,0.4);
    border: 0.1vw solid var(--bord);
    border-radius: 0.5vw;
    justify-content: center;
    align-items: center;
    cursor: default;
    max-width: 6vw;
    max-height: 6vw;
}
#board {
    display: none;
    position: fixed;
    background-color: var(--lbg);
    height: 100vh;
    width: 24vw;
    top: 0;
    left: 76vw;
    box-shadow: -1vw 0 3vw var(--shad);
    z-index: 2000;
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
}
#startWaveBtn {
    display: flex;
    position: fixed;
    transform: translate(0,0);
    top: 4vh;
    left: 2.5vw;
    width: 11vw;
    height: 10vh;
    align-items: center;
    justify-content: center;
    border-radius: 1.1vw;
    font-size: 1.4vw;
}
.ene {
    display: flex;
    position: absolute;
    width: 3vw;
    aspect-ratio: 1/1;
    background-color: red;
    border-radius: 3vw;
    justify-content: center;
    align-items: center;
    color: white;
    transition: transform calc(0.4s * var(--game-speed-factor)) ease-out, filter calc(0.1s * var(--game-speed-factor)) ease;
    z-index: 10;
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
}
.ele {
    display: flex;
    position: relative;
    min-width: 4vw;
    aspect-ratio: 1/1;
    background-color: rgb(255, 174, 0);
    border-radius: 0.5vw;
    justify-content: center;
    align-content: center;
    z-index: 10;
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
  font-size: 1.65vw;
    transition: filter calc(0.1s * var(--game-speed-factor)) ease;
}
.bullet {
    display: flex;
    position: absolute;
    width: 1.5vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: hsl(200,10%,95%);
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    box-shadow: 0 0 0.5vw hsl(200,10%,95%);
}
.laser {
    display: flex;
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    left: 3vw;
    top: 3vw;
    background-image: url('./images/laser.PNG');
    filter: drop-shadow(0 0 0.5vw #E8C9C5) hue-rotate(0deg) grayscale(100%) brightness(1.2);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(0, -50%);
    opacity: 0.9;
    z-index: 10;
}
.selected {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate(0,0);
    border: 0 solid var(--acct);
    box-sizing: border-box;
    box-shadow: 0 0 0.7vw var(--acct);
    transition: 0.1s;
    opacity: 1;
  border-radius: 0.5vw; 
}
.selected.active {
    border: 0.3vw solid var(--acct);
}
.damagePopup {
  position: absolute;
  color: #ec0f0f;
  -webkit-text-stroke: 0.05vw #960f0f;
  font-size: 1.2vw;
  font-weight: bold;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 0 0.3vw var(--shad);
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
}
.critPopup {
  position: absolute;
  color: #fcba2c;
  -webkit-text-stroke: 0.1vw #000;
  font-size: 2vw;
  font-weight: 1000;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 0 0.5vw var(--shad);
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
}
@keyframes damageFloat {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -2vw);
    opacity: 0;
  }
}
.eneHpBg {
  position: absolute;
  top: 3.2vw; /* 血条在敌人下方10px，不遮挡敌人 */
  left: 50%;
  transform: translateX(-50%); /* 血条水平居中 */
  width: 4vw; /* 血条宽度=敌人宽度的60%，避免太宽 */
  height: 0.25vw; /* 血条高度，细一点不突兀 */
  background-color: #666; /* 灰色背景 */
  border-radius: 0.15vw; /* 轻微圆角，更美观 */
  display: none; /* 默认隐藏，非满血时再显示 */
  justify-items: center;
  border: #000;
  border-width: 0.1vw;
  border-style: solid;
}
.eneHpBar {
  height: 0.25vw; /* 进度条占满背景高度 */
  background-color: #ff4d4d; /* 红色进度条 */
  border-radius: 0.15vw;
  transition: width calc(0.1s * var(--game-speed-factor)) ease; /* 血量变化时平滑过渡，不突兀 */
}

#final {
    display: none;
}
#eneWarning {
    display: flex;
    position: fixed;
    transform: translate(0,0);
    top: 4vh;
    left: 15.5vw;
    height: 10vh;
    width: 27.5vw;
    background-color: var(--lbg);
    border: 0.1vw solid var(--bord);
    box-sizing: border-box;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    flex-direction: row;
    align-items: center;
    gap: 0.75vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1vw 0.75vw;
}
#eneWarning::-webkit-scrollbar {
  margin: 0.3vw;
  height: 0.75vw;
  top: 1vw;
}
#eneWarning::-webkit-scrollbar-thumb {
  background-color: var(--bord); /* 用边框色变量，保持风格统一 */
  transition: background-color 0.2s ease; /* hover时变色动画 */
  border-radius: 0vw;
}
#eneWarning::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 167, 167, 0.6); /* 亮一点的颜色，提示可拖动 */
}
#shop {
    display: flex;
    position: fixed;
    transform: translate(0,0);
    top: 18vh;
    left: 2.5vw;
    height: 58vh;
    width: 40.5vw;
    background-color: var(--lbg);
    border: 0.1vw solid var(--bord);
    box-sizing: border-box;
    border-radius: 1vw;
}
#canRoll {
    display: flex;
    position: fixed;
    transform: translate(0,0);
    top: 3vh;
    left: 1.5vw;
    height: 11vh;
    width: 37.25vw;
    background-color: var(--lbg);
    border: 0.1vw solid var(--bord);
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    gap: 0.75vw;
    overflow-x: auto;
    overflow-y: hidden;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    padding: 1vw 0.75vw;
}
#canRoll::-webkit-scrollbar {
  margin: 0.3vw;
  height: 0.75vw;
  top: 1vw;
}
#canRoll::-webkit-scrollbar-thumb {
  background-color: var(--bord); /* 用边框色变量，保持风格统一 */
  transition: background-color 0.2s ease; /* hover时变色动画 */
  border-radius: 0vw;
}
#canRoll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 167, 167, 0.6); /* 亮一点的颜色，提示可拖动 */
}
.effects {
    display: flex;
    position: absolute;
    transform: translate(0,0);
    height: 10vh;
    width: 20vw;
    background-color: var(--lbg);
    border: 0.1vw solid var(--bord);
    box-sizing: border-box;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
    flex-direction: row;
    align-items: center;
    gap: 0.75vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.35vh;
}
#effects::-webkit-scrollbar {
  margin: 0.3vw;
  height: 0.75vw;
  top: 1vw;
}
#effects::-webkit-scrollbar-thumb {
  background-color: var(--bord); /* 用边框色变量，保持风格统一 */
  transition: background-color 0.2s ease; /* hover时变色动画 */
  border-radius: 0vw;
}
#effects::-webkit-scrollbar-thumb:hover {
  background-color: rgba(167, 167, 167, 0.6); /* 亮一点的颜色，提示可拖动 */
}
#eleEffects {
  top: 52vh;
}
#eneEffects {
  top: 65vh;
}
.eneIcon {
    display: flex;
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: 0.4vw solid #000;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
  font-size: 1.15vw;
}
.eleIcon {
    display: flex;
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 0.5vw;
    border: 0.4vw solid #000;
    align-items: center;
    justify-content: center;
    color: var(--text);
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
}
#eneWarningTitle {
    display: flex;
    position: fixed;
    top:-1vh;
    left: 15vw;
}
#canRollTitle {
    display: flex;
    position: fixed;
    top:-1vh;
    left: 1vw;
}
#rolling {
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 29vh;
    left: 20.25vw;
    color: #666;
    font-weight: 700;
    text-shadow: 0 0 0.5vw var(--shad);
    transition: font-size 0.5s ease-in-out;
    font-size: 2vw;
    width: 100%;
    align-items: center;
    justify-content: center;
}
#rollBtn {
    display: flex;
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50vh;
    left: 50%;
    width: 12vw;
    height: 7vh;
    align-items: center;
    justify-content: center;
}
.lvText {
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--text);
    top: 9.3vh;
    left: 1.35vh;
    font-size: 1.5vw;
    height: 1.5vh;
    width: 1.5vh;
}
.noText {
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--text);
    top: 0.65vh;
    left: 1.35vh;
    font-size: 1.5vw;
    height: 1.5vh;
    width: 1.5vh;
}
.costText {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--text);
    top: 0.8vw;
    left: 50%;
    font-size: 1.25vw;
    height: 1.5vw;
    width: 92%;
    text-align: right;
}
.placedText {
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    color: var(--text);
    top: 9.8vh;
    left: 50%;
    font-size: 1.25vw;
    height: 1.5vh;
    width: 92%;
    text-align: right;
}
#eleFunctionFrame {
    display: flex;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 3vw;
    left: 7vw;
    flex-direction: column;
    align-items: center;
    gap: 0.75vw;
    padding: 1vw 0;
    height: 7.5vw;
    width: 3vw;
    background-color: hsla(200,10%,10%,0.9);
    border: 0.1vw solid var(--bord);
    border-radius: 1.5vw;
    z-index: 1000;
}
.eleFunctionBtn {
    display: flex;
    width: 2vw;
    aspect-ratio: 1/1;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
}
#upgradeBtn {
    background-image: url(images/arrow.png);
}
#minusBtn {
    background-image: url(images/minus.png);
}
#sellBtn {
    background-image: url(images/x.png);
}
.amountText {
    display: flex;
    position: absolute;
    color: var(--text);
    top: 2.25vw;
    left: 2.55vw;
    height: 1.5vw;
    width: 1.5vw;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
  transition: 0.1s;
  font-size: 1.65vw;
}
.goldPopup {
  position: absolute;
  color: #ffc549;
  -webkit-text-stroke: 0.1vw #ac8417;
  font-size: 1.5vw;
  font-weight: 800;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 0 0.5vw var(--shad);
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
    transform: translate(-50%, 0);
}
.waveGoldPopup {
  position: absolute;
  color: #ffcc3e;
  -webkit-text-stroke: 0.1vw #d19a23;
  font-size: 2vw;
  font-weight: 800;
  pointer-events: none;
  z-index: 51;
  text-shadow: 0 0 0.5vw var(--shad);
  animation: damageFloat calc(4s * var(--game-speed-factor)) ease-out forwards;
    transform: translate(-50%, 0);
}
@keyframes waveGoldFloat {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  75% {
    transform: translate(-50%, -1vw);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -2vw);
    opacity: 0;
  }
}
.pointPopup {
  position: absolute;
  color: #ff9abc;
  -webkit-text-stroke: 0.1vw #ad627b;
  font-size: 1.5vw;
  font-weight: 800;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 0 0.5vw var(--shad);
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
    transform: translate(-50%, 0);
}
#waveText {
  position: absolute;
}
#pointText {
  position: absolute;
  top: 16.5vh;
}
#goldText {
  position: absolute;
  top: 31.5vh;
}
.waveTexts {
    font-size: 4vw;
    font-weight: 600;
    color: rgb(77, 205, 255);
    text-shadow: 0 0 0.5vw rgb(13, 139, 189);
}
.pointTexts {
    font-size: 3vw;
    font-weight: 600;
    color: #ff9abc;
    text-shadow: 0 0 0.5vw #ad627b;
}
.goldTexts {
    font-size: 3vw;
    font-weight: 600;
    color: #ffc549;
    text-shadow: 0 0 0.5vw #ac8417;
}
.burnPopup {
  position: absolute;
  color: #ff511c;
  -webkit-text-stroke: 0.05vw #962e14;
  font-size: 1.2vw;
  font-weight: bold;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 0 0.3vw #be3c1c;
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
}
.fire {
    display: none;
    position: absolute;
    width: 10.5vw;
    left: 3vw;
    top: 1.8vw;
    aspect-ratio: 1.25/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 1;
    background-image: url(images/flame.gif);
    background-color: transparent;
    background-size: 80% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity calc(0.1s * var(--game-speed-factor)) ease-out;
    opacity: 0.85;
    mix-blend-mode: hard-light;
}
.flame {
    display: flex;
    position: absolute;
    width: 2vw;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    background-image: url(images/fire.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.metalBullet {
    display: flex;
    position: absolute;
    width: 1.5vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    background-color: hsl(0, 0%, 73%);
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    box-shadow: 0 0 0.5vw hsl(200,10%,95%);
}
.iceBullet {
    display: flex;
    position: absolute;
    width: 1.5vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    background-color: hsl(184, 100%, 74%);
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    box-shadow: 0 0 0.5vw hsl(200, 100%, 85%);
    border-radius: 100%;
}
.boneBullet {
    display: flex;
    position: absolute;
    width: 3vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    background-image: url(images/bone.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.realBullet {
    display: flex;
    position: absolute;
    width: 2.5vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    background-image: url(images/bullet.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.ice {
    display: flex;
    position: absolute;
    width: 2vw;
    left: 1.25vw;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    background-image: url(images/snowflake.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.posionBullet {
    display: flex;
    position: absolute;
    width: 1.5vw;
    left: 3vw;
    top: 3vw;
    aspect-ratio: 1/1;
    background-color: hsl(115, 71%, 44%);
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    box-shadow: 0 0 0.5vw hsl(113, 83%, 54%);
    border-radius: 100%;
}
.posion {
    display: flex;
    position: absolute;
    width: 2vw;
    left: 2vw;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    will-change: transform;
    z-index: 10;
    background-image: url(images/skeleton.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.posionPopup {
  position: absolute;
  color: hsl(115, 71%, 44%);
  -webkit-text-stroke: 0.05vw hsl(115, 49%, 27%);
  font-size: 1.2vw;
  font-weight: bold;
  pointer-events: none;
  z-index: 20;
  text-shadow: 0 0 0.3vw hsl(115, 54%, 41%);
  animation: damageFloat calc(0.8s * var(--game-speed-factor)) ease-out forwards;
}
.fiber {
    display: flex;
    position: absolute;
    aspect-ratio: 1/1;
    transform: translate(-50%, -50%);
    width: 5vw;
    left: 3vw;
    top: 3vw;
    z-index: 52;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    will-change: filter, transform;
}
.invDataText {
  position: absolute;
  top: -0.8vh;
  left: 50%;
  transform: translate(-50%,-100%);
  background: var(--llbg);
    opacity: 0.9;
  color: #fff;
  padding: 0.4vh 0.8vh;
  border-radius: 0.5vw;
  font-size: 2.5vh;
  text-align: center;
  z-index: 100;
  width: auto;
  height: auto;
    border: 0.1vw solid var(--bord);
    overflow: visible !important;
    align-items: center;
    justify-content: center;
}
.effect {
    display: flex;
    position: relative;
    height: 100%;
    aspect-ratio: 1/1.4;
    align-items: center;
    justify-content: center;
    background-image: url(images/effect1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text);
    text-shadow: 0 0 0.2vw #000;
  font-weight: 700;
}
.effectIcon {
    display: flex;
    position: absolute;
    height: 100%;
    aspect-ratio: 1/1;
    background-size: 45% 45%;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 0.2vw #000);
}
.redDot {
    display: flex;
    position: absolute;
    background-color: red;
    height: 0.8vw;
    aspect-ratio: 1/1;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    left: 95%;
    top: 5%;
    filter: drop-shadow(0 0 0.2vw #ff000096);
}
.indexImage {
    display: flex;
    width: 40vw;
    aspect-ratio: 16/9;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#rankList {
  width: 90%;
}
.rankItem {
          margin: 8px 0;
          padding: 12px;
          border-radius: 1.5vw;
          width: 96.75%;
}
.rankingTitle {
    display: flex;
    position: static;
  color: var(--text);
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 2.5vw;
  line-height: 5vw;
  font-weight: 700;
}
.rankingTitles {
    display: flex;
    position: static;
  color: var(--text);
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 1.75vw;
  line-height: 3vw;
}
.setting-item {
  display: inline-block;
  align-items: center;
  gap: 10px; /* 开关和文字间距 */
  margin: 15px 0;
  font-size: 16px;
  color: #333;
}

/* 2. 隐藏原生checkbox（保留功能，隐藏外观） */
.switch-input {
  display: none;
}

/* 3. 开关背景（未选中状态） */
.switch-slider {
  display: inline-block;
  width: 5vw; /* 开关宽度 */
  height: 2.5vw; /* 开关高度 */
  background-color: #9e9e9e; /* 未选中背景色 */
  border-radius: 1.25vw; /* 圆角（高度的一半） */
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 背景色过渡动画 */
}

/* 4. 开关滑块（圆形按钮） */
.switch-slider::after {
  content: "";
  position: absolute;
  width: 2vw; /* 滑块宽度（比开关高度小4px） */
  height: 2vw; /* 滑块高度 */
  border-radius: 50%;
  background-color: #fff; /* 滑块颜色 */
  top: 0.25vw; /* 上下居中 */
  left: 0.25vw; /* 未选中时的位置 */
  transition: left 0.3s ease; /* 滑块移动动画 */
}

/* 5. 选中状态（背景色+滑块位置变化） */
.switch-input:checked + .switch-slider {
  background-color: var(--prim); /* 选中背景色（紫色示例） */
}
.switch-input:checked + .switch-slider::after {
  left: 2.75vw; /* 选中时滑块右移（宽度-滑块宽度-2px） */
}

#settingMenu {
  width: 30vw;
  height: 70vh;
}
.aset {
  display: flex;
  margin-top: 1.75vh;
}
.setting-label {
  display: inline-flex;
  height: 2.5vw;
  width: 10vw;
  align-items: center;
  justify-content: right;
  color: var(--text);
  padding-left: 1vw;
}

#nameInput {
  /* 基础尺寸与边距 */
  width: 100%;
  max-width: 20%; /* 限制最大宽度，避免在宽屏上过长 */
  padding: 0.75vw 1vw; /* 内边距，增加输入空间 */
  margin: 2vw 0; /* 上下外边距，与周围元素分隔 */

  /* 边框与圆角 */
  border: 0.25vw solid #ddd; /* 浅灰色边框 */
  border-radius: 0.5vw; /* 圆角，柔和边缘 */
  outline: none; /* 去掉默认聚焦轮廓 */

  /* 字体样式 */
  font-family: 'RoundTC', sans-serif; /* 与游戏整体字体统一 */
  color: #333; /* 文字颜色 */
  font-size: 1vw;

  /* 背景与过渡 */
  background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景，增加层次感 */
  transition: all 0.3s ease; /* 所有状态变化添加过渡动画，更平滑 */

  /* 去除默认样式（如iOS的内阴影） */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 聚焦状态（点击输入时） */
#nameInput:focus {
  border-color: #6b8eae; /* 聚焦时边框变深（可换成游戏主题色） */
  box-shadow: 0 0 0 0.5vw rgba(107, 142, 174, 0.2); /* 轻微外发光，强化聚焦反馈 */
  background-color: #fff; /* 聚焦时背景更白，突出当前输入状态 */
}

/* 提示文字（placeholder）样式 */
#nameInput::placeholder {
  color: #999; /* 浅灰色，区分于输入文字 */
  font-style: italic; /* 斜体，进一步区分提示文字 */
  opacity: 0.8; /* 轻微透明 */
  font-size: 1vw;
}

.effectLvText {
  display: flex;
  position: absolute;
  color: var(--text);
  top: 5vh;
  font-size: 1.2vw;
    text-shadow: 0 0 0.2vw #000;
}

#preloadText {
  display: flex;
  position: fixed;
  transform: translate(-50%,-50%);
  color: var(--text);
  top: 75vh;
  left: 50vw;
  width: auto;
  opacity: 0;
    transition: opacity 0.5s linear;
    z-index: 10000;
    pointer-events: none;
    font-weight: 600;
}

#commentPoint {
  line-height: 4vw;
}

#comment {
  font-size: 2vw;
  font-weight: 700;
}

#commentDiff {
  line-height: 0vw;
  padding-bottom: 3.5vw;
}
.DiffTexts {
  font-size: 1.65vw;
  font-weight: 650;
}

#submitBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7vw;
  cursor: pointer;
}

#confirming {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
    z-index: 4000;
    background-color: hsla(200,10%,15%,95%);
    height: 40vh;
    width: 30vw;
    transform: translate(-50%, -50%);
    border-radius: 3vw;
    box-shadow: 0 0 3vw var(--shad);
    border: 0.2vw solid var(--bord);

}
#comfirmText {
  display: flex;
  position: absolute;
  top: 8vh;
  left: 50%;
  color: var(--text);
  font-size: 2.5vw;
  font-weight: 600;
  transform: translate(-50%, -50%);
  width: 80%;
  justify-content: center;
}
#tipText {
  display: flex;
  position: absolute;
  top: 45%;
  left: 50%;
  color: #f84141;
  font-size: 1.35vw;
  font-weight: 600;
  transform: translate(-50%, -50%);
  width: 80%;
  justify-content: center;
  text-align: center;
}
#confirmBtn {
  display: flex;
  position: absolute;
  top: 70%;
  left: 52.5%;
}
#cancelBtn {
  display: flex;
  position: absolute;
  background-color: gray;
  top: 70%;
  left: 12.5%;
}
.inlineIndexImage {
  display: inline-flex;
    width: 1.5vw;
    vertical-align: middle;
    aspect-ratio: 1/1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  margin: 0 0.2vw;
  margin-bottom: 0.3vw;
}
#pTable {
  display: grid;
    grid-template-columns: repeat(18,3vw);
    grid-template-rows: repeat(7,3vw);
    gap: 0.6vw;
    z-index: -50;
  margin-top: 3vh;
}
.ptItem {
  width: 2.25vw;
  height: 2.25vw;
}
#indexBackBtn {
  display: none;
  position: absolute;
  top: 5vh;
  left: 2.5vw;
  width: 2vw;
  aspect-ratio: 1/1;
  background-image: url(images/left.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  cursor: pointer;
}
#indexTextFrame {
  width: 100%;
}