/* Restrained game identities: presentation only; shared behavior stays in game-ui/state. */
[data-game="clave-oculta"] { --g:#5741bc; }
[data-game="ruta-numerada"] { --g:#096f68; }
[data-game="areas"] { --g:#536b1b; }
[data-game="puentes"] { --g:#1f6ea3; }
[data-game="bloques-deslizantes"] { --g:#914d0c; }
[data-theme="dark"] [data-game="clave-oculta"] { --g:#b7a6ff; }
[data-theme="dark"] [data-game="ruta-numerada"] { --g:#5fd0c4; }
[data-theme="dark"] [data-game="areas"] { --g:#b6d36a; }
[data-theme="dark"] [data-game="puentes"] { --g:#7cc0f0; }
[data-theme="dark"] [data-game="bloques-deslizantes"] { --g:#f0b46b; }
[data-game] { --g-soft:color-mix(in srgb,var(--g) 6%,var(--game-card)); --g-line:color-mix(in srgb,var(--g) 30%,var(--game-line)); --g-on:#fff; }
[data-theme="dark"] [data-game] { --g-soft:color-mix(in srgb,var(--g) 8%,var(--game-card)); --g-on:#18151f; }
.game-family .game-heading-glyph { display:inline-block; width:28px; height:28px; margin-right:10px; vertical-align:-2px; background:var(--g); mask:var(--glyph) center/contain no-repeat; -webkit-mask:var(--glyph) center/contain no-repeat; }
.game-family[data-game] { --game-focus:var(--g); }
.game-family[data-game] .game-page-kicker,.game-family[data-game] .rn-info b { color:var(--g); }
.game-family[data-game] :is(.rn-btn.primary,.klotski-btn.primary) { background:var(--g); border-color:var(--g); color:var(--g-on); }
.game-family[data-game] .game-result { border-top:2px solid var(--g-line); }
.game-family .games-hero { margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--game-line); }
.game-family .games-section-title { margin:0 0 14px; font:700 12px/1.5 Inter,system-ui,sans-serif; letter-spacing:.09em; color:var(--game-muted); }
.game-family .games-collection + .games-collection { margin-top:30px; }
.game-family .games-grid-premium { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.game-family .game-card-premium { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; padding:22px; background:linear-gradient(135deg,var(--g-soft),var(--game-card) 70%); border-color:var(--g-line); border-radius:16px; box-shadow:0 3px 12px #19102404; transition:border-color .16s ease,box-shadow .16s ease; }
.game-family .game-card-body { display:contents; }
.game-family .game-glyph { position:absolute; right:20px; top:20px; display:block; width:48px; height:48px; background:var(--g-soft); border:1px solid var(--g-line); border-radius:12px; }
.game-family .game-glyph::after { content:""; position:absolute; inset:9px; background:var(--g); mask:var(--glyph) center/contain no-repeat; -webkit-mask:var(--glyph) center/contain no-repeat; }
.game-family .game-category { grid-column:1/-1; padding-right:64px; color:var(--g); }
.game-family .game-card-premium h3 { grid-column:1/-1; padding-right:64px; font:600 28px/1.15 "Crimson Pro",Georgia,serif; color:var(--game-ink); margin:8px 0 10px; }
.game-family .game-card-premium p { grid-column:1/-1; margin:0; max-width:54ch; }
.game-family .game-meta-row { grid-column:1/-1; margin:16px 0 12px; padding:12px 0 0; border-top:1px solid var(--g-line); }
.game-family .game-progress { grid-column:1; align-self:center; padding:0; margin:0; font-size:12px; line-height:1.55; color:var(--game-muted); }
.game-family .is-solved-today .game-progress { color:var(--g); }
.game-family .game-side { position:static; grid-column:2; align-self:end; }
.game-family .game-arrow { min-height:44px; padding:10px 14px; background:var(--g); color:var(--g-on); border-radius:9px; font-size:13px; gap:8px; }
.game-family .game-arrow::after { content:"→"; }
.game-family .game-card-premium:hover { transform:none; filter:none; border-color:var(--g); box-shadow:0 4px 16px #1910240c; }
.game-family .game-card-premium:hover .game-arrow { transform:none; }
.game-family .game-card-premium:focus-visible { outline-color:var(--g); }
@media(max-width:719px) {
 .game-family .games-grid-premium { grid-template-columns:1fr; }
 .game-family .game-card-premium { padding:18px; }
 .game-family .game-card-premium h3 { font-size:27px; }
 .game-family .game-glyph { top:16px; right:16px; }
}
@media(prefers-reduced-motion:reduce) { .game-family .game-card-premium,.game-family .game-arrow { transition:none; } }

[data-game="clave-oculta"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='3' y='16' width='8' height='16' rx='2.5' fill='%23000' opacity='.4'/%3E%3Crect x='14' y='16' width='8' height='16' rx='2.5' fill='%23000'/%3E%3Crect x='25' y='16' width='8' height='16' rx='2.5' fill='%23000' opacity='.4'/%3E%3Crect x='36' y='16' width='8' height='16' rx='2.5' fill='%23000' opacity='.4'/%3E%3C/svg%3E")}
[data-game="ruta-numerada"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 40V10h16v28h16V10' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='40' r='4.5'/%3E%3Ccircle cx='40' cy='10' r='4.5'/%3E%3C/svg%3E")}
[data-game="areas"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='5' width='24' height='20' rx='3'/%3E%3Crect x='32' y='5' width='11' height='20' rx='3' opacity='.45'/%3E%3Crect x='5' y='28' width='38' height='15' rx='3' opacity='.7'/%3E%3C/svg%3E")}
[data-game="puentes"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M12 10h24M12 15h24M10 12v24M38 12v24' stroke='%23000' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Ccircle cx='38' cy='10' r='6'/%3E%3Ccircle cx='10' cy='38' r='6' opacity='.5'/%3E%3Ccircle cx='38' cy='38' r='6' opacity='.5'/%3E%3C/svg%3E")}
[data-game="bloques-deslizantes"]{--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='5' y='5' width='23' height='10' rx='2.5' opacity='.45'/%3E%3Crect x='31' y='5' width='12' height='23' rx='2.5' opacity='.45'/%3E%3Crect x='5' y='18' width='23' height='10' rx='2.5'/%3E%3Crect x='5' y='31' width='12' height='12' rx='2.5' opacity='.45'/%3E%3Crect x='20' y='36' width='23' height='7' rx='2.5' opacity='.25'/%3E%3C/svg%3E")}
.game-family .game-arrow { box-sizing:border-box; }
.game-family[data-game] .game-heading-glyph { display:inline-block; background:var(--g); padding:0; border:0; border-radius:0; box-shadow:none; margin:0 10px 0 0; }