/* app.css — GameHub pública v1.0.0
   1) Vitral v1.0 íntegro (assets/vitral.css de la skill)  2) capa de GameHub */
/* =========================================================
   VITRAL v1.0 — hoja de estilos completa (tokens + componentes)
   Copiar íntegra dentro del <style> de cada app (sin CDN, sin dependencias).
   Para una marca nueva: cambiar SOLO --hue (y opcionalmente --chroma,
   --font y los radios) en la capa de perfil. No tocar el resto.
   Referencia viva: assets/reference-app.html
   ========================================================= */
/* =========================================================
   VITRAL — capa 1: FUNDAMENTOS (no cambian entre productos)
   ========================================================= */
:root{
  /* Marca: un único color semilla (hue OKLCH). La capa de marca solo toca esto. */
  --hue:155; --chroma:.13;

  /* Radios concéntricos: un hijo = radio del padre − su padding */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;

  /* Espaciado (múltiplos de 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* Tipografía: del sistema (SF en Apple, Segoe en Windows, Roboto en Android) */
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-large:clamp(30px, 6vw, 38px); --t-title:22px; --t-head:17px; --t-body:16px; --t-sub:14px; --t-cap:12.5px;

  /* Movimiento: muelle suave (sobrio, ~6% de rebote). Fallback cubic-bezier. */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.2,.8,.2,1);
  --d-fast:160ms; --d:320ms; --d-slow:480ms;

  /* Cristal: solo para la capa de navegación */
  --blur:22px; --sat:170%;

  /* ---------- Color (claro) ---------- */
  --bg:        oklch(97.4% .005 var(--hue));
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(95.2% .007 var(--hue));
  --surface-3: oklch(92.5% .009 var(--hue));
  --line:      oklch(90.5% .008 var(--hue));
  --text:      oklch(22% .012 var(--hue));
  --text-2:    oklch(45% .012 var(--hue));
  --text-3:    oklch(54% .01 var(--hue));  /* 4,7:1 sobre --bg */
  --accent:    oklch(50% var(--chroma) var(--hue));
  --on-accent: oklch(99% .01 var(--hue));
  --tonal:     oklch(93.5% .045 var(--hue));
  --on-tonal:  oklch(34% .09 var(--hue));
  --ok:#1f8a4c; --warn:#b25e00; --danger:#c42b2b;
  --ok-bg:oklch(94% .05 150); --warn-bg:oklch(95% .05 75); --danger-bg:oklch(94.5% .035 25);
  --glass:        oklch(99% .004 var(--hue) / .66);
  --glass-border: oklch(100% 0 0 / .6);
  --glass-shadow: 0 1px 0 oklch(100% 0 0 / .5) inset, 0 8px 30px oklch(20% .02 var(--hue) / .10), 0 1px 3px oklch(20% .02 var(--hue) / .08);
  --card-shadow:  0 1px 2px oklch(20% .02 var(--hue) / .05);
  --scrim: oklch(15% .01 var(--hue) / .38);
  color-scheme: light;
}
@supports (transition-timing-function: linear(0, 1)){
  :root{ --ease-spring: linear(0, .063, .228, .437 13.6%, .619, .768 23.6%, .884, .967 34.6%, 1.022 41.2%, 1.05 47.3%, 1.059 53.1%, 1.052, 1.038 66%, 1.012 80.6%, 1); }
}
/* Oscuro: por sistema (salvo que el usuario fuerce claro) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:oklch(15.5% .008 var(--hue)); --surface:oklch(20.5% .01 var(--hue)); --surface-2:oklch(25% .012 var(--hue)); --surface-3:oklch(29% .013 var(--hue));
    --line:oklch(30% .012 var(--hue)); --text:oklch(96% .006 var(--hue)); --text-2:oklch(76% .01 var(--hue)); --text-3:oklch(62% .01 var(--hue));
    --accent:oklch(76% var(--chroma) var(--hue)); --on-accent:oklch(20% .04 var(--hue)); --tonal:oklch(31% .06 var(--hue)); --on-tonal:oklch(88% .08 var(--hue));
    --ok:#4cd07d; --warn:#ffb340; --danger:#ff6961; --ok-bg:oklch(30% .06 150); --warn-bg:oklch(31% .06 75); --danger-bg:oklch(30% .06 25);
    --glass:oklch(24% .012 var(--hue) / .62); --glass-border:oklch(100% 0 0 / .09);
    --glass-shadow:0 1px 0 oklch(100% 0 0 / .06) inset, 0 10px 34px oklch(0% 0 0 / .45);
    --card-shadow:none; --scrim:oklch(0% 0 0 / .55); color-scheme:dark;
  }
}
/* Oscuro forzado por el usuario */
:root[data-theme="dark"]{
  --bg:oklch(15.5% .008 var(--hue)); --surface:oklch(20.5% .01 var(--hue)); --surface-2:oklch(25% .012 var(--hue)); --surface-3:oklch(29% .013 var(--hue));
  --line:oklch(30% .012 var(--hue)); --text:oklch(96% .006 var(--hue)); --text-2:oklch(76% .01 var(--hue)); --text-3:oklch(62% .01 var(--hue));
  --accent:oklch(76% var(--chroma) var(--hue)); --on-accent:oklch(20% .04 var(--hue)); --tonal:oklch(31% .06 var(--hue)); --on-tonal:oklch(88% .08 var(--hue));
  --ok:#4cd07d; --warn:#ffb340; --danger:#ff6961; --ok-bg:oklch(30% .06 150); --warn-bg:oklch(31% .06 75); --danger-bg:oklch(30% .06 25);
  --glass:oklch(24% .012 var(--hue) / .62); --glass-border:oklch(100% 0 0 / .09);
  --glass-shadow:0 1px 0 oklch(100% 0 0 / .06) inset, 0 10px 34px oklch(0% 0 0 / .45);
  --card-shadow:none; --scrim:oklch(0% 0 0 / .55); color-scheme:dark;
}
/* Cristal tintado (equivalente al ajuste de iOS 27): casi opaco, máxima legibilidad */
:root[data-glass="tinted"]{ --glass: color-mix(in oklch, var(--surface) 94%, var(--accent)); }

