/* v18.5: shared by the three game engines, with assets/games/gamekit.js (see its notes). Hover only under (hover:hover). */
/* a title whose gold words go on a line of their own; if those words need two lines, the first is the longer one */
.gk-split em{display:block;text-wrap:pretty}
/* the GAME badge is a button (it takes the page to the board); it keeps the engine's own pill look */
button.gk-badge{font:inherit;margin:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
transition:box-shadow .2s ease,transform .2s ease}
button.gk-badge:focus-visible{outline:3px solid #10203A;outline-offset:3px;box-shadow:0 0 0 7px rgba(232,163,23,.35),0 10px 20px -10px rgba(184,137,46,.95)}
@media (hover:hover){
button.gk-badge:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(232,163,23,.4),0 0 22px rgba(232,163,23,.65),0 12px 22px -10px rgba(184,137,46,1)}
}
/* the first piece or step, lit for a moment after the badge is pressed: three soft gold pulses */
@keyframes gkhi{50%{box-shadow:0 0 0 4px #E8A317,0 0 28px rgba(232,163,23,.95)}}
.gk-hi{animation:gkhi .8s ease-in-out 3}
@media (prefers-reduced-motion:reduce){
button.gk-badge,button.gk-badge:hover{transition:none;transform:none}
.gk-hi{animation:none;box-shadow:0 0 0 4px #E8A317,0 0 28px rgba(232,163,23,.9)!important}
}
/* the smallest phones (under 360px): game titles one step smaller (28px to 26px), so a title can keep its gold words on a
   line of their own ("¿Qué cubre / Medicare Original? / Pruébelo." rather than "¿Qué cubre / Medicare / Original? Pruébelo.") */
@media (max-width:359px){
html .mq .mq-card:not(.mq-static) .mq-h,html .cq .cq-card:not(.cq-static) .cq-h,html .cg .cg-card:not(.cg-static) .cg-h{font-size:26px}
}