/* ============================================================
   Shreyan Phadke — personal site, Minecraft launcher theme
   Ported from the Claude Design prototype to plain HTML/CSS/JS.
   ============================================================ */

@font-face {
  font-family: 'Minecraftia';
  src: url('assets/minecraft.ttf') format('truetype');
  font-display: swap;
  /* Minecraftia 2.0 (Andrew Tyler) ships with em=1536, a ~2.1em line box, and
     wider/taller-capped glyphs than the original font the layout was tuned to
     (em=1024, line-height normal ~1.09). These descriptors normalize its
     metrics back to that original so site-wide spacing/sizing is unchanged —
     no per-rule re-mapping. size-adjust matches the old avg advance width;
     the line-box overrides replay the old hhea ascent/descent/lineGap
     (override = old-fraction ÷ size-adjust). Tune size-adjust up toward ~86%
     if you want the glyphs a touch larger. */
  size-adjust: 81%;
  ascent-override: 92.5%;
  descent-override: 30.9%;
  line-gap-override: 11.1%;
}

*,
*::before,
*::after { box-sizing: border-box; }

* { -webkit-font-smoothing: none; font-smooth: never; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Minecraftia', monospace;
  background: #202020;
  color: #fff;
  overflow: hidden;            /* the launcher is a fixed full-viewport stage */
}

img { -webkit-user-drag: none; user-select: none; }

/* ---- Animations ---------------------------------------------------------- */
@keyframes hl-splash {
  0%, 100% { transform: rotate(-18deg) scale(1); }
  50%      { transform: rotate(-18deg) scale(1.09); }
}
@keyframes hl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hl-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes hl-toast-in  { from { transform: translateX(120%); } to { transform: translateX(0); } }
@keyframes hl-toast-out { from { transform: translateX(0); } to { transform: translateX(120%); } }
@keyframes hl-death-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ---- The stage ----------------------------------------------------------- */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.bg-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.35) 100%);
}

/* ---- Minecraft button ---------------------------------------------------- */
.mc-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 19px;
  letter-spacing: 1px;
  color: #e6e6e6;
  text-shadow: 2px 2px 0 #1f1f1f;
  background: linear-gradient(180deg, #8c8c8c 0%, #727272 100%);
  border: 2px solid #000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.20), inset 0 -3px 0 rgba(0,0,0,0.32);
  cursor: pointer;
  user-select: none;
}
.mc-btn:hover,
.mc-btn:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, #a8a8a8 0%, #8a8a8a 100%);
  box-shadow: inset 0 0 0 2px #fcffd0, inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -3px 0 rgba(0,0,0,0.32);
  outline: none;
}
.mc-btn:active {
  color: #fff;
  background: linear-gradient(180deg, #787878 0%, #666 100%);
  box-shadow: inset 0 0 0 2px #fcffd0, inset 0 2px 0 rgba(0,0,0,0.3);
  transform: translateY(1px);
}
.mc-btn--sm { font-size: 18px; }
.mc-btn--wide { min-width: 220px; padding: 0 24px; }
.mc-btn--tall { height: 46px; font-size: 20px; }


/* ---- Screens & overlays -------------------------------------------------- */
.screen { position: absolute; inset: 0; }
.screen[hidden] { display: none; }

.overlay {
  position: absolute; inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.overlay--center { align-items: center; justify-content: center; }

/* Title screen fades out behind the open Blog book, instead of cutting away.
   (.menu sets display:flex, so it needs an explicit [hidden] guard to hide.) */
#screen-menu { transition: opacity 0.32s ease; }
#screen-menu[hidden] { display: none; }
#screen-menu.is-faded { opacity: 0; pointer-events: none; }

.bg-dirt {
  position: absolute; inset: 0;
  /* Real 16x16 Minecraft dirt block (~0.4 KB), repeated at its NATURAL brightness.
     Darkening is applied separately as an overlay on top (see .bg-dirt-dark and the
     projects/prompt scrims), so the tile stays bright and scale + darkness are
     independently tunable. background-size sets the block scale; pixelated keeps
     the blocks crisp. */
  background-image: url('assets/dirt-tile.webp?v=2');
  background-repeat: repeat;
  background-size: 96px 96px;
  image-rendering: pixelated;
}
/* Shared background-dark level: the bright dirt tile with a 0.74 black overlay on
   top, reproducing Minecraft's darkened menu dirt over this brighter tile. One
   self-contained layer — use wherever a full-bleed dark dirt backdrop is needed. */
.bg-dirt-dark {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.74)),
    url('assets/dirt-tile.webp?v=2');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 96px 96px;
  image-rendering: pixelated;
}
/* Prompt-screen scrim — the same 0.74 background-dark level, over .bg-dirt. */
.dim-60 { position: absolute; inset: 0; background: rgba(0,0,0,0.74); }

