/* ═══════════════════════════════════════════════════════════════
   Tato Play — sistema de diseño
   Inspirado en el lenguaje visual de Apple: vidrio esmerilado,
   tipografía apretada, muelles suaves y mucho aire.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:            #f2f2f5;
  --bg-deep:       #e9e9ee;
  --surface:       rgba(255,255,255,.72);
  --surface-solid: #ffffff;
  --surface-2:     rgba(255,255,255,.55);
  --hairline:      rgba(0,0,0,.08);
  --hairline-soft: rgba(0,0,0,.05);

  --ink:      #1d1d1f;
  --ink-2:    rgba(29,29,31,.66);
  --ink-3:    rgba(29,29,31,.42);

  --accent:      #0071e3;
  --accent-2:    #5e5ce6;
  --accent-ink:  #ffffff;
  --accent-glow: rgba(0,113,227,.34);

  --gold:  #ff9f0a;
  --green: #30d158;
  --pink:  #ff375f;

  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05);
  --sh-2: 0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --sh-3: 0 8px 24px rgba(0,0,0,.10), 0 30px 80px rgba(0,0,0,.18);

  --ease:   cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --topbar-h: 58px;
  --tabbar-h: calc(56px + env(safe-area-inset-bottom));
  --gutter: clamp(16px, 4vw, 56px);
  --blur: saturate(180%) blur(24px);
}

:root[data-theme="dark"],
html.dark{
  --bg:            #08080a;
  --bg-deep:       #000000;
  --surface:       rgba(28,28,32,.68);
  --surface-solid: #17171b;
  --surface-2:     rgba(255,255,255,.06);
  --hairline:      rgba(255,255,255,.10);
  --hairline-soft: rgba(255,255,255,.06);

  --ink:   #f5f5f7;
  --ink-2: rgba(245,245,247,.66);
  --ink-3: rgba(245,245,247,.40);

  --accent:      #0a84ff;
  --accent-2:    #6b68ff;
  --accent-glow: rgba(10,132,255,.40);

  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --sh-2: 0 2px 8px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.55);
  --sh-3: 0 10px 30px rgba(0,0,0,.55), 0 40px 100px rgba(0,0,0,.7);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* El atributo `hidden` debe ganarle a cualquier `display` que pongamos abajo. */
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  padding-bottom:var(--tabbar-h);
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.playing{ overflow:hidden; padding-bottom:0 }
body.locked{ overflow:hidden }

/* Fondo ambiental: dos manchas de color muy suaves */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(55vw 55vw at 92% 4%,  color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 60%);
  opacity:.75;
  transition:opacity .6s var(--ease);
}

img,svg{ display:block; max-width:100% }
button,input,select{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
::selection{ background:color-mix(in srgb, var(--accent) 30%, transparent) }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px }

/* Barras de scroll horizontales invisibles pero funcionales */
.no-bar{ scrollbar-width:none; -ms-overflow-style:none }
.no-bar::-webkit-scrollbar{ display:none }

/* ---------- 3. Tipografía ---------- */
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.page-title{ font-size:clamp(34px,6.4vw,54px); font-weight:750; letter-spacing:-.035em; line-height:1.05 }
.page-sub{ margin-top:10px; font-size:clamp(15px,2.2vw,19px); color:var(--ink-2); max-width:52ch }
.sec-title{ font-size:clamp(19px,2.6vw,24px); font-weight:700; letter-spacing:-.02em; margin:38px 0 14px }
.sec-title.small{ font-size:17px; margin:26px 0 10px }

