/* Capyroll. Toda medida usa --u (1% do lado de referencia, calculado em src/main.js). Interface firme: botao so afunda. */
@font-face { font-family: Fredoka; font-weight: 600; src: url(./assets/fonts/fredoka-latin-600.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: Fredoka; font-weight: 700; src: url(./assets/fonts/fredoka-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: Fredoka; font-weight: 600; src: url(./assets/fonts/fredoka-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: Fredoka; font-weight: 700; src: url(./assets/fonts/fredoka-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }

:root { --u: 4px; --ink: #fff; --shade: rgba(16, 70, 82, 0.5); --glass: rgba(70, 150, 150, 0.72); --rim: rgba(235, 255, 250, 0.8); }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #1d5f66; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
body { font-family: Fredoka, 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', 'Malgun Gothic', 'Microsoft YaHei', system-ui, sans-serif; font-weight: 700; color: var(--ink); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; -webkit-user-drag: none; }
.tx { color: var(--ink); text-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 0.7) var(--shade); white-space: nowrap; line-height: 1.1; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
#bg { position: absolute; inset: 0; background: center / cover no-repeat; }
#app[data-world="1"] #bg { background-image: url(./assets/art/bg1-port.webp); }
#app[data-world="2"] #bg { background-image: url(./assets/art/bg2-port.webp); }
#app[data-world="3"] #bg { background-image: url(./assets/art/bg3-port.webp); }
#app[data-world="4"] #bg { background-image: url(./assets/art/bg4-port.webp); }
#app[data-world="5"] #bg { background-image: url(./assets/art/bg5-port.webp); }
[data-orient="land"] #app[data-world="1"] #bg { background-image: url(./assets/art/bg1-land.webp); }
[data-orient="land"] #app[data-world="2"] #bg { background-image: url(./assets/art/bg2-land.webp); }
[data-orient="land"] #app[data-world="3"] #bg { background-image: url(./assets/art/bg3-land.webp); }
[data-orient="land"] #app[data-world="4"] #bg { background-image: url(./assets/art/bg4-land.webp); }
[data-orient="land"] #app[data-world="5"] #bg { background-image: url(./assets/art/bg5-land.webp); }
#stage { position: absolute; left: 0; top: 0; display: none; touch-action: none; }
#app[data-screen="play"] #stage { display: block; }

.screen { position: absolute; inset: 0; display: none; pointer-events: none; }
#app[data-screen="title"] #s-title, #app[data-screen="home"] #s-home, #app[data-screen="levels"] #s-levels, #app[data-screen="play"] #s-play { display: block; }
.screen > .col { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 4); gap: calc(var(--u) * 3); pointer-events: auto; }
.top { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 2.5); justify-content: space-between; }

/* ---- pecas ---- */
.plate { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.5); padding: 0 calc(var(--u) * 4.5); background: url(./assets/art/pill-glass.webp) center / 100% 100% no-repeat; min-width: 0; }
.plate > .tx { overflow: hidden; }
.plate.title { width: calc(var(--u) * 44); height: calc(var(--u) * 12); }
.plate.stat { width: calc(var(--u) * 36); padding: 0 calc(var(--u) * 3); }
.plate.sub { width: calc(var(--u) * 62); height: calc(var(--u) * 9.5); font-size: calc(var(--u) * 4.6); }
.plate.two { flex-direction: column; gap: 0; }
.plate.two small { opacity: 0.95; }

.pillbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: center / 100% 100% no-repeat; padding: 0 calc(var(--u) * 6) calc(var(--u) * 0.8); transition: transform 0.08s; pointer-events: auto; }
.pillbtn:active { transform: translateY(calc(var(--u) * 0.9)); }
.pillbtn.green { background-image: url(./assets/art/pill-green.webp); }
.pillbtn.blue { background-image: url(./assets/art/pill-blue.webp); }
.pillbtn.amber { background-image: url(./assets/art/pill-amber.webp); }
.pillbtn.glass { background-image: url(./assets/art/pill-glass.webp); }
.pillbtn.big small { margin-top: calc(var(--u) * -0.6); }
.pillbtn.mid { flex-direction: row; gap: calc(var(--u) * 2); }
.pillbtn.wide { flex-direction: row; gap: calc(var(--u) * 2.5); }
.pillbtn.half { width: calc(var(--u) * 34); height: calc(var(--u) * 11); font-size: calc(var(--u) * 5); padding: 0 calc(var(--u) * 3.5) calc(var(--u) * 0.6); }
.pillbtn.tiny { padding: 0 calc(var(--u) * 3); }
.pillbtn > .tx { max-width: 100%; overflow: hidden; }

.rbtn { width: calc(var(--u) * 12); flex: none; display: grid; place-items: center; background: url(./assets/art/round-glass.webp) center / 100% 100% no-repeat; transition: transform 0.08s; pointer-events: auto; }
.rbtn:active { transform: translateY(calc(var(--u) * 0.7)); }
.rbtn img { width: 56%; height: 56%; object-fit: contain; }
.rbtn.small { width: calc(var(--u) * 10); }

.panel { position: relative; width: calc(var(--u) * 82); max-width: 94vw; padding: calc(var(--u) * 9) calc(var(--u) * 5) calc(var(--u) * 5); border-radius: calc(var(--u) * 8); border: calc(var(--u) * 0.7) solid var(--rim); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(10, 50, 60, 0.35), inset 0 0 calc(var(--u) * 4) rgba(255, 255, 255, 0.35); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.4); }
.panel > .plate.title { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); width: calc(var(--u) * 56); height: calc(var(--u) * 13); font-size: calc(var(--u) * 6.6); }
#panelClose { position: absolute; top: calc(var(--u) * -4.5); }
#panelBody, #overBody { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.2); }
#modal, #over { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: auto; }
#modal { z-index: 40; }

/* ---- abertura ---- */
#s-title .col { justify-content: center; }
.logo { max-width: 92vw; }
.hero { width: calc(var(--u) * 80); }

/* ---- menu ---- */
.home-main { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3.5); min-height: 0; }
.card { padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); }
.cardcap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cardcap span { max-width: 100%; overflow: hidden; }
.prog { position: relative; border-radius: 99px; overflow: hidden; display: grid; place-items: center; }
.prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe15a, #f5b000); }
.prog b { position: relative; }
.home-side { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.6); }
.mascot { margin-top: calc(var(--u) * 1); }

