/* ==========================================================================
   kurumx.tv — shared stylesheet
   A loving roast, rendered in CSS.
   ==========================================================================

   >>> THE ONLY NUMBERS YOU PROBABLY WANT TO TWEAK ARE IN :root BELOW <<<
   Everything on this site is positioned as a PERCENTAGE of the face image,
   so once the forehead box is right on one page it is right on every page
   and at every screen size.
   ========================================================================== */

:root{
  /* ---- palette ---------------------------------------------------------- */
  --bg:        #07070c;
  --bg-2:      #0d0d18;
  --ink:       #f4f2ff;
  --twitch:    #9146ff;
  --acid:      #b6ff2e;
  --hot:       #ff2d95;
  --cyan:      #22e6ff;
  --nav-h:     58px;

  /* ---- FACE IMAGE ASPECT RATIO ------------------------------------------
     width / height of forehead.png.
     The stage is capped at (viewport height * this) so the whole face fits
     on screen without letterboxing gaps that would break the % overlays.
     e.g. a 1200x1500 image  ->  1200/1500 = 0.8
     ---------------------------------------------------------------------- */
  --img-aspect: 0.82;

  /* =======================================================================
     ★★★ THE FOREHEAD ZONE ★★★
     All four values are percentages of the FACE IMAGE (not the viewport).
     --fh-x : distance from the LEFT edge of the image to the left edge of
              the forehead box
     --fh-y : distance from the TOP edge of the image to the top of the box
     --fh-w : width of the forehead box
     --fh-h : height of the forehead box

     HOW TO CALIBRATE:
       Nudge these four numbers until the Twitch player on the homepage sits
       exactly on the skin, then refresh — every game on every page moves
       with it.
     ======================================================================= */
  --fh-x: 27%;
  --fh-y: 4%;
  --fh-w: 45%;
  --fh-h: 34%;

  /* Dome shape of the forehead (top corners rounder than the brow line).
     Used to clip the Twitch player, the paint canvas, the skin tattoo, etc. */
  --fh-shape: 48% 48% 42% 42% / 58% 58% 42% 42%;

  /* Playfield inset: games (board, dartboard) sit slightly INSIDE the skin
     zone so pieces never spill onto the hairline or the eyebrows. */
  --fh-pad: 7;     /* UNITLESS number, not a % — it is multiplied by --fh-w/--fh-h */

  /* Nudge for the GAME BOARDS ONLY (tic-tac-toe + darts). A % of the image
     height, added to the top of any .fh--inset zone. Raise it to push the
     board further down the forehead; 0% puts it back in the middle.
     The Twitch player, paint canvas and ruler are unaffected. */
  --game-shift-y: 5%;
}

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

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

body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a0b33 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Impact","Haettenschweiler","Arial Narrow Bold","Arial Black",system-ui,sans-serif;
  letter-spacing:.02em;
  min-height:100vh;
  overflow-x:hidden;
}

/* Scanline film over the entire site — cheap, effective, very 2009 */
body::after{
  content:"";
  position:fixed; inset:0; z-index:900; pointer-events:none;
  /* PERF: no mix-blend-mode here. A blended full-viewport fixed layer makes
     the browser re-composite the whole page every frame; plain alpha looks
     the same over this dark palette and costs nothing. */
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  opacity:.8;
}

/* ==========================================================================
   TOP NAVIGATION (identical on every page)
   ========================================================================== */