/* =========================================================
   VITRAL — capa 3: PERFILES (marca por producto)
   ========================================================= */
:root[data-profile="product"]{
  --chroma:.15; --r-md:12px; --r-lg:16px; --t-large:clamp(28px, 5vw, 34px);
}
:root[data-profile="product"] .playful{ display:none !important; }

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px); -webkit-text-size-adjust:100%; }
html,body{ min-height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--t-body); line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d) var(--ease-out), color var(--d) var(--ease-out);
}
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
svg.i{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.num{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Cristal */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:var(--surface); }
}

/* =========================================================
   Topbar: transparente arriba, cristal al hacer scroll
   ========================================================= */
.topbar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; padding:var(--s2) var(--s3) 0; pointer-events:none; }
.topbar-inner{
  max-width:1040px; margin:0 auto; height:48px; display:grid; grid-template-columns:48px 1fr 48px; align-items:center;
  padding:0 var(--s1); border-radius:var(--r-pill); border:1px solid transparent; pointer-events:auto;
  transition:background-color var(--d) var(--ease-out), box-shadow var(--d) var(--ease-out), border-color var(--d) var(--ease-out);
}
.topbar:not(.scrolled) .topbar-inner{ background:transparent; box-shadow:none; border-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.compact-title{ text-align:center; font-weight:600; font-size:var(--t-head); opacity:0; transform:translateY(4px); transition:opacity var(--d-fast) var(--ease-out), transform var(--d) var(--ease-spring); }
.topbar.scrolled .compact-title{ opacity:1; transform:none; }
.mark{ width:26px; height:26px; margin-left:var(--s2); display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.mark span{ border-radius:4px; }
.icon-btn{ width:40px; height:40px; display:grid; place-items:center; justify-self:end; border:0; background:transparent; border-radius:var(--r-pill); color:var(--text-2); transition:background-color var(--d-fast); }
.icon-btn:hover{ background:var(--surface-2); }

/* =========================================================
   Layout
   ========================================================= */
.wrap{ max-width:1040px; margin:0 auto; padding:0 var(--s4) calc(120px + env(safe-area-inset-bottom,0px)); }
@media (min-width:700px){ .wrap{ padding-inline:var(--s6); } }
.hero{ padding:var(--s2) var(--s1) var(--s5); }
.date{ margin:0 0 2px; color:var(--text-2); font-size:var(--t-sub); font-weight:500; }
.large-title{ margin:0; font-size:var(--t-large); line-height:1.08; font-weight:700; letter-spacing:-.022em; }
.view[hidden]{ display:none; }

/* Bento */
.bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.span-2{ grid-column:span 2; }
@media (min-width:860px){
  .bento{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); }
  .bento .tall{ grid-row:span 2; }
}
.card{
  --c-hue:var(--hue);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:var(--s3); min-width:0;
}
.card-head{ display:flex; align-items:center; gap:var(--s3); }
.card-icon{
  width:34px; height:34px; border-radius:calc(var(--r-lg) - var(--s4) + 2px); display:grid; place-items:center; flex:none;
  background:oklch(93% .05 var(--c-hue)); color:oklch(40% .12 var(--c-hue));
}
:root[data-theme="dark"] .card-icon{ background:oklch(32% .07 var(--c-hue)); color:oklch(86% .1 var(--c-hue)); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-icon{ background:oklch(32% .07 var(--c-hue)); color:oklch(86% .1 var(--c-hue)); } }
.card-icon svg.i{ width:19px; height:19px; }
.card-title{ margin:0; font-size:var(--t-sub); font-weight:600; }
.card-meta{ margin:0; font-size:var(--t-cap); color:var(--text-2); }
.card-foot{ margin-top:auto; }
.feature{ margin:0; font-size:var(--t-title); line-height:1.2; font-weight:650; letter-spacing:-.012em; }
.feature-sub{ margin:0; color:var(--text-2); font-size:var(--t-sub); }
.big{ margin:0; font-size:46px; line-height:1; font-weight:700; letter-spacing:-.03em; }
.big small{ font-size:var(--t-sub); font-weight:600; letter-spacing:0; color:var(--text-2); margin-left:4px; }

/* Lista con check */
.rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; gap:var(--s3); min-height:48px; padding:var(--s1) 0; border-top:1px solid var(--line); }
.row:first-child{ border-top:0; }
.row-text{ flex:1; min-width:0; }
.row-title{ margin:0; font-size:15px; font-weight:500; transition:color var(--d) var(--ease-out); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub{ margin:0; font-size:var(--t-cap); color:var(--text-3); }
.row.done .row-title{ color:var(--text-3); text-decoration:line-through; text-decoration-color:var(--text-3); }
.row.is-new{ animation:row-in var(--d-slow) var(--ease-spring); }
@keyframes row-in{ from{ opacity:0; transform:translateY(-8px) scale(.98); } }
.check{
  width:28px; height:28px; flex:none; border-radius:50%; border:1.8px solid var(--text-3); background:transparent;
  display:grid; place-items:center; padding:0; color:var(--on-accent);
  transition:background-color var(--d-fast) var(--ease-out), border-color var(--d-fast), transform var(--d) var(--ease-spring);
}
.check:active{ transform:scale(.88); }
.check svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.check path{ stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset var(--d) var(--ease-out); }
.check[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.check[aria-checked="true"] path{ stroke-dashoffset:0; }
/* Área táctil 44px aunque el círculo sea de 28 */
.check{ position:relative; }
.check::after{ content:""; position:absolute; inset:-8px; }

/* Barras */
.bars{ display:flex; align-items:flex-end; gap:6px; height:64px; }
.bar{ flex:1; border-radius:6px 6px 3px 3px; background:var(--tonal); min-height:6px; transform-origin:bottom; animation:bar-in var(--d-slow) var(--ease-spring) both; }
.bar.now{ background:var(--accent); }
@keyframes bar-in{ from{ transform:scaleY(.2); opacity:.4; } }
.bar-labels{ display:flex; gap:6px; font-size:11px; color:var(--text-3); }
.bar-labels span{ flex:1; text-align:center; }

/* Vacío */
.empty{ align-items:flex-start; background:transparent; border-style:dashed; box-shadow:none; }
.empty .feature{ font-size:var(--t-head); }

/* =========================================================
   Botones — forma que cambia al pulsar (idea de Material Expressive)
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:0 var(--s5); border-radius:var(--r-pill); border:1px solid transparent;
  font-weight:600; font-size:15px; letter-spacing:-.005em; white-space:nowrap;
  transition:transform var(--d) var(--ease-spring), border-radius var(--d) var(--ease-spring), background-color var(--d-fast), filter var(--d-fast);
}
.btn svg.i{ width:18px; height:18px; stroke-width:2.2; }
.btn:active{ transform:scale(.965); border-radius:var(--r-sm); }
.btn-filled{ background:var(--accent); color:var(--on-accent); }
.btn-filled:hover{ filter:brightness(1.06); }
.btn-tonal{ background:var(--tonal); color:var(--on-tonal); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-plain{ background:transparent; color:var(--accent); padding-inline:var(--s3); }
.btn-danger{ background:transparent; color:var(--danger); padding-inline:var(--s3); }
.btn-sm{ min-height:36px; padding:0 var(--s4); font-size:14px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{ min-height:36px; padding:0 var(--s4); border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:14px; font-weight:500; transition:background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
.chip[aria-checked="true"]{ background:var(--tonal); border-color:transparent; color:var(--on-tonal); }

/* Control segmentado */
.seg{ display:inline-flex; padding:3px; gap:2px; background:var(--surface-2); border-radius:var(--r-pill); max-width:100%; }
.seg button{ min-height:34px; padding:0 var(--s4); border:0; border-radius:var(--r-pill); background:transparent; font-size:14px; font-weight:500; color:var(--text-2); transition:background-color var(--d-fast) var(--ease-out), color var(--d-fast), box-shadow var(--d-fast); }
.seg button[aria-checked="true"]{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px oklch(0% 0 0 / .12); font-weight:600; }
:root[data-theme="dark"] .seg button[aria-checked="true"]{ background:var(--surface-3); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .seg button[aria-checked="true"]{ background:var(--surface-3); } }

/* Interruptor */
.switch{ width:51px; height:31px; border-radius:var(--r-pill); border:0; padding:2px; background:var(--surface-3); position:relative; flex:none; transition:background-color var(--d) var(--ease-out); }
.switch::before{ content:""; display:block; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px oklch(0% 0 0 / .2); transition:transform var(--d) var(--ease-spring); }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch[aria-checked="true"]::before{ transform:translateX(20px); }

/* Badges */
.badge{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 var(--s2); border-radius:var(--r-pill); font-size:12px; font-weight:600; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }

/* Skeleton */
.skel{ border-radius:var(--r-xs); background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* =========================================================
   Listas agrupadas (Ajustes / Sistema)
   ========================================================= */
.group-label{ margin:var(--s6) var(--s4) var(--s2); font-size:var(--t-cap); font-weight:600; color:var(--text-2); }
.group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.group-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:56px; padding:var(--s3) var(--s4); border-top:1px solid var(--line); flex-wrap:wrap; }
.group-row:first-child{ border-top:0; }
.group-row > span{ font-weight:500; }
.group-row small{ display:block; font-size:var(--t-cap); color:var(--text-2); font-weight:400; }
.group-note{ margin:var(--s2) var(--s4) 0; font-size:var(--t-cap); color:var(--text-2); max-width:60ch; }
.pad{ padding:var(--s4); }
.stack{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

.hues{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.hue{ width:32px; height:32px; border-radius:50%; border:0; background:oklch(58% .14 var(--h)); position:relative; transition:transform var(--d) var(--ease-spring); }
.hue[aria-checked="true"]{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px oklch(58% .14 var(--h)); }
.hue:active{ transform:scale(.9); }

.swatches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:var(--s2); }
.sw{ border-radius:var(--r-md); border:1px solid var(--line); overflow:hidden; font-size:12px; }
.sw div{ height:52px; }
.sw p{ margin:0; padding:6px var(--s2); color:var(--text-2); background:var(--surface); }
.type-scale p{ margin:0 0 var(--s2); }

/* =========================================================
   Tab bar flotante (cristal)
   ========================================================= */
.tabbar-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; justify-content:center; padding:0 var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px)); pointer-events:none; }
.tabbar{ position:relative; display:flex; gap:2px; padding:5px; border-radius:var(--r-pill); pointer-events:auto; }
.tab{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:84px; height:54px; border:0; background:transparent; border-radius:var(--r-pill); color:var(--text-2); font-size:11px; font-weight:600; transition:color var(--d-fast) var(--ease-out); }
.tab svg.i{ width:23px; height:23px; transition:transform var(--d) var(--ease-spring); }
.tab[aria-selected="true"]{ color:var(--accent); }
.tab:active svg.i{ transform:scale(.86); }
.tab-indicator{ position:absolute; top:5px; left:0; height:54px; border-radius:var(--r-pill); background:color-mix(in oklch, var(--accent) 13%, transparent); transition:transform var(--d-slow) var(--ease-spring), width var(--d-slow) var(--ease-spring); }