/* ---------- 4. Botones ---------- */
.btn{
  --btn-bg:var(--accent); --btn-ink:var(--accent-ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font-weight:600; letter-spacing:-.01em;
  border-radius:var(--r-full); padding:12px 24px; font-size:15px;
  background:var(--btn-bg); color:var(--btn-ink);
  transition:transform .28s var(--spring), background .2s, box-shadow .3s var(--ease), opacity .2s;
  will-change:transform;
}
.btn:hover{ transform:scale(1.045) }
.btn:active{ transform:scale(.955) }
.btn.primary{ box-shadow:0 8px 24px var(--accent-glow) }
.btn.big{ padding:15px 40px; font-size:17px; width:100% }
.btn.ghost{
  --btn-bg:var(--surface-2); --btn-ink:var(--ink);
  border:1px solid var(--hairline);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  flex:1;
}
.btn.ghost:hover{ background:color-mix(in srgb, var(--ink) 10%, transparent) }
.btn.danger{ color:var(--pink) }
.btn.breath{ animation:breath 2.8s var(--ease) infinite }
@keyframes breath{
  0%,100%{ box-shadow:0 8px 24px var(--accent-glow) }
  50%    { box-shadow:0 14px 42px color-mix(in srgb, var(--accent) 55%, transparent) }
}
.text-btn{
  background:none; border:0; cursor:pointer; color:var(--accent);
  font-weight:600; font-size:15px; padding:8px 4px;
  transition:opacity .2s;
}
.text-btn:active{ opacity:.5 }

.icon-btn{
  display:grid; place-items:center; flex:0 0 auto;
  width:40px; height:40px; border-radius:var(--r-full);
  border:1px solid var(--hairline); background:var(--surface-2);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  cursor:pointer; transition:transform .25s var(--spring), background .2s;
}
.icon-btn:hover{ transform:scale(1.09) }
.icon-btn:active{ transform:scale(.9) }
.icon-btn svg{ width:19px; height:19px; fill:var(--ink) }
.icon-btn.glass{
  width:44px; height:44px;
  background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.6);
  box-shadow:0 6px 20px rgba(0,0,0,.10);
}
.icon-btn.glass svg{ fill:#1d1d1f }
.player.night .icon-btn.glass{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24) }
.player.night .icon-btn.glass svg{ fill:#fff }

/* ---------- 5. Barra superior ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;
  display:flex; align-items:center; gap:18px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
#topbar.scrolled{ border-bottom-color:var(--hairline) }
body.playing #topbar, body.playing #tabbar{ opacity:0; pointer-events:none }

.brand{ display:flex; align-items:center; gap:9px; flex:0 0 auto }
.brand-mark{ width:28px; height:28px; border-radius:8px; overflow:hidden; box-shadow:0 3px 10px var(--accent-glow) }
.brand-mark svg{ width:100%; height:100% }
.brand-name{ font-size:18px; font-weight:750; letter-spacing:-.03em }
.brand-name span{ color:var(--ink-3); font-weight:600 }

.tabs{ display:flex; gap:4px; margin-left:12px }
.tabs a{
  padding:7px 15px; border-radius:var(--r-full);
  font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:color .25s, background .25s;
}
.tabs a:hover{ color:var(--ink); background:var(--surface-2) }
.tabs a.on{ color:var(--ink); background:var(--surface-2) }
@media (max-width:800px){ .tabs{ display:none } }

.top-actions{ margin-left:auto; display:flex; align-items:center; gap:9px }
.ic-moon{ display:none }
:root[data-theme="dark"] .ic-sun{ display:none }
:root[data-theme="dark"] .ic-moon{ display:block }

.avatar{
  width:34px; height:34px; border-radius:var(--r-full);
  display:grid; place-items:center; font-size:14px; font-weight:750; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 14px var(--accent-glow);
  transition:transform .25s var(--spring);
}
.avatar:hover{ transform:scale(1.09) }

/* ---------- 6. Vistas ---------- */
#app{ padding-top:calc(var(--topbar-h) + env(safe-area-inset-top)) }
.view{ animation:viewIn .5s var(--ease) both }
@keyframes viewIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.page-head{ padding:clamp(28px,5vw,54px) var(--gutter) 8px }

/* ---------- 7. Hero ---------- */
.hero{ padding:clamp(14px,2.4vw,26px) var(--gutter) 0 }
.hero-card{
  position:relative; overflow:hidden;
  border-radius:clamp(22px,3.2vw,34px);
  min-height:clamp(360px,52vh,540px);
  display:flex; align-items:flex-end;
  box-shadow:var(--sh-3);
  isolation:isolate;
  background:linear-gradient(118deg, var(--c1,#8ec5ff) 0%, var(--c2,#ffb877) 100%);
}
/* La ilustración es cuadrada: la anclamos a la derecha para que no se recorte. */
.hero-art{
  position:absolute; top:0; right:0; bottom:0; aspect-ratio:1/1; z-index:0;
  /* Se disuelve hacia la izquierda para que no se vea el corte con el degradado. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 26%);
          mask-image:linear-gradient(to right, transparent 0%, #000 26%);
}
.hero-art svg{ width:100%; height:100% }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(0,0,0,.76) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.12) 66%, transparent 88%),
    linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 46%);
}
@media (max-width:760px){
  .hero-art{
    top:0; left:0; right:0; bottom:auto; width:100%; height:58%; aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 60%, transparent 100%);
  }
  .hero-scrim{
    background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.76) 32%,
                                       rgba(0,0,0,.32) 54%, rgba(0,0,0,.05) 76%, transparent 100%);
  }
}
.hero-inner{
  position:relative; z-index:2; color:#fff;
  padding:clamp(24px,4vw,48px);
  max-width:640px;
  animation:heroIn .8s var(--ease) both .1s;
}
@keyframes heroIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:6px 13px; border-radius:var(--r-full);
}
.hero-title{
  margin-top:16px;
  font-size:clamp(44px,8.4vw,88px); font-weight:800; letter-spacing:-.05em; line-height:.94;
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero-tag{ margin-top:14px; font-size:clamp(15px,2.1vw,19px); color:rgba(255,255,255,.88); max-width:44ch; line-height:1.45 }
.hero-actions{ margin-top:26px; display:flex; gap:11px; flex-wrap:wrap }
.hero-actions .btn.ghost{
  flex:0 0 auto; background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.28);
}
.hero-actions .btn.ghost:hover{ background:rgba(255,255,255,.3) }

/* ---------- 8. Filas horizontales ---------- */
.rows{ padding:clamp(24px,4vw,44px) 0 40px }
.row{ margin-bottom:clamp(28px,4vw,44px) }
.row-head{
  display:flex; align-items:baseline; gap:12px;
  padding:0 var(--gutter) 14px;
}
.row-title{ font-size:clamp(19px,2.5vw,25px); font-weight:700; letter-spacing:-.025em }
.row-note{ font-size:13.5px; color:var(--ink-3); font-weight:500 }
.row-scroll{ position:relative }
.rail{
  display:flex; gap:clamp(12px,1.6vw,20px);
  padding:6px var(--gutter) 20px;
  overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:var(--gutter);
  scroll-behavior:smooth;
}
.rail > *{ scroll-snap-align:start }
.rail-arrow{
  position:absolute; top:50%; transform:translateY(-60%);
  width:44px; height:44px; z-index:5; opacity:0; pointer-events:none;
  background:var(--surface-solid); box-shadow:var(--sh-2); border-color:transparent;
}
.rail-arrow.left{ left:calc(var(--gutter) - 22px) }
.rail-arrow.right{ right:calc(var(--gutter) - 22px) }
.row-scroll:hover .rail-arrow:not([disabled]){ opacity:1; pointer-events:auto }
@media (hover:none){ .rail-arrow{ display:none } }

/* ---------- 9. Tarjetas de juego ---------- */
.card{
  position:relative; flex:0 0 auto;
  width:clamp(210px,25vw,306px);
  cursor:pointer; border:0; background:none; text-align:left;
  transition:transform .4s var(--ease);
  will-change:transform;
}
.card-art{
  position:relative; overflow:hidden;
  aspect-ratio:16/10; border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
  background:var(--surface-solid);
}
.card-art svg{ width:100%; height:100%; display:block }
.card-art::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  pointer-events:none;
}
.card-play{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  opacity:0; transition:opacity .3s var(--ease);
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05));
}
.card-play i{
  width:52px; height:52px; border-radius:var(--r-full);
  background:rgba(255,255,255,.92); display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transform:scale(.7); transition:transform .4s var(--spring);
}
.card-play svg{ width:22px; height:22px; fill:#1d1d1f; margin-left:3px }
.card:hover{ transform:translateY(-6px) }
.card:hover .card-art{ box-shadow:var(--sh-3) }
.card:hover .card-play{ opacity:1 }
.card:hover .card-play i{ transform:scale(1) }
.card:active{ transform:translateY(-2px) scale(.985) }

.card-meta{ padding:11px 3px 0 }
.card-name{ font-size:15.5px; font-weight:650; letter-spacing:-.015em }
.card-sub{ margin-top:2px; font-size:13px; color:var(--ink-3); display:flex; gap:7px; align-items:center }
.card-sub b{ color:var(--gold); font-weight:650 }

.card-flag{
  position:absolute; top:10px; left:10px; z-index:4;
  font-size:10.5px; font-weight:750; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-full);
  background:rgba(0,0,0,.5); color:#fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.card-flag.new{ background:linear-gradient(135deg,#ff375f,#ff9f0a) }
.card-flag.hot{ background:linear-gradient(135deg,#0a84ff,#5e5ce6) }

/* Fila «Continuar jugando»: tarjetas con progreso */
.card.resume .card-art{ aspect-ratio:16/9 }
.resume-bar{
  position:absolute; left:0; right:0; bottom:0; height:4px; z-index:4;
  background:rgba(255,255,255,.25);
}
.resume-bar i{ display:block; height:100%; background:var(--accent) }

/* Fila destacada: tarjetas verticales grandes */
.rail.tall .card{ width:clamp(160px,20vw,214px) }
.rail.tall .card-art{ aspect-ratio:3/4 }

/* ---------- 10. Cuadrícula de todos los juegos ---------- */
.filters{ display:flex; gap:8px; margin-top:22px; overflow-x:auto; padding-bottom:6px }
.filter{
  flex:0 0 auto; padding:8px 16px; border-radius:var(--r-full);
  border:1px solid var(--hairline); background:var(--surface-2);
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:all .25s var(--ease);
}
.filter:hover{ color:var(--ink) }
.filter.on{ background:var(--ink); color:var(--bg); border-color:transparent }
.grid{
  display:grid; gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,244px),1fr));
  padding:24px var(--gutter) 60px;
}
.grid .card{ width:auto }

/* ---------- 11. Perfil ---------- */
.stat-grid{
  display:grid; gap:12px; padding:14px var(--gutter) 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.stat{
  background:var(--surface); border:1px solid var(--hairline);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1);
}
.stat b{ display:block; font-size:clamp(28px,4vw,38px); font-weight:780; letter-spacing:-.035em; line-height:1 }
.stat span{ display:block; margin-top:6px; font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) }

#view-me .sec-title{ padding:0 var(--gutter) }
.ach-grid{
  display:grid; gap:12px; padding:0 var(--gutter);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr));
}
.ach{
  display:flex; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:14px 16px;
  opacity:.45; filter:grayscale(1);
  transition:opacity .4s var(--ease), filter .4s var(--ease), transform .3s var(--spring);
}
.ach.got{ opacity:1; filter:none }
.ach.got:hover{ transform:translateY(-3px) }
.ach-ic{ font-size:26px; line-height:1; flex:0 0 auto }
.ach-txt b{ display:block; font-size:14.5px; font-weight:650; letter-spacing:-.01em }
.ach-txt span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:1px }

