/* ============================================================
   PAWZI OS — desktop shell, hero, sections, taskbar
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 14.5px/1.65 var(--f-body);
  color: var(--ink);
  background: #7fb0e4;
  padding-top: 28px;
  padding-bottom: var(--taskbar-h);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--nav-mid); }

/* Inline sprite icons. Brand symbols (#i-*) have no fill of their own and take
   `currentColor`; Lucide symbols (#l-*) carry fill="none" + stroke="currentColor"
   on the <symbol>, which wins locally, so both families sit on one rule. */
svg.i { display: inline-block; vertical-align: middle; flex: none; fill: currentColor; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px dotted var(--nav-ink); outline-offset: 2px;
}
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -60px; left: 12px; z-index: 999;
  transition: top .2s ease;
}
.skip:focus { top: 34px; }

/* ============================================================
   WALLPAPER
   ============================================================ */
#wall { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: linear-gradient(180deg, #6ea6e0 0%, #9ac9f2 45%, #c3e0f8 100%); }
/* Drift is a transform of a tile-multiple, so the loop is seamless and the
   layer stays on the compositor. Each layer is 900/1350px wider than the
   viewport so the shift never exposes the edge. */
.wall__sky {
  position: absolute; top: -10%; bottom: -10%; left: 0; right: -900px;
  background: url("../assets/img/sky.webp") repeat;
  background-size: 900px auto;
  opacity: .92;
  will-change: transform;
  animation: driftNear 150s linear infinite;
}
.wall__sky--far {
  left: -1350px; right: 0;   /* drifts right, so the slack sits on the left */
  background-size: 1350px auto;
  opacity: .5;
  animation: driftFar 280s linear infinite;
}
/* pink pixel paw prints scattered over the sky — the tile is seamless, and the
   slack on the top/right lets it drift diagonally without exposing an edge */
.wall__paws {
  position: absolute; top: -384px; bottom: 0; left: 0; right: -384px;
  background: url("../assets/img/paws-tile.png") repeat;
  background-size: 384px 384px;
  image-rendering: pixelated;
  opacity: .5;
  will-change: transform;
  animation: driftPaws 160s linear infinite;
}
.wall__paw {
  position: absolute; right: 4vw; bottom: 6vh;
  width: min(46vw, 520px); aspect-ratio: 640/538;
  background: url("../assets/img/paw-320.png") center/contain no-repeat;
  opacity: .10;
  filter: saturate(.4);
  animation: pawFloat 16s ease-in-out infinite;
}
.wall__grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,40,110,.045) 0 1px, transparent 1px 4px);
}

/* CRT overlay (toggleable) */
#crt {
  position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,10,40,.30) 100%);
}
body.crt #crt { opacity: 1; }
body.crt #crt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.055), transparent);
  height: 40%;
  animation: crtRoll 7s linear infinite;
}

/* ============================================================
   TOP TITLE BAR  (the banner's outer window chrome)
   ============================================================ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  height: 28px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 0 6px;
  background: linear-gradient(90deg, var(--nav-mid) 0%, var(--nav-lt) 32%, var(--nav) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 0 var(--face-hi);
  user-select: none;
}
#topbar .win__ico { width: 18px; height: 18px; image-rendering: pixelated; }
#topbar .win__title { font-size: 12.5px; }
#topbar .ticker {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  font: 400 15px/1 var(--f-mono);
  color: #cfe0ff;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
#topbar .ticker > div { display: flex; width: max-content; animation: marqueeRun 46s linear infinite; }
#topbar .ticker span { white-space: nowrap; padding-right: 64px; }

/* ============================================================
   DESKTOP ICON DOCK
   ============================================================ */
