/* ============================================================================
 * FLAPYCOPA — Telas (home/lobby, jogo, modais)
 * ========================================================================== */

/* ----- HOME / LOBBY ---------------------------------------------------- */
#screen-home { z-index: 1; }
.home-stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; padding-bottom: calc(var(--nav-h) + 14px + var(--safe-bottom)); }

.side { top: 29%; }

.character { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.bird-wrap { display: flex; align-items: center; justify-content: center; }
.bird-img { width: min(56vw, 230px); height: auto; filter: drop-shadow(0 20px 22px rgba(0,0,0,.6));
  animation: floaty 3.6s ease-in-out infinite; will-change: transform; }

.play-zone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* ----- TELA DO JOGO ---------------------------------------------------- */
#screen-game { background: #04122c; z-index: 10; }
.game-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + var(--safe-top)) 12px 8px; }
.game-top .back { width: 42px; height: 42px; border-radius: 13px; background: rgba(4,12,34,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px solid var(--glass-border); display: flex; align-items: center; justify-content: center; }
.game-top .gbal { margin-left: auto; }

#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; z-index: 1; }

/* HUD multiplicador */
.mult-hud { position: absolute; top: 15%; left: 0; right: 0; text-align: center; z-index: 5; pointer-events: none; }
.mult-hud .mult { font-family: var(--font-num); font-size: 72px; font-weight: 900; letter-spacing: 1px;
  color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 36px rgba(255,255,255,.3); }
.mult-hud .mult.win { color: var(--green-400); text-shadow: 0 4px 0 rgba(0,0,0,.4), var(--glow-green); }
.mult-hud .mult.crash { color: var(--red-500); animation: shake .4s; text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 30px rgba(255,82,82,.7); }
.mult-hud .sub { font-size: 14px; color: #dce8ff; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,.8); margin-top: 2px; }

/* painel de aposta */
.bet-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 16px 16px calc(18px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(4,12,34,0), rgba(4,12,34,.92) 26%); display: flex; flex-direction: column; gap: 11px; }
.bet-amount-row { display: flex; align-items: center; gap: 10px; }
.bet-stepper { display: flex; align-items: center; background: rgba(0,0,0,.4); border: 1.5px solid var(--glass-border);
  border-radius: var(--r-pill); overflow: hidden; flex: 1; }
.bet-stepper button { width: 48px; height: 50px; font-size: 24px; font-weight: 900; color: var(--gold-400); }
.bet-stepper .amt { flex: 1; text-align: center; font-size: 21px; font-weight: 900; font-family: var(--font-num); }
.bet-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.bet-presets::-webkit-scrollbar { display: none; }
.mode-toggle { display: flex; background: rgba(0,0,0,.35); border-radius: var(--r-pill); border: 1.5px solid var(--glass-border); padding: 4px; gap: 4px; }
.mode-toggle button { flex: 1; padding: 9px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px; color: var(--text-dim); }
.mode-toggle button.on { background: var(--blue-500); color: #fff; box-shadow: var(--inset-top); }

/* barra de saque */
.cashout-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 16px 16px calc(20px + var(--safe-bottom)); }
.btn-cashout { position: relative; width: 100%; padding: 18px; border-radius: 18px; font-size: 22px; font-weight: 900; overflow: hidden;
  background: var(--green-grad); color: #04300f; box-shadow: var(--sh-btn-green), var(--inset-top), var(--glow-green); }
.btn-cashout b { display: block; font-size: 30px; font-family: var(--font-num); }
.btn-cashout:active { transform: translateY(3px); }
.fair-line { font-size: 10px; color: var(--text-mute); text-align: center; padding: 6px 8px 0; }

/* ----- skin thumb (prêmios) ------------------------------------------- */
.skin-thumb { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(31,111,255,.3), rgba(4,12,34,.6));
  border: 1.5px solid var(--glass-border); display: flex; align-items: center; justify-content: center; }
.skin-thumb img { width: 86%; height: 86%; object-fit: contain; }

/* ----- RANKING --------------------------------------------------------- */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); }
.rank-row .pos { width: 30px; font-size: 16px; font-weight: 900; text-align: center; color: var(--text-dim); font-family: var(--font-num); }
.rank-row.top1 { border-color: var(--gold-500); box-shadow: var(--glow-gold); }
.rank-row.top1 .pos { color: var(--gold-400); }
.rank-row .nm { flex: 1; font-weight: 800; }
.rank-row .pz { color: var(--gold-400); font-weight: 900; font-family: var(--font-num); }
.rank-av { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f59a12); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #6a3d00; }
.rank-prize { border-color: var(--gold-500) !important; box-shadow: var(--glow-gold); }
.rank-row.me { background: rgba(255,184,28,.12); border-color: var(--gold-500); }
.rank-row.top2 { border-color: #cfd8e6; }
.rank-row.top3 { border-color: #e0a062; }

/* ----- MISSÕES / PRÊMIOS ---------------------------------------------- */
.mission { display: flex; align-items: center; gap: 12px; }
.mission .mtxt { flex: 1; }
.mprog { height: 8px; border-radius: 999px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 6px; }
.mprog > i { display: block; height: 100%; background: var(--green-grad); width: 0; }
.reward-pill { background: var(--gold-grad); color: #3a2400; border-radius: 999px; padding: 7px 13px; font-weight: 900; font-size: 13px; box-shadow: var(--inset-top); }

/* ----- DIÁRIO ---------------------------------------------------------- */
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.daily-cell { aspect-ratio: 1; border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1.5px solid var(--glass-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; }
.daily-cell.claimed { opacity: .5; border-color: var(--green-500); }
.daily-cell.today { border-color: var(--gold-500); box-shadow: var(--glow-gold); }
.daily-cell .d { font-size: 10px; color: var(--text-dim); }
.daily-cell .v { font-size: 13px; font-weight: 900; color: var(--gold-400); font-family: var(--font-num); }
.daily-cell .check { position: absolute; top: 4px; right: 6px; color: var(--green-400); font-weight: 900; }

/* ----- RODA DA SORTE (imagem) ----------------------------------------- */
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 0 0; }
.wheel-box { position: relative; width: 300px; height: 300px; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid var(--gold-400);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.wheel-canvas { width: 300px; height: 300px; display: block; filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)); }

/* ----- PERFIL ---------------------------------------------------------- */
.profile-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 16px; }
.profile-hero .big-av { width: 86px; height: 86px; border-radius: 50%; font-size: 42px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #f59a12); border: 3px solid #fff3c4; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-gold); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: rgba(255,255,255,.05); border: 1.5px solid var(--glass-border); border-radius: var(--r-sm); padding: 12px; text-align: center; }
.stat .n { font-size: 20px; font-weight: 900; color: var(--gold-400); font-family: var(--font-num); }
.stat .l { font-size: 11px; color: var(--text-dim); }

/* ----- DEPÓSITO PIX ---------------------------------------------------- */
.qr-box { width: 224px; height: 224px; margin: 0 auto; background: #fff; border-radius: var(--r); padding: 10px; box-shadow: var(--sh-soft); }
.qr-box svg, .qr-box img, .qr-box canvas { width: 100%; height: 100%; object-fit: contain; }
.copia-cola { display: flex; gap: 8px; align-items: stretch; }
.copia-cola .code { flex: 1; padding: 12px; border-radius: var(--r-sm); background: rgba(0,0,0,.4); border: 1.5px dashed var(--glass-border);
  font-size: 11px; font-weight: 700; color: var(--text-dim); word-break: break-all; max-height: 64px; overflow: hidden; }
.pix-status { text-align: center; font-weight: 800; padding: 10px; }
.pix-status.wait { color: var(--gold-400); }
.pix-status.ok { color: var(--green-400); }
.amount-display { text-align: center; font-size: 40px; font-weight: 900; color: var(--gold-400); font-family: var(--font-num); }

/* ----- ADMIN ----------------------------------------------------------- */
.admin-field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.admin-field label { flex: 1; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.admin-field input { width: 110px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0,0,0,.4);
  border: 1.5px solid var(--glass-border); color: #fff; font-weight: 800; text-align: right; font-family: var(--font-num); }
.admin-sec { font-size: 12px; font-weight: 900; color: var(--gold-400); text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; }
.sim-out { font-family: var(--font-num); font-size: 13px; line-height: 1.7; }
.sim-out b { color: var(--gold-400); }