@font-face {
  font-family: f2;
  src: url("/media/games/theme-connect/fonts/Ariston Comic Font.otf");
}
#game-area {
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(1);
  left: 50%;
  top: 50%;
  position: absolute;
  overflow: hidden;
  background: #c9fdff;
  --tc-travel: 0px;
}
#game-area .tc-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#game-area .tc-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #7fecf0 0%, #a4f4f8 22%, #c8fdff 46%, #c9fdff 100%);
}
#game-area .tc-cloud {
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: tcCloud linear infinite;
  will-change: transform;
}
#game-area .tc-c1 {
  top: 18px;
  width: 520px;
  height: 157px;
  background-image: url("/media/games/theme-connect/images/steam/cloud-1.webp");
  animation-duration: 140s;
  animation-delay: -30s;
}
#game-area .tc-c2 {
  top: 70px;
  width: 330px;
  height: 142px;
  background-image: url("/media/games/theme-connect/images/steam/cloud-2.webp");
  animation-duration: 110s;
  animation-delay: -85s;
}
#game-area .tc-c3 {
  top: 140px;
  width: 250px;
  height: 104px;
  background-image: url("/media/games/theme-connect/images/steam/cloud-3.webp");
  animation-duration: 90s;
  animation-delay: -12s;
}
#game-area .tc-layer {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: repeat-x;
  transition: background-position 1.2s cubic-bezier(0.35, 0.05, 0.2, 1);
}
#game-area .tc-mountains {
  top: 176px;
  height: 222px;
  background-image: url("/media/games/theme-connect/images/steam/mountains.webp");
  background-size: 1280px 222px;
  background-position: calc(var(--tc-travel) * 0.06) 0;
}
#game-area .tc-hills {
  top: 214px;
  height: 237px;
  background-image: url("/media/games/theme-connect/images/steam/hills.webp");
  background-size: 1280px 237px;
  background-position: calc(var(--tc-travel) * 0.14) 0;
}
#game-area .tc-grass-back {
  top: 384px;
  height: 242px;
  background-image: url("/media/games/theme-connect/images/steam/grass-back.webp");
  background-size: 1280px 242px;
  background-position: calc(var(--tc-travel) * 0.3) 0;
}
#game-area .tc-scenery {
  top: 16px;
  height: 416px;
  background-image: url("/media/games/theme-connect/images/steam/scenery.webp");
  background-size: 1280px 416px;
  background-position: calc(var(--tc-travel) * 0.3 + 160px) 0;
}
#game-area .tc-rails {
  top: 448px;
  height: 127px;
  background-image: url("/media/games/theme-connect/images/steam/rails.webp");
  background-size: 1280px 127px;
  background-position: var(--tc-travel) 0;
}
#game-area .tc-grass-front {
  top: 512px;
  height: 287px;
  background-image: url("/media/games/theme-connect/images/steam/grass-front.webp");
  background-size: 1280px 287px;
  background-position: calc(var(--tc-travel) * 1.25) 0;
}
#game-area .tc-engine {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
  margin-right: -6px;
}
#game-area .tc-loco {
  display: block;
  width: 265px;
  height: 234px;
  margin-bottom: -2px;
  background: url("/media/games/theme-connect/images/steam/loco-idle.webp") 0 0/1000% 100% no-repeat;
  animation: tcFrames 1.2s steps(10, jump-none) infinite;
}
#game-area .tc-tender {
  display: block;
  width: 151px;
  height: 128px;
  margin-left: -8px;
  background: url("/media/games/theme-connect/images/steam/tender-idle.webp") 0 0/100% 100% no-repeat;
}
#game-area .tc-run .tc-loco {
  background-image: url("/media/games/theme-connect/images/steam/loco-run.webp");
  animation-duration: 0.5s;
}
#game-area .tc-run .tc-tender {
  background: url("/media/games/theme-connect/images/steam/tender-run.webp") 0 0/1000% 100% no-repeat;
  animation: tcFrames 0.5s steps(10, jump-none) infinite;
}
#game-area .tc-board {
  border: 5px solid #1f1813;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff4d6 0%, #fff4d6 70%, rgb(255, 235.7902439024, 183.4) 100%);
  box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e;
  padding: 6px 20px 2px;
  text-align: center;
}
#game-area .tc-board p {
  margin: 0 0 2px;
  color: #17566a;
  font-family: puzzleGamesMainFont;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1.1;
}
#game-area .tc-board h6 {
  margin: 0;
  color: #1f1813;
  font-family: f2;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
}
#game-area #home-section {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999999;
}
#game-area #home-section #home-logo {
  height: 340px;
  position: absolute;
  left: 50%;
  top: 155px;
  transform: translateX(-50%);
}
#game-area #home-section #home-logo img {
  height: 100%;
  width: auto;
  opacity: 0;
  transform: scale(0);
  filter: drop-shadow(0 8px 0 rgba(31, 24, 19, 0.25));
}
#game-area #mode-section {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99999999999;
}
#game-area #mode-section #choose-category {
  position: absolute;
  left: 0;
  right: 0;
  top: 24px;
  width: max-content;
  margin: 0 auto;
  opacity: 0;
}
#game-area #mode-section #modes {
  position: absolute;
  left: 0;
  right: 0;
  top: 241px;
  display: flex;
  justify-content: center;
  gap: 44px;
  transform: scale(0);
  opacity: 0;
  z-index: 2;
  filter: drop-shadow(0 7px 0 #1f1813);
}
#game-area #mode-section .mode {
  width: 236px;
  height: 284px;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.25s ease;
}
#game-area #mode-section .mode:hover {
  transform: translateY(-6px);
}
#game-area #mode-section .mode:active {
  transform: scale(0.95);
  filter: brightness(1.08);
}
#game-area #mode-section .mode.tc-off {
  transform: scale(0);
  opacity: 0;
}
#game-area #mode-section #tc-howto-btn {
  border: 5px solid #1f1813;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255, 218.9330232558, 111.4) 0%, #ffc928 45%, #c98a00 100%);
  box-shadow: 0 6px 0 #1f1813, inset 0 3px 0 rgba(255, 255, 255, 0.55);
  color: #1f1813;
  font-family: puzzleGamesMainFont;
  letter-spacing: 1px;
  cursor: pointer;
  position: absolute;
  left: 24px;
  top: 34px;
  padding: 8px 22px 6px;
  font-size: 22px;
  transform: scale(0);
  transform-origin: left center;
  z-index: 3;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#game-area #mode-section #tc-howto-btn.tc-on {
  transform: scale(1);
}
#game-area #mode-section #tc-howto-btn:active {
  transform: scale(0.95);
}
#game-area .tc-title-sign {
  border: 5px solid #1f1813;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff4d6 0%, #fff4d6 70%, rgb(255, 235.7902439024, 183.4) 100%);
  box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e;
  padding: 8px 40px 4px;
  color: #c3302f;
  font-family: f2;
  font-size: 48px;
  letter-spacing: 3px;
  white-space: nowrap;
}
#game-area .tc-ticket {
  position: relative;
  width: 230px;
  height: 262px;
  display: flex;
  flex-direction: column;
  align-items: center;
  --tc-tk: #f0652b;
  border: 5px solid #1f1813;
  border-radius: 18px;
  background: radial-gradient(circle at 0 72%, transparent 0 12px, #1f1813 12px 17px, transparent 17px) border-box, radial-gradient(circle at 100% 72%, transparent 0 12px, #1f1813 12px 17px, transparent 17px) border-box, #fff4d6;
  -webkit-mask: radial-gradient(circle at 0 72%, transparent 0 12px, #000 12.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 72%, transparent 0 12px, #000 12.5px) right/51% 100% no-repeat;
  mask: radial-gradient(circle at 0 72%, transparent 0 12px, #000 12.5px) left/51% 100% no-repeat, radial-gradient(circle at 100% 72%, transparent 0 12px, #000 12.5px) right/51% 100% no-repeat;
}
#game-area .tc-ticket.tc-food {
  --tc-tk: #f0652b;
}
#game-area .tc-ticket.tc-celebs {
  --tc-tk: #f2b005;
}
#game-area .tc-ticket.tc-animals {
  --tc-tk: #3c9f4b;
}
#game-area .tc-ticket .tc-ticket-top {
  width: 100%;
  height: 118px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 5px solid #1f1813;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0 10px, transparent 10px), var(--tc-tk);
}
#game-area .tc-ticket .tc-ticket-top svg {
  width: 74px;
  height: 74px;
  fill: #ffffff;
  stroke: #1f1813;
  stroke-width: 1.3px;
  paint-order: stroke;
  filter: drop-shadow(0 4px 0 rgba(31, 24, 19, 0.35));
}
#game-area .tc-ticket .tc-ticket-name {
  margin-top: 22px;
  color: #1f1813;
  font-family: f2;
  font-size: 32px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1;
}
#game-area .tc-ticket .tc-ticket-stub {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 16px;
  padding-top: 14px;
  border-top: 4px dotted rgba(31, 24, 19, 0.3);
  color: #17566a;
  font-family: puzzleGamesMainFont;
  font-size: 22px;
  letter-spacing: 2px;
  text-align: center;
}
#game-area .tc-ticket .tc-ticket-stub span {
  margin-left: 6px;
  font-family: puzzleGamesMainFont;
  font-size: 26px;
  color: #1f1813;
}
#game-area .tc-ribbon {
  --tc-rib: #c98a00;
  position: absolute;
  left: 50%;
  top: 20px;
  z-index: 50;
  transform: translateX(-50%) scale(0);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#game-area .tc-ribbon span {
  display: block;
  padding: 6px 36px 4px;
  border: 5px solid #1f1813;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0 8px, transparent 8px), var(--tc-rib);
  box-shadow: 0 6px 0 #1f1813;
  color: #ffffff;
  font-family: puzzleGamesMainFont;
  font-size: 34px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 2px 0 #1f1813, -2px 0 #1f1813, 0 2px #1f1813, 0 -2px #1f1813, 2px 2px #1f1813, -2px 2px #1f1813, 2px -2px #1f1813, -2px -2px #1f1813, 0 4px 0 rgba(0, 0, 0, 0.25);
}
#game-area .tc-ribbon::before, #game-area .tc-ribbon::after {
  content: "";
  position: absolute;
  top: 16px;
  width: 44px;
  height: 44px;
  border: 5px solid #1f1813;
  border-radius: 10px;
  background: var(--tc-rib);
  filter: brightness(0.7);
  z-index: -1;
}
#game-area .tc-ribbon::before {
  left: -28px;
}
#game-area .tc-ribbon::after {
  right: -28px;
}
#game-area .tc-ribbon.tc-on {
  transform: translateX(-50%) scale(1);
}
#game-area .tc-ribbon.tc-you {
  --tc-rib: #2a8aa0;
}
#game-area .tc-ribbon.tc-game {
  --tc-rib: #c3302f;
}
#game-area .tc-ribbon.tc-gold {
  --tc-rib: #c98a00;
}
#game-area .tc-ribbon.tc-red {
  --tc-rib: #1f1813;
}
#game-area .tc-ribbon.tc-red span {
  color: #ffc928;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  animation: tcShake 0.4s ease 2;
}
#game-area .tc-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 460px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
#game-area .tc-train {
  position: absolute;
  left: 30px;
  bottom: 4px;
  width: max-content;
  display: flex;
  align-items: flex-end;
  transform-origin: left bottom;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#game-area .tc-train.tc-arrive .tc-engine {
  animation: tcArrive 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