#dock {
  position: fixed; top: 44px; left: 14px; z-index: 120;
  display: grid; gap: 6px;
  width: 92px;
}
.dico {
  display: grid; justify-items: center; gap: 5px;
  padding: 7px 4px 8px;
  background: none; border: 0;
  color: #fff; cursor: pointer;
  font: 400 11px/1.25 var(--f-ui);
  text-align: center; text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0,20,70,.85), 0 0 6px rgba(0,20,70,.6);
  transition: transform .12s var(--ease-win);
}
.dico img { width: 34px; height: 34px; image-rendering: pixelated; transition: transform .18s var(--ease-win), filter .18s ease; }
.dico span { padding: 1px 3px; }
.dico:hover img { transform: translateY(-3px) scale(1.09); filter: drop-shadow(0 3px 4px rgba(0,20,70,.5)); }
.dico:hover span, .dico:focus-visible span { background: var(--nav); box-shadow: 0 0 0 1px #fff inset; }
.dico:active { transform: scale(.94); }
.dico.is-open img { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,255,255,.9)); }

/* ============================================================
   PAGE FLOW
   ============================================================ */
#scroll { position: relative; z-index: 10; }
.shell {
  width: min(1160px, 100% - 32px);
  margin-inline: auto;
}
/* Reserve the desktop-icon dock as page padding rather than as a margin on
   .shell — a margin left the shell its full width and pushed it off the right
   edge between 1180 and ~1290px. Padding shrinks the track instead. */
@media (min-width: 1180px) { #scroll, #footer { padding-left: 118px; } }
@media (min-width: 1500px) { #scroll, #footer { padding-left: 0; } }

.sec { padding: 34px 0; scroll-margin-top: 46px; }
.sec:first-of-type { padding-top: 22px; }
.sec .shell { position: relative; }
.sec .win { z-index: 1; }

/* ============================================================
   SECTION COMPANIONS
   A pixel cat or dog every second section, alternating sides, standing on
   the wallpaper behind the window and looking toward the content. They need
   real gutter to live in, so each side only appears once there is room —
   the left side also has to clear the fixed desktop icon dock.
   ============================================================ */
.pal {
  position: absolute; bottom: 0; z-index: 0;
  width: clamp(84px, 7.6vw, 116px); height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 4px 3px rgba(0, 24, 80, .3));
}
/* 1440px is the first width where the gutter fits a companion and the left one
   still clears the dock; past that they step further out from the window. */
@media (min-width: 1440px) {
  .pal { display: block; }
  .pal--l { left: -68px; }
  .pal--r { right: -68px; }
}
@media (min-width: 1660px) {
  .pal--l { left: -84px; }
  .pal--r { right: -84px; }
}
@media (min-width: 1900px) {
  .pal--l { left: -96px; }
  .pal--r { right: -96px; }
}

/* section eyebrow above each window */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px 2px;
  font: 700 10px/1 var(--f-silk);
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0,22,72,.95), 0 0 8px rgba(0,22,72,.7);
}
.eyebrow::after { content: ""; height: 2px; flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  box-shadow: 0 1px 0 rgba(0,22,72,.35); }

h2.sec__h {
  margin: 0 0 4px;
  font: 400 clamp(15px, 2.4vw, 21px)/1.35 var(--f-pixel);
  color: var(--nav-ink);
  letter-spacing: -.5px;
}
.sec__lede {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 15px;
  color: var(--ink-soft);
}
h3.sub {
  margin: 26px 0 10px;
  font: 700 12px/1.3 var(--f-ui);
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--nav-ink);
  display: flex; align-items: center; gap: 8px;
}
h3.sub::before { content: ""; width: 9px; height: 9px; background: var(--paw);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.5); }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
strong { color: var(--nav-ink); }
.mono { font-family: var(--f-mono); font-size: 1.18em; letter-spacing: .3px; }

/* min-width:0 stops a max-content child (the marquee) from blowing the track out */
.cols { display: grid; gap: 18px; }
.cols > * { min-width: 0; }
@media (min-width: 760px) { .cols--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .cols--sidebar { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: start; } }

/* ============================================================
   HERO
   ============================================================ */
#hero { padding: 20px 0 8px; }
.hero__stage { display: grid; gap: 16px; align-items: start; }
/* grid items default to min-width:auto, which lets a wide child stretch the
   track past the viewport — pin it so the hero always fits */
.hero__stage > * { min-width: 0; }
@media (min-width: 1240px) {
  .hero__stage { grid-template-columns: 216px minmax(0,1fr) 178px; }
}

