/*
 * Magic16 — Win98 hero + DSi-home-screen character select (re-skinned neon).
 */

/* ---- Hero: a Win98 "welcome" panel ---- */
.hero { position: relative; overflow: clip; }
.hero__aura, .hero__scene-veil { display: none; }   /* retired aero bits */
.hero__content { display: grid; gap: 14px; justify-items: start; }
.brandmark { margin: 0; font-family: var(--font-pixel); font-size: var(--h1); line-height: 1.05; letter-spacing: 0.02em; }
.brandmark__ink {
  color: var(--cyan-hot);
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000,
    4px 5px 0 var(--mag), 6px 7px 0 rgba(0,0,0,0.4);
}
.hero__lede { font-size: var(--lede); color: var(--ink-soft); max-width: 52ch; }

/* ---- DSi-home-screen character select ----------------------------------- */
/* minmax(0,1fr): the tracks must NOT exceed the container — otherwise the deck's
 * flat max-content (all tiles) blows the column out and the strip won't scroll. */
.dsi__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px; }

/* "Top screen": showcases the selected character, tinted by its type colour. */
.dsi__screen {
  --type-accent: var(--cyan); --type-accent-2: var(--mag);
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  /* LEFT column = portrait, spanning the FULL height. RIGHT column = ALL text: identity on top,
     description below it. No text under the portrait. */
  grid-template-areas: "portrait identity" "portrait blurb";
  gap: 12px 16px; align-items: start;
  min-width: 0; padding: 14px;
  background: var(--face);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
}
.dsi__stage { grid-area: portrait; align-self: stretch; }   /* fill the whole left column height */
.dsi__meta  { grid-area: identity; align-self: center; }
.props__blurb { grid-area: blurb; align-self: start; }      /* description in the RIGHT column, below identity */
.dsi__stage {
  display: grid; place-items: center; padding: 12px; min-height: 200px;
  /* clean deep-space well so the colourful character pops */
  background: radial-gradient(circle at 50% 38%, #24305c 0%, #0b1024 55%, #05060f 100%);
  border: 2px solid; border-color: var(--shadow) var(--hilite) var(--hilite) var(--shadow);
}
.dsi__thumb {
  max-height: 210px; max-width: 100%; object-fit: contain; image-rendering: auto;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 12px color-mix(in srgb, var(--type-accent-2) 55%, transparent));
}
.dsi__thumb--sound { cursor: pointer; }
.dsi__thumb--sound:hover, .dsi__thumb--sound:focus-visible { transform: scale(1.04); }

.dsi__meta { display: grid; gap: 11px; align-content: center; min-width: 0; }
/* MBTI wordmark = a real little NEON SIGN built into the profile. The pixel glyph is kept; --m16-neon
   (set inline per type to the dominant-function colour) drives a layered neon TUBE: a bright pale
   CORE (the fill), a crisp black pixel outline that hugs the glyph so it stays legible on the busy
   orange wood, a saturated tube + tight glow just outside it, a broad faint spill, and a tiny dark
   mounting shadow so the tubing reads as sitting a couple px off the wall. Glow blur is in `em` so it
   scales WITH the letters (never a fuzzy blob when small). The live lighting engine additionally
   spills real colour onto the orange wall (scene.js registers .dsi__name as a light source). */