.score-list{ padding:0 var(--gutter); display:flex; flex-direction:column; gap:2px }
.score-row{
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid transparent;
  transition:background .25s, transform .25s var(--ease);
  cursor:pointer;
}
.score-row:hover{ background:var(--surface); border-color:var(--hairline); transform:translateX(3px) }
.score-dot{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; box-shadow:var(--sh-1) }
.score-name{ font-weight:600; font-size:15px; flex:1; min-width:0 }
.score-name small{ display:block; font-weight:500; font-size:12.5px; color:var(--ink-3) }
.score-val{ font-weight:750; font-size:18px; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.score-val.none{ color:var(--ink-3); font-weight:600; font-size:14px }

.danger-zone{ padding:44px var(--gutter) 70px; display:flex; justify-content:center }
.danger-zone .btn{ flex:0 0 auto }

/* ---------- 12. Pie ---------- */
.site-foot{
  padding:44px var(--gutter) 70px; text-align:center;
  border-top:1px solid var(--hairline-soft); margin-top:20px;
}
.foot-claim{ font-size:15.5px; color:var(--ink-2) }
.foot-claim b{ color:var(--ink); font-weight:650 }
.foot-sub{ margin-top:7px; font-size:13px; color:var(--ink-3) }

/* ---------- 13. Buscador ---------- */
.search-layer{
  position:fixed; inset:0; z-index:90;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
  animation:fadeIn .3s var(--ease) both;
  overflow-y:auto;
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.search-panel{ max-width:860px; margin:0 auto; padding:calc(env(safe-area-inset-top) + 18px) 20px 40px }
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-solid); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:6px 8px 6px 14px; box-shadow:var(--sh-2);
}
.search-bar svg{ width:19px; height:19px; fill:var(--ink-3); flex:0 0 auto }
.search-bar input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:17px; padding:10px 0;
}
.search-bar input::-webkit-search-cancel-button{ display:none }
.search-results{ margin-top:22px; display:flex; flex-direction:column; gap:4px }
.sres{
  display:flex; align-items:center; gap:14px; padding:11px 12px;
  border-radius:var(--r-md); cursor:pointer; border:0; background:none; width:100%; text-align:left;
  transition:background .2s;
}
.sres:hover{ background:var(--surface-2) }
.sres-art{ width:78px; aspect-ratio:16/10; border-radius:11px; overflow:hidden; flex:0 0 auto; box-shadow:var(--sh-1) }
.sres-art svg{ width:100%; height:100% }
.sres b{ display:block; font-size:15.5px; font-weight:650 }
.sres span{ display:block; font-size:13px; color:var(--ink-3); margin-top:1px }
.search-empty{ text-align:center; padding:60px 20px; color:var(--ink-3) }
.search-empty b{ display:block; font-size:19px; color:var(--ink-2); margin-bottom:6px }

/* ---------- 14. Ficha de juego ---------- */
.sheet-layer{ position:fixed; inset:0; z-index:95; display:grid; place-items:center }
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:fadeIn .35s var(--ease) both;
}
.sheet{
  position:relative; z-index:2;
  width:min(560px,100%); max-height:min(92dvh,860px); overflow-y:auto;
  background:var(--surface-solid); border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  animation:sheetIn .5s var(--ease) both;
}
@keyframes sheetIn{ from{ opacity:0; transform:translateY(28px) scale(.96) } to{ opacity:1; transform:none } }
.sheet-close{ position:absolute; top:14px; right:14px; z-index:5; background:rgba(0,0,0,.4); border-color:transparent }
.sheet-close svg{ fill:#fff }
.sheet-art{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-deep) }
.sheet-art svg{ width:100%; height:100% }
.sheet-body{ padding:22px clamp(20px,4vw,30px) 30px }
.sheet-title{ font-size:clamp(30px,5vw,42px); font-weight:780; letter-spacing:-.04em; line-height:1.03; margin-top:8px }
.sheet-tag{ margin-top:12px; font-size:16px; color:var(--ink-2); line-height:1.5 }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px }
.chip{
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--hairline);
  padding:5px 12px; border-radius:var(--r-full);
}
.sheet-actions{ margin-top:22px }
.sheet-stats{ display:flex; gap:9px; margin-top:16px }
.sheet-stats > div{
  flex:1; text-align:center; padding:13px 6px;
  background:var(--surface-2); border:1px solid var(--hairline-soft); border-radius:var(--r-md);
}
.sheet-stats b{ display:block; font-size:21px; font-weight:750; letter-spacing:-.02em }
.sheet-stats span{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) }
.howto{ list-style:none; counter-reset:h; display:flex; flex-direction:column; gap:9px }
.howto li{
  counter-increment:h; position:relative; padding-left:34px;
  font-size:14.5px; color:var(--ink-2); line-height:1.5;
}
.howto li::before{
  content:counter(h); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:var(--r-full);
  background:var(--accent); color:#fff;
  font-size:11.5px; font-weight:750; display:grid; place-items:center;
}

/* ---------- 15. Reproductor ---------- */
.player{ position:fixed; inset:0; z-index:100; background:var(--bg-deep); overscroll-behavior:none }
#stage{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none }

.hud{ position:absolute; inset:0; z-index:5; pointer-events:none }
.hud > *{ pointer-events:none }
.hud .icon-btn{ pointer-events:auto }
#pBack{ position:absolute; top:max(14px,env(safe-area-inset-top)); left:14px }
.hud-right{
  position:absolute; top:max(14px,env(safe-area-inset-top)); right:14px;
  display:flex; gap:9px;
}
#pSound .ic-off{ display:none }
.player.muted #pSound .ic-on{ display:none }
.player.muted #pSound .ic-off{ display:block }