.hero__art {
  position: relative;
  margin: 3px;
  /* the cutout strip is 26% of its own width tall and sits flush to the
     bottom — reserving that as padding keeps the wordmark clear of the ears */
  padding-bottom: 24%;
  min-height: clamp(240px, 38vw, 410px);
  background: linear-gradient(180deg, #c6d6f2 0%, var(--sky) 62%, #aec0e6 100%);
  overflow: hidden;
  box-shadow:
    inset -1px -1px 0 var(--face-hi),
    inset  1px  1px 0 var(--face-sh),
    inset -2px -2px 0 var(--face-lt),
    inset  2px  2px 0 var(--face-dk);
}
.hero__art .cloudlet {
  position: absolute; top: 0; bottom: 0; left: 0; right: -640px;
  background: url("../assets/img/sky.webp") repeat;
  background-size: 640px auto;
  opacity: .5; mix-blend-mode: screen;
  will-change: transform;
  animation: driftHero 95s linear infinite;
}

.hero__mark { position: relative; z-index: 2; padding: clamp(34px, 5.4vw, 62px) 16px 0; text-align: center; }

.wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  font: 400 clamp(29px, 7vw, 80px)/1 var(--f-pixel);
  color: var(--nav-ink);
  letter-spacing: .02em;
  text-shadow:
    .055em 0 0 #fff, -.055em 0 0 #fff, 0 .055em 0 #fff, 0 -.055em 0 #fff,
    .055em .055em 0 #fff, -.055em -.055em 0 #fff, .055em -.055em 0 #fff, -.055em .055em 0 #fff,
    .10em .10em 0 rgba(0, 20, 90, .22);
}
.wordmark i { font-style: normal; display: inline-block; }
.wordmark__paw {
  position: absolute; right: -.30em; top: -.46em;
  width: .42em; aspect-ratio: 640/538;
  background: url("../assets/img/paw-320.png") center/contain no-repeat;
  filter: drop-shadow(2px 2px 0 rgba(255,255,255,.9));
}
.hero__tag {
  margin: 14px 0 0;
  font: 400 clamp(11px, 1.7vw, 17px)/1.4 var(--f-ui);
  font-weight: 700;
  color: var(--nav-ink);
  letter-spacing: .02em;
}
.hero__tag .hrt { color: var(--pink); -webkit-text-stroke: 1px var(--pink-dk); }

/* One continuous cutout, exactly as the animals sit in the banner. */
.hero__pets { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero__pets > img {
  width: 100%; height: auto;
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.5)) drop-shadow(0 5px 7px rgba(0,25,80,.16));
}
.pet-hot {
  position: absolute; bottom: 0; top: 0;
  left: var(--l); width: var(--w);
  background: radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.42), transparent 62%);
  opacity: 0; border: 0; padding: 0; cursor: pointer;
  transition: opacity .25s ease;
}
.pet-hot:hover, .pet-hot:focus-visible { opacity: 1; }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 14px 12px;
}
.hero__cta .btn { flex: 0 0 auto; }
.hero__note { font: 400 11px/1.4 var(--f-ui); color: var(--ink-soft); margin-left: auto; text-align: right; }

