/* games-shared.css — rules shared verbatim by every dc-runtime game page
   (index.html, games-spotlight.html, games-store.html, games-about.html).
   Loaded from the real <head> BEFORE each page's own <style> block, so
   page-specific rules keep winning ties exactly as they did inline.
   Page-owned rules (body background, footer variants, h1/h2 sizes,
   section-specific mobile overrides) stay in each page's <style>. */

a { color:#FF6FA5; text-decoration:none; }
a:hover { color:#FFB5C5; }
::selection { background:#FF5C9E; color:#fff; }
html, body { max-width:100%; overflow-x:clip; }

/* Shared shell (title bar + footer) — markup is rendered identically on
   every game page by games-shared.js mountShell(); colors/hover live here. */
/* support.js injects html,body{height:100%} + #dc-root{height:100%} at boot;
   that caps the app's flow height at one viewport, which would strand the
   shared footer mid-page with content painting over it. Restore normal
   document flow — every page's own wrapper already sets min-height:100vh. */
html, body { height:auto !important; }
#dc-root, #dc-root > .sc-host { height:auto !important; }
@keyframes mkzLogoGlow {
  0%,100% { filter:brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.30)) drop-shadow(0 0 12px rgba(255,92,158,0.35)); }
  50% { filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.5)) drop-shadow(0 0 20px rgba(255,92,158,0.7)); }
}
.mkz-logoimg { filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,92,158,0.5)); animation:mkzLogoGlow 3.6s ease-in-out infinite; transition:transform .25s ease; transform-origin:left bottom; }
.mkz-brand:hover .mkz-logoimg { transform:scale(1.05); }
.mkz-logobar { width:2px; height:20px; border-radius:99px; background:linear-gradient(180deg,#FF5C9E,#CBAAFF,#8FD8FF); margin-bottom:5px; opacity:0.85; box-shadow:0 0 8px rgba(255,92,158,0.5); flex:none; }
.mkz-logotxt { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:18px; letter-spacing:0.26em; line-height:1; padding-bottom:6px; background:linear-gradient(90deg,#ffffff,#FFB5C5,#CBAAFF,#8FD8FF,#ffffff); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradientShift 7s linear infinite; filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
.mkz-brand:hover .mkz-logotxt { animation-duration:2.5s; }
.mkz-logostar { font-size:12px; color:#FF8FBB; line-height:1; padding-bottom:15px; margin-left:-3px; animation:twinkle 2.8s ease-in-out infinite; flex:none; }
.mkz-nav a { color:#A7A9BA; }
.mkz-nav a:hover { color:#fff; }
.mkz-nav a.mkz-nav-home { color:#fff; }
.mkz-nav a.mkz-nav-home:hover { color:#FF6FA5; }
.mkz-headcta { background:#FF5C9E; }
.mkz-headcta:hover { background:#FF77B0; color:#fff; }
.mkz-foot a { color:#B6B8C7; }
.mkz-foot a:hover { color:#FF6FA5; }

@keyframes pulseGlow { 0%,100%{box-shadow:0 0 14px rgba(255,92,158,0.3);} 50%{box-shadow:0 0 26px rgba(255,92,158,0.55);} }
@keyframes gradientShift { to { background-position:300% 0; } }
@keyframes floatOrb { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(26px,-30px) scale(1.08);} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes twinkle { 0%,100%{opacity:0.15; transform:scale(0.7) rotate(0deg);} 50%{opacity:1; transform:scale(1.15) rotate(24deg);} }
@keyframes fadeUp { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes bobble { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
@keyframes gridScroll { to { background-position:0 46px, 0 46px; } }

@media (max-width:900px) {
  .mkz-head { flex-wrap:wrap !important; gap:8px 12px !important; padding:9px 12px !important; top:8px !important; width:calc(100% - 24px) !important; }
  .mkz-head img { width:96px !important; }
  .mkz-logotxt { font-size:16px !important; }
  .mkz-nav { order:3 !important; width:100% !important; justify-content:space-between !important; gap:6px !important; font-size:15px !important; letter-spacing:0.08em !important; }
}
@media (max-width:760px) {
  .mkz-headcta { display:none !important; }
  .mkz-head { flex-wrap:nowrap !important; gap:10px !important; padding:7px 10px !important; }
  .mkz-head > a[aria-label] { flex:0 0 auto !important; }
  .mkz-head img { width:84px !important; }
  .mkz-logotxt, .mkz-logobar, .mkz-logostar { display:none !important; }
  .mkz-nav { order:0 !important; width:auto !important; flex:1 1 auto !important; min-width:0 !important; justify-content:space-evenly !important; gap:6px !important; font-size:13px !important; letter-spacing:0.04em !important; overflow-x:auto !important; scrollbar-width:none; }
  .mkz-nav::-webkit-scrollbar { display:none; }
  .mkz-nav a { padding:13px 4px !important; }
  .mkz-head > div:last-child { flex:0 0 auto !important; gap:8px !important; }
  .mkz-head select { padding:6px 4px 6px 7px !important; font-size:11.5px !important; }
  section { padding-left:16px !important; padding-right:16px !important; }
  .mkz-foot > div { grid-template-columns:1fr !important; gap:14px !important; padding:24px 16px !important; }
  .mkz-foot > div > div { flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:6px 18px !important; }
  .mkz-foot span[style*="0.18em"] { display:none !important; }
}
@media (max-width:400px) {
  .mkz-head { gap:8px !important; }
  .mkz-nav { gap:4px !important; }
  .mkz-nav a { padding:13px 2px !important; font-size:12.5px !important; }
}