#game-area .tc-car {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  min-width: 222px;
  height: 135px;
  margin-left: -3px;
  padding: 0 22px;
  background-position: 0 0, 100% 0, 20px 0;
  background-size: 22px 135px, 22px 135px, calc(100% - 40px) 135px;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.15), opacity 0.3s ease;
  --tc-accent: #17566a;
}
#game-area .tc-car.tc-you {
  background-image: url("/media/games/theme-connect/images/steam/coach-blue-cap.webp"), url("/media/games/theme-connect/images/steam/coach-blue-cap-r.webp"), url("/media/games/theme-connect/images/steam/coach-blue-tile.webp");
}
#game-area .tc-car.tc-you .tc-bogie {
  background-image: url("/media/games/theme-connect/images/steam/coach-blue-bogie.webp");
}
#game-area .tc-car.tc-game {
  background-image: url("/media/games/theme-connect/images/steam/coach-red-cap.webp"), url("/media/games/theme-connect/images/steam/coach-red-cap-r.webp"), url("/media/games/theme-connect/images/steam/coach-red-tile.webp");
  --tc-accent: #c3302f;
}
#game-area .tc-car.tc-game .tc-bogie {
  background-image: url("/media/games/theme-connect/images/steam/coach-red-bogie.webp");
}
#game-area .tc-car.tc-new {
  transform: translateX(260px);
  opacity: 0;
}
#game-area .tc-car p {
  position: relative;
  z-index: 2;
  margin-top: 30px;
  padding: 0 16px;
  height: 46px;
  font-family: f2;
  font-size: 37px;
  line-height: 48px;
  letter-spacing: 2px;
  color: #1f1813;
  white-space: nowrap;
}
#game-area .tc-car p span {
  font-family: f2;
}
#game-area .tc-car p .tc-first {
  color: var(--tc-accent);
}
#game-area .tc-car p .tc-last {
  display: inline-block;
  margin-left: 3px;
  padding: 0 5px;
  height: 40px;
  line-height: 42px;
  border: 3px solid #1f1813;
  border-radius: 9px;
  background: #ff9a1f;
  color: #ffffff;
  text-shadow: 2px 0 #1f1813, -2px 0 #1f1813, 0 2px #1f1813, 0 -2px #1f1813, 2px 2px #1f1813, -2px 2px #1f1813, 2px -2px #1f1813, -2px -2px #1f1813, 0 4px 0 rgba(0, 0, 0, 0.25);
  vertical-align: 2px;
}
#game-area .tc-car.tc-head .tc-last, #game-area .tc-car.tc-glow .tc-last {
  animation: tcLetter 0.8s ease-in-out infinite alternate;
}
#game-area .tc-car .tc-bogie {
  position: absolute;
  bottom: 0;
  left: 14px;
  width: 89px;
  height: 35px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#game-area .tc-car .tc-b2 {
  left: auto;
  right: 14px;
  transform: scaleX(-1);
}
#game-area .tc-car .tc-tag {
  position: absolute;
  left: 50%;
  top: -50px;
  z-index: 5;
  padding: 4px 18px;
  border: 4px solid #1f1813;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 0 #1f1813;
  color: #c3302f;
  font-family: puzzleGamesMainFont;
  font-size: 26px;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-6deg);
  animation: tcTag 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
