:root {
  --dot-visible-width: 100vw;
  --dot-visible-height: 100dvh;
  --dot-visible-top: 0px;
  --dot-visible-left: 0px;
  --dot-stage-scale: 1;
  --dot-stage-rendered-width: min(100vw, 177.7778dvh);
  --dot-stage-rendered-height: min(100dvh, 56.25vw);
  --brown: #5a280e;
  --cream: #fff1cf;
  --gold: #f7b827;
  --purple: #7f25c2;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--brown);
  background: #071c29;
}

* { box-sizing: border-box; }

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

body.farm-dot-connect-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,
.dot-canvas:focus-visible {
  outline: 5px solid #fff;
  outline-offset: 3px;
}

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

.game-shell {
  position: fixed;
  z-index: 1;
  left: var(--dot-visible-left);
  top: var(--dot-visible-top);
  width: var(--dot-visible-width);
  height: var(--dot-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;
}

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

.dot-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  transform: scale(var(--dot-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;
  filter: drop-shadow(0 4px 4px rgba(55,29,7,.25));
}

.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: 294px;
  top: 9px;
  width: 691px;
  height: 79px;
  display: grid;
  place-items: center;
  padding: 0 26px;
  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: 39px;
  font-weight: 1000;
  letter-spacing: -.03em;
  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: 12px;
  top: 5px;
  height: 82px;
  display: flex;
  gap: 3px;
}

.top-controls .ui-button { width: 82px; height: 82px; }
.selection-controls { right: 14px; }

.selection-heading {
  position: absolute;
  left: 260px;
  right: 260px;
  top: 92px;
  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: 150px;
  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%;
  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;
  overflow: hidden;
  color: #56260f;
  font-size: 21px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 0 #fff;
}

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

.animal-card.is-locked .animal-card-image { opacity: .58; filter: saturate(.62) drop-shadow(0 4px 4px rgba(57,38,13,.2)); }

.premium-lock {
  position: absolute;
  z-index: 3;
  right: 8px;
  top: 8px;
  min-width: 82px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border: 3px solid #fff;
  border-radius: 19px;
  background: linear-gradient(#9a4bdb,#7026b4);
  box-shadow: 0 4px 0 #4d187e;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
  pointer-events: none;
}

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

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

.instruction-panel {
  position: absolute;
  z-index: 8;
  left: 29px;
  top: 144px;
  width: 269px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.instruction-card {
  width: 100%;
  padding: 23px 19px;
  border: 5px solid #f4c35b;
  border-radius: 20px;
  background: linear-gradient(#fff9e8,#ffe5aa);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.8), 0 6px 0 #c47c20, 0 12px 16px rgba(49,31,7,.2);
  text-align: center;
}

.instruction-card strong { display: block; font-size: 27px; line-height: 1.12; }
.instruction-card p { margin: 15px 0 0; color: #764323; font-size: 17px; line-height: 1.32; font-weight: 800; }

.drawing-area {
  position: absolute;
  z-index: 5;
  left: 192px;
  right: 192px;
  top: 94px;
  bottom: 108px;
  display: grid;
  place-items: center;
}

.dot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
  cursor: crosshair;
}

.outline-group {
  fill: none;
  stroke: rgba(255,255,255,.96);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 18;
  filter: drop-shadow(0 0 7px rgba(11,95,160,.75));
  transition: opacity .5s ease;
}

.segments-group path,
.guide-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.segments-group path { stroke-width: 18; filter: drop-shadow(0 4px 3px rgba(67,28,8,.3)); animation: segmentIn .25s ease both; }
.guide-line { stroke: rgba(255,255,255,.55); stroke-width: 5; stroke-dasharray: 10 14; pointer-events: none; }

.dot-node { cursor: pointer; }
.dot-node circle.outer { fill: #fff7e2; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 5px 4px rgba(57,31,8,.35)); }
.dot-node circle.inner { fill: #6b3513; stroke: #a55d18; stroke-width: 5; }
.dot-node text { fill: #fff; font-size: 30px; font-weight: 1000; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #49210c; stroke-width: 5; pointer-events: none; }
.dot-node.next { filter: url(#dotGlow); }
.dot-node.next circle.inner { fill: #7f25c2; stroke: #ffd84f; animation: nextPulse 1s ease-in-out infinite; }
.dot-node.done circle.inner { fill: #22a33d; stroke: #f9d84b; }
.dot-node.done text { stroke: #1d5d1a; }

.revealed-animal {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.82);
  filter: drop-shadow(0 18px 14px rgba(35,28,11,.35));
  transition: none;
  pointer-events: none;
}

.drawing-area.completed .revealed-animal { opacity: 1; transform: scale(1); transition: opacity .6s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.drawing-area.completed .outline-group,
.drawing-area.completed .dots-group,
.drawing-area.completed .segments-group,
.drawing-area.completed .guide-line { opacity: 0; transition: opacity .45s ease; }

.progress-bar {
  position: absolute;
  z-index: 12;
  left: 218px;
  right: 128px;
  bottom: 11px;
  height: 79px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  padding: 6px 14px;
  border: 5px solid #a65a16;
  border-radius: 18px;
  background: linear-gradient(#d99837,#b46a1d);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.35), 0 6px 0 #6f330d, 0 10px 14px rgba(50,29,8,.24);
  transition: opacity .25s ease;
}

.progress-item {
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid #8e4d16;
  border-radius: 50%;
  background: #7d4318;
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
  text-shadow: 0 2px 0 #4b210d;
}

.progress-item.done { background: linear-gradient(#65dc42,#24a83e); border-color: #f4d843; }
.progress-item.next { background: linear-gradient(#a44ae0,#7026bb); border-color: #ffe34c; box-shadow: 0 0 9px #fff16c; }
.progress-item.done::after { content: '✓'; position: absolute; right: -6px; top: -12px; color: #3ed537; font-size: 16px; text-shadow: 0 2px 0 #125b16; }
.game-screen.game-completed .progress-bar { opacity: 0; pointer-events: none; }

.feedback {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%) scale(.7);
  opacity: 0;
  pointer-events: none;
  padding: 14px 28px;
  border: 5px solid #fff4c9;
  border-radius: 20px;
  color: #fff;
  font-size: 38px;
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(73,30,6,.28);
  box-shadow: 0 7px 0 rgba(102,50,12,.32), 0 15px 25px rgba(39,49,44,.28);
}

.feedback.show { animation: feedbackIn .9s ease both; }
.feedback.wrong { background: linear-gradient(#ff8e73,#e04234); }
.feedback.success { background: linear-gradient(#7b63ff,#b44df4); }

.completion-panel {
  position: absolute;
  z-index: 30;
  left: 320px;
  right: 115px;
  bottom: 13px;
  min-height: 122px;
  padding: 8px 15px;
  border: 5px solid #ffd76b;
  border-radius: 18px;
  background: linear-gradient(rgba(194,86,237,.98),rgba(126,37,196,.98));
  box-shadow: inset 0 4px 0 rgba(255,255,255,.35), 0 6px 0 #6f330d, 0 10px 14px rgba(37,18,50,.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: #fff;
}

.completion-panel strong { display: block; font-size: 29px; line-height: 1.05; text-shadow: 0 3px 0 #4d146f; }
.completion-panel p { margin: 0; max-width: 92%; color: #fff6d3; font-size: 17px; line-height: 1.12; font-weight: 800; }
.completion-actions { display: flex; align-items: center; justify-content: center; gap: 13px; width: 100%; margin-top: 2px; }

.primary-button,
.secondary-button {
  min-width: 250px;
  border: 3px solid #efb11b;
  border-radius: 18px;
  padding: 8px 15px;
  font-weight: 1000;
  line-height: 1.05;
  cursor: pointer;
  touch-action: manipulation;
}

.primary-button { background: linear-gradient(#ffd94d,#f7b915); color: #6a26a7; font-size: 19px; }
.secondary-button { background: linear-gradient(#fff5d3,#f2cf7b); color: #6d3513; font-size: 17px; }

.game-overlay {
  position: absolute;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12,34,52,.5);
  backdrop-filter: blur(3px);
}

.overlay-card {
  width: 500px;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border: 5px solid #ffd76b;
  border-radius: 22px;
  background: linear-gradient(#c45cf0,#8f2bd6);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.32), 0 10px 24px rgba(31,15,41,.3);
  text-align: center;
  color: #fff8f0;
}

.overlay-icon { width: 104px; height: 104px; object-fit: contain; }
.overlay-card h2 { margin: 8px 0 20px; font-size: 42px; text-shadow: 0 3px 0 #4d146f; }
.pause-actions { display: flex; gap: 14px; }
.pause-actions .primary-button,
.pause-actions .secondary-button { min-width: 190px; }
.action-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.action-with-icon img { width: 28px; height: 28px; object-fit: contain; }

@keyframes nextPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes segmentIn { from { opacity: 0; stroke-dasharray: 0 1000; } to { opacity: 1; stroke-dasharray: 1000 0; } }
@keyframes feedbackIn { 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: brightness(1.04); transform: translateY(-3px); }
  .ui-button:hover { filter: brightness(1.08); }
}

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