/* Jelly Town: visual "Adesivos suaves" (tokens copiados de site/style.css, para o jogo ser independente; veja
   "Visual do site" no CLAUDE.md). */
:root {
  --y: #ffd65c;
  --ink: #5c4646;
  --paper: #fffdf5;
  --pink: #ff86a3;
  --sky: #5ec4f5;
  --leaf: #5fcf8c;
  --orange: #ffa94d;
  --borda: #b39189;
  --sombra: rgba(92, 70, 70, .16);
  --traco: 2px;
  --display: "Gluten", "Comic Sans MS", cursive;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --cor: #ff86a3; /* cor escolhida no balde (o main.js troca) */
  /* fundo próprio da Jelly Town (cada jogo tem o seu, veja o CLAUDE.md): verde-limão com jujubinhas */
  --fundo: #c8eb92;
  --fundo-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M8 24c0-8 3-11 8-11s8 3 8 11z' fill='%23ffb3c6'/%3E%3Cpath d='M50 16c0-8 3-11 8-11s8 3 8 11z' fill='%23ffe99a' transform='rotate(18 58 11)'/%3E%3Cpath d='M28 56c0-8 3-11 8-11s8 3 8 11z' fill='%23dcc2f5' transform='rotate(-14 36 51)'/%3E%3Cpath d='M62 76c0-8 3-11 8-11s8 3 8 11z' fill='%23ffcd91' transform='rotate(10 70 71)'/%3E%3Cg fill='%23ffffff' fill-opacity='.7'%3E%3Ccircle cx='13' cy='18' r='2'/%3E%3Ccircle cx='55' cy='9.5' r='2' transform='rotate(18 58 11)'/%3E%3Ccircle cx='33' cy='50' r='2' transform='rotate(-14 36 51)'/%3E%3Ccircle cx='67' cy='70' r='2' transform='rotate(10 70 71)'/%3E%3C/g%3E%3C/svg%3E");
  --fundo-tam: 84px 84px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  background-color: var(--fundo);
  background-image: var(--fundo-img);
  background-size: var(--fundo-tam);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: var(--c-dedo); touch-action: manipulation; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.1; }

/* ---------- Início (só na galeria) ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) 22px calc(16px + var(--safe-l));
  background-color: var(--fundo);
  background-image: var(--fundo-img);
  background-size: var(--fundo-tam);
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
  pointer-events: none;
}
.topbar .home-link, .topbar .mudo { pointer-events: auto; }
.topbar .mudo { --b: 44px; }
.home-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 16px 6px 10px;
  font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--ink); text-decoration: none;
  background: var(--y); border: var(--traco) solid var(--borda); border-radius: 999px;
  box-shadow: 0 4px 0 var(--sombra);
  transition: transform .12s ease, box-shadow .12s ease;
}
.home-link svg { width: 22px; height: 22px; }
.home-link:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sombra); }

/* ---------- galeria e escolha do mapa ---------- */
.galeria {
  position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(86px + var(--safe-t)) calc(18px + var(--safe-r)) calc(36px + var(--safe-b)) calc(18px + var(--safe-l));
}
.titulo {
  text-align: center; font-size: clamp(34px, 7vw, 52px); margin: -6px 0 22px;
  color: var(--paper); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--sombra);
}
.grade {
  display: grid; gap: 26px; max-width: 1100px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(min(40vw, 230px), 1fr));
}
.card {
  position: relative; aspect-ratio: 4 / 3; padding: 0;
  background: var(--paper); border: var(--traco) solid var(--borda); border-radius: 18px;
  box-shadow: 0 6px 0 var(--sombra);
  transform: rotate(var(--rot, -.6deg));
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:nth-child(2n) { --rot: .7deg; }
.card:nth-child(3n) { --rot: -.3deg; }
.card:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--sombra); }
.novo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--pink); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 4vw, 32px);
}
.novo .mais {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--y); color: var(--ink); border: var(--traco) solid var(--borda); box-shadow: 0 4px 0 var(--sombra);
  font-size: 1.5em; line-height: 1; text-shadow: none; padding-top: .08em;
}
.salva .abrir, .mapa-card {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #afdc92;
}
.salva .abrir svg, .mapa-card svg { display: block; width: 100%; height: 100%; }
.mapa-card { position: relative; }
.mapa-card .nome {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) rotate(-2deg);
  padding: 2px 16px 4px; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: clamp(20px, 3.4vw, 26px);
  background: var(--y); border: var(--traco) solid var(--borda); box-shadow: 0 4px 0 var(--sombra);
}
.lixo {
  position: absolute; top: -16px; right: -16px;
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: var(--paper); border: var(--traco) solid var(--borda); box-shadow: 0 3px 0 var(--sombra);
}
.lixo svg { width: 24px; height: 24px; }
.lixo:active { transform: translateY(2px); box-shadow: none; }
.nav-mapas {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: calc(12px + var(--safe-t)) calc(16px + var(--safe-r)) 18px calc(16px + var(--safe-l));
  background-color: var(--fundo); background-image: var(--fundo-img); background-size: var(--fundo-tam);
  -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent);
  --b: 52px;
}
.nav-mapas h2 { font-size: clamp(24px, 5vw, 34px); }
.mapas { padding-top: calc(92px + var(--safe-t)); }

