:root {
  --maze-visible-width: 100vw;
  --maze-visible-height: 100dvh;
  --maze-visible-top: 0px;
  --maze-visible-left: 0px;
  --maze-stage-scale: 1;
  --maze-stage-rendered-width: min(100vw, 177.7778dvh);
  --maze-stage-rendered-height: min(100dvh, 56.25vw);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #fff;
  background: #071c29;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #071c29;
}

body.farm-maze-page {
  min-height: 100dvh;
  touch-action: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 5px solid #fff;
  outline-offset: 3px;
}

.farm-maze-page > .active-child-bar { display: none !important; }

.game-shell {
  position: fixed;
  z-index: 1;
  left: var(--maze-visible-left);
  top: var(--maze-visible-top);
  width: var(--maze-visible-width);
  height: var(--maze-visible-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  user-select: none;
  background: #1598e7;
}

.farm-backdrop {
  position: absolute;
  z-index: -1;
  inset: -14px;
  background: linear-gradient(rgba(10, 44, 56, .18), rgba(10, 44, 56, .18)), url("/jogos/fases-da-fazenda/assets/backgrounds/background_fazenda.png") center / cover no-repeat;
  filter: blur(5px) brightness(.82) saturate(.9);
  transform: scale(1.035);
  pointer-events: none;
}

.maze-stage-frame {
  position: relative;
  width: var(--maze-stage-rendered-width);
  height: var(--maze-stage-rendered-height);
  flex: 0 0 auto;
  overflow: visible;
}

.maze-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  transform: scale(var(--maze-stage-scale));
  transform-origin: left top;
  background: #1598e7;
  box-shadow: 0 0 30px rgba(2, 24, 33, .34);
}

.farm-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: 0;
}

.hidden { display: none !important; }

.ui-button {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  touch-action: manipulation;
  transition: transform .1s ease, filter .1s ease;
}

.ui-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.ui-button:active {
  transform: scale(.91);
  filter: brightness(1.08);
}

.top-back {
  position: absolute;
  z-index: 40;
  left: 14px;
  top: 7px;
  width: 84px;
  height: 84px;
}

.help-button {
  position: absolute;
  z-index: 40;
  left: 101px;
  top: 15px;
  width: 68px;
  height: 68px;
}

.wood-sign {
  position: absolute;
  z-index: 20;
  left: 367px;
  top: 9px;
  width: 546px;
  height: 66px;
  display: grid;
  place-items: center;
  padding: 0 24px;
  border: 5px solid #9a4d13;
  border-radius: 20px;
  background: repeating-linear-gradient(90deg, rgba(121, 63, 16, .13) 0 2px, transparent 2px 74px), linear-gradient(#f9c14c, #eda029);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.38), inset 0 -5px 0 rgba(124,61,17,.18), 0 7px 14px rgba(48,41,24,.28);
  color: #fff8e8;
  text-align: center;
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: -2px -2px 0 #5b260d, 2px -2px 0 #5b260d, -2px 2px 0 #5b260d, 2px 2px 0 #5b260d, 0 4px 0 #783616;
}

.top-controls {
  position: absolute;
  z-index: 40;
  right: 14px;
  top: 7px;
  height: 84px;
  display: flex;
  gap: 3px;
}

.top-controls .ui-button {
  width: 84px;
  height: 84px;
}

.selection-heading {
  position: absolute;
  left: 260px;
  right: 260px;
  top: 85px;
  text-align: center;
  color: #4b220d;
  text-shadow: 0 2px 0 #fff;
}

.selection-heading h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.selection-heading p {
  margin: 5px 0 0;
  color: #703d20;
  font-size: 17px;
  font-weight: 900;
}

.animal-selection-grid {
  position: absolute;
  left: 118px;
  right: 118px;
  top: 142px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.animal-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 7px solid #fff3d3;
  border-radius: 24px;
  background: linear-gradient(#dff7ff 0 55%, #b8e480 55% 100%);
  box-shadow: 0 7px 0 #c47b20, 0 13px 18px rgba(63,48,24,.25);
  color: #4b210e;
  touch-action: manipulation;
  transition: transform .12s ease, filter .12s ease;
}

.animal-card:active { transform: scale(.97); }

.animal-card-image {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 3%;
  width: 76%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(57,38,13,.28));
  pointer-events: none;
}

.animal-card-name {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 10px;
  color: #56260f;
  font-size: 21px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 #fff;
}

.animal-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(55, 35, 22, .18);
  pointer-events: none;
}

.premium-lock {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 8px;
  min-width: 72px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border: 3px solid #fff4bb;
  border-radius: 18px;
  background: linear-gradient(#9e47d9, #6f26aa);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 3px 0 rgba(75,28,119,.8);
}

.premium-lock img { width: 23px; height: 23px; object-fit: contain; }

.completed-mark {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #50bd43;
  color: #fff;
  font-size: 25px;
  font-weight: 1000;
  box-shadow: 0 3px 0 #277b2d;
}

.instruction-card {
  position: absolute;
  left: 24px;
  top: 126px;
  width: 255px;
  min-height: 318px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 18px 20px;
  border: 7px solid #fff3d3;
  border-radius: 28px;
  background: linear-gradient(rgba(255,255,255,.98), rgba(255,235,188,.96));
  box-shadow: 0 8px 0 #c77b20, 0 14px 20px rgba(55,40,19,.25);
  color: #57250e;
  text-align: center;
}

.instruction-animal-wrap {
  width: 155px;
  height: 138px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,136,.95), rgba(255,205,61,.42) 57%, transparent 73%);
}

