body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
}
code, pre {
  font-family: ui-monospace, SFMono-Regular,
               Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
}

/* =============================
   Global Reset & Base Styles
============================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  background-color: #000;
  background-image: url("../images/LB.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 1.6;
  padding: 1rem 2%;
  scroll-behavior: smooth;
}

h1, h2, h3 {
  font-family: 'Fira Code', monospace;
  margin-bottom: 2rem;
}

h1 {
  text-align: center;
  font-size: 2.2rem;
  cursor: pointer;
  color: #00bfff;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.4rem;
}

/* =============================
   Profile Image
============================= */
img.profile {
  display: block;
  margin: 1rem auto;
  width: 120px;
  max-width: 35%;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

/* =============================
   Sections
============================= */
.section {
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2rem;
  margin: 2rem auto;
  width: 90%;
  max-width: 800px;
}

/* =============================
   Quick Links (Desktop Bar)
============================= */

.quick-links {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 160px;

  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  padding: 0.8rem;
  z-index: 999;
}

.quick-links h3 {
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #00bfff;
}

.quick-links a {
  display: block;
  padding: 6px 8px;
  margin: 4px 0;
  font-size: 0.9rem;
  border-radius: 6px;
  transition: background 0.2s, transform 0.15s;
}

.quick-links a:hover {
  background: rgba(0,191,255,0.12);
  transform: translateX(-2px);
}

/* Hide on phones 
@media (max-width: 900px) {
  .quick-links {
    display: none;
  }  */
@media (max-width: 900px) {

  .quick-links {
    top: 50%;
    right: 0;
    width: 220px;

    /* hide off screen */
    transform: translate(100%, -50%);
    transition: transform 0.35s ease;

    border-radius: 14px 0 0 14px;
  }

  /* visible handle area */
  .quick-links::before {
    content: "≡";
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translateY(0%);
    width: 38px;
    height: 65px;
    background: rgba(0,0,0,0.75);
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bfff;
    font-size: 20px;
    cursor: pointer;
  }
  
  /* Slide out on hover (desktop) */
  .quick-links:hover {
    transform: translate(0, -50%);
  }
  /* Slide out on tap (mobile) */
  .quick-links:active {
    transform: translate(0, -50%);
  }

}
/* cut off for bar & under testing */
 
/* =============================
   Lists
============================= */
ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-bottom: 0.8rem;
}

/* =============================
   Links
============================= */
a {
  color: #00bfff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* =============================
   Blockquotes
============================= */
blockquote {
  font-style: italic;
  text-align: center;
  margin: 2rem auto;
  max-width: 90%;
  color: #cccccc;
}

/* =============================
   Images inside sections
============================= */
.section img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 1rem;
  border: 1px solid #333333;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: zoom-in;
}

.section img.zoomed {
  transform: scale(1.5);
  z-index: 10;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* titular*/
.language-switcher {
  text-align: center;
  background: rgba(0,0,0,0.6);
  padding: 1rem;
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.language-switcher h2 {
  margin-bottom: 1rem;
  color: #00bfff;
}

.language-switcher .button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.language-switcher button {
  padding: 0.5rem 1rem;
  background: #00bfff;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s, background 0.2s;
}

.language-switcher button:hover {
  background: #009acd;
  transform: scale(1.05);
}

/* =============================
   Minesweeper Styles
============================= */
#minesweeper-section {
  background-image: url("../images/illustration-defense-redim3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  width: 100%;
}

#minesweeper-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  background: rgba(0,0,0,0.85);
  border-radius: 14px;
  margin: 0 auto;
}

#ms-topbar {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

#ms-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#ms-status {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  height: 1.6rem;       /* fix height */
  line-height: 1.6rem;  /* center text vertically */
  min-height: 1.6rem;   /* optional, keeps compatibility */
  transition: transform 0.2s ease, opacity 0.2s ease;
}
    
/* Pop animation for status */
#ms-status.pop {
  transform: scale(1.08);
  opacity: 1;
}

#ms-newgame-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  background-color: #00bfff;
  color: #000;
  border: none;
  border-radius: 6px;
}

#ms-newgame-btn:hover {
  background-color: #009acd;
}

/* Minesweeper Grid */
#minesweeper {
  user-select: none;
  display: inline-block;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.ms-row {
  display: flex;
  justify-content: center;
}