/* ---------- botões redondos ---------- */
.rb {
  display: grid; place-items: center; width: var(--b); height: var(--b); padding: 0;
  border-radius: 50%; background: var(--paper); border: var(--traco) solid var(--borda); box-shadow: 0 4px 0 var(--sombra);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.rb svg { width: 60%; height: 60%; overflow: visible; }
.rb:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sombra); }
.rb:disabled { opacity: .35; cursor: var(--c-seta); }
.rb.voltar { background: var(--y); }
.rb.voltar svg { width: 62%; height: 62%; }
.rb[aria-pressed="true"] { background: #c9edff; transform: scale(1.1); box-shadow: 0 5px 0 var(--sombra); }
.mudo .off { display: none; }
.mudo[aria-pressed="true"] { background: #fddde3; transform: none; box-shadow: 0 4px 0 var(--sombra); }
.mudo[aria-pressed="true"] .on { display: none; }
.mudo[aria-pressed="true"] .off { display: inline; }
#btnNoite .lua { display: none; }
#btnNoite[aria-pressed="true"] { background: #3f5193; }
#btnNoite[aria-pressed="true"] .sol { display: none; }
#btnNoite[aria-pressed="true"] .lua { display: block; }
.cor-fill { fill: var(--cor); }

/* ---------- a vila ---------- */
.vila {
  position: fixed; inset: 0; overflow: hidden;
  --b: clamp(42px, calc((100dvh - 60px) / 7.6), 62px);
  --sw: calc(var(--b) * .7);
  --gaveta-h: 0px;
}
.palco { position: absolute; inset: 0; }
.mundo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: var(--c-mao); }
.mundo[data-modo="pintar"] { cursor: var(--c-dedo); }

.barra {
  position: absolute; z-index: 10;
  top: calc(10px + var(--safe-t)); left: calc(10px + var(--safe-l));
  display: flex; flex-direction: column; gap: 8px;
}
.canto {
  position: absolute; z-index: 10;
  top: calc(10px + var(--safe-t)); right: calc(10px + var(--safe-r));
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.rb.mini { width: calc(var(--b) * .8); height: calc(var(--b) * .8); }

.paleta {
  position: absolute; z-index: 11;
  top: calc(10px + var(--safe-t)); left: calc(22px + var(--safe-l) + var(--b));
  display: grid; grid-template-columns: repeat(2, var(--sw)); gap: 7px; padding: 10px;
  background: var(--paper); border: var(--traco) solid var(--borda); border-radius: 20px; box-shadow: 0 5px 0 var(--sombra);
}
.cor {
  width: var(--sw); height: var(--sw); padding: 0; border-radius: 50%;
  background: var(--c); border: var(--traco) solid var(--borda); box-shadow: 0 3px 0 var(--sombra);
  transition: transform .12s ease;
}
.cor[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }

@media (orientation: portrait) {
  .vila { --b: clamp(40px, calc((100vw - 70px) / 6.9), 60px); }
  .barra { flex-direction: row; }
  .paleta {
    top: calc(22px + var(--safe-t) + var(--b)); left: calc(10px + var(--safe-l));
    grid-template-columns: repeat(8, var(--sw));
  }
  .canto { top: calc(10px + var(--safe-t)); }
}

/* gaveta de peças */
.gaveta {
  position: absolute; z-index: 9; left: 0; right: 0; bottom: 0;
  --pb: clamp(64px, 15dvh, 104px);
  --ab: clamp(40px, 7.4dvh, 54px);
  padding: 10px calc(12px + var(--safe-r)) calc(8px + var(--safe-b)) calc(12px + var(--safe-l));
  background: var(--paper); border-top: var(--traco) solid var(--borda); border-radius: 26px 26px 0 0;
  box-shadow: 0 -4px 0 rgba(92, 70, 70, .12);
}
@media (orientation: portrait) { .gaveta { --pb: clamp(68px, 11dvh, 108px); --ab: clamp(36px, calc((100vw - 76px) / 8), 56px); } }
/* celular deitado: a gaveta fica baixinha, para sobrar mapa */
@media (orientation: landscape) and (max-height: 520px) {
  .gaveta { --pb: 58px; --ab: 36px; padding-top: 6px; padding-bottom: calc(4px + var(--safe-b)); }
  .abas { padding-bottom: 2px; }
}
.abas {
  display: flex; gap: 6px; padding: 0 0 6px 0; overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar, .fileira::-webkit-scrollbar { display: none; }
.aba {
  flex: none; display: grid; place-items: center; width: var(--ab); height: var(--ab); padding: 4px;
  border-radius: 14px; background: transparent; border: 3px solid transparent;
}
.aba svg { width: 100%; height: 100%; display: block; }
.aba[aria-selected="true"] { background: #fcf1c9; border-color: var(--ink); box-shadow: 0 3px 0 var(--sombra); }
.fileira {
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; padding: 2px 0;
}
.fileira button {
  flex: none; width: var(--pb); height: var(--pb); padding: 6px; border: 0; border-radius: 18px; background: transparent;
  touch-action: pan-x; cursor: var(--c-mao);
}
.fileira button:active { background: #fcf1c9; }
.fileira svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.gaveta .fecha { position: absolute; top: -24px; right: calc(14px + var(--safe-r)); --b: 44px; }
.rb.pecas {
  position: absolute; z-index: 9; left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b));
  width: calc(var(--b) * 1.35); height: calc(var(--b) * 1.35); background: var(--y);
}
.rb.pecas svg { width: 70%; height: 70%; }

/* barrinha da peça escolhida */
.flutua {
  position: absolute; z-index: 12; left: 0; top: 0;
  display: flex; gap: 8px; --b: 46px;
  pointer-events: none;
}
.flutua .rb { pointer-events: auto; }

/* lixeira grande (enquanto arrasta) */
.lixeira {
  position: absolute; z-index: 13; left: 50%; bottom: calc(var(--gaveta-h) + 16px + var(--safe-b));
  width: 86px; height: 86px; margin-left: -43px; padding: 12px;
  border-radius: 50%; background: var(--paper); border: var(--traco) solid var(--borda); box-shadow: 0 5px 0 var(--sombra);
  pointer-events: none; transition: transform .15s ease, background .15s ease;
  animation: aparece .18s ease-out;
}
.lixeira svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lixeira .tampa { transform-box: fill-box; transform-origin: 0 100%; transition: transform .15s ease; }
.lixeira.cheia { transform: scale(1.25); background: #fddde3; }
.lixeira.cheia .tampa { transform: rotate(-24deg) translate(-2px, -4px); }
@keyframes aparece { from { transform: scale(.4); opacity: 0; } }

/* escurece um instante ao trocar dia e noite */
.cortina { position: absolute; inset: 0; z-index: 20; background: #2c3d7d; opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.cortina.fecha { opacity: .55; }

/* ---------- dentro do SVG ---------- */
.ui, .fx, .halo, .texto { pointer-events: none; }
.ui .sel { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 9 7; vector-effect: non-scaling-stroke; }
.ui .alca { pointer-events: auto; cursor: var(--c-mao); }
.alca circle { fill: var(--y); stroke: var(--ink); stroke-width: 4; }
.alca .alca-toque { fill: transparent; stroke: none; }
.alca-seta { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.longe .fino { display: none; }

.mov, .anim { transform-box: fill-box; transform-origin: 50% 100%; }
.gira, .contra, .roda, .pendulo, .prancha, .sobe, .desce, .vira, .carro-mr { transform-box: view-box; transform-origin: 0 0; }
.no-ar > .mov { transform: translateY(-14px) scale(1.07); transition: transform .12s ease-out; }
.no-ar .sombra { fill-opacity: .1; }
.corpo.nasce { transform-box: fill-box; transform-origin: 50% 100%; animation: nasce .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nasce { from { transform: scale(.2); } }
.anim.pousa { animation: pousa .32s ease-out; }
@keyframes pousa { 0% { transform: scale(1.1, .9); } 60% { transform: scale(.97, 1.03); } }

/* tocar e animar (o JS põe a classe a-<nome> no grupo da peça e tira quando acaba; durações iguais às do animacoes.js) */
.a-pula > .mov > .anim { animation: pula .6s ease-out; }
.a-balanca > .mov > .anim { animation: balanca .9s ease-in-out; }
.a-sacode > .mov > .anim, .a-sacode > .anim { animation: sacode .52s ease-in-out; }
.a-anda > .mov { animation: anda 1.5s ease-in-out; }
.a-anda .roda { animation: rodaGira 1.5s ease-in-out; }
.a-flutua > .mov > .anim { animation: flutua 1.8s ease-in-out; }
.a-rola > .mov > .anim { animation: rola 1.4s ease-in-out; }
.a-gira .gira { animation: gira 2.6s ease-in-out; }
.a-gira .contra { animation: contra 2.6s ease-in-out; }
.a-sobe .sobe { animation: sobe 1s ease-in-out 2; }
.a-sobe .desce { animation: desce 1s ease-in-out 2; }
.a-pendulo .pendulo { animation: pendulo 2s ease-in-out; }
.a-prancha .prancha { animation: prancha 1.6s ease-in-out; }
.a-vira .vira { animation: vira 1.3s linear; }
.a-trilho .carro-mr { animation: trilho 1.6s ease-in-out 2 alternate; }
@keyframes pula { 20% { transform: scale(1.12, .86); } 50% { transform: translateY(-34px) scale(.95, 1.06); } 80% { transform: scale(1.06, .94); } }
@keyframes balanca { 25% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } 85% { transform: rotate(-2deg); } }
@keyframes sacode { 20% { transform: rotate(-2deg) scale(1.04); } 40% { transform: rotate(2deg) scale(1.04); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(1deg); } }
@keyframes anda { 45%, 55% { transform: translateX(70px); } }
@keyframes rodaGira { 45%, 55% { transform: rotate(230deg); } }
@keyframes flutua { 50% { transform: translateY(-40px); } }
@keyframes rola { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes contra { to { transform: rotate(-360deg); } }
@keyframes sobe { 50% { transform: translateY(-22px); } }
@keyframes desce { 50% { transform: translateY(18px); } }
@keyframes pendulo { 20% { transform: rotate(28deg); } 45% { transform: rotate(-24deg); } 70% { transform: rotate(14deg); } 88% { transform: rotate(-6deg); } }
@keyframes prancha { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes vira { 12.5% { transform: scaleX(0); } 25% { transform: scaleX(-1); } 37.5% { transform: scaleX(0); } 50% { transform: none; } 62.5% { transform: scaleX(0); } 75% { transform: scaleX(-1); } 87.5% { transform: scaleX(0); } }
@keyframes trilho {
  15% { transform: translate(53px, 50px) rotate(40deg); }
  30% { transform: translate(100px, 100px); }
  45% { transform: translate(144px, 65px) rotate(-35deg); }
  60% { transform: translate(180px, 30px); }
  100% { transform: translate(208px, 72px) rotate(60deg); }
}

.part { transform-box: fill-box; transform-origin: center; stroke: rgba(92, 70, 70, .5); stroke-width: 1.5; animation: voa var(--t, .9s) ease-out both; }
@keyframes voa { 0% { transform: none; opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(var(--s1)); opacity: 0; } }
.respingo { transform-box: fill-box; transform-origin: center; fill-opacity: .55; animation: respingo .5s ease-out forwards; }
@keyframes respingo { from { transform: scale(.15); opacity: .8; } to { transform: scale(1); opacity: 0; } }

/* ---------- diálogo e aviso ---------- */
.dlg {
  width: min(92vw, 420px); padding: 22px; text-align: center;
  background: var(--paper); color: var(--ink); border: var(--traco) solid var(--borda); border-radius: 24px;
  box-shadow: 0 8px 0 var(--sombra);
}
.dlg::backdrop { background: rgba(92, 70, 70, .45); }
.dlg h2 { font-size: 28px; margin: 14px 0 18px; }
.dlg-miniatura { width: 70%; margin: 0 auto; aspect-ratio: 4 / 3; border: var(--traco) solid var(--borda); border-radius: 12px; overflow: hidden; background: #afdc92; }
.dlg-miniatura svg { display: block; width: 100%; height: 100%; }
.dlg-botoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  min-width: 130px; padding: 10px 22px; border-radius: 999px;
  font-family: var(--display); font-weight: 800; font-size: 22px;
  border: var(--traco) solid var(--borda); box-shadow: 0 4px 0 var(--sombra);
}
.btn.nao { background: var(--leaf); }
.btn.sim { background: var(--paper); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sombra); }

.aviso {
  position: fixed; z-index: 60; left: 50%; top: calc(24px + var(--safe-t)); transform: translate(-50%, -20px);
  max-width: 90vw; padding: 10px 18px; border-radius: 16px;
  background: var(--paper); border: var(--traco) solid var(--borda); box-shadow: 0 4px 0 var(--sombra);
  font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.aviso.show { opacity: 1; transform: translate(-50%, 0); }

@media (hover: hover) {
  .card:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 9px 0 var(--sombra); }
  .home-link:hover, .home-link:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--sombra); outline: none; }
  .rb:not(:disabled):hover { transform: translateY(-2px); }
  .rb[aria-pressed="true"]:hover { transform: scale(1.1) translateY(-2px); }
  .fileira button:hover, .aba:hover { background: #fdf6dd; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}