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

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(circle at 50% 20%, #14301c, #0a1a0f 70%);
  color: #eaf3e2;
  min-height: 100vh;
}

.screen { min-height: 100vh; padding: 16px; }
.screen[hidden] { display: none; }

h1 { text-align: center; padding-top: 10vh; font-size: 2.2rem; }
.tagline { text-align: center; opacity: .75; margin-top: 8px; }
.error { color: #ff9b8a; min-height: 1.2em; margin-top: 10px; text-align: center; }

/* ---- Auth ---- */
#auth form {
  max-width: 320px; margin: 24px auto; display: flex; flex-direction: column; gap: 10px;
}
#auth input {
  padding: 12px; border-radius: 8px; border: 1px solid #3c5c44;
  background: #10241a; color: inherit; font-size: 1rem;
}
.auth-buttons { display: flex; gap: 10px; }
.auth-buttons button { flex: 1; }

button {
  padding: 12px; border: none; border-radius: 8px; cursor: pointer;
  background: #e8a33d; color: #241503; font-weight: 700; font-size: 1rem;
}
button.secondary { background: #2c4a36; color: #eaf3e2; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Game layout ---- */
#game header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto 12px;
}
#countdown {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.15rem;
  background: #10241a; border: 1px solid #3c5c44; border-radius: 10px; padding: 8px 14px;
}
.me-box { display: flex; align-items: center; gap: 10px; }
.me-box button { padding: 8px 12px; font-size: .85rem; }

#game main {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 16px;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "arena shop" "arena ranking" "arena war";
}
#arena { grid-area: arena; text-align: center; position: relative; }
#shop { grid-area: shop; }
#ranking { grid-area: ranking; }
#war { grid-area: war; }

#shop, #ranking, #war {
  background: #10241acc; border: 1px solid #2c4a36; border-radius: 12px; padding: 14px;
}
#shop h2, #ranking h2, #war h2 { font-size: 1.05rem; margin-bottom: 10px; }

#arena h2 { font-weight: 400; margin: 10px 0; }
#arena h2 b { text-transform: uppercase; }

#onca, #sahur {
  width: min(70vw, 330px);
  height: auto; display: inline-block;
  cursor: none; user-select: none; -webkit-user-drag: none;
}

#whip {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
}
#whip[hidden] { display: none; }

#global-clicks { opacity: .8; margin: 6px 0 12px; }

#battle {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 4px auto 12px; max-width: 420px; font-size: 1.05rem;
}
#battle .track {
  flex: 1; height: 14px; border-radius: 99px; overflow: hidden;
  background: #10241a; border: 1px solid #3c5c44;
}
#battle-fill {
  height: 100%; background: linear-gradient(90deg, #e8a33d, #c97f1e);
  width: 100%; transition: width .8s ease;
}
#battle-pct { font-variant-numeric: tabular-nums; font-size: .85rem; min-width: 44px; text-align: left; }
#event-banner {
  background: #2c4a36; border: 1px solid #e8a33d; border-radius: 10px;
  padding: 8px 14px; margin: 0 auto 10px; max-width: 480px; font-weight: 700;
}
#event-banner[hidden] { display: none; }

.stats {
  display: flex; justify-content: center; gap: 14px;
}
.stats > div {
  background: #10241acc; border: 1px solid #2c4a36; border-radius: 10px;
  padding: 8px 16px; font-size: .85rem; opacity: .95;
}
.stats b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* ---- Shop ---- */
.upgrade {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 8px; text-align: left; padding: 10px;
}
.upgrade small { display: block; font-weight: 400; opacity: .8; }
.upgrade .price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.upgrade .timer { display: block; font-style: normal; font-size: .75rem; font-weight: 700; color: #7a1f04; }
.upgrade .timer.off { opacity: .5; font-weight: 400; color: inherit; }

/* ---- Ranking ---- */
#leaderboard { list-style-position: inside; max-height: 320px; overflow-y: auto; }
#leaderboard li {
  padding: 6px 8px; border-radius: 6px; font-variant-numeric: tabular-nums;
  display: flex; justify-content: space-between;
}
#leaderboard li.me { background: #2c4a36; font-weight: 700; }
#my-rank { margin-top: 10px; opacity: .85; font-size: .9rem; }

