/* ============================================================
   SUPER RUN 3D — estilo cartoon / plataforma clássico
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;                /* tarja preta em volta do palco 16:9 */
    font-family: 'Baloo 2', 'Trebuchet MS', sans-serif;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   PALCO 16:9 — tudo que entra no vídeo do YouTube fica aqui.
   Sempre 16:9, centralizado, com tarjas pretas quando a janela
   tem outra proporção. É este elemento que a gravação recorta.
   ------------------------------------------------------------ */
#stage {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    overflow: hidden;
    background: #5c94fc;
    box-shadow: 0 0 0 1px rgba(0,0,0,.6);
}

#game-container {
    position: absolute;
    inset: 0;
}
#game-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Os menus ficam FORA do palco, ocupando a janela toda: dentro do
   palco 16:9 o conteúdo mais alto era cortado pelas tarjas pretas. */
.screen { position: fixed; }

.hidden { display: none !important; }

/* ------------------------------------------------------------
   HUD
   ------------------------------------------------------------ */
#hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

#hud-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
}

#world-label, #score-label {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2.2vw, 28px);
    letter-spacing: 1px;
    color: #fff;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 4px 0 #b8860b, 0 6px 8px rgba(0,0,0,.5);
    white-space: nowrap;
}
#score-label { color: #ffe14d; }

/* Barra de progresso do mundo (igual à HUD de referência) */
#progress-track {
    position: relative;
    flex: 1;
    height: 26px;
    border-radius: 999px;
    background: #1a1a1a;
    border: 3px solid #000;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.6), 0 3px 0 rgba(0,0,0,.35);
    overflow: visible;
}
#progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe066 0%, #ffb703 55%, #e07b00 100%);
    box-shadow: 0 0 12px rgba(255,190,60,.7);
    transition: width .18s linear;
}
#progress-runner, #progress-flag {
    position: absolute;
    top: 50%;
    font-size: 22px;
    line-height: 1;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
#progress-runner { left: 0%; transition: left .18s linear; }
#progress-flag { left: 100%; }

/* Coluna esquerda: vidas, moedas, velocidade */
#hud-left {
    position: absolute;
    top: 58px;
    left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#hud-left > div {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(13px, 1.5vw, 20px);
    background: rgba(0,0,0,.42);
    border: 2px solid rgba(0,0,0,.7);
    border-radius: 10px;
    padding: 3px 12px;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: .5px;
}
#coins-num { color: #ffd93b; }
#lives-num { color: #ff6b6b; }
.life-icon, .coin-icon { margin-right: 4px; }

#ai-badge {
    color: #7ef7c0;
    animation: aiPulse 1.6s ease-in-out infinite;
}
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Indicador de gravação */
#rec-box {
    position: absolute;
    top: 96px;                 /* abaixo dos botões de som/pausa */
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(13px, 1.5vw, 20px);
    background: rgba(0,0,0,.5);
    border: 2px solid rgba(255,80,80,.8);
    border-radius: 10px;
    padding: 3px 12px;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 1px;
}
.rec-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #ff3b3b;
    box-shadow: 0 0 10px #ff3b3b;
    animation: recBlink 1s steps(1) infinite;
}
@keyframes recBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }

.hint {
    font-size: 12.5px;
    line-height: 1.5;
    color: #a9c4e6;
    background: rgba(255,255,255,.06);
    border-left: 3px solid #ffd93b;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
}
.hint b { color: #ffe9a3; }

/* ------------------------------------------------------------
   Instruções ancoradas em cada obstáculo ("ABAIXE!", "SOCO!"...)
   ------------------------------------------------------------ */
/* Faixa fixa logo abaixo da barra de progresso: as instruções nunca
   ficam por cima da pista, então não atrapalham a leitura do jogo. */
#cue-layer {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.cue {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2.3vw, 30px);
    letter-spacing: 1px;
    padding: 5px 16px;
    border: 3px solid #000;
    border-radius: 999px;
    color: #fff;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    box-shadow: 0 6px 0 rgba(0,0,0,.45), 0 10px 20px rgba(0,0,0,.4);
    animation: cueBeat .5s ease-in-out infinite alternate;
    will-change: transform, left, top;
}
.cue-icon { font-size: 1.15em; text-shadow: none; }

