/* Moosie Studios — shared styles for index.html (home) and games.html.
   Late-90s GeoCities vibe: tiled starfield, 800x600-era centered panel,
   beveled borders, web-safe colors, Times body w/ Impact + Comic Sans accents. */

body{
  margin:0;padding:0;
  background-color:#000018;
  /* tiled starfield — the classic space background */
  background-image:
    radial-gradient(1px 1px at 18px 24px,#ffffff 50%,transparent 51%),
    radial-gradient(1px 1px at 70px 60px,#aab4ff 50%,transparent 51%),
    radial-gradient(2px 2px at 120px 30px,#ffffaa 50%,transparent 51%),
    radial-gradient(1px 1px at 40px 110px,#ffffff 50%,transparent 51%);
  background-size:150px 150px,150px 150px,150px 150px,150px 150px;
  color:#d8d8e8;
  font-family:"Times New Roman",Georgia,serif;
  font-size:16px;
}
a{color:#66ccff}
a:visited{color:#cc99ff}
a:hover{color:#ffff66}

/* main centered "table" — 800x600 era width */
.page{
  width:760px;max-width:96%;margin:14px auto 30px;
  background:#0a0a22;
  border:4px ridge #5a5aff;
  padding:0;
}

/* scrolling welcome marquee */
.marquee{
  overflow:hidden;white-space:nowrap;
  background:#000;border-bottom:2px groove #5a5aff;
  color:#39ff14;font-family:"Courier New",monospace;font-weight:bold;
  padding:5px 0;font-size:15px;
}
.marquee b{display:inline-block;padding-left:100%;animation:scroll 18s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

/* header / logo block */
.header{
  text-align:center;padding:18px 10px 12px;
  background:linear-gradient(#1a1a4a,#0a0a22);
  border-bottom:3px double #7a7aff;
}
.logo{
  font-family:Impact,"Arial Black",sans-serif;
  font-size:54px;letter-spacing:2px;margin:0;line-height:1;
  color:#ffcc00;
  text-shadow:2px 2px 0 #c8530b,4px 4px 0 #000,0 0 2px #fff;
}
.tagline{
  font-family:"Comic Sans MS","Comic Sans",cursive;
  color:#ff66cc;font-size:17px;margin:6px 0 0;
}

/* nav bar */
.nav{
  text-align:center;background:#000;padding:7px 4px;
  border-bottom:2px groove #5a5aff;font-family:Arial,sans-serif;font-size:13px;
}
.nav a{
  display:inline-block;margin:2px 3px;padding:3px 12px;
  color:#fff;text-decoration:none;font-weight:bold;
  background:linear-gradient(#3a3a8a,#202050);
  border:2px outset #6a6aff;
}
.nav a:hover{background:linear-gradient(#5a5aba,#3a3a8a);color:#ffff66}

.content{padding:16px 20px 20px}

/* under construction banner */
.construction{
  margin:0 auto 18px;max-width:480px;text-align:center;
  background:repeating-linear-gradient(45deg,#ffcc00 0 14px,#000 14px 28px);
  padding:3px;
}
.construction .inner{
  background:#000;color:#ffcc00;font-family:Arial,sans-serif;font-weight:bold;
  font-size:13px;padding:6px;border:1px solid #555;
}
.blink{animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* section heading */
h2.sec{
  font-family:"Comic Sans MS",Arial,sans-serif;color:#39ff14;font-size:26px;
  margin:6px 0 2px;text-shadow:2px 2px 0 #000;
}
hr.fancy{border:none;height:4px;
  background:linear-gradient(90deg,#ff0066,#ffcc00,#39ff14,#00ccff,#cc66ff);
  margin:4px 0 16px}

/* game cards as bordered table rows */
.game{
  display:flex;gap:14px;align-items:flex-start;
  background:#101038;border:3px ridge #4a4aaa;
  padding:12px;margin-bottom:16px;
}
.game .ico{flex:0 0 auto}
.game .ico svg{display:block;border:2px inset #5a5aff;background:#000}
.game .info{flex:1}
.game h3{
  margin:0 0 4px;font-family:Arial,sans-serif;font-size:20px;color:#ffcc00;
}
.game p{margin:0 0 10px;font-size:15px;line-height:1.5;color:#cfcfe6}
.new{
  color:#ff3333;font-family:Arial,sans-serif;font-weight:bold;font-size:12px;
  vertical-align:super;margin-left:6px;
}

/* old-school 3D download/action button */
.button98{
  display:inline-block;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;
  text-decoration:none;color:#000;background:#c0c0c0;
  padding:5px 14px;border:3px outset #e0e0e0;margin-right:8px;
}
.button98:hover{color:#000;background:#d4d4d4}
.button98:active{border-style:inset}

/* moose petting zone (home page) */
.moosezone{text-align:center;margin:6px 0 10px}
.moose{
  display:inline-block;max-width:360px;width:80%;height:auto;
  border:4px ridge #5a5aff;background:#000;padding:4px;cursor:pointer;
}
.moose:hover{border-color:#ffcc00}
.moose:active{border-style:inset}
.moose:focus{outline:3px dashed #ffff66;outline-offset:2px}
.moose.petted{animation:wiggle .35s ease}
@keyframes wiggle{
  0%,100%{transform:rotate(0) scale(1)}
  25%{transform:rotate(-3deg) scale(1.03)}
  75%{transform:rotate(3deg) scale(1.03)}
}
.pet-tally{font-family:Arial,sans-serif;font-size:16px;color:#cfcfe6;margin:14px 0 0}
.pet-tally .counter{font-size:20px;margin-left:4px;vertical-align:middle}

/* footer widgets */
.widgets{
  margin-top:22px;padding-top:14px;border-top:3px double #7a7aff;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  font-family:Arial,sans-serif;font-size:12px;text-align:center;
}
.counter{
  display:inline-block;
  background:#000;border:2px inset #888;padding:4px 6px;color:#39ff14;
  font-family:"Courier New",monospace;font-weight:bold;font-size:16px;letter-spacing:2px;
}
.foot{
  text-align:center;font-family:Arial,sans-serif;font-size:11px;color:#8888aa;
  padding:16px 10px 6px;line-height:1.6;
}

@media (max-width:520px){
  .logo{font-size:38px}
  .game{flex-direction:column;align-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .marquee b{animation:none;padding-left:0}
  .blink{animation:none}
  .moose.petted{animation:none}
}