.ms-cell {
  width: 30px;
  height: 30px;
  border: 1px solid #555;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  background-color: #222;
  color: #fff;
  font-weight: bold;
  font-family: monospace;
  transition: transform 0.08s ease, background-color 0.12s ease;
}

.ms-cell:active {
  transform: scale(0.95);
}

.ms-cell.revealed {
  background-color: #444;
  cursor: default;
}

.ms-cell.mine {
  background-color: #a00;
}

/* if player wins, mines appear green instead of red */
#minesweeper.win .ms-cell.mine {
 background-color: #0a0;
  }

/* =============================
   Buttons
============================= */
button {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
}

#goTop {
  display: none;                /* hidden by default */
  position: fixed;              /* fixed on screen */
  bottom: 20px;                 /* distance from bottom */
  right: 20px;                  /* distance from right */
  width: 50px;                  /* make it circular */
  height: 50px;                 /* make it circular */
  background-color: #113652;    /* green background */
  color: white;                 /* arrow color */
  font-size: 1.6rem;            /* arrow size */
  border: none;                 /* no default border */
  border-radius: 50%;           /* perfectly round */
  cursor: pointer;              /* pointer on hover */
  text-align: center;           /* center the arrow */
  line-height: 50px;            /* vertically center the arrow */
  box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* subtle shadow */
  transition: background-color 0.3s, transform 0.2s;
}

#goTop:hover {
  background-color: #266da3;    /* darker green on hover */
  transform: translateY(-2px);  /* slight lift */
}

/* =============================
   Responsive Media Queries
============================= */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  p { font-size: 0.95rem; }
  .section { padding: 1rem; margin: 1rem auto; }
  .ms-cell { width: 26px; height: 26px; line-height: 26px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  p { font-size: 0.9rem; }
  .section { padding: 0.8rem; margin: 0.8rem auto; }
  .ms-cell { width: 24px; height: 24px; line-height: 24px; font-size: 0.8rem; }
  button { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
}

@media (max-width: 360px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.2rem; }
  p { font-size: 0.85rem; }
  .section { padding: 0.6rem; margin: 0.6rem auto; }
  .ms-cell { width: 20px; height: 20px; line-height: 20px; font-size: 0.7rem; }
  button { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
}

    /* the quote, duh */
    #quote{
  color: #00bfff;
  text-shadow:
    0 0 6px rgba(0,191,255,0.8),
    0 0 14px rgba(0,191,255,0.6),
    0 0 28px rgba(0,191,255,0.35);
}

/* Neon animated frame */
#neonFrame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
}

#neonFrame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
background: linear-gradient(
  45deg,
  violet,
  indigo,
  blue,
  cyan,
  lime,
  yellow,
  orange,
  red,
  violet
);

  background-size: 400% 400%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
}


#neonFrame.active::before {
  opacity: 1;
  animation:
    borderFlow 6s ease-in-out infinite,
    neonBeat 1.2s ease-in-out infinite;
}

/* outer glow layer */
#neonFrame.active {
  box-shadow:
    0 0 20px violet,
    0 0 40px blue,
    0 0 60px cyan;
}

@keyframes neonBeat {
  0%   { filter: blur(1px) brightness(1); }
  50%  { filter: blur(2px) brightness(1.8); }
  100% { filter: blur(1px) brightness(1); }
}

@keyframes borderFlow {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* Disable neon effects on mobile */
@media (max-width: 900px) {

  #neonFrame.active::before {
    animation: none !important;
    opacity: 0 !important;
  }

  #neonFrame.active {
    box-shadow: none !important;
    }
   }

/* loader test */
#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* wrapper for image + text */
.loaderContent {
  text-align: center;
}

.loaderContent img {
  width: 120px;       /* size of webp/gif */
  margin-bottom: 20px;
  filter: drop-shadow(0 0 15px cyan);
}

.loaderText {
  color: cyan;
  font-size: 18px;
  letter-spacing: 3px;
  font-family: Arial, sans-serif;
  animation: loaderPulse 1.2s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%   { opacity: 0.3; text-shadow: 0 0 5px cyan; }
  50%  { opacity: 1;   text-shadow: 0 0 20px cyan, 0 0 40px blue; }
  100% { opacity: 0.3; text-shadow: 0 0 5px cyan; }
}
button:active {
  transform: scale(0.96);
}