.score-wrap{
  position:absolute; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  text-align:center; transition:opacity .35s var(--ease);
}
.score{
  font-size:clamp(50px,10vw,88px); font-weight:800; letter-spacing:-.05em; line-height:1;
  color:rgba(29,29,31,.9); font-variant-numeric:tabular-nums;
  transition:color .6s var(--ease);
}
.player.night .score{ color:rgba(255,255,255,.95) }
.score.pop{ animation:scorePop .34s var(--spring) }
@keyframes scorePop{ 0%{ transform:scale(1) } 42%{ transform:scale(1.16) } 100%{ transform:scale(1) } }
.best-chip{
  display:inline-block; margin-top:8px;
  font-size:12.5px; font-weight:600; color:rgba(29,29,31,.55);
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:5px 13px; border-radius:var(--r-full); white-space:nowrap;
  transition:all .6s var(--ease);
}
.best-chip b{ color:#1d1d1f }
.player.night .best-chip{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.7) }
.player.night .best-chip b{ color:#fff }

.badge-pill{
  position:absolute; top:clamp(140px,24vh,215px); left:50%;
  display:flex; align-items:baseline; gap:8px;
  background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-radius:var(--r-full); padding:8px 19px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  transform:translateX(-50%);
  transition:opacity .25s var(--ease), transform .35s var(--spring), background .3s;
}
.badge-pill span{ font-size:11.5px; font-weight:700; letter-spacing:.12em; color:rgba(29,29,31,.55) }
.badge-pill b{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:#1d1d1f }
.badge-pill.is-hidden{ opacity:0; transform:translateX(-50%) translateY(-10px) scale(.85) }
.badge-pill.hot{ background:linear-gradient(135deg,#0a84ff,#5e5ce6); border-color:transparent; box-shadow:0 10px 34px rgba(52,110,245,.5) }
.badge-pill.hot span, .badge-pill.hot b{ color:#fff }
.badge-pill.pop{ animation:pillPop .36s var(--spring) }
@keyframes pillPop{
  0%{ transform:translateX(-50%) scale(.82) }
  52%{ transform:translateX(-50%) scale(1.12) }
  100%{ transform:translateX(-50%) scale(1) }
}

.meter{
  position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  width:min(280px,62vw); height:6px; border-radius:var(--r-full);
  background:rgba(29,29,31,.14); overflow:hidden;
  transition:opacity .3s var(--ease);
}
.player.night .meter{ background:rgba(255,255,255,.18) }
.meter i{ display:block; height:100%; width:100%; background:var(--accent); border-radius:inherit; transform-origin:left; transition:transform .1s linear, background .3s }
.meter.low i{ background:var(--pink) }
.is-hidden{ opacity:0 !important; pointer-events:none !important }
/* Estos sí deben desaparecer del flujo, si no dejan un hueco. */
.record-badge.is-hidden, .chip-record.is-hidden{ display:none !important }

.toast{
  position:absolute; top:max(14px,env(safe-area-inset-top)); left:50%; z-index:20;
  transform:translate(-50%,-90px);
  background:rgba(29,29,31,.88); color:#fff;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:14px; font-weight:600; padding:10px 22px; border-radius:var(--r-full);
  transition:transform .5s var(--spring); white-space:nowrap; max-width:92vw;
}
.toast.show{ transform:translate(-50%,0) }

/* Capas del reproductor (inicio / pausa / fin) */
.p-overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.p-overlay.is-hidden{ opacity:0; transform:scale(1.04); pointer-events:none }
#pStart{ background:transparent }
#pPause{ background:rgba(0,0,0,.28); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }

.p-start{ text-align:center; display:flex; flex-direction:column; align-items:center; max-width:420px }
.p-start > *{ animation:fadeUp .75s var(--ease) both }
.p-start > *:nth-child(1){ animation-delay:.04s } .p-start > *:nth-child(2){ animation-delay:.12s }
.p-start > *:nth-child(3){ animation-delay:.2s }  .p-start > *:nth-child(4){ animation-delay:.28s }
.p-start > *:nth-child(5){ animation-delay:.36s } .p-start > *:nth-child(6){ animation-delay:.44s }
.p-start > *:nth-child(7){ animation-delay:.52s }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
.p-start-art{ width:96px; height:96px; margin-bottom:16px; animation:float 4.2s ease-in-out infinite }
.p-start-art svg{ width:100%; height:100%; border-radius:24px; box-shadow:var(--sh-3) }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }
.p-title{ font-size:clamp(48px,13vw,92px); font-weight:800; letter-spacing:-.05em; line-height:.95; color:var(--ink) }
.player.night .p-title, .player.night .p-tag, .player.night .p-hint{ color:#fff }
.p-tag{ margin-top:12px; font-size:16.5px; color:var(--ink-2); line-height:1.45; max-width:34ch }
.player.night .p-tag{ color:rgba(255,255,255,.72) }
.p-start .btn{ margin-top:24px; width:auto; min-width:190px }
.p-hint{ margin-top:20px; font-size:13px; color:var(--ink-3); font-weight:500 }
.player.night .p-hint{ color:rgba(255,255,255,.5) }
.chip-record{
  margin-top:16px; font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:7px 17px; border-radius:var(--r-full); color:#1d1d1f;
}
.player.night .chip-record{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); color:#fff }
.key{
  display:inline-block; border:1px solid var(--hairline); border-bottom-width:2px;
  border-radius:6px; padding:1px 7px; font-size:12px; background:var(--surface-2);
}

.glass-card{
  width:min(420px,100%); text-align:center; padding:34px 28px 26px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); color:#1d1d1f;
  animation:sheetIn .5s var(--ease) both;
}
.glass-card.narrow{ width:min(330px,100%) }
:root[data-theme="dark"] .glass-card, .player.night .glass-card{
  background:rgba(30,30,34,.78); border-color:rgba(255,255,255,.14); color:#f5f5f7;
}
.glass-card .eyebrow{ color:rgba(29,29,31,.4) }
:root[data-theme="dark"] .glass-card .eyebrow, .player.night .glass-card .eyebrow{ color:rgba(255,255,255,.45) }
.card-title{ font-size:26px; font-weight:750; letter-spacing:-.03em; margin:6px 0 22px }
.final{ font-size:clamp(60px,15vw,84px); font-weight:800; letter-spacing:-.05em; line-height:1; margin-top:6px; font-variant-numeric:tabular-nums }
.final-label{ font-size:13.5px; font-weight:600; color:rgba(29,29,31,.5); margin-top:2px }
:root[data-theme="dark"] .final-label, .player.night .final-label{ color:rgba(255,255,255,.5) }
.record-badge{
  display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#0a84ff,#5e5ce6);
  padding:8px 18px; border-radius:var(--r-full);
  box-shadow:0 8px 22px rgba(10,132,255,.42);
  animation:pillPop .55s var(--spring);
}
.stats-row{ display:flex; gap:9px; margin-top:22px }
.stats-row > div{
  flex:1; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05);
  border-radius:var(--r-md); padding:12px 5px;
}
:root[data-theme="dark"] .stats-row > div, .player.night .stats-row > div{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.09);
}
.stats-row b{ display:block; font-size:22px; font-weight:780; letter-spacing:-.02em }
.stats-row span{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.55 }
.glass-card .btn.big{ margin-top:20px }
.btn-row{ display:flex; gap:9px; margin-top:10px }
.next-up{ margin-top:18px; font-size:13px; color:rgba(29,29,31,.5) }
:root[data-theme="dark"] .next-up, .player.night .next-up{ color:rgba(255,255,255,.5) }
.next-up a{ color:var(--accent); font-weight:650 }

/* ---------- 16. Barra inferior móvil ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:var(--tabbar-h); padding-bottom:env(safe-area-inset-bottom);
  display:none; align-items:stretch;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--hairline);
  transition:opacity .3s var(--ease);
}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-3); transition:color .25s;
}
.tabbar a svg{ width:23px; height:23px; fill:currentColor }
.tabbar a span{ font-size:10.5px; font-weight:600; letter-spacing:-.005em }
.tabbar a.on{ color:var(--accent) }
@media (max-width:800px){ .tabbar{ display:flex } }
@media (min-width:801px){ body{ padding-bottom:0 } }

/* ---------- 17. Aviso flotante global ---------- */
.app-toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar-h) + 18px); z-index:120;
  transform:translate(-50%,26px); opacity:0; pointer-events:none;
  background:rgba(29,29,31,.9); color:#fff;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:14px; font-weight:600; padding:11px 22px; border-radius:var(--r-full);
  box-shadow:var(--sh-2); max-width:88vw; text-align:center;
  transition:transform .45s var(--spring), opacity .3s var(--ease);
}
.app-toast.show{ transform:translate(-50%,0); opacity:1 }

/* ---------- 18. Ajustes finos por tamaño ---------- */
@media (max-width:560px){
  .hero-card{ min-height:clamp(400px,62vh,560px) }
  .hero-actions .btn{ flex:1 1 auto }
  .card{ width:min(74vw,300px) }
  .rail.tall .card{ width:min(46vw,190px) }
  .sheet{ width:100%; max-height:94dvh; border-radius:var(--r-xl) var(--r-xl) 0 0; align-self:flex-end }
  .sheet-layer{ align-items:flex-end }
  @keyframes sheetIn{ from{ opacity:0; transform:translateY(60px) } to{ opacity:1; transform:none } }
  .stats-row b{ font-size:19px }
}

@media (min-width:1600px){ :root{ --gutter:6vw } }

/* ---------- 19. Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   20. Juegos del día — el panel de la portada
   ═══════════════════════════════════════════════════════════════ */

.today{
  margin:clamp(14px,2.4vw,26px) var(--gutter) 0;
  padding:clamp(18px,2.6vw,26px) clamp(16px,2.4vw,26px) clamp(14px,2vw,20px);
  border-radius:clamp(20px,2.6vw,28px);
  background:var(--surface);
  border:1px solid var(--hairline);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-1);
}
.today-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:clamp(14px,2vw,18px);
}
.today-title{
  margin-top:7px; font-size:clamp(20px,2.7vw,27px); font-weight:750;
  letter-spacing:-.03em; line-height:1.15; text-wrap:balance;
}
.today-meta{ display:flex; align-items:center; gap:8px; flex:0 0 auto; padding-top:2px }
.today-streak,
.today-count{
  display:inline-flex; align-items:baseline; gap:4px;
  padding:6px 12px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--hairline);
  font-size:13px; font-weight:600; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.today-streak b, .today-count b{ color:var(--ink); font-size:15px; font-weight:750 }

.today-grid{
  display:grid; gap:clamp(9px,1.2vw,13px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,146px),1fr));
}
.today-card{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 14px 13px; border-radius:var(--r-md); cursor:pointer; text-align:left;
  background:var(--surface-solid); border:1px solid var(--hairline);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .3s var(--spring), box-shadow .3s var(--ease), border-color .25s;
}
:root[data-theme="dark"] .today-card{ background:rgba(255,255,255,.045) }
.today-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--acc) 40%,transparent) }
.today-card:active{ transform:translateY(0) scale(.985) }
.today-art{
  position:relative; width:46px; height:46px; border-radius:12px; overflow:visible;
  margin-bottom:9px;
}
.today-art svg{ width:100%; height:100%; border-radius:12px;
  box-shadow:0 3px 10px color-mix(in srgb,var(--acc) 28%,transparent) }
