/* ===================================================================
   KODECCO — shared shell for the studio hub and the Unity game pages
   -------------------------------------------------------------------
   Load after styles.css. The card game page (/tabletop/) keeps its own
   layout; this file styles /, /game/ and /game/posts/*.
   =================================================================== */

:root{
  --ink:#050505; --ink-2:#0b0b0b; --ink-3:#121212; --line:#222;
  --paper:#efe9dc; --paper-2:#c9c3b5; --mute:#8a8578; --faint:#55524b;
  --hazard:#f2c14e; --blood:#c81d1d; --blood-hi:#e8341f;
  --fog:#6fd6bd; --fog-2:#3c8f7f; --fog-deep:#08171a;
  --accent:var(--hazard);
  --f-display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --f-term:'VT323','JetBrains Mono',Consolas,monospace;
  --f-read:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(16px,5vw,64px);
  --max:1180px;
}
.theme-unity{ --accent:var(--fog); }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--ink);color:var(--paper);font-family:var(--f-read);font-size:1.0625rem;line-height:1.7;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#000;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* film grain + scanline, very faint */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
}

/* ---------- shell ---------- */
.hazard{height:8px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 14px,#000 14px 28px);}
.site-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px var(--gutter);background:rgba(5,5,5,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.site-header.scrolled{border-color:var(--line);background:rgba(5,5,5,.9);}
.site-header .mark img{height:46px;width:auto;filter:drop-shadow(2px 2px 0 #000);}
.site-nav{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center;}
.site-nav a{font-family:var(--f-term);font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:color .2s;position:relative;}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--paper);}
.site-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);}
.site-nav .nav-cta{color:#000;background:var(--accent);padding:2px 12px;}
.site-nav .nav-cta:hover{color:#000;filter:brightness(1.1);}
@media(max-width:760px){
  .site-header{flex-wrap:wrap;padding-top:10px;padding-bottom:8px;}
  .site-header .mark img{height:38px;}
  .site-nav{order:3;width:100%;overflow-x:auto;gap:18px;padding-bottom:2px;scrollbar-width:none;}
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav a{font-size:1.1rem;white-space:nowrap;}
}

.site-footer{border-top:1px solid var(--line);padding:56px var(--gutter) 40px;color:var(--mute);font-size:.9rem;}
.site-footer .inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-end;}
.site-footer img{height:40px;width:auto;opacity:.9;margin-bottom:12px;}
.site-footer nav{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--f-term);font-size:1.15rem;text-transform:uppercase;}
.site-footer nav a:hover{color:var(--paper);}

/* ---------- type ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.narrow{max-width:740px;}
.eyebrow{font-family:var(--f-term);font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;}
.display{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:.01em;text-transform:uppercase;}
.h-xl{font-size:clamp(3.4rem,10vw,8.5rem);}
.h-lg{font-size:clamp(2.6rem,6.5vw,5.2rem);}
.h-md{font-size:clamp(2rem,4vw,3.1rem);}
.lede{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--paper-2);max-width:62ch;}
.term{font-family:var(--f-term);text-transform:uppercase;letter-spacing:.06em;}
section{position:relative;}
.pad{padding:clamp(80px,12vw,150px) 0;}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-term);font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 22px 9px;border:2px solid var(--accent);color:var(--accent);transition:background .2s,color .2s,transform .2s;}
.btn:hover{background:var(--accent);color:#000;}
.btn.solid{background:var(--accent);color:#000;}
.btn.solid:hover{filter:brightness(1.12);}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(4px);}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--f-term);font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;padding:1px 10px;border:1px solid var(--line);color:var(--paper-2);background:rgba(255,255,255,.02);}
.chip.live{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}
.chip.live::before{content:"●";margin-right:6px;font-size:.8em;animation:blink 1.6s steps(2) infinite;}
.chip.tab{border-color:rgba(242,193,78,.45);color:var(--hazard);}
.chip.uni{border-color:rgba(111,214,189,.45);color:var(--fog);}
@keyframes blink{50%{opacity:.2}}

/* ---------- screenshot slot ----------
   <figure class="shot" data-file="05-combat-melee"><img src="…/05-combat-melee.webp" alt="…" onerror="shotMissing(this)"></figure>
   If the file is not there yet, the figure shows an "awaiting capture" frame with the filename. */
.shot{position:relative;overflow:hidden;aspect-ratio:16/9;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 60% at 65% 35%,color-mix(in srgb,var(--fog) 16%,transparent),transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 85%,rgba(200,29,29,.10),transparent 70%),
    linear-gradient(160deg,#0a1615 0%,#050808 70%);
}
.shot img{width:100%;height:100%;object-fit:cover;}
.shot.missing::before{
  content:"";position:absolute;inset:clamp(10px,2vw,18px);pointer-events:none;
  background:
    linear-gradient(var(--fog),var(--fog)) top left/18px 1px no-repeat,
    linear-gradient(var(--fog),var(--fog)) top left/1px 18px no-repeat,
    linear-gradient(var(--fog),var(--fog)) top right/18px 1px no-repeat,
    linear-gradient(var(--fog),var(--fog)) top right/1px 18px no-repeat,
    linear-gradient(var(--fog),var(--fog)) bottom left/18px 1px no-repeat,
    linear-gradient(var(--fog),var(--fog)) bottom left/1px 18px no-repeat,
    linear-gradient(var(--fog),var(--fog)) bottom right/18px 1px no-repeat,
    linear-gradient(var(--fog),var(--fog)) bottom right/1px 18px no-repeat;
  opacity:.5;
}
.shot.missing::after{
  content:"◎ AWAITING CAPTURE\A" attr(data-file) ".webp";white-space:pre;text-align:center;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-term);font-size:clamp(.95rem,1.4vw,1.2rem);letter-spacing:.14em;line-height:1.5;color:color-mix(in srgb,var(--fog) 60%,transparent);
}
.shot.hero-shot.missing::after{align-items:flex-start;justify-content:flex-end;padding:96px var(--gutter) 0;text-align:right;}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 18px 12px;font-family:var(--f-term);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-2);background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:2;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ---------- signal (mailing list CTA) ---------- */
.signal{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:
  radial-gradient(ellipse 60% 120% at 50% 120%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--ink-2);}
.signal .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;}
.signal p{color:var(--paper-2);max-width:52ch;}
@media(max-width:820px){.signal .wrap{grid-template-columns:minmax(0,1fr);}}