@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --ink: #5b3a29;
  --ink-soft: #8a5a44;
  --cream: #fff8ef;
  --pink: #ff7aa2;
  --pink-deep: #f04f84;
  --peach: #ffb38a;
  --mint: #7ed9a8;
  --sun: #ffd45c;
  --shadow: 0 6px 0 rgba(140, 70, 50, .25);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffd9c7;
  color: var(--ink);
  font-family: var(--font);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; border: 0; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Céu ---------- */
#sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #ffd1dc 0%, #ffe3c9 45%, #fff1d6 70%, #d9f5d8 100%);
  background-size: cover; background-position: center;
}
#sky.has-art { background-image: var(--art, url("assets/bg.webp")); }
.cloud {
  position: absolute; width: 180px; height: 60px; border-radius: 60px;
  background: rgba(255, 255, 255, .75);
  left: 0; will-change: transform;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 80px; height: 80px; left: 25px; top: -38px; }
.cloud::after { width: 100px; height: 100px; left: 70px; top: -52px; }
.c1 { top: 12%; animation-duration: 70s; }
.c2 { top: 34%; --s: .7; animation-duration: 95s; animation-delay: -40s; opacity: .8; }
.c3 { top: 62%; --s: .55; animation-duration: 120s; animation-delay: -80s; opacity: .6; }
@keyframes drift { from { transform: translateX(-240px) scale(var(--s, 1)); } to { transform: translateX(110vw) scale(var(--s, 1)); } }
.sparkles {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px);
  background-size: 90px 110px, 140px 130px;
  background-position: 10px 20px, 60px 70px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .35; } to { opacity: .9; } }

#game { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; z-index: 5; left: 0; right: 0; top: calc(var(--safe-top) + 8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; pointer-events: none;
}
#hud > * { pointer-events: auto; }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--cream); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: transform .12s;
}
.round-btn svg { width: 22px; height: 22px; fill: var(--ink); }
.round-btn:active, .tool:active, .big-btn:active, .pill:active { transform: translateY(3px) scale(.96); }
.score-box { text-align: center; }
.score {
  font-size: 44px; font-weight: 700; line-height: 1; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(91, 58, 41, .35);
  transition: transform .12s;
}
.score.bump { animation: bump .35s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-3deg); } 100% { transform: scale(1); } }
.best { font-size: 15px; font-weight: 600; color: var(--ink-soft); background: rgba(255,248,239,.8); border-radius: 20px; padding: 2px 10px; margin-top: 4px; display: inline-block; }
.next-box { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.next-label { font-size: 13px; font-weight: 600; background: var(--cream); padding: 1px 10px; border-radius: 12px; box-shadow: 0 3px 0 rgba(140,70,50,.2); }
.next-bubble {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.75);
  border: 4px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center;
}
.next-bubble img { width: 40px; height: 40px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }
.next-bubble img.pop { animation: popIn .45s cubic-bezier(.3,1.6,.5,1), float 2.4s ease-in-out .45s infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes popIn { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1); } }

/* ---------- Ferramentas ---------- */
#tools {
  position: fixed; z-index: 5; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 10px);
  display: flex; justify-content: center; gap: 12px; pointer-events: none;
}
.tool {
  pointer-events: auto; position: relative;
  width: 74px; height: 64px; border-radius: 22px; background: var(--cream);
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .12s, opacity .2s;
}
.tool-ico { width: 34px; height: 34px; object-fit: contain; display: block; }
.tool-name { font-size: 12px; font-weight: 600; margin-top: 2px; }
.tool .badge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; border-radius: 12px;
  background: var(--pink-deep); color: #fff; font-weight: 700; font-size: 14px; display: grid; place-items: center;
  border: 3px solid #fff;
}
.tool.empty { opacity: .45; }
.tool.active { background: #fff1a8; animation: wiggle .6s ease-in-out infinite; }
@keyframes wiggle { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

#evo {
  position: fixed; z-index: 4; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; align-items: center; padding: 4px 10px; border-radius: 30px;
  background: rgba(255,248,239,.7);
}
#evo img { width: 22px; height: 22px; object-fit: contain; opacity: .35; filter: grayscale(.7); transition: all .4s; }
#evo img.got { opacity: 1; filter: none; }
#evo img.got.newest { animation: popIn .5s cubic-bezier(.3,1.6,.5,1); }

#hint {
  position: fixed; z-index: 6; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: rgba(91,58,41,.85); color: #fff; padding: 10px 18px; border-radius: 20px; font-weight: 600;
  font-size: 18px; pointer-events: none; animation: fadeHint 2.2s forwards;
}
@keyframes fadeHint { 0% { opacity: 0; transform: translate(-50%,-40%); } 12%,80% { opacity: 1; transform: translate(-50%,-50%); } 100% { opacity: 0; } }