.today-tick{
  position:absolute; right:-5px; bottom:-5px; width:20px; height:20px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--green); border:2px solid var(--surface-solid);
}
.today-tick svg{ width:12px; height:12px; fill:#fff; box-shadow:none }
.today-name{ font-size:15.5px; font-weight:750; letter-spacing:-.02em; line-height:1.2 }
.today-desc{
  font-size:12px; color:var(--ink-3); line-height:1.3; margin-top:3px;
  min-height:2.6em; display:block;
}
.today-state{
  margin-top:9px; font-size:11.5px; font-weight:700; letter-spacing:.01em;
  color:var(--acc); padding:4px 11px; border-radius:var(--r-full);
  background:color-mix(in srgb,var(--acc) 12%,transparent);
}
.today-card.wip .today-state{ color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent) }
.today-card.done .today-state{ color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent) }
.today-card.done{ border-color:color-mix(in srgb,var(--green) 32%,transparent) }
.today-titles{ min-width:0 }
.today-date{ margin-top:4px; font-size:13px; color:var(--ink-3) }
.today-foot{ margin-top:14px; font-size:12.5px; color:var(--ink-3); text-align:center }

.card-sub .st-done{ color:var(--green) }
.card-sub .st-wip{ color:var(--gold) }

@media (max-width:560px){
  .today{ padding-left:16px; padding-right:16px }
  .today-title{ font-size:21px }
  .today-card{ padding:12px 12px 11px }
  .today-name{ font-size:15px }
  .today-desc{ font-size:11.5px }
}

/* ═══════════════════════════════════════════════════════════════
   21. Juegos del día — la carcasa
   ═══════════════════════════════════════════════════════════════ */

.daily{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column;
  background:var(--bg);
  padding-top:env(safe-area-inset-top);
  animation:dailyIn .34s var(--ease) both;
}
@keyframes dailyIn{ from{ opacity:0; transform:scale(.985) } to{ opacity:1; transform:none } }

.d-top{
  flex:0 0 auto; height:56px; display:flex; align-items:center; gap:12px;
  padding:0 clamp(10px,2.5vw,20px);
  border-bottom:1px solid var(--hairline);
}
.d-id{ flex:1 1 auto; min-width:0; text-align:center }
.d-id h1{ font-size:17px; font-weight:750; letter-spacing:-.02em; line-height:1.1 }
.d-id p{ font-size:11.5px; color:var(--ink-3); margin-top:1px }
.d-tools{ display:flex; align-items:center; gap:7px; flex:0 0 auto }
.d-top .icon-btn{ width:36px; height:36px; background:transparent; border-color:transparent }
.d-top .icon-btn:hover{ background:var(--surface-2) }
.d-top .icon-btn svg{ width:20px; height:20px }
.d-streak{
  display:inline-flex; align-items:center; gap:3px; padding:4px 9px;
  border-radius:var(--r-full); background:color-mix(in srgb,var(--gold) 16%,transparent);
  color:var(--gold); font-size:13px; font-weight:750; font-variant-numeric:tabular-nums;
}
.d-streak svg{ width:13px; height:13px; fill:currentColor }

.d-board{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center;
  padding:0 clamp(8px,2vw,16px) env(safe-area-inset-bottom);
  overflow-y:auto; overscroll-behavior:contain;
}
.d-loading{
  margin:auto; width:34px; height:34px; border-radius:50%;
  border:3px solid var(--hairline); border-top-color:var(--game,var(--accent));
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.d-error{ margin:auto; color:var(--ink-2); text-align:center; padding:24px }

.d-toast{
  position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top)); z-index:140;
  transform:translate(-50%,-12px); opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg);
  font-size:14px; font-weight:650; letter-spacing:-.01em;
  padding:10px 20px; border-radius:10px; box-shadow:var(--sh-2);
  max-width:88vw; text-align:center;
  transition:transform .3s var(--spring), opacity .22s var(--ease);
}
.d-toast.show{ transform:translate(-50%,0); opacity:1 }
.d-toast.big{ font-size:17px; font-weight:750; letter-spacing:.08em; padding:13px 26px }

/* ---- ventana de ayuda / estadísticas ---- */
.d-modal{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  padding:20px; background:rgba(0,0,0,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s var(--ease);
}
.d-modal.open{ opacity:1 }
.d-modal-card{
  position:relative; width:min(440px,100%); max-height:86dvh; overflow:auto;
  background:var(--surface-solid); border:1px solid var(--hairline);
  border-radius:var(--r-lg); padding:26px 24px 24px; box-shadow:var(--sh-3);
  transform:translateY(14px) scale(.98); transition:transform .3s var(--spring);
}
.d-modal.open .d-modal-card{ transform:none }
.d-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-color:transparent; background:transparent }
.d-modal-title{ font-size:26px; font-weight:780; letter-spacing:-.03em; margin-top:6px }
.d-modal-tag{ color:var(--ink-2); font-size:14.5px; margin-top:4px }
.d-help{ margin:18px 0 4px; display:grid; gap:11px }
.d-help p{ font-size:14.5px; line-height:1.5; color:var(--ink-2) }
.d-help b{ color:var(--ink); font-weight:700 }
.d-tip{
  margin:16px 0 20px; padding:12px 14px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--hairline);
  font-size:13.5px; color:var(--ink-2);
}
.d-modal-foot{ margin:16px 0 18px; font-size:12.5px; color:var(--ink-3); text-align:center }
.d-modal .btn.big{ margin-top:6px }

.d-dist-title{ margin:20px 0 8px; font-size:13px; font-weight:700; color:var(--ink-2) }
.d-dist{ display:grid; gap:5px }
.d-dist-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-variant-numeric:tabular-nums }
.d-dist-row span{ width:12px; color:var(--ink-3); font-weight:700 }
.d-dist-row i{
  display:block; padding:3px 7px; border-radius:4px; text-align:right;
  background:var(--game,var(--accent)); color:#fff; font-style:normal;
  font-size:11.5px; font-weight:700; min-width:26px;
}

