/* Recreo: una columna angosta pensada para el celular. Moderno: tarjetas redondeadas, letra redondeada en los
   títulos y un solo color fuerte (el amarillo del sol) para lo que hay que tocar.
   Claro por defecto (pedido del dueño) y modo oscuro con el botón de la luna (html[data-theme="dark"]).
   Los juegos no cambian con el tema: dibujan su propio fondo. */
:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #efece5;
  --surface-3: #e2ded4;
  --line: rgba(27, 29, 46, .08);
  --text: #1b1d2e;
  --muted: #676b82;
  --sol: #ffc83d;
  --sol-ink: #2a1d00;
  --sol-text: #a46a00;          /* el amarillo como texto: sobre fondo claro tiene que ser más oscuro para leerse */
  --celeste: #1f74c4;
  --trial-bg: #e6f1fc;
  --verde: #1b9a57;
  --rojo: #d64545;
  --sombra: rgba(30, 32, 60, .18);
  --appbar: rgba(246, 244, 239, .86);
  --bg-fade: rgba(246, 244, 239, 0);
  --glow-a: rgba(116, 192, 255, .2);
  --glow-b: rgba(255, 200, 61, .18);
  --card-shadow: 0 1px 2px rgba(27, 29, 46, .05), 0 6px 18px rgba(27, 29, 46, .06);
  --hi: #fff1c9;                /* tarjeta destacada (el juego de hoy): un amarillo muy suave */
  --sol-edge: #dc9f00;          /* el canto de los botones (relieve que se hunde al tocar, estilo videojuego) */
  --edge: #d6d1c4;
  --r: 20px;
  --f-display: 'Fredoka', 'Chivo', system-ui, sans-serif;
  --f-ui: 'Chivo', 'Segoe UI', system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0f1f;
  --surface: #181b33;
  --surface-2: #222645;
  --surface-3: #2c3159;
  --line: rgba(255, 255, 255, .08);
  --text: #f4f5ff;
  --muted: #9ea3c4;
  --sol-text: #ffc83d;
  --celeste: #74c0ff;
  --trial-bg: rgba(116, 192, 255, .13);
  --verde: #3fd98a;
  --rojo: #ff6b6b;
  --sombra: rgba(3, 4, 14, .55);
  --appbar: rgba(13, 15, 31, .82);
  --bg-fade: rgba(13, 15, 31, 0);
  --glow-a: rgba(116, 192, 255, .14);
  --glow-b: rgba(255, 200, 61, .08);
  --card-shadow: none;
  --hi: #222645;
  --sol-edge: #b98500;
  --edge: #12152a;
}
html { box-sizing: border-box; min-height: 100%; }
*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--glow-a), transparent 60%),
    radial-gradient(80% 40% at 100% 0%, var(--glow-b), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 var(--f-ui);
  -webkit-tap-highlight-color: transparent;
}
body.playing { overflow: hidden; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
a { color: var(--celeste); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center-text { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- estructura ---------- */
.screen {
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.screen.center { min-height: 100vh; min-height: 100dvh; justify-content: center; }
.screen.with-cta { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack.tight { gap: 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.loading { display: grid; place-items: center; gap: 14px; color: var(--muted); }
.loading .bell { width: 44px; height: 44px; color: var(--sol); animation: ring 1.2s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ring { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } }

/* barra de arriba */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  margin: calc(-10px - env(safe-area-inset-top, 0px)) -16px 0;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--appbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar .grow { flex: 1; min-width: 0; }
.appbar-title { font-family: var(--f-display); font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* marca */
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1; color: var(--text); letter-spacing: .01em; }
.logo svg { width: 1em; height: 1em; color: var(--sol); transform: rotate(-12deg); }
.logo.xl { font-size: 52px; gap: 12px; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero .tag { font-size: 17px; color: var(--muted); max-width: 30ch; }

/* ---------- piezas ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--card-shadow); }
.card.hi { background: linear-gradient(160deg, var(--hi), var(--surface)); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--celeste); }
.title { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1.05; }
.banner { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.banner::before { content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: var(--celeste); }
.banner.warn::before { background: var(--rojo); }
.banner.ok::before { background: var(--verde); }
.empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--surface-3); border-radius: var(--r); padding: 18px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: st; text-align: left; }
.steps li { display: flex; gap: 12px; align-items: flex-start; counter-increment: st; }
.steps li::before {
  content: counter(st); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--sol-text); font-family: var(--f-display); font-weight: 700; font-size: 15px;
}
.steps b { display: block; }
.steps.card { padding: 18px; }

label { font-weight: 700; font-size: 14px; }
input {
  width: 100%; min-width: 0; max-width: 100%; font: inherit; font-size: 17px; color: var(--text);
  background: var(--bg); border: 2px solid var(--surface-3); border-radius: 14px; padding: 13px 14px;
}
input:focus { outline: none; border-color: var(--celeste); }
input[readonly] { font-size: 13px; color: var(--muted); }

.btn {
  font: inherit; font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: .01em;
  cursor: pointer; text-decoration: none; text-align: center;
  min-height: 50px; padding: 12px 18px; border-radius: 16px; border: 0;
  background: var(--surface-2); color: var(--text);
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.primary { background: var(--sol); color: var(--sol-ink); box-shadow: 0 4px 0 var(--sol-edge), 0 8px 22px rgba(255, 200, 61, .25); }
.btn.ghost { background: transparent; color: var(--muted); box-shadow: none; }
.btn.wa { background: #1f9e55; color: #fff; box-shadow: 0 4px 0 #157a40; }
.btn.big { font-size: 19px; min-height: 58px; }
.btn.sm { font-size: 15px; min-height: 40px; padding: 8px 14px; border-radius: 12px; }
.btn:disabled { opacity: .55; cursor: default; }
/* al tocar, el botón se hunde sobre su canto */
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--sol-edge), 0 3px 10px rgba(255, 200, 61, .2); }
.btn.wa:active:not(:disabled) { box-shadow: 0 1px 0 #157a40; }
.btn.ghost:active:not(:disabled) { transform: scale(.98); box-shadow: none; }
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.08); } }
.link { font: inherit; font-size: 14px; font-weight: 700; color: var(--celeste); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.iconbtn {
  width: 42px; height: 42px; border-radius: 14px; cursor: pointer; padding: 0; flex: none;
  border: 0; background: var(--surface-2); color: var(--text); text-decoration: none;
  display: grid; place-items: center;
}
.iconbtn svg { width: 22px; height: 22px; }
.btn:focus-visible, .link:focus-visible, .iconbtn:focus-visible, a:focus-visible, .tab:focus-visible, summary:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

.avatar {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--surface-2); border: 0; color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; max-width: 50%;
}
.avatar i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--celeste); color: var(--bg); font-family: var(--f-display); font-weight: 700; }
.avatar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gicon { width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--bg); display: block; }
.gicon.sm { width: 40px; height: 40px; border-radius: 12px; }
.gicon.lg { width: 72px; height: 72px; border-radius: 20px; }
.gicon.xl { width: 104px; height: 104px; border-radius: 28px; box-shadow: 0 12px 30px var(--sombra); }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; }

