/* Pixel Quest Fitness — estilos base (pixel art 32 bits) */
:root {
  --bg: #14102a;
  --deep: #0b0820;
  --panel: #221b45;
  --panel-hi: #3a2f6e;
  --panel-lo: #17122f;
  --text: #f4ecd8;
  --muted: #b9b0d9;
  --faint: #8f87b3;
  --gold: #ffcc33;
  --gold-hi: #fff1b8;
  --gold-lo: #c9921a;
  --green: #4ade80;
  --cyan: #5ee7ff;
  --red: #ff5a5a;
  --purple: #b07cff;
  --orange: #ff9f43;
  --font-title: 'Silkscreen', 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
  --px: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.15;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}
body.readable { --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.4; }
body.high-contrast { --muted: #e6e0ff; --faint: #cfc8f0; --panel: #000; --panel-hi: #fff; }

button, input, select { font: inherit; color: inherit; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { min-height: 100vh; background: var(--bg); max-width: 1180px; margin: 0 auto; }
.boot { min-height: 100vh; display: grid; place-items: center; font-family: var(--font-title); font-size: 18px; color: var(--gold); }

/* ---------- Componentes ---------- */
.h1 { font-family: var(--font-title); font-size: 21px; margin: 0; line-height: 1.5; }
.h2 { font-family: var(--font-title); font-size: 15px; margin: 0; color: var(--muted); line-height: 1.6; }
.label { font-family: var(--font-title); font-size: 14px; color: var(--muted); letter-spacing: .02em; }
.muted { color: var(--muted); }
.small { font-size: 17px; color: var(--faint); }

.panel {
  background: var(--panel);
  border: var(--px) solid #000;
  box-shadow: inset var(--px) var(--px) 0 var(--panel-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--panel-lo);
  padding: 14px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  font-family: var(--font-title); font-size: 15px; text-decoration: none;
  background: var(--panel); color: var(--muted);
  border: var(--px) solid #000; cursor: pointer;
  box-shadow: inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--panel-lo), inset var(--px) var(--px) 0 var(--panel-hi);
  transition: transform .05s steps(1);
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--gold); color: var(--deep); box-shadow: inset -4px -4px 0 var(--gold-lo), inset 4px 4px 0 var(--gold-hi); }
.btn.danger { background: var(--red); color: var(--deep); box-shadow: inset -4px -4px 0 #b8323a, inset 4px 4px 0 #ffb0a8; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: progress; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date], .field input[type=number] {
  height: 44px; padding: 0 10px; background: var(--deep); border: 3px solid var(--panel-hi); color: var(--text); font-size: 22px;
}
.field input:focus { border-color: var(--cyan); outline: none; }
.field .err { color: var(--red); font-size: 18px; min-height: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 19px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--green); flex: none; margin-top: 2px; }