/* ---- ejemplo del tutorial de Palabra ---- */
.p-example{ margin:16px 0 4px; display:grid; gap:6px }
.p-ex-row{ display:flex; gap:5px }
.p-example p{ font-size:13px; color:var(--ink-2); margin-bottom:9px }
.p-ex-tile{
  width:34px; height:34px; display:grid; place-items:center;
  border:2px solid var(--hairline); border-radius:5px;
  font-size:16px; font-weight:750;
}
.p-ex-tile.ok{ background:var(--pal-ok); border-color:var(--pal-ok); color:#fff }
.p-ex-tile.near{ background:var(--pal-near); border-color:var(--pal-near); color:#fff }
.p-ex-tile.off{ background:var(--pal-off); border-color:var(--pal-off); color:#fff }

/* ---- hoja de resultado ---- */
.d-sheet{
  position:fixed; inset:0; z-index:150; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .26s var(--ease);
}
.d-sheet.open{ opacity:1 }
.d-sheet-card{
  width:min(440px,100%); max-height:92dvh; overflow:auto; text-align:center;
  background:var(--surface-solid); border:1px solid var(--hairline); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:14px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--sh-3);
  transform:translateY(100%); transition:transform .4s var(--ease);
}
.d-sheet.open .d-sheet-card{ transform:none }
@media (min-width:620px){
  .d-sheet{ align-items:center }
  .d-sheet-card{ border-radius:var(--r-xl); border-bottom:1px solid var(--hairline); padding-top:24px }
  .d-grab{ display:none }
}
.d-grab{ width:38px; height:4px; border-radius:2px; background:var(--hairline); margin:0 auto 14px }
.d-result-title{
  font-size:clamp(30px,7vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1.05;
  margin-top:6px; text-wrap:balance;
}
.d-result-note{ margin-top:10px; font-size:14.5px; color:var(--ink-2); line-height:1.5 }
.d-share-grid{
  margin:18px auto 4px; font-size:15px; line-height:1.34; letter-spacing:2px;
  font-family:inherit; white-space:pre; display:inline-block;
}
.d-ach{
  margin-top:14px; font-size:13.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--hairline);
  padding:9px 14px; border-radius:var(--r-full); display:inline-block;
}
.d-stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:20px 0 4px;
}
.d-stats-row div{ display:grid; gap:2px }
.d-stats-row b{ font-size:24px; font-weight:780; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.d-stats-row span{ font-size:10.5px; color:var(--ink-3); font-weight:600; letter-spacing:.01em }
.d-stats-row.big{ margin:18px 0 6px }
.d-next{
  margin:20px 0 18px; padding:12px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--hairline);
  display:grid; gap:2px;
}
.d-next span{ font-size:11.5px; color:var(--ink-3); font-weight:600 }
.d-next b{ font-size:23px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:.02em }
.d-sheet-actions{ display:grid; gap:9px }
.d-sheet-actions .btn-row{ display:flex; gap:9px }

/* Dentro de un tablero el foco va por dentro: si no, el recuadro se
   sale de la cuadrícula y descoloca todo. */
.crz-cell:focus-visible,
.cnx-tile:focus-visible,
.clm-hex:focus-visible,
.pal-key:focus-visible,
.crz-key:focus-visible{ outline-offset:-3px; outline-width:2px }

/* ═══════════════════════════════════════════════════════════════
   22. Palabra
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pal-ok:   #2f9e63;
  --pal-near: #d9a41f;
  --pal-off:  #8e8e93;
  --cnx-a:#e8bf3f; --cnx-b:#57bd7f; --cnx-c:#4f9ae8; --cnx-d:#9b76ec;
}
:root[data-theme="dark"]{
  --pal-ok:   #3aa76d;
  --pal-near: #c79a26;
  --pal-off:  #4a4a50;
  --cnx-a:#d8b23c; --cnx-b:#4aa870; --cnx-c:#4a8ed6; --cnx-d:#8b68d8;
}

.pal{
  /* El alto de una tecla manda: el tablero ocupa lo que sobra. Con el
     móvil apaisado quedan fichas pequeñas, pero se sigue jugando. */
  --kb: min(56px, 8.2dvh);
  --t: max(24px, min(60px, calc((100dvh - 150px - var(--kb) * 3) / 6), calc((100vw - 34px) / 5)));
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
}
.pal-board{
  display:grid; gap:5px; margin:auto 0;
  padding:clamp(6px,2vh,18px) 0;
  perspective:900px;
}
.pal-row{ display:grid; grid-template-columns:repeat(5,var(--t)); gap:5px }
.pal-tile{
  position:relative; width:var(--t); height:var(--t);
  display:grid; place-items:center;
  border:2px solid var(--hairline); border-radius:6px;
  background:transparent;
  font-size:calc(var(--t) * .52); font-weight:750; line-height:1;
  text-transform:uppercase; color:var(--ink);
  transition:border-color .12s var(--ease), transform .12s var(--ease);
  transform-style:preserve-3d;
}
.pal-tile b{ font-weight:750 }
.pal-tile i{ display:none }
.pal-tile.filled{ border-color:color-mix(in srgb,var(--ink) 34%,transparent) }
.pal-tile.pop{ animation:palPop .12s var(--ease) }
@keyframes palPop{ from{ transform:scale(.88) } to{ transform:scale(1) } }
.pal-tile.flip{ animation:palFlip .26s ease-in-out both }
@keyframes palFlip{ 0%{ transform:rotateX(0) } 50%{ transform:rotateX(90deg) } 100%{ transform:rotateX(0) } }
.pal-tile.done{ color:#fff; border-color:transparent }
.pal-tile.done.ok{ background:var(--pal-ok) }
.pal-tile.done.near{ background:var(--pal-near) }
.pal-tile.done.off{ background:var(--pal-off) }
.pal-row.shake{ animation:palShake .5s var(--ease) }
@keyframes palShake{
  10%,90%{ transform:translateX(-2px) } 20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-7px) } 40%,60%{ transform:translateX(7px) }
}
.pal-row.win .pal-tile{ animation:palJump .6s var(--spring) both }
.pal-row.win .pal-tile:nth-child(2){ animation-delay:.09s }
.pal-row.win .pal-tile:nth-child(3){ animation-delay:.18s }
.pal-row.win .pal-tile:nth-child(4){ animation-delay:.27s }
.pal-row.win .pal-tile:nth-child(5){ animation-delay:.36s }
@keyframes palJump{ 0%{ transform:none } 40%{ transform:translateY(-24px) } 100%{ transform:none } }

