:root{
  --bg: #000000;          /* black background */
  --ink: #e8e8e8;
  --muted: #9aa0a6;
  --duration: 12s;        /* animation loop duration */
  --scale-min: 0.94;      /* start scale */
  --scale-max: 1.05;      /* end scale */
  --opacity-min: .78;     /* start opacity */
  --opacity-max: 1;       /* end opacity */
}

*{ box-sizing: border-box; }

html, body{ height: 100%; background: var(--bg); }

body{
  margin: 0;
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
               Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--bg);
  animation: pagefade 2000ms ease-out both;
}

/* Shared containers */
main.main{
  width: min(70vmin, 560px); /* responsive size that fits phones + desktops */
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}

/* Shared logo animation */
.logo{
  width: 100%; height: auto; display: block;
  will-change: transform, opacity;
  animation: zoomfade var(--duration) ease-in-out infinite alternate;
}

/* Footer hint (shared) */
.hint{
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #888; letter-spacing: .04em;
  font-size: clamp(12px, 1.8vw, 14px);
  user-select: none;
}

#hint{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
}

/* Cursor blink (default pipe) */
#hint::after{
  content: "|";
  margin-left: 2px;
  animation: blink 1s steps(1, end) infinite;
}

/* Animations */
@keyframes zoomfade{
  0%   { transform: scale(var(--scale-min)); opacity: var(--opacity-min); }
  100% { transform: scale(var(--scale-max)); opacity: var(--opacity-max); }
}
@keyframes pagefade{ from{opacity:0} to{opacity:1} }
@keyframes blink { 50% { opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .logo, body{ animation: none !important; }
}

/* Image rendering hint */
img{ image-rendering: -webkit-optimize-contrast; }





/* ===== Top navigation bar ===== */
.site-header{
  position: sticky; /* fixed-like but respects stacking contexts */
  top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(0,0,0,.65);
  border-bottom: 1px solid #1f2430;
  backdrop-filter: blur(6px);
}

/* Brand */
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  color: #e8e8e8; text-decoration: none;
}
.brand:hover .brand-text{ color:#cfd8ff; }
.brand-logo{ width: 32px; height: 32px; display:block; }
.brand-text{
  font-weight: 600; letter-spacing:.2px;
  font-size: clamp(14px, 2vw, 16px);
}

/* Nav links */
.main-nav{ display: inline-flex; align-items:center; gap: 16px; }
.nav-link{
  color: #cfd3da; text-decoration: none;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  font-size: clamp(13px, 1.8vw, 14px);
}
.nav-link:hover{
  color: #e8f7ff;
  border-color: #2a3140;
  background: rgba(110,231,255,.06);
}
.nav-link[aria-current="page"]{
  color: #eaffff;
  border-color: #2a3140;
  background: rgba(110,231,255,.12);
  box-shadow: inset 0 0 0 1px rgba(110,231,255,.18);
}

/* Ensure page content isn’t hidden under the sticky header */
.sudoku{ margin-top: 14px; }

/* Small screens: tuck the brand text if needed */
@media (max-width: 420px){
  .brand-text{ display:none; }
}



/* ===== Full-bleed sticky header (fixed) ===== */
:root{
  --header-h: 56px; /* header height */
}

.site-header{
  position: fixed;        /* full-width, always at the top */
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 1000;

  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 16px;        /* controls inner breathing space */
  background: rgba(0,0,0,.75);
  border-bottom: 1px solid #1f2430;
  backdrop-filter: blur(6px);
}

.brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #e8e8e8; }
.brand-logo{ width: 32px; height: 32px; display:block; }
.brand-text{ font-weight: 600; letter-spacing:.2px; font-size: clamp(14px, 2vw, 16px); }

.main-nav{ display: inline-flex; align-items:center; gap: 16px; }
.nav-link{
  color: #cfd3da; text-decoration: none;
  padding: 8px 10px; border-radius: 10px; border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  font-size: clamp(13px, 1.8vw, 14px);
}
.nav-link:hover{ color:#e8f7ff; border-color:#2a3140; background:rgba(110,231,255,.06); }
.nav-link[aria-current="page"]{
  color:#eaffff; border-color:#2a3140; background:rgba(110,231,255,.12);
  box-shadow: inset 0 0 0 1px rgba(110,231,255,.18);
}