/* ═══════════════════════════════════════════════════════════════
   albie's portfolio - classic Roblox
   Everything here is hand-built: no frameworks, no webfonts,
   no external requests. Studs are CSS. The baseplate is CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* Classic BrickColor palette */
  --c-red:      #c4281c;   /* Bright red        */
  --c-blue:     #0d69ac;   /* Bright blue       */
  --c-yellow:   #f5cd30;   /* Bright yellow     */
  --c-green:    #4b974b;   /* Br. green         */
  --c-lime:     #a4bd47;   /* Br. yellowish grn */
  --c-orange:   #d97b30;   /* Br. yell. orange  */
  --c-white:    #f2f3f3;   /* Institutional wht */
  --c-cyan:     #4fa3c9;   /* Pastel blue-green */
  --c-teal:     #008f9c;
  --c-purple:   #6b3fa0;
  --c-magenta:  #b1428a;
  --c-pink:     #e8a0c0;
  --c-dark:     #2b2f36;
  --c-stone:    #a3a2a5;   /* Medium stone grey */
  --c-stone-d:  #6d6e6c;   /* Dark stone grey   */

  /* World */
  --sky-hi:  #4c9fd8;
  --sky-lo:  #bfe6f7;
  --grass:   #3f9c46;
  --void:    #0a0c10;
  --void-2:  #10141a;

  /* Ink */
  --ink:      #10131a;
  --ink-soft: #4a5160;
  --paper:    #eceff3;

  /* Type */
  --ui:      Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --display: "Arial Black", "Arial Bold", Gadget, Impact, var(--ui);
  --mono:    "Courier New", Courier, "Lucida Console", monospace;

  /* Geometry */
  --rad: 5px;
  --wrap: 1250px;
  --gut: clamp(16px, 4vw, 48px);

  /* Stud face used on top of every brick */
  --studs:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.34) 0 25%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 57%, rgba(0,0,0,.30)      0 25%, rgba(0,0,0,0) 26%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.13)      0 29%, rgba(0,0,0,0) 30%);

  /* The classic white arrow */
  --cur: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3.6 1.9 3.6 20.6 8.6 15.7 11.8 23.1 15.5 21.5 12.3 14.3 19.2 14.1Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, default;
  --cur-hot: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3.6 1.9 3.6 20.6 8.6 15.7 11.8 23.1 15.5 21.5 12.3 14.3 19.2 14.1Z' fill='%23f5cd30' stroke='%23000000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, pointer;

  --fade: 0;           /* set by JS on scroll: sunny world → dark void */
}

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

html{ scroll-behavior: smooth; scroll-padding-top: 84px; }

