@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../Assets/Fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../Assets/Fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../Assets/Fonts/Roboto-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../Assets/Fonts/Roboto-Black.ttf") format("truetype");
}

:root {
  color-scheme: dark;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  --jade: #0f6f56;
  --jade-light: #45d2a2;
  --gold: #f5c75b;
  --ivory: #fff3cf;
  --crimson: #8f1e25;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020b09;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
}

button { font: inherit; }

#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, #163d32 0, #06110e 62%, #020604 100%);
}

#game {
  position: relative;
  flex: 0 0 1280px;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  transform-origin: center center;
  background: #102a22;
  box-shadow: 0 0 70px rgba(44, 191, 143, 0.18);
}

body.gd-ad-active #game { pointer-events: none; }

.screen {
  position: absolute;
  inset: 0;
  display: none;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1280px 720px;
}

.screen.active {
  display: block;
  animation: screen-in 260ms ease-out both;
}

@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.title-bg { background-image: url("../Assets/TittleScreenBackground.jpg"); }
.level-bg { background-image: url("../Assets/LevelSelectScreenBackground.jpg"); }
.gameplay-bg { background-image: url("../Assets/GamePlayScreenBackground.jpg"); }

.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-particle {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.ambient-particle.petal {
  left: var(--x);
  top: -55px;
  width: var(--size);
  height: auto;
  aspect-ratio: 1.6 / 1;
  border-radius: 75% 18% 72% 24%;
  opacity: 0;
  background: linear-gradient(145deg, rgba(255, 249, 250, 0.96), rgba(255, 172, 195, 0.9) 52%, rgba(211, 84, 127, 0.74));
  box-shadow: 0 0 5px rgba(255, 202, 218, 0.52);
  animation: petal-fall var(--duration) linear var(--delay) infinite;
}

.ambient-particle.petal::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 6%;
  width: 18%;
  height: 72%;
  border-radius: 50%;
  background: rgba(178, 70, 108, 0.28);
  transform: rotate(24deg);
}

.ambient-particle.mote {
  left: var(--x);
  bottom: -20px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 231, 143, 0.92);
  box-shadow: 0 0 7px 2px rgba(255, 210, 96, 0.52), 0 0 15px rgba(78, 226, 165, 0.34);
  animation: mote-rise var(--duration) ease-in-out var(--delay) infinite;
}

.gameplay-bg .ambient-particle.petal { filter: saturate(0.82); }
.gameplay-bg .ambient-particle.mote { filter: brightness(0.82); }

@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, -35px, 0) rotate(0deg) scale(0.72); }
  8% { opacity: 0.72; }
  46% { transform: translate3d(var(--mid-drift), 345px, 0) rotate(190deg); }
  88% { opacity: 0.64; }
  100% { opacity: 0; transform: translate3d(var(--drift), 790px, 0) rotate(var(--spin)) scale(1.05); }
}

@keyframes mote-rise {
  0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.45); }
  18% { opacity: 0.55; }
  50% { opacity: 0.82; transform: translate3d(var(--mid-drift), -340px, 0) scale(1); }
  82% { opacity: 0.35; }
  100% { opacity: 0; transform: translate3d(var(--drift), -760px, 0) scale(0.55); }
}

.image-button {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  filter: drop-shadow(0 5px 7px rgba(26, 10, 1, 0.58));
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.image-button:hover:not(:disabled) {
  transform: scale(1.045);
  filter: brightness(1.09) drop-shadow(0 0 10px rgba(255, 215, 100, 0.7));
}

.image-button:active:not(:disabled) { transform: scale(0.96); }

.image-button:focus-visible,
.tile:focus-visible,
.level-button:focus-visible,
#tutorial-close:focus-visible {
  outline: 4px solid #fff7bf;
  outline-offset: 3px;
}

.image-button:disabled {
  cursor: default;
  opacity: 0.4;
  filter: grayscale(0.4);
}

.audio-button {
  width: 86px;
  height: 86px;
  background-image: url("../Assets/AudioButton.png");
}

.audio-button.muted { background-image: url("../Assets/AudioMuteButton.png"); }
.back-button { width: 86px; height: 86px; background-image: url("../Assets/BackButton.png"); }
.restart-button { width: 86px; height: 86px; background-image: url("../Assets/RestartButton.png"); }