/* =========================================================================
   MAIN MENU
   ========================================================================= */
.menu {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: 0 16px;
}
.menu__logo-wrap { position: relative; margin-top: 7vh; width: min(715px, 84vw); }
.menu__logo {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35));
}
.menu__splash {
  position: absolute; right: -16%; bottom: -14%;
  color: #ffff00;
  font-size: clamp(17px, 2.8vw, 30px);
  text-shadow: 2px 2px 0 #3f3f00;
  animation: hl-splash 0.62s ease-in-out infinite;
  transform-origin: center;
  pointer-events: none;
  white-space: nowrap;
}
.menu__buttons {
  /* Authentic Minecraft title screen: the logo sits high (~7vh) and a large gap
     drops the button block to ~34vh, straddling the vertical middle with the
     bottom third left empty — matching height/4+48 in the game's layout. */
  margin-top: 20vh;
  width: 460px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 10px;
}
.menu__row { display: flex; gap: 10px; margin-top: 14px; width: 100%; }
.menu__row .mc-btn { flex: 1; }
/* The menu sits a touch larger than the other screens (~15%), so scale its buttons
   up from the shared .mc-btn size. Scoped to .menu so no other screen is affected. */
.menu .mc-btn { height: 50px; font-size: 22px; }

.menu__footer {
  position: absolute; bottom: 6px;
  color: #fff; font-size: 17px;
  text-shadow: 2px 2px 0 #1f1f1f;
  /* Minecraftia's space glyph is only 0.25em (a third of a letter), so word gaps
     look like half-spaces on this dense line; nudge them out to a normal width. */
  word-spacing: 0.2em;
}
.menu__footer--left { left: 8px; }
.menu__footer--right { right: 8px; }

/* =========================================================================
   PROJECTS (multiplayer server list)
   ========================================================================= */
