/*
 * Hunter Little Portfolio Stylesheet
 *
 * This file defines the visual appearance of the portfolio website.
 * The design uses CSS variables to support dark and light mode,
 * responsive layouts and subtle micro-interactions inspired by
 * modern web design trends.
 */

/* Root theme variables */
:root {
  /* Light mode palette.  The portfolio felt a bit dull in light mode, so use a
     brighter accent colour and softer backgrounds.  A crisp white base keeps
     content legible, while the vibrant teal accent mirrors the dark mode hue
     for consistency. */
  --bg-color: #ffffff;
  --text-color: #111111;
  /* Use the same teal accent as dark mode for better contrast in light mode */
  --accent-color: #00b4d8;
  --card-bg: #f7f9fc;
  --section-alt-bg: #f1f5f9;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --shadow-color: rgba(0, 0, 0, 0.08);
}

body.dark-mode {
  /* Dark mode palette */
  --bg-color: #101010;
  --text-color: #e0e0e0;
  --accent-color: #00b4d8;
  --card-bg: #1d1d1d;
  --section-alt-bg: #181818;
  --nav-bg: rgba(16, 16, 16, 0.9);
  --shadow-color: rgba(0, 0, 0, 0.6);
}

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  overflow-x: hidden;
  /* Hide default cursor; custom cursor will be shown via JS */
  cursor: none;
}

/* Scroll progress bar that gamifies navigation by showing how far the user has
   progressed down the page.  It sits at the bottom of the viewport and
   gradually fills as the user scrolls. */
#progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: var(--accent-color);
  z-index: 1500;
  transition: width 0.1s linear;
}

/* Animated gradient background behind all content */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(60deg, #00b4d8, #8338ec, #ff006e, #3a86ff);
  background-size: 600% 600%;
  z-index: -2;
  animation: gradientShift 30s ease infinite;
}

/*
 * Softly blurred background circles for the hero section
 *
 * The home page previously featured a field of squares that felt harsh and
 * static.  To create a more organic, dreamy backdrop we generate a number
 * of circular elements with radial gradients and apply a Gaussian blur.
 * These circles are absolutely positioned within the hero canvas and
 * slowly drift to avoid obvious repetition.  Styles here define the
 * default animation and allow individual elements to override their
 * animation durations via inline style.
 */
.blur-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(60px);
  pointer-events: none;
  animation: floatCircle 45s ease-in-out infinite alternate;
}

@keyframes floatCircle {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(40px, -30px, 0) scale(1.15);
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Custom cursor element */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  /* Increase the stroke for better visibility over bright backgrounds */
  border: 3px solid var(--accent-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease;
  /* Ensure the custom cursor always appears on top of overlays such as
     the mini game and admin modals by increasing the z‑index.  Without
     this, the cursor becomes invisible when a higher overlay is shown. */
  z-index: 10000;
  box-shadow: 0 0 10px var(--accent-color);
}

/* Hide the default system pointer on all elements.  The site uses a
   custom glowing cursor implemented via JavaScript, so the native
   cursor should be suppressed to avoid visual conflict.  Inputs and
   textareas retain their I‑beam cursor for ease of editing. */
/* Hide the system pointer on all elements by default.  The custom cursor
   script will display its own ring.  When the ``show-system-cursor`` class
   is applied to the body the native pointer will be restored. */
/* By default hide the system pointer on all elements to make way for the
   custom glowing cursor.  When the ``show-system-cursor`` class is
   applied this rule is overridden to restore the pointer. */
body:not(.show-system-cursor) *,
body:not(.show-system-cursor) *:hover {
  cursor: none;
}

/* When show-system-cursor is applied, force the default pointer on
   everything inside the document so that users have a visible cursor in
   mini‑games and other overlays.  Use !important to override any
   previous cursor definitions. */
body.show-system-cursor * {
  cursor: default !important;
}

/* Ensure that all game overlays and their interactive elements show
   the system cursor regardless of the custom cursor state.  This
   provides clear visual feedback when playing games. */
.game-overlay,
.game-overlay * {
  cursor: default !important;
}
input[type="text"],
input[type="password"],
textarea,
select,
[contenteditable] {
  cursor: text !important;
}
/* Within the mini game overlay and admin dashboard, ensure the
   system pointer stays hidden.  Without this the browser may display
   a pointer over interactive elements such as buttons and links. */
/* Show the native pointer inside the mini game overlay and admin dashboard
   to avoid the custom cursor disappearing.  The custom cursor can be
   distracting when playing the bone‑catching game or filling in
   forms, so revert to the default pointer within these areas. */
#game-overlay, #game-overlay * {
  cursor: auto !important;
}
.admin-container, .admin-container * {
  cursor: auto !important;
}