/* ---- fases ---- */
.badges { display: flex; align-items: center; justify-content: center; }
.badge { position: relative; border-radius: 50%; pointer-events: auto; transition: transform 0.08s; }
.badge img.pic { width: 100%; height: 100%; }
.badge .lk { position: absolute; border-radius: 50%; display: grid; place-items: center; border: calc(var(--u) * 0.4) solid #fff; }
.badge .lk img { width: 58%; }
.tiles { position: relative; flex: 1; width: calc(var(--u) * 94); max-width: 100%; min-height: 0; }
.tiles svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile { position: absolute; translate: -50% -50%; display: grid; place-items: center; pointer-events: auto; }
.tile > img.m { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .num { position: relative; margin-top: calc(var(--u) * -1.5); }
.tile .tstars { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 0.2); }
.tile .tstars img { width: calc(var(--u) * 5.4); }
.tile.cur::before { content: ''; position: absolute; border-radius: 50%; }
.tile .playbadge { position: absolute; border-radius: 50%; border: calc(var(--u) * 0.5) solid #fff; display: grid; place-items: center; }
.tile .playbadge img { width: 52%; margin-left: 8%; }
.tile.locked img.lock { position: relative; width: 44%; }

/* ---- jogo ---- */
.hud { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 1.6) calc(var(--u) * 2.2); padding: calc(var(--u) * 2.5) calc(var(--u) * 3) 0; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.plate.level { padding: 0 calc(var(--u) * 3); }
.plate.scorebar { justify-content: flex-start; }
.scorebar b { text-align: right; font-variant-numeric: tabular-nums; }
.bar { position: relative; flex: 1; border-radius: 99px; background: rgba(20, 80, 90, 0.55); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe66a, #f7b400); transition: width 0.25s; }
.bar .st { position: absolute; top: 50%; transform: translate(-50%, -52%); }
.plate.worldpill { grid-column: 1 / -1; justify-self: center; }
.helps { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 3.5); display: flex; justify-content: center; gap: calc(var(--u) * 4); pointer-events: none; }
.help { position: relative; display: grid; place-items: center; background: url(./assets/art/round-glass.webp) center / 100% 100% no-repeat; pointer-events: auto; transition: transform 0.08s; }
.help:active { transform: translateY(calc(var(--u) * 0.8)); }
.help > img { object-fit: contain; }
.help em { position: absolute; right: calc(var(--u) * -0.6); bottom: calc(var(--u) * -0.6); padding: 0 calc(var(--u) * 1); border-radius: 99px; background: #4f8f96; border: calc(var(--u) * 0.45) solid #dff5f0; font-style: normal; display: grid; place-items: center; }
.help.empty > img { filter: grayscale(1); opacity: 0.55; }
.help.on { box-shadow: 0 0 0 calc(var(--u) * 0.8) #fff38a, 0 0 calc(var(--u) * 3) rgba(255, 240, 120, 0.9); border-radius: 50%; }
#app.tutorial .helps, #app.tutorial .worldpill { visibility: hidden; }
#hammerHint { position: absolute; left: 50%; top: calc(var(--u) * 24.5); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 2); pointer-events: auto; }
#banner { position: absolute; left: 50%; top: 30%; font-size: calc(var(--u) * 8.6); transform: translate(-50%, -50%); pointer-events: none; animation: banner 1.25s both; }
#banner .tx { color: #fff6a8; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 24% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -78%) scale(0.96); } }
#danger { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
#app.danger #danger { opacity: 1; animation: danger 0.9s ease-in-out infinite alternate; }
@keyframes danger { from { opacity: 0.45; } to { opacity: 1; } }

/* tutorial: holofote, mao e a fala da capivara */
#spot { position: absolute; border-radius: 50%; pointer-events: none; transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s; }
#hand { position: absolute; width: calc(var(--u) * 15); pointer-events: none; animation: tap 0.9s ease-in-out infinite alternate; transition: left 0.3s, top 0.3s; }
@keyframes tap { from { transform: translate(18%, 22%); } to { transform: translate(4%, 6%) scale(0.94); } }
#speech { position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); max-width: calc(var(--sw, 100vw) * 0.96); padding: calc(var(--u) * 3) calc(var(--u) * 4); border-radius: calc(var(--u) * 7); border: calc(var(--u) * 0.7) solid var(--rim); background: linear-gradient(180deg, rgba(120, 200, 196, 0.94), rgba(64, 156, 160, 0.94)); display: flex; align-items: center; gap: calc(var(--u) * 3); pointer-events: auto; }
#speech .face { flex: none; animation: talk 0.5s ease-in-out infinite alternate; }
@keyframes talk { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-2%); } }
#speech .say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
#speech p { white-space: normal; }
.sayfoot { display: flex; align-items: center; justify-content: space-between; }
.dots { display: flex; gap: calc(var(--u) * 1.4); }
.dots i { width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.dots i.on { background: #fff; }

/* ---- fim da fase ---- */
.stars { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 1.5); }
.stars img { opacity: 0.001; transform: scale(0.2) rotate(-25deg); }
.stars img.in { opacity: 1; transform: none; transition: transform 0.38s cubic-bezier(0.2, 1.7, 0.4, 1), opacity 0.12s; }
.stars img.off { opacity: 1; transform: none; }
.overrow { width: 100%; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.overrow .pose { flex: none; }
.scorecol { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); }
.rowbtns { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 0.5); }
#over .panel { animation: panelIn 0.42s cubic-bezier(0.2, 1.45, 0.4, 1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8%) scale(0.86); } to { opacity: 1; transform: none; } }

/* ---- opcoes e pausa ---- */
.row { display: flex; align-items: center; gap: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 4); border: calc(var(--u) * 0.35) solid rgba(255, 255, 255, 0.35); }
.row > img { object-fit: contain; flex: none; }
.row .lbl { flex: 1; min-width: 0; overflow: hidden; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: calc(var(--u) * 34); background: none; cursor: pointer; flex: none; pointer-events: auto; touch-action: none; }
.row.slim input[type="range"] { flex: 1; width: auto; }
input[type="range"]::-webkit-slider-runnable-track { height: calc(var(--u) * 2.6); border-radius: 99px; }
input[type="range"]::-moz-range-track { height: calc(var(--u) * 2.6); border-radius: 99px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin-top: calc(var(--u) * -1.7); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfeeee); border: calc(var(--u) * 0.4) solid #8fc6c6; box-shadow: 0 calc(var(--u) * 0.4) calc(var(--u) * 1) rgba(10, 50, 60, 0.4); }
input[type="range"]::-moz-range-thumb { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: #fff; border: calc(var(--u) * 0.4) solid #8fc6c6; }
.toggle { position: relative; border-radius: 99px; border: calc(var(--u) * 0.4) solid rgba(255, 255, 255, 0.6); flex: none; transition: background 0.15s; pointer-events: auto; }
.toggle::after { content: ''; position: absolute; top: 50%; left: calc(var(--u) * 0.6); border-radius: 50%; background: #fff; transform: translateY(-50%); transition: left 0.15s; box-shadow: 0 calc(var(--u) * 0.3) calc(var(--u) * 0.8) rgba(10, 50, 60, 0.4); }
.toggle[aria-pressed="true"] { background: #3fc530; }
.langs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); }
.langs .pillbtn { width: 100%; font-size: calc(var(--u) * 4.2); padding: 0 calc(var(--u) * 3); }
.pair { display: flex; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 1); }
#toast { position: absolute; left: 50%; bottom: calc(var(--u) * 26); transform: translateX(-50%); z-index: 50; padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: 99px; background: rgba(30, 96, 104, 0.92); border: calc(var(--u) * 0.4) solid var(--rim); font-size: calc(var(--u) * 4.2); pointer-events: none; }
#toast.show { animation: toast 1.8s both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 40%); } 10%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---- deitado: pista no centro, barra em cima a esquerda, ajudas em coluna a direita ---- */
[data-orient="land"] .hud { right: auto; }
[data-orient="land"] .hud > .rbtn { position: fixed; right: calc(var(--u) * 3); top: calc(var(--u) * 2.5); }
[data-orient="land"] .helps { left: auto; right: calc(var(--u) * 3); flex-direction: column; }
[data-orient="land"] .home-main { flex-direction: row; gap: calc(var(--u) * 8); }
[data-orient="land"] .card { width: calc(var(--u) * 58); }
[data-orient="land"] #s-title .col { flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: calc(var(--u) * 6); }
[data-orient="land"] .logo { width: calc(var(--u) * 76); order: 1; }
[data-orient="land"] .hero { order: 0; margin: 0; }
[data-orient="land"] #s-title .plate.sub { order: 2; flex-basis: 100%; max-width: calc(var(--u) * 62); margin: 0 auto; }
[data-orient="land"] #s-title .pillbtn { order: 3; flex-basis: 100%; max-width: calc(var(--u) * 66); margin: 0 auto; }
[data-orient="land"] #s-levels .col { gap: calc(var(--u) * 1.5); padding-top: calc(var(--u) * 2); }
[data-orient="land"] .plate.two { height: calc(var(--u) * 11); flex-direction: row; gap: calc(var(--u) * 2.5); font-size: calc(var(--u) * 5.4); }
[data-orient="land"] .tiles { width: calc(var(--u) * 150); }
[data-orient="land"] .tile .num { font-size: calc(var(--u) * 6.2); }
[data-orient="land"] .tile .tstars img { width: calc(var(--u) * 4.2); }
[data-orient="land"] .tile .tstars { bottom: calc(var(--u) * -2.6); }
[data-orient="land"] #speech { left: auto; right: calc(var(--u) * 22); transform: none; width: calc(var(--u) * 84); }
[data-orient="land"] #hammerHint { top: calc(var(--u) * 3); }

/* menos movimento: nada pisca nem pula; o estado continua visivel */
[data-motion="reduced"] #hand, [data-motion="reduced"] #speech .face, [data-motion="reduced"] #app.danger #danger { animation: none; }
[data-motion="reduced"] #over .panel, [data-motion="reduced"] #banner { animation-duration: 0.01s; }
[data-motion="reduced"] .stars img.in { transition: none; }

/* ============ medidas do mockup (rodada 1 do critico) ============
   Placas e botoes nao esticam: cada um usa a arte ja na sua proporcao (assets/art/pill-<cor>-<proporcao>.webp,
   geradas por art-src/build-art.py) e so recebe a largura; a altura sai da proporcao. O texto encolhe para caber. */
.plate, .pillbtn { height: auto; background-size: 100% 100%; }
.plate { height: auto; background-image: url(./assets/art/pill-glass-420.webp); aspect-ratio: 4.2; }
.rbtn, .help { height: auto; aspect-ratio: 1.05; }
/* abertura */
#s-title .plate.sub { height: auto; width: calc(var(--u) * 70); aspect-ratio: 7.9; background-image: url(./assets/art/pill-glass-790.webp); }
.pillbtn.xl { height: auto; width: calc(var(--u) * 62); aspect-ratio: 3.7; }
/* menu */
#s-home .plate.stat { height: auto; width: calc(var(--u) * 49); aspect-ratio: 5; background-image: url(./assets/art/pill-glass-500.webp); }
.card { width: calc(var(--u) * 68); }
#homePic { width: calc(var(--u) * 60); height: calc(var(--u) * 56); }
.prog { width: calc(var(--u) * 54); }
.pillbtn.big { height: auto; width: calc(var(--u) * 64); aspect-ratio: 3.15; }
.pillbtn.mid { height: auto; width: calc(var(--u) * 43.4); aspect-ratio: 3.9; }
.mascot { width: calc(var(--u) * 30); }
/* fases */
#s-levels .rbtn { width: calc(var(--u) * 13.5); }
#s-levels .plate.title { height: auto; width: calc(var(--u) * 47.4); aspect-ratio: 3.85; background-image: url(./assets/art/pill-glass-385.webp); }
#s-levels .plate.stat { height: auto; width: calc(var(--u) * 43); aspect-ratio: 3.6; background-image: url(./assets/art/pill-glass-360.webp); }
.badges { height: calc(var(--u) * 28); }
.badge { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.badge.on { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.plate.two { height: auto; width: calc(var(--u) * 71); aspect-ratio: 4.2; background-image: url(./assets/art/pill-glass-420.webp); }
.tile { width: calc(var(--u) * 19.7); height: calc(var(--u) * 19.7); }
/* barra do jogo */
.plate.level { height: auto; width: calc(var(--u) * 29.7); aspect-ratio: 3; background-image: url(./assets/art/pill-glass-300.webp); }
.plate.scorebar { height: auto; width: min(calc(var(--u) * 70), 100%); justify-self: center; aspect-ratio: 7.2; background-image: url(./assets/art/pill-glass-720.webp); }
.plate.worldpill { height: auto; width: calc(var(--u) * 48.8); aspect-ratio: 7.2; background-image: url(./assets/art/pill-glass-720.webp); }
.hud > .rbtn { width: calc(var(--u) * 11.8); }
.help { width: calc(var(--u) * 19.2); }
.help em { min-width: calc(var(--u) * 7.9); height: calc(var(--u) * 7.9); }
#hammerHint .plate { height: auto; width: calc(var(--u) * 62); aspect-ratio: 7.2; background-image: url(./assets/art/pill-glass-720.webp); }
#banner { width: calc(var(--u) * 70); height: auto; aspect-ratio: 4.6; background-image: url(./assets/art/pill-glass-460.webp); }
/* tutorial */
#speech { width: calc(var(--u) * 120); }
#speech .face { width: calc(var(--u) * 30); }
.pillbtn.tiny { height: auto; width: calc(var(--u) * 25); aspect-ratio: 3; background-image: url(./assets/art/pill-glass-300.webp); }
/* fim da fase */
#overPanel { width: calc(var(--u) * 105); }
#overPanel[data-kind="lose"] { width: calc(var(--u) * 99); }
#overPanel > .plate.title { width: calc(var(--u) * 87.6); height: auto; aspect-ratio: 5.7; background-image: url(./assets/art/pill-glass-570.webp); }
#overPanel[data-kind="lose"] > .plate.title { height: auto; width: calc(var(--u) * 79); aspect-ratio: 4.2; background-image: url(./assets/art/pill-glass-420.webp); }
.stars img { width: calc(var(--u) * 19); }
.stars img:nth-child(2) { width: calc(var(--u) * 24); }
.scorecol .plate { width: calc(var(--u) * 43); height: auto; aspect-ratio: 3.6; background-image: url(./assets/art/pill-glass-360.webp); }
.scorecol .plate.thin { width: calc(var(--u) * 37.7); height: auto; aspect-ratio: 5; background-image: url(./assets/art/pill-glass-500.webp); }
.pillbtn.wide { height: auto; width: calc(var(--u) * 71.7); aspect-ratio: 4.35; }
.pillbtn.wide.green { background-image: url(./assets/art/pill-green-435.webp); }
.pillbtn.wide.amber { background-image: url(./assets/art/pill-amber-435.webp); }
.pillbtn.wide.blue { background-image: url(./assets/art/pill-blue-435.webp); }
#overPanel[data-kind="lose"] .pillbtn.wide { height: auto; width: calc(var(--u) * 66.6); aspect-ratio: 3.7; background-image: url(./assets/art/pill-green-370.webp); }
.rbtn.mid { width: calc(var(--u) * 17); }
.prog.big { width: calc(var(--u) * 73); }
/* opcoes e pausa */
#panel[data-kind="settings"], #panel[data-kind="langs"] { width: calc(var(--u) * 100); }
#panel[data-kind="pause"] { width: calc(var(--u) * 80); }
#panel > .plate.title { width: calc(var(--u) * 56.4); height: auto; aspect-ratio: 4.6; background-image: url(./assets/art/pill-glass-460.webp); }
#panel[data-kind="pause"] > .plate.title { height: auto; width: calc(var(--u) * 51); aspect-ratio: 3.6; background-image: url(./assets/art/pill-glass-360.webp); }
#panelClose { width: calc(var(--u) * 11); }
.row { width: calc(var(--u) * 91); max-width: 100%; }
#panelBody .pillbtn.tiny { height: auto; width: calc(var(--u) * 29.9); aspect-ratio: 3.85; }
#panel[data-kind="pause"] .pillbtn.wide { width: calc(var(--u) * 59.8); }
.row.slim { width: calc(var(--u) * 61); height: calc(var(--u) * 8.6); }
.langs .pillbtn { height: auto; aspect-ratio: 3.85; background-image: url(./assets/art/pill-glass-385.webp); }
.langs .pillbtn.on { height: auto; background-image: url(./assets/art/pill-green-370.webp); aspect-ratio: 3.85; }
/* deitado: a faixa do mundo fica na segunda linha, a esquerda, como no mockup */
[data-orient="land"] .hud { width: min(calc(var(--u) * 122), calc(var(--sw, 100vw) - var(--u) * 26)); grid-template-columns: auto minmax(0, 1fr); }
[data-orient="land"] .plate.worldpill { grid-column: 1 / -1; justify-self: start; width: calc(var(--u) * 44.6); height: auto; font-size: calc(var(--u) * 3.6); }
[data-orient="land"] .plate.scorebar { width: min(calc(var(--u) * 64), 100%); justify-self: start; }
[data-orient="land"] .plate.level { width: calc(var(--u) * 27.4); }
[data-orient="land"] .help { width: calc(var(--u) * 17.2); height: auto; }
[data-orient="land"] .hud > .rbtn { width: calc(var(--u) * 11); }
[data-orient="land"] .badge { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
[data-orient="land"] .badge.on { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
[data-orient="land"] .badges { height: calc(var(--u) * 16); }
[data-orient="land"] .tile { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
[data-orient="land"] .tile.cur { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
[data-orient="land"] .plate.two { width: calc(var(--u) * 60); }
[data-orient="land"] #homePic { width: calc(var(--u) * 44); height: calc(var(--u) * 41); }
[data-orient="land"] .hero { width: calc(var(--u) * 50); }
/* barras de volume finas, como no mockup (o botao redondo passa da altura da barra) */
input[type="range"] { height: calc(var(--u) * 3.2); }
/* barra de pontos: numero a esquerda, barra com as 3 estrelas em posicoes fixas */
.plate.scorebar { padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 4); gap: calc(var(--u) * 2.5); }
.scorebar b { min-width: calc(var(--u) * 13); }

/* ============ rodada 4 do critico ============ */
/* icone dentro de botao: medida em --u (percentual de uma altura automatica nao vale e o botao inchava) */
.pillbtn.wide img { width: auto; }
.pillbtn.mid img { width: auto; }
.pillbtn.tiny { flex-direction: row; gap: calc(var(--u) * 1.2); }
.pillbtn.tiny img { height: calc(var(--u) * 2.8); width: auto; }
/* tipografia: o mockup usa letra maior e mais larga em todas as placas */
.plate { font-size: calc(var(--u) * 5.8); }
.plate.title, #panel > .plate.title { font-size: calc(var(--u) * 7.8); }
.pillbtn.xl { font-size: calc(var(--u) * 8.6); }
.pillbtn.big { font-size: calc(var(--u) * 10.6); }
.pillbtn.big small { font-size: calc(var(--u) * 5.6); }
.pillbtn.mid { font-size: calc(var(--u) * 6.4); }
.pillbtn.tiny { font-size: calc(var(--u) * 4.6); }
.plate.level { font-size: calc(var(--u) * 6); }
.plate.scorebar { font-size: calc(var(--u) * 5.4); }
.plate.worldpill { font-size: calc(var(--u) * 4.2); }
.plate.stat { font-size: calc(var(--u) * 5.6); }
.plate.two { font-size: calc(var(--u) * 8.6); }
.plate.two small { font-size: calc(var(--u) * 4.8); }
.scorecol .plate.thin { font-size: calc(var(--u) * 4.6); }
.row { font-size: calc(var(--u) * 5.3); }
.tile .num { font-size: calc(var(--u) * 10); }
.tile.cur .num { font-size: calc(var(--u) * 11); }
.clr { font-size: calc(var(--u) * 6.6); }
.cardcap { font-size: calc(var(--u) * 8); }
.cardcap small { font-size: calc(var(--u) * 4.4); }
/* em pe, tela larga (tablet 3:4): o conteudo fica numa coluna central, como no mockup */
[data-orient="port"] .screen > .col { left: 50%; right: auto; width: min(100%, calc(var(--u) * 124)); transform: translateX(-50%); }
[data-orient="port"] .hud { left: 50%; right: auto; transform: translateX(-50%); }
.hud { z-index: 6; } /* a barra fica acesa por cima do escurecido do tutorial */
[data-orient="port"] .helps { gap: calc(var(--u) * 5.5); }
/* menu em pe: estrelas no centro, cartao abaixo da barra, capivara saindo pela base da tela */
[data-orient="port"] #s-home .top { justify-content: center; position: relative; }
[data-orient="port"] #s-home .top .spacer { display: none; }
[data-orient="port"] #s-home .top .rbtn { position: absolute; right: 0; top: 0; }
[data-orient="port"] .home-main { justify-content: flex-start; padding-top: calc(var(--u) * 6); gap: calc(var(--u) * 4.4); }
[data-orient="port"] .mascot { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
/* abertura: respiro maior antes do botao */
/* fases: selos dos mundos coloridos mesmo com cadeado; fase bloqueada clara; selo de play azul-petroleo */
.badge.locked img.pic { filter: none; }
.tile .playbadge { background: #1f9a94; }
/* tutorial: halo amarelo suave no alvo */
#app.tutorial .worldpill { visibility: visible; }
/* deitado: coluna de ajudas mais alta, como no mockup */
[data-orient="land"] .helps { top: calc(var(--u) * 19.5); bottom: auto; justify-content: flex-start; gap: calc(var(--u) * 2.4); }
/* paineis: vidro branco fosco, com a pista aparecendo borrada por tras; veu mais escuro */
.panel { border-color: #fff; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
#modal, #over { background: rgba(8, 36, 44, 0.56); }
/* botoes redondos dos paineis: disco azul-petroleo solido */
.rbtn.mid, #panelClose { background-image: url(./assets/art/round-solid.webp); }
/* vitoria: halo, brilhos e bolinhas em volta das estrelas */
.stars { position: relative; }
.stars::before { content: ''; position: absolute; left: 50%; top: 46%; width: calc(var(--u) * 62); height: calc(var(--u) * 44); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 246, 170, 0.9), rgba(255, 246, 170, 0)); }
.stars img[data-k] { position: relative; }
.stars .spk { position: absolute; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: translate(-50%, -50%); }
.stars img.dot { position: absolute; width: calc(var(--u) * 3.4); opacity: 1; transform: translate(-50%, -50%); }
/* opcoes: disco azul-petroleo atras de cada icone, linha de vidro claro, chave desligada mais clara */
.row { background: rgba(182, 218, 212, 0.62); border-color: rgba(255, 255, 255, 0.6); }
.row > img { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #46a9a6, #2c8686); }
.row.slim > img { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); }
.toggle { background: #6e9a96; }

/* tela quase quadrada (tablet): fundo quadrado, para os enfeites dos cantos nao serem cortados */
[data-shape="sq"] #app[data-world="1"] #bg { background-image: url(./assets/art/bg1-sq.webp); }
[data-shape="sq"] #app[data-world="2"] #bg { background-image: url(./assets/art/bg2-sq.webp); }
[data-shape="sq"] #app[data-world="3"] #bg { background-image: url(./assets/art/bg3-sq.webp); }
[data-shape="sq"] #app[data-world="4"] #bg { background-image: url(./assets/art/bg4-sq.webp); }
[data-shape="sq"] #app[data-world="5"] #bg { background-image: url(./assets/art/bg5-sq.webp); }
/* capivara tonta (sem tina) e comemorando (na agua aberta): artes mais largas */
.overrow .pose { width: calc(var(--u) * 42); }

/* ============ rodada 5 do critico ============ */
/* menu em pe: cartao mais baixo para os botoes subirem; a capivara nunca cobre o botao Levels */
[data-orient="port"] #homePic { height: calc(var(--u) * 49); }
[data-orient="port"] .mascot { z-index: 0; }
[data-orient="port"] .home-side { z-index: 1; }
/* vitoria: estrelas maiores; derrota: titulo e capivara maiores */
.stars { height: calc(var(--u) * 30); }
.stars img[data-k]:nth-of-type(2), .stars img[data-k="1"] { width: calc(var(--u) * 28); }
/* rotulo das opcoes: vira caixa para o texto poder encolher (data-fit mede a largura) */
.row .lbl { display: flex; align-items: center; }

/* ============ rodada 6 do critico ============ */
/* fundos de tablet (3:4 em pe, 4:3 deitado), feitos do quadrado com os enfeites dos cantos inteiros */
[data-shape="p34"] #app[data-world="1"] #bg { background-image: url(./assets/art/bg1-p34.webp); }
[data-shape="p34"] #app[data-world="2"] #bg { background-image: url(./assets/art/bg2-p34.webp); }
[data-shape="p34"] #app[data-world="3"] #bg { background-image: url(./assets/art/bg3-p34.webp); }
[data-shape="p34"] #app[data-world="4"] #bg { background-image: url(./assets/art/bg4-p34.webp); }
[data-shape="p34"] #app[data-world="5"] #bg { background-image: url(./assets/art/bg5-p34.webp); }
[data-shape="l43"] #app[data-world="1"] #bg { background-image: url(./assets/art/bg1-l43.webp); }
[data-shape="l43"] #app[data-world="2"] #bg { background-image: url(./assets/art/bg2-l43.webp); }
[data-shape="l43"] #app[data-world="3"] #bg { background-image: url(./assets/art/bg3-l43.webp); }
[data-shape="l43"] #app[data-world="4"] #bg { background-image: url(./assets/art/bg4-l43.webp); }
[data-shape="l43"] #app[data-world="5"] #bg { background-image: url(./assets/art/bg5-l43.webp); }
/* menu em pe: a capivara fica presa na base da tela e passa por baixo dos botoes */
[data-orient="port"] .home-side { position: static; }
[data-orient="port"] .home-side > button { position: relative; z-index: 1; }
[data-orient="port"] .mascot { width: calc(var(--u) * 47); bottom: calc(var(--u) * -15); }
/* ajudas: icone maior, martelo inclinado e numero maior, como no mockup */
.help > img { width: 72%; height: 72%; }
.help[data-help="hammer"] > img { transform: rotate(38deg); }
.help em { font-size: calc(var(--u) * 5); }
/* perigo: brilho laranja so na borda, sem tingir a pista */
#danger { box-shadow: inset 0 0 calc(var(--u) * 10) 0 rgba(255, 150, 40, 0.6); }
/* botoes redondos: sempre na proporcao da arte (a altura fixa antiga deixava oval) */
.rbtn.mid, .rbtn.small { height: auto; aspect-ratio: 1.05; }
/* azul-petroleo escuro e brilhante: botao Levels do menu e botoes das opcoes */
.pillbtn.mid { background-image: url(./assets/art/pill-teal-390.webp); }
#panelBody .pillbtn.tiny { background-image: url(./assets/art/pill-teal-385.webp); }
.tri { width: 0; height: 0; border-left: calc(var(--u) * 2.2) solid #fff; border-top: calc(var(--u) * 1.5) solid transparent; border-bottom: calc(var(--u) * 1.5) solid transparent; }
/* vitoria: estrelas na medida do mockup, riscos amarelos sobre a do meio, letras maiores */
.stars img[data-k] { width: calc(var(--u) * 19.5); }
.stars img[data-k="1"] { width: calc(var(--u) * 25); }
.stars .rays { position: absolute; left: 50%; width: calc(var(--u) * 24); transform: translateX(-50%); }
#overPanel > .plate.title { font-size: calc(var(--u) * 9.8); }
.scorecol .plate { font-size: calc(var(--u) * 11); }
.pillbtn.wide { font-size: calc(var(--u) * 10.2); }
.pillbtn.wide img { height: calc(var(--u) * 9.2); }
/* derrota: titulo maior, barra com aro branco e fundo azul-petroleo, painel mais comprido */
#overPanel[data-kind="lose"] > .plate.title { font-size: calc(var(--u) * 12); }
.prog.big { background: #1f6f78; border: calc(var(--u) * 0.6) solid #fff; }
#overPanel[data-kind="lose"] #overBody { gap: calc(var(--u) * 3.4); padding-bottom: calc(var(--u) * 3); }
/* opcoes e pausa: titulo maior, linhas mais baixas, barra de volume azul-petroleo com aro, X mais para dentro */
#panel > .plate.title { font-size: calc(var(--u) * 9); }
#panelClose { right: calc(var(--u) * 2.2); }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffd93a var(--v, 50%), #2b8d90 var(--v, 50%)); box-shadow: inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.35), 0 0 0 calc(var(--u) * 0.35) #e9fbf7; }
input[type="range"]::-moz-range-track { background: linear-gradient(90deg, #ffd93a var(--v, 50%), #2b8d90 var(--v, 50%)); box-shadow: inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.35), 0 0 0 calc(var(--u) * 0.35) #e9fbf7; }
.row.slim > img { background: none; padding: 0; }
/* abertura: logo e subtitulo maiores */
#s-title .plate.sub { font-size: calc(var(--u) * 6.2); }
/* fases: selo de cadeado cinza e menor, como no mockup */
.badge .lk { right: -2%; bottom: -2%; width: 36%; height: 36%; background: #8b9296; border-color: #e8eeee; }
/* tutorial: holofote de borda macia (o escuro e um degrade em volta do alvo), aneis de toque, mao que vira na borda,
   fala maior, pontos no centro do balao e riscos de alegria ao lado do retrato */
#spot { box-shadow: none; background: none; }
#spot::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(255, 244, 170, 0.5) 0, rgba(255, 244, 170, 0.2) calc(var(--r) * 0.62), rgba(10, 40, 48, 0) calc(var(--r) * 0.9), rgba(10, 40, 48, 0.5) calc(var(--r) * 1.4)); }
#spot::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; border: calc(var(--u) * 0.55) solid rgba(255, 255, 255, 0.9); animation: ring 1.3s ease-out infinite; }
@keyframes ring { from { transform: scale(0.5); opacity: 0.95; } to { transform: scale(1.15); opacity: 0; } }
[data-motion="reduced"] #spot::after { animation: none; opacity: 0.7; }
#hand.flip { scale: -1 1; translate: -100% 0; }
#speech p { font-size: calc(var(--u) * 7); }
#speech .dots { position: absolute; left: 50%; bottom: calc(var(--u) * 5); transform: translateX(-50%); gap: calc(var(--u) * 2); }
#speech .dots i { width: calc(var(--u) * 3); height: calc(var(--u) * 3); }
#speech .sayfoot { justify-content: flex-end; }
#speech .joy { position: absolute; left: calc(var(--u) * 27); top: calc(var(--u) * 1.2); width: calc(var(--u) * 6.5); }
#speech.up { top: auto; bottom: calc(var(--u) * 4); }
[data-orient="land"] #speech p { font-size: calc(var(--u) * 5.4); }

/* ============ rodada 7 do critico ============ */
/* barra de pontos mais grossa, estrelas maiores; barra do topo mais larga (engrenagem perto da borda, como no mockup) */
.bar { height: calc(var(--u) * 3.9); }
.bar .st { width: calc(var(--u) * 6.5); }
[data-orient="port"] .hud { width: min(100%, calc(var(--u) * 131)); }
/* paineis um pouco mais baixos na tela, como no mockup */
#over .panel, #panel[data-kind="pause"] { margin-top: calc(var(--u) * 9); }
#overPanel[data-kind="lose"] { margin-top: calc(var(--u) * 13); }
/* vitoria: riscos sem encostar na faixa; derrota: capivara um pouco menor */
.losepose { width: calc(var(--u) * 48); }
/* pausa: letra dos botoes menor (ha icone ao lado), mais respiro, capivara menor */
#panel[data-kind="pause"] .pillbtn.wide { font-size: calc(var(--u) * 7.6); }
#panel[data-kind="pause"] #panelBody { gap: calc(var(--u) * 3); padding-top: calc(var(--u) * 2); }
.nap { width: calc(var(--u) * 42); }
/* opcoes: linhas mais altas, icones e chaves maiores, seta do idioma na ponta do botao */
.row { height: calc(var(--u) * 12.6); }
.row > img { width: calc(var(--u) * 11); height: calc(var(--u) * 11); padding: calc(var(--u) * 2.2); }
.toggle { width: calc(var(--u) * 17.5); height: calc(var(--u) * 8); }
.toggle::after { width: calc(var(--u) * 6.2); height: calc(var(--u) * 6.2); }
.toggle[aria-pressed="true"]::after { left: calc(var(--u) * 10.3); }
[data-act="langs"] { position: relative; padding-right: calc(var(--u) * 4); }
[data-act="langs"] .tri { position: absolute; right: calc(var(--u) * 3); top: 50%; transform: translateY(-50%); }
/* abertura e menu */
.hero { margin-bottom: calc(var(--u) * 2.5); }
.prog b { font-size: calc(var(--u) * 4); }
.pillbtn.mid img { height: calc(var(--u) * 6.8); }
.plate.stat img { height: 74%; }
/* fases: selos mais juntos, trilha mais larga, fase atual maior com halo verde-limao grosso, selo de play maior,
   bloqueada em cinza quente, estrelas sobre a base da bolinha, adereco do mundo dos dois lados da faixa */
.badges { gap: calc(var(--u) * 0.8); }
[data-orient="port"] .tiles { width: calc(var(--u) * 116); }
.tile.cur { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.tile.cur::before { inset: calc(var(--u) * -1.9); border: calc(var(--u) * 1.6) solid #b9f04e; box-shadow: 0 0 calc(var(--u) * 3.5) #a8e63c; }
.tile .playbadge { right: -8%; bottom: -8%; width: 44%; height: 44%; }
.tile .tstars { bottom: calc(var(--u) * 0.4); }
#worldName { position: relative; }
#worldName::before, #worldName::after { content: ''; position: absolute; top: 50%; width: calc(var(--u) * 18); height: calc(var(--u) * 18); transform: translateY(-56%); background: center / contain no-repeat; pointer-events: none; }
#worldName::before { left: calc(var(--u) * -20); }
#worldName::after { right: calc(var(--u) * -20); transform: translateY(-56%) scaleX(-1); }
[data-orient="land"] #worldName::before, [data-orient="land"] #worldName::after { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
[data-orient="land"] #worldName::before { left: calc(var(--u) * -14); }
[data-orient="land"] #worldName::after { right: calc(var(--u) * -14); }
#app[data-world="1"] #worldName::before, #app[data-world="1"] #worldName::after { background-image: url(./assets/art/deco1.webp); }
#app[data-world="2"] #worldName::before, #app[data-world="2"] #worldName::after { background-image: url(./assets/art/deco2.webp); }
#app[data-world="3"] #worldName::before, #app[data-world="3"] #worldName::after { background-image: url(./assets/art/deco3.webp); }
#app[data-world="4"] #worldName::before, #app[data-world="4"] #worldName::after { background-image: url(./assets/art/deco4.webp); }
#app[data-world="5"] #worldName::before, #app[data-world="5"] #worldName::after { background-image: url(./assets/art/deco5.webp); }
.row input[type="range"] { width: calc(var(--u) * 35); }
/* aro creme so nos botoes verdes grandes da abertura e do menu (os dos paineis nao tem aro no mockup) */
.pillbtn.xl { background-image: url(./assets/art/pill-green-rim-370.webp); }
.pillbtn.big { background-image: url(./assets/art/pill-green-rim-315.webp); }

/* ============ rodada 8: advogado do diabo ============ */
/* cartao do menu e paineis: vidro fosco tingido de azul-petroleo, com aro claro grosso (eram chapados ou brancos demais) */
.card { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
#homePic { border-radius: calc(var(--u) * 7); }
.panel { background: linear-gradient(180deg, rgba(200, 234, 230, 0.72), rgba(150, 208, 204, 0.72)); border-width: calc(var(--u) * 0.9); }
#speech { border-color: rgba(232, 250, 246, 0.9); box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(255, 255, 255, 0.3), 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(10, 50, 60, 0.3); }
#speech p { line-height: 1.06; }
/* fases: estrela do contador no tamanho antigo; mundo escolhido com aro creme grosso e brilho amarelo */
#s-levels .plate.stat img { height: 60%; }
.badge.on { box-shadow: 0 0 0 calc(var(--u) * 1.3) #fff3c4, 0 0 calc(var(--u) * 5) calc(var(--u) * 1) rgba(255, 232, 110, 0.95); }
/* vitoria: rotulo Score maior; jogo: faixa da fase um pouco mais para dentro */
.scorecol { font-size: calc(var(--u) * 6.8); }
[data-orient="port"] .plate.level { margin-left: calc(var(--u) * 2.6); }
/* abertura: logo um pouco menor e mais baixo, conjunto mais compacto */
.logo { width: calc(var(--u) * 82); margin-top: calc(var(--u) * 6); }
#s-title .col { gap: calc(var(--u) * 1.2); }
.hero { margin: calc(var(--u) * 0.5) 0 calc(var(--u) * 1.5); }
.card { background: linear-gradient(180deg, rgba(92, 182, 178, 0.84), rgba(118, 196, 190, 0.62)); }
/* vitoria: placa dos pontos em azul-petroleo cheio, estrelas um pouco mais altas, halo mais fraco */
.scorecol .plate:not(.thin) { background-image: url(./assets/art/pill-teal-360.webp); }
.stars { margin-top: calc(var(--u) * -2); }
.stars::before { opacity: 0.6; }
/* menu: a previa nao tem janela propria; fases: bolinha bloqueada em pedra mais escura */
#homePic { box-shadow: none; }
/* vitoria: riscos e confete sem encostar na faixa do titulo; capivara e pontos 2% mais a esquerda, como no mockup */
.stars .rays { top: calc(var(--u) * -0.4); }
.overrow { transform: translateX(calc(var(--u) * -2.2)); }
/* menu: cartao de vidro grosso (aro claro, filete interno, bisel) e barra de progresso com trilho escuro e aro de vidro */
.card { border: calc(var(--u) * 1.2) solid rgba(214, 243, 238, 0.96); border-radius: calc(var(--u) * 8); box-shadow: inset 0 0 0 calc(var(--u) * 0.7) rgba(72, 160, 160, 0.55), inset 0 calc(var(--u) * 2.4) calc(var(--u) * 2.6) rgba(255, 255, 255, 0.28), 0 0 0 calc(var(--u) * 0.35) rgba(60, 140, 140, 0.5), 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(10, 50, 60, 0.3); }
.prog { height: calc(var(--u) * 5.4); background: #23767c; border: calc(var(--u) * 0.55) solid rgba(214, 243, 238, 0.96); box-shadow: inset 0 calc(var(--u) * 0.7) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.28); }
.prog i { box-shadow: inset 0 calc(var(--u) * 0.8) 0 rgba(255, 255, 255, 0.5), inset 0 calc(var(--u) * -0.6) 0 rgba(200, 120, 0, 0.35); }
.prog b { text-shadow: 0 calc(var(--u) * 0.3) 0 #8a5a10, 0 0 calc(var(--u) * 0.7) #8a5a10, 0 0 calc(var(--u) * 0.7) #8a5a10; }
.prog.big { height: calc(var(--u) * 6.6); }
/* fases: bolinha bloqueada em pedra bege (arte propria, sem filtro) */
.tile.locked img.m { filter: none; }
/* deitado: paineis centrados (sem o deslocamento para baixo); se nao couberem na altura, o ui.js encolhe por igual */
[data-orient="land"] #over .panel, [data-orient="land"] #panel[data-kind="pause"], [data-orient="land"] #overPanel[data-kind="lose"] { margin-top: 0; }

/* ---------- tela ultralarga: faixa central de ate 2,2:1; o fundo se repete espelhado nas laterais, sem esticar ---------- */
#bg, #bgOld, #band { position: absolute; inset: 0 auto 0 var(--ox, 0px); width: var(--sw, 100%); }
#band { contain: layout; }
#bgOld::before, #bgOld::after, #bg::before, #bg::after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: inherit; transform: scaleX(-1); }
#bg::before, #bgOld::before { right: calc(100% - 1px); }
#bg::after, #bgOld::after { left: calc(100% - 1px); }
#modal, #over { box-shadow: 0 0 0 100vmax rgba(8, 36, 44, 0.56); }
#spot::before { inset: 0 calc(var(--ox, 0px) * -1); background: radial-gradient(circle at calc(var(--x) + var(--ox, 0px)) var(--y), rgba(255, 244, 170, 0.5) 0, rgba(255, 244, 170, 0.2) calc(var(--r) * 0.62), rgba(10, 40, 48, 0) calc(var(--r) * 0.9), rgba(10, 40, 48, 0.5) calc(var(--r) * 1.4)); }

/* ---------- feel and juice, lista 2 ---------- */
.bar .st.pop { animation: starPop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes starPop { 0% { transform: translate(-50%, -52%) scale(0.4) rotate(-40deg); } 45% { transform: translate(-50%, -52%) scale(1.75) rotate(8deg); filter: drop-shadow(0 0 calc(var(--u) * 2.4) #fff6a0); } 100% { transform: translate(-50%, -52%) scale(1) rotate(0); } }
#scoreTx.bump { animation: bump 0.28s ease-out; }
@keyframes bump { 0% { transform: scale(1.35); color: #fff6a0; } 100% { transform: scale(1); } }
#app.danger .help[data-help="freeze"]:not(.empty), #app.danger .help[data-help="rocket"]:not(.empty), #app.bighit .help[data-help="hammer"]:not(.empty) { animation: call 0.6s ease-in-out infinite alternate; }
@keyframes call { from { transform: scale(1); } to { transform: scale(1.1); filter: drop-shadow(0 0 calc(var(--u) * 1.6) #fff6a0); } }
#tiles canvas.river { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

[data-motion="reduced"] .bar .st.pop, [data-motion="reduced"] #scoreTx.bump, [data-motion="reduced"] #app .help { animation: none; }

/* ---------- transicoes entre telas e acabamento da interface (lista 3) ---------- */
#bgOld { background: center / cover no-repeat; opacity: 0; pointer-events: none; }
#bgOld.fade { animation: bgFade 0.55s ease-out both; }
@keyframes bgFade { from { opacity: 1; } to { opacity: 0; } }
.screen.out { display: block !important; }
.screen.out, .screen.out * { pointer-events: none !important; }
.screen.out > .col > *, .screen.out > .hud, .screen.out > .helps { animation: pieceOut 0.2s ease-in both; }
.screen.in > .col > *, .screen.in > .hud, .screen.in > .helps { animation: pieceIn 0.44s cubic-bezier(0.2, 1.35, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes pieceOut { to { opacity: 0; scale: 0.92; } }
@keyframes pieceIn { from { opacity: 0; translate: 0 calc(var(--u) * 6); scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* abertura: a capivara mergulha */
.hero.dive { animation: dive 0.48s cubic-bezier(0.5, 0, 0.6, 1) both; }
@keyframes dive { 0% { scale: 1; } 25% { scale: 1.06 0.94; translate: 0 calc(var(--u) * 1); } 55% { scale: 0.97 1.04; translate: 0 calc(var(--u) * -1.5); } 100% { scale: 1; translate: 0 calc(var(--u) * 2); opacity: 0.85; } }
/* botoes: afundam no toque e voltam com mola */
button { transition: scale 0.16s cubic-bezier(0.2, 1.8, 0.4, 1); }
button:active { scale: 0.93; transition-duration: 0.05s; }
/* tela de fases */
.tiles.enter .tile { animation: tileIn 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 40ms + 120ms); }
@keyframes tileIn { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
.tiles.slide, #worldName.slide { animation: slideIn 0.38s cubic-bezier(0.2, 1.1, 0.4, 1) both; }
@keyframes slideIn { from { opacity: 0; translate: calc(var(--dir, 0) * 12%) 0; } to { opacity: 1; translate: 0 0; } }
.tiles.slide .tile { animation-delay: calc(var(--i, 0) * 25ms + 60ms); }
.tile.cur > img.m { animation: curPulse 1.1s ease-in-out infinite alternate; }
@keyframes curPulse { to { scale: 1.06; } }
.tile.sink { animation: sink 0.36s ease-in-out both !important; }
@keyframes sink { 0% { scale: 1; } 25% { scale: 1.2; } 100% { scale: 0.2; opacity: 0; transform: translateY(26%); } }
.tile.sink::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; border: calc(var(--u) * 0.8) solid rgba(255, 255, 255, 0.9); animation: ripple 0.32s ease-out both; }
@keyframes ripple { from { scale: 0.6; opacity: 1; } to { scale: 1.9; opacity: 0; } }
/* fase que acabou de abrir: pedra e cadeado quebram, a bolinha aparece */
.tile.unlock > img.m, .tile.unlock > .num, .tile.unlock > .playbadge { animation: unlockIn 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) 0.62s both; }
@keyframes unlockIn { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
.tile .brk { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tile .brk img { position: absolute; }
.tile .brk .stone { inset: 0; width: 100%; height: 100%; animation: stoneOut 0.3s ease-in 0.5s both; }
.tile .brk .l, .tile .brk .r { width: 44%; }
.tile .brk .l { clip-path: inset(0 50% 0 0); animation: brkL 0.55s ease-in 0.5s both; }
.tile .brk .r { clip-path: inset(0 0 0 50%); animation: brkR 0.55s ease-in 0.5s both; }
@keyframes stoneOut { to { opacity: 0; scale: 1.25; } }
@keyframes brkL { 0% { translate: 0 0; rotate: 0deg; } 20% { translate: -3% 0; } 100% { translate: -70% 90%; rotate: -50deg; opacity: 0; } }
@keyframes brkR { 0% { translate: 0 0; rotate: 0deg; } 20% { translate: 3% 0; } 100% { translate: 70% 90%; rotate: 50deg; opacity: 0; } }
/* mundo que acabou de abrir: o cadeado do selo quebra e o selo pula */
.badge.unlock { animation: badgeOpen 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s both; }
@keyframes badgeOpen { 0% { scale: 1; } 40% { scale: 1.25; filter: drop-shadow(0 0 calc(var(--u) * 3) #fff6a0); } 100% { scale: 1; } }
.badge .lk.brk { background: none; border: none; pointer-events: none; }
.badge .lk.brk img { position: absolute; width: 58%; }
.badge .lk.brk img:first-child { clip-path: inset(0 50% 0 0); animation: brkL 0.6s ease-in 0.45s both; }
.badge .lk.brk img:last-child { clip-path: inset(0 0 0 50%); animation: brkR 0.6s ease-in 0.45s both; }
/* estrelas voando para o contador */
.flystar { position: absolute; left: 0; top: 0; width: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); z-index: 60; pointer-events: none; }
[data-stars].bump { display: inline-block; animation: bump 0.28s ease-out; }
/* barra do mundo no menu enchendo */
#homeProg { transition: width 0.8s cubic-bezier(0.3, 0, 0.2, 1); }
#homeProg.grow { filter: brightness(1.25) drop-shadow(0 0 calc(var(--u) * 1.4) #fff6a0); }
/* carimbo de recorde */
#overBody .plate { position: relative; }
.stamp { position: absolute; right: calc(var(--u) * -4); top: calc(var(--u) * -4); width: calc(var(--u) * 19); aspect-ratio: 1; display: grid; place-items: center; rotate: 14deg; opacity: 0; pointer-events: none; z-index: 2; }
.stamp img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stamp b { position: relative; font-size: calc(var(--u) * 3.6); line-height: 1; text-align: center; max-width: 72%; color: #fff; text-shadow: 0 calc(var(--u) * 0.3) 0 #a34d10; }
.stamp.in { animation: stamp 0.34s cubic-bezier(0.5, 0, 0.6, 1.4) both; }
@keyframes stamp { from { opacity: 0; scale: 2.6; } 70% { opacity: 1; scale: 0.92; } to { opacity: 1; scale: 1; } }
#overPanel.thud { animation: thud 0.25s ease-out; }
@keyframes thud { 30% { translate: 0 calc(var(--u) * 0.8); } 100% { translate: 0 0; } }
/* paineis de pausa e opcoes: entram com a mesma mola do fim de fase e saem encolhendo */
#modal.pop #panel { animation: panelIn 0.38s cubic-bezier(0.2, 1.45, 0.4, 1) both; }
#modal.pop { animation: dimIn 0.2s ease-out both; }
#modal.out, #over.out { pointer-events: none; animation: dimOut 0.18s ease-in both; }
#modal.out #panel, #over.out .panel { animation: panelOut 0.17s ease-in both; }
@keyframes dimIn { from { opacity: 0; } }
@keyframes dimOut { to { opacity: 0; } }
@keyframes panelOut { to { opacity: 0; transform: scale(0.88); } }
/* menos movimento: tudo direto */
[data-motion="reduced"] .screen.in > .col > *, [data-motion="reduced"] .screen.in > .hud, [data-motion="reduced"] .screen.in > .helps, [data-motion="reduced"] .tiles .tile, [data-motion="reduced"] .tiles, [data-motion="reduced"] #worldName, [data-motion="reduced"] .tile.cur > img.m, [data-motion="reduced"] .stamp.in, [data-motion="reduced"] #modal, [data-motion="reduced"] #modal #panel, [data-motion="reduced"] #bgOld { animation: none !important; }
[data-motion="reduced"] .stamp.in { opacity: 1; }
[data-motion="reduced"] button { transition: none; }

/* ---------- tela final (opcao A): painel sobre o mundo 5 ---------- */
#overPanel[data-kind="journey"] { width: calc(var(--u) * 96); }
#overPanel[data-kind="journey"] > .plate.title { height: auto; width: calc(var(--u) * 78); aspect-ratio: 4.6; background-image: url(./assets/art/pill-glass-460.webp); font-size: calc(var(--u) * 9.4); }
#overPanel[data-kind="journey"] #overBody { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.2); padding-bottom: calc(var(--u) * 3); }
.jbadges { display: flex; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1); }
.jb { position: relative; width: calc(var(--u) * 15); aspect-ratio: 1; opacity: 0.35; filter: grayscale(0.85); scale: 0.82; transition: opacity 0.3s, filter 0.3s, scale 0.4s cubic-bezier(0.2, 1.7, 0.4, 1); }
.jb .pic { width: 100%; height: 100%; border-radius: 50%; }
.jb.on { opacity: 1; filter: drop-shadow(0 0 calc(var(--u) * 1.6) #ffd83a); scale: 1; }
.jb .ok { position: absolute; right: -6%; bottom: -6%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #3fb94a; border: calc(var(--u) * 0.5) solid #fff; display: grid; place-items: center; opacity: 0; scale: 0.3; transition: opacity 0.2s 0.12s, scale 0.3s 0.12s cubic-bezier(0.2, 1.8, 0.4, 1); }
.jb.on .ok { opacity: 1; scale: 1; }
.jb .ok img { width: 64%; }
.jcapy { width: calc(var(--u) * 64); margin: calc(var(--u) * -1) 0 calc(var(--u) * -2); }
#overBody .plate.jstars { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); width: calc(var(--u) * 60); height: calc(var(--u) * 14.3); aspect-ratio: auto; min-height: 0; background-image: url(./assets/art/pill-glass-420.webp); font-size: calc(var(--u) * 8.6); white-space: nowrap; }
#overBody .plate.jstars img { height: calc(var(--u) * 8.4); width: auto; flex: none; }
#overBody .plate.jscore { width: calc(var(--u) * 54); height: calc(var(--u) * 9.5); aspect-ratio: auto; min-height: 0; background-image: url(./assets/art/pill-glass-570.webp); font-size: calc(var(--u) * 5); }
.jmenu { width: calc(var(--u) * 42); height: auto; aspect-ratio: 3.6; background-image: url(./assets/art/pill-teal-360.webp); font-size: calc(var(--u) * 7.4); }
#jStars.bump { display: inline-block; animation: bump 0.3s ease-out; }
#trophyBtn { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); width: calc(var(--u) * 15); pointer-events: auto; z-index: 3; background-image: url(./assets/art/round-solid.webp); animation: call 1.1s ease-in-out infinite alternate; }
#trophyBtn[hidden] { display: none; }
#trophyBtn img { width: 62%; filter: drop-shadow(0 0 calc(var(--u) * 1) #fff6a0); }
[data-motion="reduced"] #trophyBtn { animation: none; }
[data-orient="land"] #overPanel[data-kind="journey"] { width: calc(var(--u) * 92); }

/* ---------- correcoes do playtest (12/11) ---------- */
/* os cinco selos cabem na largura do celular (o selo escolhido ficava cortado na borda) */
.badges { max-width: 100%; }
.badge { flex: none; width: calc(var(--u) * 16.6); height: calc(var(--u) * 16.6); }
.badge.on { width: calc(var(--u) * 20.6); height: calc(var(--u) * 20.6); }
[data-orient="land"] .badge { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
[data-orient="land"] .badge.on { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
/* "Pular" e "Entendi" do balao: alvo de pelo menos 44 px para o dedo */
#speech .pillbtn.tiny { width: calc(var(--u) * 33); min-height: 44px; }
/* placa do nome do mundo deitada: um pouco mais larga, e o nome encolhe sem empurrar o "World 5" */
[data-orient="land"] .plate.two { width: calc(var(--u) * 70); }
.plate.two small { flex: none; }
.plate.two > span { min-width: 0; white-space: nowrap; }
/* botao de idioma: o nome nao passa por baixo da seta */
#panelBody .pillbtn.tiny[data-act="langs"] { padding-right: calc(var(--u) * 7); }
/* alvos de toque de pelo menos 44 px sem mudar o desenho: area invisivel em volta dos botoes redondos pequenos */
.rbtn { position: relative; }
.rbtn::after { content: ''; position: absolute; inset: max(-8px, calc((44px - 100%) / -2)); }
#panelBody .row { cursor: pointer; }

/* o carimbo fica dentro das estrelas: as regras das imagens das estrelas nao valem para ele */
#overBody .stars .stamp img { opacity: 1; transform: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
/* texto do carimbo: dentro do miolo do selo (60% x 44%), em ate duas linhas */
#overBody .stamp b { width: 60%; height: 44%; max-width: none; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; overflow-wrap: normal; word-break: keep-all; line-height: 1.02; font-size: calc(var(--u) * 3.8); }
/* carimbo verde: letra branca com contorno verde-escuro, legivel em cima do selo */
#overBody .stamp b { color: #fff; text-shadow: 0 calc(var(--u) * 0.35) 0 #155c1f, 0 0 calc(var(--u) * 0.6) #155c1f, calc(var(--u) * 0.2) 0 0 #155c1f, calc(var(--u) * -0.2) 0 0 #155c1f; }