@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik+Mono+One");
* {
  font-size: 32px;
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

a {
  text-decoration: inherit; /* no underline */
  color: inherit;
}

input {
  font-size: initial;
} /* 避免輸入時手機版畫面自動放大 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.game-button {
  position: relative;
  top: 0;
  cursor: pointer;
  text-decoration: none !important;
  outline: none !important;
  min-width: 100px;
  font-size: 28px;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px #004a87;
  border: none;
  margin: 15px 15px 30px;
  background: repeating-linear-gradient(45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
  border-bottom: 3px solid rgba(16, 91, 146, 0.5);
  border-top: 3px solid rgba(255, 255, 255, 0.3);
  color: #fff !important;
  border-radius: 32px;
  padding: 8px 15px 10px;
  box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
}
.game-button:hover, .game-button:focus {
  top: 2px;
  box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
}
.game-button::before {
  content: "";
  height: 10%;
  position: absolute;
  width: 40%;
  background: #fff;
  right: 13%;
  top: -3%;
  border-radius: 99px;
}
.game-button::after {
  content: "";
  height: 10%;
  position: absolute;
  width: 5%;
  background: #fff;
  right: 5%;
  top: -3%;
  border-radius: 99px;
}
.game-button.orange {
  background: repeating-linear-gradient(45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
  box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid rgba(205, 102, 0, 0.5);
  text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px #c96100;
}
.game-button.orange:hover, .game-button.orange:focus {
  top: 2px;
  box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
}
.game-button.red {
  background: repeating-linear-gradient(45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
  box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid rgba(160, 25, 23, 0.5);
  text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px #930704;
}
.game-button.red:hover, .game-button.red:focus {
  top: 2px;
  box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
}
.game-button.green {
  background: repeating-linear-gradient(45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
  box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0, 0, 0, 0.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0, 0, 0, 0.3);
  border-bottom: 3px solid rgba(40, 117, 29, 0.5);
  text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
}
.game-button.green:hover, .game-button.green:focus {
  top: 2px;
  box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0, 0, 0, 0.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0, 0, 0, 0.3);
}
.game-button:disabled::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.606);
  pointer-events: none;
}

.kitchen {
  z-index: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
  background: url("./assets/image/bg.png") no-repeat 50% 30%/100%;
  transition: background 0.7s ease-in-out;
  overflow: hidden;
}
.kitchen .kitchenTable {
  z-index: -1;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100px);
  transition: transform 0.8s ease-in-out;
  pointer-events: none;
}
.kitchen .page {
  z-index: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100vw;
  height: 100vh !important;
  transition: opacity 1s ease-out;
}
.kitchen .page#page1 {
  opacity: 1;
  height: auto;
}
.kitchen .page#page2 {
  opacity: 0;
  height: 0 !important;
}
.kitchen .page#page2 .page2Content {
  transform: translateY(-200%);
}
.kitchen #page1 #levelsCtn {
  position: absolute;
  top: 50px;
  left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.kitchen #page1 #levelsCtn button {
  width: 200px;
  height: 54.5px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.606);
  text-align: left;
  color: rgb(255, 149, 0);
  text-shadow: 3px 3px rgb(121, 72, 3);
}
.kitchen #page1 #levelsCtn button:focus {
  outline: 5px solid rgb(255, 149, 0);
}
.kitchen #page1 #levelsCtn .levelRadioInput {
  display: none;
}
.kitchen #page1 #levelsCtn .levelRadioLabel {
  position: relative;
  font-size: 28px;
  padding-left: 40px;
  padding: 0 10px 0 50px;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: 700;
  cursor: pointer;
}
.kitchen #page1 #levelsCtn .levelRadioButton {
  position: absolute;
  left: 10px;
  top: 50%;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border: 5px solid rgb(255, 149, 0);
  border-radius: 50%;
  transform: translateY(-50%);
}
.kitchen #page1 #levelsCtn .levelRadioButton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 149, 0);
  opacity: 0;
  transition: opacity 0.2s;
}
.kitchen #page1 #levelsCtn .levelRadioInput:checked ~ .levelRadioLabel .levelRadioButton::after {
  opacity: 1;
}
.kitchen #page1 .page1Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.kitchen #page1 .page1Content .title {
  color: rgb(246, 186, 208);
  font-family: "Luckiest Guy", cursive;
  font-size: 80px;
  text-align: center;
  letter-spacing: 4.44px;
  text-shadow: -2.67px -2.67px rgb(219, 98, 98), -2.22px -2.22px rgb(219, 98, 98), -1.78px -1.78px rgb(219, 98, 98), -1.33px -1.33px rgb(219, 98, 98), -0.89px -0.89px rgb(219, 98, 98), -0.44px -0.44px rgb(219, 98, 98), 0.44px 0.44px rgb(219, 98, 98), 0.89px 0.89px rgb(219, 98, 98), 1.33px 1.33px rgb(219, 98, 98), 1.78px 1.78px rgb(219, 98, 98), 2.22px 2.22px rgb(219, 98, 98), 2.67px 2.67px rgb(219, 98, 98), 3.11px 3.11px rgb(219, 98, 98), 3.56px 3.56px rgb(219, 98, 98), 4px 4px rgb(219, 98, 98), 4.44px 4.44px rgb(219, 98, 98), 4.89px 4.89px rgb(219, 98, 98), 5.33px 5.33px rgb(219, 98, 98), 5.78px 5.78px rgb(219, 98, 98), 6.22px 6.22px rgb(219, 98, 98), 6.67px 6.67px rgb(219, 98, 98), 7.11px 7.11px rgb(219, 98, 98), 7.56px 7.56px rgb(219, 98, 98), 8px 8px rgb(219, 98, 98), 8.44px 8.44px rgb(219, 98, 98), 8.89px 8.89px rgb(219, 98, 98), 9.33px 9.33px rgb(219, 98, 98), 9.78px 9.78px rgb(219, 98, 98), 10.22px 10.22px rgb(219, 98, 98), 10.67px 10.67px rgb(219, 98, 98), 11.11px 11.11px rgb(219, 98, 98), 11.56px 11.56px rgb(219, 98, 98), 12px 12px rgb(219, 98, 98), 12.44px 12.44px rgb(219, 98, 98), 12.89px 12.89px rgb(219, 98, 98), 13.33px 13.33px rgb(219, 98, 98), 13.78px 13.78px rgb(219, 98, 98), 14.22px 14.22px rgb(219, 98, 98), 14.67px 14.67px rgb(219, 98, 98), 15.11px 15.11px rgb(219, 98, 98), 15.56px 15.56px rgb(219, 98, 98), 16px 16px rgb(219, 98, 98);
}
.kitchen #page1 .page1Content #userName {
  width: 330px;
  padding: 0 10px;
  font-size: 32px;
  border: 7px solid rgb(255, 166, 43);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.606);
  color: rgb(121, 72, 3);
}
.kitchen #page1 .page1Content #userName:focus {
  outline: none;
  color: rgb(121, 72, 3);
}
.kitchen #page1 .page1Content #userName::-moz-placeholder {
  color: rgb(174, 174, 174);
  opacity: 1;
}
.kitchen #page1 .page1Content #userName::placeholder {
  color: rgb(174, 174, 174);
  opacity: 1;
}
.kitchen #page1 .page1Content #userName::-ms-input-placeholder {
  color: rgb(255, 166, 43);
}
.kitchen #page1 .page1Content #startBtn {
  border-radius: 32px;
  font-size: 32px;
}
.kitchen #page2 #recordsCtn {
  position: absolute;
  top: 50px;
  left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}
.kitchen #page2 #recordsCtn button {
  width: 200px;
  height: 54.5px;
  border-radius: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.606);
  text-align: left;
  color: rgb(255, 149, 0);
  text-shadow: 3px 3px rgb(121, 72, 3);
}
.kitchen #page2 #recordsCtn button:focus {
  outline: 5px solid rgb(255, 149, 0);
}
.kitchen #page2 #recordsCtn button {
  padding: 0 20px;
  text-transform: uppercase;
}
.kitchen #page2 .page2Content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kitchen #page2 #targetTimeCtn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  font-family: "Luckiest Guy", cursive;
  font-size: 80px;
  text-align: center;
  letter-spacing: 4.44px;
  background: rgba(255, 255, 255, 0.606);
}
.kitchen #page2 #targetTimeCtn #targetTimeCircle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff4d4d, #ffcc00, #33cc33, #33ccff, #ff4d4d);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 30px), black calc(100% - 25px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 30px), black calc(100% - 25px));
}
.kitchen #page2 #targetTimeCtn #targetTimeCircle.rotate {
  animation: rotate 3s linear infinite;
}
.kitchen #page2 #targetTimeCtn #targetTimeDisplay {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 190px;
  color: rgb(255, 149, 0);
  text-shadow: 3px 3px rgb(121, 72, 3);
}
.kitchen #page2 #targetTimeCtn #timerDisplay {
  position: absolute;
  bottom: 100px;
  padding: 2px 5px;
  border-radius: 20px;
  font-family: "Rubik Mono One", monospace;
  transition: 1s all ease-in-out;
}
.kitchen #page2 #targetTimeCtn #timerDisplay::after {
  content: "???";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: 100%;
  color: white;
  opacity: 0;
  transition: 1s all ease-in-out;
}
.kitchen #page2 #targetTimeCtn.mask #timerDisplay {
  color: transparent;
  background: black;
}
.kitchen #page2 #targetTimeCtn.mask #timerDisplay::after {
  opacity: 1;
}
.kitchen #page2 #targetTimeCtn.mask-less #timerDisplay {
  filter: blur(8px);
  color: inherit;
  background: rgba(0, 0, 0, 0.428);
}
.kitchen #page2 #targetTimeCtn.mask-less #timerDisplay::after {
  opacity: 0;
}

.inPage2 .kitchen {
  background-size: 130%;
  background-position: 50% 50%;
}
.inPage2 .kitchen .kitchenTable {
  transform: translateY(110%) !important;
}
.inPage2 .kitchen .page#page1 {
  opacity: 0;
  height: 0 !important;
}
.inPage2 .kitchen .page#page1 #levelsCtn {
  display: none;
}
.inPage2 .kitchen .page#page1 .page1Content {
  transform: translateY(-200%);
}
.inPage2 .kitchen .page#page2 {
  opacity: 1;
  height: 100vh !important;
}
.inPage2 .kitchen .page#page2 .page2Content {
  transform: translateY(0);
}

.modal * {
  font-size: 20px !important;
  font-weight: 700;
  text-transform: uppercase;
}
.modal .modal-dialog {
  min-width: 35vw;
}
.modal .modal-header {
  padding: 10px 32px;
  border-bottom: 3px solid white;
}
.modal .modal-title {
  font-size: 32px !important;
}
.modal .modal-content {
  color: white;
  background: rgb(246, 186, 208);
  background: radial-gradient(circle, rgb(246, 186, 208) 0%, rgb(148, 153, 233) 100%);
  box-shadow: 5px 5px 50px rgb(219, 98, 98);
}
.modal .modal-content table {
  border: 1px solid rgb(174, 174, 174);
  border-collapse: collapse;
  width: 100%;
  background: rgba(0, 0, 0, 0.507);
  border-radius: 15px;
  text-align: center;
}
.modal .modal-content thead {
  border-bottom: 1px solid white;
}
.modal .modal-content th,
.modal .modal-content td {
  text-align: center;
  padding: 2px 10px;
  text-transform: uppercase;
}
.modal .modal-content .resultModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.modal .modal-content .recordModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.modal .modal-content .recordModalBody .recordModalBodyTitle {
  font-size: 28px !important;
}
.modal .modal-content .recordModalBody #bestRecordDisplay {
  font-size: 50px !important;
  width: 100%;
  background: rgba(0, 0, 0, 0.507);
  border-radius: 15px;
  text-align: center;
}
.modal .modal-content .resultCloseBtn {
  width: auto;
  height: 40px;
  padding: 0 10px;
}
.modal .modal-content .recordCloseBtn {
  width: 40px;
  height: 40px;
  filter: invert(1) brightness(2);
  padding: 0;
}