/* ---------- Telas ---------- */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; }
#title { background: linear-gradient(180deg, rgba(255,209,220,.55), rgba(255,241,214,.35)); }
.title-card { position: relative; z-index: 2; text-align: center; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo { margin: 0; font-size: clamp(52px, 15vw, 88px); font-weight: 700; letter-spacing: 1px; display: flex; }
.logo span {
  display: inline-block; color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 rgba(91,58,41,.35);
  animation: letterBounce 1.8s ease-in-out infinite;
}
@keyframes letterBounce { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-14px) rotate(-6deg); } 50% { transform: translateY(0) scale(1.05, .92); } }
.tagline { margin: 0; font-size: 19px; font-weight: 600; max-width: 300px; background: rgba(255,248,239,.85); padding: 8px 16px; border-radius: 18px; }
.big-btn {
  min-width: 230px; padding: 16px 30px; border-radius: 30px; font-size: 26px; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, #ff9cbc, var(--pink-deep));
  box-shadow: 0 7px 0 #c23565, 0 12px 20px rgba(240,79,132,.35);
  -webkit-text-stroke: 0; transition: transform .12s;
}
#btnPlay { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.big-btn.secondary { background: linear-gradient(180deg, #9ce8bf, #3fb979); box-shadow: 0 7px 0 #2a8a57, 0 12px 20px rgba(63,185,121,.3); font-size: 22px; }
.big-btn.ghost { background: var(--cream); color: var(--ink); box-shadow: var(--shadow); font-size: 20px; }
.title-best { font-size: 18px; font-weight: 600; background: rgba(255,248,239,.85); padding: 6px 16px; border-radius: 16px; }
.title-toggles { display: flex; gap: 10px; }
.pill { background: var(--cream); box-shadow: 0 4px 0 rgba(140,70,50,.25); border-radius: 18px; padding: 8px 14px; font-size: 18px; font-weight: 600; }
.pill.off { opacity: .45; }
.fruit-rain { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.fruit-rain img {
  position: absolute; top: -140px; object-fit: contain;
  animation: rain linear infinite;
}
@keyframes rain {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(calc(100vh + 280px)) rotate(360deg); }
}

.modal { background: rgba(91,58,41,.5); } /* sem desfoque: recalcular blur sobre o céu animado gasta GPU */
.panel {
  background: var(--cream); border-radius: 34px; padding: 26px 26px 30px; min-width: 290px;
  box-shadow: 0 10px 0 rgba(140,70,50,.3), 0 30px 60px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  border: 5px solid #fff; animation: panelIn .5s cubic-bezier(.3,1.5,.5,1);
}
@keyframes panelIn { from { transform: scale(.4) translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel h2 { margin: 0; font-size: 36px; color: var(--pink-deep); }
.over-score { font-size: 64px; font-weight: 700; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; line-height: 1; }
.over-best { background: var(--sun); padding: 4px 16px; border-radius: 16px; font-weight: 700; font-size: 20px; animation: wiggle .5s ease-in-out infinite; }
.over-fruit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; }
.over-fruit img { width: 54px; height: 54px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }

#banner {
  position: fixed; z-index: 8; left: 50%; top: 36%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  animation: bannerIn 2.1s cubic-bezier(.3,1.4,.5,1) forwards;
}
#banner img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(91,58,41,.25)); animation: spinPop 2.1s ease-out; }
#bannerText {
  margin-top: 6px; font-size: clamp(24px, 8.5vw, 38px); font-weight: 700; color: #fff; text-align: center;
  max-width: 92vw; line-height: 1.1;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 rgba(91,58,41,.3);
}
@keyframes bannerIn {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1); }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(.8); opacity: 0; }
}
@keyframes spinPop { 0% { transform: rotate(-200deg) scale(.3); } 30% { transform: rotate(10deg) scale(1.1); } 40%,100% { transform: rotate(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .logo span, #btnPlay, .cloud, .sparkles, .flyer, .bubble, .fruit-rain img, #btnPlay::after { animation: none; }
}
/* jogo parado há alguns segundos: o céu para de animar (bateria); volta no primeiro toque */
body.idle #sky *, body.idle #sky::after { animation-play-state: paused; }

/* ---------- Vida no cenário ---------- */
.flyer { position: absolute; left: 0; width: 34px; height: 34px; object-fit: contain; animation: flutter 22s linear infinite; will-change: transform; }
.f1 { top: 22%; animation-duration: 26s; }
.f2 { top: 48%; animation-duration: 33s; animation-delay: -12s; width: 30px; height: 30px; }
.f3 { top: 72%; animation-duration: 29s; animation-delay: -20s; width: 28px; height: 28px; }
@keyframes flutter {
  0% { transform: translate(-40px, 0) rotate(8deg); }
  25% { transform: translate(25vw, -40px) rotate(-8deg); }
  50% { transform: translate(52vw, 10px) rotate(8deg); }
  75% { transform: translate(78vw, -30px) rotate(-6deg); }
  100% { transform: translate(105vw, 0) rotate(8deg); }
}
.bubble { position: absolute; bottom: -40px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.1) 60%); animation: rise 14s ease-in infinite; }
.b1 { left: 8%; } .b2 { left: 30%; animation-delay: -5s; width: 14px; height: 14px; } .b3 { left: 70%; animation-delay: -9s; } .b4 { left: 90%; animation-delay: -2s; width: 16px; height: 16px; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(18px, -50vh); } 100% { transform: translate(-10px, -105vh); opacity: 0; } }
.moon { display: none; }

