/* Holdea si puedes — mismo sistema visual de Compass. Lo común está en
   kit/kit.css y kit/herramienta.css; aquí va solo lo propio de esta página. */

:root{
  --c-tu:#526b08;--c-quieto:#8a948e;--c-fuera:rgba(17,39,30,.07);
  --vender:#b4472f;--comprar:#4c7a12;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --c-tu:#d8f45c;--c-quieto:#7d8882;--c-fuera:rgba(236,232,220,.07);
  --vender:#d9634a;--comprar:#8fc23a;
}}
:root[data-theme="dark"]{
  --c-tu:#d8f45c;--c-quieto:#7d8882;--c-fuera:rgba(236,232,220,.07);
  --vender:#d9634a;--comprar:#8fc23a;
}

/* El juego va en una columna centrada, más angosta que la barra: se juega sin
   mover la vista. */
main>:not(.kit-migas){max-width:800px;margin-left:auto;margin-right:auto}
.hero{padding-top:44px}
.hero h1{font-size:clamp(36px,6.4vw,60px);margin:14px auto 18px}

.juego{margin:32px 0 0;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sombra);padding:22px clamp(16px,4vw,32px) 28px}
.marcador{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px;align-items:end;margin-bottom:12px}
.m-dia{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.estado{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--text)}
.estado.fuera{background:var(--warn-bg);color:var(--warn-text)}
.m-valor{display:flex;flex-direction:column;text-align:right}
.m-valor .k{font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;gap:6px}
.m-valor .k i{width:14px;height:3px;border-radius:2px;display:inline-block}
.m-valor.tu .k i{background:var(--c-tu);height:4px}
.m-valor.quieto .k i{background:var(--c-quieto)}
.m-valor b{font:400 clamp(22px,5vw,30px)/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.m-valor small{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}

.chart .base{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 4}
.chart .fuera{fill:var(--c-fuera)}
.chart .l-quieto{fill:none;stroke:var(--c-quieto);stroke-width:1.6;stroke-linejoin:round}
.chart .l-tu{fill:none;stroke:var(--c-tu);stroke-width:2.6;stroke-linejoin:round}
.chart .pt-quieto{fill:var(--c-quieto);stroke:var(--paper);stroke-width:2}
.chart .pt-tu{fill:var(--c-tu);stroke:var(--paper);stroke-width:2}

.preparar{margin:20px 0 0;display:grid;gap:12px;justify-items:center;text-align:center}
.grupo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.grupo-k{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;min-width:70px;text-align:right}
.chips{gap:6px}
.chip{padding:8px 16px;font-size:14px}
.modo-nota{margin:0;font-size:13px;color:var(--faint);min-height:1.5em}
.button.grande{padding:14px 40px}
.button[aria-pressed="true"]{background:var(--chip-on-bg);color:var(--chip-on-text);border-color:var(--chip-on-bg)}

.controles{margin:18px 0 0;display:grid;gap:10px;justify-items:center}
.boton-accion{width:min(100%,420px);height:72px;border:0;border-radius:14px;font:800 22px var(--font-sans);letter-spacing:-.01em;color:#fff;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .08s,background .15s}
.boton-accion:active{transform:scale(.98)}
.boton-accion.vender{background:var(--vender)}
.boton-accion.comprar{background:var(--comprar)}
.controles-2{display:flex;gap:8px}
.teclado{margin:0;font-size:12px;color:var(--faint)}
@media (pointer:coarse){.teclado{display:none}}

.final{margin:22px 0 0;text-align:center;border-top:1px solid var(--line);padding-top:22px}
.final-titulo{font:400 clamp(26px,5.6vw,36px)/1.1 var(--font-display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.final-nota{color:var(--text-2);font-size:15px;margin:8px auto 0;max-width:520px}
.revela{margin:14px 0 0;font-weight:650;font-size:14.5px}
.numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 0}
.numeros div{background:var(--surface-2);border-radius:12px;padding:12px 8px;display:flex;flex-direction:column-reverse}
.numeros dt{font-size:12px;color:var(--muted);line-height:1.3}
.numeros dd{margin:0;font:400 24px/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.dias-clave{list-style:none;margin:14px 0 0;padding:0;font-size:14.5px;display:grid;gap:4px}
.leccion{margin:14px auto 0;max-width:540px;font-size:14px;color:var(--text-2);background:var(--warn-bg);color:var(--warn-text);border-radius:10px;padding:12px 14px;text-align:left}
.record{margin:12px 0 0;font-size:13px;color:var(--faint)}
.acciones{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}

.ranking-aviso{margin:12px 0 0;font-size:14px;font-weight:650;min-height:0}
.ranking-aviso:empty{display:none}
.form-nombre{margin:16px auto 0;max-width:460px;background:var(--surface-2);border-radius:12px;padding:16px;text-align:left}
.form-nombre p{margin:0 0 10px;font-size:14px}
.fila-nombre{display:flex;gap:8px}
.fila-nombre input{flex:1;min-width:0;border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:8px;padding:10px 12px;font:500 15px var(--font-sans)}
.turnstile{margin-top:10px;min-height:0}
.nombre-aviso{color:var(--warn-text);min-height:0}
.nombre-aviso:empty{display:none}
.form-nombre .privacidad{font-size:12px;color:var(--faint);margin:8px 0 0}

.ranking{margin:40px 0 0}
.ranking h2{font:400 26px/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 6px}
.ranking-bajada{margin:0 0 14px;color:var(--text-2);font-size:14px}
.ranking-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ranking-lista li{display:grid;grid-template-columns:28px 1fr auto;grid-template-areas:"pos nombre v" "pos det v";align-items:center;column-gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.ranking-lista li:first-child{border-color:var(--olive)}
.r-pos{grid-area:pos;font:400 20px var(--font-display);color:var(--muted);text-align:center}
.r-nombre{grid-area:nombre;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-detalle{grid-area:det;font-size:12px;color:var(--muted)}
.r-ventaja{grid-area:v;font:400 22px var(--font-display);color:var(--olive-text);font-variant-numeric:tabular-nums}
.ranking-estado{margin:10px 0 0;font-size:14px;color:var(--text-2)}
.ranking-estado:empty{display:none}
.ranking-nota{margin:12px 0 0;font-size:12px;color:var(--faint)}

.final.cortada :is(.numeros,.dias-clave,.leccion,#compartir){display:none}

@media (max-width:560px){
  .chart{height:240px}
  .numeros{grid-template-columns:repeat(2,1fr)}
  .marcador{grid-template-columns:1fr 1fr}
  .m-dia{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .boton-accion{height:64px;font-size:20px}
}

/* «¿Qué acaba de pasar?»: el término de Aprende que explica la partida. */
.aprendio{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--olive);border-radius:0 12px 12px 0;background:var(--surface-2);text-align:left}
.aprendio p{margin:0 0 6px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.aprendio .aprendio-k{font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-text)}
.aprendio a{font-weight:700;color:var(--olive-text);text-decoration:none}
.aprendio a:hover{text-decoration:underline;text-underline-offset:3px}
.aprendio .aprendio-logro{margin:8px 0 0;font-size:13px;color:var(--muted)}