.float-text {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2vw, 26px);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    transition: transform .8s ease-out, opacity .8s ease-out;
}

@keyframes cueBeat {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

.cue-punch { background: linear-gradient(180deg, #ff6b6b, #c92a2a); }
.cue-slide { background: linear-gradient(180deg, #ffe066, #e8a300); color: #3d2b00; text-shadow: none; }
.cue-jump  { background: linear-gradient(180deg, #8ce99a, #2f9e44); }
.cue-dodge { background: linear-gradient(180deg, #8ec5ff, #1c62b9); }

/* Popups no centro */
#combo-popup {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(22px, 4vw, 46px);
    color: #ffe14d;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
    animation: popUp .7s ease-out forwards;
}
@keyframes popUp {
    0%   { opacity: 0; transform: translateX(-50%) scale(.5) translateY(20px); }
    25%  { opacity: 1; transform: translateX(-50%) scale(1.15) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-14px); }
    100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-46px); }
}

#center-msg {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(40px, 9vw, 120px);
    color: #fff;
    text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, 0 10px 20px rgba(0,0,0,.6);
    animation: bigPop .6s ease-out;
}
@keyframes bigPop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(2.2); }
    40%  { opacity: 1; transform: translate(-50%,-50%) scale(.9); }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* Flash vermelho ao levar dano */
#hud.hurt::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,0,0,0) 35%, rgba(255,0,0,.55) 100%);
    animation: hurtFlash .45s ease-out;
    pointer-events: none;
}
@keyframes hurtFlash { from { opacity: 1; } to { opacity: 0; } }

/* ------------------------------------------------------------
   Controles touch
   ------------------------------------------------------------ */
#btn-sound, #btn-pause {
    pointer-events: auto;
    position: absolute;
    top: 10px;
    font-size: 20px;
    background: rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    padding: 4px 10px;
}
#btn-sound { right: 12px; top: 52px; }
#btn-pause { right: 62px; top: 52px; }

/* ------------------------------------------------------------
   Telas (start / gameover / pause)
   ------------------------------------------------------------ */
.screen {
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: flex-start;      /* topo: conteúdo alto rola em vez de cortar */
    justify-content: center;
    padding: 24px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(120,190,255,.35), transparent 60%),
        linear-gradient(180deg, #1b3a6b 0%, #0d1b33 100%);
    backdrop-filter: blur(3px);
}

.screen-content {
    width: min(560px, 100%);
    margin: auto;                 /* centraliza quando cabe, encosta no topo quando não */
    text-align: center;
    padding: 8px 0 24px;
}

.lang-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 20px;
}
.lang-row .pill { font-size: 13px; padding: 5px 10px; }

.title-3d {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(34px, 7vw, 68px);
    letter-spacing: 2px;
    color: #ffd93b;
    line-height: 1.05;
    text-shadow:
        -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
        0 8px 0 #c1272d, 0 12px 22px rgba(0,0,0,.6);
    margin-bottom: 10px;
    animation: floaty 2.6s ease-in-out infinite;
}
.title-3d.gameover { color: #ff6b6b; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 8px 0 #6b0f0f, 0 12px 22px rgba(0,0,0,.6); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.subtitle {
    font-size: clamp(13px, 1.8vw, 17px);
    color: #cfe4ff;
    margin-bottom: 18px;
}

