/* ---------------------------------------------------------------------------
 * pause-bridge.css — glue between the room (style.css) and the ported
 * Skyrim-compass menu (menu.css, scoped to #pause-menu-root). Nothing in
 * here belongs to either original stylesheet: it's the pause button, the
 * room's blur/dim-while-paused look, and #pause-menu-root's own show/hide
 * transition. Loaded last (see index.html) so it always wins ties.
 * ------------------------------------------------------------------------- */

/* ---------- the room, while paused ---------- */

#scene {
  transition: filter 0.35s ease;
}
body.paused #scene {
  /* The frozen frame underneath the menu reads as "paused" via a blur. It
     used to be dimmed to 55% as well, which fought the room — it's a bright,
     sunlit space and crushing it that hard made the pause look like night.
     The blur alone is enough to say "not live"; brightness stays near 1. */
  filter: blur(5px) brightness(0.96) saturate(0.98);
}

body.paused #mobile-controls,
body.paused #mobile-cycle-controls,
body.paused #pause-open-btn {
  display: none !important;
}

/* ---------- #pause-menu-root show/hide ---------- */

#pause-menu-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
#pause-menu-root.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* ---------- pause open / close buttons ---------- */

/* --ui-font is declared on menu.css's :root, so it resolves here too — these
   two buttons sit outside #pause-menu-root but inherit from the document. */
#pause-open-btn,
#pause-close-btn {
  font-family: var(--ui-font);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.6em 1.2em;
  background: rgba(8, 8, 6, 0.55);
  border: 1px solid rgba(160, 160, 160, 0.4);
  color: #eee7d6;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.15s ease, border-color 0.15s ease;
}
#pause-open-btn:hover,
#pause-open-btn:focus-visible,
#pause-close-btn:hover,
#pause-close-btn:focus-visible {
  background: rgba(8, 8, 6, 0.8);
  border-color: rgba(238, 231, 214, 0.6);
}

/* Opens the menu — sits over the room, bottom-right, same corner rhythm as
   the mobile d-pad it hides alongside. Stays invisible/inert until the
   wake-up sequence reveals it (see js/main.js, same moment as
   #mobile-controls). */
#pause-open-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  opacity: 0;
  pointer-events: none;
}
#pause-open-btn.show {
  opacity: 0.7;
  pointer-events: auto;
}
#pause-open-btn.show:hover,
#pause-open-btn.show:focus-visible {
  opacity: 1;
}

/* Closes the menu outright (unlike Escape, which steps back to the compass
   first if you're inside a section) — pinned corner so it's reachable from
   every screen the menu can show, same as topNav's home glyph is for
   in-menu navigation. */
#pause-close-btn {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 3;
}

@media (max-width: 640px) {
  #pause-open-btn,
  #pause-close-btn {
    font-size: 0.65rem;
    padding: 0.5em 0.9em;
  }
  /* MENU moves to the top-right on phones, landing exactly where RESUME sits
     — so the button you press to open the menu and the button you press to
     leave it are the same spot, and opening/closing doesn't make your thumb
     travel the height of the screen. Bottom-right is also where the d-pad
     lives on mobile, which made that corner crowded. */
  #pause-open-btn {
    top: max(16px, env(safe-area-inset-top, 0px));
    bottom: auto;
  }
}

/* ---- inverted menu ---------------------------------------------------------
   Press I in the room to toggle.

   Three elements, three different treatments, because they are three different
   kinds of thing:

     #bg-layer   the paused still of the room. NOT inverted — it should keep
                 looking like the room.
     #bg-overlay the vignette. Left alone. Inverting it turned the black
                 gradient into a white wash over the room, which read as a haze
                 sitting on top of the still — the backdrop is meant to look
                 exactly like the room, and it now does.
     #app        the chrome. Inverted.

   invert() is paired with hue-rotate(180deg) throughout: a raw negative flips
   hue as well as lightness, so the warm parchment would turn electric blue.
   The hue-rotate puts the hues back, giving a tonal flip in the same palette.

   The 3D canvases get the filter a second time, which cancels it exactly, so
   the portfolio objects keep looking like themselves. */
/* The inversion is applied to #app and then AGAIN to anything inside it that
   must come out true to source — a second identical filter is its own inverse,
   so those elements land back on their real colours while everything around
   them stays flipped. The 3D canvases were already on this list. The portfolio
   media joins it: the chrome is meant to read as a negative, the work is not.
   Photographs of a person's actual clothes are not a design element to invert. */
#pause-menu-root.menu-inverted #app,
#pause-menu-root.menu-inverted #app canvas,
#pause-menu-root.menu-inverted #app .portfolio-media,
#pause-menu-root.menu-inverted #app .gallery-thumb img {
  filter: invert(1) hue-rotate(180deg);
}