/* =========================================================
   Hoja inferior (dialog) + toast
   ========================================================= */
.sheet{
  border:0; padding:0; margin:auto auto 0; width:100%; max-width:560px; max-height:92dvh;
  background:var(--surface); color:var(--text); border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -10px 40px oklch(0% 0 0 / .18);
  transform:translateY(100%);
  transition:transform var(--d-slow) var(--ease-spring), overlay var(--d-slow) allow-discrete, display var(--d-slow) allow-discrete;
}
.sheet[open]{ transform:none; }
@starting-style{ .sheet[open]{ transform:translateY(100%); } }
.sheet::backdrop{ background:transparent; transition:background-color var(--d) var(--ease-out), overlay var(--d-slow) allow-discrete, display var(--d-slow) allow-discrete; }
.sheet[open]::backdrop{ background:var(--scrim); }
@starting-style{ .sheet[open]::backdrop{ background:transparent; } }
@media (min-width:700px){
  .sheet{ margin:auto; border-radius:var(--r-lg); transform:translateY(24px) scale(.97); opacity:0; transition:transform var(--d) var(--ease-spring), opacity var(--d-fast), overlay var(--d) allow-discrete, display var(--d) allow-discrete; }
  .sheet[open]{ transform:none; opacity:1; }
  @starting-style{ .sheet[open]{ transform:translateY(24px) scale(.97); opacity:0; } }
}
.sheet-in{ padding:var(--s2) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom,0px)); }
.grabber{ width:40px; height:5px; border-radius:3px; background:var(--surface-3); margin:0 auto var(--s4); }
.sheet h2{ margin:0 0 var(--s5); font-size:var(--t-title); letter-spacing:-.012em; }
.field{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s5); }
.field > label, .field > .label{ font-size:var(--t-sub); font-weight:600; }
.input{ min-height:48px; padding:0 var(--s4); border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); outline:none; font-size:16px; transition:border-color var(--d-fast), background-color var(--d-fast), box-shadow var(--d-fast); }
.input:focus{ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent); }
.input[aria-invalid="true"]{ border-color:var(--danger); }
.err{ margin:0; font-size:var(--t-cap); color:var(--danger); min-height:1em; }
.sheet-actions{ display:flex; gap:var(--s3); justify-content:flex-end; }

.toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom,0px)); z-index:70;
  display:flex; align-items:center; gap:var(--s2); padding:var(--s3) var(--s5); border-radius:var(--r-pill); font-weight:600; font-size:15px;
  transform:translate(-50%, 16px) scale(.96); opacity:0; pointer-events:none;
  transition:transform var(--d) var(--ease-spring), opacity var(--d-fast) var(--ease-out);
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
.toast svg.i{ color:var(--ok); width:20px; height:20px; stroke-width:2.4; }

/* View transitions entre pestañas */
::view-transition-old(root){ animation:vt-out 180ms var(--ease-out) both; }
::view-transition-new(root){ animation:vt-in 320ms var(--ease-spring) both; }
@keyframes vt-out{ to{ opacity:0; transform:scale(.99); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
.topbar-inner, .tabbar{ view-transition-name:none; }

/* Movimiento reducido: todo instantáneo */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================
   GAMEHUB PÚBLICA — capa de marca (perfil Producto)
   --hue 277 sale de #6366f1, el índigo de siempre de GameHub
   (python3 scripts/hex2hue.py "#6366f1" → H 277). Croma .15 del perfil.
   ========================================================= */
:root[data-profile="product"]{ --hue:277; --chroma:.15; }

/* Colores de estado de las fichas de juego (verde = exacto, ámbar = cerca, gris = no).
   Derivados con OKLCH; el texto encima se ha comprobado a 4,5:1. */
:root{
  --tile-hit:oklch(50% .13 150); --tile-near:oklch(80% .14 82); --tile-miss:oklch(54% .012 var(--hue));
  --on-tile:oklch(99% 0 0); --on-near:oklch(26% .06 70);
  --cn-yellow:oklch(88% .12 95); --cn-green:oklch(83% .11 140); --cn-blue:oklch(83% .07 250); --cn-purple:oklch(78% .1 320); --on-cn:oklch(24% .02 277);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tile-hit:oklch(50% .13 150); --tile-near:oklch(76% .14 82); --tile-miss:oklch(40% .012 var(--hue));
    --cn-yellow:oklch(82% .12 95); --cn-green:oklch(77% .11 140); --cn-blue:oklch(77% .08 250); --cn-purple:oklch(73% .1 320);
  }
}
:root[data-theme="dark"]{
  --tile-hit:oklch(50% .13 150); --tile-near:oklch(76% .14 82); --tile-miss:oklch(40% .012 var(--hue));
  --cn-yellow:oklch(82% .12 95); --cn-green:oklch(77% .11 140); --cn-blue:oklch(77% .08 250); --cn-purple:oklch(73% .1 320);
}

/* ---------- Estructura propia ---------- */
button{ touch-action:manipulation; }
.tb-left{ display:flex; align-items:center; }
.tb-left .icon-btn{ justify-self:start; margin-left:var(--s1); color:var(--accent); }
.tb-right{ display:flex; justify-content:flex-end; }
.compact-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-summary .btn, .result .btn, .pr-intro .btn{ white-space:normal; text-align:left; padding-block:10px; }
.tb-right .icon-btn{ margin-right:var(--s1); }
[hidden]{ display:none !important; }
body[data-mode="game"] .tabbar-wrap{ display:none; }
body[data-mode="game"] .wrap{ padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px)); }
body[data-mode="game"] .toast{ bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
.toast.is-error svg.i{ color:var(--danger); }
/* Los badges de Vitral v1.0 se quedan en 3,7:1 (ok) y 4,0:1 (warn) en claro: se oscurece
   solo el texto del badge en tema claro para llegar a 4,5:1 (texto de 12 px). */
:root:not([data-theme="dark"]) .badge-ok{ color:oklch(42% .12 150); }
:root:not([data-theme="dark"]) .badge-warn{ color:oklch(45% .12 60); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge-ok{ color:var(--ok); } :root:not([data-theme="light"]) .badge-warn{ color:var(--warn); } }
.toast.is-info svg.i{ color:var(--accent); }
.toast{ width:max-content; max-width:calc(100vw - 32px); white-space:normal; text-align:left; }

/* En escritorio el contenido no se estira a 1040 px: lectura cómoda */
#view-home, #view-settings{ max-width:760px; margin:0 auto; }
.game-view .hero{ max-width:520px; margin:0 auto; }
.home-summary{ grid-column:1 / -1; }

/* Hoy */
.progress-segs{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
.progress-segs i{ height:8px; border-radius:var(--r-pill); background:var(--surface-3); }
.progress-segs i.won{ background:var(--ok); }
.progress-segs i.lost{ background:var(--danger); }
.progress-segs i.playing{ background:var(--accent); opacity:.55; }
.home-summary .stack{ justify-content:space-between; }
.game-list{ list-style:none; margin:0; padding:0; }
.game-row{
  display:flex; align-items:center; gap:var(--s3); width:100%; min-height:68px; padding:var(--s3) var(--s4);
  border:0; border-top:1px solid var(--line); background:transparent; text-align:left; color:var(--text);
  transition:background-color var(--d-fast) var(--ease-out);
}
.game-list li:first-child .game-row{ border-top:0; }
.game-row:hover{ background:var(--surface-2); }
.game-row:active{ background:var(--surface-3); }
.game-row .card-icon{ --c-hue:var(--hue); } /* lo sobrescriben las clases .hue-* */
.game-row-text{ flex:1; min-width:0; }
.game-row-title{ margin:0; font-weight:600; font-size:15.5px; }
.game-row-sub{ margin:0; font-size:var(--t-cap); color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-row .chev{ color:var(--text-3); width:18px; height:18px; }
.game-row .badge{ flex:none; }
.bento + .group-label{ margin-top:var(--s6); }

/* Juego: contenedor */
.game-body{ max-width:520px; margin:0 auto; }
.game-hero .date{ display:flex; align-items:center; gap:var(--s2); }
.game-hero .card-icon{ width:28px; height:28px; border-radius:8px; }
.game-hero .card-icon svg.i{ width:16px; height:16px; }
.meta-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; margin:0 0 var(--s4); }
.pill{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--s3); border-radius:var(--r-pill); background:var(--surface-2); color:var(--text-2); font-size:var(--t-sub); font-weight:600; }
.pill svg.i{ width:16px; height:16px; }
.pill strong{ color:var(--text); font-weight:650; }
.dots{ display:inline-flex; gap:5px; align-items:center; }
.dots i{ width:10px; height:10px; border-radius:50%; border:1.6px solid var(--text-3); }
.dots i.used{ background:var(--danger); border-color:var(--danger); }
.actions{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; margin-top:var(--s4); }
.result{ margin-bottom:var(--s5); }
.result .feature{ font-size:var(--t-head); }
.result .actions{ justify-content:flex-start; margin-top:var(--s1); }
.hint{ display:flex; gap:var(--s2); align-items:flex-start; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--tonal); color:var(--on-tonal); font-size:var(--t-sub); line-height:1.4; margin-bottom:var(--s3); }
.hint svg.i{ width:18px; height:18px; margin-top:1px; }
.hint.locked{ background:var(--surface-2); color:var(--text-2); }
.skel-board{ height:280px; border-radius:var(--r-lg); }
.skel-line{ height:18px; margin-bottom:var(--s3); }
.load-error{ text-align:left; }

