#dino-game .window-body {
  padding-bottom: 0.5rem;
}
#cat {
  box-shadow: 2px 2px 6px #8882;
  transition: bottom 0.1s;
}
#obstacle {
  box-shadow: 2px 2px 6px #8882;
  transition: left 0.02s;
}
#obstacle.obstacle-paused {
  opacity: 0.5;
}
#score {
  font-family: monospace;
  font-size: 1.1em;
}
/* Wide, repeating SVG pattern backgrounds for left and right sides */
.side-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 305px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-repeat: repeat;
  background-size: 48px 48px;
}
.side-bg--left {
  left: 0;
  width: 315px;
}
.side-bg--right {
  right: 0;
}
.side-bg--left,
.side-bg--right {
  background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="%23dfdfdf"/><rect x="0" y="0" width="24" height="24" fill="%237a3cff"/><rect x="24" y="24" width="24" height="24" fill="%238a2be2"/></svg>');
}
@media (max-width: 1200px) {
  .side-bg {
    display: none;
  }
}
.container, .footer .window {
  position: relative;
  z-index: 1;
}
/* Decorative SVG patterns for left and right sides */
.side-pattern {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
.side-pattern--left {
  left: 0;
}
.side-pattern--right {
  right: 0;
}
@media (max-width: 1100px) {
  .side-pattern {
    display: none;
  }
}
.container, .footer .window {
  position: relative;
  z-index: 1;
}
h1 {
  text-decoration: underline;
}

/* Page layout to pin footer to bottom */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Centered content container to limit max line width */
.container {
  width: 100%;
  max-width: 1280px; /* wider on large screens to reduce cramped feel */
  margin: 0 auto;
  padding: 0 20px;
}

/* Subtle diagonal hatch background */
body {
  background-color: #f7f4ff;
  background-image: repeating-linear-gradient(135deg,
    rgba(138, 43, 226, 0.06) 0,
    rgba(138, 43, 226, 0.06) 1px,
    transparent 1px,
    transparent 6px);
  background-size: auto; /* diagonal stripes */
  padding-bottom: 0;
}

/* Override 98.css window title bar color */
.title-bar {
  background: linear-gradient(90deg, #4b0082, #8a2be2);
  color: #ffffff;
}

.title-bar .title-bar-text {
  color: inherit;
}

/* Silly Cat Game: Start button styles */
#cat-game-start-btn {
  background: #7a3cff;
  color: #ffffff;
  border: 2px solid #5b2aa8;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(90, 42, 168, 0.25);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

#cat-game-start-btn:hover {
  background: #6a2af5;
  box-shadow: 0 4px 12px rgba(90, 42, 168, 0.35);
}

#cat-game-start-btn:active {
  transform: translateY(1px);
  background: #5b2aa8;
}

#cat-game-start-btn:focus-visible {
  outline: 3px solid rgba(122, 60, 255, 0.45);
  outline-offset: 2px;
}

/* Provide a Help icon for 98.css title bar (not built-in) */
.title-bar-controls button[aria-label="Help"] {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0' width='1' height='1' fill='black'/%3E%3Crect x='2' y='0' width='1' height='1' fill='black'/%3E%3Crect x='3' y='0' width='1' height='1' fill='black'/%3E%3Crect x='4' y='0' width='1' height='1' fill='black'/%3E%3Crect x='5' y='0' width='1' height='1' fill='black'/%3E%3Crect x='5' y='1' width='1' height='1' fill='black'/%3E%3Crect x='4' y='2' width='1' height='1' fill='black'/%3E%3Crect x='3' y='3' width='1' height='1' fill='black'/%3E%3Crect x='3' y='4' width='1' height='1' fill='black'/%3E%3Crect x='3' y='6' width='1' height='1' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top 2px center;
}

.title-bar-controls {
  position: relative;
}

.help-popover {
  position: absolute;
  top: 26px; /* below the title bar controls */
  right: 0;
  background: var(--button-face, #dfdfdf);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  padding: 6px 8px;
  border: 1px solid #808080;
  font-size: 12px;
  max-width: 220px;
  z-index: 99;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  color: #000; /* ensure black text inside popover */
}

.help-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .help-popover {
    transition: none;
  }
}

/* Projects showcase layout */
.projects-grid {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  justify-items: stretch;
}

/* Navigation */
.nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-block;
  padding: 4px 10px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  text-decoration: none;
  color: #000;
  font-size: 12px;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, color 150ms ease;
}

.nav-link:hover {
  transform: translateY(-1px);
  background: #d6d6d6;
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080;
}

.nav-link:active {
  background: #7a3cff;
  color: #ffffff;
}

.nav-link.is-active {
  outline: 2px solid #7a3cff;
  outline-offset: 2px;
}

.project-card {
  background: var(--button-face, #dfdfdf);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  padding: 8px;
  min-height: 120px;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  width: 100%;
  box-sizing: border-box;
}

.project-desc {
  margin-top: 6px;
  font-size: 12px;
  color: #333;
  overflow-wrap: anywhere;
}

.project-card:hover {
  transform: translateY(-1px);
  background-color: #e9e9e9;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner), 0 6px 12px rgba(0, 0, 0, 0.10);
}

/* Turn purple while clicking */
.project-card:active {
  background-color: #7a3cff;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner), 0 4px 8px rgba(90, 42, 168, 0.25);
}

.project-card:active .project-title,
.project-card:active .project-meta {
  color: #ffffff;
}

.project-card:active .badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  box-shadow: none;
}

.project-title {
  font-weight: bold;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.project-meta {
  color: #555;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  font-size: 10px;
  margin-right: 6px;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.project-tags {
  margin: 8px 0;
}

.badge:hover {
  transform: translateY(-1px);
  background: #d6d6d6;
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080;
}

/* Disable hover effect for specific badges (JS, UI) */
.badge--no-hover:hover {
  transform: none;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.badge:active {
  background: #7a3cff;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .badge,
  .nav-link {
    transition: none;
  }
}

/* Layout for About + Photo side-by-side */
.about-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 16px 0;
  flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Standalone photo next to About */
.about-photo {
  display: block;
  width: clamp(160px, 20vw, 240px);
  height: auto;
}

/* Make About window wider and more readable on large screens */
#about.window {
  width: clamp(440px, 48vw, 720px); /* larger on wide screens for readability */
}
#projects {
  margin: 40px 0 16px 0;
  width: 100%;
}

.footer .window {
  width: 100%;
  margin: 16px 0 0;
}

#about .window-body {
  font-size: 14px;
  line-height: 1.6;
}

/* Footer */
.footer-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.footer {
  margin-top: auto; /* pushes footer to the bottom when content is short */
  margin-bottom: 8px; /* lift footer to mirror header's top offset */
}

.footer-link {
  color: #4b0082;
  text-decoration: none;
  margin-left: 12px;
  transition: color 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-link:hover {
  color: #7a3cff;
}

.footer-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  #about.window {
    width: 100%;
  }
}

@media (max-width: 960px) and (min-width: 521px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}