@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;
  --lilac: #b9a4ff;
  --mint: #5fd3a5;
  --sky: #6cc4ff;
  --sun: #ffd23f;
  --shadow: 0 6px 0 rgba(120, 60, 70, .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;
  --stage: 34vh; /* altura do palco do gatinho (o jogo ajusta via JS) */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffd6e4; 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; background: none; padding: 0; }
img { -webkit-user-drag: none; }
.hidden { display: none !important; }

/* ---------- Fundo ---------- */
#bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, #c9b8ff 0%, #ffc4dc 46%, #ffe2c4 78%, #ffd0a8 100%);
  background-size: cover; background-position: center bottom;
}
#bg.has-art { background-image: var(--art); }
#bg .lights {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(255,240,170,.85) 1.2px, transparent 1.8px);
  background-size: 96px 120px, 150px 140px;
  background-position: 12px 24px, 64px 80px;
  animation: twinkle 5s ease-in-out infinite alternate;
  opacity: .6;
}
#bg.has-art .lights { opacity: .35; }
@keyframes twinkle { from { opacity: .25; } to { opacity: .75; } }
/* camada de trás (ideia 81): fundo da pista e mesa, redesenhados só quando a tela muda */
#back { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; } /* nenhum gesto do navegador atrasa ou rouba o toque (ideia 3) */

/* ---------- Telas (ficam na parte de cima; o gatinho aparece embaixo, no palco) ---------- */
.screen {
  position: fixed; z-index: 5; left: 0; right: 0; top: 0;
  bottom: var(--stage);
  padding: calc(var(--safe-top) + 14px) 16px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  animation: screenIn .35s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes screenIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.logo { display: flex; flex-direction: column; align-items: center; line-height: .86; margin-bottom: 2px; }
.logo span {
  font-weight: 700; color: #fff; display: block;
  -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill;
  text-shadow: 0 7px 0 rgba(91, 58, 41, .3);
}
.logo .l1 { font-size: clamp(54px, 15vw, 92px); color: #ffe27a; transform: rotate(-4deg); animation: wobble 2.4s ease-in-out infinite; }
.logo .l2 { font-size: clamp(66px, 19vw, 118px); color: #ff8fb8; transform: rotate(3deg); animation: wobble 2.4s ease-in-out -1.2s infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } }
.tagline {
  margin: 0; font-size: 18px; font-weight: 600; text-align: center;
  background: rgba(255, 248, 239, .85); padding: 6px 16px; border-radius: 20px;
}
.row { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

.big-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 220px; padding: 14px 34px; border-radius: 40px;
  font-size: 30px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #ff8fb8, var(--pink-deep));
  box-shadow: 0 7px 0 #c23565, 0 12px 20px rgba(194, 53, 101, .3);
  -webkit-text-stroke: 1px rgba(91,58,41,.15);
  transition: transform .12s;
}
.big-btn img { width: 44px; height: 44px; }
.big-btn.play { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 30px; font-size: 19px; font-weight: 700;
  background: var(--cream); box-shadow: var(--shadow); transition: transform .12s;
}
.pill img { width: 32px; height: 32px; }
.tool {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 54px; height: 54px; padding: 0 10px; border-radius: 27px; justify-content: center;
  background: rgba(255, 248, 239, .92); box-shadow: var(--shadow); font-weight: 700; font-size: 15px;
  transition: transform .12s, opacity .2s;
}
.tool img { width: 34px; height: 34px; }
.tool.off img { opacity: .35; filter: grayscale(1); }
.round-btn {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--cream); box-shadow: var(--shadow);
  display: grid; place-items: center; transition: transform .12s;
}
.round-btn svg { width: 24px; height: 24px; fill: var(--ink); stroke: var(--ink); }
.round-btn:active, .tool:active, .big-btn:active, .pill:active, .song:active, .item:active { transform: translateY(3px) scale(.96); }
.stars-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 248, 239, .92); border-radius: 30px; padding: 6px 16px 6px 8px;
  font-size: 22px; font-weight: 700; box-shadow: var(--shadow);
}
.stars-badge img { width: 34px; height: 34px; }
.stars-badge.small { font-size: 18px; padding: 4px 12px 4px 6px; }
.stars-badge.small img { width: 28px; height: 28px; }
.stars-badge.pop { animation: bump .5s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-4deg); } 100% { transform: scale(1); } }

/* ---------- Escolha da música ---------- */
#songs, #shop { justify-content: flex-start; padding-bottom: 6px; }
.bar { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; }
.bar h2 {
  flex: 1; margin: 0; text-align: center; font-size: 26px; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}