/* Teclado de letras (palabra del día y ahorcado) */
.kb{ display:flex; flex-direction:column; gap:6px; margin-top:var(--s4); }
.kb-row{ display:flex; gap:5px; justify-content:center; }
.key{
  flex:1; min-width:0; max-width:42px; height:52px; padding:0; border:0; border-radius:var(--r-xs);
  background:var(--surface-3); color:var(--text); font-weight:650; font-size:15px;
  display:grid; place-items:center; transition:transform var(--d) var(--ease-spring), background-color var(--d-fast);
  -webkit-user-select:none; user-select:none;
}
.key:active{ transform:scale(.92); }
.key.wide{ flex:1.5; max-width:68px; font-size:13px; }
.key svg.i{ width:20px; height:20px; }
.key.hit{ background:var(--tile-hit); color:var(--on-tile); }
.key.near{ background:var(--tile-near); color:var(--on-near); }
.key.miss{ background:var(--tile-miss); color:var(--on-tile); }
.key[disabled]{ cursor:default; }

/* La palabra del día */
.wd-board{ display:grid; gap:6px; width:min(100%, 304px); margin:0 auto; }
.wd-row{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.wd-cell{ aspect-ratio:1; border:2px solid var(--line); border-radius:var(--r-xs); display:grid; place-items:center; font-size:clamp(15px, 6vw, 24px); font-weight:750; text-transform:uppercase; }
.wd-cell.filled{ border-color:var(--text-3); animation:pop var(--d) var(--ease-spring); }
.wd-cell.hit{ background:var(--tile-hit); border-color:var(--tile-hit); color:var(--on-tile); }
.wd-cell.near{ background:var(--tile-near); border-color:var(--tile-near); color:var(--on-near); }
.wd-cell.miss{ background:var(--tile-miss); border-color:var(--tile-miss); color:var(--on-tile); }
@keyframes pop{ 50%{ transform:scale(1.06); } }

/* La fecha del día */
.fd-event{ margin-bottom:var(--s3); }
.fd-event .ev{ margin:0; font-size:var(--t-body); line-height:1.45; font-weight:550; max-width:60ch; }
.fd-history{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s4); max-height:210px; overflow-y:auto; overscroll-behavior:contain; }
.fd-history.done{ max-height:none; overflow:visible; }
.fd-row{ display:flex; gap:6px; align-items:center; justify-content:center; }
.fd-num{ width:16px; text-align:right; font-size:var(--t-cap); font-weight:650; color:var(--text-3); }
.fd-chip{ height:40px; min-width:56px; padding:0 var(--s2); border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center; gap:3px; font-weight:750; font-size:16px; font-variant-numeric:tabular-nums; }
.fd-chip.wide{ min-width:84px; }
.fd-chip.correct{ background:var(--tile-hit); color:var(--on-tile); }
.fd-chip.near{ background:var(--tile-near); color:var(--on-near); }
.fd-chip.far{ background:var(--tile-miss); color:var(--on-tile); }
.fd-chip-arrow{ font-size:13px; }
.fd-fields{ display:flex; gap:var(--s2); justify-content:center; margin-bottom:var(--s3); }
.fd-field{
  height:58px; flex:0 1 72px; min-width:0; padding:0 var(--s2); border-radius:var(--r-md); border:2px dashed var(--line);
  background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  -webkit-user-select:none; user-select:none; transition:border-color var(--d-fast), background-color var(--d-fast);
}
.fd-field.wide{ flex-basis:106px; }
.fd-field.filled{ border-style:solid; }
.fd-field.active{ border-style:solid; border-color:var(--accent); background:var(--tonal); }
.fd-field-lbl{ font-size:11px; font-weight:600; color:var(--text-2); }
.fd-field-val{ font-size:20px; font-weight:750; line-height:1.15; font-variant-numeric:tabular-nums; }
.fd-ph{ color:var(--text-3); font-weight:650; }
.fd-kb{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:300px; margin:0 auto; }
.fd-key{ height:50px; border:0; border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font-size:20px; font-weight:650; display:grid; place-items:center; -webkit-user-select:none; user-select:none; transition:transform var(--d) var(--ease-spring), border-radius var(--d) var(--ease-spring); }
.fd-key:active{ transform:scale(.94); border-radius:var(--r-xs); }
.fd-key svg.i{ width:22px; height:22px; }
.fd-key-ok{ background:var(--accent); color:var(--on-accent); }
.fd-key-ok:disabled{ background:var(--surface-2); color:var(--text-3); cursor:default; }
.fd-key-ok svg.i{ stroke-width:2.4; }
.fd-legend{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap; margin-top:var(--s4); font-size:var(--t-cap); color:var(--text-2); }
.fd-legend span{ display:flex; align-items:center; gap:5px; }
.fd-legend i{ width:11px; height:11px; border-radius:3px; }
@media (max-width:600px){ .fd-history{ max-height:124px; } }
@media (max-height:730px){
  .fd-history{ max-height:92px; } .fd-field{ height:50px; } .fd-key{ height:44px; }
  .game-view .hero{ padding-bottom:var(--s3); }
}
@media (max-width:380px){ .fd-chip{ min-width:48px; height:36px; font-size:15px; } .fd-chip.wide{ min-width:74px; }  }