.topnav{
  position:sticky; top:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; gap:.6rem;
  padding:0 .8rem;
  background:linear-gradient(180deg,#150a2b 0%, rgba(8,8,14,.92) 100%);
  border-bottom:2px solid var(--twitch);
  box-shadow:0 0 24px rgba(145,70,255,.45);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.topnav::-webkit-scrollbar{ display:none; }

.brand{
  font-size:1.35rem; text-decoration:none; color:var(--ink);
  white-space:nowrap; text-transform:uppercase;
  text-shadow:2px 0 var(--hot), -2px 0 var(--cyan);
  animation:brandshake 6s infinite steps(1);
}
.brand small{
  display:block; font-size:.45rem; letter-spacing:.32em;
  color:var(--acid); font-family:system-ui,sans-serif; margin-top:-2px;
}
@keyframes brandshake{
  0%,92%{ transform:none; }
  93%{ transform:translate(2px,-1px) skewX(-6deg); }
  95%{ transform:translate(-2px,1px) skewX(5deg); }
  97%{ transform:none; }
}

.navlinks{ display:flex; gap:.35rem; margin-left:auto; }
.navlinks a{
  --c:var(--twitch);
  text-decoration:none; color:var(--ink);
  font-size:.8rem; text-transform:uppercase; white-space:nowrap;
  padding:.42rem .7rem;
  border:2px solid var(--c);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  transition:transform .12s ease, background .12s ease;
}
.navlinks a:hover{ transform:translateY(-2px) rotate(-1deg); background:var(--c); color:#0b0b12; }
.navlinks a[aria-current="page"]{ background:var(--c); color:#0b0b12; }
.navlinks a:nth-child(2){ --c:var(--acid); }
.navlinks a:nth-child(3){ --c:var(--hot); }
.navlinks a:nth-child(4){ --c:var(--cyan); }
.navlinks a:nth-child(5){ --c:#ffb800; }
.navlinks a:nth-child(6){ --c:#ff7a29; }

.live-dot{
  width:9px; height:9px; border-radius:50%; background:#ff3b30;
  box-shadow:0 0 10px #ff3b30; animation:blip 1.1s infinite;
}
@keyframes blip{ 50%{ opacity:.15; } }

/* ==========================================================================
   THE STAGE — the face image and everything glued to it
   ========================================================================== */
.stage-wrap{
  display:flex; flex-direction:column; align-items:center;
  padding:.5rem;
}

.stage{
  position:relative;                 /* <- all forehead % coords resolve here */
  width:100%;
  /* Cap the width so the full image fits the viewport height. */
  max-width:calc((100vh - var(--nav-h) - 1.2rem) * var(--img-aspect));
  margin-inline:auto;
  isolation:isolate;
  animation:pulse 3.4s ease-in-out infinite;   /* the forehead breathes */
}
.stage.no-pulse{ animation:none; }
/* PERF: promote only the element that actually animates. */
.stage:not(.no-pulse){ will-change:transform; }

/* The brightness half of the "breath". An opacity fade is composited on the
   GPU, whereas animating filter: brightness() repaints the whole face (and
   the Twitch iframe with it) 60 times a second. z-index keeps it BELOW .fh,
   so the video is never drawn through it. */
.stage:not(.no-pulse)::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(60% 45% at 50% 22%, rgba(255,255,255,.10), transparent 70%);
  opacity:0; animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }

/* Pages with a control bar underneath need a little more headroom */
.stage.compact{ max-width:calc((100vh - var(--nav-h) - 7.5rem) * var(--img-aspect)); }

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.008); }
}

.face{
  display:block; width:100%; height:auto;
  user-select:none; -webkit-user-drag:none;
}

/* Broken-image fallback so the site still works before you drop in the png */
.face-fallback{
  position:absolute; inset:0; display:none;
  place-items:center; text-align:center; padding:2rem;
  background:repeating-linear-gradient(45deg,#1a1a2e 0 18px,#141425 18px 36px);
  color:var(--acid); font-size:1rem; line-height:1.6;
}
.stage.missing .face-fallback{ display:grid; }
.stage.missing{ aspect-ratio:var(--img-aspect); }

/* --------------------------------------------------------------------------
   .fh — THE FOREHEAD ZONE ITSELF
   Any element with class="fh" is locked to the forehead at every screen size.
   Add .fh--inset to sit slightly inside the skin (games use this).
   -------------------------------------------------------------------------- */
.fh{
  position:absolute;
  left:var(--fh-x);
  top:var(--fh-y);
  width:var(--fh-w);
  height:var(--fh-h);
  z-index:3;
}
.fh--inset{
  left:calc(var(--fh-x) + var(--fh-w) * (var(--fh-pad) / 100));
  top:calc(var(--fh-y) + var(--fh-h) * (var(--fh-pad) / 100) + var(--game-shift-y));
  width:calc(var(--fh-w) * (1 - 2 * var(--fh-pad) / 100));
  height:calc(var(--fh-h) * (1 - 2 * var(--fh-pad) / 100));
}
/* Square playfield centred in the forehead (tic-tac-toe, dartboard) */
.fh--square{
  display:grid; place-items:center;
  pointer-events:none;             /* children re-enable it */
}
.fh--square > *{ pointer-events:auto; }

.fh-clip{ overflow:hidden; border-radius:var(--fh-shape); }

/* ==========================================================================
   TYPE + CHROME
   ========================================================================== */
.glitch{
  position:relative; display:inline-block;
  text-transform:uppercase; line-height:.95;
  text-shadow:0 3px 0 #000;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  clip-path:inset(0 0 55% 0);
}
.glitch::before{ color:var(--cyan); animation:gl1 3.1s infinite steps(2); }
.glitch::after { color:var(--hot);  animation:gl2 2.3s infinite steps(2); clip-path:inset(45% 0 0 0); }
@keyframes gl1{ 0%,88%{ transform:none; } 90%{ transform:translate(-3px,1px);} 94%{ transform:translate(3px,-1px);} 100%{ transform:none; } }
@keyframes gl2{ 0%,85%{ transform:none; } 88%{ transform:translate(3px,-2px);} 92%{ transform:translate(-4px,2px);} 100%{ transform:none; } }

.banner{
  text-align:center; padding:.6rem 1rem 0;
}
.banner h1{
  margin:0; font-size:clamp(1.6rem,6vw,4.2rem);
}
.banner p{
  margin:.35rem 0 0; font-family:system-ui,sans-serif; font-weight:600;
  font-size:clamp(.7rem,2.2vw,1rem); color:#b9aee0; letter-spacing:.18em;
  text-transform:uppercase;
}

/* Marquee of increasingly unhinged claims */
.ticker{
  overflow:hidden; white-space:nowrap;
  border-top:2px solid var(--acid); border-bottom:2px solid var(--acid);
  background:#0a0f02; color:var(--acid);
  font-family:system-ui,sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.14em; padding:.4rem 0; margin-top:.6rem;
}
.ticker span{ display:inline-block; padding-left:100%; animation:slide 38s linear infinite; }
@keyframes slide{ to{ transform:translateX(-100%); } }

/* Control bars under the stage */
.controls{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center;
  padding:.7rem; max-width:900px; margin:0 auto;
  font-family:system-ui,sans-serif;
}
.btn{
  font-family:inherit; font-weight:800; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; cursor:pointer;
  color:var(--ink); background:#16112a;
  border:2px solid var(--twitch); border-radius:8px;
  padding:.5rem .85rem;
  transition:transform .1s ease, background .1s ease;
}
.btn:hover{ transform:translateY(-2px); background:var(--twitch); color:#0b0b12; }
.btn:active{ transform:translateY(1px); }
.btn.acid{ border-color:var(--acid); } .btn.acid:hover{ background:var(--acid); }
.btn.hot { border-color:var(--hot);  } .btn.hot:hover { background:var(--hot);  }
.btn[aria-pressed="true"]{ background:var(--acid); color:#0b0b12; border-color:var(--acid); }

.readout{
  font-family:system-ui,sans-serif; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; font-size:.8rem;
  border:2px dashed #3a2d63; border-radius:8px; padding:.5rem .8rem;
  background:rgba(255,255,255,.03);
}
.readout b{ color:var(--acid); font-size:1.05rem; }

/* Floating overlay text pinned over the face */
.overlay-tag{
  position:absolute; z-index:6; pointer-events:none;
  font-size:clamp(.75rem,2.4vw,1.6rem);
  padding:.25rem .6rem;
  background:#000; border:3px solid var(--acid);
  transform:rotate(-3deg);
  box-shadow:6px 6px 0 rgba(182,255,46,.25);
}

/* Big celebratory shout that slams onto the screen */
.shout{
  position:fixed; inset:0; z-index:800; display:grid; place-items:center;
  pointer-events:none; opacity:0;
}
.shout.on{ animation:slam 2.2s ease-out forwards; }
.shout span{
  font-size:clamp(1.6rem,9vw,6rem); text-align:center; padding:0 1rem;
  color:var(--acid); text-shadow:0 0 30px var(--acid), 6px 6px 0 #000;
  transform:rotate(-4deg);
}
@keyframes slam{
  0%  { opacity:0; transform:scale(2.6); filter:blur(9px); }
  18% { opacity:1; transform:scale(1);   filter:none; }
  75% { opacity:1; }
  100%{ opacity:0; transform:scale(1.15); }
}

/* Confetti / particle layer */
.particles{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.particle{
  position:absolute; font-size:1.1rem; opacity:.65;
  animation:float-up linear infinite;
  will-change:transform;
}
@keyframes float-up{
  from{ transform:translateY(105vh) rotate(0deg); }
  to  { transform:translateY(-15vh) rotate(360deg); }
}

footer.roast{
  text-align:center; padding:1.4rem 1rem 2.4rem;
  font-family:system-ui,sans-serif; font-size:.72rem; line-height:1.9;
  color:#7c6fa6; letter-spacing:.06em;
}
footer.roast b{ color:var(--twitch); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:760px){
  :root{ --nav-h:52px; }
  .brand{ font-size:1.05rem; }
  .navlinks a{ font-size:.68rem; padding:.35rem .5rem; }
  /* On phones let the image use full width; height cap is relaxed so the
     forehead stays big enough to actually play on. */
  .stage, .stage.compact{ max-width:100%; }
  .stage-wrap{ padding:.25rem; }
}
@media (max-width:420px){
  .navlinks{ gap:.25rem; }
}


/* ==========================================================================
   PERF + ACCESSIBILITY
   Everything above is decoration. If the visitor asked for less motion, drop
   the animations entirely — this also rescues low-powered machines.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .particles{ display:none; }
}