/* ============================================================
   slyceth.com 2.0 — additive overrides
   Loaded AFTER layouts/079/style.css and game.css.
   The original 990px skin is left UNTOUCHED. Browser-style zoom
   (CSS `zoom: 1.5` on the root) scales the whole skin uniformly to
   a 1485px visual layout — fonts, rasters, paddings, everything —
   so no per-value rescaling can drift or break.
   Physical width = CSS width x 1.5.
   ============================================================ */

/* --- the re-scale: browser-style zoom of the whole page --- */
html { zoom: 1.5; }

/* --- banner: moved to ::before so the fade mask applies to it alone ---
   Base skin sets the banner as #bg's background; we neutralise that and
   render it on a pseudo-element instead, masked to fade to transparent
   from halfway down to the banner's bottom. */
#bg { background: none; position: relative; overflow-x: clip; }
#bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1024px;
  height: 296px;
  background: url('images/banner.jpg') center top no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0) 100%);
}

/* --- Footer: stone-wall emblem banner (replaces base footer.png + copyright text) --- */
#footer {
  background: url('images/footer.jpg') center top no-repeat;
  height: 189px;
  padding: 0;
}

/* --- rules formerly in index.html's inline <style> (folded here) --- */
html { scroll-behavior: smooth; }
#center .section + .section { margin-top: 24px; }
#topmenu ul li a.active { color: #ebd0a1; }
#left ul.projects li a.active { color: #ebd0a1; }
input.submit:hover { border-color: #ebd0a1; color: #ffffff; }
#backtotop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  border: 1px solid #666666;
  background: #232323;
  color: #d9d9d9;
  font-size: 11px;
  line-height: 15px;
  padding: 4px 10px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 50;
}
#backtotop.visible { opacity: 1; visibility: visible; }
#backtotop:hover { color: #ffffff; border-color: #ebd0a1; }

/* --- header: text title + caption (replaces Cufon/Pricedown) --- */
#main { margin-top: 0; position: relative; z-index: 2; }
#head { height: auto; width: 872px; padding-left: 6px; margin: 0 auto; position: relative; z-index: 2; }
#header { height: auto; width: 872px; position: relative; }
h1.gamenaam {
  position: static;
  width: auto;
  max-width: 100%;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 24px auto 0 auto;
  text-transform: uppercase;
  text-shadow: 0 4px 14px rgba(0,0,0,0.95), 0 2px 5px rgba(0,0,0,0.85);
}
.gamenaam span { display: inline-block; }
.subtitle {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9px;
  color: #6a6a6a;
  text-align: center;
  margin: 8px auto 0 auto;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
    0 3px 4px #000, 0 0 10px rgba(0,0,0,0.95);
  letter-spacing: 0.05em;
}
#topmenu { position: static; top: 0; width: 866px; margin: 0 auto; padding: 10px 0 8px 0; }
/* --- nav buttons: subtle pill background --- */
#topmenu ul li a {
  display: inline-block;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 3px;
  padding: 3px 10px;
}
#topmenu ul li a:hover {
  background: rgba(255,255,255,0.11);
}

/* --- content columns hug the nav (base had banner-era offsets) --- */
#left, #right { padding-top: 10px; }
#center { padding: 10px 10px 10px 10px; }

/* --- Hero pin: header + Welcome fade/scale on scroll --- */
#head, #top { will-change: transform, opacity; transform-origin: top center; }

/* --- Letter load animation (v4-style stagger, vanilla) --- */
.gamenaam .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s ease;
}
.gamenaam.loaded .letter { opacity: 1; transform: translateY(0); }

/* --- Bullet lists + icons --- */
.content_inner ul.bullets { list-style: none; margin: 0 0 10px 0; padding: 0; }
.content_inner ul.bullets li { padding-left: 0; position: relative; margin: 0 0 5px 0; }
.content_inner ul.bullets li img.bicon {
  vertical-align: -2px;
  margin-right: 6px;
}

/* --- PhotoSorter screenshot --- */
.sorter-screenshot {
  display: block;
  margin: 18px auto 0 auto;
  max-width: 100%;
  height: auto;
  border: 1px solid #444;
  border-radius: 2px;
}
.sorter-caption {
  text-align: center;
  color: #ebd0a1;
  font-size: 9px;
  margin-top: 6px;
}