/* ---- Diário de Guerra ---- */
#war-score { font-size: 1.4rem; text-align: center; margin-bottom: 6px; }
#war-today { font-size: .85rem; opacity: .8; margin-bottom: 8px; text-align: center; }
#war-days { list-style: none; font-size: .85rem; }
#war-days li { padding: 4px 0; }

/* ---- Podium ---- */
#podium-top {
  display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 30px 0;
}
#podium-top .place {
  background: #10241a; border: 1px solid #3c5c44; border-radius: 12px;
  padding: 18px 22px; text-align: center; min-width: 130px;
}
#podium-top .p1 { transform: translateY(-24px); border-color: #e8a33d; }
#podium-top .medal { font-size: 2.4rem; }
#podium-top .nick { font-weight: 700; margin: 6px 0; }
#podium-top .pts { font-variant-numeric: tabular-nums; opacity: .85; }
#podium-list { max-width: 420px; margin: 0 auto; list-style-position: inside; }
#podium-list li { padding: 6px 8px; display: flex; justify-content: space-between; }

/* ---- Mobile ---- */
@media (max-width: 800px) {
  #game main { grid-template-columns: 1fr; grid-template-areas: "arena" "shop" "ranking" "war"; }
}

/* ================= A ONÇA ================= */
.onca * { transform-box: view-box; }

/* Parâmetros por humor: brow negativo = raiva (V), positivo = tristeza */
.mood-1 { --ear: 0deg;  --lid: .2;  --lid-rot: 11deg; --brow: -16deg; }
.mood-2 { --ear: 6deg;  --lid: .16; --lid-rot: 7deg;  --brow: -9deg;  filter: saturate(.95); }
.mood-3 { --ear: 13deg; --lid: .3;  --lid-rot: 0deg;  --brow: 3deg;   filter: saturate(.78) brightness(.96); }
.mood-4 { --ear: 20deg; --lid: .44; --lid-rot: 0deg;  --brow: 13deg;  filter: saturate(.55) brightness(.9); }
.mood-5 { --ear: 28deg; --lid: .58; --lid-rot: 0deg;  --brow: 19deg;  filter: saturate(.35) brightness(.84) hue-rotate(-8deg); }

.ear { transition: transform .5s; }
.ear-l { transform-origin: 114px 136px; transform: rotate(calc(var(--ear) * -1)); }
.ear-r { transform-origin: 246px 136px; transform: rotate(var(--ear)); }
.ear-in { animation: twitch 9s infinite; }
.ear-l .ear-in { transform-origin: 114px 136px; }
.ear-r .ear-in { transform-origin: 246px 136px; animation-delay: 4.7s; }

.tear, .impact { transform-box: fill-box; transform-origin: center; }

.brow { transition: transform .5s; }
.brow-l { transform-origin: 112px 156px; transform: rotate(calc(var(--brow) * -1)); }
.brow-r { transform-origin: 248px 156px; transform: rotate(var(--brow)); }