/* Sudoku */
.su-grid{ display:grid; grid-template-columns:repeat(9,1fr); max-width:400px; margin:0 auto var(--s4); aspect-ratio:1; border:2px solid var(--text); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); }
.su-cell{ display:grid; place-items:center; padding:0; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); color:var(--accent); font-size:clamp(16px, 4.6vw, 21px); font-weight:600; font-variant-numeric:tabular-nums; -webkit-user-select:none; user-select:none; }
.su-cell:nth-child(9n){ border-right:0; }
.su-cell:nth-child(9n+3), .su-cell:nth-child(9n+6){ border-right:2px solid var(--text); }
.su-cell:nth-child(n+19):nth-child(-n+27), .su-cell:nth-child(n+46):nth-child(-n+54){ border-bottom:2px solid var(--text); }
.su-cell:nth-child(n+73){ border-bottom:0; }
.su-cell.fixed{ color:var(--text); font-weight:750; }
.su-cell.peer{ background:var(--surface-2); }
.su-cell.same{ background:var(--surface-3); }
.su-cell.selected{ background:var(--tonal); color:var(--on-tonal); }
.su-cell.conflict{ color:var(--danger); }
.su-cell:focus-visible{ outline-offset:-3px; border-radius:2px; }
.su-pad{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:400px; margin:0 auto; }
.su-key{ height:54px; border:0; border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font-size:19px; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:transform var(--d) var(--ease-spring); }
.su-key:active{ transform:scale(.94); }
.su-key small{ font-size:11px; font-weight:600; color:var(--text-2); line-height:1; }
.su-key.done{ background:var(--surface-2); color:var(--text-3); }
.su-key.done small{ color:var(--ok); }
.su-key.erase{ color:var(--danger); }
.su-key svg.i{ width:22px; height:22px; }

