/* =========================================================
   MONSTER GYM — Monster Match, Comida e Corpo
   ========================================================= */

/* ---------- Monster Match ---------- */
.game { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: calc(var(--safe-top) + 12px) 14px calc(var(--safe-bottom) + 16px);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--gm) 70%, #fff 0%) 0%, color-mix(in srgb, var(--gm) 60%, #221726) 100%); color: #fff; }
.game-top { display: flex; align-items: center; gap: 10px; }
.game-timer { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); border-radius: 16px; padding: 4px 12px 4px 4px; color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 46px; }
.game-timer .mon { width: 36px; height: 40px; }
.game-timer.urgent { background: #E5484D; animation: btn-pulse .8s ease-in-out infinite; }
.game-goal { background: rgba(0,0,0,.22); border-radius: 20px; padding: 12px 14px; }
.gm-label { font-size: .92rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.gm-inline { width: 30px; height: 30px; }
.gm-stat { text-align: center; min-width: 58px; }
.gm-stat b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.gm-stat span { font-size: .62rem; opacity: .8; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.game-goal .progress-bar { background: rgba(255,255,255,.2); }
.game-goal .progress-bar > div { background: #fff; }
.game-board-wrap { position: relative; width: min(100%, 440px, calc(100dvh - 330px)); margin: 0 auto; }
.game-board { position: relative; width: 100%; aspect-ratio: 1; background: rgba(0,0,0,.24); border-radius: 22px; overflow: hidden; touch-action: none; box-shadow: inset 0 4px 12px rgba(0,0,0,.25); }
.gt { position: absolute; left: 0; top: 0; width: calc(100% / 7); height: calc(100% / 7); padding: 2.5%; z-index: 1;
  transform: translate(calc(var(--c) * 100% + var(--dx, 0px)), calc(var(--r) * 100% + var(--dy, 0px)));
  transition: transform var(--dur, .26s) var(--ease, cubic-bezier(.34,1.56,.64,1)) var(--delay, 0s); touch-action: none; will-change: transform; }
.gt-in { display: block; width: 100%; height: 100%; transform-origin: 50% 85%; transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s; }
.gt svg { width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
.gt.dragging { transition: none; z-index: 3; }
.gt.lift { z-index: 3; }
.gt.lift .gt-in { transform: scale(1.16); filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.gt.sel { z-index: 2; }
.gt.sel .gt-in { animation: gt-sel 1s ease-in-out infinite; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)); }
@keyframes gt-sel { 0%, 100% { transform: scale(1.12) rotate(-4deg); } 50% { transform: scale(1.2) rotate(4deg); } }
.gt.squash .gt-in { animation: gt-squash .3s ease; }
@keyframes gt-squash { 30% { transform: scale(1.18, .86); } 65% { transform: scale(.94, 1.08); } }
.gt.nope .gt-in { animation: gt-nope .38s ease; }
@keyframes gt-nope { 20% { transform: translateX(-9%) rotate(-8deg); } 40% { transform: translateX(8%) rotate(7deg); } 60% { transform: translateX(-6%) rotate(-5deg); } 80% { transform: translateX(4%) rotate(3deg); } }
.gt.match .gt-in { transform: scale(1.22); filter: brightness(1.7) drop-shadow(0 0 10px rgba(255,255,255,.95)); }
.gt.pop .gt-in { animation: gt-pop .2s ease-in forwards; }
@keyframes gt-pop { 0% { transform: scale(1.22); } 100% { transform: scale(0) rotate(25deg); opacity: 0; } }
.gt.land .gt-in { animation: gt-land .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes gt-land { 0% { transform: scale(1.14, .8); } 55% { transform: scale(.95, 1.06); } 100% { transform: none; } }
.gt.spawn { transition: none; }
.gt.enter .gt-in { animation: gt-enter .5s cubic-bezier(.3,1.6,.5,1) var(--delay, 0s) both; }
@keyframes gt-enter { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
.gt.hint .gt-in { animation: gt-hint 1.1s ease-in-out infinite; }
@keyframes gt-hint { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-10deg) scale(1.08); } 85% { transform: rotate(10deg) scale(1.08); } }
.game-board.shake { animation: board-shake .35s ease; }
.game-board.shake-big { animation: board-shake-big .42s ease; }
@keyframes board-shake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px) translateY(-1px); } 75% { transform: translateX(-2px); } }
@keyframes board-shake-big { 15% { transform: translate(-6px, 2px) rotate(-.6deg); } 35% { transform: translate(6px, -3px) rotate(.6deg); } 55% { transform: translate(-4px, 2px); } 75% { transform: translate(3px, -1px); } }
.game-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.game-fx .pt { position: absolute; width: var(--sz, 7px); height: var(--sz, 7px); border-radius: 50%; background: var(--pc); box-shadow: 0 0 6px var(--pc); transform: translate(-50%, -50%); animation: pt .62s cubic-bezier(.15,.75,.35,1) forwards; }
.game-fx .pt.star { border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
@keyframes pt { 0% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; } }
.game-fx .ringfx { position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--pc); transform: translate(-50%, -50%) scale(.2); animation: ringfx .6s ease-out forwards; }
@keyframes ringfx { 0% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(calc(2.4 * var(--rs, 1))); opacity: 0; border-width: 1px; } }
.game-fx .cf { position: absolute; top: -6%; width: 8px; height: 13px; border-radius: 2px; background: var(--pc); animation: cf 1.5s cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes cf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 115%) rotate(var(--r)); opacity: 0; } }
.gm-float { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); white-space: nowrap; animation: gm-float 1s cubic-bezier(.2,.8,.3,1) forwards; }
.gm-float.big { font-size: 1.5rem; color: #FFE45C; }
@keyframes gm-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.combo-banner { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 1px; white-space: nowrap; color: #fff;
  text-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 24px rgba(255,255,255,.6); animation: combo-in 1.25s cubic-bezier(.2,1.4,.4,1) forwards; }
.combo-banner.lv3 { color: #FFE45C; }
.combo-banner.lv4 { color: #8EF2FF; font-size: 2.9rem; }
.combo-banner.lv5 { background: linear-gradient(90deg, #FFE45C, #FF8AD1, #8EF2FF, #C7F25C); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 3.1rem; }
@keyframes combo-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); } 30% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); } 80% { opacity: 1; transform: translate(-50%, -58%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -75%) scale(.9); } }
.game-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: rgba(20,12,22,.55); border-radius: 22px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.gp-card { background: var(--surface); color: var(--ink); border-radius: 26px; padding: 18px; text-align: center; width: 100%; max-width: 330px; box-shadow: var(--shadow-lg), inset 0 -5px 0 var(--lip); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.gp-card .mon { width: 104px; height: 116px; margin: 0 auto; }
.gp-card h2 { margin: 6px 0 4px; }
.gp-card p { color: var(--muted); font-size: .88rem; margin: 0 0 14px; line-height: 1.45; }
.gp-stars { font-size: 2rem; letter-spacing: 4px; color: var(--surface-3); }
.gp-stars .on { color: #FFC21A; }
.game-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }

/* ---------- Comida ---------- */
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.day-nav b { font-size: .95rem; }
.kcal-hero { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.kcal-hero .ring { width: 120px; height: 120px; }
.kcal-hero .ring .center b { font-size: 1.5rem; display: block; letter-spacing: -.5px; }
.meal-card + .meal-card { margin-top: 12px; }
.meal-head { display: flex; align-items: center; gap: 12px; }
.meal-ic { width: 40px; height: 40px; border-radius: 14px; background: var(--cc); display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); flex-shrink: 0; }
.meal-ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.food-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; width: 100%; text-align: left; }
.food-row + .food-row { border-top: 1px solid var(--line); }
.food-row .t { font-weight: 700; font-size: .9rem; }
.food-row .s { font-size: .74rem; color: var(--muted); margin-top: 1px; }
.src { display: inline-flex; align-items: center; font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.src.taco { background: color-mix(in srgb, var(--c-green) 18%, transparent); color: #078A6E; }
.src.off { background: color-mix(in srgb, var(--c-blue) 18%, transparent); color: #0C7CC4; }
.src.manual { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] .src.taco { color: var(--c-green); }
:root[data-theme="dark"] .src.off { color: var(--c-blue); }
.food-search { position: sticky; top: calc(var(--safe-top) + 64px); z-index: 4; }
.nutri-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.nutri-grid div { background: var(--surface-2); border-radius: 14px; padding: 10px 4px; }
.nutri-grid b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.nutri-grid span { font-size: .62rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.qty-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; padding: 14px 4px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--c-orange); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Corpo ---------- */
.measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mchip { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow), inset 0 -3px 0 var(--lip); text-align: left; }
.mchip.on { box-shadow: 0 0 0 2.5px var(--c-purple), var(--shadow); }
.mchip span { font-size: .72rem; color: var(--muted); font-weight: 700; }
.mchip b { font-size: 1.1rem; }
.mchip em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--muted); }
.bf-hero { text-align: center; }
.bf-hero .big { font-size: 3rem; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.disclaimer { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 16px; padding: 12px; font-size: .78rem; color: var(--ink-2); line-height: 1.5; }
.disclaimer svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--c-blue); fill: none; stroke-width: 2.2; margin-top: 1px; }
.howto li { margin-bottom: 8px; }