#game-area .tc-car.tc-said {
  animation: tcSaid 0.45s ease-in-out 4;
}
#game-area .tc-console {
  position: absolute;
  left: 0;
  top: 532px;
  width: 1280px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  z-index: 3;
}
#game-area .tc-bar {
  border: 5px solid #1f1813;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff4d6 0%, #fff4d6 70%, rgb(255, 235.7902439024, 183.4) 100%);
  box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e;
  position: relative;
  width: 640px;
  height: 90px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 28px;
  border-radius: 46px;
}
#game-area .tc-bar input, #game-area .tc-bar .tc-demo-text {
  flex: 1;
  min-width: 0;
  position: relative;
  top: 7px;
  height: 70px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #1f1813;
  font-family: f2;
  font-size: 46px;
  line-height: 70px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
#game-area .tc-bar input::placeholder, #game-area .tc-bar .tc-demo-text::placeholder {
  color: rgba(23, 86, 106, 0.5);
  font-family: puzzleGamesMainFont;
  font-size: 26px;
  letter-spacing: 1px;
}
#game-area .tc-bar input:disabled, #game-area .tc-bar .tc-demo-text:disabled {
  cursor: default;
}
#game-area .tc-bar input:placeholder-shown {
  top: 0;
}
#game-area .tc-bar input:disabled::placeholder {
  color: transparent;
}
#game-area .tc-bar.tc-turn {
  animation: tcBarGlow 1.2s ease-in-out infinite alternate;
}
#game-area #tc-ptt, #game-area .tc-btn {
  transition: opacity 0.25s ease, visibility 0.25s;
}
#game-area #tc-ptt {
  display: flex;
  align-items: center;
  gap: 10px;
}
#game-area #tc-ptt.tc-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#game-area #tc-ptt button, #game-area .tc-btn {
  flex: none;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 4px solid #1f1813;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.2s ease, filter 0.2s ease;
}
#game-area #tc-ptt button svg, #game-area .tc-btn svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  pointer-events: none;
}
#game-area #tc-ptt button:active, #game-area .tc-btn:active {
  transform: scale(0.94);
}
#game-area #tc-ptt-mic, #game-area .tc-mic {
  background: linear-gradient(180deg, rgb(216.8173553719, 97.3950413223, 96.5826446281), #c3302f 55%, #7a171a);
  box-shadow: 0 4px 0 #1f1813, inset 0 3px 0 rgba(255, 255, 255, 0.35);
  color: #ffffff;
  animation: tcPttPulse 1.1s ease-in-out infinite alternate;
}
#game-area #tc-ptt.active #tc-ptt-mic, #game-area .tc-mic.tc-live {
  background: linear-gradient(180deg, #ff8a5c, #ff4a1c);
  color: #ffffff;
  animation: tcPttRecord 1.2s ease-out infinite;
}
#game-area #tc-ptt-send, #game-area .tc-send {
  background: linear-gradient(180deg, rgb(255, 218.9330232558, 111.4), #ffc928 50%, #c98a00);
  box-shadow: 0 4px 0 #1f1813, inset 0 3px 0 rgba(255, 255, 255, 0.5);
  color: #1f1813;
}
#game-area #tc-ptt-send svg, #game-area .tc-send svg {
  margin-left: 3px;
}
#game-area #tc-ptt-send:disabled {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: default;
  pointer-events: none;
}
#game-area #tc-clock {
  --tc-clk: #2a8aa0;
  position: absolute;
  left: 198px;
  top: -5px;
  width: 96px;
  height: 108px;
  transform: scale(0);
  transform-origin: 50% 55%;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
