/* Pixelghetto — shared styles. Tokens and rules are documented in BRAND.md. */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/fonts/space-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#fbf4e6;--paper-2:#f3e8d2;--ink:#221e1b;--cocoa:#6b6159;--line:#d9ccb4;
  --tomato:#ee4b2b;--tomato-deep:#b8321c;--tomato-light:#ffab94;--lime:#d8f35d;--butter:#ffd45c;--blush:#f9c9b6;
  --sans:"Bricolage Grotesque",ui-rounded,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --radius:18px;--shadow:6px 6px 0 var(--ink);--gutter:max(20px,5vw);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--tomato);outline-offset:4px;border-radius:6px}
::selection{background:var(--lime);color:var(--ink)}
h1,h2,h3{margin:0;font-weight:800;line-height:.95;letter-spacing:-.035em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:min(1280px,100% - 2*var(--gutter));margin-inline:auto}
.mono{font:400 13px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:12px;z-index:9;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pixel heart */
.heart{width:1em;height:auto;aspect-ratio:7/6;color:var(--tomato);--shine:var(--tomato-light);shape-rendering:crispEdges;flex-shrink:0}
.beat{animation:beat 1.6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes beat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.14)}20%{transform:scale(.96)}30%{transform:scale(1.08)}}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0}
.logo{display:inline-flex;align-items:center;gap:.42em;font-weight:800;font-size:23px;letter-spacing:-.02em;text-decoration:none;line-height:1}
.logo .heart{width:1.02em}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav a{text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:600;font-size:16px}
.site-nav a:hover{background:var(--paper-2)}
.site-nav .nav-play{background:var(--ink);color:var(--paper);padding:9px 16px}
.site-nav .nav-play:hover{background:var(--tomato);color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:700 18px/1 var(--sans);letter-spacing:-.01em;padding:17px 24px;border:2px solid var(--ink);border-radius:999px;background:var(--lime);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--paper-2);box-shadow:none;transform:none}
.btn .i{width:16px;height:16px}
.i{flex-shrink:0}