.pal-keys{
  width:100%; max-width:520px; display:grid; gap:6px;
  padding:10px 0 max(10px,env(safe-area-inset-bottom));
}
.pal-krow{ display:flex; gap:5px; justify-content:center }
.pal-key{
  flex:1 1 0; min-width:0; max-width:46px; height:var(--kb,52px);
  display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:7px; background:var(--surface-2);
  border:1px solid var(--hairline);
  font-size:clamp(13px,3.6vw,16px); font-weight:700; color:var(--ink);
  text-transform:uppercase;
  transition:background .18s, transform .12s var(--ease), color .18s;
  -webkit-user-select:none; user-select:none;
}
.pal-key:hover{ background:color-mix(in srgb,var(--ink) 10%,transparent) }
.pal-key:active{ transform:scale(.93) }
.pal-key.wide{ flex:1.55 1 0; max-width:70px; font-size:16px }
.pal-key.ok{ background:var(--pal-ok); border-color:transparent; color:#fff }
.pal-key.near{ background:var(--pal-near); border-color:transparent; color:#fff }
.pal-key.off{ background:var(--pal-off); border-color:transparent; color:#fff; opacity:.62 }

/* ═══════════════════════════════════════════════════════════════
   23. Conexión
   ═══════════════════════════════════════════════════════════════ */

.cnx{
  width:100%; max-width:min(520px,calc(100dvh * 1.05)); margin:auto;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px);
  padding:clamp(6px,2vh,16px) 0 max(12px,env(safe-area-inset-bottom));
}
.cnx-hint{ font-size:13px; color:var(--ink-3); text-align:center }
.cnx.over .cnx-hint{ display:none }
.cnx-solved{ display:grid; gap:7px }
.cnx-band{
  border-radius:12px; padding:11px 12px; text-align:center; color:#3a2c00;
  animation:cnxBand .5s var(--spring) both;
}
@keyframes cnxBand{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:none } }
.cnx-band b{ display:block; font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase }
.cnx-band span{ display:block; font-size:14px; font-weight:600; margin-top:2px; opacity:.86 }
.cnx-band.amarillo{ background:var(--cnx-a) }
.cnx-band.verde   { background:var(--cnx-b) }
.cnx-band.azul    { background:var(--cnx-c); color:#02203f }
.cnx-band.morado  { background:var(--cnx-d); color:#1b0940 }

.cnx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px }
.cnx-grid.spin .cnx-tile{ animation:cnxSpin .34s var(--ease) both }
@keyframes cnxSpin{ from{ opacity:.25; transform:scale(.9) } to{ opacity:1; transform:none } }
.cnx-tile{
  aspect-ratio:1/.82; display:grid; place-items:center; padding:3px 2px;
  border:0; border-radius:9px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--hairline);
  color:var(--ink); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(9.5px,3.05vw,14.5px); line-height:1.08; text-align:center;
  overflow-wrap:anywhere; hyphens:auto;
  transition:transform .16s var(--spring), background .18s, color .18s;
}
.cnx-tile[data-len="9"],
.cnx-tile[data-len="10"]{ font-size:clamp(8.5px,2.7vw,13px) }
.cnx-tile[data-len="11"],
.cnx-tile[data-len="12"]{ font-size:clamp(8px,2.4vw,12px) }
.cnx-tile:hover{ background:color-mix(in srgb,var(--ink) 9%,transparent) }
.cnx-tile:active{ transform:scale(.95) }
.cnx-tile.on{ background:var(--ink); color:var(--bg); border-color:transparent }
.cnx-tile.jump{ animation:cnxJump .42s var(--spring) }
@keyframes cnxJump{ 0%{ transform:none } 45%{ transform:translateY(-9px) } 100%{ transform:none } }
.cnx-tile.wrong{ animation:cnxWrong .6s var(--ease) }
@keyframes cnxWrong{
  10%,90%{ transform:translateX(-2px) } 30%,70%{ transform:translateX(6px) } 50%{ transform:translateX(-6px) }
}

.cnx-lives{ display:flex; align-items:center; justify-content:center; gap:7px; height:20px }
.cnx-lives span{ font-size:12.5px; color:var(--ink-3); margin-right:3px }
.cnx-lives i{
  width:11px; height:11px; border-radius:50%; background:var(--ink-2);
  transition:transform .3s var(--spring), opacity .3s;
}
.cnx-lives i.gone{ transform:scale(.4); opacity:.2 }
.cnx.over .cnx-lives{ visibility:hidden }
.cnx-actions{ display:flex; gap:8px; justify-content:center }
.cnx-actions .btn{ flex:1 1 0; padding:12px 10px; font-size:14.5px; white-space:nowrap }
.cnx-actions .btn:disabled{ opacity:.42; cursor:default; transform:none }
.cnx.over .cnx-actions{ display:none }
.cnx-note{
  display:inline-block; margin:3px 2px 0; padding:4px 10px; border-radius:var(--r-full);
  font-size:11px; font-weight:700; letter-spacing:.02em; color:#2b2200;
}
.cnx-note.amarillo{ background:var(--cnx-a) }
.cnx-note.verde   { background:var(--cnx-b) }
.cnx-note.azul    { background:var(--cnx-c); color:#03203f }
.cnx-note.morado  { background:var(--cnx-d); color:#1b0940 }

/* ═══════════════════════════════════════════════════════════════
   24. Colmena
   ═══════════════════════════════════════════════════════════════ */

.clm{
  width:100%; max-width:460px; margin:auto;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px);
  padding:clamp(8px,2vh,16px) 0 max(12px,env(safe-area-inset-bottom));
}
.clm-top{ display:flex; align-items:center; gap:12px }
.clm-rank{ flex:1 1 auto; min-width:0 }
.clm-rank-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.clm-rank-head b{ font-size:15px; font-weight:750; letter-spacing:-.02em }
.clm-rank-head span{ font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums }
.clm-bar{
  position:relative; height:8px; margin-top:6px; border-radius:4px;
  background:var(--surface-2); border:1px solid var(--hairline); overflow:visible;
}
.clm-bar i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#f5c33b,var(--game,#e8940c));
  transition:width .5s var(--ease);
}
.clm-bar u{
  position:absolute; top:50%; width:5px; height:5px; margin-left:-2.5px;
  transform:translateY(-50%); border-radius:50%; background:var(--hairline);
}
.clm-list-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 12px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--hairline);
  font-size:13px; font-weight:600; color:var(--ink-2);
}
.clm-list-btn b{ color:var(--ink); font-variant-numeric:tabular-nums }
.clm-list-btn svg{ width:15px; height:15px; fill:var(--ink-3); transition:transform .3s var(--ease) }
.clm-list-btn.open svg{ transform:rotate(180deg) }
.clm-found{
  max-height:32vh; overflow:auto; padding:12px;
  border-radius:14px; background:var(--surface-2); border:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
}
.clm-found span{
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  padding:4px 9px; border-radius:var(--r-full);
  background:var(--surface-solid); border:1px solid var(--hairline);
}
.clm-found span.pang{ background:#f5c33b; border-color:transparent; color:#3a2c00; font-weight:750 }
.clm-found em{ font-size:13px; color:var(--ink-3) }

.clm-input{
  position:relative; height:46px; display:flex; align-items:center; justify-content:center;
  gap:1px; font-size:27px; font-weight:750; text-transform:uppercase; letter-spacing:.01em;
}
.clm-input b{ font-weight:750; color:var(--ink) }
.clm-input b.center{ color:var(--game,#e8940c) }
.clm-input b.bad{ color:var(--ink-3); opacity:.5 }
.clm-ghost{ font-size:15px; font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:0 }
.clm-caret{
  display:inline-block; width:2.5px; height:29px; margin-left:2px; border-radius:2px;
  background:var(--game,#e8940c); animation:blink 1.06s steps(2,start) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }
.clm-input.shake{ animation:palShake .5s var(--ease) }
.clm-pop{
  position:absolute; left:50%; top:-2px; transform:translateX(-50%);
  font-size:15px; font-weight:750; color:var(--game,#e8940c); letter-spacing:0;
  animation:clmPop .9s var(--ease) both; pointer-events:none; white-space:nowrap;
}
.clm-pop.big{ font-size:17px }
@keyframes clmPop{ 0%{ opacity:0; transform:translate(-50%,6px) } 25%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-34px) } }

/* Seis hexágonos alrededor de uno: cada vecino está a un ancho
   completo en horizontal o a medio ancho y tres cuartos de alto en
   diagonal. Con hexágonos regulares (alto = ancho × 1,1547) el panal
   mide 3 anchos por 2,5 altos, o sea casi cuadrado. */
.clm-hive{
  position:relative; width:min(322px,86vw,46dvh); aspect-ratio:1/.962; margin:2px auto 0;
}
.clm-hive.spin .clm-hex{ animation:cnxSpin .34s var(--ease) both }
.clm-hex{
  position:absolute; width:32%; height:38.4%; transform:translate(-50%,-50%);
  display:grid; place-items:center; cursor:pointer; border:0; padding:0;
  background:var(--surface-2);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  font-size:clamp(20px,7vw,29px); font-weight:750; color:var(--ink);
  text-transform:uppercase;
  transition:filter .16s;
}
:root[data-theme="dark"] .clm-hex{ background:rgba(255,255,255,.09) }
.clm-hex.center{ left:50%; top:50%; background:var(--game,#f2a115); color:#3a2c00 }
.clm-hex.p0{ left:33.33%; top:20% }   /* arriba a la izquierda */
.clm-hex.p1{ left:66.67%; top:20% }   /* arriba a la derecha   */
.clm-hex.p2{ left:83.33%; top:50% }   /* derecha               */
.clm-hex.p3{ left:66.67%; top:80% }   /* abajo a la derecha    */
.clm-hex.p4{ left:33.33%; top:80% }   /* abajo a la izquierda  */
.clm-hex.p5{ left:16.67%; top:50% }   /* izquierda             */
.clm-hex:active{ filter:brightness(.9) }
.clm-hex.tap{ animation:hexTap .22s var(--ease) }
@keyframes hexTap{ 50%{ transform:translate(-50%,-50%) scale(.9) } }

.clm-actions{ display:flex; gap:9px; justify-content:center; align-items:center }
.clm-actions .btn{ flex:1 1 auto; padding:12px 16px }
.clm-actions .btn.icon{ flex:0 0 auto; width:48px; padding:12px }
.clm-actions .btn.icon svg{ width:19px; height:19px; fill:currentColor }

/* ═══════════════════════════════════════════════════════════════
   25. Cruzadita
   ═══════════════════════════════════════════════════════════════ */

.crz{
  --kb: min(50px, 7.4dvh);
  --cell: max(30px, min(64px, calc((100vw - 44px) / 5),
                        calc((100dvh - 190px - var(--kb) * 3) / 5)));
  width:100%; max-width:520px; margin:auto;
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.6vh,14px);
  padding:clamp(6px,1.6vh,14px) 0 max(10px,env(safe-area-inset-bottom));
}
.crz-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px }
.crz-time{
  font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink-2); min-width:52px;
}
.crz-tools{ display:flex; gap:7px }
.crz-tool{
  cursor:pointer; padding:7px 12px; border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--hairline);
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  transition:background .2s;
}
.crz-tool:hover{ background:color-mix(in srgb,var(--ink) 9%,transparent) }
.crz.done .crz-tools{ visibility:hidden }

/* Los colores de la cuadrícula van por variable: así el modo oscuro
   no tiene que pelearse por especificidad con las casillas negras. */
.crz-grid{
  --casilla:#fff; --negra:#3c3c42; --raya:rgba(0,0,0,.28);
  display:grid; grid-template-columns:repeat(5,var(--cell));
  gap:2px; padding:2px; border-radius:6px; background:var(--raya);
}
:root[data-theme="dark"] .crz-grid{ --casilla:#16161b; --negra:#4b4b54; --raya:rgba(255,255,255,.22) }
.crz.wrong{ animation:palShake .5s var(--ease) }
.crz-cell{
  position:relative; width:var(--cell); height:var(--cell);
  display:grid; place-items:center; cursor:pointer; padding:0;
  border:0; border-radius:2px; background:var(--casilla);
  transition:background .14s var(--ease);
}
.crz-cell.block{ background:var(--negra); cursor:default }
.crz-cell u{
  position:absolute; top:2px; left:3px; font-size:calc(var(--cell) * .21);
  font-weight:700; color:var(--ink-3); text-decoration:none; line-height:1;
  font-variant-numeric:tabular-nums;
}
.crz-cell b{
  font-size:calc(var(--cell) * .5); font-weight:700; line-height:1;
  color:var(--ink); text-transform:uppercase; margin-top:calc(var(--cell) * .06);
}
.crz-cell.given b{ color:var(--game,var(--accent)) }
.crz-cell.lit{ background:color-mix(in srgb,var(--game,var(--accent)) 20%,var(--casilla)) }
.crz-cell.on{ background:color-mix(in srgb,var(--game,var(--accent)) 46%,var(--casilla)) }
.crz-cell.bad b{ color:var(--pink) }
.crz-cell.bad::after{
  content:''; position:absolute; inset:12% auto auto 12%; width:76%; height:76%;
  border-top:2px solid var(--pink); transform:rotate(45deg); transform-origin:left top;
}
.crz.done .crz-cell b{ color:var(--pal-ok) }
.crz.done .crz-cell{ animation:crzWin .5s var(--spring) both }

.crz-clue{
  width:100%; display:flex; align-items:center; gap:6px; cursor:pointer;
  background:color-mix(in srgb,var(--game,var(--accent)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--game,var(--accent)) 22%,transparent);
  border-radius:12px; padding:4px;
}
.crz-clue p{
  flex:1 1 auto; text-align:center; font-size:14px; line-height:1.35;
  padding:6px 2px; min-height:42px; display:flex; align-items:center; justify-content:center;
}
.crz-clue b{ font-weight:750; margin-right:6px; white-space:nowrap; color:var(--game,var(--accent)) }
.crz-arrow{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border:0; border-radius:9px; background:transparent; cursor:pointer;
}
.crz-arrow:hover{ background:var(--surface-2) }
.crz-arrow svg{ width:18px; height:18px; fill:var(--ink-2) }
.crz.done .crz-clue{ display:none }

.crz-keys{ width:100%; max-width:520px; display:grid; gap:6px }
.crz-krow{ display:flex; gap:5px; justify-content:center }
.crz-key{
  flex:1 1 0; min-width:0; max-width:46px; height:var(--kb,48px);
  display:grid; place-items:center; cursor:pointer;
  border-radius:7px; background:var(--surface-2); border:1px solid var(--hairline);
  font-size:clamp(13px,3.6vw,16px); font-weight:700; color:var(--ink);
  transition:background .18s, transform .12s var(--ease);
  -webkit-user-select:none; user-select:none;
}
.crz-key:hover{ background:color-mix(in srgb,var(--ink) 10%,transparent) }
.crz-key:active{ transform:scale(.93) }
.crz-key.wide{ flex:1.5 1 0; max-width:66px }
.crz.done .crz-keys{ display:none }
@keyframes crzWin{ 0%{ transform:scale(1) } 45%{ transform:scale(1.07) } 100%{ transform:scale(1) } }

/* ---------- 26. Juegos del día en el perfil ---------- */
.dstat-list{ display:grid; gap:8px }
.dstat{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:11px 14px 11px 11px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--hairline);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform .25s var(--spring), border-color .25s;
}
.dstat:hover{ transform:translateX(3px); border-color:color-mix(in srgb,var(--acc) 40%,transparent) }
.dstat-art{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; overflow:hidden }
.dstat-art svg{ width:100%; height:100% }
.dstat-name{ flex:1 1 auto; min-width:0; font-size:15.5px; font-weight:650; letter-spacing:-.02em }
.dstat-name small{ display:block; font-size:12px; font-weight:500; color:var(--ink-3); margin-top:1px }
.dstat-nums{ flex:0 0 auto; text-align:center; min-width:44px }
.dstat-nums b{ display:block; font-size:19px; font-weight:750; font-variant-numeric:tabular-nums }
.dstat-nums small{ font-size:10.5px; color:var(--ink-3); font-weight:600 }
.dstat-state{
  flex:0 0 auto; font-size:11.5px; font-weight:700; padding:5px 11px;
  border-radius:var(--r-full); color:var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent);
}
.dstat-state.st-done{ color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent) }
.dstat-state.st-wip{ color:var(--gold); background:color-mix(in srgb,var(--gold) 15%,transparent) }
@media (max-width:560px){
  .dstat-name{ font-size:14.5px }
  .dstat-state{ display:none }
}

