/* Pop-up windows, the victory screen, the main menu and the compact portrait HUD.
   Loaded in order from index.html (01 to 04): later files override earlier ones. */

/* ---------- janelas ---------- */
.veil {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 10, 0.55);
  padding: calc(var(--sat) + 30 * var(--u)) 0 calc(var(--sab) + 12 * var(--u));
  pointer-events: auto;
  display: grid;
  place-items: center;
  animation: veilIn 200ms ease both;
}
@keyframes veilIn {
  from {
    opacity: 0;
  }
}
.panel {
  position: relative;
  background: var(--cream);
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(28 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) 0 var(--ink);
  padding: calc(58 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u));
  width: min(92vw, calc(400 * var(--u)));
  max-height: 92vh;
  overflow: visible;
  text-align: center; /* a aba e o X saem da borda */
  animation: panelIn 420ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
@keyframes panelIn {
  from {
    transform: translateY(calc(40 * var(--u))) scale(0.85);
    opacity: 0;
  }
  70% {
    transform: scale(1.04);
    opacity: 1;
  }
}
.panel .tab {
  position: absolute;
  left: 50%;
  top: calc(-24 * var(--u));
  transform: translateX(-50%);
  background: linear-gradient(#ffe887, var(--yellow));
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u));
  padding: calc(6 * var(--u)) calc(22 * var(--u));
  font-weight: 700;
  font-size: calc(24 * var(--u));
  white-space: nowrap;
  box-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
}
.panel h2 {
  margin: calc(10 * var(--u)) 0 calc(6 * var(--u));
  font-size: calc(26 * var(--u));
}
.panel p {
  margin: calc(6 * var(--u)) 0 calc(18 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.3;
  font-weight: 500;
}
.panel .close {
  position: absolute;
  right: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  background: linear-gradient(#ff9b95, #f2544e);
}
.panel .close svg {
  stroke: #fff;
}
.panel .art {
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  margin: calc(6 * var(--u)) auto;
  display: block;
}
.panel .col {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  align-items: stretch;
}
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: calc(3 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  font-weight: 600;
  font-size: calc(20 * var(--u));
}
.switch {
  width: calc(56 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 99px;
  background: #d9cbb0;
  border: calc(3 * var(--u)) solid var(--ink);
  position: relative;
  transition: background 160ms;
  padding: 0;
  cursor: pointer;
}
.switch::after {
  content: '';
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(2 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: #fff;
  border: calc(2.5 * var(--u)) solid var(--ink);
  transition: transform 220ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
.switch.on {
  background: var(--green);
}
.switch.on::after {
  transform: translateX(calc(24 * var(--u)));
}
.langs {
  display: flex;
  gap: calc(8 * var(--u));
  justify-content: center;
}
.langs .btn {
  font-size: calc(17 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u));
}
.langs .btn.sel {
  background: linear-gradient(#ffe887, var(--yellow));
}

/* ---------- vitória ---------- */
.win {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  display: grid;
  place-items: center;
  animation: veilIn 320ms ease both;
}
.win .stamp {
  max-width: 90vw;
  text-align: center;
}
.win .rays {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.22) 0 10deg,
    rgba(255, 255, 255, 0) 10deg 20deg
  );
  animation: spin 26s linear infinite;
}
.win .glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #fff6c8 0%, #ffd27a 28%, #ffa9c6 62%, #f77fb4 100%);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.win .farm {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: url(../assets/home-paisagem.webp) 12% 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
  mask-image: linear-gradient(transparent, #000 45%);
}
.win .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
}
.win .stamp {
  font-size: calc(62 * var(--u));
  animation-delay: 240ms !important;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: calc(9 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(6 * var(--u)) 0 var(--ink);
  animation: stamp 380ms ease-out both 120ms;
}
@keyframes stamp {
  from {
    transform: scale(0.88);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
}
.win .burst {
  width: min(88vw, calc(340 * var(--u)));
  aspect-ratio: 340 / 290;
  animation:
    trioIn 700ms cubic-bezier(0.2, 1.7, 0.4, 1) both 450ms,
    breathe 1.6s ease-in-out 1200ms infinite;
}
@keyframes breathe {
  50% {
    scale: 1.02;
  }
}
.win .title {
  position: relative;
}
.win .title::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(closest-side, rgba(255, 250, 200, 0.95), rgba(255, 240, 160, 0.5) 50%, transparent);
  z-index: -1;
  pointer-events: none;
}
.win .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
}
.win .stamp.lv {
  font-size: calc(46 * var(--u));
  animation-delay: 60ms;
}
.win .stamp:not(.lv) {
  color: #ffd93b;
}
@keyframes trioIn {
  from {
    transform: translateY(calc(60 * var(--u))) scale(0.6);
    opacity: 0;
  }
}
.win .lvl {
  animation: panelIn 420ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
.win .card {
  animation-delay: 850ms !important;
  background: linear-gradient(#fffaf0, #fbedd2);
  box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(120, 60, 20, 0.25) !important;
  min-width: min(82vw, calc(330 * var(--u)));
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 var(--ink);
  padding: calc(10 * var(--u)) calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: panelIn 460ms cubic-bezier(0.2, 1.5, 0.35, 1) both 420ms;
}
.win .card .amount {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: calc(44 * var(--u));
  font-weight: 700;
}
.win .card img {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}
.win .card small {
  font-size: calc(15 * var(--u));
  font-weight: 600;
  opacity: 0.7;
}
.win .surprise {
  animation-delay: 1050ms !important;
  width: min(82vw, calc(330 * var(--u)));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  background: linear-gradient(#fffaf0, #fbedd2);
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(120, 60, 20, 0.25);
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  animation: panelIn 460ms cubic-bezier(0.2, 1.5, 0.35, 1) both 620ms;
}
.win .surprise .col {
  flex: 1;
}
.win .surprise .mystery {
  width: calc(50 * var(--u));
  flex: 0 0 auto;
  animation: buddy2 1.4s ease-in-out infinite;
}
@keyframes buddy2 {
  50% {
    transform: translateY(calc(-5 * var(--u))) rotate(-6deg);
  }
}
.win .surprise .mystery svg {
  width: 100%;
  display: block;
}
.win .surprise .label {
  font-weight: 700;
  font-size: calc(21 * var(--u));
  margin-bottom: calc(4 * var(--u));
  text-align: left;
}
.win .surprise .track {
  height: calc(26 * var(--u));
  border-radius: 99px;
  border: calc(3.5 * var(--u)) solid var(--ink);
  background: #fff;
  overflow: hidden;
  position: relative;
}
.win .surprise .track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(16.66% - 2px),
    rgba(58, 36, 22, 0.35) calc(16.66% - 2px) 16.66%
  );
  z-index: 2;
  pointer-events: none;
}
.win .surprise .track i {
  position: absolute;
  inset: 0;
  background: linear-gradient(#8cf07f, var(--green));
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.2, 1.2, 0.4, 1) 900ms;
}
.win .surprise .track span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(16 * var(--u));
  color: var(--ink);
}
.win .go {
  animation:
    goIn 120ms ease-out both 1300ms,
    playPulse 2.2s ease-in-out 1450ms infinite;
  margin-top: calc(10 * var(--u));
}

/* ---------- início ---------- */
#home {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#home .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--sat) + 12 * var(--u)) calc(14 * var(--u)) 0;
}
#home .logo {
  width: min(54vw, calc(240 * var(--u)));
  margin-top: calc(6 * var(--u));
  pointer-events: none;
  animation: logoIn 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes logoIn {
  from {
    transform: translateY(calc(-30 * var(--u))) scale(0.8);
    opacity: 0;
  }
}
#home .path {
  position: relative;
  flex: 1 1 auto;
  width: min(100%, calc(480 * var(--u)));
  overflow: hidden;
  pointer-events: none;
}
#home .egg {
  position: absolute;
  width: calc(74 * var(--u));
  height: calc(92 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
#home .egg svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
#home .egg .n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(32 * var(--u));
  color: #5a3418;
  -webkit-text-stroke: calc(1 * var(--u)) #5a3418;
}
#home .egg.cur {
  animation: eggBob 1.6s ease-in-out infinite;
}
#home .egg .buddy {
  position: absolute;
  left: 50%;
  top: calc(-34 * var(--u));
  width: calc(48 * var(--u));
  transform: translateX(-50%);
  animation: buddy 0.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes buddy {
  50% {
    transform: translate(-50%, calc(-6 * var(--u)));
  }
}
#home .egg .n {
  padding-top: calc(4 * var(--u)) !important;
}
#home .egg.locked {
  cursor: default;
}
#home .egg .rays {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 90, 0.75) 0 7deg, transparent 7deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, #000 36%, #000 46%, transparent 50%);
  mask-image: radial-gradient(circle, transparent 34%, #000 36%, #000 46%, transparent 50%);
  z-index: -1;
  animation: raysSpin 9s linear infinite;
  pointer-events: none;
}
@keyframes eggBob {
  50% {
    transform: translate(-50%, calc(-50% - 7 * var(--u))) rotate(-3deg);
  }
}
#home .bottom {
  padding: 0 0 calc(var(--sab) + 104 * var(--u));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
}
#home .play::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 12%;
  height: 26%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