.bar { height: 16px; background: #000; border: 2px solid var(--panel-hi); position: relative; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c, var(--gold));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.35); transition: width .5s steps(10); }

.tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.tabs button { min-height: 44px; border: 3px solid #000; background: var(--panel); color: var(--muted); font-family: var(--font-title); font-size: 14px; cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--gold); color: var(--deep); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--panel); border: 4px solid var(--red); padding: 10px 16px; max-width: 90vw; animation: pop .25s steps(4); }

/* ---------- Acceso ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.logo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.logo .title { font-family: var(--font-title); font-size: 33px; color: var(--gold); text-shadow: 3px 3px 0 var(--gold-lo), 6px 6px 0 #000; line-height: 1.3; }
.logo canvas { animation: bob 1.4s steps(2) infinite; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

/* ---------- Creador de personaje ---------- */
.creator { padding: 20px 16px 32px; display: grid; gap: 18px; grid-template-columns: minmax(0,1fr); }
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pedestal { width: 100%; max-width: 300px; aspect-ratio: 1; display: grid; place-items: end center; padding-bottom: 28px; position: relative;
  background: var(--panel); border: 4px solid #000; box-shadow: inset 4px 4px 0 var(--panel-hi), inset -4px -4px 0 var(--panel-lo); }
.pedestal::after { content: ''; position: absolute; bottom: 20px; width: 50%; height: 10px; background: rgba(0,0,0,.4); }
.pedestal canvas { position: relative; z-index: 1; animation: bob 1.4s steps(2) infinite; }
.opt-group { display: flex; flex-direction: column; gap: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { min-height: 44px; min-width: 44px; padding: 0 12px; border: 3px solid #000; background: var(--panel-lo); color: var(--muted); cursor: pointer; font-size: 19px; }
.opt[aria-pressed=true] { background: var(--gold); color: var(--deep); }
.swatch { width: 44px; height: 44px; border: 3px solid #000; cursor: pointer; background: var(--sw); box-shadow: inset -4px -4px 0 rgba(0,0,0,.3); padding: 0; }
.swatch[aria-pressed=true] { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Hoy ---------- */
.home { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; min-height: 100vh; }
.hud { display: flex; gap: 12px; align-items: center; padding: 16px; background: var(--deep); border-bottom: 4px solid var(--panel-hi); position: sticky; top: 0; z-index: 5; }
.hud .portrait { width: 64px; height: 72px; display: grid; place-items: end center; background: var(--panel); border: 4px solid #000; box-shadow: inset 4px 4px 0 var(--panel-hi); flex: none; }
.hud .portrait canvas { animation: bob 1.6s steps(2) infinite; }
.hud .info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hud .line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lvl { font-family: var(--font-title); font-size: 16px; color: var(--gold); }
.gold { color: var(--gold); font-size: 20px; }
.main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.side { display: none; }

.quest { display: flex; gap: 12px; align-items: flex-start; }
.quest .ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--panel-lo); border: 3px solid #000; }
.quest .body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.quest .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.quest .name { font-family: var(--font-title); font-size: 15px; line-height: 1.5; }
.quest .xp { color: var(--gold); font-size: 19px; white-space: nowrap; }
.quest.done { opacity: .75; }
.quest.done .name::after { content: ' ✓'; color: var(--green); }
.empty { text-align: center; padding: 24px; color: var(--muted); }

.float-xp { position: fixed; z-index: 40; font-family: var(--font-title); font-size: 21px; color: var(--gold); text-shadow: 3px 3px 0 #000; pointer-events: none; animation: floatUp 1.2s steps(10) forwards; }

/* ---------- Subida de nivel ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(11,8,32,.92); display: grid; place-items: center; overflow: hidden; padding: 24px 16px; }
.overlay .rays { position: absolute; left: 50%; top: 42%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(rgba(255,204,51,.12) 0deg 8deg, transparent 8deg 20deg); animation: spin 14s steps(70) infinite; }
.overlay .flash { position: absolute; inset: 0; background: #fff; animation: flash .5s steps(4) forwards; }
.levelup { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.levelup .kicker { font-family: var(--font-title); font-size: 16px; color: var(--muted); animation: rise .4s steps(6) .3s both; }
.levelup .big { font-family: var(--font-title); font-size: clamp(30px, 11vw, 60px); line-height: 1.1; color: var(--gold); text-shadow: 4px 4px 0 var(--gold-lo), 8px 8px 0 #000; animation: drop .7s steps(10) .4s both; }
.levelup canvas { animation: rise .5s steps(6) .8s both, glow 1.2s steps(4) 1.3s infinite; }
.levelup .panel { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; animation: rise .4s steps(6) 1.1s both; }
.levelup .btn { animation: rise .4s steps(6) 1.4s both; }
.spark { position: absolute; width: var(--s); height: var(--s); background: var(--c); left: var(--x); top: var(--y); animation: floatUp var(--d) steps(10) var(--dl) infinite; }

.blink { animation: blink 1s steps(1) infinite; }

@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pop { 0% { transform: translateX(-50%) scale(.7); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes floatUp { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes drop { 0% { transform: translateY(-120px) scale(2); opacity: 0; } 60% { transform: translateY(8px) scale(1); } 100% { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes glow { 50% { filter: drop-shadow(0 0 10px var(--gold)); } }

/* ---------- PC ---------- */
@media (min-width: 900px) {
  .creator { grid-template-columns: 340px minmax(0,1fr); align-items: start; padding: 40px 32px; }
  .stage { position: sticky; top: 24px; }
  .home { grid-template-columns: 300px minmax(0,1fr); }
  .hud { grid-column: 1 / -1; }
  .side { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 16px 16px; }
  .side .pedestal { max-width: none; }
  .mobile-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition: none !important; }

/* ---------- Forja, plan, jefes y combate ---------- */
.page { padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 10px; border: 3px solid #000; background: var(--panel-lo); color: var(--muted); cursor: pointer; font-size: 19px; }
.chip[aria-pressed=true] { background: var(--cyan); color: var(--deep); }
.err[role=alert] { color: var(--red); margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.big-num { font-size: 34px; color: var(--c, var(--text)); line-height: 1; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.proposal { display: flex; flex-direction: column; gap: 6px; border-color: var(--c); animation: slideIn .35s steps(5) both; animation-delay: var(--delay); }
.proposal .top, .plan .top, .boss .top, .battle .top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.proposal .name { font-family: var(--font-title); font-size: 18px; color: var(--c); }
.callout { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border-color: var(--red); }
.plan { display: flex; flex-direction: column; gap: 8px; }
.plan .row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.plan .btn { font-size: 12px; padding: 0 8px; }
.boss { display: flex; flex-direction: column; gap: 8px; background: #2a0f1e; box-shadow: inset 4px 4px 0 #5a1f3a, inset -4px -4px 0 #1a0812; }
.boss.ready { animation: pulse 1s steps(2) infinite; }
.boss-row { display: flex; gap: 12px; align-items: center; }
.boss-sprite canvas { animation: squish .9s steps(2) infinite; transform-origin: bottom center; }
.boss-info { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.boss .name, .battle .name { font-family: var(--font-title); font-size: 15px; }
details.workout summary { cursor: pointer; color: var(--cyan); }
details.workout ol { margin: 6px 0 0; padding-left: 22px; color: var(--muted); font-size: 19px; }
.modal { width: 100%; max-width: 420px; position: relative; }
.forging { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 340px; }
.forging .anvil { width: 120px; height: 120px; }
.forging .spark { position: absolute; top: 34px; width: 8px; height: 8px; background: var(--gold); animation: floatUp .5s steps(4) infinite; }
.forging .s1 { left: 42%; } .forging .s2 { left: 56%; background: var(--orange); animation-delay: .2s; }
.segbar { width: 280px; height: 22px; background: #000; border: 3px solid var(--panel-hi); display: flex; gap: 2px; padding: 2px; }
.segbar i { flex: 1; background: var(--panel-lo); }
.segbar i.on { background: var(--gold); }
.battle { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.arena { position: relative; height: 260px; background: #2a1f55; border: 4px solid #000; border-bottom: 40px solid #3b2a1a; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 20px; overflow: hidden; }
.battle-hero canvas, .battle-boss canvas { display: block; }
.battle.hit .battle-hero, .battle.crit .battle-hero { animation: lunge .6s steps(6); }
.battle.hit .battle-boss, .battle.crit .battle-boss { animation: hurt .5s steps(5) .25s; }
.battle.crit .arena { animation: quake .4s steps(4) .3s; }
.battle.boss-turn .battle-boss { animation: blunge .6s steps(6); }
.battle-boss.dead { animation: die 1.2s steps(8) forwards !important; }
.battle-dmg { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font-family: var(--font-title); font-size: 24px; color: var(--gold); text-shadow: 3px 3px 0 #000; }
.battle.hit .battle-dmg, .battle.crit .battle-dmg, .battle.boss-turn .battle-dmg { animation: floatUp 1.2s steps(8) .3s both; }
.battle-log { margin: 0; min-height: 52px; }
@keyframes slideIn { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { box-shadow: inset 4px 4px 0 #ff5a5a, inset -4px -4px 0 #1a0812; } }
@keyframes squish { 50% { transform: scale(1.06, .94); } }
@keyframes lunge { 40%, 55% { transform: translateX(120px); } }
@keyframes blunge { 40%, 55% { transform: translateX(-120px); } }
@keyframes hurt { 20%, 60% { transform: translateX(8px); filter: brightness(4); } 40%, 80% { transform: translateX(-8px); } }
@keyframes quake { 25% { transform: translate(-6px, 4px); } 50% { transform: translate(6px, -4px); } 75% { transform: translate(-4px, -2px); } }
@keyframes die { 30% { filter: brightness(5); } 100% { transform: scale(1.6, 0); opacity: 0; filter: brightness(5); } }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------- Menús ---------- */
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu > .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu > .top .btn { font-size: 12px; min-height: 40px; }
.macros { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px; }
.macro { display: flex; flex-direction: column; gap: 3px; }
.macro .bar { height: 10px; }
.meal { display: flex; flex-direction: column; gap: 6px; }
.meal .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.meal .name { font-family: var(--font-title); font-size: 15px; color: var(--gold); }
.meal.done { opacity: .7; }
.meal .items { margin: 0; padding-left: 20px; color: var(--muted); font-size: 19px; }
.meal .items .complement { color: var(--cyan); }
.meal .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.meal .actions .btn { min-height: 44px; font-size: 12px; }
.alt-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.opt.alt { text-align: left; padding: 8px 12px; }
.shop-group { display: flex; flex-direction: column; gap: 6px; }
.shop-item.done span { text-decoration: line-through; color: var(--faint); }
@media (min-width: 900px) { .macros { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---------- Navegación y social ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  background: var(--deep); border-top: 4px solid var(--panel-hi); padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { min-height: 56px; background: none; border: 0; color: var(--muted); font-family: var(--font-title); font-size: 13px; cursor: pointer; }
.tabbar button.on { background: var(--gold); color: var(--deep); }
.with-nav { padding-bottom: 80px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.player { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 2px solid var(--panel-lo); }
.player:last-child { border-bottom: 0; }
.player.me { background: rgba(255, 204, 51, .08); }
.player .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.player .name { font-family: var(--font-title); font-size: 14px; }
.player .points { color: var(--gold); white-space: nowrap; }
.player .rank { font-family: var(--font-title); font-size: 14px; width: 34px; color: var(--muted); }
.player.zone-promote .rank { color: var(--green); }
.player.zone-demote .rank { color: var(--red); }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions .btn { min-height: 40px; min-width: 40px; padding: 0 10px; font-size: 12px; }
.mini-avatar { width: 36px; height: 46px; display: grid; place-items: end center; background: var(--panel-lo); border: 2px solid #000; flex: none; }
.search { display: flex; gap: 8px; }
.search input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; background: var(--deep); border: 3px solid var(--panel-hi); color: var(--text); font-size: 20px; }
.search .btn { font-size: 12px; }
.feed-item { display: flex; align-items: center; gap: 10px; }
.feed-item .who { flex: 1; display: flex; flex-direction: column; }
.btn.kudos { min-height: 40px; font-size: 13px; }
.btn.kudos.on { background: var(--gold); color: var(--deep); }
.role { font-family: var(--font-title); font-size: 11px; color: var(--muted); }
.role-leader { color: var(--gold); }
.chat { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; background: var(--deep); border: 3px solid var(--panel-lo); padding: 8px; }
.chat p { margin: 0; }
.chat .system { color: var(--cyan); font-style: italic; }
.quest-coop { display: flex; flex-direction: column; gap: 6px; }
.quest-coop .top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tier { display: flex; flex-direction: column; align-items: center; gap: 6px; border-color: var(--c); }
.tier-name { font-family: var(--font-title); font-size: 34px; color: var(--c); text-shadow: 3px 3px 0 #000; }
@media (min-width: 900px) { .tabbar { max-width: 1180px; margin: 0 auto; border: 4px solid var(--panel-hi); border-bottom: 0; } }