.lid { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
.eye-l .lid { --lr: var(--lid-rot); }
.eye-r .lid { --lr: calc(var(--lid-rot) * -1); }
.eye-r .lid { animation-delay: .07s; }

.onca-breathe { transform-origin: 180px 305px; animation: breathe 3.4s ease-in-out infinite; }

/* Bocas e rugas de rosnado: por humor */
.mouth > g { visibility: hidden; }
.mood-1 .m1, .mood-2 .m2, .mood-3 .m3, .mood-4 .m4, .mood-5 .m5 { visibility: visible; }
.wrinkle { opacity: 0; transition: opacity .4s; }
.mood-1 .wrinkle, .mood-2 .wrinkle { opacity: 1; }

/* Lágrimas */
.tear { opacity: 0; }
.mood-3 .tear-l1 { animation: drip 2.6s ease-in .4s infinite; }
.mood-4 .tear-l1 { animation: drip 1.8s ease-in infinite; }
.mood-4 .tear-r1 { animation: drip 1.8s ease-in .8s infinite; }
.mood-5 .tear-l1 { animation: drip 1.1s ease-in infinite; }
.mood-5 .tear-r1 { animation: drip 1.1s ease-in .5s infinite; }
.mood-5 .tear-l2 { animation: drip 1.1s ease-in .3s infinite; }
.mood-5 .tear-r2 { animation: drip 1.1s ease-in .85s infinite; }
.streak { opacity: 0; transition: opacity .4s; }
.mood-5 .streak { opacity: .55; }

/* Chicotada */
.flinch .onca-flinch { animation: flinch .34s ease-out; }
.flinch .lid { animation: none; transform: translateY(30px) rotate(0deg); }
.flinch .ear-l { transform: rotate(-30deg); }
.flinch .ear-r { transform: rotate(30deg); }
.impact { opacity: 0; }
.flinch .impact { animation: impact .34s ease-out; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scaleY(1.022) scaleX(1.006); }
}
@keyframes blink {
  0%, 93.5%, 100% { transform: translateY(calc(var(--lid) * 26px)) rotate(var(--lr, 0deg)); }
  95.5%, 97.5% { transform: translateY(30px) rotate(0deg); }
}
@keyframes twitch {
  0%, 90%, 100% { transform: rotate(0deg); }
  92.5% { transform: rotate(-7deg); }
  95% { transform: rotate(3deg); }
}
@keyframes drip {
  0% { transform: translateY(0) scale(.55); opacity: 0; }
  18% { transform: translateY(3px) scale(1); opacity: .95; }
  75% { opacity: .95; }
  100% { transform: translateY(48px) scale(1); opacity: 0; }
}
@keyframes flinch {
  0% { transform: none; }
  22% { transform: translate(-8px, 2px) rotate(-2.4deg) scaleY(.95); }
  48% { transform: translate(7px, 1px) rotate(1.8deg) scaleY(.97); }
  74% { transform: translate(-3px, 0); }
  100% { transform: none; }
}
@keyframes impact {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .onca-breathe, .lid, .ear-in,
  .sahur-sway, .bat-arm, .egg-arm, .slid, .pupil { animation: none !important; }
}

