/* Hallmark · component: game cover made of real play · genre: atmospheric (inherits Cenote / Arrecife tokens)
 * states: poster (static, default) · loading · playing · failed (poster stays) · paused · reduced motion
 * Poster always in the HTML; the muted loop is added by js/game-media.js and only fades in once it really plays. */
.gm{position:relative;display:block;width:100%;height:100%;overflow:clip;background:var(--color-abyss);isolation:isolate}
.gm-poster,.gm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gm-video{z-index:1;opacity:0;transition:opacity var(--dur-long) var(--ease-out);pointer-events:none}
.gm.is-playing .gm-video{opacity:1}
.gm-real{position:absolute;z-index:2;left:var(--space-sm);bottom:var(--space-sm);display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:var(--radius-pill);background:var(--color-scrim);color:var(--color-on-dark);font:600 .6875rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:.92}
.gm-real-dot{width:7px;height:7px;border-radius:50%;background:var(--color-on-dark);opacity:.55;flex:none}
.gm.is-playing .gm-real-dot{background:var(--color-error);opacity:1;animation:gm-live 1.6s var(--ease-in-out) infinite}
.gm.is-loading .gm-real-dot{animation:gm-live .8s var(--ease-in-out) infinite}
@keyframes gm-live{50%{opacity:.35}}

/* «How to play»: gesture glyph + one line. The glyph moves the way the game is played. */
.game-how{display:flex;align-items:center;gap:var(--space-sm);margin:0;min-width:0;font-size:.875rem;font-weight:600;line-height:1.35}
.game-how-text{min-width:0}
.gg{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--game-accent-line,var(--color-accent-line));background:var(--game-accent-soft,var(--color-accent-soft));color:var(--game-accent,var(--color-accent))}
.gg svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gg .gg-dot{fill:currentColor;stroke:none}
.gg .gg-track{opacity:.45}
.gg .gg-ring{transform-origin:16px 16px;transform-box:view-box;opacity:0}
.gg .gg-cell{opacity:.4;stroke-dasharray:3 2.5}
.gg .gg-tile{fill:currentColor;fill-opacity:.28}
.gg .gg-eye{fill:currentColor;fill-opacity:.3;stroke:none}
.gg-tap .gg-ring{animation:gg-ring 1.6s var(--ease-out) infinite}
.gg-tap .gg-ring-late{animation-delay:.5s}
.gg-tap .gg-dot{transform-origin:16px 16px;transform-box:view-box;animation:gg-press 1.6s var(--ease-in-out) infinite}
.gg-swipe .gg-slide{animation:gg-swipe 2.2s var(--ease-in-out) infinite}
.gg-drag .gg-carry{animation:gg-drag 2.4s var(--ease-in-out) infinite}
.gg-steer .gg-orbit{animation:gg-steer 3.2s var(--ease-in-out) infinite}
.gg-look .gg-around{animation:gg-look 3s linear infinite}
@keyframes gg-ring{0%{opacity:.9;transform:scale(.35)}70%,100%{opacity:0;transform:scale(1.25)}}
@keyframes gg-press{0%,100%{transform:scale(1)}12%{transform:scale(.72)}26%{transform:scale(1)}}
@keyframes gg-swipe{0%,100%{transform:translateX(-7px)}45%,55%{transform:translateX(7px)}}
@keyframes gg-drag{0%,12%{transform:translate(0,0)}55%,70%{transform:translate(13px,13px)}100%{transform:translate(0,0)}}
@keyframes gg-steer{0%,100%{transform:translate(0,0)}20%{transform:translate(0,-6px)}40%{transform:translate(6px,0)}60%{transform:translate(0,5px)}80%{transform:translate(-6px,0)}}
@keyframes gg-look{0%{transform:translate(-12px,0)}25%{transform:translate(0,5.5px)}50%{transform:translate(12px,0)}75%{transform:translate(0,-5.5px)}100%{transform:translate(-12px,0)}}
.is-paused .gg *{animation-play-state:paused}

/* Catalogue cards (/juegos/, /experiencias/) and the game page poster: the cover is a 16:9 window on real play. */
.module-cover.cover-game:has(.gm),.experience-art:has(.gm){aspect-ratio:16/9;position:relative;overflow:clip}
.module-cover .gm,.experience-art .gm{position:absolute;inset:0}
.module-card .game-how,.experience-card .game-how{margin-bottom:var(--space-sm)}
.lg-art:has(.gm){position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:clip;border:1px solid var(--color-rule);box-shadow:var(--shadow-2)}
.lg-art .gm{position:absolute;inset:0}

@media(prefers-reduced-motion:reduce){.gm-video{display:none}.gg *,.gm-real-dot{animation:none!important}.gg .gg-ring{opacity:0}}