.ca {
  display: flex; align-items: stretch; gap: 0; margin: 0 14px 12px;
  background: #fff;
  box-shadow:
    inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
    inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.ca__label { padding: 9px 10px; font: 700 11px/1.4 var(--f-ui); background: var(--face); flex: none;
  box-shadow: inset -1px -1px 0 var(--face-sh), inset 1px 1px 0 var(--face-hi); }
.ca__val { flex: 1 1 auto; min-width: 0; padding: 8px 10px; font: 400 16px/1.4 var(--f-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca .btn { margin: 3px; min-height: 26px; padding: 4px 10px; font-size: 11px; }

/* hero side columns */
.hero__side { display: grid; gap: 14px; }
.hero__side--r { justify-items: end; }
.float { transition: transform .18s var(--ease-win), box-shadow .18s ease; }
.float[data-drag] { cursor: grab; }
.float[data-drag]:active { cursor: grabbing; }
.float.is-dragging { z-index: 60; box-shadow: 6px 6px 0 rgba(0,12,48,.4) !important; }
@media (max-width: 1239px) {
  .hero__side { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
  .hero__side--r { justify-items: center; }
}

.bubble {
  position: relative;
  background: var(--pink-lt);
  padding: 12px 14px;
  max-width: 190px;
  font: 400 12px/1.5 var(--f-ui);
  color: #5c2634;
  box-shadow: inset -1px -1px 0 var(--pink-dk), inset 1px 1px 0 #fff, 3px 3px 0 rgba(0,12,48,.25);
}
.bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -12px;
  border: 6px solid transparent; border-top-color: var(--pink-lt); border-right-color: var(--pink-lt);
}
.bubble .hrt { color: var(--pink-dk); }

.sticky {
  background: var(--sticky);
  padding: 16px 14px 18px;
  max-width: 168px;
  font: 400 12.5px/1.5 var(--f-ui);
  color: #5a4c12;
  box-shadow: 3px 3px 0 rgba(0,12,48,.22);
  transform: rotate(-2.2deg);
}
.sticky::before {
  content: ""; display: block; width: 12px; height: 12px; margin: -6px auto 8px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7fb3ff, #1d4fb0);
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
}

/* stats strip */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt),
              3px 3px 0 rgba(0,12,48,.25);
}
.stat__in {
  background: #0b1230; color: #9ff5b6; padding: 12px 12px 10px;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.stat__k { font: 400 10px/1 var(--f-silk); letter-spacing: .8px; text-transform: uppercase; color: #7fa4d8; }
.stat__v { font: 400 clamp(24px, 3.4vw, 34px)/1 var(--f-mono); margin-top: 7px; letter-spacing: .5px;
  text-shadow: 0 0 12px rgba(120,255,160,.45); }
.stat__s { font: 400 11px/1.3 var(--f-ui); color: #6d8fc4; margin-top: 5px; }

/* ============================================================
   SPLIT / PIE
   ============================================================ */
.splitwrap { display: grid; gap: 22px; align-items: center; }
@media (min-width: 820px) { .splitwrap { grid-template-columns: minmax(0,1fr) 240px; } }

.pie {
  --deg: 0deg;
  width: 216px; height: 216px; margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(from -90deg, var(--stops));
  box-shadow: 0 0 0 3px var(--face), 0 0 0 5px var(--face-sh), 0 0 0 6px var(--face-hi),
              6px 8px 0 rgba(0,12,48,.28);
  position: relative;
  clip-path: inset(0 0 0 0 round 50%);
  transition: transform .3s var(--ease-win);
}
.pie::after {
  content: ""; position: absolute; inset: 26%; z-index: 2;
  border-radius: 50%; background: var(--face);
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.pie__mask {
  position: absolute; inset: -1px; z-index: 1; border-radius: 50%;
  background: conic-gradient(from -90deg,
    transparent 0 var(--rev, 0%), var(--face) var(--rev, 0%) 100%);
}
.pie__center {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 3;
}
.pie__center b { display: block; font: 400 15px/1 var(--f-pixel); color: var(--nav-ink); }
.pie__center span { font: 400 10px/1.4 var(--f-silk); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .6px; }

.srow { display: grid; grid-template-columns: 14px minmax(0,1fr) 54px; gap: 12px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid rgba(0,0,0,.09); }
.srow:last-child { border-bottom: 0; }
.srow__name { font: 700 12.5px/1.3 var(--f-ui); }
.srow__desc { font: 400 12px/1.4 var(--f-body); color: var(--ink-soft); margin-top: 2px; }
.srow__pct { font: 400 21px/1 var(--f-mono); text-align: right; color: var(--nav-ink); }
.srow .meter { margin-top: 7px; height: 14px; }

/* ============================================================
   FIFO QUEUE
   ============================================================ */
.queue { display: flex; gap: 6px; align-items: flex-end; overflow: hidden; padding: 14px 4px 6px; min-height: 118px; }
.qitem {
  flex: 0 0 62px; text-align: center;
  background: var(--face-alt); padding: 8px 4px 7px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
  font: 400 11px/1.3 var(--f-ui);
  animation: qIn .45s var(--ease-win) both;
}
.qitem b { display: block; font: 400 15px/1 var(--f-mono); color: var(--nav-ink); }
.qitem .meter { height: 9px; margin-top: 6px; }
.qitem.is-paid { background: #cdf0d3; animation: qPaid .7s var(--ease-win) forwards; }
.qhead { font: 400 10px/1 var(--f-silk); text-transform: uppercase; letter-spacing: .7px; color: var(--ink-soft); }

/* ============================================================
   ADOPTION GALLERY
   ============================================================ */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.card { perspective: 900px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.card__in { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease-win); }
.card__face { height: 100%; display: flex; flex-direction: column; }
.card__meta { flex: 1 1 auto; }
.card.is-flipped .card__in { transform: rotateY(180deg); }
.card__face {
  background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt),
              3px 3px 0 rgba(0,12,48,.22);
  backface-visibility: hidden;
}
.card__face--back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; }
.card__pic { position: relative; overflow: hidden; background: var(--sky); aspect-ratio: 78/100; flex: none; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  transition: transform .5s var(--ease-win); }
.card:hover .card__pic img { transform: scale(1.07); }
.card__pic .stamp {
  position: absolute; right: 6px; top: 8px;
  font: 700 10px/1 var(--f-silk); letter-spacing: 1px;
  color: #c62828; border: 2px solid #c62828; padding: 4px 6px;
  transform: rotate(-14deg) scale(0); transform-origin: center;
  background: rgba(255,255,255,.72);
}
.card.is-adopted .stamp { animation: stampIn .5s var(--ease-win) forwards; }
.card__meta { padding: 7px 8px 8px; }
.card__name { font: 700 12px/1.2 var(--f-ui); display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.card__sub { font: 400 11px/1.3 var(--f-ui); color: var(--ink-soft); margin-top: 3px; }
.card__face--back .card__pic { aspect-ratio: 1; }
.card__face--back .card__pic img { object-position: center; }
.card__nfo { padding: 8px; font: 400 10.5px/1.5 var(--f-ui); background: #fff; margin: 3px; flex: 1;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk); }
.card__nfo dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 8px; }
.card__nfo dt { color: var(--ink-dim); }
.card__nfo dd { margin: 0; font-family: var(--f-mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.card__hint { font: 400 9px/1 var(--f-silk); color: var(--ink-dim); text-align: center; padding: 4px 0 5px; letter-spacing: .5px; flex: none; }

/* ============================================================
   MINTED ARTWORK GRID
   The pixel portraits an Adoption NFT actually carries. Rendered
   with pixelated scaling so the grid stays hard at any card size.
   ============================================================ */
.nftgrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .nftgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .nftgrid { grid-template-columns: repeat(6, 1fr); } }

.nftcard {
  margin: 0;
  background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt),
              3px 3px 0 rgba(0,12,48,.22);
  transition: transform .16s var(--ease-win);
}
.nftcard:hover { transform: translateY(-3px); }
.nftcard img {
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh);
}
.nftcard figcaption {
  font: 400 9px/1 var(--f-silk); letter-spacing: .6px;
  color: var(--ink-dim); text-align: center; padding: 5px 0 4px;
}

/* ============================================================
   DAPP PANEL
   ============================================================ */
.dapp { display: grid; gap: 14px; }
.dapp__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--face-alt);
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh); }
.dapp__who { flex: 1 1 auto; font-size: 15px; color: var(--ink-soft); }
.dapp__msg { align-items: flex-start; }
.dapp__msg[hidden] { display: none; }
.dapp__row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font: 700 11.5px/1 var(--f-ui); }
.dapp__row > span { flex: 0 0 62px; }
.dapp__row input, .dapp__row select {
  flex: 1 1 auto; min-width: 0; padding: 7px 9px;
  font: 400 15px/1.2 var(--f-mono); border: 0; background: #fff; color: var(--ink);
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk); }
.dapp__limits { margin: 4px 0 12px; }
.dapp__deposit { width: 100%; }
.dapp__stats { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  font: 400 12px/1.5 var(--f-ui); }
.dapp__stats dt { color: var(--ink-dim); }
.dapp__stats dd { margin: 0; font-family: var(--f-mono); font-size: 15px; text-align: right; }
.dapp__pos { padding: 10px 12px; margin-bottom: 8px; background: var(--face-alt);
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt); }
.dapp__pos-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 400 13px/1.4 var(--f-ui); margin-bottom: 7px; }
.dapp__pos-head b { font: 400 16px/1 var(--f-mono); color: var(--nav-ink); }
.dapp__pos-foot { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.dapp__pos-foot .legal { flex: 1 1 auto; margin: 0; }

/* ============================================================
   FLOW DIAGRAM
   ============================================================ */
.flow { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); align-items: stretch; }
.fstep {
  position: relative; background: var(--face-alt); padding: 12px 10px 11px; text-align: center;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
}
.fstep img { width: 30px; height: 30px; margin: 0 auto 7px; image-rendering: pixelated; }
.fstep b { display: block; font: 700 11.5px/1.3 var(--f-ui); }
.fstep span { display: block; font: 400 11px/1.35 var(--f-ui); color: var(--ink-soft); margin-top: 3px; }
.fstep::after {
  content: "▶"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--nav-mid); z-index: 2;
}
.fstep:last-child::after { display: none; }
@media (max-width: 560px) { .fstep::after { content: "▼"; right: 50%; top: auto; bottom: -9px; transform: translateX(50%); } }