.loading-panel {
  position: absolute;
  left: 650px;
  bottom: 36px;
  width: 500px;
  padding: 14px 24px 13px;
  border: 3px solid #d7a93d;
  border-radius: 16px;
  color: var(--ivory);
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 91, 65, 0.97), rgba(4, 49, 39, 0.98));
  box-shadow: 0 0 22px rgba(255, 208, 89, 0.34), inset 0 0 16px rgba(255,255,255,0.08);
}

.loading-label {
  margin-bottom: 10px;
  color: #fff1bd;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 2px 2px #40180a;
}

.loading-track {
  height: 20px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid #e3bb58;
  border-radius: 10px;
  background: #13261f;
  box-shadow: inset 0 0 8px #000;
}

#loading-fill {
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #0d7757, #53d49d 56%, #f2d170);
  box-shadow: 0 0 13px rgba(80, 232, 175, 0.8);
  transition: width 130ms ease-out;
}

#loading-percent {
  margin-top: 7px;
  color: white;
  font-size: 18px;
  font-weight: 900;
}

.title-audio { top: 27px; right: 27px; }
.play-button {
  left: 650px;
  top: 462px;
  width: 328px;
  height: 128px;
  background-image: url("../Assets/TittleScreen_PlayButton.png");
}

.level-back { top: 22px; left: 22px; }
.level-audio { top: 22px; right: 22px; }

#level-grid {
  position: absolute;
  left: 413px;
  top: 139px;
  display: grid;
  grid-template-columns: repeat(6, 88px);
  grid-template-rows: repeat(5, 92px);
  column-gap: 18px;
  row-gap: 0;
  width: 618px;
  height: 460px;
}

.level-button {
  position: relative;
  width: 88px;
  height: 92px;
  margin: 0;
  padding: 0 0 3px;
  align-self: center;
  justify-self: center;
  border: 0;
  color: #fff2be;
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  text-shadow: 0 2px 2px #371307, 0 0 6px rgba(255, 225, 139, 0.38);
  transition: transform 120ms ease, filter 120ms ease;
}