/* ---- about me: authored colours, not flipped ------------------------------
   Every other menu screen was designed against the inversion — its colours are
   authored backwards on purpose. The About page was not: it is a port of the
   night-market /about layout, which is cream-on-near-black as written, and
   re-authoring a page of body copy backwards would make it unreadable to edit.

   So it takes the same escape hatch the 3D canvases and the portfolio media
   already use — a second identical filter, which is its own inverse. Inside
   .about-scroll everything lands on exactly the colours in menu.css, the
   photos included, so they need no exception of their own. Scoped to the
   scroller only, so the top nav keeps matching every other screen. */
#pause-menu-root.menu-inverted #app .about-scroll {
  filter: invert(1) hue-rotate(180deg);
}

/* ---- the compass rose: actually white -------------------------------------
   compass-rose.png is grey line art, and menu.css was also holding it at 0.92
   opacity — so against the room it read as a grey star rather than a white
   one. brightness(0) crushes the art to solid black, invert(1) lifts that to
   pure white, and the glyph's own alpha is untouched, so the linework keeps
   its exact shape.

   Under .menu-inverted the invert(1) is dropped instead of added: #app's own
   filter supplies it, and doing it twice would land back on black. */
#pause-menu-root #app .compass-art {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.35));
}
#pause-menu-root.menu-inverted #app .compass-art {
  filter: brightness(0) drop-shadow(0 0 14px rgba(0, 0, 0, 0.35));
}

/* ---- skills constellations: white ----------------------------------------
   Same trick as the compass labels below. The stars, the connecting lines and
   the spark crosses are all fills, so one colour per inversion state covers
   the lot. Authored BLACK under .menu-inverted because the filter flips it to
   the white that was actually wanted.

   The shadow is a hard 1-cell offset with zero blur — a blurred glow would put
   grey fringes on cells that are meant to be a single flat colour, and it is
   the contrast against the nebula that makes the pixels read at all. It flips
   the same way, so it is authored dark when nothing inverts it and light when
   something does. */
#pause-menu-root #app .constellation-lines,
#pause-menu-root #app .constellation-stars rect,
#pause-menu-root #app .constellation-spark rect {
  fill: #ffffff;
}
#pause-menu-root #app .constellation-svg {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.7));
}
#pause-menu-root #app .skills-starfield i {
  background: #ffffff;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
#pause-menu-root.menu-inverted #app .constellation-lines,
#pause-menu-root.menu-inverted #app .constellation-stars rect,
#pause-menu-root.menu-inverted #app .constellation-spark rect {
  fill: #000000;
}
#pause-menu-root.menu-inverted #app .constellation-svg {
  filter: drop-shadow(2px 2px 0 rgba(255, 255, 255, 0.7));
}
#pause-menu-root.menu-inverted #app .skills-starfield i {
  background: #000000;
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
}

/* ---- compass point labels: white ------------------------------------------
   SKILLS / ITEMS / MAP / PORTFOLIO.

   The colour is stated twice on purpose. #app is run through
   invert(1) hue-rotate(180deg) when the menu is inverted, so whatever colour
   is authored here is flipped before you see it — asking for white would
   render black. Under .menu-inverted the source colour is therefore BLACK,
   which the filter turns into the white that was actually wanted. With the
   inversion off (press I) the plain rule applies and white is just white.

   Hover keeps its glow in both cases; the shadow is colour-flipped by the same
   filter, so it's authored dark under inversion for the same reason. */
#pause-menu-root #app .compass-point {
  color: #ffffff;
}
#pause-menu-root #app .compass-point:hover,
#pause-menu-root #app .compass-point:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
}

#pause-menu-root.menu-inverted #app .compass-point {
  color: #000000;
}
#pause-menu-root.menu-inverted #app .compass-point:hover,
#pause-menu-root.menu-inverted #app .compass-point:focus-visible {
  color: #000000;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
}

/* The "Use Arrow Keys or Click a Direction" line under the compass — same
   inversion trick as the labels above, and it comes off var(--ink-dim) at 0.6
   opacity, which was tuned for a dark backdrop and reads as barely-there brown
   over the live camera view. */
#pause-menu-root #app .hint {
  color: #ffffff;
  opacity: 0.85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
#pause-menu-root.menu-inverted #app .hint {
  color: #000000;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

/* Same inversion trick for the shortcut glyphs — they're drawn in
   currentColor, so setting the link's colour is enough. */

/* ---- pause backdrop: blur, don't dim -------------------------------------
   menu.css gives #bg-overlay a radial black wash running to 0.65 at the
   edges. That was tuned for the original static backdrop image; against a
   still of this room it reads as a heavy vignette over a well-lit space.
   Cut to a light touch — just enough to keep the compass off a busy
   background, nothing like a dark mode. Raise the second number toward 0.65
   to bring the old weight back. */
#pause-menu-root #bg-overlay {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

/* The other half, and the one I missed first time: #bg-layer doesn't just show
   the snapshot. menu.css stacks two dark radial gradients ON TOP of it —
   rgba(80,70,50,.35) and rgba(30,40,35,.4) — because they were written as a
   fallback wash for before any image is set, but they paint over the image
   too. That was doing more dimming than the vignette was. Only the snapshot
   is drawn now; the flat background-color covers the no-image case. */
#pause-menu-root #bg-layer {
  background-color: #2b2721;
  background-image: var(--bg-image, none);
  /* Barely any blur, and no tint on top: the backdrop is meant to read as the
     room you just paused, in its own colours, only softened enough that the
     compass has something quiet to sit on. 3px was smearing it into an
     ambient wash. */
  filter: blur(1px);
}

/* ---- nothing scrolls except the item columns ------------------------------
   menu.css only sets overflow-x on html/body, so the page could still scroll
   vertically — enough to drag the fixed nav bar out of place and reveal a
   strip of dead space under it. This is a full-screen game menu; the page
   itself should never move.

   The two item columns keep their own scrolling, because that's the one place
   content legitimately runs past the screen. Everything else is laid out to
   fit. .gallery-grid is left alone too — it's the collage inside a panel, not
   the page. */
html,
body {
  overflow: hidden !important;
  overscroll-behavior: none;
  height: 100%;
}
#pause-menu-root,
#pause-menu-root #app,
#pause-menu-root .items-fullscreen,
#pause-menu-root .skills-fullscreen,
#pause-menu-root .compass-screen {
  overflow: hidden;
}
/* the exceptions */
#pause-menu-root .category-rows-viewport,
#pause-menu-root .list-rows-viewport {
  overflow-y: auto;
  overscroll-behavior: contain; /* don't chain a scroll up to the page */
}

/* The rose is now a 260px source blown up to ~720px, so this is what keeps the
   upscale hard-edged instead of smoothing it straight back into a blur. */
#pause-menu-root .compass-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- pixelated info card ---------------------------------------------------
   Same treatment as the compass rose, and for the same reason: the source art
   is 4279px wide shown at ~500px, so image-rendering alone does nothing —
   pixelated only affects images being magnified. The -px file is a 290px
   nearest-neighbour downsample, which the browser then blows back up to 500
   with hard edges — about a 1.7x chunk. Deliberately gentle: at 170px the
   corner motifs started dissolving into blocks rather than reading as
   ornament. Both this and the rose are tuned to the same 1.7x.

   The original is untouched at info-card-wide.png; delete this block to undo.

   Not done to the skill divider: it renders about 9px tall, so there is no
   room for chunks — it just loses its tapered ends and becomes a plain bar.
   Not done to the l-/r- selector panels either: they're flat dark fields with
   a hairline border, so there's nothing to pixelate and the edge only goes
   ragged.

   Targets ::before, not .info-card itself — the card art was moved onto that
   pseudo-element so it could carry the panel's transparency without fading the
   text with it, and background-size: 100% 100% went with it. Setting the image
   on .info-card here left this 290px file painting at its natural size and
   repeating, which tiled four corner motifs into the middle of the card. */
#pause-menu-root .info-card::before {
  background-image: url("/menu/ui/info-card-wide-px.png");
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- pixelated selector panels --------------------------------------------
   The connector glyph (the ornate arrow between the columns) is baked into
   the "-selected" panel art rather than being its own asset, so pixelating
   the glyph means pixelating these. Sources are ~1.6x downsamples, matching
   the rose and info card.

   The unselected panels get the same treatment even though they carry no
   glyph — otherwise the border weight would visibly change the moment a
   column took focus.

   Originals untouched; delete this block to undo. */
#pause-menu-root .category-col          { background-image: url("/menu/ui/l-slim-px.png"); }
#pause-menu-root .category-col.focused  { background-image: url("/menu/ui/l-slim-selected-px.png"); }
#pause-menu-root .list-col              { background-image: url("/menu/ui/l-wide-px.png"); }
#pause-menu-root .list-col.focused      { background-image: url("/menu/ui/l-wide-selected-px.png"); }
#pause-menu-root .mirrored .category-col         { background-image: url("/menu/ui/r-slim-px.png"); }
#pause-menu-root .mirrored .category-col.focused { background-image: url("/menu/ui/r-slim-selected-px.png"); }
#pause-menu-root .mirrored .list-col             { background-image: url("/menu/ui/r-wide-px.png"); }
#pause-menu-root .mirrored .list-col.focused     { background-image: url("/menu/ui/r-wide-selected-px.png"); }
#pause-menu-root .category-col,
#pause-menu-root .list-col {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}


/* Same pixel-face hygiene as the menu (see menu.css): no synthesised bold, no
   antialiasing rounding the stems off. */
#pause-open-btn,
#pause-close-btn,
.map-label,
.map-place,
.map-hint {
  -webkit-font-smoothing: none;
  font-synthesis: none;
}