#game-area #tc-clock.tc-on {
  transform: scale(1);
}
#game-area #tc-clock.tc-mid {
  --tc-clk: #ff9a1f;
}
#game-area #tc-clock.tc-low {
  --tc-clk: #c3302f;
}
#game-area #tc-clock.tc-low b {
  color: #c3302f;
}
#game-area #tc-clock.tc-live.tc-low .tc-clock-body {
  animation: tcClockShake 0.5s ease-in-out infinite;
}
#game-area #tc-clock .tc-clock-body {
  position: relative;
  width: 100%;
  height: 100%;
}
#game-area #tc-clock svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 0 #1f1813);
}
#game-area #tc-clock .tc-clock-crown, #game-area #tc-clock .tc-clock-side {
  fill: #ffc928;
  stroke: #1f1813;
  stroke-width: 5px;
}
#game-area #tc-clock .tc-clock-stem {
  fill: #1f1813;
}
#game-area #tc-clock .tc-clock-face {
  fill: #fff4d6;
  stroke: #1f1813;
  stroke-width: 5px;
}
#game-area #tc-clock .tc-clock-track {
  fill: none;
  stroke: rgba(31, 24, 19, 0.12);
  stroke-width: 12px;
}
#game-area #tc-clock .tc-clock-fill {
  fill: none;
  stroke: var(--tc-clk);
  stroke-width: 12px;
  stroke-dasharray: 201.06;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}
