/* ==========================================================================
   Who Dealt It? — who-dealt-it.rbytes.ro
   Ported from the Claude Design project (Homepage.dc.html / Privacy Policy Web.dc.html).
   The design's inline styles are collected into classes here; values are
   unchanged so the rendering matches the source document.
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  background: #07060f;
}

a { color: #39ff88; text-decoration: none; }
a:hover { color: #b6ffd2; }

img, svg { max-width: 100%; }

/* --- Palette ------------------------------------------------------------ */
:root {
  --green:  #39ff88;
  --green-2:#b6ffd2;
  --pink:   #ff8fd0;
  --gold:   #ffe7a3;
  --lilac:  #c9b6ff;
  --mauve:  #a99fd0;
  --violet: #7d72ad;
  --indigo: #6e7cff;
  --red:    #ff4d6d;
  --panel:  #150f30;
  --edge:   #2c2350;
  --ink:    #15101f;
}

/* --- Animations --------------------------------------------------------- */
@keyframes wdiTwinkle   { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes wdiBtn       { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes wdiFloat     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes wdiGoldPulse { 0%,100%{box-shadow:0 0 14px rgba(255,215,0,.25)} 50%{box-shadow:0 0 34px rgba(255,224,80,.6)} }
@keyframes wdiDemoPulseG{ 0%,100%{box-shadow:inset 0 0 0 4px #39ff88} 50%{box-shadow:inset 0 0 0 7px #b6ffd2} }
@keyframes wdiDemoPulseR{ 0%,100%{box-shadow:inset 0 0 0 4px #ff4d6d} 50%{box-shadow:inset 0 0 0 7px #ff97ad} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   App icon — a faithful CSS/SVG port of App Icon v2.dc.html.
   Authored at the design's 256px base and scaled with transform, exactly the
   way the source document renders its on-device previews.
   Usage: <span class="appicon" style="--sz:110;--radius:25px">…</span>
   `--sz` is a unitless pixel count.
   ========================================================================== */
.appicon {
  position: relative;
  flex: none;
  width: calc(var(--sz) * 1px);
  height: calc(var(--sz) * 1px);
  border-radius: var(--radius, 22.37%);
  overflow: hidden;
}
.appicon__scale {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 256px;
  height: 256px;
  transform: scale(calc(var(--sz) / 256));
  transform-origin: 0 0;
}
.appicon__face {
  /* display:block matters: these are spans, and width/height are ignored on
     inline boxes, which collapses the 256px design canvas to nothing. */
  display: block;
  position: relative;
  width: 256px;
  height: 256px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 18%, #f7ead0 0%, #eed9ae 55%, #dfc48f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12);
}
/* Magnifier handle, pivoting out of the lens at 40°. */
.appicon__handle {
  position: absolute;
  left: 155px; top: 146px;
  width: 99px; height: 30px;
  border-radius: 15px;
  background: linear-gradient(180deg, #f0b078 0%, #c97a3a 45%, #7a3c1e 100%);
  transform: rotate(40deg);
  transform-origin: 0 50%;
  box-shadow: 0 3px 5px rgba(0,0,0,.45);
}
.appicon__grip {
  position: absolute;
  right: -2px; top: -2px;
  width: 26px; height: 34px;
  border-radius: 14px;
  background: linear-gradient(180deg, #4a3a5e, #241d2a);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25);
}
.appicon__shine {
  position: absolute;
  left: 7px; top: 4px;
  width: 56px; height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.55);
}
/* Lens: brass rim, dark bezel, green glass. */
.appicon__lens {
  position: absolute;
  left: 23px; top: 28px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #7a3c1e, #e8a05a 80deg, #ffd2a0 120deg, #c97a3a 200deg, #6b3418 280deg, #7a3c1e);
  box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 44px rgba(201,122,58,.3);
}
.appicon__bezel {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(150deg, #5a2f14, #3a1e0c);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
.appicon__glass {
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 26%, rgba(142,244,184,.36) 0%, rgba(46,179,104,.12) 34%, rgba(8,30,18,.94) 100%);
  box-shadow: inset 0 0 28px rgba(0,0,0,.6), inset 0 0 40px rgba(46,179,104,.22);
}
.appicon__cloud {
  position: absolute;
  left: 8%; top: 10%;
  width: 84%; height: 84%;
  filter: drop-shadow(0 0 10px rgba(46,179,104,.75));
}
.appicon__hi1 {
  position: absolute;
  left: 20px; top: 14px;
  width: 54px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.05));
  transform: rotate(-28deg);
  filter: blur(.5px);
}
.appicon__hi2 {
  position: absolute;
  right: 16px; bottom: 18px;
  width: 20px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transform: rotate(-28deg);
  filter: blur(.5px);
}

/* Hidden sprite sheet holding the FART! cloud symbol. */
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Page shell
   ========================================================================== */
.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #2a1b5e 0%, #160f3a 38%, #0b0824 70%, #07060f 100%);
  font-family: 'Press Start 2P', monospace;
  color: #fff;
}

.star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  animation: wdiTwinkle 2.6s infinite;
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vw, 96px);
}

/* CRT scanlines laid over everything. */
.scanlines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.1) 2px 4px);
  mix-blend-mode: multiply;
}