#home .play {
  pointer-events: auto;
  animation: playPulse 2.2s ease-in-out infinite;
}
@keyframes playPulse {
  50% {
    transform: scale(1.04);
  }
}

.coins-pill img {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}
.toast {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: rgba(58, 36, 22, 0.92);
  color: #fff;
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-radius: calc(14 * var(--u));
  font-weight: 600;
  font-size: calc(19 * var(--u));
  animation: toast 1.6s ease both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes toast {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%);
  }
  12%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
  }
}

body.reduced *,
body.reduced *::before,
body.reduced *::after {
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}
/* retrato: HUD mais compacto para caber pausa, fase, tempo e reiniciar */
body:not(.land) #hud {
  gap: calc(7 * var(--u));
  padding: 0 calc(8 * var(--u));
}
body:not(.land) #hud .pill {
  font-size: calc(20 * var(--u));
  padding: 0 calc(12 * var(--u));
  height: calc(44 * var(--u));
}
body:not(.land) #hud .timer {
  min-width: calc(136 * var(--u));
  font-size: calc(21 * var(--u));
}
body:not(.land) #hud .timer .bar {
  width: calc(58 * var(--u));
}
body:not(.land) #hud .btn.round {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
}
body.land #home .logo {
  width: calc(190 * var(--u));
}
@keyframes raysSpin {
  to {
    rotate: 360deg;
  }
}
.spark-dash {
  position: relative;
}
.spark-dash::before,
.spark-dash::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(26 * var(--u));
  height: calc(30 * var(--u));
  transform: translateY(-50%);
  background:
    linear-gradient(#ffd21f, #ffd21f) 0 0 / calc(8 * var(--u)) calc(20 * var(--u)) no-repeat,
    linear-gradient(#ffd21f, #ffd21f) calc(16 * var(--u)) calc(10 * var(--u)) / calc(8 * var(--u)) calc(16 * var(--u))
      no-repeat;
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink));
  pointer-events: none;
}
.spark-dash::before {
  right: 100%;
  margin-right: calc(10 * var(--u));
  rotate: -20deg;
}
.spark-dash::after {
  left: 100%;
  margin-left: calc(10 * var(--u));
  rotate: 20deg;
  scale: -1 1;
}

/* End of css/02-windows-home.css */