#game-area #tc-clock.tc-live .tc-clock-fill {
  transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}
#game-area #tc-clock .tc-clock-rim {
  fill: none;
  stroke: #1f1813;
  stroke-width: 3px;
}
#game-area #tc-clock b {
  position: absolute;
  left: 0;
  right: 0;
  top: 55.4%;
  margin: 0;
  transform: translateY(-50%);
  color: #1f1813;
  font-family: f2;
  font-size: 34px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  transition: color 0.3s ease;
}
#game-area .tc-pulse {
  animation: tcPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 2 !important;
}
#game-area #tc-howto {
  position: absolute;
  inset: 0;
  z-index: 99999999999;
}
#game-area #tc-howto .tc-score {
  position: absolute;
  right: 24px;
  top: 16px;
  z-index: 4;
}
#game-area #tc-howto .tc-picks {
  position: absolute;
  left: 0;
  right: 0;
  top: 218px;
  display: flex;
  justify-content: center;
  gap: 26px;
  z-index: 20;
  filter: drop-shadow(0 7px 0 #1f1813);
}
#game-area #tc-howto .tc-picks .tc-ticket {
  width: 210px;
  height: 196px;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#game-area #tc-howto .tc-picks .tc-ticket.tc-on {
  transform: scale(1);
}
#game-area #tc-howto .tc-bar .tc-btn {
  cursor: default;
}
#game-area #tc-howto #tc-skip {
  border: 5px solid #1f1813;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255, 218.9330232558, 111.4) 0%, #ffc928 45%, #c98a00 100%);
  box-shadow: 0 6px 0 #1f1813, inset 0 3px 0 rgba(255, 255, 255, 0.55);
  color: #1f1813;
  font-family: puzzleGamesMainFont;
  letter-spacing: 1px;
  cursor: pointer;
  position: absolute;
  left: 24px;
  top: 560px;
  padding: 8px 26px 6px;
  font-size: 24px;
  z-index: 4;
}
#game-area #tc-howto #tc-skip:active {
  transform: scale(0.95);
}
#game-area #play-section {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#game-area #play-section #animGroup {
  position: relative;
  z-index: 4;
  opacity: 0;
}
#game-area #play-section #current-mode, #game-area #play-section #score {
  position: absolute;
  top: 16px;
}
#game-area #play-section #current-mode {
  left: 24px;
}
#game-area #play-section #score {
  right: 24px;
  min-width: 104px;
}
#game-area #play-section #current-mode-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100px;
  width: auto;
  margin-top: 10px;
  cursor: pointer;
  z-index: 9999;
  visibility: hidden;
}
#game-area #play-section #current-mode-logo:active {
  transform: translateX(-50%) scale(0.95);
  opacity: 0.9;
  filter: brightness(1.1);
  transition: 0.2s;
}
#game-area #play-section #current-mode-logo img {
  height: 100%;
  animation: logoAnim_v2 1.5s infinite;
}
#game-area #end-section {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 99999;
}
#game-area #end-section .content {
  border: 5px solid #1f1813;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff4d6 0%, #fff4d6 70%, rgb(255, 235.7902439024, 183.4) 100%);
  box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e;
  position: absolute;
  left: 50%;
  top: 164px;
  width: 640px;
  height: 384px;
  margin-left: -320px;
  text-align: center;
}
#game-area #end-section .tc-end-title {
  display: inline-block;
  margin-top: -30px;
  padding: 6px 40px 2px;
  border: 5px solid #1f1813;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0 8px, transparent 8px), #c3302f;
  box-shadow: 0 6px 0 #1f1813;
  color: #ffffff;
  font-family: f2;
  font-size: 52px;
  letter-spacing: 3px;
  text-shadow: 3px 0 #1f1813, -3px 0 #1f1813, 0 3px #1f1813, 0 -3px #1f1813, 3px 3px #1f1813, -3px 3px #1f1813, 3px -3px #1f1813, -3px -3px #1f1813, 0 6px 0 rgba(0, 0, 0, 0.25);
}
#game-area #end-section .tc-end-label {
  margin-top: 18px;
  color: #17566a;
  font-family: puzzleGamesMainFont;
  font-size: 26px;
  letter-spacing: 3px;
}
#game-area #end-section #end-score {
  width: 100%;
  opacity: 0;
}
#game-area #end-section #end-score p {
  color: #ff9a1f;
  font-family: f2;
  font-size: 110px;
  line-height: 120px;
  text-shadow: 5px 0 #1f1813, -5px 0 #1f1813, 0 5px #1f1813, 0 -5px #1f1813, 5px 5px #1f1813, -5px 5px #1f1813, 5px -5px #1f1813, -5px -5px #1f1813, 0 10px 0 rgba(0, 0, 0, 0.25);
}
#game-area #end-section #end-btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 26px;
}
#game-area #end-section #end-btns div {
  border: 5px solid #1f1813;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255, 218.9330232558, 111.4) 0%, #ffc928 45%, #c98a00 100%);
  box-shadow: 0 6px 0 #1f1813, inset 0 3px 0 rgba(255, 255, 255, 0.55);
  color: #1f1813;
  font-family: puzzleGamesMainFont;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 12px 30px 8px;
  font-size: 28px;
  opacity: 0;
  transition: transform 0.12s ease;
}
#game-area #end-section #end-btns div:active {
  transform: scale(0.95);
  filter: brightness(1.08);
}
#game-area #end-section #end-btns .tc-end-switch {
  background: linear-gradient(180deg, rgb(75.6732673267, 183.2693069307, 207.9267326733), #2a8aa0 50%, #17566a);
  color: #ffffff;
  text-shadow: 2px 0 #1f1813, -2px 0 #1f1813, 0 2px #1f1813, 0 -2px #1f1813, 2px 2px #1f1813, -2px 2px #1f1813, 2px -2px #1f1813, -2px -2px #1f1813, 0 4px 0 rgba(0, 0, 0, 0.25);
}

