/* --u = tamanho de 1 "pixel do cenário" na tela.
   O cenário original tem 836x470, então tudo é medido nessa escala
   e o jogo inteiro se ajusta a qualquer tamanho de tela. */
:root {
    --u: min(calc(100vw / 836), calc(100vh / 470));
    --ground: 40;
}

@supports (height: 100dvh) {
    :root {
        --u: min(calc(100vw / 836), calc(100dvh / 470));
    }
}

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

/* O jogo roda numa camada em tela cheia por cima do site */
#gameView {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: "Courier New", Courier, monospace;
}

/* ---------- Cenário (o GIF original, sem alterações) ---------- */
.game-board {
    position: relative;
    overflow: hidden;
    width: calc(var(--u) * 836);
    height: calc(var(--u) * 470);
    background: #000 url("assets/imgs/cenarionoite.gif") center / 100% 100% no-repeat;
    image-rendering: pixelated;
}

.world {
    position: absolute;
    inset: 0;
}

/* ---------- Sprites (personagem, canos, moedas) ---------- */
.sprite {
    position: absolute;
    left: 0;
    bottom: calc(var(--u) * var(--ground));
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
}

.sprite img {
    position: absolute;
    max-width: none;
    image-rendering: pixelated;
    -webkit-user-drag: none;
}

.hidden {
    display: none !important;
}

/* "+1" que sobe quando pega uma moeda */
.pop {
    position: absolute;
    color: #ffd84a;
    font-weight: bold;
    font-size: calc(var(--u) * 24);
    text-shadow: 0 2px 0 #000;
    pointer-events: none;
    white-space: nowrap;
    animation: pop 0.6s ease-out forwards;
}

@keyframes pop {
    from { transform: translateY(0); opacity: 1; }
    to   { transform: translateY(calc(var(--u) * -45)); opacity: 0; }
}

/* ---------- Placar ---------- */
.hud {
    --ic: max(20px, calc(var(--u) * 38));   /* altura dos ícones */
    position: absolute;
    top: calc(var(--u) * 12);
    left: calc(var(--u) * 16);
    right: calc(var(--u) * 16);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 8);
    color: #fff;
}

.hud-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 14);
}

/* Painel roxo com texto branco de contorno escuro (estilo "$59.00") */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.12em 0.55em 0.12em 0.85em;
    border-radius: 999px;
    border: 2px solid #050f3a;
    background: linear-gradient(180deg, #2c55cc 0%, #1a3fa3 55%, #0f276e 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), 0 3px 0 rgba(0, 0, 0, 0.45);
    font-family: "Arial Rounded MT Bold", "Arial Black", Verdana, sans-serif;
    font-weight: 900;
    font-size: max(13px, calc(var(--u) * 26));
    line-height: 1.2;
    white-space: nowrap;
}

.pill-text {
    color: #fff;
    letter-spacing: 0.02em;
    text-shadow:
        -1px -1px 0 #050f3a, 1px -1px 0 #050f3a,
        -1px  1px 0 #050f3a, 1px  1px 0 #050f3a,
         0    2px 0 #050f3a;
}

/* Moeda recortada na área visível do GIF */
.icon-coin {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: calc(var(--ic) * 35 / 36);
    height: var(--ic);
    flex: none;
}

.icon-coin img {
    position: absolute;
    top: 0;
    left: calc(var(--ic) * -10 / 36);
    width: calc(var(--ic) * 56 / 36);
    height: var(--ic);
    max-width: none;
    image-rendering: pixelated;
}

.icon-meta {
    width: var(--ic);
    height: var(--ic);
    flex: none;
    object-fit: contain;
}

.bump {
    animation: bump 0.25s ease-out;
}

@keyframes bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.hud-sub {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    font-size: max(10px, calc(var(--u) * 15));
    color: #d6defc;
    text-shadow: 0 2px 0 #000;
}

.sound-btn {
    margin-left: auto;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: max(14px, calc(var(--u) * 22));
    cursor: pointer;
}

/* ---------- Telas (início e game over) ---------- */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(2, 6, 23, 0.6);
    z-index: 10;
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 28) calc(var(--u) * 50);
    border-radius: 14px;
    background: rgba(8, 16, 48, 0.85);
    border: 3px solid #5b7cff;
    color: #fff;
    text-align: center;
    font-size: max(12px, calc(var(--u) * 20));
    text-shadow: 0 2px 0 #000;
}

.panel h1 {
    font-size: max(20px, calc(var(--u) * 44));
    letter-spacing: 2px;
    color: #ffd84a;
}

.hint {
    opacity: 0.8;
    font-size: max(11px, calc(var(--u) * 16));
}

.main-btn {
    margin-top: calc(var(--u) * 8);
    height: max(36px, calc(var(--u) * 60));
    width: max(180px, calc(var(--u) * 300));
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-weight: bold;
    font-size: max(14px, calc(var(--u) * 22));
    color: #fff;
    background-color: #2f54ff;
    cursor: pointer;
}

.main-btn:hover {
    background-color: #4b6bff;
}