.instruction-animal-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 5px rgba(57,38,13,.28));
}

.instruction-copy strong {
  display: block;
  margin-top: 3px;
  color: #642a0e;
  font-size: 25px;
  font-weight: 1000;
  line-height: 1;
}

.instruction-copy p {
  margin: 9px 0 0;
  color: #77472b;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.18;
}

.move-pill {
  min-width: 78px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  padding: 4px 13px;
  border: 3px solid #e1a51b;
  border-radius: 20px;
  background: #fff9d7;
  color: #6e3512;
  font-size: 18px;
}

.maze-area {
  position: absolute;
  left: 301px;
  top: 106px;
  width: 952px;
  height: 574px;
  overflow: hidden;
  border: 13px solid #b86f24;
  border-radius: 27px;
  background: linear-gradient(rgba(255,251,218,.18), rgba(103,185,65,.15)), #9bce5e;
  box-shadow: inset 0 0 0 5px #f6d987, inset 0 0 28px rgba(56,102,29,.38), 0 10px 20px rgba(45,37,20,.28);
  touch-action: none;
}

.maze-grid {
  position: absolute;
  inset: 15px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.maze-cell { position: relative; min-width: 0; min-height: 0; }
.maze-cell::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 25%;
  background: rgba(255,255,255,.035);
}

.maze-cell.goal-cell::after { background: rgba(255,241,95,.16); }

.maze-wall {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(59,35,11,.25));
}

.maze-wall-n,
.maze-wall-s {
  left: -7px;
  width: calc(100% + 14px);
  height: 19px;
  background: url("assets/feno/parede_horizontal.png") center / 100% 100% no-repeat;
}

.maze-wall-n { top: -9px; }
.maze-wall-s { bottom: -9px; }

.maze-wall-w,
.maze-wall-e {
  top: -7px;
  width: 19px;
  height: calc(100% + 14px);
  background: url("assets/feno/parede_vertical.png") center / 100% 100% no-repeat;
}

.maze-wall-w { left: -9px; }
.maze-wall-e { right: -9px; }

.goal-glow,
.goal-image,
.animal-piece {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.goal-glow {
  z-index: 5;
  width: 125px;
  height: 102px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,102,.9), rgba(255,210,61,.28) 56%, transparent 73%);
  animation: goal-glow 1.3s ease-in-out infinite alternate;
}

.goal-image {
  width: 126px;
  height: 97px;
  object-fit: cover;
  border: 4px solid rgba(255,249,208,.92);
  border-radius: 16px;
  box-shadow: 0 5px 8px rgba(49,41,23,.35);
}

.animal-piece {
  z-index: 8;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 7px 4px rgba(49,35,15,.4));
  transition: left .09s linear, top .09s linear, transform .11s ease;
}

.maze-area.is-dragging .animal-piece { transform: translate(-50%, -50%) scale(1.08); }
.animal-piece.is-home { animation: animal-home .55s ease both; }

.feedback {
  position: absolute;
  z-index: 75;
  left: 50%;
  top: 52%;
  min-width: 240px;
  padding: 14px 28px;
  border: 5px solid #fff;
  border-radius: 34px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  color: #fff;
  text-align: center;
  font-size: 31px;
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(59,32,13,.5);
  pointer-events: none;
}

.feedback.correct-feedback { background: #56b73d; }
.feedback.wrong-feedback { background: #ee7045; }
.feedback.show { animation: feedback-in .68s ease both; }

.game-overlay {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(28, 21, 12, .6);
  backdrop-filter: blur(3px);
}

.overlay-card {
  width: 560px;
  max-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 42px 36px;
  border: 9px solid #fff0c2;
  border-radius: 35px;
  background: linear-gradient(#fffef1, #ffe1a0);
  box-shadow: inset 0 0 0 5px #d88725, 0 16px 34px rgba(29,20,11,.43);
  color: #5b290f;
  text-align: center;
}

.overlay-icon { width: 112px; height: 112px; object-fit: contain; }
.overlay-card h2 { margin: 7px 0 18px; font-size: 42px; line-height: 1; }
.overlay-card p { margin: 5px 0 18px; font-size: 23px; font-weight: 900; }

.primary-button,
.secondary-button {
  min-height: 55px;
  border: 4px solid #f1b61b;
  border-radius: 29px;
  padding: 10px 27px;
  font-weight: 1000;
  touch-action: manipulation;
}

.primary-button {
  color: #6a26a7;
  background: linear-gradient(#ffd94d, #f7b915);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 5px 0 rgba(163,86,17,.8);
  font-size: 22px;
}

.secondary-button {
  color: #6d3513;
  background: linear-gradient(#fff5d3, #f2cf7b);
  font-size: 20px;
}

.pause-actions,
.victory-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.action-with-icon {
  min-width: 205px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-with-icon img { width: 36px; height: 36px; object-fit: contain; }
.victory-card { min-height: 490px; }
.stars { color: #ffd648; font-size: 60px; line-height: 1; text-shadow: 0 4px 0 rgba(130,74,12,.34); }
.victory-card h2 { margin: 14px 0 4px; }
.victory-actions { flex-direction: column; gap: 11px; }
.victory-actions button { width: 390px; }

@keyframes goal-glow {
  from { transform: translate(-50%, -50%) scale(.9); opacity: .72; }
  to { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

@keyframes animal-home {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.28) rotate(-4deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes feedback-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  15%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
}

@media (hover: hover) {
  .animal-card:hover { filter: saturate(1.06) brightness(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}