/* Parejas */
.pr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); max-width:400px; margin:0 auto var(--s4); }
.pr-card{ aspect-ratio:1; perspective:700px; padding:0; border:0; background:transparent; }
.pr-inner{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform var(--d-slow) var(--ease-spring); }
.pr-card.flipped .pr-inner{ transform:rotateY(180deg); }
.pr-face{ position:absolute; inset:0; display:grid; place-items:center; border-radius:var(--r-md); -webkit-backface-visibility:hidden; backface-visibility:hidden; font-size:clamp(26px, 9vw, 40px); -webkit-user-select:none; user-select:none; }
.pr-back{ background:var(--tonal); color:var(--on-tonal); border:1px solid color-mix(in oklch, var(--accent) 18%, transparent); }
.pr-back svg.i{ width:26%; height:26%; opacity:.55; }
.pr-front{ background:var(--surface); border:2px solid var(--accent); transform:rotateY(180deg); }
.pr-card.matched .pr-front{ border-color:var(--line); background:var(--surface-2); }
.pr-card.matched, .pr-grid.previewing .pr-card{ cursor:default; }
.pr-intro{ margin-bottom:var(--s4); }
.pr-preview{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-lg); background:var(--tonal); color:var(--on-tonal); font-weight:600; }
.pr-count{ font-size:var(--t-title); font-weight:750; min-width:2ch; text-align:center; }

/* Conexiones */
.cn-group{ border-radius:var(--r-md); padding:var(--s3); margin-bottom:var(--s2); text-align:center; color:var(--on-cn); }
.cn-group.is-new{ animation:row-in var(--d-slow) var(--ease-spring); }
.cn-group[data-c="yellow"]{ background:var(--cn-yellow); }
.cn-group[data-c="green"]{ background:var(--cn-green); }
.cn-group[data-c="blue"]{ background:var(--cn-blue); }
.cn-group[data-c="purple"]{ background:var(--cn-purple); }
.cn-group.revealed{ opacity:.8; }
.cn-label{ margin:0; font-weight:750; font-size:var(--t-sub); }
.cn-words{ margin:2px 0 0; font-size:var(--t-cap); font-weight:600; }
.cn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:var(--s3) 0 var(--s4); }
.cn-tile{ min-height:64px; padding:var(--s2) 2px; border:0; border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font-size:12.5px; font-weight:700; line-height:1.15; word-break:break-word; transition:transform var(--d) var(--ease-spring), background-color var(--d-fast), color var(--d-fast); }
.cn-tile:active{ transform:scale(.95); }
.cn-tile[aria-pressed="true"]{ background:var(--text); color:var(--bg); }
.hint-dot{ width:12px; height:12px; border-radius:50%; flex:none; margin-top:4px; }
@media (max-width:380px){ .cn-tile{ font-size:11px; min-height:58px; } }

/* Ahorcado */
.ah-figure{ display:flex; justify-content:center; color:var(--text-2); margin-bottom:var(--s2); }
.ah-figure .body{ stroke:var(--danger); }
.ah-word{ display:flex; gap:6px; justify-content:center; margin-bottom:var(--s5); }
.ah-slot{ flex:0 1 36px; min-width:0; height:46px; border-bottom:3px solid var(--text-3); display:grid; place-items:center; font-size:24px; font-weight:750; }
.ah-slot.hit{ border-color:var(--ok); }
.ah-slot.missed{ border-color:var(--danger); color:var(--danger); }
@media (max-width:380px){ .ah-slot{ height:40px; font-size:20px; } }