/* ============================================================
   FEED
   ============================================================ */
.feed {
  background: #0b1230; color: #b7ffcb; padding: 10px 12px; height: 236px; overflow: hidden;
  font: 400 16px/1.5 var(--f-mono);
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.feed li { list-style: none; display: flex; gap: 10px; padding: 2px 0; animation: feedIn .4s var(--ease-win) both; }
.feed ul { margin: 0; padding: 0; }
.feed .t { color: #5f83bd; flex: none; }
.feed .amt { color: #ffd9e2; }
.feed .who { color: #8fd8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   TREE (device manager)
   ============================================================ */
.tree { font: 400 12.5px/1.9 var(--f-ui); }
.tree ul { list-style: none; margin: 0; padding-left: 19px; position: relative; }
.tree > ul { padding-left: 2px; }
.tree ul ul::before {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 12px; width: 1px;
  background: repeating-linear-gradient(180deg, var(--ink-dim) 0 1px, transparent 1px 2px);
}
.tree li { position: relative; display: flex; align-items: center; gap: 7px; }
.tree li.tree__kids { display: block; }   /* wrapper for the nested branch */
.tree ul ul > li::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-dim) 0 1px, transparent 1px 2px);
}
.tree img, .tree .isvg { width: 17px; height: 17px; flex: none; image-rendering: pixelated; }
.tree .isvg { display: grid; place-items: center; }
.tree .isvg svg { width: 15px; height: 15px; fill: var(--nav-ink); }
.tree em { font-style: normal; color: var(--ink-dim); font-size: 11.5px; }

/* stack logos */
.logos { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  background: var(--face-alt);
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
  font: 700 11px/1 var(--f-ui);
  transition: transform .15s var(--ease-win);
}
.logo-chip:hover { transform: translateY(-2px); }
.logo-chip svg { width: 15px; height: 15px; fill: var(--nav-ink); }

/* ============================================================
   NOTICE / WARNING PANELS
   ============================================================ */
.notice {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px;
  background: var(--face-alt);
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
  font-size: 13.5px;
}
.notice img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.notice--danger { background: #f6dede; }
.notice--good { background: #d9f0dd; }
.notice b { display: block; margin-bottom: 3px; font: 700 12px/1.4 var(--f-ui); }

/* ============================================================
   FAQ
   ============================================================ */
.faq details {
  background: var(--face-alt); margin-bottom: 7px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
}
.faq summary {
  cursor: pointer; padding: 11px 14px; font: 700 12.5px/1.4 var(--f-ui);
  display: flex; gap: 9px; align-items: center; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; width: 15px; height: 15px; flex: none; display: grid; place-items: center;
  font: 700 12px/1 var(--f-ui); background: var(--face);
  box-shadow: inset -1px -1px 0 var(--face-sh), inset 1px 1px 0 var(--face-hi);
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { background: var(--face); }
.faq .faq__a { padding: 0 14px 14px 38px; font-size: 13.5px; color: var(--ink-soft); }

/* ============================================================
   FOOTER
   ============================================================ */
#footer { position: relative; z-index: 10; padding: 26px 0 44px; }
.foot { display: grid; gap: 22px; }
@media (min-width: 780px) { .foot { grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); } }
.foot h4 { margin: 0 0 9px; font: 700 11px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .7px; }
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.foot a { display: inline-flex; align-items: center; gap: 7px; color: var(--nav-mid); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot svg { width: 14px; height: 14px; fill: currentColor; }
.foot__brand { display: flex; gap: 12px; align-items: flex-start; }
.foot__brand img { width: 52px; height: auto; image-rendering: pixelated; flex: none; }
.legal { margin-top: 20px; font: 400 11.5px/1.65 var(--f-ui); color: var(--ink-soft); }

/* ============================================================
   TASKBAR
   ============================================================ */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
  height: var(--taskbar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 3px 4px;
  background: var(--face);
  box-shadow: inset 0 1px 0 var(--face-hi), inset 0 2px 0 var(--face-lt), 0 -2px 6px rgba(0,10,40,.25);
}
#start {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px 0 7px;
  background: var(--face-alt); border: 0; cursor: pointer;
  font: 700 12.5px/1 var(--f-ui);
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
  flex: none;
}
#start img { width: 20px; height: 20px; image-rendering: pixelated; }
#start[aria-expanded="true"], #start:active {
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.tb-div { width: 2px; height: 26px; flex: none;
  background: linear-gradient(90deg, var(--face-sh) 0 1px, var(--face-hi) 1px 2px); }
.quick { display: flex; gap: 3px; flex: none; }
.quick a {
  width: 26px; height: 26px; display: grid; place-items: center;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh);
  transition: transform .12s var(--ease-win);
}
.quick a:hover { transform: translateY(-2px); }
.quick svg { width: 14px; height: 14px; fill: var(--nav-ink); }

#tbwins { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tbwin {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px; min-width: 0; max-width: 168px; flex: 1 1 108px;
  background: var(--face-alt); border: 0; cursor: pointer;
  font: 400 11.5px/1 var(--f-ui); text-align: left;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt);
}
.tbwin img { width: 15px; height: 15px; image-rendering: pixelated; flex: none; }
.tbwin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbwin.is-active {
  font-weight: 700;
  background: repeating-conic-gradient(#dbd4cf 0% 25%, #c5bbb5 0% 50%) 50% / 2px 2px;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh),
              inset -2px -2px 0 var(--face-lt), inset 2px 2px 0 var(--face-dk);
}
.tbwin.is-min { opacity: .62; font-style: italic; }

#tray {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 28px; padding: 0 9px;
  box-shadow: inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-sh);
  font: 400 11.5px/1 var(--f-ui);
}
#tray button { background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; }
#tray img { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }
#tray button.is-off img, .sm__item.is-off img { filter: grayscale(1) opacity(.5); }
#clock { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; }