/* Show native cursor inside blackjack overlay as well */
#blackjack-overlay, #blackjack-overlay * {
  cursor: auto !important;
}

/* Loader overlay */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Slightly translucent overlay that takes on the page's background colour */
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  transition: opacity 0.6s ease;
}

/* Adjust loader overlay for dark mode */
body.dark-mode #loader {
  background-color: rgba(16, 16, 16, 0.9);
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Custom bone loader composed of circles and a bar */
.bone {
  width: 60px;
  height: 16px;
  background-color: var(--accent-color);
  position: relative;
  border-radius: 8px;
  animation: rotateBone 2s linear infinite;
}
.bone::before,
.bone::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background-color: var(--accent-color);
  border-radius: 50%;
  top: -6px;
}
.bone::before {
  left: -14px;
}
.bone::after {
  right: -14px;
}
@keyframes rotateBone {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Sparkles created by the cursor trail */
.cursor-sparkle {
  position: fixed;
  /* Increase the size slightly and soften the edges for a richer trail */
  width: 8px;
  height: 8px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
  animation: sparkleFade 0.8s ease-out forwards;
  z-index: 1999;
}

/* Achievements icon floating in the corner.  It shows a star and pulses
   when a new achievement is unlocked. */
#achievements-icon {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px var(--shadow-color);
  z-index: 2500;
  transition: transform 0.2s ease;
}

#achievements-icon:hover {
  transform: scale(1.1);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(0, 180, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 180, 216, 0); }
}

#achievements-icon.pulse {
  animation: pulse 2s infinite;
}

@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  /* Slightly darken link colour on hover */
  color: var(--accent-color);
  text-decoration: underline;
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--nav-bg);
  backdrop-filter: blur(6px);
  z-index: 1000;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}

.nav-links li a {
  font-weight: 500;
  position: relative;
  /* Restore the native pointer over navigation links.  Hiding the pointer
     entirely caused the cursor to behave inconsistently when hovering
     over menu items. */
  cursor: auto;
}

/* Highlight the current page */
.nav-links li a.active {
  color: var(--accent-color);
  font-weight: 700;
}

/* Back to top button.  Appears once the user has scrolled down the page.
   Positioned in the lower right and styled to blend with the site’s
   palette.  Hidden by default and shown via the `.show` class. */
#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  background-color: var(--accent-color);
  color: #fff;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shadow-color);
  z-index: 2000;
  transition: opacity 0.2s ease;
}
#backToTop.show {
  display: flex;
  opacity: 1;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s ease;
}

.nav-links li a:hover::after {
  width: 100%;
}

.toggle-btn {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--accent-color);
  transition: transform 0.2s ease;
}

.toggle-btn:hover {
  transform: rotate(20deg);
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#hero-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--text-color);
  backdrop-filter: none;
}

.hero-overlay h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-overlay p {
  font-size: 1.25rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
  background-color: var(--accent-color);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* Danger button for delete actions */
.btn-danger {
  background-color: transparent;
  color: #e74c3c;
  border: 2px solid #e74c3c;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-danger:hover {
  background-color: #e74c3c;
  color: #fff;
}

/* Section styling */
.section {
  padding: 4rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.alt-section {
  background-color: var(--section-alt-bg);
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 2rem;
  font-weight: 300;
  line-height: 1.5;
}

/* Skills grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.skill-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.skill-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 0.9rem;
  line-height: 1.4;
}

.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px var(--shadow-color);
}

/* Blog list */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.blog-post-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card h4 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.blog-post-card p {
  font-size: 0.9rem;
  color: var(--text-color);
}

.blog-post-card .tags {
  margin-top: 0.75rem;
}

.blog-post-card .tag {
  display: inline-block;
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  margin-right: 0.5rem;
  font-size: 0.75rem;
}

.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-color);
}

/* Project cards for skill pages */
.project-card {
  /* Use an alternate section background for project cards to improve contrast, especially in dark mode. */
  background-color: var(--section-alt-bg);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  /* Give each project card a subtle border so it stands out against the page
     background, especially in dark mode.  This improves contrast on pages
     where the card background colour is very similar to the body background. */
  border: 1px solid var(--shadow-color);

  /* Make the entire card behave like a button to improve usability.  See
     script.js for a click handler that redirects to the project page when
     clicking anywhere on the card. */
  cursor: pointer;

  /* Ensure cards retain a reasonable height even when there is no image.  A fixed minimum height
     gives the user a large enough target to tap or click, particularly on mobile devices. */
  min-height: 10rem;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px var(--shadow-color);
}

