/* /minigames hub. Sits on the website's style.css (header, container, fonts). */
.mg-hubnav{display:flex; gap:18px; margin-left:auto}
.mg-hubnav a{color:var(--primary-color); text-decoration:none; font-weight:700; font-size:0.95rem}
.mg-hubnav a::after{content:" \2192"; opacity:.6}
.mg-hubnav a:hover{text-decoration:underline}

.mg-main{padding:24px 0 80px}
.mg-intro{max-width:720px; margin:12px 0 28px}
.mg-intro h1{font-family:'Cinzel Decorative','Manrope',sans-serif; font-size:2.2rem; margin-bottom:12px; color:var(--primary-color)}
.mg-sub{font-size:1.05rem; line-height:1.6; color:#333; margin-bottom:12px}
.mg-langs{font-size:.92rem; color:#555; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.mg-lc{font-size:.7rem; font-weight:800; letter-spacing:.08em; border:1.5px solid currentColor; border-radius:4px; padding:1px 5px}

.mg-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px}
.mg-card{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--text-color);
  background:var(--white); border:2px solid var(--primary-color); border-radius:var(--wonk-2); padding:22px 22px 18px;
  box-shadow:6px 6px 0 var(--primary-color); transition:transform .15s ease, box-shadow .15s ease}
.mg-card:nth-child(2n){border-radius:var(--wonk-1)}
.mg-card:nth-child(3n){border-radius:var(--wonk-3)}
.mg-card:hover, .mg-card:focus-visible{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--primary-color); outline:none}
.mg-card h2{font-family:'Cinzel Decorative','Manrope',sans-serif; font-size:1.5rem; margin:2px 0 0; color:var(--primary-color)}
.mg-skill{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; color:#444}
.mg-skill::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent-color); border:1.5px solid var(--primary-color)}
.mg-card[data-skill="meaning"] .mg-skill::before{background:#5F8FE8}
.mg-card[data-skill="listen"] .mg-skill::before{background:#3FB5A9}
.mg-card[data-skill="write"] .mg-skill::before{background:#E078A8}
.mg-card[data-skill="discriminate"] .mg-skill::before{background:#E8875C}
.mg-card[data-skill="polysemy"] .mg-skill::before{background:#8F74E0}
.mg-tag{font-weight:700; color:#222; margin:0}
.mg-card p{font-size:.95rem; line-height:1.55; color:#444; margin:0}
.mg-play{margin-top:auto; padding-top:12px; font-weight:800; color:var(--primary-color)}

.mg-foot{max-width:720px; margin-top:34px; color:#555; font-size:.92rem; line-height:1.6}

@media (max-width:600px){
  .mg-main{padding:20px 16px 64px}
  .mg-intro h1{font-size:1.7rem}
  .mg-hubnav{gap:12px}
  .mg-hubnav a{font-size:.85rem}
}