/* ============================================================
   START MENU
   ============================================================ */
#startmenu {
  position: fixed; left: 4px; bottom: var(--taskbar-h); z-index: 240;
  width: 268px; display: none;
  background: var(--face); padding: 3px;
  box-shadow: inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 var(--face-hi),
              inset -2px -2px 0 var(--face-sh), inset 2px 2px 0 var(--face-lt),
              4px -4px 0 rgba(0,12,48,.35);
}
#startmenu.is-open { display: flex; animation: menuUp .18s var(--ease-win); }
.sm__side {
  width: 30px; flex: none;
  background: linear-gradient(180deg, var(--nav-lt), var(--nav));
  display: grid; align-items: end; justify-items: center; padding-bottom: 12px;
}
.sm__side span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 15px/1 var(--f-ui); color: #fff; letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.sm__side b { font: 400 15px/1 var(--f-pixel); color: var(--pink-lt); }
.sm__list { flex: 1 1 auto; padding: 3px 2px; min-width: 0; }
.sm__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; background: none; border: 0; cursor: pointer;
  font: 400 12.5px/1 var(--f-ui); text-align: left; color: var(--ink); text-decoration: none;
}
.sm__item img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.sm__item:hover, .sm__item:focus-visible { background: var(--nav); color: #fff; outline: 0; }
.sm__item:hover img { filter: brightness(1.1); }
.sm__sep { height: 2px; margin: 3px 4px;
  background: linear-gradient(180deg, var(--face-sh) 0 1px, var(--face-hi) 1px 2px); }

/* ============================================================
   OVERLAYS: boot / screensaver / shutdown / toasts
   ============================================================ */
#boot {
  position: fixed; inset: 0; z-index: 500;
  background: #000814; color: #cfe2ff;
  display: grid; place-content: center; justify-items: center; gap: 20px;
  font: 400 16px/1.7 var(--f-mono);
  transition: opacity .5s ease, visibility .5s;
}
#boot.is-done { opacity: 0; visibility: hidden; }
#boot img { width: 122px; image-rendering: pixelated; animation: pawPulse 1.5s ease-in-out infinite; }
#boot .boot__ttl { font: 400 clamp(15px,3vw,24px)/1.4 var(--f-pixel); color: #fff; text-align: center; }
#boot .boot__log { min-height: 92px; width: min(440px, 84vw); }
#boot .boot__log p { margin: 0; opacity: 0; animation: bootLine .3s ease forwards; }
#boot .meter { width: min(340px, 78vw); }
#boot .boot__skip { font: 400 11px/1 var(--f-ui); color: #5f83bd; }