/* FATD: castigo de autoclicker */
#fatd-banner {
  background: #7a1f1f; border: 2px solid #e07a6a; color: #ffe9e2;
  border-radius: 10px; padding: 10px 14px; font-weight: 700;
  margin-bottom: 10px; text-align: center;
}
#fatd-banner[hidden] { display: none; }
#fatd-desconto { font-size: .85rem; color: #e8a33d; margin: -4px 0 10px; }
#fatd-desconto[hidden] { display: none; }
.fatds-badge { color: #e8a33d; font-weight: 700; margin-left: 6px; }

/* barra de frequência de clique (risco de FATD) */
#freq { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .9rem; }
#freq .track { flex: 1; height: 10px; background: #0d1f14; border: 1px solid #2c4a36; border-radius: 99px; overflow: hidden; }
#freq-fill { height: 100%; width: 0; background: #7ec96a; border-radius: 99px; transition: width .15s linear, background .3s; }
#freq-fill.warn { background: #e8a33d; }
#freq-fill.danger { background: #e05a4a; }
#freq-val { min-width: 48px; text-align: right; }

/* ================= O SAHUR ================= */
#sahur { display: none; }
#onca-slot.sahur #onca { display: none; }
/* inline-block: o slot centraliza via text-align (block encostaria à esquerda) */
#onca-slot.sahur #sahur { display: inline-block; }

/* Parâmetros por humor do sahur (ferocidade 0-20 em faixas de 4):
   sbrow positivo = deboche, negativo = desespero */
.smood-1 { --sbrow: 9deg;   --eggdur: 1.3s; --swaydur: 2.6s; }
.smood-2 { --sbrow: 4deg;   --eggdur: 1.8s; --swaydur: 3.2s; }
.smood-3 { --sbrow: -7deg;  --eggdur: 2.6s; --swaydur: 4s;   filter: saturate(.88); }
.smood-4 { --sbrow: -13deg; --eggdur: 3.6s; --swaydur: 4.8s; filter: saturate(.7) brightness(.93); }
.smood-5 { --sbrow: -19deg; --eggdur: 0s;   --swaydur: 5.6s; filter: saturate(.5) brightness(.86); }

/* balanço do corpo + braços vivos (taco batucando, berinjela acenando) */
.sahur-sway { transform-origin: 180px 332px; animation: sway var(--swaydur, 3.4s) ease-in-out infinite; }
.bat-arm { transform-origin: 126px 185px; animation: batbob 2.8s ease-in-out infinite; }
.egg-arm { transform-origin: 234px 178px; animation: eggwave var(--eggdur, 1.8s) ease-in-out infinite; }
/* arregado: braços murcham, berinjela desce */
.smood-5 .egg-arm { animation: none; transform: rotate(28deg); transition: transform .6s; }
.smood-5 .bat-arm { animation: none; transform: rotate(9deg); transition: transform .6s; }

/* sobrancelhas por humor (classes próprias: .brow-l/.brow-r são da onça) */
.sbrow-l { transform-origin: 128px 122px; transform: rotate(var(--sbrow, 0deg)); transition: transform .5s; }
.sbrow-r { transform-origin: 232px 122px; transform: rotate(calc(var(--sbrow, 0deg) * -1)); transition: transform .5s; }

/* bocas: uma por humor */
.smouth > g { visibility: hidden; }
.smood-1 .sm1, .smood-2 .sm2, .smood-3 .sm3, .smood-4 .sm4, .smood-5 .sm5 { visibility: visible; }

/* lágrimas nos humores tristes (reusa o drip da onça) */
.smood-4 .tear-l1 { animation: drip 1.8s ease-in infinite; }
.smood-4 .tear-r1 { animation: drip 1.8s ease-in .8s infinite; }
.smood-5 .tear-l1 { animation: drip 1.1s ease-in infinite; }
.smood-5 .tear-r1 { animation: drip 1.1s ease-in .5s infinite; }

/* olhos: piscada + olhar passeando (.slid evita a regra .lid da onça) */
.slid { animation: sblink 4.6s infinite; }
.eye-r .slid { animation-delay: .08s; }
.pupil { animation: dart 7s ease-in-out infinite; }
#sahur.flinch .slid { animation: none; transform: translateY(48px); }

@keyframes sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
@keyframes batbob {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
}
@keyframes eggwave {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(-15deg); }
}
@keyframes sblink {
  0%, 93.5%, 100% { transform: translateY(0); }
  95.5%, 97.5% { transform: translateY(48px); }
}
@keyframes dart {
  0%, 22%, 100% { transform: none; }
  27%, 43% { transform: translateX(4px); }
  48%, 64% { transform: translateX(-3.5px); }
  69%, 90% { transform: none; }
}

/* barra de fúria do sahur (fase) */
#battle.sahur #battle-fill { background: #7d3bbd; }

/* balão de fala do sahur apanhando */
#sahur-balloon {
  position: absolute; left: calc(50% + 80px); top: 60px;
  max-width: min(215px, 40vw);
  background: #f7f2e2; color: #1b1b21;
  border: 3px solid #46280e; border-radius: 14px;
  padding: 10px 14px; font-weight: 700; font-size: .95rem; line-height: 1.3;
  animation: balloon-pop .18s ease-out;
  z-index: 5; pointer-events: none;
}
#sahur-balloon[hidden] { display: none; }
#sahur-balloon::after {
  content: ''; position: absolute; left: 18px; bottom: -14px;
  border: 8px solid transparent; border-top: 12px solid #46280e;
}
#sahur-balloon::before {
  content: ''; position: absolute; left: 21px; bottom: -8px;
  border: 5px solid transparent; border-top: 9px solid #f7f2e2; z-index: 1;
}
@keyframes balloon-pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Modal de lore ---- */
#lore-modal {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; background: #0a1a0fe6;
  padding: 16px;
}
#lore-modal[hidden] { display: none; }
.lore-card {
  background: #10241a; border: 1px solid #e8a33d; border-radius: 14px;
  max-width: 440px; padding: 24px; display: flex; flex-direction: column;
  gap: 12px; text-align: center;
}
.lore-card h2 { font-size: 1.2rem; }
.lore-card p { line-height: 1.55; opacity: .92; }
.lore-footer { font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }