/* 
   WIDEMOUH

   Frame geometry note:
   Every border asset is 2223px wide. Inside that canvas the pink
   box sits at x=265..1956 and its interior is x=347..1875. All the
   percentages below come from those measured numbers, so the frame
   scales cleanly at any width. If you re-export a border piece,
   keep the 2223 canvas and these numbers stay correct.
   */

:root {
  /* --- frame geometry (% of frame width) --- */
  --box-interior-left:   14.61%;   /* x=347/2223  */
  --box-interior-right:  15.65%;   /* 2223-1875   */
  --top-piece-h:         56.41%;   /* 1254/2223   */
  --plate-top:           41.39%;   /* where the plate slides under the top rail */
  --plate-bottom:         3.91%;   /* where the plate stops above the bottom rail */

  /* --- header positions (% of the top piece box). Nudge these. --- */
  /* pfp is deliberately BIGGER than the hole it sits in: the pink rail is
     wavy, so a pfp sized to the hole's inner edge lets brick show in the
     dips. This tucks ~40px under the rail on every side. */
  --pfp-left:   61.22%;   /* derived: flood-filled the hole in border_top.png, */
  --pfp-top:    25.28%;   /* took its bbox (x 1381-1907, y 337-870) + 20px margin. */
  --pfp-w:      25.46%;   /* The old values traced the hole's INNER edge, which is */
  --pfp-h:      45.69%;   /* why brick showed in the dips of the wavy rail. */

  --nav-left:   17.36%;
  --nav-top:    61.50%;   /* pushed down so the buttons' feet go under the rail */
  --nav-w:       8.60%;   /* each button */
  --nav-gap:     1.21%;

  /* Icon sizes are measured off reference_2.PNG by template-matching the
     actual art against it, then converting to frame-relative %. Music and
     shirt need separate widths: the reference has the shirt noticeably
     larger, and their source art has different aspect ratios anyway. */
  --icon-row1-top:  7.5%;   /* music + shirt */
  --icon-music:    12.6%;   /* was 10.5 */
  --icon-shirt:    14.3%;   /* was 10.5 */

  --icon-row2-top: 32.5%;   /* tiktok / youtube / instagram */
  --social-left:   15.5%;   /* move all three sideways from here */
  --icon-lg:       11.4%;
  --icon-step:     11.75%;  /* social spacing. lower = closer together */

  /* --- layout ---
     --frame-max is the width of the PINK BOX itself, not the image canvas.
     The border art is 2223px wide but the box only occupies x=265..1956 of
     it (76.07%), so .frame is widened past its column and pulled back with a
     negative margin. That lets the walls butt right up to the pink instead of
     stopping at the invisible edge of the artwork. */
  --frame-max:  820px;
  --frame-bleed: 131.46%;   /* 100 / 0.7607 -- DERIVED, don't hand-edit */
  --frame-pull:  -15.67%;   /* 11.92% of the bled width -- DERIVED */

  /* ------------------------------------------------------------------
     NUDGE KNOBS — these are the ones to play with. They're safe to
     change at any post count; see README "Why nudging can't drift".

     Horizontal: the two walls are fr units either side of the frame.
     Making them unequal slides the frame across while BOTH walls stay
     flush against the pink. Don't use a margin for this — a margin moves
     the frame but leaves the walls where they were, so you'd get a gap
     on one side and gifs hidden under the frame on the other.
       0.85 / 1.15  -> frame sits left of centre
       1 / 1        -> centred
     ------------------------------------------------------------------ */
  --wall-left-fr:  1fr;
  --wall-right-fr: 1fr;

  /* Vertical: negative moves the frame up. The spikes are at the very top
     of the art, so anything past about -40px starts cropping them against
     the top of the page. --page-top adds room above if you want to go
     further than that. */
  --frame-nudge-y: 0px;
  --page-top:      0px;

  /* The two cap nudges are in widemouh.js, not here - CSS can't convert the
     border art's pixels into screen pixels, because it doesn't know how wide
     the frame is. See topCapNudge / bottomCapNudge. */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #2b2f36 url('../img/background_bricks_3.png') repeat;
  background-size: 280px auto;
  image-rendering: pixelated;
}

body {
  min-height: 100vh;
  /* .frame deliberately overflows its column; never let that scroll the page */
  overflow-x: hidden;
}


/*
   PAGE GRID  —  wall | frame | wall
*/

.page {
  display: grid;
  grid-template-columns:
    minmax(0, var(--wall-left-fr))
    minmax(300px, var(--frame-max))
    minmax(0, var(--wall-right-fr));
  padding-top: var(--page-top);
  grid-template-areas: "wall-left center wall-right";
  align-items: start;
  min-height: 100vh;
}

.wall-left  { grid-area: wall-left; }
.wall-right { grid-area: wall-right; }
.center     { grid-area: center; position: relative; z-index: 2; }

.wall {
  position: relative;
  overflow: hidden;
  align-self: stretch;
  min-height: 100vh;
}

.gif {
  position: absolute;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}


/* 
   FRAME
   rails-top and rails-bot take their natural height from the image;
   rails-mid is flex:1 and tiles border_mid_pair.png down the gap.
   That pair is border_1 above border_2, so repeating it gives the
   1,2,1,2,1,2 stack automatically, however tall the page gets.
  */

.frame {
  position: relative;
  /* wider than its column, pulled left, so the pink box lines up with the
     column edges and the gif walls can run right up against it */
  width: var(--frame-bleed);
  margin-left: var(--frame-pull);
  margin-top: var(--frame-nudge-y);
}

.frame-rails {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  pointer-events: none;
}

/* flex:none = "be exactly as tall as your own picture".
   .rails-mid below is flex:1 = "take whatever height is left over".
   That is the entire positioning system for the border. Nothing has an x or a
   y - the three pieces stack in a column, in the order index.html lists them.
   The nudges below only slide the caps sideways; their height and their place
   in the column are not adjustable, and shouldn't be. */
.rails-top,
.rails-bot { flex: none; position: relative; }



/* scoped to .pink / .rails-bot's img on purpose: a bare `.rails-top > img`
   selector also matches .pfp and overrides its width. */
.rails-top > img.pink,
.rails-bot > img {
  display: block;
  width: 100%;
  height: auto;
}

.rails-mid {
  flex: 1 1 auto;
  min-height: 0;
  /* Segments are stacked here by buildRails() in build.js, alternating
     through BORDER_CYCLE. overflow:hidden clips the last one wherever the
     frame happens to end - invisible, because it lands mid-rail.

     border_2 is border_1 flipped vertically, so each seam is a MIRROR: the
     wave meets itself rather than jumping. That depends on the pieces being
     cropped to their ink with zero padding. Use tools_make_border.py. */
  overflow: hidden;
  /* 1px overlap onto the top piece and bottom cap so those joins don't
     show a hairline either */
  margin: -1px 0;
}

.rail-seg {
  display: block;
  width: 100%;
  height: auto;
}


/* --- things that live inside the top piece --- */
/* Stacking: pfp and buttons (1) sit BEHIND the pink border (2), so the nav
   buttons read as emerging from the frame rather than floating on it.
   They stay clickable because .frame-rails is pointer-events:none — the pink
   image never captures the click, it passes through to the link underneath. */

.rails-top > img.pink { position: relative; z-index: 2; }

.pfp {
  position: absolute;
  left: var(--pfp-left);
  top: var(--pfp-top);
  width: var(--pfp-w);
  height: var(--pfp-h);
  z-index: 1;
  object-fit: cover;
}

.header-bits {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.header-bits a {
  position: absolute;
  display: block;
  pointer-events: auto;   /* .frame-rails is pointer-events:none; re-enable here */
  transition: transform .08s steps(2);
}
.header-bits a:hover  { transform: translateY(-3px) scale(1.04); }
.header-bits a:active { transform: translateY(1px); }
.header-bits a:focus-visible { outline: 3px solid #ff00c8; outline-offset: 2px; }
.header-bits img { display: block; width: 100%; height: auto; }

/* social icons */
.ico-music     { left: 17.12%; top: var(--icon-row1-top); width: var(--icon-music); }
.ico-clothing  { left: 32.13%; top: var(--icon-row1-top); width: var(--icon-shirt); }

/* all three hang off --social-left, so nudging the row sideways is one number */
.ico-tiktok    { left: var(--social-left); top: var(--icon-row2-top); width: var(--icon-lg); }
.ico-youtube   { left: calc(var(--social-left) + 1 * var(--icon-step)); top: var(--icon-row2-top); width: var(--icon-lg); }
.ico-instagram { left: calc(var(--social-left) + 2 * var(--icon-step)); top: var(--icon-row2-top); width: var(--icon-lg); }

/* nav buttons */
.nav-btn { top: var(--nav-top); width: var(--nav-w); }
.nav-1 { left: var(--nav-left); }
.nav-2 { left: calc(var(--nav-left) + 1 * (var(--nav-w) + var(--nav-gap))); }
.nav-3 { left: calc(var(--nav-left) + 2 * (var(--nav-w) + var(--nav-gap))); }
.nav-4 { left: calc(var(--nav-left) + 3 * (var(--nav-w) + var(--nav-gap))); }


/* 
   CONTENT PLATE
*/

.frame-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--plate-top);
  padding-bottom: var(--plate-bottom);
}

.plate {
  margin: 0 var(--box-interior-right) 0 var(--box-interior-left);
  background-image: url('../img/background_place_2.png') !important;
  background-repeat: repeat !important;
  background-position: -3000px 0px !important; 
  background-size: 220px auto !important;
  padding: 2.2% 2.2% 3%;
}

.banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 2.5%;
}

.posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2%;
}.post-empty {
  aspect-ratio: 1 / 1;
}

.post {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
  outline: 2px solid #ff00c8;
  outline-offset: -2px;
  transition: transform .08s steps(2);
}
.post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post:hover { transform: scale(1.05); z-index: 5; position: relative; }
.post:focus-visible { outline: 4px solid #00ff8d; }


/* 
   GALLERY PAGES (entries / games / news / other)
   Same wall placement as the home page, empty middle.
  */

.gallery .center {
  min-height: 100vh;
}

.back {
  position: fixed;
  left: 35%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 10;
  width: 160px;
}
.back img { width: 100%; height: auto; display: block; }

.center-art {
  display: block;
  margin: 0 auto;/* centers it left-to-right */
  margin-top: 40px;/* THIS pushes it down, below the back button */
  width: 450px;/* THIS is its size */
  transform: translateY(200px); /* extra up/down nudge if you want it */
}
/*
   SMALL SCREENS
   Below 900px the side walls would be slivers, so they go away
   and the frame takes the full width.
  */

@media (max-width: 1150px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "center";
  }
  .wall { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}