/* ---------- Aposta ---------- */
.bet-label {
    margin-top: calc(var(--u) * 6);
    font-size: max(12px, calc(var(--u) * 18));
    opacity: 0.9;
}

.bet-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-radius: 10px;
    border: 2px solid #5b7cff;
    background: #0a1030;
    font-weight: bold;
    font-size: max(16px, calc(var(--u) * 26));
}

.bet-box input {
    width: max(110px, calc(var(--u) * 170));
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font: inherit;
    text-align: right;
    user-select: text;
    -webkit-user-select: text;
}

.rules {
    color: #ffd84a;
    font-size: max(11px, calc(var(--u) * 16));
}

.sec-btn {
    height: max(32px, calc(var(--u) * 46));
    width: max(180px, calc(var(--u) * 300));
    border-radius: 10px;
    border: 2px solid #5b7cff;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    font-size: max(12px, calc(var(--u) * 17));
    cursor: pointer;
}

.sec-btn:hover {
    background: rgba(91, 124, 255, 0.25);
}

.panel.win {
    border-color: #ffd84a;
}


/* ---------- Botão RETIRAR (aparece ao bater a meta) ---------- */
.withdraw-btn {
    cursor: pointer;
    color: #fff;
    border-color: #06361b;
    background: linear-gradient(180deg, #38d878 0%, #1fa957 55%, #138040 100%);
    animation: appear 0.35s ease-out, pulse 1.2s ease-in-out 0.35s infinite;
}

.withdraw-btn .pill-text {
    text-shadow:
        -1px -1px 0 #06361b, 1px -1px 0 #06361b,
        -1px  1px 0 #06361b, 1px  1px 0 #06361b,
         0    2px 0 #06361b;
}

.withdraw-btn:hover {
    filter: brightness(1.12);
}

@keyframes appear {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

/* ---------- Aviso rápido ---------- */
.toast {
    position: absolute;
    left: 50%;
    top: calc(var(--u) * 120);
    transform: translateX(-50%);
    padding: 0.4em 1em;
    border-radius: 12px;
    border: 3px solid #ffd84a;
    background: rgba(8, 16, 48, 0.88);
    color: #ffd84a;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    text-align: center;
    font-size: max(13px, calc(var(--u) * 26));
    text-shadow: 0 2px 0 #000;
    z-index: 5;
    pointer-events: none;
    animation: appear 0.3s ease-out;
}

.panel-emoji {
    width: max(48px, calc(var(--u) * 90));
    height: max(48px, calc(var(--u) * 90));
}


/* ---------- Dicas: celular x computador ---------- */

.hint-touch { display: block; }
.hint-desk { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .hint-touch { display: none; }
    .hint-desk { display: block; }
}

/* ---------- Vilão, tiros e laser ---------- */
.fx {
    position: absolute;
    left: 0;
    bottom: calc(var(--u) * var(--ground));
    pointer-events: none;
    will-change: transform;
}

.vflip {
    position: absolute;
    inset: 0;
}

.vdie {
    transform-origin: 50% 100%;
    animation: vdie 0.5s ease-in forwards;
}

@keyframes vdie {
    0%   { transform: rotate(0deg);   opacity: 1; filter: brightness(2.5); }
    100% { transform: rotate(-80deg) translateY(calc(var(--u) * 10)); opacity: 0; filter: brightness(0.6); }
}

.bullet {
    width: calc(var(--u) * 28);
    height: calc(var(--u) * 12);
    border-radius: 999px 4px 4px 999px;
    background: linear-gradient(90deg, #fff6b0 0%, #ffb21a 45%, #ff3b1f 100%);
    box-shadow: 0 0 calc(var(--u) * 10) calc(var(--u) * 3) rgba(255, 90, 30, 0.75);
}

.muzzle {
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
    margin: calc(var(--u) * -11) 0 0 calc(var(--u) * -20);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffd84a 40%, rgba(255, 90, 30, 0) 70%);
    animation: muzzle 0.14s ease-out forwards;
}

@keyframes muzzle {
    from { transform: scale(0.6); opacity: 1; }
    to   { transform: scale(1.6); opacity: 0; }
}

/* Laser preto saindo dos óculos (com brilho roxo para aparecer no escuro) */
.laser {
    height: calc(var(--u) * 14);
    background: linear-gradient(90deg, #000 0%, #111 50%, #000 100%);
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
    box-shadow: 0 0 calc(var(--u) * 8) calc(var(--u) * 2) rgba(160, 110, 255, 0.95),
                0 0 calc(var(--u) * 22) calc(var(--u) * 7) rgba(110, 60, 255, 0.55);
    transform-origin: 0 50%;
    animation: laser 0.38s ease-out forwards;
}

@keyframes laser {
    0%   { transform: scaleY(0.2) scaleX(0.1); opacity: 1; }
    25%  { transform: scaleY(1.2) scaleX(1);   opacity: 1; }
    100% { transform: scaleY(0)   scaleX(1);   opacity: 0; }
}

/* ---------- Botões de ação ---------- */
.ctl {
    --size: max(58px, calc(var(--u) * 92));
    position: absolute;
    bottom: calc(var(--u) * 8);
    z-index: 4;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 3px solid #050f3a;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    text-shadow: 0 2px 0 #000;
    overflow: hidden;
    touch-action: none;
}

.ctl-ico { font-size: max(20px, calc(var(--u) * 34)); line-height: 1; }
.ctl-txt { font-size: max(8px, calc(var(--u) * 12)); line-height: 1.05; text-align: center; padding: 0 4px; }

.power-btn {
    right: calc(var(--u) * 14);
    --p: 1;                                  /* 0 = acabou de usar, 1 = pronto */
    background:
        conic-gradient(#7c4dff calc(var(--p) * 360deg), #1b1440 0);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
    opacity: 0.8;
}

.power-btn.ready {
    opacity: 1;
    box-shadow: 0 0 calc(var(--u) * 18) rgba(160, 110, 255, 0.95), 0 3px 0 rgba(0, 0, 0, 0.5);
    animation: pulse 1s ease-in-out infinite;
}

.crouch-btn {
    display: flex;
    left: calc(var(--u) * 14);
    background: linear-gradient(180deg, #2c55cc 0%, #0f276e 100%);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
    opacity: 0.85;
}

.crouch-btn.held { filter: brightness(1.4); }

/* Botão de agachar visível também em celulares; pressionar mantém o personagem agachado. */


/* ---------- Mensagens e botão de sair dentro do jogo ---------- */
.bet-msg {
    min-height: 1.2em;
    color: #ff8a8a;
    font-size: max(11px, calc(var(--u) * 16));
}
.wallet-info {
    color: #8fe3a6;
    font-weight: bold;
    font-size: max(12px, calc(var(--u) * 18));
}
.link-btn {
    background: none;
    border: none;
    color: #9db4ff;
    font-family: inherit;
    font-size: max(11px, calc(var(--u) * 16));
    text-decoration: underline;
    cursor: pointer;
}
.link-btn:hover { color: #fff; }


/* ---------- Painel de aposta/explicação mais compacto ---------- */
.panel-start {
    gap: calc(var(--u) * 4);
    padding: calc(var(--u) * 10) calc(var(--u) * 20);
    width: min(92%, max(280px, calc(var(--u) * 400)));
    max-height: 92%;
    overflow-y: auto;
    font-size: max(9px, calc(var(--u) * 11));
    border-width: 2px;
    border-radius: 12px;
}
.panel-start h1 { font-size: max(14px, calc(var(--u) * 22)); letter-spacing: 1px; }
.panel-start .wallet-info { font-size: max(9px, calc(var(--u) * 11)); line-height: 1.2; }
.panel-start .bet-label { margin-top: 0; font-size: max(9px, calc(var(--u) * 11)); }
.panel-start .bet-box { padding: 1px 10px; font-size: max(13px, calc(var(--u) * 17)); }
.panel-start .bet-box input { width: max(70px, calc(var(--u) * 90)); }
.panel-start .rules,
.panel-start .hint,
.panel-start .bet-msg { font-size: max(8.5px, calc(var(--u) * 10)); line-height: 1.2; }
.panel-start .bet-msg { min-height: 0; }
.panel-start .bet-msg:empty { display: none; }
.panel-start .main-btn { margin-top: calc(var(--u) * 3); height: max(30px, calc(var(--u) * 34)); width: max(130px, calc(var(--u) * 190)); font-size: max(12px, calc(var(--u) * 15)); }
.panel-start .sec-btn { height: max(26px, calc(var(--u) * 28)); width: max(130px, calc(var(--u) * 190)); font-size: max(10px, calc(var(--u) * 12)); }
.panel-start .link-btn { font-size: max(9px, calc(var(--u) * 10)); }


/* ---------- Tela inicial do jogo: painel maior (sobrescreve o modo compacto) ---------- */
.panel-start {
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 22) calc(var(--u) * 34);
    width: min(96%, max(340px, calc(var(--u) * 620)));
    max-height: 96%;
    font-size: max(12px, calc(var(--u) * 16));
    border-width: 3px;
    border-radius: 16px;
}
.panel-start h1 { font-size: max(20px, calc(var(--u) * 36)); letter-spacing: 2px; }
.panel-start .wallet-info { font-size: max(12px, calc(var(--u) * 16)); line-height: 1.3; }
.panel-start .bet-label { font-size: max(13px, calc(var(--u) * 18)); }
.panel-start .bet-box { padding: 4px 16px; font-size: max(18px, calc(var(--u) * 28)); }
.panel-start .bet-box input { width: max(100px, calc(var(--u) * 150)); }
.panel-start .rules,
.panel-start .hint,
.panel-start .bet-msg { font-size: max(11px, calc(var(--u) * 15)); line-height: 1.3; }
.panel-start .main-btn { margin-top: calc(var(--u) * 6); height: max(44px, calc(var(--u) * 58)); width: max(200px, calc(var(--u) * 340)); font-size: max(16px, calc(var(--u) * 24)); }
.panel-start .sec-btn { height: max(38px, calc(var(--u) * 48)); width: max(200px, calc(var(--u) * 340)); font-size: max(13px, calc(var(--u) * 18)); }
.panel-start .link-btn { font-size: max(12px, calc(var(--u) * 16)); }