/* === Fonts =============================================================== */
@font-face {
  font-family: "Mood";
  src: url("fonts/MOODMKIIOutline.woff2") format("woff2"),
       url("fonts/MOODMKIIOutline.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MoodSmall";
  src: url("fonts/MOOD.woff2") format("woff2"),
       url("fonts/MOOD.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* === Root + Reset ======================================================== */
:root {
  /* Footer unchanged */
  --footer-h: clamp(20px, min(5vh, 5vw), 56px);
  /* Header scales with viewport, but stays within sane min/max bounds.
     We use min(dvh, dvw) so the shorter side controls size = better across rotations. */
  --header-h: clamp(140px, min(24dvh, 32dvw), 200px);
}
: 56px;
}

html, body { height: 100%; margin: 0; }
body {
  /* Keeps the page itself from vertical scrolling;
     the middle .stage handles scrolling (horizontal) */
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: #111;
  background: transparent;
}

/* === Header / Footer (fixed) ============================================ */
header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid #ddd;
  z-index: 10;
  /* 'visible' for spillover ?!*/
  overflow: hidden;
  text-align: center;
  padding: 8px 16px;
}
header .tagline {
  font-style: italic;
  color: #555;
  margin: 0 0 0.5rem;
	justify-content: center;
	text-align: center;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: .5rem 0 0;
}
nav a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
}
nav a:hover { text-decoration: underline; }

footer {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--footer-h);
  background: #fff;
  border-top: 1px solid #ddd;
  z-index: 10;
  display: flex;
  justify-content: space-evenly;
  place-items: center;
  font-size: 0.9rem;
  color: #777;
}

/* === Begin: Vertical snap panels inside .stage (CSS-only) === */

/* The fixed middle pane already there */
.stage {
  position: fixed;
  top: var(--header-h);
  bottom: var(--footer-h);
  left: 0; right: 0;
  background: #fafafa;
  overflow: hidden; /* the inner scroller handles overflow */
}

/* Vertical scroller */
.stage > .vscroll {
  height: 100%;
  overflow-y: auto;            /* vertical scroll here */
  overflow-x: hidden;
  scroll-snap-type: y mandatory; /* crisp “jump” snapping */
  scroll-behavior: auto;       /* no smoothing → decisive snap */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* avoid bubbling to the page */
}

/* Each panel fills the stage height */
.stage > .vscroll > section {
  block-size: 100%;            /* = height: 100% in writing-mode terms */
  inline-size: 100%;
  scroll-snap-align: start;    /* or: center */
  scroll-snap-stop: always;    /* don’t skip panels on fast wheels */
  display: grid; place-items: center;
  box-sizing: border-box;
  padding: 2rem;
}

/* Optional: thin vertical scrollbar */
.stage > .vscroll { scrollbar-width: thin; }
.stage > .vscroll::-webkit-scrollbar { width: 8px; }
.stage > .vscroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 8px; }

/* === End: Vertical snap panels === */

/* === Slides === */

/* Intro card on first slide */
.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 600px;
}

.intro-pic {
  width: clamp(30vh, min(35vh, 50vw), 50vw);           /* scale relative to its container */
  max-width: none;       /* remove the cap if you had one */
  height: auto;
  border-radius: 50%;    /* keep it circular */
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.intro-text {
  font-size: clamp(10px, min(1.6vh, 1.1vw), 1.3rem); /*scale text down*/
  line-height: 1.5;
  color: #333;
}

/* Make sure tracks can actually shrink */
.skills-grid,
.skill { min-width: 0; }                 /* critical for CSS Grid */

/* Tighter container + smaller base cell size on phones */
.skills-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 1rem auto 0;
  display: grid;
  gap: clamp(0.6rem, 0.5vw, 0.8rem);

  /* Use a smaller, viewport-aware cell min; auto-fill works well here */
  --cell-min: clamp(50px, 12vw, 120px);
  grid-template-columns: repeat(auto-fill, minmax(var(--cell-min), 1fr));
}

/* Keep each item square and centered */
.skill {
  aspect-ratio: 1 / 0.9;
  display: grid;
  place-items: center;
  margin: 0;
  text-align: center;
}