/* Anagrama */
.an-slots, .an-tiles{ display:flex; gap:var(--s2); justify-content:center; }
.an-slots{ margin-bottom:var(--s5); min-height:54px; }
.an-slot{ flex:0 1 46px; min-width:0; height:54px; padding:0; border:2px dashed var(--line); border-radius:var(--r-sm); background:transparent; display:grid; place-items:center; font-size:22px; font-weight:750; color:var(--text); }
.an-slot.filled{ border-style:solid; border-color:var(--accent); background:var(--tonal); color:var(--on-tonal); }
.an-slot.final{ cursor:default; }
.an-slot.final.won{ border-color:var(--ok); background:var(--ok-bg); color:var(--ok); }
.an-slot.final.lost{ border-color:var(--danger); background:var(--danger-bg); color:var(--danger); }
.an-tile{ flex:0 1 48px; min-width:0; height:56px; border:0; border-radius:var(--r-sm); background:var(--surface-3); font-size:22px; font-weight:750; color:var(--text); transition:transform var(--d) var(--ease-spring), opacity var(--d-fast); }
.an-tile:active{ transform:scale(.92); }
.an-tile:disabled{ opacity:.25; cursor:default; }
.an-failed{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; margin-top:var(--s3); }
.an-failed span{ background:var(--danger-bg); color:var(--danger); font-weight:700; font-size:var(--t-sub); padding:4px 10px; border-radius:var(--r-pill); text-decoration:line-through; }
@media (max-width:380px){ .an-slot{ height:48px; font-size:19px; } .an-tile{ height:50px; font-size:19px; } }

/* Cifras */
.cf-target{ text-align:center; margin-bottom:var(--s4); }
.cf-target .big{ color:var(--accent); }
.cf-tiles{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; margin-bottom:var(--s4); min-height:54px; }
.cf-tile{ min-width:50px; height:54px; padding:0 var(--s2); border:2px solid transparent; border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; transition:transform var(--d) var(--ease-spring), background-color var(--d-fast); }
.cf-tile:active{ transform:scale(.93); }
.cf-tile.derived{ background:var(--tonal); color:var(--on-tonal); }
.cf-tile[aria-pressed="true"], .cf-op[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.cf-ops{ display:flex; gap:var(--s2); justify-content:center; margin-bottom:var(--s4); }
.cf-op{ width:56px; height:50px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:22px; font-weight:700; transition:transform var(--d) var(--ease-spring); }
.cf-op:active{ transform:scale(.93); }
.cf-steps{ list-style:none; margin:0 auto var(--s2); padding:0; max-width:260px; }
.cf-steps li{ text-align:center; color:var(--text-2); padding:3px 0; font-weight:600; font-variant-numeric:tabular-nums; }
.cf-steps strong{ color:var(--text); }

/* Ayuda */
.help-steps{ list-style:none; margin:0 0 var(--s5); padding:0; counter-reset:paso; }
.help-steps li{ display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s2) 0; line-height:1.5; counter-increment:paso; max-width:60ch; }
.help-steps li::before{ content:counter(paso); flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--tonal); color:var(--on-tonal); font-size:var(--t-cap); font-weight:700; margin-top:1px; }
.help-steps strong{ font-weight:650; }
.sheet .sheet-text{ margin:0 0 var(--s5); color:var(--text-2); }
.sheet-scroll{ overflow-y:auto; max-height:calc(92dvh - 40px); }
/* Sin estilos en línea (CSP estricta): todo lo que antes iba en style="" vive aquí */
.sprite{ position:absolute; }
.mark .m1{ background:oklch(58% .15 277); } .mark .m2{ background:oklch(62% .13 165); }
.mark .m3{ background:oklch(68% .15 60); }  .mark .m4{ background:oklch(58% .15 350); }
.btn.flush{ padding-left:0; }
/* Un hue por juego (los 8 rotativos de Vitral): solo tiñen el icono de cada juego */
.card-icon.hue-wordle{ --c-hue:145; } .card-icon.hue-fechas{ --c-hue:40; } .card-icon.hue-sudoku{ --c-hue:265; } .card-icon.hue-pairs{ --c-hue:310; }
.card-icon.hue-connections{ --c-hue:210; } .card-icon.hue-ahorcado{ --c-hue:0; } .card-icon.hue-anagrama{ --c-hue:185; } .card-icon.hue-cifras{ --c-hue:70; }
.card-icon.hue-alert{ --c-hue:25; }
.skel-summary{ height:150px; margin-bottom:var(--s6); }
.skel-short{ width:60%; }
.wd-cell.still{ animation:none; }
.lg-hit{ background:var(--tile-hit); } .lg-near{ background:var(--tile-near); } .lg-miss{ background:var(--tile-miss); }
.hint-dot[data-c="yellow"]{ background:var(--cn-yellow); } .hint-dot[data-c="green"]{ background:var(--cn-green); }
.hint-dot[data-c="blue"]{ background:var(--cn-blue); } .hint-dot[data-c="purple"]{ background:var(--cn-purple); }
.meta-row.center{ justify-content:center; }
.meta-row.spaced{ margin-top:var(--s5); }