/* ---------- Cenários ---------- */
body[data-theme="doce"] #sky { background-image: none; background: linear-gradient(180deg, #ffc6e8 0%, #e7c6ff 45%, #ffd9f0 75%, #fff0c7 100%); }
body[data-theme="doce"] .sparkles {
  background-image:
    radial-gradient(circle, #ff8fc8 2.5px, transparent 3px),
    radial-gradient(circle, #8fd3ff 2.5px, transparent 3px),
    radial-gradient(circle, #ffe066 2.5px, transparent 3px);
  background-size: 70px 90px, 110px 80px, 90px 120px;
  background-position: 0 0, 35px 40px, 60px 15px;
}
body[data-theme="noite"] #sky { background-image: none; background: linear-gradient(180deg, #1d1b4b 0%, #3b2d7a 50%, #6c4bb3 85%, #a27bd6 100%); }
body[data-theme="noite"] .cloud { background: rgba(255,255,255,.12); }
body[data-theme="noite"] .sparkles { animation-duration: 2.5s; }
body[data-theme="noite"] .moon { display: block; position: absolute; top: 9%; right: 12%; width: 70px; height: 70px; border-radius: 50%; background: #fff3b8; box-shadow: 0 0 40px 10px rgba(255,243,184,.45), inset -14px -6px 0 #f2d77c; animation: float 6s ease-in-out infinite; }
body[data-theme="noite"] .flyer { display: none; }
body[data-theme="noite"] .tagline, body[data-theme="noite"] .title-best { background: rgba(255,248,239,.92); }

/* ---------- Febre ---------- */
body.fever .score { animation: feverGlow .5s ease-in-out infinite alternate; }
@keyframes feverGlow { from { filter: drop-shadow(0 0 6px #ff7aa2); } to { filter: drop-shadow(0 0 14px #ffd45c) hue-rotate(40deg); } }
/* camada da febre só existe durante a febre (sem ela, nada de textura gigante parada na GPU) */
body.fever #sky::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; pointer-events: none;
  will-change: transform;
  background: linear-gradient(90deg, rgba(255,93,122,.32), rgba(255,225,77,.28), rgba(111,220,111,.28), rgba(79,195,247,.28), rgba(155,123,255,.32), rgba(255,93,122,.32));
}
body.fever #sky::after { animation: feverSky 2.4s linear infinite; }
@keyframes feverSky { from { transform: translateX(0); } to { transform: translateX(-66.666%); } }

.next-bubble.rainbow { border-color: transparent; background: conic-gradient(#ff5d7a, #ffa63d, #ffe14d, #6fdc6f, #4fc3f7, #9b7bff, #ff5d7a); animation: spin 2s linear infinite; }
.next-bubble.rainbow img { animation: counterSpin 2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counterSpin { to { transform: rotate(-360deg); } }

#tapHint { position: fixed; z-index: 6; left: 50%; top: 52%; pointer-events: none; }
#tapHint .hand { display: block; width: 64px; height: 64px; object-fit: contain; animation: tapMove 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(91,58,41,.25)); }
@keyframes tapMove {
  0% { transform: translateX(-80px) scale(1); } 40% { transform: translateX(80px) scale(1); }
  55% { transform: translateX(80px) scale(.8); } 70% { transform: translateX(80px) scale(1); } 100% { transform: translateX(-80px) scale(1); }
}

.over-stars { display: flex; gap: 6px; align-items: center; }
.over-stars img { width: 50px; height: 50px; object-fit: contain; filter: grayscale(1) brightness(1.25) opacity(.45); transform: scale(.8); transition: transform .3s cubic-bezier(.3,1.8,.5,1), filter .2s; }
.over-stars img.on { filter: none; transform: scale(1.15) rotate(-8deg); }
.over-stars img:nth-child(2).on { transform: scale(1.35) translateY(-8px); }

/* brilho passando no botão Jogar */
#btnPlay { position: relative; overflow: hidden; }
#btnPlay::after { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-150%) skewX(-20deg); animation: shine 2.6s ease-in-out infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(325%) skewX(-20deg); } }
.fruit-rain img { animation-name: rainWobble; }
@keyframes rainWobble {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(calc(25vh + 70px)) rotate(90deg) translateX(20px); }
  50% { transform: translateY(calc(50vh + 140px)) rotate(180deg); }
  75% { transform: translateY(calc(75vh + 210px)) rotate(270deg) translateX(-20px); }
  100% { transform: translateY(calc(100vh + 280px)) rotate(360deg); }
}
.tool.gift { animation: giftPop .8s cubic-bezier(.3,1.8,.5,1); }
@keyframes giftPop { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-10deg); background: #fff1a8; } 60% { transform: scale(.95) rotate(6deg); } 100% { transform: scale(1); } }

/* ---------- Edições ---------- */
.editions { display: flex; gap: 10px; }
.edition-card {
  width: 92px; padding: 8px 4px 6px; border-radius: 22px; background: rgba(255,248,239,.9);
  box-shadow: 0 5px 0 rgba(140,70,50,.22); display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 4px solid transparent; transition: transform .15s;
}
.edition-card img { width: 52px; height: 52px; object-fit: contain; }
.edition-card .ed-name { font-size: 14px; font-weight: 700; }
.edition-card.on { border-color: var(--pink-deep); background: #fff; transform: translateY(-4px) scale(1.06); }
.edition-card.on img { animation: float 2.2s ease-in-out infinite; }
.edition-card:active { transform: scale(.94); }
.next-bubble.golden { border-color: #ffd23f; box-shadow: 0 0 18px 4px rgba(255,210,63,.75), var(--shadow); }
.next-bubble.golden img { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1); }
@media (max-height: 700px) { .title-card { gap: 9px; } .logo { font-size: 50px; } .edition-card { width: 80px; } .edition-card img { width: 42px; height: 42px; } }

/* ---------- Tablet (iPad): interface maior para dedinhos ---------- */
@media (min-width: 700px) and (min-height: 800px) {
  .title-card, .panel, #banner { zoom: 1.4; }
  #hud { padding: 0 26px; }
  /* zoom em vez de transform: as animações de toque/presente continuam valendo */
  #hud .round-btn, #hud .score-box, #hud .next-box { zoom: 1.3; }
  #tools { gap: 28px; }
  #tools .tool { zoom: 1.3; }
  #evo img { width: 30px; height: 30px; }
  #hint { font-size: 24px; }
}

/* ---------- Celular deitado ---------- */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(180deg, #ffd1dc, #fff1d6);
  }
  .rotate-phone { width: 96px; height: 96px; object-fit: contain; animation: rotatePhone 2s ease-in-out infinite; }
  .rotate-text { font-size: 26px; font-weight: 700; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
}
@keyframes rotatePhone { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (min-width: 700px) and (min-height: 800px) and (max-height: 950px) {
  .title-card { zoom: 1.12; }
}

/* ---------- Instalar como app ---------- */
img { -webkit-user-drag: none; }
.fruit-rain img, #evo img, .edition-card img { pointer-events: none; }
.install-pill {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 20px;
  background: rgba(255,255,255,.92); box-shadow: 0 4px 0 rgba(140,70,50,.22); font-size: 16px; font-weight: 700;
  color: #2f7bf6; transition: transform .12s;
}
.install-pill:active { transform: translateY(3px) scale(.96); }
.install-ico { width: 26px; height: 26px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }
.install-panel { max-width: min(92vw, 380px); gap: 12px; }
.install-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 6px 14px rgba(91,58,41,.25); }
.install-panel h2 { font-size: 28px; }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.install-steps li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 12px; font-size: 16px; font-weight: 600; }
.step-num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--pink-deep); color: #fff; display: grid; place-items: center; font-weight: 700; }
.step-text { flex: 1; }
.step-icon { flex: 0 0 26px; width: 26px; height: 26px; }
.install-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.install-note.strong { color: var(--pink-deep); font-size: 16px; }

/* app instalado no iPhone: véu suave atrás da barra de status (texto branco) */
@media (display-mode: standalone) {
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--safe-top) + 6px); z-index: 60; pointer-events: none;
    background: linear-gradient(rgba(91,58,41,.42), rgba(91,58,41,0));
  }
}
/* iPad grande (12,9"/13"): ainda mais espaço */
@media (min-width: 1000px) and (min-height: 1300px) {
  .title-card, .panel, #banner { zoom: 1.75; }
}

/* ---------- Duelo (só no site) ---------- */
.big-btn.duel-btn { background: linear-gradient(180deg, #c7a6ff, #8a5cf0); box-shadow: 0 7px 0 #6238c2, 0 12px 20px rgba(138,92,240,.3); font-size: 22px; }
body.duel .best, body.duel #btnRestart { display: none; }
.duel-panel { max-width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); overflow-y: auto; }
.duel-panel .big-btn { min-width: 220px; }
.duel-text { margin: 0; font-size: 18px; font-weight: 600; max-width: 340px; }
.duel-text.big { font-size: 24px; color: var(--pink-deep); }
.duel-status { margin: 0; min-height: 24px; font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.duel-status:not(:empty)::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: -4px; background: url("assets/ui/sparkle.webp") center / contain no-repeat; }
.duel-status.bad { color: #d0344f; }
.duel-status.bad::before { background-image: url("assets/ui/warn.webp"); }
.duel-avatars { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.duel-avatar { width: 62px; height: 62px; border-radius: 20px; background: #fff; box-shadow: 0 4px 0 rgba(140,70,50,.2); display: grid; place-items: center; transition: transform .15s; }
.duel-avatar img { width: 48px; height: 48px; object-fit: contain; }
.duel-avatar.on { outline: 4px solid var(--pink); transform: translateY(-3px) scale(1.06); }
.duel-avatar.on img { animation: float 2.4s ease-in-out infinite; }
.duel-code { display: flex; gap: 10px; justify-content: center; padding: 10px 14px; border-radius: 26px; background: #ffe3ec; box-shadow: inset 0 3px 0 rgba(140,70,50,.12); }
.duel-slot { width: 70px; height: 70px; border-radius: 22px; background: rgba(91,58,41,.08); border: 4px dashed rgba(91,58,41,.25); display: grid; place-items: center; }
.duel-slot.on { background: #fff; border: 4px solid var(--pink); box-shadow: 0 4px 0 rgba(240,79,132,.35); animation: popIn .35s cubic-bezier(.3,1.6,.5,1); }
.duel-slot img { width: 54px; height: 54px; object-fit: contain; }
.duel-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; margin-top: 6px; padding-top: 14px; border-top: 3px dashed rgba(91,58,41,.15); }
.duel-key { width: 72px; height: 64px; border-radius: 20px; background: #fff8ef; border: 3px solid #f3e2d4; box-shadow: 0 5px 0 rgba(140,70,50,.22); display: grid; place-items: center; font-size: 30px; font-weight: 700; color: var(--ink); transition: transform .12s; }
.duel-key img { width: 46px; height: 46px; object-fit: contain; }
.duel-key:active, .duel-avatar:active, .duel-react:active { transform: translateY(3px) scale(.94); }
.duel-key.del { background: var(--cream); }
.duel-vs { display: flex; align-items: center; gap: 14px; }
.duel-side { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 17px; }
.duel-side img { width: 76px; height: 76px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }
.duel-vs-x { font-size: 34px; font-weight: 700; color: #fff; -webkit-text-stroke: 6px var(--pink-deep); paint-order: stroke fill; animation: wiggle .8s ease-in-out infinite; }
.duel-panel .editions { display: flex; gap: 10px; }

#duelHud { position: fixed; z-index: 6; inset: 0; pointer-events: none; }
.duel-timer {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 60px);
  font-size: 20px; font-weight: 700; background: var(--cream); padding: 2px 14px; border-radius: 16px; box-shadow: 0 3px 0 rgba(140,70,50,.2);
}
.duel-timer { display: flex; align-items: center; gap: 6px; }
.duel-timer img { width: 26px; height: 26px; object-fit: contain; }
.duel-timer.hurry img { animation: wiggle .4s ease-in-out infinite; }
.duel-timer.hurry { background: #ff5d7a; color: #fff; }
.duel-timer.beat { animation: bump .35s ease-out; }
.duel-opp {
  position: fixed; pointer-events: auto; background: rgba(255,248,239,.92); border: 4px solid #fff; border-radius: 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px;
  right: 10px; top: calc(var(--safe-top) + 118px); width: 92px; transition: opacity .3s, filter .3s;
}
.duel-opp.gone { opacity: .55; filter: grayscale(.8); }
.duel-opp-head { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.duel-opp-head img { width: 40px; height: 40px; object-fit: contain; }
.duel-opp-head span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.duel-opp-head b { font-size: 24px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.duel-opp-head b.bump { animation: bump .35s ease-out; }
#duelMini { width: 72px; height: 112px; display: block; }
.duel-reacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.duel-react { width: 36px; height: 34px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 rgba(140,70,50,.2); display: grid; place-items: center; transition: transform .12s; }
.duel-react img { width: 80%; height: 80%; object-fit: contain; }
/* celular: só um selinho ao lado da pausa (sem miniatura nem reações, para não cobrir o pote) */
@media (max-width: 699px) {
  #duelMini, .duel-reacts { display: none; }
  .duel-opp { top: calc(var(--safe-top) + 8px); left: 68px; right: auto; width: auto; padding: 3px 10px 3px 4px; border-radius: 18px; border-width: 3px; }
  .duel-opp-head { flex-direction: row; gap: 4px; }
  .duel-opp-head img { width: 34px; height: 34px; }
  .duel-opp-head span { display: none; }
  .duel-opp-head b { font-size: 22px; }
}
/* computador e tablet: cartão grande ao lado do pote, com o pote da outra ao vivo */
@media (min-width: 900px) {
  .duel-opp { right: max(16px, calc(50vw - 520px)); top: 50%; transform: translateY(-50%); width: 200px; padding: 14px; gap: 10px; }
  .duel-opp-head img { width: 64px; height: 64px; }
  .duel-opp-head span { font-size: 16px; }
  .duel-opp-head b { font-size: 40px; -webkit-text-stroke: 7px var(--ink); }
  #duelMini { width: 170px; height: 270px; }
  .duel-reacts { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .duel-react { width: 40px; height: 40px; }
  .duel-timer { font-size: 26px; }
}

#duelCount {
  /* bloqueia toques durante a contagem: a tela inicial está por baixo e um toque em "Jogar" apagaria a partida salva */
  position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: auto;
  background: rgba(91,58,41,.18);
}
#duelCount span {
  font-size: clamp(110px, 32vw, 220px); font-weight: 700; color: #fff; -webkit-text-stroke: 12px var(--pink-deep); paint-order: stroke fill;
  text-shadow: 0 10px 0 rgba(91,58,41,.3); animation: countPop .8s cubic-bezier(.3,1.6,.5,1);
}
#duelCount span.small { font-size: clamp(64px, 18vw, 120px); }
@keyframes countPop { from { transform: scale(2.2); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }

.duel-results { display: flex; gap: 18px; align-items: flex-end; margin-top: 22px; }
.duel-res { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: 22px; background: #fff; font-size: 17px; }
.duel-res img { width: 74px; height: 74px; object-fit: contain; }
.duel-res.win { background: #fff4c2; transform: scale(1.08); box-shadow: 0 0 0 4px var(--sun); }
.duel-res.win img { animation: float 1.6s ease-in-out infinite; }
.duel-res-score { font-size: 40px; font-weight: 700; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; line-height: 1.1; }
.duel-crown { position: absolute; z-index: 2; top: -30px; width: 52px; height: 52px; object-fit: contain; animation: wiggle .7s ease-in-out infinite; }

.duel-float {
  position: fixed; z-index: 9; bottom: 22%; width: 110px; height: 110px; object-fit: contain; pointer-events: none; transform: translateX(-50%);
  animation: reactUp 2.2s ease-out forwards; filter: drop-shadow(0 6px 0 rgba(91,58,41,.25));
}
.duel-float.mine { width: 64px; height: 64px; }
@keyframes reactUp { 0% { transform: translate(-50%, 40px) scale(.3); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -260px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .duel-float, #duelCount span { animation-duration: .01s; } }

/* arte de interface (assets/ui) nos botões e avisos */
.crown { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; }
.btn-ico { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin: -6px 8px -4px -4px; }
.icon-pill { display: inline-flex; align-items: center; gap: 6px; }
.icon-pill img { width: 28px; height: 28px; object-fit: contain; display: block; }
.icon-pill.off img { filter: grayscale(.6); }
.hint-ico { width: 30px; height: 30px; object-fit: contain; vertical-align: -8px; margin: 0 6px; }
.duel-h { display: flex; align-items: center; justify-content: center; gap: 8px; }
.duel-h-ico { width: 48px; height: 48px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }
.duel-key.del img { width: 40px; height: 40px; object-fit: contain; }
/* relógio do duelo: abaixo do placar no tablet; no computador, cartão grande à esquerda do pote (espelha o da outra) */
@media (min-width: 700px) and (min-height: 800px) { .duel-timer { top: calc(var(--safe-top) + 86px); } }
@media (min-width: 900px) {
  .duel-timer {
    left: max(16px, calc(50vw - 520px)); top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 4px; font-size: 38px; padding: 14px 22px; border-radius: 26px; border: 4px solid #fff;
    box-shadow: var(--shadow); min-width: 150px;
  }
  .duel-timer img { width: 76px; height: 76px; }
}
/* celular: a reação da outra jogadora aparece pequena perto do selinho dela, sem cobrir o pote */
@media (max-width: 699px) {
  .duel-float { width: 64px; height: 64px; bottom: auto; top: calc(var(--safe-top) + 60px); animation-name: reactPop; }
  @keyframes reactPop { 0% { transform: translate(-50%, 20px) scale(.3); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
}
.big-btn[disabled] { opacity: .6; filter: grayscale(.4); }
/* duelo para crianças pequenas: alvos grandes, a próxima casinha do código pisca */
.duel-avatar { width: 70px; height: 70px; }
.duel-avatar img { width: 56px; height: 56px; }
.big-btn.duel-choice { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 250px; font-size: 24px; }
.big-btn.duel-choice .btn-ico { width: 40px; height: 40px; margin: -6px 0; animation: float 2.4s ease-in-out infinite; }
.duel-slot.next { border-color: var(--pink); background: rgba(255,255,255,.7); animation: slotPulse 1s ease-in-out infinite; }
@keyframes slotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(255,122,162,.25); } }
.duel-rule { display: flex; align-items: center; gap: 10px; font-size: 30px; }
.duel-rule img { width: 52px; height: 52px; object-fit: contain; animation: float 2.4s ease-in-out infinite; }

/* ---------- Missões relâmpago do duelo ---------- */
#duelMission { position: fixed; z-index: 6; pointer-events: none; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 98px); width: min(320px, calc(100vw - 32px)); }
.dm-card {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; border-radius: 22px;
  background: linear-gradient(180deg, #fff6c9, #ffe08a); border: 4px solid #fff; box-shadow: var(--shadow); overflow: hidden;
}
.dm-card.fresh { animation: missionIn .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes missionIn { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.dm-card.over { background: linear-gradient(180deg, #e9fff1, #b9f0cf); }
.dm-ico { width: 46px; height: 46px; object-fit: contain; flex: none; animation: float 1.8s ease-in-out infinite; }
.dm-body { flex: 1; min-width: 0; }
.dm-title { display: block; font-size: 17px; line-height: 1.15; }
.dm-prog { display: flex; gap: 4px; margin-top: 4px; }
.dm-prog img { width: 24px; height: 24px; object-fit: contain; filter: grayscale(1) opacity(.4); transition: filter .3s, transform .3s; }
.dm-prog img.on { filter: none; transform: scale(1.15); }
.dm-prog i { width: 14px; height: 14px; border-radius: 50%; background: rgba(91,58,41,.2); }
.dm-prog i.on { background: var(--pink-deep); box-shadow: 0 0 0 3px rgba(240,79,132,.25); }
.dm-prize { flex: none; font-size: 22px; font-weight: 700; color: #fff; -webkit-text-stroke: 5px var(--pink-deep); paint-order: stroke fill; animation: bump 1s ease-in-out infinite; }
.dm-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 5px; border-radius: 3px; background: rgba(91,58,41,.15); overflow: hidden; }
.dm-bar i { display: block; height: 100%; background: var(--pink-deep); transform-origin: left; transition: transform .25s linear; }
@media (min-width: 700px) and (min-height: 800px) { #duelMission { top: calc(var(--safe-top) + 124px); } }
@media (min-width: 900px) {
  #duelMission { left: max(16px, calc(50vw - 520px)); transform: none; top: calc(50% + 100px); width: 200px; }
  .dm-card { flex-wrap: wrap; justify-content: center; text-align: center; }
  .dm-ico { width: 64px; height: 64px; }
  .dm-body { flex-basis: 100%; }
  .dm-prog { justify-content: center; }
  .duel-timer { top: calc(50% - 90px); }
}
/* celular: missão compacta embaixo da pausa */
@media (max-width: 699px) {
  #duelMission { left: 8px; transform: none; top: calc(var(--safe-top) + 64px); width: 168px; }
  .dm-card { padding: 6px 8px 10px; gap: 6px; border-radius: 16px; border-width: 3px; }
  .dm-ico { width: 30px; height: 30px; }
  .dm-title { font-size: 12px; }
  .dm-prog img { width: 16px; height: 16px; }
  .dm-prog i { width: 9px; height: 9px; }
  .dm-prize { font-size: 15px; -webkit-text-stroke: 4px var(--pink-deep); }
}
/* quem está na frente ganha um brilho */
.duel-opp.lead { box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
body.duel-lead .score-box .score { animation: leadGlow 1.4s ease-in-out 3; } /* brilha 3x ao passar na frente, não para sempre */
@keyframes leadGlow { 0%, 100% { text-shadow: 0 4px 0 rgba(91,58,41,.35); } 50% { text-shadow: 0 0 18px #ffd45c, 0 4px 0 rgba(91,58,41,.35); } }

/* travessuras */
#prankLayer { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.prank-bubble {
  position: absolute; pointer-events: auto; border-radius: 50%; border: 3px solid rgba(255,255,255,.95);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, rgba(190,230,255,.35) 13% 55%, rgba(255,170,230,.45) 100%);
  box-shadow: inset 0 -6px 14px rgba(150,120,255,.35), 0 6px 14px rgba(91,58,41,.15);
  animation: bubbleWobble 2.4s ease-in-out infinite;
}
.prank-bubble.pop { animation: bubblePop .22s ease-out forwards; }
@keyframes bubbleWobble { 0%, 100% { transform: translate(0, 0) scale(1, 1); } 33% { transform: translate(8px, -10px) scale(1.06, .95); } 66% { transform: translate(-6px, 6px) scale(.95, 1.05); } }
@keyframes bubblePop { to { transform: scale(1.5); opacity: 0; } }
body.disco #game { animation: disco .7s linear infinite; }
@keyframes disco { from { filter: hue-rotate(0deg) saturate(1.3); } to { filter: hue-rotate(360deg) saturate(1.3); } }
@media (prefers-reduced-motion: reduce) { body.disco #game { animation: none; } }

/* ---------- Duelo: layout pelo espaço real ao lado do pote (--jar-l vem do resize do jogo) ---------- */
/* Com espaço dos lados (tablet, computador): relógio e missão à esquerda, a outra jogadora à direita. */
body.duel-wide .duel-timer, body.duel-wide #duelMission, body.duel-wide .duel-opp {
  left: calc(var(--jar-l) / 2); right: auto; width: min(210px, calc(var(--jar-l) - 28px)); min-width: 0;
}
body.duel-wide .duel-timer {
  top: calc(50% - 16px); transform: translate(-50%, -100%);
  flex-direction: column; gap: 4px; font-size: 36px; padding: 12px; border-radius: 26px; border: 4px solid #fff; box-shadow: var(--shadow);
}
body.duel-wide .duel-timer img { width: 70px; height: 70px; }
body.duel-wide #duelMission { top: calc(50% + 4px); transform: translateX(-50%); }
body.duel-wide .dm-card { flex-wrap: wrap; justify-content: center; text-align: center; }
body.duel-wide .dm-ico { width: 56px; height: 56px; }
body.duel-wide .dm-body { flex-basis: 100%; }
body.duel-wide .dm-prog { justify-content: center; }
body.duel-wide .duel-opp { left: calc(100vw - var(--jar-l) / 2); top: 50%; transform: translate(-50%, -50%); padding: 12px; gap: 8px; border-radius: 26px; }
body.duel-wide .duel-opp-head { flex-direction: column; }
body.duel-wide .duel-opp-head img { width: 60px; height: 60px; }
body.duel-wide .duel-opp-head span { display: block; font-size: 15px; }
body.duel-wide .duel-opp-head b { font-size: 36px; -webkit-text-stroke: 7px var(--ink); }
body.duel-wide #duelMini { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
body.duel-wide .duel-reacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; width: 100%; }
body.duel-wide .duel-react { width: 100%; height: 40px; }
/* Sem espaço dos lados (celular): segunda faixa no topo, logo abaixo do placar (o pote desce para caber). */
body:not(.duel-wide) .duel-timer { top: calc(var(--safe-top) + 72px); left: 50%; transform: translateX(-50%); font-size: 18px; padding: 1px 12px; }
body:not(.duel-wide) .duel-timer img { width: 22px; height: 22px; }
body:not(.duel-wide) .duel-opp {
  top: calc(var(--safe-top) + 98px); left: 10px; right: auto; width: auto; transform: none;
  flex-direction: row; padding: 3px 10px 3px 4px; border-radius: 18px; border-width: 3px;
}
body:not(.duel-wide) .duel-opp-head { flex-direction: row; gap: 4px; }
body:not(.duel-wide) .duel-opp-head img { width: 32px; height: 32px; }
body:not(.duel-wide) .duel-opp-head span, body:not(.duel-wide) #duelMini, body:not(.duel-wide) .duel-reacts { display: none; }
body:not(.duel-wide) .duel-opp-head b { font-size: 22px; }
body:not(.duel-wide) #duelMission { top: calc(var(--safe-top) + 96px); left: auto; right: 10px; transform: none; width: min(250px, calc(100vw - 132px)); }
body:not(.duel-wide) .dm-card { padding: 5px 8px 9px; gap: 6px; border-radius: 16px; border-width: 3px; }
body:not(.duel-wide) .dm-ico { width: 30px; height: 30px; }
body:not(.duel-wide) .dm-title { font-size: 12px; }
body:not(.duel-wide) .dm-prog img { width: 16px; height: 16px; }
body:not(.duel-wide) .dm-prog i { width: 9px; height: 9px; }
body:not(.duel-wide) .dm-prize { font-size: 15px; -webkit-text-stroke: 4px var(--pink-deep); }

/* janelas em telas de até 950 px de altura (notebook): menos zoom, nada encosta no topo */
@media (min-width: 700px) and (min-height: 800px) and (max-height: 950px) { .panel { zoom: 1.12; } }
/* computador largo: pausa e "próxima" perto do pote, não nos cantos da tela */
@media (min-width: 900px) { #hud { padding: 0 max(26px, calc(var(--jar-l, 0px) - 110px)); } }

/* contagem do duelo: a tela inicial some por trás do número */
body.duel-counting #title, body.duel-counting .fruit-rain { visibility: hidden; }
body.duel-counting #duelCount { background: radial-gradient(circle, rgba(255,248,239,.55), rgba(255,209,220,.75)); }

/* esperando a anfitriã aceitar: o próprio bichinho pulando + pontinhos */
.duel-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.duel-wait img { width: 84px; height: 84px; object-fit: contain; animation: hop 1s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-14px) scale(.96, 1.04); } 55% { transform: translateY(0) scale(1.06, .94); } }
.duel-dots { display: flex; gap: 8px; }
.duel-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); animation: dot 1.2s ease-in-out infinite; }
.duel-dots i:nth-child(2) { animation-delay: .2s; } .duel-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } }
/* batida do relógio nos 10 s finais: escala separada para não brigar com o posicionamento (transform) */
.duel-timer.beat { animation: beatScale .35s ease-out; }
@keyframes beatScale { 50% { scale: 1.15; } }
/* celular pequeno (iPhone SE): as 4 casinhas do código cabem dentro da janela */
@media (max-width: 380px) {
  .duel-code { gap: 6px; padding: 8px 10px; }
  .duel-slot { width: 58px; height: 58px; border-radius: 18px; }
  .duel-slot img { width: 44px; height: 44px; }
}

/* ---------- Ajustes ---------- */
.settings-pill img { width: 28px; height: 28px; }
.settings-pill { padding-right: 16px; }
.settings-panel { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); overflow-y: auto; gap: 14px; }
.settings-h { display: flex; align-items: center; gap: 10px; }
.settings-h img { width: 46px; height: 46px; object-fit: contain; animation: spin 6s linear infinite; }
.set-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 20px;
  background: #fff; box-shadow: 0 4px 0 rgba(140,70,50,.14); font-size: 19px; font-weight: 600; color: var(--ink);
  transition: transform .12s;
}
.set-row:active, .set-chip:active, .set-theme:active { transform: translateY(2px) scale(.98); }
.set-row img { width: 38px; height: 38px; object-fit: contain; }
.set-row span { flex: 1; text-align: left; }
.switch { position: relative; flex: none; width: 56px; height: 32px; border-radius: 16px; background: #e9dccd; transition: background .2s; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(91,58,41,.25); transition: transform .25s cubic-bezier(.3,1.5,.5,1);
}
.set-row.on .switch { background: linear-gradient(180deg, #9ce8bf, #3fb979); }
.set-row.on .switch::after { transform: translateX(24px); }
.set-group { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.set-label { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--ink-soft); }
.set-label img { width: 30px; height: 30px; object-fit: contain; }
.set-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.set-chip, .set-theme {
  border-radius: 16px; background: #fff; border: 3px solid transparent; box-shadow: 0 4px 0 rgba(140,70,50,.14);
  font-weight: 700; color: var(--ink); transition: transform .12s, border-color .2s;
}
.set-chip { padding: 10px 8px; font-size: 17px; }
.set-chip.on, .set-theme.on { border-color: var(--pink-deep); background: #fff1f6; }
.set-hint { margin: 0; min-height: 18px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.set-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.set-theme { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 6px 9px; font-size: 15px; }
.set-sky { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; }
.set-sky img { width: 56%; height: 70%; object-fit: contain; }
.set-theme.on .set-sky img { animation: float 2.2s ease-in-out infinite; }
.set-version { margin: -4px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); opacity: .7; }
/* computador/tablet deitado: Ajustes em duas colunas (interruptores | idioma e cenário), sem rolar */
@media (min-width: 900px) {
  .settings-panel {
    width: min(780px, calc(100vw - 48px)); display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 26px; align-items: start;
    grid-template-areas: "h h" "list lang" "list scene" "done done" "ver ver";
  }
  .settings-h { grid-area: h; justify-self: center; }
  .set-list { grid-area: list; }
  .set-lang { grid-area: lang; }
  .set-scene { grid-area: scene; }
  #btnSettingsDone { grid-area: done; justify-self: center; }
  .set-version { grid-area: ver; }
}

/* Sem JavaScript: o que é o jogo e links para as páginas do produto (scripts/build_pages.py) */
.noscript { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; background: var(--cream); font-size: 18px; }
.noscript h1 { margin: 0; font-size: 28px; }
.noscript a { color: var(--pink-deep); font-weight: 700; }