/* ═══════════════════════════════════════════════════════════════
   27. Móvil apaisado
   Con la pantalla tumbada sobra ancho y falta alto: el tablero se
   pone a la izquierda y el teclado al lado, en vez de apilarse.
   ═══════════════════════════════════════════════════════════════ */

@media (orientation:landscape) and (max-height:560px){
  .d-top{ height:48px }
  .d-id h1{ font-size:15px }
  .d-id p{ display:none }

  .pal{
    flex-direction:row; align-items:center; justify-content:center;
    gap:clamp(16px,4vw,42px);
    --kb: min(42px, 12.5dvh);
    --t:  max(26px, min(54px, calc((100dvh - 84px) / 6)));
  }
  .pal-board{ margin:0; padding:0 }
  .pal-keys{ width:auto; flex:0 1 min(520px,52vw); padding:0 }

  /* Cuadrícula a la izquierda; definición y teclado apilados a la
     derecha. Con tres hermanos sueltos no hay flex que valga: rejilla. */
  .crz{
    display:grid; align-content:center; justify-content:center;
    grid-template-columns:auto minmax(0,1fr);
    width:100%; max-width:min(920px,96vw);
    grid-template-rows:auto auto;
    grid-template-areas:"tablero pista" "tablero teclas";
    gap:10px clamp(14px,3vw,30px);
    --kb: min(40px, 12dvh);
    --cell: max(30px, min(58px, calc((100dvh - 84px) / 5)));
  }
  .crz-grid{ grid-area:tablero; align-self:center }
  .crz-clue{ grid-area:pista; align-self:end }
  .crz-clue p{ text-align:left; min-height:0; padding:8px 4px }
  .crz-keys{ grid-area:teclas; align-self:start }
  .crz-head{
    position:absolute; top:8px; left:clamp(10px,2.5vw,20px); right:clamp(10px,2.5vw,20px);
    width:auto; z-index:2; pointer-events:none;
  }
  .crz-head .crz-tool{ pointer-events:auto }
  .crz-time{ display:none }


  .clm{ gap:8px }
  .clm-hive{ width:min(240px,40dvh) }
  .clm-found{ max-height:22dvh }
  .cnx{ gap:6px; max-width:min(520px,96vw) }
  .cnx-hint{ display:none }
  .cnx-tile{ aspect-ratio:1/.42 }
  .cnx-actions .btn{ padding:9px 10px; font-size:13.5px }
  .cnx-band{ padding:7px 10px }
  .cnx-band span{ font-size:12.5px }
}