/* Ensure project links inherit card styling and remove default underlines. */
.project-card a.project-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.project-card a.project-link:hover {
  text-decoration: underline;
}

/* Project images scale to the width of the card.  Use object-fit to
   maintain aspect ratio and rounded corners for a polished look. */
.project-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* Grid layout for project list */
#projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Fade-in animation for scroll reveal */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

.center {
  margin-top: 2rem;
  text-align: center;
}

/* Contact */
.contact-info {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}

.contact-info p + p {
  margin-top: 0.5rem;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: var(--section-alt-bg);
  color: var(--text-color);
}

/* Utility classes */
.hidden {
  display: none;
}

/* Contact form styles.  The form uses a simple vertical layout with
   consistent spacing and subtle borders.  Inputs and textarea inherit
   the global font and colours.  The status message below the form is
   styled via the `.contact-status` class. */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 500px;
  margin: 1rem auto 0;
}
#contact-form label {
  font-weight: 500;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
  color: var(--text-color);
  background-color: var(--card-bg);
}
#contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
#contact-form button {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: var(--accent-color);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Slightly dim the submit button on hover to provide tactile
   feedback.  Using the CSS filter property avoids the need for
   unsupported colour manipulation functions. */
#contact-form button:hover {
  filter: brightness(0.9);
}
.contact-status {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Social icon row.  Icons are evenly spaced and adopt the
   accent colour.  Hovering slightly lifts the icon and
   brightens it to encourage interaction. */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  justify-content: flex-start;
}
.social-icons a {
  font-size: 1.5rem;
  color: var(--accent-color);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.social-icons a:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* List of mini‑game ideas.  Display ideas in a responsive multi‑column
   layout on larger screens while reverting to a single column on small
   devices.  Use list-style positioning inside for a clean look. */
.game-ideas {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1.25rem;
  list-style: disc;
  padding-left: 1.2rem;
}
.game-ideas li {
  margin-left: 0;
}

@media (max-width: 768px) {
  .hero-overlay h1 {
    font-size: 2.25rem;
  }
  .nav-links {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Achievements modal and toast notifications */
#achievements-modal {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  width: 260px;
  max-height: 50vh;
  background-color: var(--card-bg);
  border: 1px solid var(--shadow-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-color);
  overflow-y: auto;
  padding: 1rem;
  z-index: 2500;
  display: none;
}
#achievements-modal.show {
  display: block;
}
.achievement-item {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.achievement-item .status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--shadow-color);
}
.achievement-item.unlocked .status {
  background-color: var(--accent-color);
}
.achievement-item span {
  font-size: 0.9rem;
}

/* Hint text displayed for locked achievements.  These small
   italicised captions gently nudge visitors towards the actions
   required to unlock each reward without giving away the exact
   criteria. */