.level-button.completed { background-image: url("../Assets/LevelSelectScreen_AlreadyCompletedLevelButton.png"); }
.level-button.unlocked {
  color: #522518;
  background-image: url("../Assets/LevelSelectScreen_UnlockedLevelButton.png");
  text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
.level-button.locked {
  padding-bottom: 22px;
  color: #743829;
  font-size: 27px;
  background-image: url("../Assets/LevelSelectScreen_LockedLevelButton.png");
  cursor: default;
  text-shadow: 0 1px 1px rgba(255,255,255,0.58);
}

.level-button:hover:not(.locked) { transform: scale(1.06); filter: brightness(1.13) drop-shadow(0 0 8px #ffe899); }
.level-button:active:not(.locked) { transform: scale(0.96); }

.page-controls {
  position: absolute;
  left: 526px;
  top: 624px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-prev,
.page-next {
  position: relative;
  width: 66px;
  height: 66px;
}

.page-prev { background-image: url("../Assets/LevelSelectScreen_PageDecreaseButton.png"); }
.page-next { background-image: url("../Assets/LevelSelectScreen_PageIncreaseButton.png"); }

#page-indicator {
  display: grid;
  width: 213px;
  height: 70px;
  place-items: center;
  padding-bottom: 3px;
  color: #fff3c7;
  font-size: 27px;
  font-weight: 900;
  background: url("../Assets/LevelSelectScreen_PageNoPanel.png") center / contain no-repeat;
  text-shadow: 0 2px 3px #3c160c;
}

.game-back { top: 18px; left: 18px; }
.restart-button { top: 18px; right: 112px; }
.game-audio { top: 18px; right: 18px; }

.game-info {
  position: absolute;
  left: 416px;
  top: 14px;
  width: 472px;
  height: 97px;
  color: #fff3c5;
  background: url("../Assets/GamePlayScreen_UpperPanel_Time_Level_Score.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 6px rgba(29, 10, 1, 0.55));
}

.info-value {
  position: absolute;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 58px;
  color: white;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.02;
  text-shadow: 0 2px 2px #38150a;
}

.info-value > span {
  transform: translateY(3px);
}

.info-label {
  margin-bottom: 3px;
  color: #fbe1a1;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}

.info-time .info-label {
  font-size: 12.6px;
  transform: translateY(5px);
}

.info-level { left: 35px; width: 118px; }
.info-time { left: 177px; width: 118px; }
.info-score { right: 34px; width: 118px; }

#board-wrap {
  position: absolute;
  left: 350px;
  top: 108px;
  width: 760px;
  height: 490px;
}

#board {
  position: absolute;
  left: 0;
  top: 0;
  width: 760px;
  height: 490px;
}

.tile {
  position: absolute;
  width: 66px;
  height: 96px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 72%;
  transition: transform 150ms ease, filter 150ms ease, opacity 280ms ease;
}

.tile img {
  display: block;
  width: 66px;
  height: 96px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(2px 5px 3px rgba(44, 17, 5, 0.52));
  transition: filter 150ms ease, transform 150ms ease, opacity 230ms ease;
}

.tile.free:hover img { filter: brightness(1.12) drop-shadow(0 0 8px rgba(255, 231, 141, 0.85)); }
.tile.blocked img { filter: brightness(0.78) saturate(0.82) drop-shadow(2px 5px 3px rgba(34, 15, 5, 0.5)); }
.tile.selected { transform: translateY(-7px) scale(1.06); }
.tile.selected img { filter: brightness(1.24) drop-shadow(0 0 9px #52e1ad) drop-shadow(0 0 4px #ffec91); }
.tile.hinted img { animation: hint-pulse 520ms ease-in-out 3; }
.tile.invalid img { animation: blocked-shake 270ms ease; }
.tile.matching { pointer-events: none; animation: pair-lift 360ms ease forwards; }
.tile.removed { display: none; }
.tile.shuffle-flip img { animation: shuffle-flip 760ms ease both; }

.match-burst {
  position: absolute;
  inset: 0;
  z-index: 20000;
  overflow: visible;
  pointer-events: none;
}

.match-particle {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: match-spark 620ms cubic-bezier(.17,.67,.3,1) var(--particle-delay) both;
}

.match-particle.gold {
  background: #ffe690;
  box-shadow: 0 0 6px 2px rgba(255, 206, 85, 0.82);
}

.match-particle.jade {
  background: #70f0bc;
  box-shadow: 0 0 7px 2px rgba(42, 216, 153, 0.78);
}

.match-particle.blossom {
  width: 8px;
  height: 5px;
  border-radius: 75% 20% 72% 24%;
  background: linear-gradient(145deg, #fff4f6, #f29ab7 62%, #cb577e);
  box-shadow: 0 0 5px rgba(255, 180, 207, 0.68);
}

.match-ring {
  position: absolute;
  left: var(--ring-x);
  top: var(--ring-y);
  width: 12px;
  height: 12px;
  border: 3px solid rgba(255, 226, 126, 0.92);
  border-radius: 50%;
  box-shadow: 0 0 9px #54e2ae, inset 0 0 7px rgba(255,255,255,0.72);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: match-ring 520ms ease-out both;
}

@keyframes match-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  16% { opacity: 1; }
  68% { opacity: 0.94; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.6) rotate(var(--burst-rotate)); }
}

@keyframes match-ring {
  0% { opacity: 0.95; width: 12px; height: 12px; border-width: 4px; }
  100% { opacity: 0; width: 92px; height: 92px; border-width: 1px; }
}

@keyframes hint-pulse {
  0%, 100% { filter: brightness(1) drop-shadow(2px 5px 3px rgba(44,17,5,0.5)); transform: translateY(0); }
  50% { filter: brightness(1.42) drop-shadow(0 0 13px #4df1b7) drop-shadow(0 0 5px #fff3a8); transform: translateY(-6px); }
}

@keyframes blocked-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

@keyframes pair-lift {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  45% { opacity: 1; transform: translateY(-12px) scale(1.12); filter: brightness(1.4); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.82); }
}

@keyframes shuffle-flip {
  0%, 100% { transform: rotateY(0) translateY(0); }
  45%, 55% { transform: rotateY(90deg) translateY(-7px); filter: brightness(1.35); }
}

.hint-button {
  left: 613px;
  bottom: 2px;
  width: 139px;
  height: 103px;
  background-image: url("../Assets/GamePlayScreen_HintButton.png");
}

.hint-count {
  position: absolute;
  right: 3px;
  top: 5px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff8d6;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 2px 2px #361207;
}

.ad-badge {
  position: absolute;
  right: 3px;
  top: 5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #fffbd8;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 2px 2px #361207;
}
.hint-button.ad-mode .hint-count { display: none; }
.hint-button.ad-mode .ad-badge { display: flex; }

.hint-spinner {
  position: absolute;
  left: 52px;
  top: 31px;
  display: none;
  width: 34px;
  height: 34px;
  border: 5px solid rgba(255,255,255,0.28);
  border-top-color: #ffe06c;
  border-radius: 50%;
  animation: spin 650ms linear infinite;
}

.hint-button.busy .hint-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

#shuffle-message {
  position: absolute;
  left: 514px;
  top: 302px;
  z-index: 80;
  display: none;
  width: 330px;
  padding: 15px 18px;
  border: 3px solid #efc45b;
  border-radius: 13px;
  color: #fff4bd;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 4px;
  text-align: center;
  background: rgba(7, 87, 63, 0.95);
  box-shadow: 0 0 24px rgba(255, 224, 113, 0.55);
  text-shadow: 0 2px 2px #40160a;
}

#shuffle-message.show { display: block; animation: message-pop 210ms ease both; }

#game-toast {
  position: absolute;
  left: 462px;
  bottom: 105px;
  z-index: 90;
  width: 440px;
  padding: 12px 20px;
  border: 2px solid #e6bd59;
  border-radius: 10px;
  color: #fff3c5;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  background: rgba(7, 69, 51, 0.96);
  box-shadow: 0 0 18px rgba(255, 218, 111, 0.36);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 170ms ease, transform 170ms ease;
}

#game-toast.show { opacity: 1; transform: translateY(0); }

#tutorial-card {
  position: absolute;
  left: 485px;
  top: 514px;
  z-index: 95;
  display: none;
  align-items: center;
  gap: 17px;
  max-width: 520px;
  min-height: 62px;
  padding: 11px 13px 11px 20px;
  border: 3px solid #e8bf5b;
  border-radius: 14px;
  color: #fff4c6;
  font-size: 17px;
  font-weight: 700;
  background: rgba(7, 79, 58, 0.97);
  box-shadow: 0 0 20px rgba(255, 220, 111, 0.42);
}

#tutorial-card.show { display: flex; animation: message-pop 230ms ease both; }

#tutorial-close {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 2px solid #f1cf71;
  border-radius: 8px;
  color: #fff5c8;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(#aa2c27, #6f1719);
  cursor: pointer;
}

@keyframes message-pop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

#complete-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: none;
  background: rgba(0, 0, 0, 0.78);
}

