/* Frag Daily — home do hub. Estiliza o markup gerado por src/shell/home.js.
   Auto-contido: redeclara o punhado de design tokens que usa, com os MESMOS valores hex de
   styles/main.css (consistência visual entre hub e jogo). DÍVIDA conhecida: tokens duplicados
   entre main.css e hub.css — extrair para styles/tokens.css depois (ver openIssues). */
:root {
  --bg: #0c0e14;
  --bg2: #141822;
  --panel: #1a1f2b;
  --panel2: #222837;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #eef1f7;
  --muted: #8a93a6;
  --accent: #ff5c39;       /* laranja CS — SÓ acento/CTA */
  --accent2: #ffb020;
  --radius: 14px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 20px rgba(0, 0, 0, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
html, body { min-height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1a2030 0%, var(--bg) 60%);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent2); }

#app { width: 100%; max-width: 880px; margin: 0 auto; padding: 48px 16px 24px; flex: 1; }

/* foco visível para teclado (WCAG 2.4.7) */
:focus-visible { outline: 2px solid #4aa8ff; outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- cabeçalho do hub ---------- */
.hub-head { text-align: center; margin-bottom: 40px; }
.hub-title {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.05;
}
.hub-tag { color: var(--muted); font-size: 16px; margin-top: 10px; text-wrap: balance; }
.hub-reset { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hub-streak {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--accent2);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- grid de cards ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- card de jogo ---------- */
.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg2) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
/* card LIVE: clicável, hover com destaque sutil (borda acentuada, leve elevação) */
a.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 92, 57, .45);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 92, 57, .25);
}
a.game-card:active { transform: translateY(-1px); }

/* card SOON: apagado, sem destaque, não interativo */
.game-card.is-soon {
  opacity: .5;
  background: var(--bg2);
  cursor: not-allowed;
}

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-name { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }

.card-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.card-badge.soon { background: var(--panel2); color: var(--muted); }
.card-badge.done { background: rgba(54, 211, 153, .15); color: #36d399; }

/* chip de cadência (sempre visível no head): diário (reseta 1×/dia) vs livre (jogue à vontade) */
.card-cadence {
  font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
}
.card-cadence.daily { background: rgba(255, 176, 32, .14); color: var(--accent2); }
.card-cadence.free { background: rgba(74, 168, 255, .14); color: #6fb4ff; }

.card-blurb { color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.card-streak { color: var(--accent2); font-weight: 700; font-size: 14px; }

/* ---------- rodapé ---------- */
.hub-foot {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 16px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.hub-foot span { display: block; }
.hub-foot a { color: var(--muted); text-decoration: underline; }
.hub-foot a:hover { color: var(--text); }
/* Ko-fi: doação (Camada 0) — destacado em laranja-CTA, acima do disclaimer. */
.hub-foot-kofi { margin-bottom: 8px; }
.hub-foot-kofi a { color: var(--accent, #ff5c39); font-weight: 600; text-decoration: none; }
.hub-foot-kofi a:hover { text-decoration: underline; color: var(--accent, #ff5c39); }