/* homepage.css — Homepage only: status box, music player, recent projects,
   changelog, hit counter, clock glyphs. */

/* ===== HOMEPAGE ===== */


.status-clock-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 0 4px 2px 0;
}

.status-clock-row .clock-icon {
  width: 12px;
  height: 12px;
  image-rendering: pixelated;
  transform: translateY(2px);
}

.status-clock-row .clock-label {
  color: #ff6699;
  font-family: regular;
  font-size: var(--font-body);
  transform: translateY(4px) translateX(2px);
}

.status-clock {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 17px;
}

.status-clock .clock-glyph {
  width: 10px;
  height: 17px;
  background-image: url('/fnt/clock.png');
  background-repeat: no-repeat;
  image-rendering: pixelated;
  display: inline-block;
  flex-shrink: 0;
}

/* About + Now Playing row */
.about-nowplaying-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.about-section {
  flex: 1;
  padding: 6px;
  min-width: 0;
}

.about-section h2 {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  margin-bottom: 4px;
  color: #000080;
}

.about-section p {
  font-size: var(--font-body);
}

/* Music player — vertical stack with album art. Fills the space between the sticky
   note and the recent-played thumbnails. */
.music-player {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 6px 6px; /* small top inset so "listening to" lines up with "The Canvas" */
  background: none;
  border: none;
}

.music-player-label {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 2px;
  white-space: nowrap;
}

.music-album-art {
  width: 96px;
  height: 96px;
  background: #000;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  image-rendering: pixelated;
}

.music-album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-album-art .no-art {
  color: #00ff00;
  font-size: 32px;
}

.music-info {
  width: 100%;
  text-align: left;
  overflow: hidden;
}

.music-title,
.music-artist,
.music-album {
  font-size: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 100%);
}

.music-title {
  color: #000;
}

.music-artist {
  color: #808080;
}

.music-hr {
  width: 100%;
  height: 1px;
  background: #808080;
  margin: 2px 0;
}

.music-album {
  color: #808080;
}

/* Recent projects */
.recent-projects { margin-bottom: 8px; }

.recent-projects h2 {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  margin-bottom: 4px;
  color: #000080;
}

/* Public canvas preview (homepage left column) */
/* Small aspect-ratio canvas thumbnail (kept at its native ratio, not stretched to
   the column width). Shrink the panel to the thumbnail width so the header's
   "leave your mark" link lines up with the canvas's right edge. */
.canvas-preview {
  align-self: flex-start;
}
.canvas-preview-frame {
  display: inline-block;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #fff;
  line-height: 0;
  cursor: pointer;
}
.canvas-preview-frame img {
  display: block;
  height: 150px;
  width: auto;
}

.recent-projects-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recent-projects-grid .panel {
  min-width: 0;
}

/* Homepage "most recent projects" tabs are the SAME accordion as the Project History
   page — rendered by window.ProjectTabs into #recent-projects and styled entirely by
   the shared .ph-* rules in projects.css. They expand inline (no redirect). */

/* Changelog */
.changelog-container { margin-bottom: 8px; }

.changelog-label {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  
  color: #000080;
  margin-bottom: 4px;
}

.changelog-body {
  min-height: 50px;
  padding: 4px;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
}

.changelog-body::-webkit-scrollbar { display: none; }
.changelog-body { scrollbar-width: none; }

.changelog-entry {
  padding: 2px 0;
  border-bottom: 1px dotted #c0c0c0;
  font-size: var(--font-body);
  display: flex;
}