.projects { font-family: inherit; image-rendering: pixelated; }
.projects__title {
  position: relative; flex: none; text-align: center;
  padding: clamp(32px, 5.5vh, 56px) 0 8px;
  font-size: clamp(26px, 3.2vw, 33px); color: #fff;
  text-shadow: 2px 2px 0 #1f1f1f;
  /* Title/panel bars at the background-dark level (0.74 over the bright dirt tile),
     matching Minecraft's multiplayer screen where the bars sit lighter than the
     list container. */
  background: rgba(0,0,0,0.74);
  border-bottom: 2px solid rgba(0,0,0,0.55);
}
.projects__body {
  position: relative; flex: 1; min-height: 0;
  /* The scrollable list is a much darker container (0.90 over the bright dirt tile),
     matching the reference's near-black list area, so the server rows stand out
     against the lighter title/panel bars. */
  background: rgba(0,0,0,0.9);
  display: flex; justify-content: center;
  overflow: auto;
}
.projects__inner {
  width: 100%; max-width: 840px;
  padding: 14px 16px;
  display: flex; flex-direction: column;
}
.projects__scanning {
  flex: 1; min-height: 220px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px;
  color: #cfcfcf; text-shadow: 2px 2px 0 #000; font-size: 17px;
}
.projects__scanning[hidden] { display: none; }
.projects__dots { margin-top: 10px; font-size: 24px; letter-spacing: 10px; display: flex; }
.projects__dots span { animation: hl-dots 1.2s infinite; }
.projects__dots span:nth-child(2) { animation-delay: 0.2s; }
.projects__dots span:nth-child(3) { animation-delay: 0.4s; }
.projects__panel {
  position: relative; flex: none;
  background: rgba(0,0,0,0.74);
  border-top: 2px solid rgba(0,0,0,0.55);
  padding: 14px 16px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.projects__panel-row { display: flex; gap: 12px; width: 100%; max-width: 720px; }
.projects__panel-row .mc-btn { flex: 1; }

/* Server row (was the ProjectServer component) */
.server {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 12px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0);
  user-select: none;
}
.server:hover { border: 2px solid rgba(255,255,255,0.30); background: rgba(255,255,255,0.06); }
.server.is-selected { border-color: rgba(255,255,255,0); }
.server.is-selected::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
  pointer-events: none;
}
.server__icon {
  position: relative; flex: none;
  width: 84px; height: 84px;
  background: repeating-linear-gradient(45deg, #3a3a3a 0, #3a3a3a 6px, #333 6px, #333 12px);
  border: 2px solid #000;
  display: flex; align-items: center; justify-content: center;
  image-rendering: pixelated;
}
/* The square project logo filling the icon tile (sources are 116px, ~2x display). */
.server__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The green "join" arrow over the icon — Minecraft's multiplayer hover affordance.
   Hidden by default; revealed when the row is hovered or selected. */
.server__play {
  position: absolute; inset: 0;
  /* Native <button> chrome: without this, the UA's opaque default button
     background (ButtonFace) paints over the whole icon tile on hover, whiting
     out the project logo beneath. Keep it transparent so only the play icon shows. */
  appearance: none; -webkit-appearance: none; background: transparent;
  margin: 0; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.08s linear;
  image-rendering: pixelated;
}
.server:hover .server__play,
.server.is-selected .server__play { opacity: 1; pointer-events: auto; }
.server__play img { width: auto; height: 44px; image-rendering: pixelated; display: block; }
.server__play:active img { transform: translateY(1px); }
.server__main { flex: 1; min-width: 0; padding-top: 1px; }
.server__name {
  font-size: 21px; color: #fff; text-shadow: 2px 2px 0 #1f1f1f;
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.server__desc { margin-top: 5px; max-width: 90%; font-size: 16px; color: #a6a6a6; text-shadow: 1px 1px 0 #000; line-height: 1.4; white-space: pre-line; }
.server__meta { flex: none; display: flex; align-items: center; gap: 7px; padding-top: 2px; }
.server__years { font-size: 18px; color: #d8d8d8; text-shadow: 1px 1px 0 #000; white-space: nowrap; }

/* =========================================================================
   ADD PROJECT / PROJECT DETAIL prompts
   ========================================================================= */
.prompt {
  position: relative;
  animation: hl-rise 0.3s ease-out;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 24px; max-width: 640px;
}
.prompt__tag {
  font-size: 13px; letter-spacing: 2px; color: #9a9a9a;
  text-shadow: 2px 2px 0 #000; margin-bottom: 12px; text-transform: uppercase;
}
.prompt__title {
  font-size: clamp(26px, 4.6vw, 44px); color: #fff;
  text-shadow: 3px 3px 0 #1f1f1f; line-height: 1.2; text-wrap: balance;
}
.prompt__title--lg { font-size: clamp(32px, 5.5vw, 56px); line-height: 1.1; }
.prompt__body {
  margin-top: 18px; font-size: 18px; color: #bdbdbd;
  text-shadow: 2px 2px 0 #000; max-width: 520px;
}
.prompt .mc-btn { margin-top: 32px; }

/* Card variant — turns the prompt into a beveled Minecraft GUI box that pops
   over a dimmed screen (the "Add Server" dialog). Beveled like .mc-btn. */
.prompt--card {
  padding: 36px 40px 34px; max-width: 560px;
  background: linear-gradient(180deg, #313131 0%, #232323 100%);
  border: 2px solid #000;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -4px 0 rgba(0,0,0,0.45),
    0 8px 0 rgba(0,0,0,0.40);
}
/* Green text link, echoing the inventory tooltip's "> open link" convention. */
.prompt__link {
  display: inline-flex; align-items: center;
  margin-top: 24px; font-size: 19px; letter-spacing: 1px;
  color: #5dd64a; text-shadow: 2px 2px 0 #000;
  text-decoration: none; cursor: pointer;
}
.prompt__link::before { content: '>'; color: #3fae31; margin-right: 0.4em; }
.prompt__link:hover,
.prompt__link:focus-visible {
  color: #7cff5f; text-decoration: underline; outline: none;
}
.prompt__link:hover::before,
.prompt__link:focus-visible::before { color: #5dd64a; }

/* Modal: a dialog floating above another live screen (e.g. the Projects list),
   which shows through a dim scrim. No blur — just an opacity reduction. */
.modal__overlay { z-index: 50; }
.modal__scrim {
  appearance: none; -webkit-appearance: none;
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0;
  background: rgba(0,0,0,0.62); cursor: pointer;
  animation: hl-fade 0.2s ease-out;
}

/* =========================================================================
   BLOG (Minecraft written-book GUI)
   ========================================================================= */
.blog {
  position: absolute; inset: 0; z-index: 20;
  animation: hl-fade 0.22s ease-out;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; image-rendering: pixelated;
}
/* Blog has no backdrop of its own — the always-on stage background video
   (.bg-video) shows through, just darkened for contrast behind the book. */
.blog__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.book {
  position: relative; animation: hl-rise 0.34s ease-out;
  width: min(900px, 95vw); aspect-ratio: 1.46 / 1; max-height: 88vh;
  background: #6e4a2a; border: 4px solid #34210f; border-radius: 9px;
  box-shadow: inset 0 0 0 3px #8a5e36, 0 20px 44px rgba(0,0,0,0.55);
  padding: 14px;
}
.book__pages { position: relative; height: 100%; display: flex; background: #34210f; border-radius: 3px; overflow: hidden; }
.page { position: relative; flex: 1; height: 100%; background: #f2e9cd; }
.page--left  { box-shadow: inset -13px 0 16px -12px rgba(120,90,50,0.45); }
.page--right { box-shadow: inset  13px 0 16px -12px rgba(120,90,50,0.45); }
.page__border { position: absolute; inset: 11px; border: 1px solid #d6c79f; pointer-events: none; }
.page__corner { position: absolute; width: 9px; height: 9px; }
.page__corner--tl { top: 11px; left: 11px; border-top: 2px solid #c2a86f; border-left: 2px solid #c2a86f; }
.page__corner--tr { top: 11px; right: 11px; border-top: 2px solid #c2a86f; border-right: 2px solid #c2a86f; }
.page__corner--bl { bottom: 11px; left: 11px; border-bottom: 2px solid #c2a86f; border-left: 2px solid #c2a86f; }
.page__corner--br { bottom: 11px; right: 11px; border-bottom: 2px solid #c2a86f; border-right: 2px solid #c2a86f; }
.page__inner { position: relative; height: 100%; padding: 26px 30px 22px; display: flex; flex-direction: column; }
.page__num { text-align: center; font-size: clamp(13px, 1.8vw, 17px); color: #9a7d52; margin-bottom: 18px; }
.page__content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 11px; }
/* "Coming soon" placeholder spread (shown while there are no posts). */
.page__content--soon { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.post__soon { font-size: clamp(20px, 2.8vw, 28px); color: #43331d; line-height: 1.2; }
.post__soon-sub { font-size: clamp(12px, 1.55vw, 14px); color: #6c583b; line-height: 1.4; max-width: 22ch; text-wrap: pretty; }
.post__date { font-size: clamp(11px, 1.4vw, 13px); letter-spacing: 1px; color: #b09467; text-transform: uppercase; }
.post__title { font-size: clamp(18px, 2.5vw, 24px); color: #43331d; line-height: 1.18; }
.post__desc { font-size: clamp(12px, 1.55vw, 14px); color: #6c583b; line-height: 1.4; text-wrap: pretty; }
.post__img {
  width: 100%; height: clamp(96px, 15vh, 140px); margin-top: auto;
  border-radius: 4px; background: rgba(0,0,0,0.04);
  border: 1px dashed rgba(108,88,59,0.5);
  display: flex; align-items: center; justify-content: center;
  color: rgba(108,88,59,0.65); font-size: 12px;
  background-size: cover; background-position: center;
}
.post__img.has-img { border: none; }
.post__rule { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e2d6b4; }
.post__rule-line { flex: 1; height: 2px; background: #e6dab8; }
.book__spine { flex: none; width: 5px; background: linear-gradient(90deg, #2a1a0c 0%, #5b3f25 50%, #2a1a0c 100%); }
.book__close {
  position: absolute; top: 30px; right: 40px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #6b4a2b;
  background: none; border: 0; padding: 0;
}
.book__close:hover { color: #3f2a17; }
.book__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; cursor: pointer;
  background: none; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  padding: 0;
}
.book__nav--prev { left: 28px; border-right: 14px solid #8a6f4a; }
.book__nav--prev:hover { border-right-color: #5b4527; }
.book__nav--next { right: 28px; border-left: 14px solid #8a6f4a; }
.book__nav--next:hover { border-left-color: #5b4527; }
.book__nav[hidden] { display: none; }

/* =========================================================================
   LINKS (inventory / HUD screen)
   ========================================================================= */
.links { image-rendering: pixelated; }
.links__title {
  position: relative; margin-bottom: 30px;
  font-size: clamp(36px, 6.5vw, 60px); color: #fff;
  text-shadow: 4px 4px 0 #1f1f1f; line-height: 1;
  animation: hl-rise 0.3s ease-out;   /* fade + rise in, same as the hotbar/HUD */
}
/* Plain "go back" text under the hotbar; the overlay--center column centers it
   horizontally on the page. */
.links__back {
  position: relative;   /* sit above the .bg-dirt-dark backdrop, like .links__title/.hud */
  animation: hl-rise 0.3s ease-out;   /* fade + rise in, same as the title/HUD */
  margin-top: 26px;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 6px 12px;
  font-family: inherit; font-size: clamp(15px, 2.1vw, 18px); letter-spacing: 1px;
  color: #cfcfcf; text-shadow: 2px 2px 0 #000; cursor: pointer;
}
.links__back:hover { color: #fff; }
.hud {
  position: relative; animation: hl-rise 0.3s ease-out;
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 7px;
}
.hud__pips { display: flex; justify-content: space-between; align-items: flex-end; }
.hud__pip-row { display: flex; gap: 2px; }
.hud__heart {
  width: clamp(15px, 2.6vw, 18px); height: clamp(13px, 2.23vw, 15px);
  image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.hud__meat {
  width: clamp(15px, 2.6vw, 18px); height: clamp(15px, 2.6vw, 18px);
  image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.hud__xp { position: relative; height: 8px; background: #0d0d0d; border: 1px solid #000; box-shadow: inset 0 1px 0 #2a2a2a; }
.hud__xp-fill { position: absolute; top: 1px; left: 1px; bottom: 1px; width: 44%; background: linear-gradient(180deg, #9bff42 0%, #62c613 100%); }
.hotbar { display: flex; gap: 2px; background: #000; padding: 2px; }
.slot {
  position: relative;
  width: clamp(46px, 8.8vw, 58px); height: clamp(46px, 8.8vw, 58px);
  background: #cfcfcf;
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 #5e5e5e;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0; padding: 0;
}
.slot__img {
  width: 84%; height: 84%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.45));
  transition: transform 0.08s steps(2);
}
.slot:hover .slot__img { transform: scale(1.08); }
.slot__tip {
  display: none;
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: #150016; border: 2px solid #2b0a4d; outline: 1px solid #000;
  padding: 7px 11px; white-space: nowrap; pointer-events: none; z-index: 8;
  box-shadow: 0 5px 0 rgba(0,0,0,0.4);
}
.slot:hover .slot__img ~ .slot__tip { display: block; }
.slot__tip-name { font-size: 14px; color: #fff; text-shadow: 2px 2px 0 #000; }
.slot__tip-host { margin-top: 4px; font-size: 12px; color: #9a93c4; text-shadow: 2px 2px 0 #000; }
.slot__tip-open { margin-top: 6px; font-size: 11px; color: #ffff55; text-shadow: 2px 2px 0 #000; }
.slot__sel {
  position: absolute; inset: -3px;
  border: 3px solid #fff; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000;
  pointer-events: none; z-index: 5;
}
.slot:not(.is-selected) .slot__sel { display: none; }
/* keyboard-selected slot highlight follows hover too */
.hotbar:hover .slot:not(:hover) .slot__sel { display: none; }
.hotbar:hover .slot:hover .slot__sel { display: block; }

/* =========================================================================
   QUIT EASTER EGG — achievement toast + death screen
   ========================================================================= */
.toast {
  position: absolute; top: 18px; right: 18px;
  z-index: 60; pointer-events: none;
}
.toast img { width: 320px; max-width: 78vw; height: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.4)); }
.toast.is-in  { animation: hl-toast-in  0.55s cubic-bezier(0.16,1,0.3,1) backwards; }
.toast.is-out { animation: hl-toast-out 0.45s cubic-bezier(0.7,0,0.84,0) forwards; }

.death { position: absolute; inset: 0; z-index: 70; overflow: hidden; }
/* Translucent red tint over the still-visible menu/video (the Minecraft death
   overlay), not an opaque black fill — plus a dark radial behind the centered
   text so "You Died!" stays readable against a bright background. A flat 0.2 black
   sits at the bottom of the stack to darken the scene ~20% more, below (and so
   without changing the look of) the red tint. */
.death__bg1 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.32) 48%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, rgba(74,0,0,0.6) 0%, rgba(140,0,0,0.72) 100%),
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
}
.death__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px; animation: hl-death-rise 0.45s ease-out;
}
.death__title { font-size: clamp(48px, 9vw, 92px); color: #fff; text-shadow: 4px 4px 0 #2b2b2b; line-height: 1; text-align: center; }
.death__sub  { margin-top: 20px; font-size: clamp(18px, 2.6vw, 26px); color: #fff; text-shadow: 2px 2px 0 #2b2b2b; }
.death__score { margin-top: 10px; font-size: clamp(18px, 2.6vw, 26px); color: #ddd; text-shadow: 2px 2px 0 #2b2b2b; }
.death__score b { color: #ffff55; font-weight: normal; }
.death__buttons { margin-top: 40px; width: 400px; max-width: 90vw; display: flex; flex-direction: column; gap: 8px; }

/* ---- Leave Comment → Minecraft chat -------------------------------------- */
/* Opens over the still-visible death screen: a translucent log of sent lines
   anchored bottom-left, with the translucent input bar beneath it — like the
   in-game chat. (.chat sets display:flex, so it needs the [hidden] guard.) */
.chat {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px;
}
.chat[hidden] { display: none; }

.chat__log {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  max-height: 50vh; overflow-y: auto;
  margin-bottom: 4px;
}
/* Each line is a translucent black strip hugging its text — Minecraft chat. */
.chat__line {
  max-width: min(620px, 92vw);
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px; line-height: 1.45;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  overflow-wrap: anywhere;
  animation: hl-fade 0.18s ease-out;
}
.chat__line--system { color: #ffff55; }   /* [Server] / system = yellow */
.chat__name { color: #55ffff; }            /* your name = cyan */

.chat__bar {
  display: flex; align-items: center;
  height: 36px; padding: 0 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.6);
}
.chat__input {
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 16px; color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  caret-color: #fff;
}
.chat__input::placeholder { color: #9a9a9a; opacity: 1; }

.pixel { image-rendering: pixelated; }

/* =========================================================================
   ABOUT PAGE (static article — native document scroll, side images)
   ========================================================================= */
/* This page is a normal scrolling document, so undo the launcher's
   body{overflow:hidden} (which exists to pin the fixed launcher stage). */
.about-body { overflow: visible; }

/* The dirt texture is a single fixed backdrop behind the scrolling article —
   painted once, never re-rastered on scroll. */
.about-backdrop { position: fixed; inset: 0; z-index: 0; }
/* The overall background darkness comes from the shared .bg-dirt-dark layer; this
   scrim adds only the soft top/bottom edge fades unique to the About page. */
.about-backdrop__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 120px),
    linear-gradient(to top,    rgba(0,0,0,0.5) 0, rgba(0,0,0,0) 120px);
}

.about {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
  padding: clamp(80px, 13vh, 160px) 24px 120px;
  color: #fff;
}
.about__title {
  margin: 0; font-size: clamp(30px, 5vw, 46px); line-height: 1.2;
  text-shadow: 3px 3px 0 #1f1f1f; text-wrap: balance;
}
.about__lede {
  margin: clamp(6px, 1vh, 12px) 0 0; font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5; color: #d8d8d8; text-shadow: 2px 2px 0 #000;
}

/* Two columns: a tight text column on the left and a loose photo gallery on the
   right. The gallery is decorative and intentionally NOT tied to the text — text
   spacing is driven only by the margins below, never by image height. */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(190px, 30%, 300px);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;   /* size each column to its own content — do NOT stretch
                           the gallery to the text height, which would squeeze
                           the photos vertically. Also top-aligns the gallery's
                           first photo with the title (both are row-1 grid items). */
}
.about__col { min-width: 0; }

.about__p {
  margin: 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  text-shadow: 2px 2px 0 #000;
}

/* Section heading — top margin sets the gap between sections. */
.about__h {
  margin: clamp(26px, 3.6vh, 40px) 0 14px;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.25;
  color: #ffff55; text-shadow: 2px 2px 0 #1f1f1f;   /* default: yellow */
}
.about__h--gold  { color: #ffaa00; }
.about__h--cyan  { color: #55ffff; }
.about__h--green { color: #55ff55; }

/* Bulleted lists — pixel-square bullets in the XP-bar green. */
.about__list { margin: 0; padding: 0; list-style: none; }
.about__list li {
  position: relative; padding-left: 30px; margin: 0 0 14px;
  font-size: clamp(16px, 1.9vw, 20px); line-height: 1.45; text-shadow: 2px 2px 0 #000;
}
.about__list li:last-child { margin-bottom: 0; }
.about__list li::before {
  /* Center on the whole list item (top:50%) so a multi-line bullet sits at the
     vertical middle of all its lines, not on the first line. The -0.16em lifts
     the marker to the text's optical center (Minecraftia's caps sit in the upper
     half of each line box); that offset holds for both 1- and 2-line items. */
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(calc(-50% - 0.16em));
  width: 11px; height: 11px;
  background: linear-gradient(180deg, #9bff42 0%, #62c613 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);
}
/* Bullets match their section heading. */
.about__list--gold  li::before { background: #ffaa00; }
.about__list--cyan  li::before { background: #55ffff; }
.about__list--green li::before { background: #55ff55; }

/* Photo gallery (right column) — a simple top-aligned stack. Sized to its own
   content (the grid no longer stretches it), so each photo keeps its natural
   height and the gap is fixed rather than distributed. */
.about__gallery {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}
.about__fig { margin: 0; }
.about__cap {
  margin-top: 10px; font-size: 13px; letter-spacing: 2px; color: #bdbdbd;
  text-transform: uppercase; text-shadow: 2px 2px 0 #000;
}

/* Text links back into the launcher (Projects / Links screens). */
.about__links {
  margin-top: clamp(28px, 4vh, 40px);
  display: flex; flex-wrap: wrap; gap: 16px 36px;
}
.about__link {
  color: #ffff55; text-decoration: none;
  font-size: clamp(17px, 2vw, 21px); text-shadow: 2px 2px 0 #000;
}
.about__link::before { content: "\00bb  "; color: #c2a86f; }
.about__link:hover { color: #fff; text-decoration: underline; }

.about__signoff {
  margin-top: 50px;
  font-size: clamp(22px, 3.2vw, 32px); line-height: 1.4; text-shadow: 3px 3px 0 #1f1f1f;
}
.about__signoff span {
  display: block; margin-top: 12px; font-size: 15px; letter-spacing: 2px;
  color: #bdbdbd; text-transform: uppercase;
}

/* Gallery photos are real <img>s: scaled to the column width but otherwise
   unmodified — height follows each image's own aspect ratio, never cropped into
   a fixed frame. Just a simple pixel-style border. */
.about__photo {
  display: block;
  width: 88%; height: auto;   /* scaled down ~12% from the full column width */
  border: 3px solid #000;
}

/* Narrow screens: drop the gallery below the text as a centered thumbnail row. */
@media (max-width: 640px) {
  .about__grid { grid-template-columns: 1fr; row-gap: clamp(24px, 4vh, 36px); }
  .about__gallery { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .about__fig { flex: 1 1 140px; max-width: 200px; }
  .about__photo { width: 100%; }   /* thumbnails already small here — don't shrink further */
}