/* --- App screenshots (MuteMail): sidebar-thumb sized, side by side --- */
.app-screens {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-top: 18px;
}
.app-screenshot {
  display: block;
  margin: 0;
  height: 121px;
  width: auto;
  border: 1px solid #444;
  border-radius: 2px;
}

/* --- Side-fill panels (Sewer HD): RTX-on-style join + wipe ---
   Two 50vw half-panels slide in from the sides; each renders half of
   the image (background-size: 200% auto + left/right position), so the
   halves meet at the image's center column and read as one picture.
   An after-layer on top is clip-revealed top-to-bottom as you scroll,
   then the halves slide back out. */
.side-fill-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  /* 28.188% of the PHYSICAL viewport from each side, in CSS px:
     100vw is physical, zoom 1.5 scales the render back up */
  width: calc(100vw * 0.28188 / 1.5);
  overflow: hidden;
  background: #000;
  pointer-events: none;
  /* below the page content (head/main/footer are z-index 2) */
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
  will-change: transform;
}
.side-fill-panel.left  { left: 0;  transform: translateX(-100%); }
.side-fill-panel.right { right: 0; transform: translateX(100%); }
.side-fill-panel .half { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.side-fill-panel .half-before { background-size: 200% auto; background-repeat: no-repeat; }
.side-fill-panel.left  .half-before { background-image: url('images/sewer-before.jpg'); background-position: left center; }
.side-fill-panel.right .half-before { background-image: url('images/sewer-before.jpg'); background-position: right center; }
.side-fill-panel .half-after { background-size: 200% auto; background-repeat: no-repeat; clip-path: inset(0 0 100% 0); }
.side-fill-panel.left  .half-after { background-image: url('images/sewer-after.jpg'); background-position: left center; }
.side-fill-panel.right .half-after { background-image: url('images/sewer-after.jpg'); background-position: right center; }
/* Split indicator: horizontal bar at the wipe boundary. Above the line
   is the AFTER side, below is BEFORE — so it marks both the split and
   which side is which. Position/opacity are driven by hero.js. */
.wipe-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #ebd0a1;
  box-shadow: 0 0 8px rgba(235, 208, 161, 0.55);
  z-index: 3;
  opacity: 0;
}
.wipe-bar .bar-pill {
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  background: #272727;
  border: 1px solid #ebd0a1;
  border-radius: 3px;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 12px;
  white-space: nowrap;
  line-height: 1.5;
}
.wipe-bar .bar-after { display: block; color: #ebd0a1; }
.wipe-bar .bar-before { display: block; color: #8f8f8f; }

/* --- Inline before/after (narrow screens, when gutters vanish) --- */
.sewer-inline-compare { display: none; margin: 18px 0; }
.sewer-inline-compare img { max-width: 100%; height: auto; border: 1px solid #444; border-radius: 2px; }

/* --- Inline scroll-scrubbed wipe (Sewer HD, <=1500px: replaces the
   fixed side panels with an in-flow before/after block inside the
   Dalmatians section. hero.js drives the clip + bar from scroll.) --- */
.inline-wipe {
  display: none;
  position: relative;
  overflow: hidden;
  border: 1px solid #444;
  border-radius: 2px;
  margin-top: 18px;
  aspect-ratio: 16 / 10;
  background: #000;
}
.inline-wipe .iw-before,
.inline-wipe .iw-after {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.inline-wipe .iw-before { background-image: url('images/sewer-before.jpg'); }
.inline-wipe .iw-after {
  background-image: url('images/sewer-after.jpg');
  clip-path: inset(0 0 100% 0);
}
/* split indicator — mirrors .wipe-bar above */
.inline-wipe .iw-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #ebd0a1;
  box-shadow: 0 0 8px rgba(235, 208, 161, 0.55);
  z-index: 3;
  opacity: 0;
}
.inline-wipe .iw-pill {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  background: #272727;
  border: 1px solid #ebd0a1;
  border-radius: 3px;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 12px;
  white-space: nowrap;
  line-height: 1.5;
}
.inline-wipe .iw-label-after { display: block; color: #ebd0a1; }
.inline-wipe .iw-label-before { display: block; color: #8f8f8f; }
/* --- Lightbox (replaces Fancybox 1.2.1) ---
   The page root is zoom:1.5 and Chrome MULTIPLIES zoom down the tree,
   so declaring zoom:1 here would still render at 1.5x. Declaring
   1/1.5 makes this subtree's effective zoom exactly 1 — sizes in vw/vh
   then map to the real viewport. */
#lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  zoom: 0.6666667;
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 94vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border: 1px solid #444;
  box-shadow: 0 10px 48px rgba(0, 0, 0, 0.85);
  transition: opacity .15s ease;
}
#lightbox-cap {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 3.5vh;
  text-align: center;
  color: #c8c7c7;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 0 12vw;
}
#lightbox button {
  appearance: none;
  z-index: 2;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #555555;
  border-radius: 4px;
  color: #d9d9d9;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
#lightbox .lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px 14px;
  font-size: 22px;
}
#lightbox .lb-prev, #lightbox .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 22px 14px;
}
#lightbox .lb-prev { left: 10px; }
#lightbox .lb-next { right: 10px; }
#lightbox button:hover { color: #ffffff; border-color: #ebd0a1; }

/* ============================================================
   Responsive — media queries evaluate against PHYSICAL width
   (CSS zoom does not zoom the viewport for matchMedia), so the
   breakpoints are the original physical values.
   ============================================================ */
/* Gutters vanish at the 1485px physical wrapper: panels hide,
   inline before/after pair takes over inside the section. */
@media (max-width: 1500px) {
  .side-fill-panel { display: none; }
  .sewer-inline-compare { display: block; }
  /* in-flow scroll-scrubbed before/after takes over from the side panels */
  .inline-wipe { display: block; }
}

@media (max-width: 1100px) {
  .wrapper { width: 100%; box-sizing: border-box; }
  #head, #header, #topmenu { width: 100%; box-sizing: border-box; }
  #right { display: none; }
  #center { width: 100%; box-sizing: border-box; }
  #left { width: 160px; box-sizing: border-box; }
}

@media (max-width: 760px) {
  #left { display: none; }
  /* keep the nav reachable: sidebar is hidden, hero pin is disabled */
  #topmenu { position: sticky; top: 0; z-index: 40; padding: 8px 0; }
  #center { width: 100%; box-sizing: border-box; padding: 12px 14px; }
  h1.gamenaam { font-size: 26px; width: auto; max-width: 100%; }
  .subtitle { font-size: 10px; color: #fff; }
  #topmenu ul li { display: block; padding: 4px 0; }
  #topmenu ul li a { display: block; padding: 4px 12px; }
  /* lightbox: edge-flush, thumb-reachable controls */
  #lightbox img { max-width: 96vw; max-height: 78vh; }
  #lightbox .lb-prev, #lightbox .lb-next { padding: 34px 10px; left: 0; right: auto; }
  #lightbox .lb-prev { border-radius: 4px 0 0 4px; }
  #lightbox .lb-next { left: auto; right: 0; border-radius: 0 4px 4px 0; }
  table.content_table td { font-size: 10px; }
  input.input { width: 100%; }
  textarea { width: 100%; }
  /* contact form: stack label over field, let inputs size to the column */
  #contact-form table { width: 100%; table-layout: fixed; }
  #contact-form td { display: block; width: 100% !important; }
  #contact-form input.input, #contact-form textarea { width: 100% !important; box-sizing: border-box; }

  /* --- mobile typography: neutralise the zoom hack, real 16px copy ---
     Base skin sets body at 11px; desktop readability came from
     html { zoom: 1.5 }. With zoom reset below, body copy is bumped to
     the industry-standard computed 16px instead. */
  html { zoom: 1; }
  /* the lightbox's 0.6667 counter-zoom assumed a 1.5 root — undo it here */
  #lightbox { zoom: 1; }
  body { font-size: 16px; }
  #center li, #center p, #center td, #center a,
  input.input, textarea, button, input.submit {
    font-size: 16px;
    line-height: 1.55;
  }
  #center .content_inner h1 { font-size: 22px; line-height: 1.3; }

  /* --- overflow fixes: nothing wider than the viewport --- */
  #center img { max-width: 100%; height: auto; }
  .app-screenshot { height: auto; width: auto; max-width: 100%; }
  .app-screens { flex-wrap: wrap; gap: 12px; }
  /* key-value info tables wrap in place instead of scrolling sideways
     (fixed layout + break-word beats horizontal scroll for reading) */
  table.content_table,
  table.info_good { width: 100%; table-layout: fixed; }
  table.content_table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* --- hero-pin belt-and-braces: no transforms below 760px --- */
  #head, #left, #right, #top .content_block { transform: none !important; }
}

/* Safety net: never allow horizontal scroll (clip, not hidden:
   hidden on html breaks document scrolling) */
html { overflow-x: clip; }