.tries { display: flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); }
.dot.used { background: var(--sol); }
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.badge.go { background: rgba(255, 200, 61, .18); color: var(--sol-text); }
.badge.done { background: rgba(63, 217, 138, .13); color: var(--verde); }
.you { font-size: 11px; font-weight: 800; color: var(--bg); background: var(--celeste); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }

.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px; background: var(--verde); }

/* ---------- inicio ---------- */
.challenges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ch { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.ch-top { display: flex; align-items: center; gap: 14px; }
.ch-top > div { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ch-name { font-family: var(--f-display); font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-icon { width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-family: var(--f-display); font-size: 24px; }
.chev { color: var(--muted); font-size: 26px; line-height: 1; }

.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; height: 100%;
  box-shadow: var(--card-shadow);
}
.tile .gicon { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; }
.tile b { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; line-height: 1.15; padding: 0 2px; }
.tile .muted { padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.3; }
@media (hover: hover) { .tile:hover, .ch:hover { border-color: var(--surface-3); } }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; }

/* ---------- desafío ---------- */
.today { display: flex; flex-direction: column; gap: 16px; }
.today-head { display: flex; gap: 14px; align-items: center; }
.today-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.today-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.best { font-size: 14px; color: var(--muted); }
.best b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.tab { font: inherit; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--muted); background: transparent; border: 0; border-radius: 12px; padding: 9px 6px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--surface-3); color: var(--text); }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank li {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow);
}
.rank li.me { border-color: var(--celeste); }
.pos { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 14px; background: var(--surface-2); color: var(--muted); }
.pos.p1 { background: #ffc83d; color: #3a2a00; }
.pos.p2 { background: #c9d1e6; color: #20263a; }
.pos.p3 { background: #e0975a; color: #3a1d06; }
.rank .nm { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.rank .sc { font-family: var(--f-display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.rank .pts.unit { color: var(--muted); }
.rank .pts { font-size: 12.5px; font-weight: 700; color: var(--verde); text-align: right; font-variant-numeric: tabular-nums; min-width: 34px; }
.rank .sub { font-size: 12.5px; color: var(--muted); font-weight: 400; display: block; }

.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cal li {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0;
  padding: 10px 4px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.cal li .small { overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.25; }
.cal li.today { border: 2px solid var(--sol); }
.cal li.future { opacity: .5; }
.cal .q { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); font-family: var(--f-display); font-size: 20px; color: var(--muted); }

details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '›'; font-size: 26px; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .2s; }
details.card[open] > summary::after { transform: rotate(-90deg); }
details.card[open] > summary { margin-bottom: 14px; }

.winner { text-align: center; align-items: center; }
.winner .trophy { font-size: 56px; line-height: 1; }

/* ---------- reglas ---------- */
.rules-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 6px; }
.rules-hero .tag { color: var(--muted); font-size: 16px; }
.rulelist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: rl; }
.rulelist li { display: flex; gap: 12px; counter-increment: rl; }
.rulelist li::before { content: counter(rl); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--sol-text); font-family: var(--f-display); font-weight: 700; font-size: 13px; margin-top: 1px; }
.rulelist.plain li::before { content: '•'; background: none; color: var(--celeste); width: 12px; }
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--bg) 60%, var(--bg-fade));
}
.cta-bar > * { display: flex; max-width: 528px; margin: 0 auto; width: 100%; }