.changelog-date {
  color: #000080;
  margin-right: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.changelog-text {
  flex: 1;
  min-width: 0;
}

/* Hit counter */
.hit-counter {
  text-align: center;
  padding: 8px;
  margin-top: 4px;
  font-size: var(--font-body);
  color: #808080;
}

.hit-counter .count {
  font-family: regular;
  font-size: var(--font-body);
  background: #000;
  color: #00ff00;
  padding: 2px 8px;
  border: 1px inset #808080;
}

/* ===== CLOCK ICON ===== */
.clock-icon {
  width: 12px;
  height: 12px;
}

/* ===== Two-column board ===== */
.home-cols {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: flex-start;
}
.home-col-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-col-right {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-col-left .music-player { width: 100%; }

/* ===== Music row + canvas segment ===== */
/* Canvas gets its own centred segment. */
/* Uploads (left) beside the canvas preview (right), centered as a pair. */
.home-media-row { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-bottom: 8px; }
.home-canvas { flex: 0 0 auto; }

/* Sticky note (left, fixed) | music player (fills the middle) | recent thumbnails (right). */
.home-music-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

/* Recently played — a titled list of the last few tracks: a rank number, a 32px
   album-art thumbnail, and the title stacked over the artist. */
.music-recent {
  flex: 0 0 140px;      /* cut narrower than the player so "Currently Listening To" gets more room */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.music-recent-label {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 4px;
  white-space: nowrap;   /* "Last Played" + "see more" stay on one line, never cut */
}
.music-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.music-recent-item {
  display: flex;
  align-items: center;   /* number + text vertically centred against the thumbnail */
  gap: 6px;
  overflow: hidden;
}
.mr-num {
  flex: 0 0 auto;
  min-width: 9px;
  text-align: right;
  font-size: var(--font-body);
  color: #808080;
}
.music-recent-thumb {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00ff00;
  font-size: 14px;
  image-rendering: pixelated;
}
/* The 32x32 art is pre-downsampled onto a canvas; display it 1:1 and pixelated. */
.music-recent-thumb canvas,
.music-recent-thumb img {
  width: 32px;
  height: 32px;
  display: block;
  image-rendering: pixelated;
}
.mr-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mr-title,
.mr-artist {
  white-space: nowrap;      /* always one line */
  overflow: hidden;
  /* Overflowing text fades off the right edge instead of ellipsis/clipping. */
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
  font-size: var(--font-body);
  line-height: 1.2;
}
.mr-title { color: #000; }
.mr-artist { color: #808080; }

/* Shared panel + label */
.home-panel {
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  padding: 5px 6px;
}
.panel-label {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 4px;
}
.panel-label--row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.panel-more {
  font-family: regular;
  font-weight: normal;                      /* stay un-bold inside the bold segment header */
  font-size: var(--font-body);
  color: #000080;
  cursor: pointer;
}
/* Real underline on the label text only; the arrow sits outside .pm-txt. */
.panel-more .pm-txt { text-decoration: underline; }
.panel-more:hover { color: #3a3ad0; }

/* Latest art strip */
.latest-art { flex: 0 0 auto; }
/* Fixed 75px cells (the 2x5 thumbnail scale) so 2x4 is just a smaller block, not a
   stretched one; height 154px = the canvas frame so the bottoms line up. */
.art-grid { display: grid; grid-template-columns: repeat(4, 75px); grid-template-rows: 1fr 1fr; gap: 4px; height: 154px; }
.art-grid-item {
  box-sizing: border-box;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.art-grid-item img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* Static row of the 5 most recent uploads (no scrolling). */
.art-strip {
  overflow: hidden;
  padding-bottom: 2px;
}
.art-strip-track {
  display: flex;
  gap: 8px;   /* fixed spacing between thumbnails */
}
.art-strip-item {
  flex: 1 1 0;                 /* 7 thumbnails share the row width evenly */
  min-width: 0;
  aspect-ratio: 1 / 1;        /* stay square */
  box-sizing: border-box;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.art-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-empty { font-size: var(--font-body); color: #808080; }

/* ===== HOMEPAGE ===== */

/* ===== HOMEPAGE INTRO + STICKY NOTE ===== */
/* Intro text spans the top; the console + sticky note sit in a row beneath it,
   top-aligned so the sticky note's top lines up with the console's top. */
.intro-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.intro-lower {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.intro-text {
  font-family: regular;
  font-size: var(--font-body);
  color: #000;
  text-align: center;
}
.intro-text .intro-line { min-height: 1em; }

/* Sticky note — fixed 196x196 square. Swap in a texture later via background-image
   (e.g. background: url('/img/sticky.png') center/cover; ); color is the fallback. */
.sticky-note {
  flex: 0 0 196px;
  width: 196px;
  min-height: 196px;        /* 196 square by default, but grows down to fit a long note
                              (so the text stays on the paper instead of spilling onto
                              the dark background where it'd be unreadable) */
  box-sizing: border-box;
  background: #fff7a8;
  padding: 11px 14px 14px;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.35);
  position: relative;
}
.sticky-note::before {                 /* a strip of "tape" across the top */
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  width: 56px; height: 16px;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.08);
}
.sticky-note-text {
  font-family: regular;
  font-size: var(--font-body);
  color: #3a2f00;
  white-space: nowrap;      /* don't wrap — long lines run past the edge instead */
}
.sticky-note-text .sticky-line { min-height: 1em; }

/* ===== GEOCITIES 88x31 BUTTON MARQUEE ===== */
.geo-marquee {
  overflow: hidden;
  margin-bottom: 8px;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.geo-track {
  display: flex;
  gap: 6px;
  width: max-content;
  will-change: transform;
}
.geo-btn {
  flex: 0 0 auto;
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  background: #c0c0c0;
  overflow: hidden;
  text-decoration: none;
}
.geo-btn img { display: block; width: 88px; height: 31px; image-rendering: pixelated; }
.geo-btn-placeholder {
  font-family: regular;
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
  color: #000;
  padding: 0 3px;
}

/* ===== LATEST FROM cMAYK (plain text, no container) ===== */
/* Vintage terminal — white text on a black screen, chunky bezel. */
.latest-from {
  box-sizing: border-box;
  flex: 1;                  /* fills the intro-lower row... */
  min-width: 0;
  margin: 0 48px;           /* ...minus 96px total, split evenly -> centred + shorter */
  background: #0a0a0a;
  border: 3px solid;
  border-color: #5a5a5a #242424 #242424 #5a5a5a;   /* old plastic monitor bezel */
  box-shadow: 1px 1px 0 #000, inset 0 0 24px rgba(0,0,0,0.9);
  overflow: hidden;
  position: relative;
}
/* The console content is drawn to a <canvas> at 1x native, then CSS-scaled with the
   page. image-rendering:auto keeps that scale BILINEAR, so at any (incl. fractional)
   scale it blurs smoothly instead of the browser nearest-neighbour scaling the pixel
   font into uneven "mixels". */
.latest-from-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}
/* Header line (DOS-style, underlined). Unused in canvas mode; kept for reference. */
.latest-from-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 9px 3px;
  border-bottom: 1px solid #555;
  position: relative;
  z-index: 1;
}
.latest-from-title {
  font-family: pixel;
  font-size: 9px;
  color: #fff;
}
.latest-from-date {
  font-family: pixel;
  font-size: 9px;
  color: #aaa;
  white-space: nowrap;
}
/* Console output */
.latest-from-lines {
  font-family: pixel;
  font-size: 9px;
  color: #fff;
  line-height: 1.6;
  padding: 8px 10px;
  position: relative;
  z-index: 1;
}
.latest-from-lines .latest-line { min-height: 1em; white-space: pre-wrap; }
/* The console is a 9px pixel font — small enough that mobile "text autosizing"
   inflates it even though the site-wide 100% keeps the 12px UI text 1:1. Fully opt
   this block out so the pixel font renders at its exact size, matching desktop. */
.latest-from,
.latest-from-title,
.latest-from-date,
.latest-from-lines {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}
/* Blinking block cursor at the end of the LAST line (inline), not a new line. */
.latest-from-lines .latest-line:last-child::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 13px;
  margin-left: 2px;
  background: #fff;
  vertical-align: text-bottom;
  animation: consoleBlink 1.1s steps(1) infinite;
}
@keyframes consoleBlink { 50% { opacity: 0; } }