/* Icons: allow shrinking; apply to <img> and devicon <i> */
.skill .icon {
  display: block;
  width: clamp(15px, min(6vh, 6vw), 60px);
  height: auto;                       /* for <img> */
  font-size: clamp(15px, min(6vh, 6vw), 60px); /* for <i> */
  line-height: 1;
  object-fit: contain;
  margin: 0 auto;
}

/* Captions: shrink on small screens and don't widen the cell */
.skill figcaption {
  margin-top: clamp(3px, min(0.4vh, 0.2vw), 5px);
  font-size: clamp(9px, min(3.7vh, 3.5vw), 13px);
  line-height: 0.5;
  max-width: 12ch;          /* prevent long labels from widening the track */
  word-break: break-word;   /* allow wrap if needed */
}

/* Extra nudge for very narrow phones */
@media (max-width: 500px) {
  .skills-grid {
    gap: 0.2rem;
    --cell-min: 64px;       /* a touch smaller to encourage another row */
  }
  .skill figcaption { max-width: 10ch; }
}



/* === End: Slides === */



/* === GitHub Button ============================================= */

.btn-github {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: #24292e;     /* GitHub black */
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-github:hover {
  background: #333;
  transform: translateY(-2px);
}

.btn-github:active {
  background: #000;
  transform: translateY(0);
}


/* === ASCII 3D header effect ============================================= */
.ascii-3d {
  position: relative;
  white-space: pre;
  font-family: monospace;
  line-height: 1.1;
  font-size: clamp(10px, 2vw, 18px);
  color: #111;
  text-shadow:
    0.5px 0.5px 0.02em #111,
    0.5px 0.5px 0.04em #111,
    0.5px 0.5px 0.6em  #111;
}
/* Turquoise + pink offset layers (revealed by a moving mask) */
.ascii-3d::before,
.ascii-3d::after {
  content: attr(data-ascii);
  position: absolute;
  inset: 0;
  white-space: pre;
  pointer-events: none;

  /* Moving mask band (diagonal). Adjust stops to taste */
  -webkit-mask-image: linear-gradient(
    70deg,
    transparent 40%,
    #000 50%,
    #000 60%,
    transparent 70%
  );
          mask-image: linear-gradient(
    70deg,
    transparent 40%,
    #000 50%,
    #000 60%,
    transparent 70%
  );
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  animation: wave-sweep 6.8s linear infinite;
}
.ascii-3d::before { /* turquoise */
  color: #00e5ff;
  transform: translate(3px, 3px);
  text-shadow: 0.5px 0.5px 0 #00e5ff, 0 0 0 #00e5ff;
}
.ascii-3d::after {  /* pink */
  color: #ff2ba6;
  transform: translate(-3px, -3px);
  text-shadow: 1px 1px 0 #ff2ba6, 1px 1px 0 #ff2ba6;
}
@keyframes wave-sweep {
  to {
    -webkit-mask-position: 100% 0%;
            mask-position: 100% 0%;
  }
}

/* === Typography ========================================================== */
h1 {
  font-family: monospace;
  text-shadow: 2px 2px 2px #94B39855;
  margin: 0 0 0;
}
h2 {
  font-family: "Mood", sans-serif;
  border-bottom: 1px solid #ccc;
  margin: 0 0 0;
  font-size: clamp(7px, min(1.2vh, 2vw), 0.9rem); /*scale text down*/
}
h3, h4, h5, h6 {
  font-family: "MoodSmall", sans-serif;
  font-size: 0.85rem;
  font-size: clamp(6px, min(1.2vh, 1.4vw), 0.85rem); /*scale text down*/
  margin: 0;
  text-shadow: 2px 2px 2px #94B39855;
}

p, ul {
  text-align: justify;
  line-height: 1.2;
  white-space: pre-line;
  font-family: monospace, sans-serif;
  font-size: 1.1rem;
  font-size: clamp(10px, min(1.5vh, 2.1vw), 1.1rem); /*scale text down*/
  margin: 0;
}

pre {
	margin: 0 0 0;
}

strong {
    font-weight: bolder;
}

/*scale text down*/
.ascii-3d, pre h1, h1 {
  font-size: clamp(7px, min(1.2vh, 2vw), 18px);
}

/* === Game ========================================================== */
/* Give the canvas a visible size on the page */
#game {
  display: block;
  margin: 20px auto;
  width: 800px;   /* CSS size, can be smaller or larger */
  height: 600px;  /* JS code will scale to match */
  border: 1px solid #000; /* optional frame */
}