.panel {
    background: rgba(0,0,0,.35);
    border: 3px solid rgba(255,255,255,.16);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 14px;
    text-align: left;
}
.panel h3 {
    font-family: 'Luckiest Guy', cursive;
    font-size: 18px;
    color: #ffd93b;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.controls-list { list-style: none; font-size: 14px; line-height: 2; color: #e8f1ff; }
.key {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-family: 'Luckiest Guy', cursive;
    font-size: 12px;
    background: linear-gradient(180deg,#fff,#c9d6e8);
    color: #16233a;
    border-radius: 6px;
    padding: 1px 7px;
    margin-right: 3px;
    box-shadow: 0 3px 0 #7c8ba3;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 15px;
}
.pill {
    font-family: 'Baloo 2', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: #12233d;
    color: #fff;
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 10px;
    padding: 6px 10px;
    outline: none;
}
input[type=checkbox] { width: 20px; height: 20px; accent-color: #ffd93b; cursor: pointer; }

.slider-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.slider-wrap input[type=range] {
    width: 110px;
    accent-color: #ffd93b;
    cursor: pointer;
    vertical-align: middle;
}
.slider-wrap b {
    font-family: 'Luckiest Guy', cursive;
    font-size: 13px;
    color: #ffd93b;
    min-width: 38px;
    text-align: right;
}

.stats .stat {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255,.14);
}
.stats .stat:last-child { border-bottom: none; }
.hl { font-family: 'Luckiest Guy', cursive; color: #ffd93b; letter-spacing: 1px; }

.big-button {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(18px, 2.6vw, 26px);
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(180deg, #ff5a5a 0%, #c1272d 100%);
    border: 4px solid #000;
    border-radius: 18px;
    padding: 12px 40px;
    margin: 8px 6px 0;
    cursor: pointer;
    text-shadow: 2px 3px 0 rgba(0,0,0,.55);
    box-shadow: 0 8px 0 #6b0f0f, 0 14px 22px rgba(0,0,0,.45);
    transition: transform .08s, box-shadow .08s, filter .12s;
}
.big-button:hover { filter: brightness(1.1); }
.big-button:active { transform: translateY(6px); box-shadow: 0 2px 0 #6b0f0f, 0 6px 12px rgba(0,0,0,.45); }
.big-button.ghost {
    background: linear-gradient(180deg,#7f8fa6,#3d4a5c);
    box-shadow: 0 8px 0 #1d2530, 0 14px 22px rgba(0,0,0,.4);
}
.big-button.ghost:active { box-shadow: 0 2px 0 #1d2530; }

/* ------------------------------------------------------------
   Aviso "Prepare-se para se movimentar!" antes da corrida
   ------------------------------------------------------------ */
#prestart {
    position: absolute;
    inset: 0;
    z-index: 26;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.28), rgba(0,0,0,.66));
    animation: fadeIn .3s ease-out;
}
.pre-card {
    width: min(660px, 90%);
    text-align: center;
    padding: 24px 26px 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(23,44,80,.96), rgba(9,18,36,.96));
    border: 4px solid #000;
    box-shadow: 0 12px 0 rgba(0,0,0,.5), 0 22px 40px rgba(0,0,0,.6);
    animation: interPop .4s cubic-bezier(.2,1.4,.4,1);
}
.pre-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(20px, 3.4vw, 38px);
    line-height: 1.15;
    color: #ffd93b;
    letter-spacing: 1px;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 6px 0 #c1272d;
}
.pre-sub {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(17px, 2.6vw, 30px);
    letter-spacing: 1px;
    color: #ffffff;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    margin: 10px 0 16px;
}
.pre-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pre-legend .cue {
    font-size: clamp(11px, 1.5vw, 16px);
    padding: 4px 12px;
    animation: none;              /* na legenda os balões ficam parados */
    box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.pre-count {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(48px, 9vw, 96px);
    line-height: 1.1;
    color: #fff;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 8px 18px rgba(0,0,0,.7);
}
.pre-count span { display: inline-block; animation: tick .5s ease-out; }

/* ------------------------------------------------------------
   Intervalo de 5s entre níveis
   ------------------------------------------------------------ */
#intermission {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.62));
    animation: fadeIn .35s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.inter-card {
    width: min(520px, 82%);
    text-align: center;
    padding: 22px 26px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(23,44,80,.96), rgba(9,18,36,.96));
    border: 4px solid #000;
    box-shadow: 0 12px 0 rgba(0,0,0,.5), 0 22px 40px rgba(0,0,0,.6);
    animation: interPop .45s cubic-bezier(.2,1.4,.4,1);
}
@keyframes interPop {
    from { transform: scale(.75) translateY(30px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.inter-kicker {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(12px, 1.6vw, 17px);
    letter-spacing: 2px;
    color: #8ce99a;
    text-shadow: 2px 2px 0 #000;
}
#inter-title {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(28px, 5vw, 50px);
    letter-spacing: 2px;
    color: #ffd93b;
    line-height: 1.1;
    margin: 2px 0 12px;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 7px 0 #c1272d;
}

.inter-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}
.inter-stats > div {
    flex: 1;
    background: rgba(255,255,255,.07);
    border: 2px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 8px 4px;
}
.inter-stats span {
    display: block;
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2.4vw, 24px);
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}
.inter-stats small {
    display: block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9fb8d8;
}

/* Recompensa de moedas contadas no intervalo */
.inter-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,217,59,.16), rgba(255,217,59,.05));
    border: 2px solid rgba(255,217,59,.35);
}
.reward-coin {
    font-size: clamp(24px, 3.6vw, 38px);
    line-height: 1;
    animation: coinSpin 1s ease-in-out infinite;
}
@keyframes coinSpin {
    0%,100% { transform: scaleX(1) rotate(0deg); }
    50%     { transform: scaleX(.25) rotate(6deg); }
}
#inter-coins {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1;
    color: #ffd93b;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