body{
  margin:0;
  min-height:100%;
  background: var(--void);
  color: var(--paper);
  font: 400 16px/1.6 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (hover:hover) and (pointer:fine){
  body{ cursor: var(--cur); }
  a, button, summary, [role="button"], .proto{ cursor: var(--cur-hot); }
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
button{ font: inherit; color: inherit; background:none; border:0; padding:0; text-align:left; }
::selection{ background: var(--c-yellow); color:#000; }

:focus-visible{
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 2px;
}

body.is-loading{ overflow:hidden; }
body.is-locked{ overflow:hidden; }


/* ── 2. LOADING SCREEN (Bricks / Connectors) ───────────────── */
#loader{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  background: #6ea9cd;
  transition: opacity .5s ease, visibility .5s;
}
#loader.gone{ opacity:0; visibility:hidden; pointer-events:none; }

/* a classic place, built out of divs */
.loader__world{
  position:absolute; inset:0; overflow:hidden;
  background:
    radial-gradient(60% 38% at 80% 10%, rgba(255,255,255,.7), rgba(255,255,255,0) 62%),
    radial-gradient(16% 8%  at 14% 20%, rgba(255,255,255,.9),  rgba(255,255,255,0) 70%),
    radial-gradient(12% 6%  at 22% 25%, rgba(255,255,255,.8),  rgba(255,255,255,0) 70%),
    radial-gradient(19% 8%  at 45% 13%, rgba(255,255,255,.85), rgba(255,255,255,0) 72%),
    radial-gradient(13% 6%  at 66% 22%, rgba(255,255,255,.7),  rgba(255,255,255,0) 72%),
    radial-gradient(15% 7%  at 88% 16%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
    linear-gradient(#5aa6d6 0%, #8cc6e6 46%, #c6e5f3 66%, #ddeff8 70%);
}
/* the studded baseplate, receding to the horizon */
.loader__plate{
  position:absolute; left:50%; bottom:-6%;
  width:300vw; height:110vh;
  transform: translateX(-50%) perspective(620px) rotateX(66deg);
  transform-origin: 50% 100%;
  background-color:#3f9c46;
  background-image: var(--studs);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%);
}
/* skyline standing on the horizon line (JS pins `bottom` to the plate edge) */
.loader__town{ position:absolute; left:0; right:0; bottom:30%; height:0; }
.loader__town i{
  position:absolute; left:var(--x); bottom:-2px;
  width:var(--w); height:var(--h);
  transform: translateX(-50%);
}
.loader__town i.tree{ width:calc(46px * var(--s)); height:calc(62px * var(--s)); }
.bld{ border:2px solid rgba(0,0,0,.35); border-bottom:0; border-radius:2px 2px 0 0; }
.bld--house{
  background: linear-gradient(180deg,#d8c99a 0 100%);
  box-shadow: inset -10px 0 0 rgba(0,0,0,.12), inset 0 -6px 0 rgba(0,0,0,.06);
}
.bld--house::before{
  content:""; position:absolute; left:-9px; right:-9px; top:-18px; height:20px;
  background:#a83a2c;
  clip-path: polygon(0 100%, 12% 0, 88% 0, 100% 100%);
}
.bld--house::after{
  content:""; position:absolute; left:22%; bottom:0; width:26%; height:56%;
  background:#8f7f56; border:2px solid rgba(0,0,0,.2); border-bottom:0;
}
.bld--tower{
  background: linear-gradient(180deg,#b8bbbe 0 100%);
  box-shadow: inset -8px 0 0 rgba(0,0,0,.14);
}
.bld--tower::after{
  content:""; position:absolute; inset:16% 22% 12%;
  background: repeating-linear-gradient(180deg, rgba(60,110,170,.75) 0 9px, transparent 9px 17px);
}
.bld--slab{
  background: linear-gradient(180deg,#9fa3a7 0 100%);
  box-shadow: inset -12px 0 0 rgba(0,0,0,.14);
}
.bld--slab::after{
  content:""; position:absolute; inset:14% 12% 0;
  background: repeating-linear-gradient(90deg, rgba(50,95,150,.6) 0 14px, transparent 14px 26px);
}
.tree::before{
  content:""; position:absolute; left:50%; bottom:0; width:calc(9px * var(--s)); height:45%;
  transform:translateX(-50%); background:#6b4a2a; border:2px solid rgba(0,0,0,.3); border-bottom:0;
}
.tree::after{
  content:""; position:absolute; left:50%; bottom:38%; width:100%; height:64%;
  transform:translateX(-50%); border-radius:50%;
  background: radial-gradient(circle at 36% 30%, #62b25c, #37803a 70%);
  border:2px solid rgba(0,0,0,.3);
}
.loader__band{
  position:relative; z-index:2;
  width:min(1100px, 92vw);
  padding: clamp(26px,6vw,64px) 24px;
  background: rgba(226,228,230,.62);
  border-top:1px solid rgba(255,255,255,.5);
  border-bottom:1px solid rgba(0,0,0,.12);
  text-align:center;
}
.loader__count{
  font: 400 clamp(17px, 3.4vw, 34px)/1 var(--mono);
  color:#fff;
  letter-spacing:.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
  white-space:nowrap;
}
.loader__skip{
  position:absolute; z-index:2; bottom:26px; left:0; right:0;
  text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,0,0,.5);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:.25 } }


/* ── 3. WORLD BACKDROP ─────────────────────────────────────── */
.world{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.world__sky{
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--sky-hi) 0%, #7cbde3 38%, var(--sky-lo) 66%, #e3f3fb 74%);
}
.world__sun{
  position:absolute; top:-14vh; right:6vw; width:52vmax; height:52vmax;
  background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 32%, rgba(255,255,255,0) 62%);
}
.world__clouds{
  position:absolute; left:0; right:0; top:0; height:70%;
  background:
    radial-gradient(15% 9%  at 12% 26%, rgba(255,255,255,.92), rgba(255,255,255,0) 68%),
    radial-gradient(11% 7%  at 20% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 68%),
    radial-gradient(18% 8%  at 42% 16%, rgba(255,255,255,.8),  rgba(255,255,255,0) 70%),
    radial-gradient(12% 6%  at 55% 22%, rgba(255,255,255,.7),  rgba(255,255,255,0) 70%),
    radial-gradient(16% 8%  at 78% 30%, rgba(255,255,255,.78), rgba(255,255,255,0) 70%),
    radial-gradient(10% 5%  at 88% 18%, rgba(255,255,255,.6),  rgba(255,255,255,0) 70%);
  animation: drift 90s linear infinite;
}
@keyframes drift{ to{ transform: translate3d(-6%,0,0) } }

.world__plate{
  position:absolute; left:50%; bottom:0;
  width:340vw; height:150vh;
  transform: translateX(-50%) perspective(560px) rotateX(75deg);
  transform-origin: 50% 100%;
}
.world__plate i{
  position:absolute; inset:0;
  background-color: var(--grass);
  background-image: var(--studs);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26%);
}
/* horizon seam */
.world__plate::before{
  content:""; position:absolute; left:0; right:0; top:24%; height:2px;
  background: rgba(255,255,255,.25);
}
/* darkens the whole world as you scroll down into the showcase */
.world__fade{
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 30%, #12161d 0%, var(--void) 70%);
  opacity: var(--fade);
  will-change: opacity;
}


/* ── 4. 2006 CLIENT MENU BAR ───────────────────────────────── */
.menubar{
  position:fixed; inset:0 0 auto 0; z-index:600;
  background: linear-gradient(#f4f4f4, #d9d9d9);
  border-bottom:1px solid #7d7d7d;
  box-shadow: 0 2px 0 rgba(0,0,0,.28), 0 10px 24px rgba(0,0,0,.28);
  color:#111;
  font-size:12px;
}
.menubar__inner{
  position:relative;
  max-width: var(--wrap); margin:0 auto;
  padding: 0 var(--gut);
  height:38px; display:flex; align-items:center; gap:18px;
}
.menubar__title{ white-space:nowrap; letter-spacing:-.01em; }
.menubar__title b{ color: var(--c-red); }
.menubar__panel{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.menubar__nav{ display:flex; gap:2px; }
.menubar__nav a{
  padding:5px 11px; border-radius:2px; white-space:nowrap;
  transition: background .12s, color .12s;
}
.menubar__nav a:hover, .menubar__nav a.on{ background:#0a246a; color:#fff; }
.menubar__right{ display:flex; gap:6px; align-items:center; }
.menubar__btn{
  font-size:11px; padding:4px 10px;
  background: linear-gradient(#fff,#e2e2e2);
  border:1px solid #9a9a9a;
  border-radius:3px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.15);
  white-space:nowrap;
}
.menubar__btn:hover{ background: linear-gradient(#fff,#d2e4f5); border-color:#5b87b8; }
.menubar__btn--exit{ color: var(--c-red); font-weight:bold; }
.menubar__burger{ display:none; width:32px; height:24px; margin-left:auto; padding:4px; }
.menubar__burger i{ display:block; height:3px; margin:3px 0; background:#222; border-radius:1px; transition: transform .2s, opacity .2s; }
.menubar__burger[aria-expanded="true"] i:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menubar__burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menubar__burger[aria-expanded="true"] i:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* ── 6. HERO ───────────────────────────────────────────────── */
.hero{
  position:relative; z-index:2;
  max-width: var(--wrap); margin:0 auto;
  padding: clamp(100px, 14.5vh, 142px) var(--gut) 62px;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
}

/* classic chat box */
.chat{
  position:absolute; top:48px; left: var(--gut);
  max-width:min(430px, 52vw);
  width: max-content;
  padding:7px 10px;
  background: rgba(20,20,20,.42);
  border-radius:3px;
  font-size:12px; line-height:1.5;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7);
  pointer-events:none;
}
.chat b{ color:#ffe27a; font-weight:400; }
.chat p{ white-space:nowrap; overflow:hidden; }
.chat span::after{ content:"▌"; opacity:0; }
.chat span.typing::after{ opacity:1; animation: blink .9s steps(2) infinite; }

.hero__grid{
  display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(24px, 4vw, 52px); align-items:center;
}

.kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:bold;
  color:#0d2b3d;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:100px; padding:6px 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);
  margin-bottom:18px;
}
.kicker .dot{ width:8px; height:8px; border-radius:50%; background:#25c245; box-shadow:0 0 0 3px rgba(37,194,69,.28); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(37,194,69,0) } }

/* ALBIE - five letter bricks */
.wordmark{ display:flex; gap: clamp(4px,.9vw,10px); margin: 0 0 17px; }
.wordmark__brick{
  --bt:#f5cd30; --bs:#b8971d;
  position:relative;
  display:grid; place-items:center;
  width: clamp(50px, 9.4vw, 108px); height: clamp(56px, 10.4vw, 120px);
  font: 900 clamp(30px,5.8vw,68px)/1 var(--display);
  color:#20160a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bt) 88%, #fff) 0 14%, var(--bt) 14% 84%, color-mix(in srgb, var(--bt) 80%, #000) 84% 100%);
  border:2px solid rgba(0,0,0,.55);
  border-radius:4px;
  box-shadow: 0 7px 0 var(--bs), 0 12px 22px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5);
  transform: rotate(var(--t,0deg));
  transition: transform .18s cubic-bezier(.34,1.6,.64,1), box-shadow .18s;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.wordmark__brick::before{
  content:""; position:absolute; left:0; right:0; top:-9px; height:11px;
  background-color: var(--bt);
  background-image: var(--studs); background-size: 22px 22px;
  border:2px solid rgba(0,0,0,.55); border-bottom:0;
  border-radius:4px 4px 0 0;
}
.wordmark__brick:nth-child(2){ --bt:#c4281c; --bs:#8b1a11; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.wordmark__brick:nth-child(3){ --bt:#0d69ac; --bs:#084a79; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.wordmark__brick:nth-child(4){ --bt:#4b974b; --bs:#316331; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.wordmark__brick:nth-child(5){ --bt:#f2f3f3; --bs:#b3b6b8; }
.wordmark__brick:hover{ transform: rotate(var(--t,0deg)) translateY(-7px); box-shadow: 0 14px 0 var(--bs), 0 20px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.5); }
.wordmark.pop .wordmark__brick{ animation: pop .5s cubic-bezier(.34,1.6,.64,1) both; }
.wordmark.pop .wordmark__brick:nth-child(2){ animation-delay:.07s }
.wordmark.pop .wordmark__brick:nth-child(3){ animation-delay:.14s }
.wordmark.pop .wordmark__brick:nth-child(4){ animation-delay:.21s }
.wordmark.pop .wordmark__brick:nth-child(5){ animation-delay:.28s }
@keyframes pop{ from{ transform: translateY(-140px) rotate(-14deg); opacity:0 } to{ transform: rotate(var(--t,0deg)); opacity:1 } }

.roles{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:17px; }
.roles span{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:bold;
  padding:6px 11px; border-radius:3px;
  color:#0b1c26; background: rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.16);
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}

/* white-brick copy panel */
.hero__copy{
  position:relative;
  background: linear-gradient(180deg,#fbfcfc 0 10px, #eef0f1 10px 100%);
  border:2px solid rgba(0,0,0,.5); border-radius:5px;
  box-shadow: 0 7px 0 #b6babd, 0 16px 34px rgba(0,0,0,.35);
  padding: 18px 20px;
  color: var(--ink); font-size:14.5px; line-height:1.68;
  margin-bottom: 19px;
}
.hero__copy::before{
  content:""; position:absolute; left:-2px; right:-2px; top:-11px; height:13px;
  background-color:#eef0f1; background-image:var(--studs); background-size:22px 22px;
  border:2px solid rgba(0,0,0,.5); border-bottom:0; border-radius:5px 5px 0 0;
}
.hero__copy p + p{ margin-top:11px; }
.hero__copy b{ color: var(--c-red); }

.social{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  --bt: var(--c-stone); --bs:#5d6063;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px 12px; border-radius:4px;
  font-size:13px; font-weight:bold; letter-spacing:.02em;
  color:#fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bt) 85%, #fff) 0 40%, var(--bt) 40% 100%);
  border:2px solid rgba(0,0,0,.5);
  box-shadow: 0 5px 0 var(--bs), 0 10px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 8px 0 var(--bs), 0 14px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.4); filter: brightness(1.06); }
.btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 var(--bs), 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--blue{ --bt:#3d4650; --bs:#22282e; }
.btn--blue2{ --bt:#0a66c2; --bs:#054584; }
.btn--dark{ --bt:#1b1f24; --bs:#000; }
.btn--purple{ --bt:#5865f2; --bs:#3a44b0; }

/* right column */
.hero__right{ display:flex; flex-direction:column; gap:18px; }

.viewport{
  background: linear-gradient(#e9ebec,#cfd3d6);
  border:2px solid rgba(0,0,0,.55); border-radius:5px;
  box-shadow: 0 9px 0 rgba(0,0,0,.22), 0 20px 44px rgba(0,0,0,.45);
  overflow:hidden;
}
.viewport__bar{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  background: linear-gradient(#5a86b8,#2f5e91);
  color:#fff; font-size:11px; letter-spacing:.03em;
  border-bottom:1px solid rgba(0,0,0,.4);
}
.viewport__bar i{ width:9px; height:9px; border-radius:2px; background:rgba(255,255,255,.55); box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); }
.viewport__bar i:first-child{ background:#f5cd30 }
.viewport__bar i:nth-child(2){ background:#4b974b }
.viewport__bar i:nth-child(3){ background:#c4281c }
.viewport__bar span{ margin-left:4px; opacity:.95; }
.viewport__shot{ position:relative; display:block; background:#000; }
.viewport__shot img{ width:100%; height:auto; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.viewport:hover .viewport__shot img{ transform: scale(1.035); }
.viewport__play{
  position:absolute; inset:0; margin:auto; width:66px; height:66px;
  background: rgba(10,10,10,.55);
  border:3px solid #fff; border-radius:50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: transform .2s, background .2s;
}
.viewport__play::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border:14px solid transparent; border-left:22px solid #fff;
  transform: translateX(5px);
}
.viewport:hover .viewport__play{ transform: scale(1.12); background: var(--c-red); }
.viewport__sel{
  position:absolute; inset:6px; border:2px dashed rgba(120,235,255,0);
  transition: border-color .2s;
}
.viewport:hover .viewport__sel{ border-color: rgba(120,235,255,.9); }
.viewport__cap{
  padding:10px 12px; font-size:11.5px; line-height:1.55; color:#20262d;
  background: #dfe3e6; border-top:1px solid rgba(0,0,0,.18);
}
.viewport__cap b{ color: var(--c-red); }

.avatarcard{
  position:relative; display:flex; align-items:flex-end; gap:14px;
  padding:12px 16px;
  background: rgba(18,22,28,.62);
  border:1px solid rgba(255,255,255,.2); border-radius:5px;
  backdrop-filter: blur(3px);
  overflow:hidden;
}
.avatarcard__me{
  width:52px; height:52px; object-fit:cover; object-position:50% 22%;
  border-radius:3px; border:2px solid rgba(255,255,255,.35);
  flex:none;
}
.avatarcard__noob{
  width:74px; height:74px; flex:none; margin-bottom:-12px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.5));
  transition: transform .2s cubic-bezier(.34,1.6,.64,1);
}
.avatarcard__noob:hover{ transform: translateY(-6px) rotate(-4deg); }
.avatarcard__noob.oof{ animation: oof .6s ease forwards; }
@keyframes oof{
  0%{ transform:none }
  30%{ transform: translateY(-26px) rotate(-14deg) }
  100%{ transform: translateY(60px) rotate(-92deg); opacity:0 }
}
.avatarcard__tag{ flex:1; font-size:12px; line-height:1.45; }
.avatarcard__tag b{ display:block; color:#ffe27a; }
.avatarcard__tag span{ color:#b8c2cc; font-size:11px; }

/* headline tally */
.tally{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
  margin-top: clamp(24px, 3vw, 38px);
}
.tally li{
  position:relative; padding:16px 12px 14px; text-align:center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 84%, #fff) 0 34%, var(--t) 34% 100%);
  border:2px solid rgba(0,0,0,.5); border-radius:5px;
  box-shadow: 0 6px 0 rgba(0,0,0,.34), 0 12px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.tally li::before{
  content:""; position:absolute; left:-2px; right:-2px; top:-10px; height:12px;
  background-color: var(--t); background-image:var(--studs); background-size:20px 20px;
  border:2px solid rgba(0,0,0,.5); border-bottom:0; border-radius:5px 5px 0 0;
}
.tally b{ display:block; font: 900 clamp(20px,3vw,32px)/1 var(--display); letter-spacing:-.02em; }
.tally span{ display:block; margin-top:5px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.tally li:nth-child(3){ color:#241d05; text-shadow:0 1px 0 rgba(255,255,255,.35); }

.scrollhint{
  position:absolute; left:0; right:0; bottom:12px;
  width:26px; height:42px; margin:0 auto;
  border:2px solid rgba(255,255,255,.75); border-radius:14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.scrollhint i{ display:block; width:4px; height:8px; margin:7px auto 0; border-radius:2px; background:#fff; animation: wheel 1.7s ease-in-out infinite; }
@keyframes wheel{ 50%{ transform: translateY(13px); opacity:.2 } }


/* ── 7. SECTIONS + SIGNAGE ─────────────────────────────────── */
.sec{
  position:relative; z-index:2;
  max-width: var(--wrap); margin:0 auto;
  padding: clamp(64px, 9vw, 128px) var(--gut);
}
.sec--alt::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.035) 12%, rgba(255,255,255,.035) 88%, transparent);
}
.sec__head{ text-align:center; margin-bottom: clamp(38px,6vw,66px); }

.signage{
  --sign:#c4281c; --sign-d:#7d1610;
  display:inline-block; position:relative;
  padding: 16px clamp(22px,4vw,52px) 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sign) 82%, #fff) 0 16%, var(--sign) 16% 100%);
  border:3px solid rgba(0,0,0,.55); border-radius:9px;
  box-shadow: 0 10px 0 var(--sign-d), 0 22px 44px rgba(0,0,0,.55), inset 0 3px 0 rgba(255,255,255,.42), inset 0 -8px 0 rgba(0,0,0,.16);
  transform: rotate(-1.1deg);
  text-align:center;
}
.signage::before{
  content:""; position:absolute; left:-3px; right:-3px; top:-13px; height:15px;
  background-color: var(--sign); background-image: var(--studs); background-size:24px 24px;
  border:3px solid rgba(0,0,0,.55); border-bottom:0; border-radius:9px 9px 0 0;
}
.signage span{ display:block; color:#fff; }
.signage span:first-child{
  font: bold 12px/1 var(--ui); letter-spacing:.36em; text-transform:uppercase;
  opacity:.92; margin-bottom:7px; text-shadow:0 2px 0 rgba(0,0,0,.35);
}
.signage span:last-child{
  font: 900 clamp(30px, 6vw, 62px)/.94 var(--display);
  letter-spacing:-.02em; text-transform:uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.35);
}
.signage--blue  { --sign:#0d69ac; --sign-d:#084a79; }
.signage--green { --sign:#4b974b; --sign-d:#2f6330; }
.signage--yellow{ --sign:#f5cd30; --sign-d:#b8971d; }
.signage--yellow span{ color:#2a2205; text-shadow:0 2px 0 rgba(255,255,255,.3); }
.signage--yellow span:last-child{ text-shadow:0 3px 0 rgba(255,255,255,.32), 0 6px 14px rgba(0,0,0,.2); }
.signage--red   { --sign:#c4281c; --sign-d:#7d1610; }

.sec__sub{
  max-width:64ch; margin: 26px auto 0;
  color:#a9b4c2; font-size:14.5px; line-height:1.75;
}
.sec__sub b{ color:#fff; }
.statnote{
  margin-top: 34px; text-align:center;
  font-size:11px; letter-spacing:.08em; color:#6d7987;
}


/* ── 8. PLACE (GAME) CARDS ─────────────────────────────────── */
.places{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(22px, 3vw, 34px); }
.place--wide{ grid-column: 1 / -1; }
.place--wide .place__thumb img{ width: clamp(120px, 15vw, 176px); }
.place--wide .place__desc{ max-width: 74ch; }
.place--wide .figs li{ flex:1 1 130px; }
.place--wide .figs{ max-width: 620px; }

.place{
  --t: var(--c-stone);
  position:relative; display:flex; flex-direction:column;
  padding-top: 14px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.place__studs{
  position:absolute; left:10px; right:10px; top:0; height:16px;
  background-color: var(--t); background-image: var(--studs); background-size:24px 24px;
  border:2px solid rgba(0,0,0,.6); border-bottom:0; border-radius:6px 6px 0 0;
}
.place__inner{
  position:relative; flex:1;
  display:grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(14px,2vw,22px);
  align-content:start;
  padding: clamp(16px,2.2vw,22px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0 34%, rgba(0,0,0,.06) 34% 100%),
    color-mix(in srgb, var(--t) 30%, #12161c);
  border:2px solid rgba(0,0,0,.6); border-radius:6px;
  box-shadow: 0 8px 0 rgba(0,0,0,.45), 0 18px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16);
  transition: box-shadow .2s;
}
.place:hover{ transform: translateY(-7px); }
.place:hover .place__inner{ box-shadow: 0 15px 0 rgba(0,0,0,.45), 0 26px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.place:active{ transform: translateY(2px); }

/* the Studio selection box */
.sel{
  position:absolute; inset:8px 0 -6px; border:2px dashed rgba(120,235,255,0);
  border-radius:6px; pointer-events:none; transition: border-color .18s;
}
.sel::before, .sel::after{
  content:""; position:absolute; width:9px; height:9px; background:#78ebff;
  border:1px solid #04323d; opacity:0; transition: opacity .18s;
}
.sel::before{ left:-5px; top:-5px; }
.sel::after{ right:-5px; bottom:-5px; }
.place:hover .sel, .proto:hover .sel{ border-color: rgba(120,235,255,.85); }
.place:hover .sel::before, .place:hover .sel::after{ opacity:1; }

.place__thumb{ position:relative; flex:none; align-self:start; }
.place__thumb img{
  width: clamp(96px, 13vw, 148px); height:auto; aspect-ratio:1;
  object-fit:cover; border-radius:5px;
  border:2px solid rgba(0,0,0,.6);
  box-shadow: 0 5px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.14);
}
.place__year{
  position:absolute; left:-6px; bottom:-8px;
  font: bold 10px/1 var(--ui); letter-spacing:.1em; font-style:normal;
  padding:5px 8px; border-radius:3px;
  color:#0d1116; background: var(--c-yellow);
  border:2px solid rgba(0,0,0,.6);
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.place__meta{ min-width:0; display:flex; flex-direction:column; }
.place__meta h3{
  font: 900 clamp(20px, 2.6vw, 30px)/1.05 var(--display);
  letter-spacing:-.02em; color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.place__role{
  margin-top:6px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:bold;
  color: color-mix(in srgb, var(--t) 62%, #ffffff);
}
.place__desc{ margin-top:11px; font-size:13.5px; line-height:1.65; color:#d6dee7; }

.figs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:15px; }
.figs li{
  flex:0 1 108px; text-align:center; padding:8px 6px 7px;
  background: rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.13); border-radius:4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.figs b{ display:block; font: 900 15px/1 var(--display); color:#fff; }
.figs span{ display:block; margin-top:4px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:#8d99a6; }

.place__go{
  display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin-top:16px;
  padding:9px 16px; border-radius:4px;
  font-size:12px; font-weight:bold; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 78%, #fff) 0 42%, var(--t) 42% 100%);
  border:2px solid rgba(0,0,0,.55);
  box-shadow: 0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.4);
  transition: transform .14s, box-shadow .14s;
}
.place__go::before{ content:""; width:0; height:0; border:6px solid transparent; border-left:10px solid currentColor; }
.place:hover .place__go{ transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.35); }


/* ── 9. PROTOTYPES ─────────────────────────────────────────── */
.protos{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,3vw,32px); }

.proto{
  position:relative; display:block; width:100%;
  background: linear-gradient(#e7eaec,#c6cbd0);
  border:2px solid rgba(0,0,0,.6); border-radius:6px;
  box-shadow: 0 9px 0 rgba(0,0,0,.4), 0 20px 38px rgba(0,0,0,.45);
  overflow:hidden;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.proto:hover{ transform: translateY(-7px); box-shadow: 0 15px 0 rgba(0,0,0,.4), 0 28px 50px rgba(0,0,0,.5); }
.proto:active{ transform: translateY(2px); }

.proto__bar{
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  background: linear-gradient(#5a86b8,#2f5e91);
  border-bottom:1px solid rgba(0,0,0,.4);
}
.proto__bar i{ width:9px; height:9px; border-radius:2px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.2); }
.proto__bar i:nth-child(1){ background:#f5cd30 } .proto__bar i:nth-child(2){ background:#4b974b } .proto__bar i:nth-child(3){ background:#c4281c }
.proto__bar em{ margin-left:4px; font-style:normal; font-size:11px; color:#fff; opacity:.95; }

.proto__screen{
  position:relative; display:block; aspect-ratio:16/8.6; background:#05070a; overflow:hidden;
}
.proto__still, .proto__film{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
}
.proto__film{
  background-size: 500% 600%;   /* 5 cols × 6 rows */
  background-position: 0% 0%;
  opacity:0; transition: opacity .22s;
  image-rendering:auto;
}
.proto.ready:hover .proto__film,
.proto.ready:focus-visible .proto__film{
  opacity:1;
  animation: filmX .6s steps(5) infinite, filmY 3.6s steps(6) infinite;
}
@keyframes filmX{ from{ background-position-x:0% } to{ background-position-x:125% } }
@keyframes filmY{ from{ background-position-y:0% } to{ background-position-y:120% } }

.proto__scan{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  opacity:.55;
}
.proto__btn{
  position:absolute; inset:0; margin:auto; width:60px; height:60px;
  background: rgba(8,10,12,.6); border:3px solid #fff; border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  transition: transform .2s, background .2s;
}
.proto__btn::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:0; height:0; border:12px solid transparent; border-left:19px solid #fff;
  transform: translateX(5px);
}
.proto:hover .proto__btn{ transform: scale(1.12); background: var(--c-green); }

.proto__label{
  display:block; padding:12px 14px 14px; background:#dfe3e6;
  border-top:1px solid rgba(0,0,0,.18);
}
.proto__label b{ display:block; font: 900 16px/1.2 var(--display); color:#12171d; letter-spacing:-.01em; }
.proto__label em{ display:block; margin-top:4px; font-style:normal; font-size:11.5px; color:#4d5763; }


/* ── 10. JOBS ──────────────────────────────────────────────── */
.jobs{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px,3vw,30px); align-items:start; }
.job{ position:relative; padding-top:14px; }
.job__studs{
  position:absolute; left:10px; right:10px; top:0; height:16px;
  background-color: var(--t); background-image: var(--studs); background-size:24px 24px;
  border:2px solid rgba(0,0,0,.6); border-bottom:0; border-radius:6px 6px 0 0;
}
.job__inner{
  padding: clamp(18px,2.4vw,26px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0 26%, rgba(0,0,0,.07) 26% 100%),
    color-mix(in srgb, var(--t) 26%, #11151b);
  border:2px solid rgba(0,0,0,.6); border-radius:6px;
  box-shadow: 0 8px 0 rgba(0,0,0,.45), 0 18px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.job__co{
  display:inline-block; font: bold 11px/1 var(--ui); letter-spacing:.22em; text-transform:uppercase;
  padding:6px 11px; border-radius:3px; margin-bottom:12px;
  color:#0d1116; background: color-mix(in srgb, var(--t) 55%, #ffffff);
  border:2px solid rgba(0,0,0,.5); box-shadow:0 3px 0 rgba(0,0,0,.4);
}
.job__title{ font: 900 clamp(19px,2.2vw,24px)/1.15 var(--display); color:#fff; letter-spacing:-.01em; text-shadow:0 2px 0 rgba(0,0,0,.4); }
.job ul{ margin-top:15px; display:grid; gap:10px; }
.job li{
  position:relative; padding-left:22px; font-size:13px; line-height:1.6; color:#d6dee7;
}
.job li::before{
  content:""; position:absolute; left:0; top:6px; width:11px; height:11px; border-radius:2px;
  background: var(--t);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.4);
}
.job b{ color:#fff; }
.job a{ color: color-mix(in srgb, var(--t) 55%, #ffffff); text-decoration: underline; text-underline-offset:3px; }
.job a:hover{ color:#fff; }

.clients{ margin-top: clamp(34px,5vw,54px); text-align:center; }
.clients__label{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:#6d7987; margin-bottom:14px; }
.clients ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.clients li{
  font-size:12px; font-weight:bold; letter-spacing:.05em;
  padding:8px 14px; border-radius:3px; color:#d6dde5;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 0 rgba(0,0,0,.3);
  transition: transform .15s, background .15s, color .15s;
}
.clients li:hover{ transform: translateY(-3px); background: rgba(245,205,48,.16); color:#fff; }


/* ── 11. FINAL WORDS ───────────────────────────────────────── */
.sec--words{ max-width: 980px; }
.words{ position:relative; padding-top:16px; }
.words__studs{
  position:absolute; left:14px; right:14px; top:0; height:18px;
  background-color: var(--c-white); background-image: var(--studs); background-size:26px 26px;
  border:2px solid rgba(0,0,0,.55); border-bottom:0; border-radius:6px 6px 0 0;
}
.words__inner{
  padding: clamp(26px,4vw,44px);
  background: linear-gradient(180deg,#fbfcfc 0 14px, #e9ecee 14px 100%);
  border:2px solid rgba(0,0,0,.55); border-radius:6px;
  box-shadow: 0 9px 0 #a9adb1, 0 20px 40px rgba(0,0,0,.45);
  color: var(--ink);
}
.words h2{
  font: 900 clamp(24px,3.4vw,38px)/1 var(--display);
  letter-spacing:-.02em; text-transform:uppercase; margin-bottom:18px;
  color: var(--c-red);
}
.words p{ font-size:15px; line-height:1.8; }
.words p + p{ margin-top:14px; }
.words b{ color: var(--c-blue); }


/* ── 12. CONTACT ───────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px,2vw,22px); }
.cbrick{
  --t: var(--c-stone);
  position:relative; display:block; width:100%;
  padding: 40px 18px 22px; margin-top:14px;
  text-align:center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) 82%, #fff) 0 24%, var(--t) 24% 100%);
  border:2px solid rgba(0,0,0,.55); border-radius:6px;
  box-shadow: 0 8px 0 rgba(0,0,0,.42), 0 18px 32px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4);
  color:#fff;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, filter .16s;
}
.cbrick__studs{
  position:absolute; left:-2px; right:-2px; top:-14px; height:16px;
  background-color: var(--t); background-image: var(--studs); background-size:24px 24px;
  border:2px solid rgba(0,0,0,.55); border-bottom:0; border-radius:6px 6px 0 0;
}
.cbrick svg{ width:30px; height:30px; fill:#fff; margin:0 auto 12px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.cbrick b{ display:block; font: 900 16px/1.1 var(--display); letter-spacing:-.01em; text-shadow:0 2px 0 rgba(0,0,0,.35); }
.cbrick em{ display:block; margin-top:5px; font-style:normal; font-size:11.5px; opacity:.92; word-break:break-word; }
.cbrick:hover{ transform: translateY(-7px); box-shadow: 0 15px 0 rgba(0,0,0,.42), 0 26px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); filter: brightness(1.06); }
.cbrick:active{ transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.42), 0 8px 16px rgba(0,0,0,.4); }


/* ── 12b. THE R6 NOOB ──────────────────────────────────────────
   A classic default avatar assembled from divs. He falls onto the
   stud strips as you scroll down and jumps to catch up when you
   scroll back. All physics lives in js/main.js.
   ─────────────────────────────────────────────────────────────── */
.noob{
  --u: 12px;                       /* one stud of body scale */
  --yellow:#f5cd30; --blue:#0d69ac; --limb:#a4bd47;
  position:fixed; z-index:420; left:0; top:0;
  width: calc(var(--u) * 4);
  pointer-events:none;
  will-change: transform;
}
.noob[hidden]{ display:none; }
.noob__hit{
  position:absolute; left:-6px; right:-6px; top:-6px; bottom:-6px;
  pointer-events:auto; background:none; border:0;
}
.noob__rig{
  position:relative;
  transform-origin: 50% 100%;
  transition: transform .12s ease-out;
}
.noob.flip .noob__rig{ transform: scaleX(-1); }
.noob.land .noob__rig{ animation: nbLand .26s cubic-bezier(.3,1.5,.5,1); }
@keyframes nbLand{
  0%{ transform: scale(1.16, .8) }
  60%{ transform: scale(.94, 1.06) }
  100%{ transform: none }
}
.noob.flip.land .noob__rig{ animation: nbLandF .26s cubic-bezier(.3,1.5,.5,1); }
@keyframes nbLandF{
  0%{ transform: scale(-1.16, .8) }
  60%{ transform: scale(-.94, 1.06) }
  100%{ transform: scaleX(-1) }
}

/* flat plastic, no shading */
.noob__head, .noob__torso, .noob__arm, .noob__leg{
  border:1.5px solid rgba(0,0,0,.55);
  border-radius:3px;
}

.noob__head{
  position:relative; margin:0 auto;
  width: calc(var(--u) * 1.08); height: calc(var(--u) * 1.26);
  background: var(--yellow);
  border-radius: 3px 3px 4px 4px;
  z-index:3;
}
.noob__face{
  position:absolute; inset:16% 6% 10%;
  background: no-repeat center/contain
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='7' cy='8' rx='2.4' ry='3.6' fill='%23111'/%3E%3Cellipse cx='17' cy='8' rx='2.4' ry='3.6' fill='%23111'/%3E%3Cpath d='M5.6 14.5 Q12 23.5 18.4 14.5' fill='none' stroke='%23111' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.noob__mid{ display:flex; justify-content:center; align-items:flex-start; margin-top:-1.5px; }
.noob__torso{
  width: calc(var(--u) * 2); height: calc(var(--u) * 2);
  background: var(--blue); z-index:2;
}
.noob__arm{
  width: var(--u); height: calc(var(--u) * 2);
  background: var(--yellow);
  transform-origin: 50% 3%;
}
.noob__legs{ display:flex; justify-content:center; margin-top:-1.5px; }
.noob__leg{
  width: var(--u); height: calc(var(--u) * 2);
  background: var(--limb);
  transform-origin: 50% 3%;
}

.noob__shadow{
  position:absolute; left:50%; top:100%;
  width: calc(var(--u) * 3.4); height: calc(var(--u) * .7);
  transform: translate(-50%, -35%) scale(var(--sh, 1));
  background: radial-gradient(ellipse, rgba(0,0,0,.42), rgba(0,0,0,0) 70%);
  opacity: var(--sho, .55);
}

/* ── poses ── */
.noob__arm, .noob__leg{ transition: none; }

/* idle: gentle breathing bob */
.noob.idle .noob__head{ animation: nbBob 2.4s ease-in-out infinite; }
.noob.idle .noob__arm--l{ animation: nbIdleA 2.4s ease-in-out infinite; }
.noob.idle .noob__arm--r{ animation: nbIdleB 2.4s ease-in-out infinite; }
@keyframes nbBob{ 50%{ transform: translateY(1.2px) } }
@keyframes nbIdleA{ 50%{ transform: rotate(3deg) } }
@keyframes nbIdleB{ 50%{ transform: rotate(-3deg) } }

/* no walk cycle: he only ever stands, jumps or falls */

/* airborne: the classic arms-straight-up jump */
.noob.air .noob__arm--l{ transform: rotate(174deg); }
.noob.air .noob__arm--r{ transform: rotate(-174deg); }
.noob.air .noob__leg--l{ transform: rotate(7deg) scaleY(.95); }
.noob.air .noob__leg--r{ transform: rotate(-7deg) scaleY(.95); }

/* poked */
.noob.dead .noob__rig{ animation: nbDead .7s ease-in forwards; }
@keyframes nbDead{
  0%{ transform: none }
  25%{ transform: translateY(-16px) rotate(-18deg) }
  100%{ transform: translateY(90px) rotate(-140deg); opacity:0 }
}

@media (max-width: 760px){ .noob{ display:none !important; } }
@media (prefers-reduced-motion: reduce){ .noob{ display:none !important; } }


/* ── 13. FOOT + HOTBAR ─────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  padding: 30px var(--gut) 118px; text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}
.foot__bar{ font-size:11.5px; color:#6d7987; letter-spacing:.03em; }
.foot__egg{ margin-top:10px; font-size:11px; color:#4e5866; }
.foot kbd{
  display:inline-block; padding:2px 6px; margin:0 1px;
  font: bold 10px/1.4 var(--mono); color:#0d1116;
  background:#c8cfd6; border-radius:3px;
  box-shadow: 0 2px 0 #7d868f;
}

.hotbar{
  position:fixed; z-index:550; left:50%; bottom:12px; transform: translateX(-50%);
  display:flex; gap:4px; padding:4px;
  background: rgba(12,16,21,.6);
  border:1px solid rgba(255,255,255,.14); border-radius:5px;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  opacity:.62;
  transition: opacity .18s;
}
.hotbar:hover{ opacity:1; }
.hotbar a{
  position:relative; display:grid; place-items:center; gap:2px;
  width:50px; padding:5px 3px 4px; border-radius:3px;
  border:1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.05);
  transition: background .14s, transform .14s;
}
.hotbar a::before{
  content: attr(data-k);
  position:absolute; top:1px; left:3px; font-size:8px; color:#8d99a6;
}
.hotbar a i{
  width:16px; height:16px; border-radius:3px; background: var(--t);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.32), 0 2px 0 rgba(0,0,0,.4);
}
.hotbar a em{ font-style:normal; font-size:8px; letter-spacing:.06em; text-transform:uppercase; color:#c3ccd6; }
.hotbar a:hover, .hotbar a.on{ background: rgba(245,205,48,.2); transform: translateY(-2px); }
.hotbar a.on{ opacity:1; }


/* ── 14. LIGHTBOX + TOAST ──────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:8000;
  display:grid; place-items:center; padding: var(--gut);
  background: rgba(4,6,9,.88);
  opacity:0; transition: opacity .22s;
}
.lb[hidden]{ display:none; }
.lb.show{ opacity:1; }
.lb__panel{
  width:min(1180px, 100%);
  background: linear-gradient(#e7eaec,#c6cbd0);
  border:2px solid rgba(0,0,0,.7); border-radius:6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  overflow:hidden;
  transform: scale(.96); transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.lb.show .lb__panel{ transform:none; }
.lb__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px 8px 14px;
  background: linear-gradient(#5a86b8,#2f5e91);
  color:#fff; font-size:12.5px;
}
.lb__x{
  width:26px; height:22px; display:grid; place-items:center;
  font-size:17px; line-height:1; color:#fff;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); border-radius:3px;
}
.lb__x:hover{ background: var(--c-red); }
.lb video{ display:block; width:100%; max-height:76vh; background:#000; }

.toast{
  position:fixed; z-index:8500; left:50%; bottom:96px; transform: translate(-50%, 14px);
  padding:11px 18px; border-radius:4px;
  background: var(--c-green); color:#fff;
  font-size:13px; font-weight:bold;
  border:2px solid rgba(0,0,0,.5);
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 14px 28px rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition: opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }


/* ── 15. REVEAL + SHAKE ────────────────────────────────────── */
.rv{ opacity:0; transform: translateY(26px); }
.rv.in{ opacity:1; transform:none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
.rv.in:nth-child(2n){ transition-delay:.07s; }

body.shake{ animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{ transform: translate3d(-2px,0,0) }
  20%,80%{ transform: translate3d(4px,0,0) }
  30%,50%,70%{ transform: translate3d(-7px,0,0) }
  40%,60%{ transform: translate3d(7px,0,0) }
}


/* ── 16. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1080px){
  .hero__grid{ grid-template-columns: 1fr; gap:34px; }
  .hero{ padding-top:120px; }
  .chat{ position:static; max-width:100%; margin-bottom:22px; }
  .places, .protos{ grid-template-columns: 1fr; }
  .place--wide{ grid-column:auto; }
  .jobs{ grid-template-columns: 1fr; }
  .contact{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tally{ grid-template-columns: repeat(3,1fr); }
  .tally li:nth-child(4){ grid-column: 1 / 2; }
  .tally li:nth-child(5){ grid-column: 2 / 4; }
}
@media (max-width: 900px){
  .menubar__burger{ display:block; }
  .menubar__panel{
    position:absolute; top:100%; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    width:min(268px, 76vw);
    padding:6px;
    background: linear-gradient(#f4f4f4,#e4e4e4);
    border:1px solid #7d7d7d; border-top:0; border-radius:0 0 0 5px;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    transform: translateY(-8px); opacity:0; visibility:hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s;
  }
  .menubar__panel.open{ transform:none; opacity:1; visibility:visible; }
  .menubar__nav{ flex-direction:column; gap:1px; }
  .menubar__nav a{ padding:10px 12px; font-size:13px; }
  .menubar__right{ margin-top:6px; padding-top:8px; border-top:1px solid #bcbcbc; gap:6px; }
  .menubar__right > *{ flex:1; text-align:center; }
  .hotbar{ display:none; }
  .foot{ padding-bottom: 46px; }
}
@media (max-width: 680px){
  .place__inner{ grid-template-columns: 1fr; }
  .place__thumb img,
  .place--wide .place__thumb img{ width:100%; max-width:172px; }
  .tally{ grid-template-columns: repeat(2,1fr); }
  .tally li:nth-child(5){ grid-column: 1 / -1; }
  .contact{ grid-template-columns: 1fr; }
  .figs li,
  .place--wide .figs li{ flex:1 1 76px; }
  .place--wide .figs{ max-width:none; }
  .wordmark__brick{ width: 17vw; height: 19vw; }
}
@media (max-width: 420px){
  .roles span{ font-size:10px; padding:5px 8px; }
}


/* ── 17. MOTION / PRINT ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .world__clouds{ animation:none; }
}

@media print{
  .world, .menubar, .plist, .hotbar, #loader, .lb, .toast, .scrollhint{ display:none !important; }
  body{ background:#fff; color:#000; }
  .sec{ padding: 20px 0; }
}