/* --- Top bar ------------------------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__name {
  font-size: 10px;
  color: var(--green);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(57,255,136,.6);
}
.topbar__studio {
  display: flex;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255,231,163,.4);
}
.topbar__studio:hover { color: #fff3d0; }
.topbar__studio b {
  font-weight: inherit;
  color: var(--green);
  text-shadow: 0 0 8px rgba(57,255,136,.6);
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding-top: 12px;
}
.hero .appicon {
  animation: wdiFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(134,219,82,.45));
}
.hero__title {
  margin: 0;
  font-size: clamp(26px, 8.5vw, 52px);
  line-height: 1.3;
  font-weight: normal;
  color: var(--green);
  text-shadow: 0 0 6px #39ff88, 0 0 24px rgba(57,255,136,.6), 6px 6px 0 #0b6b38;
}
.hero__tag { font-size: 11px; color: var(--pink); letter-spacing: 2px; }
.hero__copy {
  font-size: 9px;
  line-height: 2.1;
  color: var(--lilac);
  max-width: min(560px, 92vw);
  text-wrap: pretty;
}
.hero__copy em { font-style: normal; color: #fff; }
.hero__copy strong { font-weight: normal; color: var(--green); }

/* --- Buttons ------------------------------------------------------------ */
.cta {
  display: inline-block;
  font-size: clamp(10px, 3vw, 14px);
  color: #063a1c;
  background: var(--green);
  border-radius: 3px;
  padding: 18px clamp(18px, 5vw, 34px);
  text-align: center;
  letter-spacing: 1px;
  box-shadow: 0 6px 0 #1f9e57, 0 0 24px rgba(57,255,136,.5);
  animation: wdiBtn 1.4s ease-in-out infinite;
  margin-top: 8px;
}
a.cta:hover { color: #063a1c; background: #6effb0; }
/* Not a link until the App Store listing exists — see the note in index.html. */
.cta--soon { cursor: default; }
.cta--sm {
  font-size: 12px;
  padding: 15px 26px;
  box-shadow: 0 5px 0 #1f9e57, 0 0 18px rgba(57,255,136,.5);
  animation: none;
}

/* --- Generic section furniture ------------------------------------------ */
.section { display: flex; flex-direction: column; gap: 20px; }
.section--wide { gap: 24px; }
.section__label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-align: center;
  color: var(--green);
}
.section__label--pink   { color: var(--pink); }
.section__label--gold   { color: var(--gold); }
.section__label--indigo { color: var(--indigo); }
.section__label--lilac  { color: var(--lilac); }
.section__note {
  font-size: 8px;
  color: var(--violet);
  text-align: center;
  letter-spacing: 1px;
  line-height: 2;
}

/* ==========================================================================
   Live play zone — the apartments stage, rendered by demo.js + faces.js
   ========================================================================== */
.building {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 0 8px;
  background: linear-gradient(#4a4150, #39313f);
  border: 4px solid var(--ink);
  border-radius: 4px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.07);
}
.building__sign {
  position: relative;
  height: 36px;
  background: repeating-linear-gradient(90deg, #2a2330 0 10px, #241d2a 10px 20px);
  border-bottom: 4px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.building__sign::before,
.building__sign::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 8px; height: 10px;
  background: var(--ink);
}
.building__sign::before { left: 14px; }
.building__sign::after  { right: 14px; }
.building__sign span {
  font-size: 9px;
  color: var(--pink);
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(255,143,208,.9);
}
.building__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 9px 9px 4px;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.07) 2px 4px);
}