/* ---------- resultado ---------- */
.result { text-align: center; align-items: center; }
.final { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; }
.final span { font-family: var(--f-display); font-size: 84px; font-weight: 700; line-height: 1; color: var(--sol-text); font-variant-numeric: tabular-nums; }
.final small { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.result .banner { text-align: left; width: 100%; }
.result .btn { width: 100%; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px);
  background: var(--text); color: var(--bg); font-weight: 700; padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 10px 30px var(--sombra); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50;
  max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- pantalla de juego ---------- */
.game-screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 8px; background: var(--bg);
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.ghud { display: flex; align-items: center; gap: 10px; }
.gname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gname b { font-family: var(--f-display); font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gscore { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 14px; border-radius: 14px; background: var(--surface); min-width: 84px; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.val { font-family: var(--f-display); font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--sol-text); font-variant-numeric: tabular-nums; }
.game-box { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; border-radius: 16px; }
.game-cv { display: block; touch-action: none; }
.g-pill {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  padding: 11px 20px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(13, 15, 31, .88); color: #fff; border: 2px solid var(--sol);
  font-family: var(--f-display); font-weight: 600; font-size: 16px; animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.g-toast {
  position: absolute; left: 0; right: 0; top: 14%; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--f-display); font-weight: 700; font-size: 34px; color: var(--sol);
  text-shadow: 0 3px 0 #11132a, 0 0 18px #11132a;
}
.g-toast.show { animation: gtoast 1.2s ease-out forwards; }
@keyframes gtoast {
  0% { opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1.08); }
  30% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.fade-in { animation: fadein .25s ease-out both; }
/* solo opacidad: un transform en la pantalla haría que la barra fija de abajo (.cta-bar) se mueva con ella */
@keyframes fadein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .g-pill, .loading .bell { animation: none; }
  .fade-in { animation: none; }
  .g-toast.show { animation: gtoastfade 1.2s steps(1) forwards; }
  @keyframes gtoastfade { 0% { opacity: 1; } 100% { opacity: 0; } }
  .toast, .btn { transition: none; }
}

/* ---------- inicio estilo tarjetas grandes (cada desafío con el juego de hoy) ---------- */
.screen.with-tabbar { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gcard {
  display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 28px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow);
  transition: transform .1s;
}
.gcard:active { transform: scale(.985); }
.gbanner { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 2.3 / 1; background: var(--surface-2); }
.gbanner canvas { display: block; width: 100%; height: 100%; }
.gbanner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 45%); pointer-events: none; }
.gbanner.empty { background: linear-gradient(135deg, var(--celeste), #74c0ff 55%, var(--sol)); }
.gbanner-emoji { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 54px; opacity: .9; }
.ava-row { position: absolute; left: 14px; top: 50%; transform: translateY(-58%); display: flex; z-index: 1; }
.ava {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: .02em;
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.ava-row .ava + .ava { margin-left: -12px; }
.ava.more { background: rgba(0, 0, 0, .55); font-size: 14px; }
.ava.sm { width: 30px; height: 30px; font-size: 12px; border-width: 2px; box-shadow: none; }
.ava.xl { width: 88px; height: 88px; font-size: 32px; border-width: 4px; align-self: center; }
.gtimer, .gpill {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-display); font-weight: 600; font-size: 14px; border-radius: 999px; padding: 5px 11px;
}
.gtimer { left: 12px; bottom: 12px; background: rgba(15, 16, 30, .7); color: #fff; }
.gpill { right: 12px; bottom: 12px; background: rgba(255, 255, 255, .92); color: #1b1d2e; }
.gpill.go { background: var(--sol); color: var(--sol-ink); }
.gpill.done { background: rgba(255, 255, 255, .92); color: #1b7a47; }
.gfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; }
.gtext { display: flex; flex-direction: column; min-width: 0; }
.gname { font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsub { color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gstats { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.stat { background: #3d3f4f; color: #fff; border-radius: 999px; padding: 3px 11px; font-family: var(--f-display); font-weight: 700; font-size: 15px; white-space: nowrap; }

/* barra de abajo: Grupos / Perfil */
.tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: min(528px, calc(100% - 32px));
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 26px;
  background: var(--appbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: 0 8px 28px var(--sombra);
}
.tabbar-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 20px;
  color: var(--muted); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 16px;
}
.tabbar-btn svg { width: 24px; height: 24px; }
.tabbar-btn.on { background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); }
:root[data-theme="dark"] .tabbar-btn.on { background: var(--surface-3); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ---------- pantalla del desafío: juego de hoy, podio y tribuna ---------- */
.screen.with-composer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ghero { display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.gbanner.big { border-radius: 0; aspect-ratio: 1.9 / 1; }
.gbanner .gpill { top: 12px; bottom: auto; right: 12px; }
.ghero-body { padding: 16px 18px 18px; }
.mystats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mystats .tries { margin-left: auto; }

.podium-wrap { display: flex; flex-direction: column; gap: 10px; }
.podium { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-width: 0; }
.step .ava { width: 54px; height: 54px; font-size: 19px; }
.step.s1 .ava { width: 68px; height: 68px; font-size: 24px; border-color: var(--sol); }
.step.me .ava { box-shadow: 0 0 0 3px var(--celeste); }
.crown { position: absolute; top: -26px; font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.pname { font-weight: 700; font-size: 14px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pscore { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--muted); white-space: nowrap; }
.block {
  width: 100%; display: grid; place-items: center; margin-top: 4px; border-radius: 14px 14px 6px 6px;
  font-family: var(--f-display); font-weight: 700; font-size: 20px; color: #fff;
}
.s1 .block { height: 64px; background: linear-gradient(180deg, #ffd25e, #f0a800); color: #4a3300; }
.s2 .block { height: 46px; background: linear-gradient(180deg, #d9dfec, #aeb8cc); color: #2a3142; }
.s3 .block { height: 34px; background: linear-gradient(180deg, #ecae79, #c9793d); color: #3d1f07; }
.step.empty { visibility: hidden; }
.crack { text-align: center; font-size: 15px; background: var(--hi); border-radius: 16px; padding: 10px 14px; }

/* la tribuna */
.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { text-align: center; color: var(--muted); padding: 22px 10px; background: var(--surface); border: 1px dashed var(--surface-3); border-radius: 18px; }
.cmsg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.cmsg.cont { margin-top: -4px; }
.cmsg > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 78%; }
.cmsg time { font-size: 11px; color: var(--muted); flex: none; padding-bottom: 4px; }
.cname { font-size: 12px; font-weight: 700; color: var(--muted); padding-left: 10px; }
.ava-gap { width: 30px; flex: none; }
.bubble {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow);
  padding: 9px 13px; border-radius: 18px 18px 18px 6px; overflow-wrap: anywhere; line-height: 1.35;
}
.bubble.gif { padding: 4px; background: transparent; border: 0; box-shadow: none; }
.cgif { display: block; max-width: 220px; max-height: 200px; border-radius: 14px; }
.cmsg.me { flex-direction: row-reverse; }
.cmsg.me .bubble { max-width: 78%; background: var(--celeste); color: #fff; border-color: transparent; border-radius: 18px 18px 6px 18px; }
.cmsg.me .bubble.gif { background: transparent; }
.cmsg.ev { justify-content: center; gap: 8px; }
.cmsg.ev span { background: var(--hi); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; text-align: center; }
.cmsg.ev time { padding: 0; }

/* caja para escribir, fija abajo */
.composer {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(528px, calc(100% - 24px));
  display: flex; flex-direction: column; gap: 8px;
}
.composer-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 28px var(--sombra);
}
.composer-row input { border: 0; background: transparent; padding: 10px 0; font-size: 16px; }
.composer-row input:focus { border: 0; }
.gifbtn { font: inherit; font-family: var(--f-display); font-weight: 700; font-size: 13px; padding: 7px 10px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--text); cursor: pointer; }
.sendbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--sol); color: var(--sol-ink); flex: none; }
.sendbtn svg { width: 22px; height: 22px; }
.gifpanel { height: min(48vh, 380px); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 28px var(--sombra); border-radius: 22px; padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; }
/* filas de alto fijo: con aspect-ratio, la grilla se achicaba dentro del panel y las miniaturas se tapaban unas con otras */
.gifgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 104px; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.gifpick { padding: 0; border: 0; background: var(--surface-2); border-radius: 10px; overflow: hidden; cursor: pointer; height: 100%; }
.gifpick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.giphy { font-size: 11px; color: var(--muted); text-align: right; }

/* foto de perfil */
.ava.photo { background-size: cover; background-position: center; background-color: var(--surface-2); color: transparent; text-shadow: none; }
.ava-pick { position: relative; align-self: center; cursor: pointer; display: inline-block; }
.ava-cam { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 2px 8px var(--sombra); font-size: 16px; }
.row > label.btn { cursor: pointer; }

/* íconos del dueño: tira de 8 en assets/iconos.webp (la URL la pone app.js en --icons) */
.ic { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.3em; flex: none; background: var(--icons) 0 0 / 800% 100% no-repeat; }
.ic-racha { background-position: 0 0; }
.ic-puesto { background-position: calc(100% / 7) 0; }
.ic-podio { background-position: calc(200% / 7) 0; }
.ic-tribuna { background-position: calc(300% / 7) 0; }
.ic-intentos { background-position: calc(400% / 7) 0; }
.ic-tiempo { background-position: calc(500% / 7) 0; }
.ic-crack { background-position: calc(600% / 7) 0; }
.ic-nuevo { background-position: 100% 0; }
.ic.lg { width: 36px; height: 36px; vertical-align: middle; }
.ic.xl { width: 64px; height: 64px; vertical-align: middle; }
.btn-ic { width: 26px; height: 26px; vertical-align: middle; }
.crown .ic.lg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.crown { top: -30px; }
.tab .ic { width: 1.25em; height: 1.25em; }

/* comentarios para Claude (Probar juegos) */
.select, textarea {
  width: 100%; min-width: 0; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 2px solid var(--surface-3); border-radius: 14px; padding: 11px 13px;
}
textarea { resize: vertical; line-height: 1.4; }
.select:focus, textarea:focus { outline: none; border-color: var(--celeste); }
.notes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.note { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.note.done { opacity: .65; }
.note b { font-size: 14px; }

/* números de la app (Probar juegos) */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.statbox { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.statbox b { font-family: Fredoka, system-ui, sans-serif; font-size: 26px; line-height: 1.1; }

/* calificación de los juegos (al terminar un intento del desafío, y la lista del dueño en Probar juegos) */
.btn.rate { font-size: 15px; }
.stars-on { color: var(--sol-text); letter-spacing: 1px; }
.starpick { display: flex; justify-content: center; gap: 6px; }
.star { font-size: 44px; line-height: 1; padding: 2px 4px; border: 0; background: none; color: var(--surface-3); cursor: pointer; transition: transform .12s, color .12s; -webkit-tap-highlight-color: transparent; }
.star.on { color: var(--sol); }
.star:active { transform: scale(1.2); }
.rating { border-radius: 14px; background: var(--surface-2); padding: 10px 12px; }
.rating summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; }
.rating summary::-webkit-details-marker { display: none; }
.rating[open] summary { margin-bottom: 8px; }
.rating-avg { font-weight: 700; }
.rating-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.rating-bars li { display: grid; grid-template-columns: 28px 1fr 26px; align-items: center; gap: 8px; }
.rating-bars i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sol) var(--w), var(--surface-3) var(--w)); }

/* intentos de un jugador (se abre tocándolo en la tabla o el podio) */
.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rank li.tap:active, .step.tap:active { transform: scale(.98); }
.tap:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
dialog.sheet {
  width: min(520px, 100%); max-width: 100%; max-height: 86dvh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 24px 24px 0 0; background: var(--bg); color: var(--text); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  display: flex; flex-direction: column; overflow: hidden; animation: sheet-up .22s ease-out;
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: rgba(10, 12, 25, .5); }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 600px) { dialog.sheet { margin: auto; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet { animation: none; } }
.sheet-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 19px; }
.sheet-head p { margin: 2px 0 0; }
.sheet-head .ava { width: 48px; height: 48px; font-size: 17px; }
.sheet-body { overflow-y: auto; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.pday { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--card-shadow); }
.pday header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pday header b, .pday header span { display: block; }
.tries-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tries-list li { display: grid; grid-template-columns: 24px auto 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--surface-2); }
.tries-list .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-3); color: var(--muted); }
.tries-list b { font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.tries-list b small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.tries-list .tag { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.tries-list .hr { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tries-list li.best { background: rgba(255, 200, 61, .16); }
.tries-list li.best .tag { color: var(--sol-text); font-weight: 700; }
.tries-list li.ch b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tries-list li.live b { color: var(--celeste); font-weight: 600; }

/* reglas del desafío: Jugar (cuenta) y Prueba (no suma) */
.screen.with-cta.two { padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)); }
/* la prueba del día (28/10/2026, pedido del dueño: no se entendía que era una prueba): arriba de Jugar, celeste (el
   amarillo es solo para Jugar), en dos renglones y con un cartelito que avisa que hay una sola */
.btn.trial {
  justify-content: flex-start; text-align: left; gap: 12px; min-height: 62px; padding: 9px 14px;
  background: var(--trial-bg); color: var(--text); border: 2px solid var(--celeste); box-shadow: 0 3px 0 var(--celeste);
}
.btn.trial:active:not(:disabled) { box-shadow: 0 0 0 var(--celeste); }
.trial-ico { font-size: 26px; line-height: 1; }
.trial-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.trial-txt b { font-size: 17px; font-weight: 700; }
.trial-txt small { font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.trial-badge {
  flex: none; background: var(--celeste); color: var(--bg); font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; animation: trialpulse 1.6s ease-in-out infinite;
}
@keyframes trialpulse { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .trial-badge { animation: none; } }
.cta-pair { flex-direction: column; gap: 8px; }
.cta-pair p { margin: 0; }
.tries-list li.cut b { color: var(--muted); font-weight: 600; }

/* tribuna por día y reacciones */
.tday { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cmsg[data-mid] .bubble, .cmsg.ev span { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cmsg.me > div { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; max-width: 78%; }
.cmsg.me > div .bubble { max-width: 100%; }
.cmsg.ev > div { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 90%; }
.cgif { -webkit-touch-callout: none; pointer-events: none; }
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; }
.react { font: inherit; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); cursor: pointer; color: var(--text); }
.react b { font-size: 12px; font-weight: 700; color: var(--muted); }
.react.mine { border-color: var(--celeste); background: var(--surface-2); }
.rpick { position: fixed; z-index: 60; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .22); animation: rpick-in .14s ease-out; }
.rpick button { font-size: 24px; line-height: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: transform .1s; }
.rpick button:active { transform: scale(1.25); }
.rpick button.on { background: var(--surface-3); }
@keyframes rpick-in { from { transform: translateY(6px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .rpick { animation: none; } }

/* desafío: barra de arriba (días anteriores y posición), día anterior, lista de días */
.gtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: -4px; }
.chipbtn { font: inherit; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); cursor: pointer; white-space: nowrap; }
.chipbtn.hi { background: rgba(255, 200, 61, .18); border-color: rgba(255, 200, 61, .5); }
.chipbtn.hi b { font-family: var(--f-display); font-size: 16px; color: var(--sol-text); }
.chipbtn:active { transform: scale(.97); }
.pastday { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px; }
.pd-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-title b, .pd-title span { display: block; }
.iconbtn.flip svg, .chev svg { transform: scaleX(-1); }
.iconbtn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.rank li.off { opacity: .6; }
.sheet-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dayrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--card-shadow); }
.dayrow b, .dayrow > span > span { display: block; }
.dayrow.on { border-color: var(--celeste); }
.chev { color: var(--muted); display: grid; }

/* revisión de UX/UI (26/10/2026) */
.sect { margin: 4px 0 -4px; font-size: 17px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; }
.chips .ava.sm { width: 24px; height: 24px; font-size: 10px; }
.tries-l { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.composer.inline { position: static; transform: none; width: 100%; bottom: auto; }
.late { border-color: rgba(255, 200, 61, .55); background: linear-gradient(var(--surface), var(--surface)) padding-box; }
.late .eyebrow { color: var(--sol-text); }
.btn.sm { padding: 8px 14px; font-size: 14px; min-height: 0; }
.dayrow .btn.sm { pointer-events: none; }
.glate { display: block; font-size: 13px; font-weight: 700; color: var(--sol-text); margin-top: 2px; }
.invite input { width: 100%; min-width: 0; box-sizing: border-box; text-overflow: ellipsis; }
.guide { display: block; width: 100%; }

/* ---------- revisión visual estilo videojuego (27/10/2026) ---------- */
/* entrada: cada bloque sube un poco, de a uno. Solo los hijos (no la pantalla ni lo fijo): un transform en un
   antepasado rompería las barras fijas. "backwards": al terminar no queda ningún transform puesto. */
.fade-in > :not(.cta-bar):not(.tabbar):not(.composer):not(.appbar) { animation: rise .38s cubic-bezier(.2, .8, .2, 1) backwards; }
.fade-in > :nth-child(2) { animation-delay: .04s; }
.fade-in > :nth-child(3) { animation-delay: .08s; }
.fade-in > :nth-child(4) { animation-delay: .12s; }
.fade-in > :nth-child(5) { animation-delay: .16s; }
.fade-in > :nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* cargando: esqueleto con brillo en vez de un texto suelto */
.skel { background: var(--surface-2); border-radius: 14px; position: relative; overflow: hidden; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: shine 1.3s ease-in-out infinite; }
:root[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@keyframes shine { to { transform: translateX(100%); } }
.skel-bar { height: 44px; border-radius: 14px; }
.skel-card { aspect-ratio: 1.9 / 1; border-radius: 28px; }
.skel-line { height: 16px; border-radius: 8px; }
.skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; }

/* inicio: saludo con lo que hay para hacer hoy */
.hello { display: flex; flex-direction: column; gap: 2px; margin-bottom: -6px; }
.hello h1 { font-family: var(--f-display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.hello p { color: var(--muted); font-size: 15px; }
.hello p b { color: var(--sol-text); }

/* desafío: los 10 días como una barra de temporada */
.season { display: flex; flex-direction: column; gap: 7px; margin-top: -8px; }
.segs { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.segs li { height: 6px; border-radius: 99px; background: var(--surface-3); }
.segs li.done { background: var(--verde); }
.segs li.now { background: var(--sol); box-shadow: 0 0 0 2px rgba(255, 200, 61, .35); animation: nowpulse 1.6s ease-in-out infinite; }
.segs li.view { background: var(--celeste); }
@keyframes nowpulse { 50% { box-shadow: 0 0 0 4px rgba(255, 200, 61, .12); } }

/* listo por hoy */
.doneday { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(63, 217, 138, .12); }
.doneday .ok { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fff; font-weight: 800; }
.doneday > div > b { display: block; }
.doneday > div > span { font-size: 13.5px; color: var(--muted); }
.doneday > div > span b { color: var(--text); }

/* reglas: la portada grande arriba */
.rcover { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--surface-2); box-shadow: 0 14px 34px var(--sombra); }
.rcover canvas { display: block; width: 100%; height: 100%; }
.rcover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .3), transparent 40%); pointer-events: none; }
.rcover .gpill { top: 12px; bottom: auto; right: 12px; }
.rchips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.rchips .tries { padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }

/* resultado */
.rcard { padding: 0; overflow: hidden; width: 100%; }
.rhead { position: relative; aspect-ratio: 2.4 / 1; background: var(--surface-2); }
.rhead canvas { display: block; width: 100%; height: 100%; }
.rhead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--surface) 100%); pointer-events: none; }
.rcard .result { padding: 0 18px 20px; margin-top: -26px; position: relative; z-index: 1; }
.final span.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.rstats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 28px; }
.rstats .skel { width: 150px; height: 28px; border-radius: 999px; }
.stat.gold { background: var(--sol); color: var(--sol-ink); }
.newbest { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: var(--f-display); font-weight: 700; font-size: 14px; background: var(--verde); color: #fff; animation: pop .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.rbtns { display: grid; grid-template-columns: 1fr auto; gap: 10px; width: 100%; }
.rbtns .btn { width: auto; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* chat: frases rápidas para arrancar y botón de mandar apagado si no hay nada escrito */
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.quick button { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 var(--edge); }
.quick button:active { transform: translateY(2px); box-shadow: none; }
.sendbtn { box-shadow: 0 3px 0 var(--sol-edge); transition: opacity .15s, transform .08s, box-shadow .08s; }
.sendbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--sol-edge); }
.sendbtn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.cmsg.ev span { box-shadow: var(--card-shadow); }

/* hojas: manija arriba y se cierran arrastrando para abajo */
dialog.sheet { transition: transform .2s ease-out; }
dialog.sheet.drag { transition: none; }
.grab { position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--surface-3); }
.sheet-head { position: relative; padding-top: 22px; touch-action: none; }

/* tabla: el líder con un toque dorado */
.rank li:has(.pos.p1) { background: linear-gradient(90deg, rgba(255, 200, 61, .14), var(--surface) 60%); }
.tabbar-btn { transition: background .15s, color .15s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in > *, .final span.pop, .newbest, .segs li.now, .skel::after { animation: none; }
  dialog.sheet { transition: none; }
}

/* El cartelito de reCAPTCHA (App Check) tapaba los juegos y la barra de abajo: se esconde y el aviso que pide Google
   está en Perfil, abajo de todo. */
.grecaptcha-badge { visibility: hidden; }