.dsi__name {
  font-family: var(--font-pixel); font-size: clamp(38px, 5.5vw, 58px); line-height: 1; letter-spacing: 0.06em;
  /* Hug the text so the lighting engine's light-rect (getBoundingClientRect) is the GLYPH extent, not
     the stretched grid-column width — keeps the wall spill a tight tint by the letters. max-width
     keeps it from overflowing; alignment still follows the parent (centred on mobile). */
  width: max-content; max-width: 100%;
  --m16-neon: var(--cyan-hot);
  color: color-mix(in srgb, var(--m16-neon) 58%, #fff);           /* bright pale-mint CORE */
  text-shadow:
    /* crisp black pixel outline — topmost, hugs the glyph (readability) */
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000,
    /* saturated tube → tight glow → broad faint spill (behind the outline) */
    0 0 0.06em var(--m16-neon),
    0 0 0.12em var(--m16-neon),
    0 0 0.26em color-mix(in srgb, var(--m16-neon) 72%, transparent),
    0 0 0.5em  color-mix(in srgb, var(--m16-neon) 40%, transparent),
    /* tiny mounting shadow — tubing sits off the wall */
    2px 4px 1px rgba(0,0,0,0.5);
  animation: m16-neon-flicker 9s steps(60, jump-none) infinite;
}
/* Rare, tiny tube instability — never a full-black frame, never a strobe. */
@keyframes m16-neon-flicker {
  0%, 100% { filter: brightness(1); }
  91%, 93%, 96% { filter: brightness(1); }
  92%  { filter: brightness(0.86); }
  94%  { filter: brightness(1.08); }
  95%  { filter: brightness(0.9); }
}
/* Power-on when a new type is shown: dark → partial → bright flash → settle. */
@keyframes m16-neon-poweron {
  0%   { opacity: 0.12; filter: brightness(0.35) saturate(0.5); }
  45%  { opacity: 0.75; filter: brightness(0.9)  saturate(1); }
  60%  { opacity: 1;    filter: brightness(1.7)  saturate(1.35); }   /* strike/flash */
  74%  { opacity: 0.88; filter: brightness(0.95); }
  100% { opacity: 1;    filter: brightness(1); }
}
.dsi__name.is-powering { animation: m16-neon-poweron 270ms var(--ease, ease) both; }
@media (prefers-reduced-motion: reduce) {
  .dsi__name { animation: none; }
  .dsi__name.is-powering { animation: none; }
}

/* Reused meta bits (chip / cognitive-function badges / blurb). */
.props__chip {
  justify-self: start; padding: 3px 12px; color: #fff; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.03em;
  background: linear-gradient(var(--type-accent, var(--cyan)), color-mix(in srgb, var(--type-accent, var(--cyan)) 55%, #000));
  border: 2px solid #000; border-radius: 0; image-rendering: pixelated;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.45), inset -1px -1px 0 rgba(0,0,0,0.3);
  /* uniform hard pixel drop-shadow (filter isn't overridden by per-group box-shadow) */
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.85));
}

/* ---- Group tag: a leading retro graphic + a per-group themed style. -------- */
.props__chip--group { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; }
.props__chip__gif { height: 20px; width: auto; flex: none; display: block; image-rendering: auto; }

/* Construction Crew — black-on-yellow hazard tape (striped top & bottom bands). */
.props__chip--cc {
  color: #141414; font-weight: 800; letter-spacing: 0.02em; text-shadow: none;
  border: 1px solid #141414;
  background:
    repeating-linear-gradient(45deg, #141414 0 9px, #f7c948 9px 18px) top    / 100% 6px no-repeat,
    repeating-linear-gradient(45deg, #141414 0 9px, #f7c948 9px 18px) bottom / 100% 6px no-repeat,
    #f7c948;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}

/* Party People — festive multi-colour streamer stripes, outlined white text. */
.props__chip--pg {
  color: #fff; font-weight: 800; border: 1px solid #000;
  background: repeating-linear-gradient(45deg,
    #ff2fb3 0 10px, #ffd21e 10px 20px, #22d3ee 20px 30px, #a3e635 30px 40px);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Research Gang — clean clinical lab label with a folder-tab top-left corner. */
.props__chip--rg {
  color: #0b3d2e; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: none;
  background: linear-gradient(#f2fffa, #cdeee0);
  border: 2px solid #2f8f6f; border-left-width: 5px;
  box-shadow: inset 0 1px 0 #fff;
  /* no clip-path — it would clip away the base .props__chip drop-shadow */
}

/* Humanitarian Organization — 90s "world coming together" edutainment: a bright
   sky→ocean→land globe gradient in a chunky beveled CD-ROM-button frame. */
.props__chip--ho {
  color: #0c3350; font-weight: 800; letter-spacing: 0.02em;
  background: linear-gradient(#cfeaff 0%, #7fc4f2 45%, #86d98f 100%);
  border: 2px solid #ffffff; border-radius: 0;
  box-shadow: 0 0 0 2px #2b7bb0, inset 0 1px 0 rgba(255,255,255,0.8);
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

/* Unknowner — void / liminal / purgatory: a murky dark gradient, dashed
   uncertain edge, spaced-out muted caps with a faint hum of glow. */
.props__chip--void {
  color: #b7b7c4; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(180deg, #26262c 0%, #101014 60%, #08080b 100%);
  border: 1px dashed #4c4c58;
  text-shadow: 0 0 7px rgba(180,182,205,0.4);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.85);
}

/* Doggo — warm leather pet-tag: tan gradient, stitched dashed collar edge. */
.props__chip--dog {
  color: #45280f; font-weight: 800; border-radius: 0;
  background: linear-gradient(#f2d6ab, #cf9f68);
  border: 2px dashed #7a4f24;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
/* Full-width description, flush with the panel content edge (default indent 0). The
   --m16-indent token lets the editor intentionally indent THIS or any block (see Indent control). */
.props__blurb { margin: 0; margin-inline-start: var(--m16-indent, 0); font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.5; max-width: min(72ch, 100%); }
.props__fns { min-height: 26px; }
.fns { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.fn { --fn: #6b7079; --fn-ink: #fff; display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 8px;
  border: 1px solid #000; background: var(--fn); color: var(--fn-ink); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-sm);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35); }
.fn--dom { box-shadow: inset 1px 1px 0 rgba(255,255,255,0.35), 0 0 0 2px #fff, 0 0 0 3px var(--fn); }
.fns--none { color: var(--disabled); }

/* The deck: prev/next arrows flank a scrollable tray of DSi rounded-square icons. */
.dsi__deck {
  display: flex; align-items: center; gap: 8px; padding: 8px; min-width: 0;
  background: #eef1f7;
  border: 2px solid; border-color: var(--shadow) var(--hilite) var(--hilite) var(--shadow);
}
.dsi__arrow {
  flex: 0 0 auto; width: 34px; height: 66px; display: grid; place-items: center; cursor: pointer;
  font-size: 22px; font-weight: 700; color: #002;
  background: linear-gradient(var(--face-lt), var(--face));
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow);
}
.dsi__arrow:hover { background: linear-gradient(#e4e0d8, var(--face-lt)); }
.dsi__arrow:active { border-color: var(--dkshadow) var(--hilite) var(--hilite) var(--dkshadow); box-shadow: inset 1px 1px 0 var(--shadow); transform: translate(1px, 1px); }

.dsi__strip {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 26px 12px;                 /* headroom so the enlarged icon + label aren't clipped */
  scrollbar-width: thin;
}
/* Stitched seam between character groups (LBP). */
.dsi__sep {
  flex: 0 0 auto; align-self: stretch; width: 0; margin: 14px 3px;
  border-left: 3px dashed color-mix(in srgb, var(--mag) 60%, transparent);
  filter: drop-shadow(1.5px 0 0 rgba(255,255,255,0.6));
}
.dsi__ico {
  flex: 0 0 auto; width: 70px; height: 70px; padding: 0; position: relative;
  display: grid; place-items: center; scroll-snap-align: center; cursor: pointer;
  border: 2px solid #000; border-radius: 15px;      /* DSi rounded square */
  transition: transform 180ms ease, box-shadow 180ms ease;   /* smooth lift; the lighting pulse tracks it */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--type-accent, var(--cyan)) 70%, #fff), color-mix(in srgb, var(--type-accent, var(--cyan)) 40%, #fff));
  box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.9);   /* white sticker cut-out */
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* The bust art used to be a CROP OF A FULL STICK FIGURE — head/body, then a neck, then a
   bent arm — with the 320×320 canvas shearing the neck and arm off mid-stroke, which at
   60px read as a little square stem with a stray blob beside it. That is now cut out of
   the ARTWORK, each character at its own body bottom (see the pretrim backup under
   ~/Claude3/backups/). Doing it in the asset rather than with a CSS clip matters: one
   shared clip line can only be a compromise between families whose bodies end 3px apart,
   and at 60px it landed on a half-pixel and left an antialiased nub on the square/L
   shapes. There is nothing left to hide, so this rule is plain again. */
.dsi__ico-img { width: 60px; height: 60px; object-fit: contain; image-rendering: auto; }
.dsi__ico-id {
  position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; white-space: nowrap;
  color: #0b1024; text-shadow: 0 1px 0 #fff, 0 0 2px #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.dsi__ico:hover { transform: translateY(-3px) scale(1.05); }
/* DSi selection: lift the icon under a neon bracket cursor in the eye colour. */
.dsi__ico[aria-selected="true"] {
  transform: scale(1.34) translateY(-2px); z-index: 1;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--type-accent-2, var(--mag)),
    0 10px 20px color-mix(in srgb, var(--type-accent-2, var(--mag)) 55%, transparent);
}
.dsi__ico[aria-selected="true"] .dsi__ico-id { opacity: 1; }

@media (max-width: 720px) {
  /* stack: portrait, then ALL text (identity, then description) — no text beside/under only part */
  .dsi__screen { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "portrait" "identity" "blurb"; text-align: center; }
  .dsi__stage { align-self: center; min-height: 200px; }
  .dsi__meta { justify-items: center; }
  .props__chip { justify-self: center; }
}