.window {
  position: relative;
  aspect-ratio: 1 / 1.18;
  background: linear-gradient(#574b5e, #3f3646);
  border: 2px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.06);
  transition: transform .08s ease;
}
.window:hover { transform: translateY(-2px); filter: brightness(1.07); }
.window:active { transform: scale(.96); }
.window:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.window__pane {
  position: absolute;
  left: 13%; right: 13%; top: 6%; bottom: 11%;
  background: linear-gradient(#ffe7a3, #f2c75a);
  border: 2px solid #2a2030;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 10px rgba(255,200,90,.7), inset 0 -8px 10px rgba(180,120,20,.35);
}
.window__mullion {
  position: absolute;
  left: 50%; top: 6%; bottom: 11%;
  width: 2px;
  background: rgba(80,50,20,.45);
  transform: translateX(-1px);
}
.window__face {
  position: absolute;
  left: 15%; bottom: 14%;
  width: 70%;
  aspect-ratio: 8 / 9;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
/* Radiator + sill assembly across the bottom of each window. */
.window__sill {
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  height: 32%;
  z-index: 6;
  pointer-events: none;
}
.window__rail {
  position: absolute;
  top: 0; left: 6%; right: 6%;
  height: 4px;
  background: linear-gradient(#aeb6c4, #7f8798);
  border-radius: 2px;
  box-shadow: 0 1px 0 #4a4f5c;
}
.window__bars {
  position: absolute;
  top: 4px; bottom: 34%; left: 6%; right: 6%;
  background: repeating-linear-gradient(90deg, #8b93a3 0 2px, transparent 2px 9px);
  opacity: .92;
}
.window__ledge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 34%;
  background: linear-gradient(#6d6478, #4a4150);
  border-top: 2px solid #968aa3;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.4);
}
.window__name {
  position: absolute;
  top: 3%; left: 2%; right: 2%;
  z-index: 7;
  text-align: center;
  font-size: 6px;
  line-height: 1.3;
  color: #fff;
  letter-spacing: .5px;
  pointer-events: none;
  text-shadow: 1px 1px 0 #15101f, -1px 1px 0 #15101f, 1px -1px 0 #15101f, -1px -1px 0 #15101f, 0 0 6px rgba(0,0,0,.8);
}
.window__verdict {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.window__verdict[hidden] { display: none; }
.window__verdict span {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  font-size: 7px;
  padding: 3px 0;
  letter-spacing: .5px;
}
.window__verdict--busted { animation: wdiDemoPulseG .5s infinite; }
.window__verdict--busted span { background: var(--green); color: #063a1c; }
.window__verdict--wrong { animation: wdiDemoPulseR .5s infinite; }
.window__verdict--wrong span { background: var(--red); color: #3a0010; }

.demo__msg {
  font-size: 8px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 1px;
  line-height: 2;
  min-height: 14px;
}

/* ==========================================================================
   Pocket & wrist
   ========================================================================== */
.devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(28px, 6vw, 56px);
  flex-wrap: wrap;
}
.device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.device__label { font-size: 9px; color: #fff; letter-spacing: 1px; }
.device__copy {
  font-size: 8px;
  line-height: 2;
  color: var(--mauve);
  text-align: center;
}

.phone {
  width: 150px; height: 300px;
  padding: 10px;
  background: #0d0a20;
  border: 3px solid var(--edge);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 24px rgba(110,124,255,.25);
}
.phone__notch {
  width: 44px; height: 8px;
  margin: 0 auto 8px;
  background: var(--edge);
  border-radius: 4px;
}
.phone__screen {
  flex: 1;
  border-radius: 10px;
  background: radial-gradient(120% 60% at 50% 0%, #2a1b5e 0%, #160f3a 60%, #0b0824 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.phone__screen span {
  font-size: 8px;
  line-height: 1.6;
  text-align: center;
  color: var(--green);
  text-shadow: 0 0 6px rgba(57,255,136,.6);
}

.watch { display: flex; flex-direction: column; align-items: center; }
.watch__band {
  width: 44px; height: 22px;
  background: #1a1436;
  border: 3px solid var(--edge);
}
.watch__band--top    { border-bottom: none; border-radius: 8px 8px 0 0; }
.watch__band--bottom { border-top: none;    border-radius: 0 0 8px 8px; }
.watch__body {
  width: 130px; height: 150px;
  padding: 10px;
  background: #0d0a20;
  border: 3px solid var(--edge);
  border-radius: 32px;
  display: flex;
  box-shadow: 0 0 24px rgba(255,143,208,.2);
}
.watch__screen {
  flex: 1;
  border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, #2a1b5e 0%, #160f3a 70%, #0b0824 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.watch__screen span { font-size: 7px; color: var(--pink); letter-spacing: 1px; }

/* ==========================================================================
   How it works / stages / feature cards
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}
.grid--tight { gap: 10px; }
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
}

.step {
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 3px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.step__n { font-size: 22px; color: var(--gold); }
.step__t { font-size: 9px; color: #fff; letter-spacing: 1px; }
.step__c { font-size: 8px; line-height: 2; color: var(--mauve); }

.stage {
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: center;
}
.stage__n {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--sign);
  text-shadow: 0 0 8px rgba(0,0,0,.4);
}
.stage__c { font-size: 7px; color: rgba(255,255,255,.65); letter-spacing: .5px; }

.card {
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 3px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card--gold {
  border-color: #8a6400;
  animation: wdiGoldPulse 2.4s ease-in-out infinite;
}
.card__h { font-size: 11px; letter-spacing: 1.5px; color: var(--green); }
.card__c { font-size: 8px; line-height: 2; color: var(--mauve); }
.card__c strong { font-weight: normal; color: var(--green); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-size: 10px;
  border-radius: 3px;
  padding: 10px 14px;
}
.chip--note { font-size: 12px; padding: 10px 12px; }
.chip--green  { color: #063a1c; background: #39ff88; box-shadow: 0 4px 0 #1f9e57; }
.chip--orange { color: #3a0e00; background: #f2603c; box-shadow: 0 4px 0 #a13a1a; }
.chip--yellow { color: #3a2a00; background: #ffe86e; box-shadow: 0 4px 0 #a1820e; }

.toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  max-width: 240px;
  background: #120d28;
  border: 2px solid var(--edge);
  border-radius: 3px;
}
.toggle span {
  flex: 1;
  text-align: center;
  font-size: 9px;
  padding: 9px 0;
  color: #5a5078;
}
.toggle .is-on {
  color: #07060f;
  background: var(--red);
  border-radius: 2px;
}

/* Achievement badges.
   The artwork lives in assets/achievements/<id>.png (1024px masters exported
   from the design project). Until those files are dropped in, the styled disc
   underneath stands in rather than showing a broken image. */
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: none;
  background-color: #241a4a;
  background-image: radial-gradient(circle at 34% 28%, #4a3a7e 0%, #241a4a 60%, #150d33 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201,182,255,.25);
  image-rendering: pixelated;
}

/* Leaderboard artwork — a CSS port of Leaderboard Image.dc.html, authored at
   its native 1024px and scaled down the way the design does. */
.lb {
  position: relative;
  width: 120px; height: 120px;
  border: 2px solid var(--edge);
  border-radius: 3px;
  overflow: hidden;
  background: #07061a;
}
.lb__scale {
  position: absolute;
  top: 0; left: 0;
  width: 1024px; height: 1024px;
  transform: scale(0.11328125); /* (120 - 2*2) / 1024 */
  transform-origin: 0 0;
  background: #07061a;
}
.lb__bg {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 8%, #3a2478 0%, #1b1148 42%, #0e0a2c 76%, #07061a 100%);
}
.lb__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 2px, rgba(0,0,0,0) 2px 6px);
}
.lb__glow {
  position: absolute;
  left: 50%; top: 410px;
  width: 1180px; height: 1180px;
  margin-left: -590px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,136,.20) 0%, rgba(57,255,136,.06) 40%, rgba(57,255,136,0) 68%);
}
.lb__head {
  position: absolute;
  left: 0; right: 0; top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.lb__kicker { font-size: 20px; letter-spacing: 8px; color: var(--green); text-shadow: 0 0 18px rgba(57,255,136,.7); }
.lb__title {
  font-size: 78px;
  line-height: 1;
  color: #ffe86e;
  -webkit-text-stroke: 14px #150d33;
  paint-order: stroke;
  text-shadow: 0 10px 0 rgba(0,0,0,.45);
}
.lb__podium {
  position: absolute;
  left: 0; right: 0; bottom: 130px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
}
.lb__col { display: flex; flex-direction: column; align-items: center; }
.lb__block {
  border: 10px solid #150d33;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}
.lb__block--1 {
  width: 270px; height: 296px;
  background: linear-gradient(180deg, #fff3a8 0%, #ffe86e 45%, #d9a92c 100%);
  box-shadow: inset 0 10px 0 rgba(255,255,255,.5);
}
.lb__block--2 {
  width: 236px; height: 196px;
  background: linear-gradient(180deg, #c9c2e8 0%, #8f86bf 55%, #5f5590 100%);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.35);
  color: #2a2050;
}
.lb__block--3 {
  width: 236px; height: 150px;
  background: linear-gradient(180deg, #f0b078 0%, #c97a3a 55%, #8a4a1e 100%);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.3);
  color: #3d1c08;
}
.lb__cloud {
  position: relative;
  z-index: 2;
  margin-bottom: -60px;
  width: 340px; height: 340px;
  display: block;
  filter: drop-shadow(0 0 26px rgba(57,255,136,.55));
}
.lb__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  background: #150d33;
  border-top: 10px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb__foot span { font-size: 26px; letter-spacing: 6px; color: var(--green); }

/* ==========================================================================
   FAQ
   The one block on this page set in sentence case. Press Start 2P is a display
   face — unreadable at paragraph length — so the answers use a plain system
   stack while the questions stay arcade to hold the page together.
   ========================================================================== */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 14px;
}
.faq__item {
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 3px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__q {
  margin: 0;
  font-size: 10px;
  font-weight: normal;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--green);
}
.faq__a {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: .1px;
  color: var(--mauve);
}

/* --- Closing + footer --------------------------------------------------- */
.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding-bottom: 80px;
}
.outro__line {
  font-size: 16px;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,231,163,.4);
}
.outro__line strong { font-weight: normal; color: var(--green); }
.colophon {
  font-size: 7px;
  color: #5a5078;
  letter-spacing: 1px;
}
.colophon--gap { margin-top: 12px; }
.colophon a { color: #5a5078; text-decoration: underline; }
.colophon a:hover { color: var(--green-2); }

/* ==========================================================================
   Privacy policy page
   ========================================================================== */
.doc {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(90% 60% at 50% 0%, #2a1b5e 0%, #160f3a 38%, #0b0824 70%, #07060f 100%);
  color: #fff;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.doc a:hover { text-decoration: underline; }
.doc__wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 96px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.doc__head { display: flex; flex-direction: column; gap: 18px; }
.doc__back {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--pink);
}
.doc__back:hover { color: #ffc4e6; }
.doc__title {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.5;
  font-weight: normal;
  color: var(--green);
  text-shadow: 0 0 4px #39ff88, 0 0 20px rgba(57,255,136,.5), 3px 3px 0 #0b6b38;
}
.doc__date { font-size: 14px; color: #5a5078; letter-spacing: .5px; }

.doc section { display: flex; flex-direction: column; gap: 12px; }
.doc h2 {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  line-height: 1.6;
  font-weight: normal;
  color: var(--gold);
  letter-spacing: 1px;
}
.doc p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--lilac);
  text-wrap: pretty;
}
.doc p strong { color: #fff; }

.doc__panel {
  padding: 28px;
  background: rgba(20,14,50,.7);
  border: 2px solid rgba(57,255,136,.45);
  border-radius: 8px;
}
.doc__panel--pink {
  background: rgba(36,22,69,.7);
  border-color: rgba(255,143,208,.4);
}
.doc__panel--pink h2 { color: var(--pink); }

.nope {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lilac);
}
.nope li { display: flex; gap: 12px; }
.nope li::before {
  content: "X";
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.9;
  color: var(--red);
  flex: none;
}

.doc__foot {
  border-top: 2px solid var(--edge);
  padding-top: 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 2;
  color: #5a5078;
  letter-spacing: 1px;
  text-align: center;
}
.doc__foot a { color: #5a5078; text-decoration: underline; }
.doc__foot a:hover { color: var(--green-2); }