#inter-coin-bonus {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(14px, 2vw, 22px);
    color: #8ce99a;
    text-shadow: 2px 2px 0 #000;
}

/* Chamada para ação (SUBSCRIBE / LIKE) */
#cta {
    position: absolute;
    right: 0;
    top: 46%;
    z-index: 14;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 12px 20px;
    border: 4px solid #000;
    border-right: none;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(180deg, #ff4444, #b81414);
    box-shadow: 0 7px 0 rgba(0,0,0,.5), 0 14px 26px rgba(0,0,0,.5);
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(16px, 2.4vw, 32px);
    letter-spacing: 1px;
    color: #fff;
    white-space: nowrap;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
    pointer-events: none;
    animation: ctaIn .45s cubic-bezier(.2,1.5,.4,1), ctaPulse 1.1s ease-in-out .5s infinite;
}
#cta-emoji { font-size: 1.2em; text-shadow: none; animation: ctaShake .9s ease-in-out infinite; }

@keyframes ctaIn {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes ctaPulse {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.28); }
}
@keyframes ctaShake {
    0%,100% { transform: rotate(-12deg); }
    50%     { transform: rotate(12deg); }
}

.inter-next {
    font-size: clamp(13px, 1.8vw, 17px);
    color: #cfe4ff;
    margin-bottom: 6px;
}
.inter-next b { color: #ffe9a3; font-family: 'Luckiest Guy', cursive; letter-spacing: 1px; }

.inter-countdown {
    font-family: 'Luckiest Guy', cursive;
    font-size: clamp(44px, 8vw, 84px);
    line-height: 1;
    color: #fff;
    text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 8px 18px rgba(0,0,0,.7);
}
.inter-countdown span { display: inline-block; animation: tick .5s ease-out; }
@keyframes tick {
    from { transform: scale(1.7); opacity: .2; }
    to   { transform: scale(1); opacity: 1; }
}

.inter-bar {
    height: 10px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    border: 2px solid #000;
    overflow: hidden;
}
#inter-bar-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #8ce99a, #ffd93b);
}

/* ------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    #hud-top { gap: 8px; padding: 8px 10px; }
    #progress-track { height: 18px; border-width: 2px; }
    #hud-left { top: 46px; left: 10px; }
    .cue { font-size: 14px; padding: 4px 12px; }
}