.achievement-item .tip {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.8;
  margin-left: 1.6rem;
  color: var(--text-color);
}
.achievement-toast {
  position: fixed;
  top: 1rem;
  right: 50%;
  transform: translateX(50%) translateY(-50%);
  background-color: var(--accent-color);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  box-shadow: 0 4px 8px var(--shadow-color);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.achievement-toast.show {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

/* Mini game overlay and components */
#game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  color: #fff;
  padding: 2rem;
  text-align: center;
}

/* Rich text editor styles used on the admin dashboard */
.navbar, .navbar * {
  /* Always show the native pointer within the navigation bar to avoid
     conflicts between the custom cursor and interactive menu items. */
  cursor: auto !important;
}
.editor-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--card-bg);
  box-shadow: 0 2px 4px var(--shadow-color);
  margin-bottom: 1rem;
}
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem;
}
body.dark-mode .editor-toolbar {
  background-color: rgba(16, 16, 16, 0.2);
}
.editor-toolbar button {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: background-color 0.2s, color 0.2s;
}
.editor-toolbar button:hover {
  background-color: var(--accent-color);
  color: #fff;
}
.rich-editor {
  min-height: 200px;
  padding: 0.75rem;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  overflow-y: auto;
  /* Slight background tint and top border to delineate the editing area */
  /* Provide a more substantial background so the editable area is
     clearly visible against the surrounding card.  Use the same card
     background colour in both light and dark themes. */
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
}
.rich-editor:empty:before {
  content: attr(placeholder);
  color: #888;
  pointer-events: none;
}
#game-overlay.show {
  display: flex;
}
#game-board {
  position: relative;
  width: 80vw;
  max-width: 600px;
  height: 60vh;
  max-height: 500px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 2px solid var(--accent-color);
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 1rem;
  /* Show a crosshair cursor over the game board to clearly indicate
     where the user can click to catch bones. */
  cursor: crosshair;
}
.falling-bone {
  position: absolute;
  /* Increase the size of the bone so it’s easier to click.  The
     original 40×12px felt too small, especially on high DPI
     displays.  Enlarging the width/height and rounding radius makes
     the targets more forgiving while still resembling a bone. */
  width: 60px;
  height: 18px;
  background-color: var(--accent-color);
  border-radius: 9px;
  cursor: pointer;
}
.falling-bone::before,
.falling-bone::after {
  content: '';
  position: absolute;
  /* Enlarge the bone ends proportionally. */
  width: 30px;
  height: 30px;
  background-color: var(--accent-color);
  border-radius: 50%;
  /* Align vertically with the centre of the main bar. */
  top: -6px;
}
.falling-bone::before {
  /* Centre the left nub relative to the increased size. */
  left: -15px;
}
.falling-bone::after {
  /* Centre the right nub relative to the increased size. */
  right: -15px;
}
#game-info {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
#game-start-btn,
#game-close-btn {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 1rem;
}
#game-start-btn:hover,
#game-close-btn:hover {
  opacity: 0.85;
}

/* Blackjack game overlay */
#blackjack-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  color: #fff;
  padding: 2rem;
  text-align: center;
}
#blackjack-overlay.show {
  display: flex;
}
#blackjack-info {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
#blackjack-hands {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#blackjack-controls button {
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin: 0 0.25rem;
}
#blackjack-controls button:disabled {
  opacity: 0.6;
  cursor: default;
}
#blackjack-controls button:hover:not(:disabled) {
  opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Reaction timer overlay
   The reaction timer mini game displays a full‑screen modal when
   triggered via Shift+R.  It darkens the background, hides the
   custom cursor and uses a centred panel for instructions and results.
*/
#reaction-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 4000;
  color: #fff;
  text-align: center;
  padding: 2rem;
}
#reaction-overlay.show {
  display: flex;
}
#reaction-overlay .reaction-box {
  background-color: #222;
  padding: 2rem;
  border-radius: 8px;
  min-width: 300px;
  transition: background-color 0.2s ease;
}
#reaction-overlay button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1rem;
}
#reaction-overlay button:hover {
  opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Placeholder game overlay
   When visitors press one of the Shift+key combinations associated
   with upcoming games, a simple overlay explains that the game is
   coming soon.  The overlay mimics the reaction and blackjack
   overlays to maintain visual consistency. */