/* Stickers */
.sticker{display:inline-grid;place-items:center;text-align:center;border:2px solid var(--ink);background:var(--butter);color:var(--ink);font:700 15px/1.05 var(--mono);text-transform:uppercase;letter-spacing:.02em;box-shadow:3px 3px 0 var(--ink)}
.sticker-round{width:150px;aspect-ratio:1;border-radius:50%;padding:18px;transform:rotate(-12deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.sticker-round:hover{transform:rotate(4deg) scale(1.05)}
.sticker-round::before{content:"";position:absolute;inset:7px;border:1.5px dashed var(--ink);border-radius:50%}
.sticker-round{position:relative}
.sticker-round b{display:block;font:800 40px/.9 var(--sans);letter-spacing:-.04em}
.sticker-tag{padding:7px 12px 6px;border-radius:8px;font-size:13px;transform:rotate(-3deg)}

/* Hero */
.hero{position:relative;padding:56px 0 72px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;color:var(--cocoa)}
.eyebrow .heart{font-size:14px}
.hero h1{font-size:clamp(46px,12.2vw,176px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase}
.hero h1 .accent{color:var(--tomato);display:inline-flex;align-items:center;gap:.12em}
.hero h1 .heart{width:.62em;margin-bottom:.06em}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-top:44px}
.lede{font-size:clamp(20px,2.2vw,27px);line-height:1.38;letter-spacing:-.015em;max-width:37ch}
.lede strong{font-weight:700;background:linear-gradient(transparent 62%,var(--lime) 62%,var(--lime) 92%,transparent 92%)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero .sticker-round{position:absolute;right:2%;top:58px}

/* Marquee */
.marquee{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track,.marquee:has(.marquee-toggle:checked) .marquee-track{animation-play-state:paused}
.marquee-pause{position:absolute;z-index:1;top:0;right:0;bottom:0;display:grid;place-items:center;width:58px;background:var(--ink);border-left:2px solid #4a433d;color:var(--paper);cursor:pointer}
.marquee-pause:hover{color:var(--lime)}
.marquee-pause .i{width:16px;height:16px}
.marquee-pause .i-play,.marquee-toggle:checked+.marquee-pause .i-pause{display:none}
.marquee-toggle:checked+.marquee-pause .i-play{display:block}
.marquee-toggle:focus-visible+.marquee-pause{outline:3px solid var(--lime);outline-offset:-5px}
.marquee ul{display:flex;margin:0;padding:0;list-style:none}
.marquee li{display:flex;align-items:center;gap:26px;padding:17px 0 17px 26px;font:700 clamp(17px,1.8vw,22px)/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.marquee .heart{font-size:15px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Section heads */
.section{padding:96px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.section-head .mono{color:var(--cocoa);margin-bottom:14px}
.section-head h2{font-size:clamp(38px,5.4vw,72px)}

/* Game card */
.game{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.game-art{position:relative;min-height:520px;background:#141414}
.game-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#141414d9)}
.game-art .sticker-tag{position:absolute;top:22px;left:22px;z-index:1}
.game-caption{position:absolute;z-index:1;left:26px;right:26px;bottom:22px;color:#e9e6dc}
.game-info{display:flex;flex-direction:column;gap:22px;padding:38px}
.game-info .tag{color:var(--lime)}
.game-info h3{font-size:clamp(46px,5.4vw,76px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase}
.game-info p{color:#d9d4c7;font-size:17px;max-width:38ch}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font:400 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.03em}
.facts dt{color:#a39d90}.facts dd{margin:0}
.game .btn{width:100%;justify-content:space-between;box-shadow:4px 4px 0 var(--lime);border-color:var(--lime)}
.game .btn:hover{box-shadow:6px 6px 0 var(--lime)}
.game .btn:active{box-shadow:0 0 0 var(--lime)}
.device-note{display:none;color:#b8b2a5;font-size:14px;margin-top:-8px}
.receipt{margin-top:auto;background:var(--paper);color:var(--ink);border-radius:6px;padding:18px 20px 20px;font:400 13px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.02em;transform:rotate(-1.2deg);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,#0000 98%,#000) 0 0/16px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,#0000 98%,#000) 0 0/16px 100% repeat-x;padding-bottom:26px}
.receipt-head{display:flex;justify-content:space-between;color:var(--cocoa);border-bottom:1.5px dashed var(--ink);padding-bottom:8px;margin-bottom:8px}
.receipt ul{list-style:none;margin:0;padding:0}
.receipt li{display:flex;gap:10px}
.receipt li span:first-child{flex:1;overflow:hidden;white-space:nowrap}
.receipt li span:first-child::after{content:" ........................................................................"}
.receipt .total{border-top:1.5px dashed var(--ink);margin-top:8px;padding-top:8px;font-weight:700;font-size:16px}
.receipt .total span:first-child::after{content:none}
.receipt .thanks{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;color:var(--cocoa)}

/* Next-up teaser */
.next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;margin-top:30px;padding:28px 32px;border:2px dashed var(--ink);border-radius:var(--radius);background:var(--paper-2)}
.next h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;margin:6px 0 8px}
.next p{color:var(--cocoa);max-width:58ch}
.next .mono{color:var(--cocoa)}
.doodle{width:86px;height:86px;color:var(--ink);transform:rotate(-6deg)}

/* Note from the maker */
.note{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
.note .mono{color:var(--cocoa)}
.note h2{font-size:clamp(46px,6.6vw,96px);letter-spacing:-.045em;margin:16px 0 34px}
.note h2 span{color:var(--tomato)}
.signed{display:flex;align-items:center;gap:14px}
.avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--blush);border:2px solid var(--ink);font:800 22px/1 var(--sans)}
.signed strong{display:block;font-size:19px;line-height:1.2}
.signed span{color:var(--cocoa);font-size:15px}
.letter p+p{margin-top:20px}
.letter p{font-size:19px;line-height:1.65;max-width:58ch}
.letter .big{font-size:clamp(25px,2.5vw,32px);line-height:1.3;letter-spacing:-.02em;font-weight:600}

/* Promises */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.promise{border:2px solid var(--ink);border-radius:var(--radius);padding:28px 28px 32px;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.promise:nth-child(1){background:var(--lime);transform:rotate(-1.2deg)}
.promise:nth-child(2){background:var(--butter);transform:rotate(.8deg)}
.promise:nth-child(3){background:var(--blush);transform:rotate(-.6deg)}
.promise:hover{transform:rotate(0) translateY(-4px)}
.promise .num{font:800 64px/.8 var(--sans);letter-spacing:-.05em}
.promise h3{font-size:30px;letter-spacing:-.03em;margin:26px 0 10px}
.promise p{font-size:17px;line-height:1.55}

/* Closing */
.closing{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:56px clamp(28px,5vw,64px);background:var(--tomato);border:2px solid var(--ink);border-radius:calc(var(--radius) + 8px);box-shadow:var(--shadow)}
.closing h2{font-size:clamp(42px,6vw,88px);text-transform:uppercase;letter-spacing:-.045em;line-height:.88;color:var(--ink)}
.closing h2 span{color:var(--paper)}
.closing .btn{flex-shrink:0;background:var(--paper)}
.closing .heart{position:absolute;color:var(--ink);--shine:var(--tomato);opacity:.14;pointer-events:none}
.closing .h1{width:180px;right:30%;top:-50px;transform:rotate(14deg)}
.closing .h2{width:90px;right:6%;bottom:-24px;transform:rotate(-10deg)}

/* Footer */
.site-footer{margin-top:96px;border-top:2px solid var(--ink);padding:30px 0 40px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.site-footer p{color:var(--cocoa);font-size:15px;display:inline-flex;align-items:center;gap:7px}
.site-footer p .heart{font-size:13px}
.site-footer nav{display:flex;gap:20px;font-size:15px;font-weight:600}
.site-footer small{display:block;grid-column:1/-1;color:var(--cocoa)}

/* Responsive */
@media (max-width:1300px){
  .hero{padding-bottom:84px}
  .hero .sticker-round{top:auto;right:64px;bottom:-52px;z-index:2;width:116px;padding:12px;font-size:12px}
  .hero .sticker-round b{font-size:31px}
}
@media (max-width:980px){
  .hero-foot{grid-template-columns:1fr}
  .game{grid-template-columns:minmax(0,1fr)}
  .game-art{min-height:0;aspect-ratio:16/10}
  .note{grid-template-columns:1fr;gap:20px}
  .note h2{margin-bottom:24px}
  .promise{padding:22px 20px 26px}
  .promise h3{font-size:24px}
  .site-footer{grid-template-columns:1fr auto}
  .site-footer p{grid-row:2;grid-column:1/-1}
  .closing{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  body{font-size:17px}
  .site-nav a:not(.nav-play){display:none}
  .hero{padding:30px 0 84px}
  .eyebrow{font-size:12px;letter-spacing:.02em}
  .section{padding:68px 0}
  .section-head{display:block}
  .game-info{padding:26px 22px 28px}
  .device-note{display:block}
  .next{grid-template-columns:1fr;gap:16px;padding:24px}
  .next .btn{justify-self:start}
  .doodle{width:64px;height:64px}
  .promises{grid-template-columns:1fr;max-width:520px}
  .site-footer{grid-template-columns:1fr;gap:16px;margin-top:68px}
  .site-footer p{grid-row:auto}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee{overflow-x:auto;scrollbar-width:none}
  .marquee ul[aria-hidden]{display:none}
  .marquee ul{padding-right:26px}
  .marquee-pause,.marquee-toggle{display:none}
}

/* Brand kit page */
.kit-hero{padding:48px 0 30px}
.kit-hero h1{font-size:clamp(52px,9vw,128px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase}
.kit-hero h1 span{color:var(--tomato)}
.kit-hero .lede{margin-top:26px;max-width:44ch}
.kit-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.kit-nav a{border:2px solid var(--ink);border-radius:999px;padding:7px 14px;text-decoration:none;font-weight:600;font-size:15px}
.kit-nav a:hover{background:var(--lime)}
.kit-section{padding:72px 0 0}
.kit-section>.mono{color:var(--cocoa)}
.kit-section h2{font-size:clamp(36px,4.6vw,60px);margin:12px 0 14px}
.kit-section>p{color:var(--cocoa);max-width:62ch;margin-bottom:28px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.tile-art{display:grid;place-items:center;aspect-ratio:16/10;padding:12%}
.tile-art img{width:100%;height:auto}
.tile-art.mark img{width:34%}
.tile-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:2px solid var(--ink);padding:14px 16px;font-size:15px;font-weight:600}
.tile-meta a{font:700 13px/1 var(--mono);text-transform:uppercase}
.on-paper{background:var(--paper)}.on-ink{background:var(--ink)}.on-lime{background:var(--lime)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.rules div{border:2px solid var(--ink);border-radius:var(--radius);padding:22px 24px}
.rules h3{font-size:22px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.rules ul{margin:0;padding-left:20px;color:var(--ink)}
.rules li+li{margin-top:6px}
.rules .do{background:#eef8c4}.rules .dont{background:#fde3d9}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.swatch{border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.swatch .chip{height:130px;border-bottom:2px solid var(--ink)}
.swatch div:last-child{padding:14px 16px 16px}
.swatch strong{display:block;font-size:20px;letter-spacing:-.02em}
.swatch code{font:700 14px/1.6 var(--mono)}
.swatch p{color:var(--cocoa);font-size:15px;line-height:1.45;margin-top:4px}
.specimens{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
.specimen{border:2px solid var(--ink);border-radius:var(--radius);padding:28px}
.specimen .big{font-size:clamp(48px,6vw,84px);font-weight:800;line-height:.9;letter-spacing:-.045em;margin:18px 0}
.specimen .mono-big{font:700 clamp(22px,2.4vw,30px)/1.25 var(--mono);text-transform:uppercase;margin:18px 0}
.specimen p.meta{color:var(--cocoa);font-size:15px}
.voice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.voice div{border:2px solid var(--ink);border-radius:var(--radius);padding:24px}
.voice h3{font-size:24px;margin-bottom:14px}
.voice ul{list-style:none;margin:0;padding:0}
.voice li{padding:10px 0;border-top:1.5px dashed var(--line)}
.voice li:first-child{border-top:0}
.boiler{display:grid;gap:16px}
.boiler blockquote{margin:0;border:2px solid var(--ink);border-radius:var(--radius);padding:24px 26px;background:var(--paper-2);box-shadow:var(--shadow)}
.boiler .mono{color:var(--cocoa);display:block;margin-bottom:10px}
@media (max-width:980px){.tiles{grid-template-columns:1fr 1fr}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.specimens,.voice,.rules{grid-template-columns:1fr}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* 404 */
.lost{min-height:70vh;display:grid;align-content:center;justify-items:start;gap:26px;padding:40px 0 20px}
.lost .heart{width:120px}
.lost h1{font-size:clamp(52px,9vw,124px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase}
.lost h1 span{color:var(--tomato)}
.lost p{font-size:clamp(19px,2vw,24px);max-width:34ch}