.paws-pick { display: flex; gap: 8px; width: 100%; max-width: 560px; }
.paws-pick button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; border-radius: 20px; background: rgba(255, 248, 239, .75);
  box-shadow: var(--shadow); font-size: 17px; transition: transform .15s, background .2s;
}
.paws-pick button[aria-checked="true"] { background: #fff; outline: 4px solid var(--pink); transform: translateY(-2px); }
.pawdots { display: flex; gap: 2px; height: 26px; align-items: center; }
.pawdots canvas { width: 24px; height: 24px; }
.song-list {
  width: 100%; max-width: 560px; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 14px;
  mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}
.song {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 14px 8px 8px; border-radius: 24px; background: var(--cream);
  box-shadow: 0 5px 0 rgba(120, 60, 70, .22); transition: transform .12s;
  border-left: 10px solid var(--c, #ffd23f);
}
.song .ico { width: 58px; height: 58px; border-radius: 18px; background: var(--c, #ffd23f); display: grid; place-items: center; flex: none; }
.song .ico img { width: 50px; height: 50px; }
.song .txt { flex: 1; min-width: 0; }
.song .name { font-size: 19px; font-weight: 700; line-height: 1.15; }
.song .lvl { display: flex; gap: 3px; margin-top: 4px; align-items: center; }
.song .lvl i { width: 10px; height: 10px; border-radius: 50%; background: #f1dccd; }
.song .lvl i.on { background: var(--pink); }
.song .lvl i.hot { background: #ff7a2e; box-shadow: 0 0 6px #ffb067; } /* nível 4: Desafio */
.song .best { display: flex; gap: 1px; flex: none; }
.song .best img { width: 26px; height: 26px; opacity: .22; filter: grayscale(1); }
.song .best img.on { opacity: 1; filter: none; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; z-index: 6; left: 0; right: 0; top: calc(var(--safe-top) + 8px);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; pointer-events: none;
}
#hud > * { pointer-events: auto; }
.hud-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none !important; }
.song-name {
  font-size: 15px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 248, 239, .85); padding: 2px 12px; border-radius: 14px;
}
.progress { width: min(240px, 100%); height: 10px; border-radius: 6px; background: rgba(255, 248, 239, .7); overflow: hidden; box-shadow: inset 0 2px 0 rgba(91,58,41,.12); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8fb8, #ffd23f); border-radius: 6px; }
.score {
  min-width: 70px; text-align: right; font-size: 32px; font-weight: 700; line-height: 1; color: #fff;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}

/* ---------- Pausa / contagem ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: rgba(91, 58, 41, .35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.card {
  background: var(--cream); border-radius: 32px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 10px 0 rgba(120, 60, 70, .25); min-width: 260px; max-width: calc(100vw - 32px);
}
.card h2 { margin: 0 0 4px; font-size: 32px; }
#count {
  position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; pointer-events: none;
  font-size: 120px; font-weight: 700; color: #ffe27a; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill;
}
#count span { animation: countPop .55s ease-out both; }
@keyframes countPop { from { transform: scale(2); opacity: 0; } 40% { transform: scale(.9); opacity: 1; } to { transform: scale(1); } }

/* ---------- Resultado ---------- */
.card.res { width: min(400px, 100%); padding-top: 16px; gap: 8px; }
.res-song { font-size: 17px; font-weight: 600; color: var(--ink-soft); text-align: center; }
.res-stars { display: flex; gap: 6px; align-items: flex-end; height: 86px; }
.res-stars i {
  width: 70px; height: 70px; background: url("assets/ui/star.webp") center/contain no-repeat;
  filter: grayscale(1) opacity(.25); transform: scale(.8);
}
.res-stars i:nth-child(2) { width: 84px; height: 84px; }
.res-stars i.on { animation: starIn .5s cubic-bezier(.2, 1.6, .4, 1) both; filter: none; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); filter: none; } to { transform: scale(1) rotate(0); filter: none; } }
.res-title { font-size: 32px; font-weight: 700; color: var(--pink-deep); }
.res-score { font-size: 46px; font-weight: 700; line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.res-detail { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 15px; font-weight: 600; }
.res-detail span { background: #fff; border-radius: 14px; padding: 4px 10px; }
.res-detail b { color: var(--pink-deep); }
.unlock {
  display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #fff3b0, #ffd6e8);
  border-radius: 22px; padding: 6px 16px 6px 6px; animation: bump .6s ease-out .9s both;
}
.unlock canvas { width: 64px; height: 64px; }
.unlock div { display: flex; flex-direction: column; font-size: 16px; }
.unlock b { font-size: 19px; color: var(--pink-deep); }

/* ---------- Guarda-roupa ---------- */
.tabs { display: flex; gap: 8px; }
.tabs button {
  padding: 8px 22px; border-radius: 22px; font-size: 19px; font-weight: 700;
  background: rgba(255, 248, 239, .7); box-shadow: var(--shadow);
}
.tabs button.on { background: #fff; outline: 4px solid var(--pink); }
.grid {
  width: 100%; max-width: 560px; flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 4px 4px 14px; align-content: start;
}
.item {
  position: relative; aspect-ratio: 1; border-radius: 22px; background: var(--cream);
  box-shadow: 0 5px 0 rgba(120, 60, 70, .22); display: grid; place-items: center; transition: transform .12s;
}
.item img, .item canvas { width: 76%; height: 76%; object-fit: contain; }
.item.on { outline: 5px solid var(--pink); background: #fff; }
.item.locked img, .item.locked canvas { filter: grayscale(1) brightness(.6) opacity(.35); }
.item .need {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700;
  background: #fff; border-radius: 12px; padding: 1px 8px 1px 3px; white-space: nowrap;
}
.item .tag img { filter: none !important; }
.item .x { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: center; padding: 6px; }

#rotate {
  position: fixed; inset: 0; z-index: 50; background: #ffd6e4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; font-size: 24px; font-weight: 700; text-align: center; padding: 20px;
}
#rotate img { width: 120px; animation: rot 1.6s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0); } }

@media (max-height: 640px) {
  .logo .l1 { font-size: 50px; } .logo .l2 { font-size: 62px; }
  .big-btn { font-size: 24px; padding: 10px 26px; }
  .tagline { font-size: 15px; }
  .screen { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo span, .big-btn.play, #bg .lights { animation: none; }
}

#results { bottom: calc(var(--stage) * .5); }

/* ---------- Peixinhos e presente ---------- */
.coins img { width: 34px; height: 34px; }
.coins.pop { animation: bump .5s ease-out; }
.gift-btn { background: linear-gradient(180deg, #fff3b0, #ffd56a); animation: giftWiggle 1.4s ease-in-out infinite; }
@keyframes giftWiggle { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg) scale(1.06); } 20% { transform: rotate(6deg) scale(1.06); } 30% { transform: rotate(0); } }
.res-coins {
  display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700;
  background: #fff6d6; border-radius: 22px; padding: 2px 16px 2px 6px;
}
.res-coins img { width: 38px; height: 38px; }
.res-coins b { color: #e08a00; min-width: 3ch; }
button.unlock { font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* ---------- Lojinha ---------- */
#shop { gap: 10px; }
.shop-tabs {
  display: flex; gap: 8px; width: 100%; max-width: 560px; overflow-x: auto; touch-action: pan-x;
  padding: 4px 4px 8px; scrollbar-width: none; flex: none;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs button {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 76px; padding: 4px 2px 6px; border-radius: 20px; background: rgba(255, 248, 239, .72);
  box-shadow: 0 4px 0 rgba(120, 60, 70, .2); font-size: 13px; font-weight: 700; transition: transform .15s, background .2s;
}
.shop-tabs button canvas { width: 46px; height: 46px; }
.shop-tabs button.on { background: #fff; outline: 4px solid var(--pink); transform: translateY(-2px); }
#shopGrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.item.sel { outline: 5px solid var(--pink); background: #fff; transform: translateY(-2px); }
.item .tag {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; white-space: nowrap;
  border-radius: 12px; padding: 1px 8px 1px 4px; background: #fff;
}
.item .tag img { width: 20px; height: 20px; }
.item .tag.using { background: var(--pink); color: #fff; padding: 1px 9px; }
.item .tag.own { background: #d9f7e8; color: #2b8a5f; padding: 1px 9px; }
.item .tag.lock { background: #eee4f5; color: #7a5e8f; }
.item canvas { width: 76%; height: 76%; margin-bottom: 22px; }
.shop-bar {
  width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; flex: none;
  background: rgba(255, 248, 239, .94); border-radius: 26px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow);
}
.shop-name { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.1; }
.big-btn.buy { min-width: 0; font-size: 21px; padding: 10px 18px; gap: 6px; white-space: nowrap; }
.big-btn.buy img { width: 30px; height: 30px; }
.big-btn.buy.ghost { background: linear-gradient(180deg, #7fe0b4, #3fbf86); box-shadow: 0 6px 0 #2b8a5f; }
.big-btn.buy:disabled { background: #e9d9cf; box-shadow: 0 6px 0 #c9b2a4; color: #8a6a5a; cursor: default; -webkit-text-stroke: 0; }
/* resultado compacto: o gatinho comemorando aparece inteiro embaixo */
#results { bottom: calc(var(--stage) * .72); padding-top: calc(var(--safe-top) + 8px); }
#results .card { gap: 5px; padding: 12px 16px 14px; }
#results .res-stars { height: 66px; }
#results .res-stars i { width: 54px; height: 54px; }
#results .res-stars i:nth-child(2) { width: 66px; height: 66px; }
#results .res-title { font-size: 26px; line-height: 1.1; }
#results .res-score { font-size: 36px; }
#results .res-detail { font-size: 13px; gap: 5px; }
#results .res-detail span { padding: 2px 8px; }
#results .res-coins { font-size: 22px; }
#results .res-coins img { width: 30px; height: 30px; }
#results .unlock { padding: 4px 12px 4px 4px; }
#results .unlock canvas { width: 48px; height: 48px; }
#results .big-btn { font-size: 24px; padding: 10px 26px; }
#results .pill { font-size: 17px; padding: 8px 16px; }
#results .pill img { width: 26px; height: 26px; }

/* ---------- Telas grandes ---------- */
/* tela larga: menus à direita, gatinho grandão à esquerda */
body.wide .screen { left: var(--stage-r); bottom: 0; }
body.wide #results { bottom: 0; }
/* tablet e computador: tudo um pouco maior para dedinhos e para quem joga de longe */
@media (min-width: 700px) and (min-height: 860px) {
  .logo, .tagline, .big-btn, .pill, .tool, .stars-badge, .bar, .paws-pick, .song-list, .shop-tabs, #shopGrid, .shop-bar, .card, #hud { zoom: 1.45; }
}
@media (min-width: 1000px) and (min-height: 700px) and (max-height: 859px) {
  .logo, .tagline, .big-btn, .pill, .tool, .stars-badge, .bar, .paws-pick, .song-list, .shop-tabs, #shopGrid, .shop-bar, .card, #hud { zoom: 1.12; }
}
/* o cartão já cresce: botão dentro dele não cresce de novo (o aumento dobrado cortava "Músicas · Lojinha · Mostrar") */
.card .big-btn, .card .pill, .card .tool, .card .stars-badge { zoom: 1; }
.res-record {
  font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ff8fb8, #ffb35c);
  border-radius: 14px; padding: 2px 12px; margin-top: -2px; animation: bump .6s ease-out 1s both;
}

/* ---------- Tela inicial: cantinhos de jogo ---------- */
#title { padding-top: calc(var(--safe-top) + 18px); }
.corner { position: absolute; top: calc(var(--safe-top) + 10px); display: flex; gap: 8px; align-items: center; }
.corner.left { left: 12px; flex-direction: column; gap: 6px; }
.corner.right { right: 12px; flex-direction: column; align-items: flex-end; gap: 6px; }
.corner .tool { min-width: 46px; height: 46px; padding: 0 8px; }
.corner .tool img { width: 30px; height: 30px; }
.shop-btn, .gift-btn { font-size: 21px; padding: 10px 22px; }
.shop-btn img, .gift-btn img { width: 38px; height: 38px; }

/* ---------- Contagem 3-2-1 num balão ---------- */
#count span {
  display: grid; place-items: center; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffe6f0 55%, #ffc4dc 100%);
  box-shadow: 0 10px 0 rgba(194, 53, 101, .25), 0 0 0 10px rgba(255,255,255,.5);
  color: #ff7aa2; -webkit-text-stroke: 10px var(--ink);
}
.item img.none-ico { width: 58%; height: 58%; margin-bottom: 18px; opacity: .9; }
.item.locked canvas { filter: grayscale(.7) opacity(.55); }
.item .tag.lock img:first-child { width: 22px; height: 22px; }

/* cartões entram um depois do outro (lista de músicas e lojinha) */
.song, .item { animation: cardIn .38s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(min(var(--i, 0), 12) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@media (prefers-reduced-motion: reduce) { .song, .item { animation: none; } }
#shopGrid.still .item { animation: none; }

/* celular estreito: ferramentas em linha no alto, logo desce um pouco */
@media (max-width: 380px) {
  .corner.left { flex-direction: row; }
  .corner .tool { min-width: 40px; height: 40px; }
  .corner .tool img { width: 26px; height: 26px; }
  #title { padding-top: calc(var(--safe-top) + 62px); justify-content: flex-start; gap: 10px; }
  .logo .l1 { font-size: 46px; } .logo .l2 { font-size: 58px; }
}

/* ---------- Duelo a dois ---------- */
.duel-btn img { width: 38px; height: 38px; }
#duel { justify-content: flex-start; padding-top: calc(var(--safe-top) + 10px); }
.duel-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; gap: 9px; padding: 14px 16px 16px; animation: screenIn .3s cubic-bezier(.2, 1.3, .4, 1); }
.duel-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.duel-h-ico { width: 48px; height: 48px; }
.duel-h-ico.big { width: 72px; height: 72px; }
.duel-text { margin: 0; font-size: 17px; font-weight: 600; text-align: center; }
.duel-text.big { font-size: 21px; font-weight: 700; }
.duel-status { margin: 0; min-height: 22px; font-size: 16px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.duel-status.bad { color: #d6336c; }
.duel-choice { width: 100%; font-size: 24px; padding: 12px 20px; }
.big-btn.secondary { background: linear-gradient(180deg, #8fd0ff, #4ba8ea); box-shadow: 0 7px 0 #2e7fbf; }
.btn-ico { width: 38px; height: 38px; }
.pill.ghost { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; color: var(--ink-soft); }
.duel-cat { width: 104px; height: 104px; }
.duel-cat.me { width: 120px; height: 120px; }
.duel-code { display: flex; gap: 8px; justify-content: center; }
.duel-slot { width: 64px; height: 64px; border-radius: 18px; background: #f6e7dc; display: grid; place-items: center; box-shadow: inset 0 3px 0 rgba(91,58,41,.12); }
.duel-slot img { width: 54px; height: 54px; animation: bump .35s ease-out; }
.duel-slot.on { background: #fff; box-shadow: 0 4px 0 rgba(120,60,70,.2); }
.duel-slot.next { outline: 3px dashed var(--pink); }
.duel-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; }
.duel-key { aspect-ratio: 1; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 rgba(120,60,70,.2); display: grid; place-items: center; transition: transform .1s; }
.duel-key img { width: 74%; height: 74%; }
.duel-key:active { transform: translateY(3px) scale(.95); }
.duel-key.del { background: #ffe1e8; }
.duel-dots { display: flex; gap: 8px; }
.duel-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); animation: dot 1.1s ease-in-out infinite; }
.duel-dots i:nth-child(2) { animation-delay: .18s; } .duel-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-8px); opacity: 1; } }
.duel-vs { display: flex; align-items: center; justify-content: center; gap: 6px; }
.duel-side { display: flex; flex-direction: column; align-items: center; font-size: 16px; }
.duel-side canvas { width: 96px; height: 96px; }
.duel-vs-x { font-size: 30px; font-weight: 700; color: #ffd23f; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.duel-song { cursor: default; padding: 6px 12px 6px 6px; }
.duel-song .ico { width: 48px; height: 48px; } .duel-song .ico img { width: 42px; height: 42px; }
.duel-song .name { font-size: 18px; font-weight: 700; }
.duel-paws { width: 100%; }
.duel-reacts { display: flex; gap: 8px; justify-content: center; }
.duel-react { width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(120,60,70,.18); display: grid; place-items: center; transition: transform .1s; }
.duel-react img { width: 38px; height: 38px; }
.duel-react:active { transform: scale(.9); }
.duel-pop { position: fixed; z-index: 40; width: 96px; height: 96px; pointer-events: none; animation: reactPop 1.6s ease-out forwards; }
.duel-pop.mine { left: 18%; bottom: calc(var(--stage) * .6 + 40px); }
.duel-pop.theirs { right: 18%; bottom: calc(var(--stage) * .6 + 40px); }
@keyframes reactPop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 15% { transform: scale(1.2) rotate(6deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 100% { transform: translateY(-120px) scale(.9); opacity: 0; } }
/* placar ao vivo durante a música */
#duelHud {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 64px);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
.dh { display: flex; align-items: center; gap: 4px; background: rgba(255,248,239,.92); border-radius: 22px; padding: 2px 10px 2px 2px; box-shadow: var(--shadow); transition: transform .2s, background .2s; }
.dh.them { padding: 2px 2px 2px 10px; }
.dh canvas { width: 40px; height: 40px; }
.dh b { font-size: 19px; min-width: 3.2ch; text-align: center; }
.dh.lead { background: #fff3b0; transform: scale(1.1); }
.dh-vs { font-size: 16px; font-weight: 700; color: #ffd23f; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
#duelToast {
  position: fixed; z-index: 30; left: 50%; top: calc(var(--safe-top) + 120px); transform: translateX(-50%);
  background: var(--cream); border-radius: 20px; padding: 8px 18px; font-weight: 700; box-shadow: var(--shadow); animation: screenIn .3s ease-out;
}
/* resultado do duelo dentro do cartão de resultado */
.card.res.duel #resAgain, .card.res.duel #resSongs, .card.res.duel #resUnlock, .card.res.duel #resShop { display: none !important; }
.res-duel { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.rd-head { font-size: 26px; font-weight: 700; color: var(--pink-deep); text-align: center; }
.rd-head.win { animation: bump .6s ease-out 1.2s both; }
.rd-row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.rd-side { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 10px 8px; border-radius: 20px; background: #fff; }
.rd-side.win { background: linear-gradient(180deg, #fff6c2, #ffe7a3); transform: translateY(-6px); }
.rd-crown { position: absolute; top: -22px; width: 44px; height: 44px; animation: bump .6s ease-out 1.1s both; }
.rd-cat { width: 84px; height: 84px; }
.rd-acc { font-size: 22px; font-weight: 700; color: var(--pink-deep); }
.rd-acts { width: 100%; }
.rd-again { font-size: 22px; padding: 10px 22px; }

/* ---------- Metas (src/meta.js): nível, missões, troféus, álbum, baú, roleta, modos ---------- */
.level-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 24px;
  background: rgba(255, 248, 239, .92); box-shadow: var(--shadow);
}
.level-pill b {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; color: #fff;
  background: linear-gradient(180deg, #b9a4ff, #8a6cff); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);
}
.lvl-bar { width: 90px; height: 10px; border-radius: 6px; background: #f1dccd; overflow: hidden; }
.lvl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b9a4ff, #ff7aa2); border-radius: 6px; transition: width .6s; }
.meta-row { gap: 14px; }
.tool.meta { position: relative; width: 60px; height: 60px; }
.tool.meta img { width: 40px; height: 40px; }
.dot { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ff4d6d; border: 3px solid #fff8ef; animation: bump 1.4s ease-in-out infinite; }
.gift-btn { position: relative; }
.gift-btn .streak:not(:empty) {
  position: absolute; top: -6px; right: -6px; border: 3px solid #fff8ef;
  min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-size: 15px; color: #fff;
  background: #ff7a2e; padding: 0 6px;
}
.modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px 8px; }
.mode {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; border-radius: 22px;
  background: rgba(255, 248, 239, .92); box-shadow: 0 4px 0 rgba(120, 60, 70, .2); font-size: 16px; transition: transform .12s;
}
.mode img { width: 30px; height: 30px; }
.mode span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.mode small { font-size: 12px; color: var(--ink-soft); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode.on { background: linear-gradient(180deg, #c8f5df, #8fe3bd); }
.mode.daily.done { opacity: .75; }
.mode.daily.done b::after { content: ' ✓'; }
.mode:active { transform: translateY(3px) scale(.96); }
.res-mode { font-size: 16px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.wheel-btn { background: linear-gradient(180deg, #fff2a8, #ffd23f); animation: breathe 1.4s ease-in-out infinite; }

#toasts { position: fixed; top: calc(var(--safe-top) + 10px); left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 30px; max-width: calc(100vw - 32px);
  background: var(--cream); box-shadow: 0 6px 0 rgba(120, 60, 70, .25), 0 10px 24px rgba(91,58,41,.2); font-weight: 700; font-size: 17px;
  animation: toastIn .4s cubic-bezier(.2, 1.6, .4, 1) both;
}
.toast img { width: 40px; height: 40px; }
.toast.out { animation: toastOut .4s ease-in both; }
@keyframes toastIn { from { transform: translateY(-120%) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateY(-120%); opacity: 0; } }

#sheet { z-index: 30; }
.card.sheet { position: relative; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 32px); padding: 18px 16px 18px; gap: 8px; animation: sheetIn .35s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes sheetIn { from { transform: translateY(30px) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.card.sheet h2 { font-size: 28px; padding: 0 44px; text-align: center; }
.sheet-x { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; }
.sheet-x svg { width: 20px; height: 20px; }
.sheet-body { width: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sheet-note { margin: 0; text-align: center; font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.ci { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }

.chest-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.cday { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 rgba(120,60,70,.15); font-size: 14px; }
.cday img { width: 48px; height: 48px; }
.cday small { font-weight: 700; color: var(--ink-soft); }
.cday.big { grid-column: span 2; }
.cday.big img { width: 64px; height: 64px; }
.cday.today { background: #fff2a8; outline: 3px solid #ffb300; animation: bump 1.6s ease-in-out infinite; }
.cday.got { opacity: .6; }
.cday.opening { opacity: 1; animation: bump .6s ease-out 2; }

.mission { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 rgba(120,60,70,.15); }
.mission.got { opacity: .65; }
.mtxt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mtxt b { font-size: 17px; }
.mtxt small { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.mright { flex: none; }
.mdone { width: 36px; height: 36px; }
.mprize { font-size: 16px; }
.mget { padding: 6px 12px; font-size: 16px; background: linear-gradient(180deg, #fff2a8, #ffd23f); animation: breathe 1.2s ease-in-out infinite; }
.mget img { width: 24px; height: 24px; }
.mbar { width: 100%; height: 10px; border-radius: 6px; background: #f1dccd; overflow: hidden; }
.mbar.big { height: 16px; border-radius: 9px; }
.mbar i { display: block; height: 100%; background: linear-gradient(90deg, #5fd3a5, #ffd23f); border-radius: inherit; }

.trophies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.trophy { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 16px; background: #fff; text-align: center; font-size: 12.5px; line-height: 1.15; box-shadow: 0 3px 0 rgba(120,60,70,.12); }
.trophy img { width: 46px; height: 46px; filter: grayscale(1); opacity: .35; }
.trophy.got img { filter: none; opacity: 1; }
.trophy.got { background: linear-gradient(180deg, #fff, #fff2c9); }
.trophy.got.tier1 { background: linear-gradient(180deg, #fff, #e8f0ff); }
.trophy.got.tier2, .trophy.got.tier3 { background: linear-gradient(180deg, #fff, #ffe0f0); }
.trophy.fresh { outline: 3px solid #ffb300; animation: bump .8s ease-out 2; }
.trophy .mbar { height: 6px; }

.lvl-big { display: flex; flex-direction: column; align-items: center; }
.lvl-big b { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; color: #fff; background: linear-gradient(180deg, #b9a4ff, #8a6cff); box-shadow: 0 5px 0 #6a50d6; }
.lvl-big span { font-size: 20px; font-weight: 700; margin-top: 6px; }
.lvl-ladder { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.rung { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: #fff; opacity: .5; font-weight: 700; }
.rung b { min-width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; background: #f1dccd; }
.rung.on { opacity: 1; }
.rung.on b { background: #b9a4ff; color: #fff; }

.wheel-wrap { position: relative; width: min(300px, 70vw); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; }
.wheel-arrow { position: absolute; top: -6px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid #f04f84; filter: drop-shadow(0 3px 0 rgba(91,58,41,.4)); }
.wheel-msg { font-size: 18px; color: var(--ink); min-height: 1.2em; }

.album-count { margin: 0; font-weight: 700; font-size: 17px; }
.album-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 4px 0; }
.album-head .lvl { display: flex; gap: 4px; }
.album-head .lvl i { width: 12px; height: 12px; border-radius: 50%; background: #f1dccd; }
.album-head .lvl i.on { background: var(--pink); }
.album-head .lvl i.hot { background: #ff7a2e; }
.page-crown { width: 34px; height: 34px; }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 16px; background: #fff; border-bottom: 5px solid var(--c, #ffd1dc); text-align: center; font-size: 12px; line-height: 1.1; }
.sticker img { width: 56px; height: 56px; }
.sticker.unknown img { filter: grayscale(1) brightness(1.1); opacity: .4; }
.medals { display: flex; gap: 4px; }
.medals i { width: 14px; height: 14px; border-radius: 50%; background: #eee2d8; border: 2px solid #d9c6b8; }
.medals i.m1 { background: #e3a06b; border-color: #b8743f; }
.medals i.m2 { background: #d9e2ec; border-color: #9fb0c2; }
.medals i.m3 { background: #ffd23f; border-color: #e0a800; box-shadow: 0 0 6px #ffe27a; }
@media (prefers-reduced-motion: reduce) { .dot, .cday.today, .mget, .wheel-btn, .toast, .card.sheet { animation: none !important; } }

.tool.meta.gift-btn { padding: 0; }
.tool.meta.gift-btn img { width: 42px; height: 42px; }
.corner .level-pill { padding: 3px 10px 3px 3px; }
.corner .level-pill b { width: 30px; height: 30px; font-size: 16px; }
.corner .lvl-bar { width: 56px; }

.level-btn { padding: 0; }
.level-btn .ring { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(#b9a4ff calc(var(--p, 0) * 1%), #f1dccd 0); }
.level-btn .ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(180deg, #b9a4ff, #8a6cff); }
.level-btn b { position: relative; color: #fff; font-size: 22px; -webkit-text-stroke: 0; }
.cday b, .mprize, .trophy b { display: inline-flex; align-items: center; gap: 2px; }
.cday img.ci, .mprize img.ci { width: 20px; height: 20px; }
.chest-days { padding: 6px; }
.cday.today { animation: none; transform: scale(1.04); }
.big-btn:disabled { background: #e9d9cf; box-shadow: 0 6px 0 #c9b2a4; color: #8a6a5a; cursor: default; -webkit-text-stroke: 0; animation: none; }

/* ---------- Leva 2: dupla, piñata, memória, cartão, neve ---------- */
#duoHud { position: fixed; top: calc(var(--safe-top) + 66px); left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.dp { padding: 4px 14px; border-radius: 20px; font-size: 22px; font-weight: 700; color: #fff; box-shadow: var(--shadow); -webkit-text-stroke: 1px rgba(91,58,41,.2); }
.dp.pink { background: linear-gradient(180deg, #ff9fc0, #f04f84); }
.dp.blue { background: linear-gradient(180deg, #9fd8ff, #3d9be0); }
#songs.duo-on .song { box-shadow: 0 5px 0 rgba(108,196,255,.5), 0 0 0 3px rgba(255,122,162,.5); }
.pinata { position: absolute; top: calc(var(--safe-top) + 120px); width: 96px; height: 96px; z-index: 5; transform-origin: 50% 0; animation: swing 1.6s ease-in-out infinite; }
.pinata img { width: 100%; height: 100%; }
.pinata::before { content: ''; position: absolute; left: 50%; top: -400px; height: 400px; border-left: 3px solid rgba(91,58,41,.5); }
.pinata.hit img { animation: bump .25s ease-out; }
.pinata.broken { animation: pinataFall 1.1s ease-in forwards; }
@keyframes swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes pinataFall { 0% { transform: scale(1.3) rotate(0); } 30% { transform: scale(1.5) rotate(-20deg); opacity: 1; } 100% { transform: translateY(400px) rotate(80deg) scale(.6); opacity: 0; } }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.mcard { position: relative; aspect-ratio: 1; border-radius: 16px; background: linear-gradient(180deg, #ffb3c7, #ff7aa2); box-shadow: 0 4px 0 #c23565; transition: transform .25s; }
.mcard img { position: absolute; inset: 14%; width: 72%; height: 72%; transition: opacity .2s; }
.mcard .face { opacity: 0; }
.mcard .back { opacity: .85; }
.mcard.up, .mcard.done { background: #fff; box-shadow: 0 4px 0 #e2cfc2; transform: rotateY(180deg) scaleX(-1); }
.mcard.up .face, .mcard.done .face { opacity: 1; }
.mcard.up .back, .mcard.done .back { opacity: 0; }
.mcard.done { background: linear-gradient(180deg, #fff, #fff2c9); animation: bump .5s ease-out; }
.gate-ico { width: 80px; height: 80px; }
.gate-q { font-size: 30px; font-weight: 700; margin: 0; }
.share-btn img { width: 28px; height: 28px; }
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.snow i { position: absolute; inset: -100% 0 0 0; background-image: radial-gradient(3px 3px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 80px 120px, #fff, transparent), radial-gradient(4px 4px at 150px 60px, #fff, transparent), radial-gradient(2px 2px at 220px 180px, #fff, transparent), radial-gradient(3px 3px at 300px 90px, #fff, transparent); background-size: 340px 220px; animation: snow 14s linear infinite; opacity: .85; }
.snow i.l1 { background-size: 260px 180px; animation-duration: 20s; opacity: .6; }
.snow i.l2 { background-size: 420px 300px; animation-duration: 28s; opacity: .45; }
@keyframes snow { to { transform: translateY(50%); } }
@media (max-width: 420px) { .meta-row { gap: 8px; } .tool.meta { width: 52px; height: 52px; min-width: 52px; } .tool.meta img { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .pinata, .snow i { animation: none !important; } }

/* ---------- Leva 3: Super, Turbo, Corações, coroa, notas longas ---------- */
.paws-pick button.super { background: linear-gradient(180deg, #ffe0c2, #ffb27a); }
.paws-pick button.super[aria-checked="true"] { outline-color: #ff7a2e; box-shadow: 0 0 0 3px #ff7a2e, 0 0 16px rgba(255,122,46,.6); }
.paws-pick button.super b::after { content: ' 🔥'; }
.mode.hearts .heart-ico { font-size: 22px; line-height: 1; padding-left: 4px; }
#heartsHud { position: fixed; top: calc(var(--safe-top) + 66px); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; pointer-events: none; }
#heartsHud i { width: 32px; height: 30px; background: no-repeat center/contain; filter: drop-shadow(0 2px 0 rgba(91,58,41,.35)); }
#heartsHud i.full { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28S2 19 2 10a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 9-14 18-14 18z' fill='%23ff5a8a' stroke='%235b3a29' stroke-width='2.5'/%3E%3C/svg%3E"); }
#heartsHud i.half { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28S2 19 2 10a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 9-14 18-14 18z' fill='%23f1dccd' stroke='%235b3a29' stroke-width='2.5'/%3E%3Cpath d='M16 28S2 19 2 10a7 7 0 0 1 14-2v20z' fill='%23ff5a8a'/%3E%3C/svg%3E"); }
#heartsHud i.empty { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28S2 19 2 10a7 7 0 0 1 14-2 7 7 0 0 1 14 2c0 9-14 18-14 18z' fill='%23f1dccd' stroke='%235b3a29' stroke-width='2.5'/%3E%3C/svg%3E"); opacity: .6; }
.res-crown { display: flex; align-items: center; gap: 8px; font-size: 24px; color: #e0a800; -webkit-text-stroke: 1px rgba(91,58,41,.3); animation: crownIn .7s cubic-bezier(.2, 1.6, .4, 1) 1.6s both; }
.res-crown img { width: 48px; height: 48px; }
@keyframes crownIn { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.song.crowned .best::before { content: ''; width: 26px; height: 26px; background: url("assets/ui/crown.webp") center/contain no-repeat; margin-right: 2px; }
.medals i.crown { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffb300; }
@media (max-width: 420px) { .paws-pick button b { font-size: 15px; } .paws-pick { gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .res-crown { animation: none; } }
.paws-pick button { min-width: 0; }
.pawdots { max-width: 100%; overflow: hidden; }
@media (max-width: 520px) {
  .pawdots canvas { width: 18px; height: 18px; }
  .paws-pick { gap: 5px; padding: 0 8px; }
  .paws-pick button { padding: 6px 2px 5px; }
  .paws-pick button b { font-size: 14px; }
  /* modos numa fileira só, que rola para o lado */
  .modes { width: 100%; max-width: 100vw; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 10px 8px; scrollbar-width: none; touch-action: pan-x; }
  .modes::-webkit-scrollbar { display: none; }
  .mode { flex: none; font-size: 15px; padding: 5px 12px 5px 5px; }
  .mode img { width: 26px; height: 26px; }
}
@media (max-width: 520px) { .pawdots { gap: 1px; } .pawdots canvas { width: 16px; height: 16px; } }
/* resultado com coroa + roleta + mostrar: tudo cabe acima do gatinho */
#results .card { max-height: 100%; overflow-y: auto; scrollbar-width: none; }
#results .card::-webkit-scrollbar { display: none; }
#results .row { flex-wrap: nowrap; gap: 8px; }
#results .row .pill { font-size: 16px; padding: 7px 12px; gap: 5px; }
#results .row .pill img { width: 24px; height: 24px; }
#results .res-crown { font-size: 18px; gap: 4px; }
#results .res-crown img { width: 30px; height: 30px; }
#results .res-mode { font-size: 14px; line-height: 1.2; }
#results .wheel-btn { padding: 6px 14px; font-size: 16px; }
#results .wheel-btn img { width: 24px; height: 24px; }
@media (max-height: 760px) {
  #results .res-stars { height: 52px; }
  #results .res-stars i { width: 44px; height: 44px; }
  #results .res-stars i:nth-child(2) { width: 52px; height: 52px; }
  #results .res-title { font-size: 22px; }
  #results .res-score { font-size: 32px; }
  #results .big-btn { font-size: 21px; padding: 8px 22px; }
}

/* ?perf=1: painel de tempo de quadro (só para quem desenvolve) */
#perf { position: fixed; left: 4px; bottom: 4px; z-index: 50; pointer-events: none; white-space: pre; font: 600 11px/1.35 ui-monospace, monospace; color: #fff; background: rgba(40, 20, 30, 0.72); padding: 4px 6px; border-radius: 6px; }

/* ---------- Ajustes do adulto e calibração do toque (src/tune.js) ---------- */
#btnGrown { position: relative; }
#btnGrown .dot { top: -4px; right: -4px; width: 14px; height: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 360px; font-size: 18px; }
.set-val { color: var(--ink-soft); font-weight: 600; font-size: 16px; }
.set-note { margin: 0; max-width: 360px; font-size: 14px; line-height: 1.3; color: var(--ink-soft); text-align: center; }
.pill.toggle { min-width: 120px; justify-content: center; background: #eee3d6; color: var(--ink-soft); }
.pill.toggle.on { background: #9ff0c9; color: var(--ink); }
.cal-msg { margin: 0; font-size: 22px; font-weight: 700; text-align: center; min-height: 2.6em; display: grid; place-items: center; }
.cal-pad {
  width: min(56vw, 210px); aspect-ratio: 1; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffe6f0 55%, #ffc4dc 100%);
  box-shadow: 0 8px 0 rgba(194, 53, 101, .25), 0 0 0 8px rgba(255,255,255,.6);
  display: grid; place-items: center; transition: transform .05s linear;
}
.cal-paw { font-size: min(18vw, 72px); line-height: 1; }
.cal-paw.hit { animation: calHit .18s ease-out; }
@keyframes calHit { from { transform: scale(.82); } }
.cal-dots { display: flex; gap: 8px; }
.cal-dots i { width: 16px; height: 16px; border-radius: 50%; background: #eadccc; transition: background .1s; }
.cal-dots i.on { background: #ff7aa2; }
.res-timing { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.tbars { display: flex; align-items: flex-end; gap: 2px; width: 58px; height: 24px; }
.tbars i { flex: 1; background: #c9b8f5; border-radius: 2px 2px 0 0; }
.tbars i.mid { background: #7fd6a6; }
.tline { max-width: 220px; text-align: center; line-height: 1.2; }
.pill.small { padding: 4px 12px; font-size: 14px; }
.res-help { background: #fff; border-radius: 14px; padding: 2px 10px; }
@media (prefers-reduced-motion: reduce) { .cal-paw.hit { animation: none; } .cal-pad { transition: none; } }

/* ---------- Onda 2: festa em estágios, transições, estrelas no tempo, paralaxe ---------- */
/* cor do palco sobe com a festa (camada por cima do fundo, só opacidade: o compositor faz) */
#bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 210, 63, .55), rgba(255, 122, 162, .35) 45%, rgba(185, 164, 255, .2) 80%); }
body.fever1 #bg::after { opacity: .18; }
body.fever2 #bg::after { opacity: .32; }
body.fever3 #bg::after { opacity: .5; }
/* paralaxe leve: as estrelinhas do fundo andam devagar (transformação, sem repintar) */
#bg .lights { inset: -12% 0 -12% 0; will-change: transform; animation: twinkle 5s ease-in-out infinite alternate, drift 48s linear infinite alternate; }
@keyframes drift { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
/* transição de tela: círculo abrindo a partir do gatinho */
.screen.enter { animation: wipeIn .25s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes wipeIn { from { clip-path: circle(8% at 50% 72%); opacity: .4; } to { clip-path: circle(150% at 50% 72%); opacity: 1; } }
body.wide .screen.enter { animation-name: wipeInWide; }
@keyframes wipeInWide { from { clip-path: circle(8% at 22% 70%); opacity: .4; } to { clip-path: circle(150% at 22% 70%); opacity: 1; } }
/* estrelas do resultado caem e batem como tambor */
.res-stars i.on.drop { animation: starDrop .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes starDrop { 0% { transform: translateY(-70px) scale(.7) rotate(-25deg); } 70% { transform: translateY(0) scale(1.12, .86); } 100% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { #bg .lights { animation: none; } .screen.enter, .res-stars i.on.drop { animation: none; } #bg::after { transition: none; } }

/* ---------- Onda 3: peixinho de carinho na tela inicial ---------- */
.fish-btn { position: fixed; left: var(--fish-x); top: var(--fish-y); transform: translate(-50%, -50%); z-index: 3; }
.fish-btn canvas { width: 40px; height: 40px; }

/* ---------- Onda 5: ajustes do adulto ---------- */
.set-head { width: 100%; max-width: 360px; margin: 10px 0 0; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid #eee3d6; padding-bottom: 4px; }
.set-range { width: 150px; accent-color: #ff7aa2; }
.set-choice { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.set-choice .pill.on { background: #9ff0c9; }
.pill.danger { background: #ffe0e0; color: #a3333d; }
.keys-grid { display: flex; gap: 8px; }
.key-btn { min-width: 64px; justify-content: center; font-size: 20px; }
.key-btn.on { background: #ffe27a; }
.key-btn.lane0 { box-shadow: inset 0 -5px 0 #ff7aa2; } .key-btn.lane1 { box-shadow: inset 0 -5px 0 #ffc93c; }
.key-btn.lane2 { box-shadow: inset 0 -5px 0 #4fcf9c; } .key-btn.lane3 { box-shadow: inset 0 -5px 0 #5bbcff; }

/* ---------- Onda 5: músicas em carrossel (fileiras por mundo, capas grandes) ---------- */
.world-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 2px 4px; }
.chip { padding: 6px 12px; border-radius: 16px; background: var(--cream); font-weight: 700; font-size: 14px; box-shadow: 0 3px 0 rgba(120, 60, 70, .18); }
.chip.on { background: #ffe27a; }
.row-title { margin: 6px 6px 0; font-size: 17px; }
.song-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 12px; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.song-row::-webkit-scrollbar { display: none; }
.song-row .song {
  flex: none; width: 150px; flex-direction: column; align-items: center; gap: 5px; text-align: center; scroll-snap-align: start;
  padding: 10px 8px 8px; border-left: 0; border-top: 8px solid var(--c, #ffd23f); position: relative; cursor: pointer;
}
.song-row .song .ico { width: 92px; height: 92px; border-radius: 24px; }
.song-row .song .ico img { width: 80px; height: 80px; }
.song-row .song .name { font-size: 15px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; }
.song .meta { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.song .meta .lvl { margin: 0; }
.song .sugg { background: #e8fff3; color: #1f8a5a; border-radius: 8px; padding: 0 5px; }
.song-row .song .best img { width: 22px; height: 22px; }
.song .help { font-size: 14px; margin-left: 2px; }
.song .acts { position: absolute; top: 4px; right: 4px; left: 4px; display: flex; justify-content: space-between; pointer-events: none; }
.song .mini { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 0 rgba(120, 60, 70, .2); font-size: 14px; color: var(--ink-soft); display: grid; place-items: center; }
.song .mini.on, .song .mini.fav.on { background: #ffe0ea; color: #ff4d7d; }
.song .mini.prev.on { background: #ffe27a; color: var(--ink); }
.song-list { gap: 4px; }
/* primeiro uso: o botão de tocar chama a atenção (sem precisar ler) */
#btnPlay.first { animation: firstPulse 1.1s ease-in-out infinite; }
@keyframes firstPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { #btnPlay.first { animation: none; } }

/* ---------- Onda 6: perfis (cor + bichinho) ---------- */
.prof { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pc); font-size: 20px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.prof.big { width: 78px; height: 78px; font-size: 44px; border: 4px solid #fff; box-shadow: 0 4px 0 rgba(120,60,70,.2); }
.prof-grid { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.prof-pick { border-radius: 50%; padding: 4px; }
.prof-pick.on { outline: 4px solid #ffe27a; }
.prof-pick.add { width: 86px; height: 86px; font-size: 40px; font-weight: 700; color: var(--ink-soft); background: #f3e8dc; }
.prof-prev { display: grid; place-items: center; }
.prof-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.prof-col { width: 44px; height: 44px; border-radius: 50%; background: var(--pc); border: 3px solid #fff; }
.prof-col.on, .prof-pet.on { outline: 4px solid var(--ink); }
.prof-pet { width: 52px; height: 52px; border-radius: 16px; background: #fff; font-size: 30px; }

/* ---------- Onda 6: caminho, figurinhas, missão da semana, pais, maestria ---------- */
.path-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 10px; border-radius: 18px; background: rgba(255, 248, 239, .92); box-shadow: var(--shadow); font-weight: 700; font-size: 14px; }
.path-chip canvas { width: 32px; height: 32px; }
.stick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; width: 100%; }
.stick-cv { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 14px; }
.stick-pack { display: flex; gap: 10px; justify-content: center; }
.stick { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 16px; padding: 6px; }
.stick canvas { width: 88px; height: 88px; }
.stick.reveal { animation: stickIn .5s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * 220ms); }
@keyframes stickIn { from { transform: rotateY(90deg) scale(.6); opacity: 0; } }
.week-dots { display: flex; gap: 4px; margin: 4px 0; }
.week-dots i { width: 14px; height: 14px; border-radius: 50%; background: #eadccc; }
.week-dots i.on { background: #4fcf9c; }
.p-bars { display: flex; gap: 8px; align-items: flex-end; height: 90px; width: 100%; max-width: 360px; }
.p-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.p-bar i { width: 100%; background: #b9a4ff; border-radius: 6px 6px 0 0; }
.p-bar small { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.set-code { width: 100%; max-width: 360px; border-radius: 12px; border: 2px solid #eadccc; padding: 8px; font: 12px ui-monospace, monospace; }
.song.m1 .ico { box-shadow: 0 0 0 4px #d9935a; } .song.m2 .ico { box-shadow: 0 0 0 4px #c9d2dc; }
.song.m3 .ico { box-shadow: 0 0 0 4px #ffd23f; } .song.m4 .ico { box-shadow: 0 0 0 4px #9fe8ff, 0 0 14px #bff2ff; }
@media (prefers-reduced-motion: reduce) { .stick.reveal { animation: none; } }
.song-list > * { flex: none; } /* fileiras não encolhem (a lista rola na vertical) */

/* ---------- Onda 7: seções na barra de progresso ---------- */
.progress { position: relative; overflow: visible; }
.progress .sec { position: absolute; top: -3px; width: 3px; height: 16px; border-radius: 2px; background: rgba(91, 58, 41, .45); transform: translateX(-1px); }
.progress .sec.secSolo { background: #ffd23f; width: 5px; }
.progress .sec.secChorus { background: #ff7aa2; }

/* ---------- Onda 7: turnê, shows e historinha ---------- */
.chip.tour { background: #ffe27a; }
.tour-world { width: 100%; max-width: 380px; border-radius: 18px; padding: 8px 10px; background: color-mix(in srgb, var(--wc) 35%, #fff); border-top: 6px solid var(--wc); }
.tour-world.locked { opacity: .55; }
.tour-head { display: flex; justify-content: space-between; font-size: 16px; }
.tour-path { display: flex; gap: 6px; justify-content: space-between; margin-top: 6px; }
.tour-node { position: relative; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 14px; background: #fff; box-shadow: 0 3px 0 rgba(120,60,70,.18); }
.tour-node img { width: 44px; height: 44px; }
.tour-node.boss { width: 76px; outline: 3px solid #ffd23f; }
.tour-node.locked { filter: grayscale(.8); opacity: .6; }
.tour-node small { font-size: 9px; line-height: 1.1; text-align: center; }
.tour-stars { font-size: 10px; color: #f0a500; letter-spacing: -1px; }
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
.story-panel { aspect-ratio: 1; border-radius: 14px; background: #f3e8dc; display: grid; place-items: center; overflow: hidden; font-size: 28px; }
.story-panel img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Onda 7: festas do calendário ---------- */
.festa { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.festa .fbit { position: absolute; top: -10%; font-size: 26px; opacity: .8; animation: festaFall linear infinite; }
.festa.criancas .fbit, .festa.aniversario .fbit { top: 105%; animation-name: festaRise; }
@keyframes festaFall { to { transform: translateY(125vh) rotate(200deg); } }
@keyframes festaRise { to { transform: translateY(-125vh) translateX(20px); } }
.bandeirinhas { position: absolute; top: calc(var(--safe-top, 0px) + 4px); left: 0; right: 0; display: flex; justify-content: space-around; }
.bandeirinhas i { width: 22px; height: 26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); background: #ff7aa2; animation: flagSway 2.4s ease-in-out infinite alternate; transform-origin: top; }
.bandeirinhas i:nth-child(4n+1) { background: #ffc93c; } .bandeirinhas i:nth-child(4n+2) { background: #4fcf9c; } .bandeirinhas i:nth-child(4n+3) { background: #5bbcff; }
@keyframes flagSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .festa .fbit, .bandeirinhas i { animation: none; } .festa .fbit { top: auto; bottom: 6%; } }

/* ---------- Onda 8: mais jeitos de jogar (src/modes.js) ---------- */
.mode.more .heart-ico { font-size: 22px; }
.pending-bar { align-self: center; margin: 2px auto 6px; padding: 8px 16px; border-radius: 18px; background: #ffe27a; color: var(--ink); font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 rgba(120, 60, 70, .2); }
.ghost-hud { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 104px); right: 14px; z-index: 6; padding: 4px 12px; border-radius: 14px; background: rgba(255, 255, 255, .78); color: #6b5a8a; font-weight: 800; font-size: 16px; pointer-events: none; }
.modes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 460px; }
.mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 18px; background: var(--cream); box-shadow: 0 3px 0 rgba(120, 60, 70, .18); min-height: 64px; }
.mode-card .mc-ico { grid-row: 1 / 3; font-size: 28px; line-height: 1; }
.mode-card b { font-size: 16px; }
.mode-card small { font-size: 12px; line-height: 1.2; color: var(--ink-soft); }
@media (max-width: 380px) { .mode-card small { display: none; } .mode-card { min-height: 52px; } }
.echo-pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: min(300px, 78vw); }
.echo-pad { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .14), 0 4px 0 rgba(120, 60, 70, .2); touch-action: manipulation; }
.echo-pad.on { animation: echo-flash .32s ease-out; }
@keyframes echo-flash { 0% { filter: brightness(1.45); transform: scale(.94); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .echo-pad.on { animation: none; filter: brightness(1.3); } }
.rd-series { font-weight: 800; font-size: 16px; color: var(--ink-soft); text-align: center; }
.rd-series.end { color: #c2457a; font-size: 18px; }
.rd-best.on { animation: echo-flash .25s ease-out; }
/* telão (src/telao.js): o celular vira só os tambores */
.tv-drum { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: linear-gradient(#ffe3ec, var(--cream)); padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 12px) calc(env(safe-area-inset-bottom, 0px) + 12px) calc(env(safe-area-inset-left, 0px) + 12px); gap: 12px; }
.tv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tv-info { font-size: 18px; }
.tv-pads { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 10px; }
.tv-pad { border-radius: 28px; background: var(--c); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .14); touch-action: none; -webkit-user-select: none; user-select: none; }
.tv-pad.on { filter: brightness(1.3); transform: scale(.97); }
@media (max-width: 500px) and (orientation: portrait) { .tv-pads[style*="--n: 4"], .tv-pads[style*="--n: 5"] { grid-template-columns: repeat(2, 1fr); } }
/* plateia colecionável (src/fans.js) */
.fans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.fan { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 16px; background: var(--cream); box-shadow: 0 3px 0 rgba(120, 60, 70, .14); }
.fan .fan-cv { width: 72px; height: 72px; }
.fan b { font-size: 14px; }
.fan span { font-size: 18px; line-height: 1; }
.fan.locked b { color: var(--ink-soft); font-size: 13px; }
/* camarim (src/room.js) */
.room-btn { padding: 6px 12px; gap: 6px; font-size: 15px; }
.room-btn span { font-size: 20px; }
.room-cv { width: 100%; max-width: 520px; aspect-ratio: 640 / 440; border-radius: 18px; box-shadow: 0 4px 0 rgba(120, 60, 70, .16); }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.room-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 16px; background: var(--cream); box-shadow: 0 3px 0 rgba(120, 60, 70, .14); }
.room-item canvas { width: 100%; height: auto; border-radius: 10px; }
.room-item b { font-size: 14px; text-align: center; line-height: 1.15; }
.room-item span { font-size: 13px; color: var(--ink-soft); }
.room-item.have { background: #e3f8ec; }
/* temporada mensal (src/season.js) */
.season-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #fff1d6, #ffe3ec); box-shadow: 0 3px 0 rgba(120, 60, 70, .14); }
.season-card b { font-size: 18px; }
.season-card small { font-size: 13px; color: var(--ink-soft); }
.season-bar { position: relative; height: 14px; margin: 10px 8px 0; border-radius: 8px; background: rgba(91, 58, 41, .12); }
.season-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 8px; background: linear-gradient(90deg, #ffb35c, #ff7aa2); }
.season-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid rgba(91, 58, 41, .35); }
.season-dot.got { background: #ffd23f; border-color: var(--ink); }
.season-next { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; font-size: 15px; }
.season-ico { width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 rgba(120, 60, 70, .16); }
.season-ico canvas { width: 40px; height: 40px; }
/* celular deitado (ideia 80): layout largo compacto */
body.short .screen { gap: 6px; padding-top: 6px; padding-bottom: 6px; overflow-y: auto; justify-content: flex-start; }
body.short .logo .l1 { font-size: 34px; } body.short .logo .l2 { font-size: 42px; }
body.short .tagline { font-size: 13px; }
body.short .big-btn { font-size: 20px; padding: 8px 20px; }
body.short .pill { font-size: 14px; padding: 6px 12px; }
body.short .tool { width: 46px; height: 46px; min-width: 46px; }
body.short .tool img { width: 32px; height: 32px; }
body.short .bar h2 { font-size: 20px; }
body.short .card { max-height: calc(100dvh - 16px); overflow-y: auto; }
body.short .card.sheet { padding: 12px 14px; }
body.short #hud { zoom: .82; }
body.short .song-list { gap: 6px; }
body.short .paws-pick button { padding-top: 4px; padding-bottom: 4px; }
body.short .paws-pick .pawdots { display: none; }
body.short .modes { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; align-self: stretch; width: auto; max-width: 100%; min-width: 0; }
body.short .modes > * { flex: none; }
body.short .modes .mode { padding-top: 4px; padding-bottom: 4px; }
body.short #results { justify-content: center; overflow: hidden; }
body.short #results .card { transform: scale(var(--res-k, .7)); transform-origin: center center; flex: none; max-height: none; overflow: visible; }
@media (max-height: 360px) { body.short #results .card { --res-k: .62; } }
@media (max-width: 440px) { .room-btn b { display: none; } .room-btn { padding: 6px 10px; } .room-btn span { font-size: 22px; } }

/* ---------- Passada de celular (v47): em pé e tela baixa, o conteúdo manda e o gatinho cede ----------
   O palco encolhe sozinho até deixar a tela inteira à mostra (stageFor em src/game.js); aqui as telas ficam mais
   compactas em celular baixo/estreito para caber acima dele. Alvo de toque de criança: 44 px no mínimo.
   Medido por scripts/mobile-audit.mjs. Desfazer: apagar este bloco (e stageFor). */
/* alvos de toque: 44 px em qualquer tamanho */
.mode { min-height: 44px; }
.chip { min-height: 44px; padding: 6px 14px; }
.pill.small { min-height: 44px; }
.set-range { height: 44px; }
#results .row .pill { min-height: 44px; }
.pill, .big-btn { min-height: 44px; flex-shrink: 0; } /* sem encolher numa coluna cheia (min-height fixo tirava o mínimo automático) */
.big-btn.buy { flex-shrink: 1; }
.room-btn { min-width: 44px; justify-content: center; }
.sheet-x { width: 44px; height: 44px; top: 9px; right: 9px; }
.song .acts { top: 0; left: 0; right: 0; }
.song .mini { width: 44px; height: 44px; background: none; box-shadow: none; position: relative; isolation: isolate; }
.song .mini::before { content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 0 rgba(120, 60, 70, .2); }
.song .mini.on, .song .mini.fav.on { background: none; }
.song .mini.on::before, .song .mini.fav.on::before { background: #ffe0ea; }
.song .mini.prev.on { background: none; }
.song .mini.prev.on::before { background: #ffe27a; }
/* "Super 🔥" na mesma linha das outras dificuldades (o emoji esticava a linha) */
.paws-pick button b { line-height: 1.2; }
.paws-pick button.super b::after { line-height: 1; vertical-align: top; font-size: .9em; }
/* o nome da música do dia cabe inteiro */
#mDailyName { max-width: 240px; }
/* avisos moram embaixo, por cima do palco do gatinho: nunca cobrem o título da tela nem o da janela */
#toasts { top: auto; bottom: calc(var(--safe-bottom) + 14px); }
body.wide #toasts { right: auto; width: var(--stage-r); }
.toast { animation-name: toastUp; }
.toast.out { animation-name: toastDown; }
@keyframes toastUp { from { transform: translateY(120%) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastDown { to { transform: translateY(120%); opacity: 0; } }
/* turnê: as 5 músicas de cada mundo cabem na fileira; a regra do show vira legenda embaixo */
.tour-path { gap: 4px; }
.tour-node, .tour-node.boss { flex: 1 1 0; min-width: 44px; width: auto; }
.tour-node img { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; }
.tour-stars { font-size: 11px; }
.tour-rule { margin: 4px 2px 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: right; }
/* cantinho dos pais: opções do limite centralizadas, sem rótulo repetido ao lado */
.set-row.center { justify-content: center; }
.set-row.center .set-choice { justify-content: center; }
.set-row.center .pill { min-width: 78px; justify-content: center; }
/* camarim vazio: o primeiro móvel chama */
.room-item.first { outline: 4px solid var(--pink); outline-offset: -4px; animation: breathe 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .room-item.first { animation: none; } }
/* listas que rolam de lado mostram que tem mais (borda direita esmaece) */
@media (max-width: 520px) {
  .modes, .shop-tabs, .world-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .world-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; padding-right: 20px; }
  .world-chips::-webkit-scrollbar { display: none; }
  .world-chips .chip { flex: none; }
  .shop-tabs { padding-right: 20px; }
}
/* celular deitado: fichas numa fileira só (as fichas de 44 px em duas linhas empurravam as capas para baixo) */
body.short .world-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; padding-right: 20px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
body.short .world-chips::-webkit-scrollbar { display: none; }
body.short .world-chips .chip { flex: none; }
/* tela inicial em celular estreito: ferramentas em duas linhas no alto (a moeda não cobre mais nada) */
@media (max-width: 380px) {
  .corner.left { flex-wrap: wrap; max-width: 182px; gap: 6px; }
  .corner .tool { min-width: 44px; height: 44px; }
  .corner .tool img { width: 28px; height: 28px; }
  .corner.right .stars-badge.small { font-size: 16px; padding: 3px 10px 3px 4px; gap: 4px; }
  .corner.right .stars-badge.small img { width: 28px; height: 28px; }
  #title { padding-top: calc(var(--safe-top) + 112px); }
}
@media (max-width: 420px) and (orientation: portrait) {
  #title > .row:not(.meta-row) { flex-wrap: nowrap; gap: 8px; }
  #title .shop-btn, #title .duel-btn { font-size: 17px; padding: 6px 14px; min-height: 46px; gap: 6px; }
  #title .shop-btn img, #title .duel-btn img { width: 32px; height: 32px; }
  .meta-row { flex-wrap: nowrap; gap: 6px; }
  .tool.meta { width: 48px; height: 48px; min-width: 48px; }
  .tool.meta img { width: 34px; height: 34px; }
  #results .row { width: 100%; }
  #results .row .pill { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: flex-end; gap: 0; padding: 4px 2px 7px; font-size: 14px; min-height: 52px; }
  #results .row .pill img { width: 24px; height: 24px; }
  #shopGrid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
}
@media (max-width: 350px) {
  .meta-row { gap: 4px; }
  .tool.meta { width: 44px; height: 44px; min-width: 44px; }
  .tool.meta img { width: 32px; height: 32px; }
}
/* celular baixo (SE, mini): tudo um pouco mais junto */
@media (orientation: portrait) and (max-height: 700px) {
  .duel-card > .duel-cat.me { display: none; } /* o gatinho já está no palco logo embaixo */
  #songs .bar h2 { font-size: 21px; line-height: 1.05; -webkit-text-stroke-width: 5px; }
  .paws-pick button { padding: 4px 2px; }
  .modes { padding-bottom: 4px; }
  .song-list { padding-bottom: 6px; }
  .row-title { margin-top: 2px; font-size: 16px; }
  .song-row { padding-bottom: 8px; }
  .song-row .song { width: 132px; padding: 6px 6px 4px; gap: 2px; }
  .song-row .song .ico { width: 64px; height: 64px; border-radius: 18px; }
  .song-row .song .ico img { width: 56px; height: 56px; }
  .song-row .song .name { font-size: 14px; }
  .song-row .song .best img { width: 20px; height: 20px; }
  .shop-tabs button { width: 66px; }
  .shop-tabs button canvas { width: 38px; height: 38px; }
  .shop-bar { padding: 6px 6px 6px 14px; }
  .shop-name { font-size: 16px; }
  .big-btn.buy { font-size: 19px; padding: 8px 16px; }
}
@media (orientation: portrait) and (max-height: 600px) {
  .screen { gap: 8px; }
  .logo .l1 { font-size: 40px; } .logo .l2 { font-size: 50px; }
  .logo span { -webkit-text-stroke-width: 7px; }
  .tagline { font-size: 14px; padding: 4px 14px; }
  .big-btn.play { font-size: 24px; padding: 8px 26px; }
  .big-btn.play img { width: 36px; height: 36px; }
  #results .res-detail { font-size: 12px; }
  #songs .bar h2 { font-size: 19px; }
  .pawdots { height: 20px; }
  .song-row .song .ico { width: 56px; height: 56px; }
  .song-row .song .ico img { width: 48px; height: 48px; }
  .song-row .song .best img { width: 18px; height: 18px; }
}