@keyframes tcFrames {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: 100%;
  }
}
@keyframes tcCloud {
  from {
    transform: translateX(1300px);
  }
  to {
    transform: translateX(-640px);
  }
}
@keyframes tcPttPulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
@keyframes tcPttRecord {
  0% {
    box-shadow: 0 4px 0 #1f1813, 0 0 0 0 rgba(255, 90, 40, 0.6);
  }
  100% {
    box-shadow: 0 4px 0 #1f1813, 0 0 0 16px rgba(255, 90, 40, 0);
  }
}
@keyframes tcArrive {
  from {
    transform: translateX(1150px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes tcLetter {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.3);
  }
}
@keyframes tcSaid {
  0%, 100% {
    filter: none;
  }
  50% {
    filter: sepia(1) saturate(6) hue-rotate(-50deg) brightness(1.1);
  }
}
@keyframes tcTag {
  from {
    transform: translateX(-50%) rotate(-6deg) scale(0);
  }
  to {
    transform: translateX(-50%) rotate(-6deg) scale(1);
  }
}
@keyframes tcShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}
@keyframes tcClockShake {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(7deg);
  }
}
@keyframes tcPop {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}
@keyframes tcBarGlow {
  from {
    box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e, 0 0 0 0 rgba(255, 154, 31, 0);
  }
  to {
    box-shadow: 0 6px 0 #1f1813, 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 6px 0 #f0d27e, 0 0 0 8px rgba(255, 154, 31, 0.6);
  }
}
@media (max-width: 600px) {
  #game-area #play-section #current-mode-logo {
    visibility: visible;
  }
}