#complete-overlay.visible { display: block; animation: overlay-in 230ms ease both; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.complete-art {
  position: absolute;
  inset: 0;
  background: url("../Assets/LevelCompleteScreenBackground.png") center / 1280px 720px no-repeat;
  animation: panel-pop 440ms cubic-bezier(.18,.82,.24,1.12) both;
}

@keyframes panel-pop {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.complete-time {
  position: absolute;
  left: 500px;
  top: 282px;
  width: 280px;
  color: #552116;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #fff4ce;
}

.best-time {
  position: absolute;
  left: 569px;
  top: 391px;
  width: 150px;
  color: #5b261b;
  font-size: 31px;
  font-weight: 900;
  text-align: center;
}

#new-best {
  position: absolute;
  left: 716px;
  top: 374px;
  display: none;
  width: 84px;
  height: 74px;
  object-fit: contain;
}

#new-best.visible { display: block; animation: flag-in 420ms 260ms ease both; }
@keyframes flag-in { from { opacity: 0; transform: translateY(-10px) scale(0.8); } to { opacity: 1; transform: none; } }

.complete-button { top: 468px; }
.complete-replay {
  left: 426px;
  width: 113px;
  height: 67px;
  background-image: url("../Assets/LevelCompleteScreen_ReplayButton.png");
}
.complete-next {
  left: 554px;
  width: 172px;
  height: 72px;
  background-image: url("../Assets/LevelCompleteScreen_NextLevelButton.png");
}
.complete-levels {
  left: 741px;
  width: 115px;
  height: 66px;
  background-image: url("../Assets/LevelCompleteScreen_LevelSelectButton.png");
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particles { display: none; }
  .match-burst { display: none; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}