#saver {
  position: fixed; inset: 0; z-index: 480; background: #01030c;
  display: none; overflow: hidden; cursor: none;
}
#saver.is-on { display: block; }
#saver .sv-paw { position: absolute; width: 120px; image-rendering: pixelated; will-change: transform; }
#saver .sv-txt {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  font: 400 11px/1 var(--f-silk); color: #33507f; letter-spacing: 2px; text-transform: uppercase;
}

#shutdown {
  position: fixed; inset: 0; z-index: 520; background: #000; color: #ffb43f;
  display: none; place-content: center; justify-items: center; gap: 18px; text-align: center;
  font: 400 clamp(15px,3.4vw,26px)/1.6 var(--f-pixel); padding: 24px; cursor: pointer;
}
#shutdown.is-on { display: grid; animation: crtOff .6s ease; }
#shutdown small { font: 400 13px/1.6 var(--f-mono); color: #6b7fa8; }

#toasts { position: fixed; right: 12px; bottom: calc(var(--taskbar-h) + 12px); z-index: 260; display: grid; gap: 10px; justify-items: end; }
#toasts .dlg { animation: toastIn .3s var(--ease-win); max-width: calc(100vw - 24px); }

/* hearts particles */
.hrt-p { position: fixed; z-index: 250; pointer-events: none; font-size: 18px; will-change: transform, opacity; }

/* ============================================================
   DESKTOP PETS
   ============================================================ */
.pet {
  position: fixed; left: 0; top: 0; z-index: 215;
  width: 32px; height: 32px;
  pointer-events: none;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  will-change: transform;
  filter: drop-shadow(0 2px 2px rgba(0, 20, 70, .35));
}
.pet-paw {
  position: fixed; z-index: 214;
  width: 15px; height: auto;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: 0;
  animation: pawFade 2.6s ease-out forwards;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1179px) { #dock { display: none; } }
@media (max-width: 720px) {
  body { font-size: 14px; }
  .win__body { padding: 13px; }
  #topbar .ticker { display: none; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__note { margin-left: 0; text-align: left; width: 100%; }
  #tray .tray-btn { display: none; }
  .sec { padding: 24px 0; }
  .win__status .hide-sm { display: none; }
}
@media (max-width: 520px) {
  #tbwins { display: none; }
  .shell { width: calc(100% - 18px); }
}