.placeholder-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 4000;
  color: #fff;
  text-align: center;
  padding: 2rem;
}
.placeholder-overlay.show {
  display: flex;
}
.placeholder-overlay .placeholder-message {
  margin-bottom: 1rem;
}
.placeholder-overlay button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1rem;
}
.placeholder-overlay button:hover {
  opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Generic game overlay
   Many of the mini games share a similar structure: a full‑screen
   modal with a darkened backdrop, centred content and white text.
   Use this class to reduce duplication.  Individual games can add
   additional elements within the overlay as needed.  The `.show`
   modifier reveals the overlay. */
.game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 4000;
  color: #fff;
  text-align: center;
  padding: 2rem;
}
.game-overlay.show {
  display: flex;
}
.game-overlay button {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 1rem;
  transition: opacity 0.2s ease;
}
.game-overlay button:hover {
  opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Maze Runner styles */
.maze-board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 300px;
  height: 300px;
  margin-top: 1rem;
  gap: 2px;
}
.maze-cell {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.maze-wall {
  background-color: #333;
}
.maze-player {
  background-color: var(--accent-color);
}
.maze-goal {
  background-color: #f5a623;
}

/* Connect Four styles */
.connect-board {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-template-rows: repeat(6, 50px);
  gap: 4px;
  margin-top: 1rem;
}
.cf-cell {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-cell.player {
  background-color: var(--accent-color);
}
.cf-cell.computer {
  background-color: #f55555;
}

/* ---------------------------------------------------------- */
/* Sudoku styles */
.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 360px;
  margin-top: 1rem;
}
.sudoku-cell {
  width: 40px;
  height: 40px;
  border: 1px solid #888;
  text-align: center;
  font-size: 1rem;
  background-color: #fff;
  color: #333;
  outline: none;
}
.sudoku-cell.fixed {
  background-color: #e0e0e0;
  font-weight: bold;
}
.sudoku-cell.sudoku-error {
  background-color: #f8d7da;
}

/* Minesweeper styles */
.minesweeper-board {
  display: grid;
  grid-template-columns: repeat(10, 30px);
  grid-template-rows: repeat(10, 30px);
  gap: 2px;
  margin-top: 1rem;
}
.ms-cell {
  width: 30px;
  height: 30px;
  background-color: #3a3a3a;
  color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
}
.ms-cell.revealed {
  background-color: #e0e0e0;
  color: #333;
}
.ms-cell.bomb {
  background-color: #e74c3c;
  color: #fff;
}
.ms-cell.flagged {
  background-color: #f39c12;
  color: #fff;
}

/* Snake styles */
.snake-board {
  display: grid;
  grid-template-columns: repeat(20, 20px);
  grid-template-rows: repeat(20, 20px);
  gap: 2px;
  margin-top: 1rem;
}
.snake-cell {
  width: 20px;
  height: 20px;
  background-color: #333;
}
.snake-cell.snake {
  background-color: var(--accent-color);
}
.snake-cell.food {
  background-color: #e74c3c;
}

/* Brick Breaker styles */
#brick-canvas {
  background-color: #222;
  display: block;
  margin: 1rem auto;
  border: 2px solid #888;
}

/* 2048 styles */
.tw2048-board {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(4, 80px);
  gap: 8px;
  margin-top: 1rem;
}
.tw2048-cell {
  width: 80px;
  height: 80px;
  background-color: #cdc1b4;
  color: #776e65;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 4px;
  /* Smoothly animate transformations (scale) and colour changes.  This
     enables simple animation when tiles merge or new tiles appear
     without complex JavaScript calculations. */
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.tw2048-cell[data-val="0"] {
  background-color: #cdc1b4;
  color: #cdc1b4;
}
.tw2048-cell[data-val="2"] { background-color: #eee4da; }
.tw2048-cell[data-val="4"] { background-color: #ede0c8; }
.tw2048-cell[data-val="8"] { background-color: #f2b179; color: #f9f6f2; }
.tw2048-cell[data-val="16"] { background-color: #f59563; color: #f9f6f2; }
.tw2048-cell[data-val="32"] { background-color: #f67c5f; color: #f9f6f2; }
.tw2048-cell[data-val="64"] { background-color: #f65e3b; color: #f9f6f2; }
.tw2048-cell[data-val="128"] { background-color: #edcf72; color: #f9f6f2; }
.tw2048-cell[data-val="256"] { background-color: #edcc61; color: #f9f6f2; }
.tw2048-cell[data-val="512"] { background-color: #edc850; color: #f9f6f2; }
.tw2048-cell[data-val="1024"] { background-color: #edc53f; color: #f9f6f2; }
.tw2048-cell[data-val="2048"] { background-color: #edc22e; color: #f9f6f2; }
.tw2048-cell.pop {
  transform: scale(1.15);
  transition: transform 0.2s ease;
}

/* Doodle Jump styles */
#doodle-canvas {
  background-color: #222;
  display: block;
  margin: 1rem auto;
  border: 2px solid #888;
}

/* Conway's Game of Life styles */
.life-board {
  display: grid;
  grid-template-columns: repeat(30, 16px);
  grid-template-rows: repeat(30, 16px);
  gap: 1px;
  margin-top: 1rem;
}
.life-cell {
  width: 16px;
  height: 16px;
  background-color: #444;
  border-radius: 2px;
}
.life-cell.alive {
  background-color: var(--accent-color);
}

/* ---------------------------------------------------------- */
/* Mobile hamburger menu */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 1rem;
  z-index: 1001;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* Responsive navigation */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--nav-bg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1rem;
    display: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px var(--shadow-color);
    width: max-content;
    z-index: 999;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links li {
    margin: 0.5rem 0;
  }
  .nav-links li a {
    padding: 0.25rem 0;
  }
  .hamburger {
    display: flex;
  }
  /* Keep the dark mode toggle visible but spaced */
  #darkModeToggle {
    margin-left: auto;
  }
}