/* =============================================================================
   numbers.css — ANONYMOUS NUMBER RENTALS storefront.

   A themed cell-phone store, cohesive with the rest of gifts.wtf: it draws its
   whole palette from the shared theme.css (dark / light / hashtag), same
   hairlines, same reduced-motion contract. It adds only two new visual systems
   on top of the shared palette:

     1. A Fragment-branded HERO (top half).
     2. A horizontal CAROUSEL of CSS-drawn FLIP PHONES (bottom half), each in
        one of two states — TAKEN (closed shell + red LED) or AVAILABLE (open
        clamshell, green LCD, crooked tape label, Rent button).

   PHOSPHOR GREENS. The old-school LCD needs true monochrome-screen greens that
   the product palette does not carry. Like the tester's heat stops in
   market.css, they are declared as their own scoped tokens here and used by
   NOTHING but the phone screen. Everything else is a shared token.

   MOTION. Every animation is transform/opacity only (compositor-friendly) and
   is disabled wholesale under prefers-reduced-motion — the red LED stops
   pulsing but stays lit, the phosphor grid freezes, the carousel snaps. No
   motion on this page is ever load-bearing.
   ========================================================================== */

:root{
  /* screen phosphor — LCD only, nothing else may use these */
  --lcd-bg:#111a05;          /* dark green-black glass                 */
  --lcd-on:#8ecb1e;          /* lit phosphor green                    */
  --lcd-ink:#0a1400;         /* the "black" text burned on the green  */
  --lcd-glow:rgba(142,203,30,.55);
  /* phone shell greys — plastic, not part of the ink ramp */
  --shell:#211a30;           /* body plastic, tinted toward the panel */
  --shell-hi:#2c2440;        /* lit bevel                             */
  --shell-lo:#0d0a16;        /* shadowed bevel / seams                */
}

/* ROOT OVERFLOW GUARD — a general belt-and-suspenders clip so no decorative
   overhang (the hanging-bulb light pool, etc.) can ever spill a horizontal
   scrollbar. Vertical scroll + the static tab bar stay intact; hidden fallback
   covers Safari < 16. NOTE: this does NOT clip the fixed @frag chat launcher —
   a position:fixed element anchored by `right` is laid out against the layout
   viewport, not clipped by an ancestor's overflow, and on mobile it forms a
   self-sustaining loop that inflates the document width ~130px. That launcher
   is re-anchored by an explicit left (computed from the true clientWidth) in a
   small inline guard at the foot of numbers.html — see the comment there. */
html, body{ overflow-x:clip; }
@supports not (overflow:clip){ html, body{ overflow-x:hidden; } }
/* Make BODY the containing block for the page-level absolutely-positioned
   decoration (the hanging work-lamp .bulb-rig, left:50%). Without this, that
   rig centres on the LAYOUT viewport, which under mobile shrink-to-fit can
   inflate — so the rig (and the light pool hanging off it) drift right and
   sustain a phantom horizontal scroll. Anchored to the 390px-wide body, the
   rig centres on the real page and can't feed the loop. */
body{ position:relative; }

/* ---------------------------------------------------------------------------
   0 · SKIP LINK + BACK STRIP
   ------------------------------------------------------------------------ */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--raised); color:var(--ink-hi);
  padding:8px 14px; border-radius:0 0 8px 0; z-index:100;
}
.skip:focus{ left:0; }

#backstrip{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--hairline-2);
  font-size:11px; letter-spacing:.04em;
}
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-hi); text-decoration:none; font-weight:800; letter-spacing:.12em;
}
.back-link span{ color:var(--p500); }
.back-link:hover{ color:var(--p600); }
.back-sep{ color:var(--ink-faint); }
.back-here{ color:var(--ink-lo); text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
/* theme toggle sits at the far right of the back strip */
#backstrip #themeToggle{ margin-left:auto; }

/* ---------------------------------------------------------------------------
   0b · MARKETPLACE TAB BAR — mirrors the shop's #tabbar (market.css) so every
   page carries the same top-level nav. Static here (there is no sticky topbar
   above it on the sub-pages); reuses the shared theme vars, no new colour. The
   CURRENT page's tab is marked aria-selected and gets the accent underline.
   ------------------------------------------------------------------------ */
#tabbar{
  display:flex; align-items:stretch; gap:2px;
  padding:0 12px;
  background:var(--panel);
  border-bottom:1px solid var(--hairline-2);
  overflow-x:auto; scrollbar-width:none;
}
#tabbar::-webkit-scrollbar{ display:none; }
.tab{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  padding:11px 14px;
  color:var(--ink-lo); font-size:13px; font-weight:600;
  text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover{ color:var(--ink-hi); }
.tab .tab-ic{ color:var(--ink-faint); font-size:13px; line-height:1; }
.tab:hover .tab-ic{ color:var(--p600); }
.tab[aria-selected="true"]{ color:var(--ink-hi); border-bottom-color:var(--p400); }
.tab[aria-selected="true"] .tab-ic{ color:var(--p500); }

/* ---------------------------------------------------------------------------
   1 · HERO — the storefront header, roughly the top half of the viewport.
   ------------------------------------------------------------------------ */
#hero{
  position:relative; overflow:hidden;
  min-height:46vh;
  display:flex; align-items:center;
  padding:44px 20px 40px;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(77,169,238,.26), transparent 60%),
    radial-gradient(90% 80% at 8% 120%, rgba(59,224,138,.08), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--void));
  border-bottom:1px solid var(--hairline-2);
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; }

/* the faint phosphor grid that drifts behind the hero copy */
.hero-grid{
  position:absolute; inset:-40% -10% -10%; z-index:1; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(77,169,238,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77,169,238,.08) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%, #000, transparent 78%);
          mask-image:radial-gradient(80% 70% at 70% 20%, #000, transparent 78%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{ from{ background-position:0 0,0 0; } to{ background-position:34px 68px,34px 68px; } }

/* Fragment badge */
.hero-badge{
  display:inline-flex; align-items:center;
  margin-bottom:20px;
}
/* @frag's PFP — circle-cropped, sits at the left of the range chip */
.frag-pfp{
  display:block; flex:0 0 auto; width:60px; height:60px;
  border-radius:50%; overflow:hidden; border:2px solid var(--p400);
  background:radial-gradient(120% 120% at 50% 20%, var(--raised), var(--void));
  box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .16s ease, border-color .16s ease;
}
.frag-pfp:hover{ transform:scale(1.06); border-color:var(--p600); }
.frag-pfp img{ width:100%; height:100%; object-fit:cover; display:block; }
.frag-live{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink-lo); font-size:10px; letter-spacing:.06em;
}
.frag-live i{
  width:6px; height:6px; border-radius:50%;
  background:var(--gain); box-shadow:0 0 8px var(--gain);
  animation:blip 2.2s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.35} }

#hero-title{
  margin:0 0 16px;
  /* bubbly-serif display face (theme.css --font-bubble) — matches the
     GIFTS.WTF wordmark PNG's letterform. Slightly smaller cap than the old
     sans (Shrikhand runs wide). */
  font-family:var(--font-bubble, "Fredoka","Baloo 2",system-ui,sans-serif);
  font-weight:700; line-height:1.02; letter-spacing:.01em;
  font-size:clamp(32px, 7vw, 72px);
}
.ht-line{ display:block; color:var(--ink-hi); }
.ht-accent{
  background:linear-gradient(92deg, var(--p600), var(--p400) 55%, var(--gain));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 44px rgba(77,169,238,.35);
}

#hero-tag{
  max-width:560px; margin:0 0 26px;
  color:var(--ink-mid); font-size:15px; line-height:23px;
}
.tag-num{ color:var(--gain); font-weight:700; }

/* inventory summary */
#inv-summary{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 18px;
  background:rgba(20,16,32,.72);
  border:1px solid var(--hairline-2);
  border-radius:14px;
  backdrop-filter:blur(4px);
  width:max-content; max-width:100%;
}
.inv-stat{ display:flex; flex-direction:column; gap:2px; }
.inv-n{ color:var(--ink-hi); font-weight:800; font-size:26px; line-height:1; }
.inv-n.inv-price{ color:var(--gain); letter-spacing:.02em; }
#invAvail{ color:var(--gain); text-shadow:0 0 18px rgba(59,224,138,.35); }
.inv-k{ color:var(--ink-lo); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.inv-div{ width:1px; align-self:stretch; background:var(--hairline-2); }
.inv-mode{
  margin-left:4px; align-self:center;
  color:var(--sweep); font-size:9px; font-weight:800; letter-spacing:.14em;
  padding:3px 8px; border-radius:5px;
  border:1px solid rgba(242,166,25,.35);
  background:rgba(242,166,25,.08);
}
.inv-mode.is-live{ color:var(--gain); border-color:rgba(59,224,138,.4); background:rgba(59,224,138,.08); }

/* ---------------------------------------------------------------------------
   2 · STORE + CAROUSEL — bottom half.
   ------------------------------------------------------------------------ */
#store{ max-width:1520px; margin:0 auto; padding:26px 16px 70px; }

.store-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 4px 16px; }
.store-title{
  margin:0; color:var(--p400);
  font-family:var(--font-bubble, "Fredoka","Baloo 2",system-ui,sans-serif);
  font-weight:700; font-size:24px; letter-spacing:.05em;
}
.store-sub{ margin:0; color:var(--ink-lo); font-size:15px; }

#carousel, #carouselVip{ position:relative; }

/* the sliding track. Horizontal scroll + snap; JS also drives arrows/drag.
   Generous vertical room so the phone photos are never clipped. */
#rack, #rackVip{
  display:flex; gap:22px;
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:14px 46px 26px;
  scrollbar-width:none;
  cursor:grab;
}
#rack::-webkit-scrollbar, #rackVip::-webkit-scrollbar{ display:none; }
#rack.is-drag, #rackVip.is-drag{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
#rack.is-drag *, #rackVip.is-drag *{ pointer-events:none; }  /* no button clicks mid-drag */
.rack-wait{ color:var(--ink-faint); font-size:13px; padding:60px 8px; }

/* nav arrows — float over the ends of the rack */
.rack-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--raised); border:1px solid var(--hairline-2);
  color:var(--ink-hi); font-size:24px; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.rack-nav:hover{ background:var(--hover); border-color:var(--p500); }
.rack-prev{ left:2px; }
.rack-next{ right:2px; }
.rack-nav[disabled]{ opacity:.28; cursor:default; }
.rack-nav[disabled]:hover{ background:var(--raised); border-color:var(--hairline-2); }

.rack-hint{ margin:6px 4px 0; color:var(--ink-faint); font-size:11px; }
.rack-hint .num{ color:var(--ink-lo); }

/* =============================================================================
   PHONE PHOTOS + two racks (REGULAR / VIP). Real cropped phone images replace
   the old CSS-drawn flip phones. Each slot is a fixed-width column so the two
   tracks scroll evenly no matter the phone's shape.
   ========================================================================== */
.rack-section{ margin:0 0 34px; }
.rack-section:last-of-type{ margin-bottom:8px; }
.store-count{ margin-left:auto; color:var(--ink-lo); font-size:12px; align-self:center; }
.store-count .num{ color:var(--ink-mid); }
.vip-star{ color:var(--ink-hi); text-shadow:0 0 12px rgba(166,214,249,.9); font-size:.85em; }
.rack-vip .store-title{ color:var(--ink-hi); }
.rack-vip .store-sub b, .rack-vip .store-sub{ }

.phone-shot{ position:relative; height:252px; display:flex; align-items:flex-end; justify-content:center; }
.phone-img{
  height:252px; width:auto; max-width:100%; display:block;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.slot.avail .phone-img{ animation:bob 5s ease-in-out infinite; }
.slot.avail:nth-child(even) .phone-img{ animation-delay:-2.4s; }
.slot.taken .phone-img{ filter:drop-shadow(0 16px 22px rgba(0,0,0,.55)) saturate(.9) brightness(.95); }
.slot.vip .phone-img{ filter:drop-shadow(0 16px 30px rgba(190,180,255,.4)) drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
@media (prefers-reduced-motion:reduce){ .slot.avail .phone-img{ animation:none; } }

/* AVAILABLE phones POP + skew in on load, then settle into the idle bob */
@keyframes phonePop{
  0%{   opacity:0; transform:translateY(-26px) rotate(-7deg) scale(.9); }
  55%{  opacity:1; transform:translateY(4px)  rotate(3deg)  scale(1.02); }
  100%{ opacity:1; transform:none; }
}
.slot.avail .phone-shot{ animation:phonePop .7s cubic-bezier(.2,.85,.3,1) both; }
.slot.avail:nth-child(2) .phone-shot{ animation-delay:.08s; }
.slot.avail:nth-child(3) .phone-shot{ animation-delay:.16s; }
.slot.avail:nth-child(4) .phone-shot{ animation-delay:.24s; }
.slot.avail:nth-child(n+5) .phone-shot{ animation-delay:.3s; }
@media (prefers-reduced-motion:reduce){ .slot.avail .phone-shot{ animation:none; } }

/* the number displayed ON the screen of an available phone (the empty green
   band of the Fragberry; higher up for the open VIP flip) */
.phone-screen-num{
  position:absolute; left:50%; top:37%; transform:translate(-50%,-50%) rotate(-1.5deg);
  z-index:3; pointer-events:none; white-space:nowrap;
  font-family:var(--font-num); font-weight:800; font-size:15px; letter-spacing:.01em;
  color:#0a2f10;
  text-shadow:0 1px 0 rgba(255,255,255,.45), 0 0 10px rgba(120,255,150,.4);
}
.phone-screen-num.on-vip{ top:23%; color:#12314c; text-shadow:0 1px 0 rgba(255,255,255,.55); }

/* the number is the product — show it BIG and clear under each phone */
.slot .slot-numline{ margin-top:14px; font-size:21px; }
.slot .slot-numline .num{ color:var(--ink-hi); font-weight:800; letter-spacing:.02em; }

/* =============================================================================
   WAREHOUSE WORK-LAMP — one bulb on a cord swinging from the top-centre of the
   page, throwing a warm light pool that drifts as it swings. Pure CSS,
   decorative, pointer-events:none so it never blocks the shop.
   ========================================================================== */
.bulb-rig{
  position:absolute; top:0; left:50%; z-index:4; pointer-events:none;
  transform-origin:50% 0;
  animation:bulbSwing 6.5s ease-in-out infinite;
}
.bulb-cord{
  /* long cord so the bulb hangs down into the negative space between the
     header and the hero, swinging there. */
  display:block; width:2px; height:260px; margin:0 auto;
  background:linear-gradient(#3a3442, #100c18);
}
.bulb{
  position:relative; display:block; width:26px; height:34px; margin:0 auto;
  border-radius:48% 48% 46% 46%;
  background:radial-gradient(circle at 40% 30%, #fff7dc, #ffdd7e 42%, #f4ac2e 74%, #b97a1a);
  box-shadow:0 0 26px 9px rgba(255,196,90,.6), 0 0 74px 34px rgba(255,168,58,.3);
}
.bulb::before{                 /* little screw base up into the cord */
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:11px; height:7px; border-radius:2px 2px 0 0;
  background:linear-gradient(#c9c2cc, #6b6470);
}
.bulb-pool{                    /* the light it throws onto the page */
  position:absolute; top:282px; left:50%; transform:translateX(-50%);
  width:min(1200px, 130vw); height:1100px; pointer-events:none;
  background:radial-gradient(52% 40% at 50% 0%,
    rgba(255,200,96,.17), rgba(255,172,60,.06) 42%, transparent 68%);
  mix-blend-mode:screen;
}
@keyframes bulbSwing{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
@media (prefers-reduced-motion:reduce){ .bulb-rig{ animation:none; transform:rotate(0); } }
/* NOTE: the light pool is sized in PX (not vw) on phones ON PURPOSE. A vw width
   references the LAYOUT viewport, which under mobile shrink-to-fit can inflate;
   a vw pool then grows WITH the inflation and sustains a phantom horizontal
   scroll (94vw of an inflated 526px ICB = 494px). A fixed px width can't feed
   that loop; the root overflow-x:clip mops up any spill on <340px screens. */
@media (max-width:560px){ .bulb-cord{ height:175px; } .bulb-pool{ top:195px; width:340px; } }

/* --- INTERACTIVE LAMP (wired by numbers.js) --------------------------------
   The rig itself stays pointer-events:none so it never blocks the shop; only
   the glass is made clickable. Click = toggle OFF/ON with a flicker; click or
   drag = nudge the pendulum (a decaying swing that hands back to the idle one).
   All added swing is skipped under reduced motion; the on/off click still works.
   ------------------------------------------------------------------------- */
.bulb{ pointer-events:auto; cursor:pointer;
  transition:background .18s ease, box-shadow .2s ease; }
.bulb-pool{ transition:opacity .28s ease; }
/* OFF — kill the emissive glow, cool the glass, drop the light pool */
.bulb-rig.is-off .bulb{
  background:radial-gradient(circle at 40% 30%, #3b372f, #2b271f 52%, #191712);
  box-shadow:0 0 6px 1px rgba(0,0,0,.45) inset;
}
.bulb-rig.is-off .bulb-pool{ opacity:0; }
/* FLICKER — a quick strobe on the glass as it settles into its new state */
.bulb.is-flicker{ animation:bulbFlicker .4s steps(1,end) 1; }
@keyframes bulbFlicker{
  0%{ opacity:1; } 8%{ opacity:.18; } 18%{ opacity:.92; } 30%{ opacity:.1; }
  44%{ opacity:.85; } 58%{ opacity:.28; } 72%{ opacity:1; } 86%{ opacity:.42; }
  100%{ opacity:1; }
}
/* BUMP — a nudged pendulum that decays and lands on the idle swing's start
   angle (-6deg) for a seamless hand-back to bulbSwing. Two mirrored variants
   so a shove reads in the direction it was given. */
.bulb-rig.is-bump-r{ animation:bulbBumpR 2.7s cubic-bezier(.28,.9,.32,1) 1; }
.bulb-rig.is-bump-l{ animation:bulbBumpL 2.7s cubic-bezier(.28,.9,.32,1) 1; }
@keyframes bulbBumpR{
  0%{ transform:rotate(15deg); } 16%{ transform:rotate(-11deg); }
  33%{ transform:rotate(8deg); } 50%{ transform:rotate(-6.5deg); }
  67%{ transform:rotate(4.5deg); } 84%{ transform:rotate(-5deg); }
  100%{ transform:rotate(-6deg); }
}
@keyframes bulbBumpL{
  0%{ transform:rotate(-15deg); } 16%{ transform:rotate(11deg); }
  33%{ transform:rotate(-8deg); } 50%{ transform:rotate(6.5deg); }
  67%{ transform:rotate(-4.5deg); } 84%{ transform:rotate(5deg); }
  100%{ transform:rotate(-6deg); }
}
@media (prefers-reduced-motion:reduce){
  .bulb.is-flicker{ animation:none; }
  .bulb-rig.is-bump-r, .bulb-rig.is-bump-l{ animation:none; }
}

/* =============================================================================
   3 · THE FLIP PHONE — drawn entirely in CSS, no images.

   Each phone is a fixed-footprint slot in the rack so the track scrolls evenly
   regardless of state. Inside the slot, the phone itself is what differs:
   AVAILABLE renders a tall OPEN clamshell (screen lid + hinge + keypad base);
   TAKEN renders a shorter CLOSED shell with a lit red LED.
   ========================================================================== */
.slot{
  flex:0 0 auto; width:216px;
  scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding-top:10px;
}

/* the antenna nub pokes out the top-right of every phone */
.phone{ position:relative; width:150px; }
.phone .antenna{
  position:absolute; top:-9px; right:16px;
  width:7px; height:20px; border-radius:4px 4px 0 0;
  background:linear-gradient(var(--shell-hi), var(--shell-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.phone .antenna::after{                          /* the ball tip */
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--shell-hi), var(--shell-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

/* shared plastic look for lid + base blocks */
.lid, .base, .shell-closed{
  position:relative; width:150px;
  background:linear-gradient(150deg, var(--shell-hi), var(--shell) 40%, var(--shell-lo));
  border:1px solid var(--shell-lo);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 14px 26px rgba(0,0,0,.5);
}

/* ---- OPEN clamshell (AVAILABLE) ------------------------------------------ */
.lid{
  border-radius:20px 20px 8px 8px;
  padding:16px 14px 12px;
}
.hinge{
  width:132px; height:11px; margin:-1px auto;
  background:linear-gradient(var(--shell-lo), #000);
  border-left:1px solid var(--shell-lo); border-right:1px solid var(--shell-lo);
  position:relative;
}
.hinge::before, .hinge::after{           /* the two barrel knuckles */
  content:""; position:absolute; top:1px; width:20px; height:9px; border-radius:3px;
  background:linear-gradient(var(--shell-hi), var(--shell-lo));
}
.hinge::before{ left:10px; } .hinge::after{ right:10px; }
.base{
  border-radius:8px 8px 22px 22px;
  padding:12px 14px 16px;
}

/* the GREEN monochrome LCD */
.screen{
  position:relative; border-radius:7px; overflow:hidden;
  padding:16px 10px;
  background:var(--lcd-bg);
  border:2px solid #000;
  box-shadow:0 0 0 2px var(--shell-lo), inset 0 0 18px rgba(0,0,0,.85);
}
.screen::before{                          /* phosphor bloom + scanlines */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, var(--lcd-glow), transparent 70%);
  mix-blend-mode:screen; opacity:.7;
}
.scr-top{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--lcd-on); font-family:var(--font-num);
  font-size:8px; letter-spacing:.06em; margin-bottom:8px; opacity:.85;
}
.scr-bars{ letter-spacing:1px; }
.scr-num{
  color:var(--lcd-ink);
  font-family:var(--font-num); font-weight:700;
  font-size:16px; line-height:1.15; letter-spacing:.02em; text-align:center;
  /* the "black" digits sit in a lit green pill so they read as burned-in */
  background:var(--lcd-on);
  border-radius:3px; padding:5px 4px;
  box-shadow:0 0 10px var(--lcd-glow);
  position:relative; z-index:1;
}
.scr-tag{
  margin-top:8px; text-align:center;
  color:var(--lcd-on); font-family:var(--font-num);
  font-size:8px; letter-spacing:.14em; opacity:.85;
}

/* the KEYPAD under the hinge */
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:4px; }
.keypad .key{
  height:15px; border-radius:4px;
  background:linear-gradient(var(--shell-hi), var(--shell-lo));
  border:1px solid var(--shell-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-lo); font-family:var(--font-num); font-size:7px; line-height:1;
}
/* the d-pad / talk row above the digits */
.navrow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.navrow .soft{
  width:26px; height:9px; border-radius:3px;
  background:linear-gradient(var(--shell-hi), var(--shell-lo));
  border:1px solid var(--shell-lo);
}
.navrow .dpad{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--shell-hi), var(--shell-lo));
  border:1px solid var(--shell-lo);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.28);
}

/* the crooked white TAPE label slapped on the base */
.tape{
  position:absolute; z-index:5; left:50%; bottom:-14px;
  transform:translateX(-52%) rotate(-6deg);
  padding:4px 12px 5px;
  background:#f4f1e6;
  color:#141018;
  font-family:var(--font-num); font-weight:700; font-size:11px; letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  /* torn / uneven edges + a sheen so it reads as stuck-on masking tape */
  clip-path:polygon(2% 12%, 99% 4%, 97% 88%, 3% 96%);
}
.tape::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,.5), transparent 40%);
  mix-blend-mode:overlay;
}
.slot:nth-child(even) .tape{ transform:translateX(-48%) rotate(5deg); }
.slot:nth-child(3n) .tape{ transform:translateX(-50%) rotate(-9deg); }

/* CLOSED phones carry the tape UP onto the middle of the shut clamshell
   (a shut phone hides the number, so the tape is where you read it). Open
   phones have no tape at all now — the LCD shows the number. */
.slot.taken .tape{ bottom:auto; top:106px; }

/* ---- CLOSED shell (TAKEN) ------------------------------------------------ */
.phone.is-closed{ padding-top:26px; }             /* sit lower — a shut clamshell is shorter */
.shell-closed{
  height:172px; border-radius:22px 22px 24px 24px;
  padding:16px 14px;
  display:flex; flex-direction:column; align-items:center;
}
.shell-closed::before{                             /* the external screen sliver + seam */
  content:""; position:absolute; left:14px; right:14px; top:50%;
  height:1px; background:var(--shell-lo);
  box-shadow:0 -1px 0 rgba(255,255,255,.05);
}
.ext-screen{
  width:96px; height:34px; border-radius:5px;
  background:linear-gradient(160deg, #14101f, #06040b);
  border:1px solid #000;
  box-shadow:inset 0 0 12px rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-family:var(--font-num); font-size:8px; letter-spacing:.14em;
}
.brand-etch{
  margin-top:auto; color:var(--ink-faint);
  font-family:var(--font-num); font-size:8px; letter-spacing:.24em; opacity:.7;
}

/* the RED LED — the whole point of the TAKEN state */
.led{
  position:absolute; top:14px; right:20px; z-index:4;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8a8f, var(--loss) 55%, #7a1519);
  box-shadow:0 0 6px var(--loss), 0 0 14px rgba(242,84,91,.7);
  animation:ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ---- VIP: early-2000s BEDAZZLED phones ----------------------------------- */
/* Gold rhinestone frame + a scattered gem field, all pure CSS (no images, so
   the CSP stays happy). VIP lines are the blinged-out flip phones. */
.slot.vip .lid,
.slot.vip .base,
.slot.vip .shell-closed{
  border-color:#f7c948;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 6px rgba(0,0,0,.5),
    0 0 0 2px rgba(247,201,72,.60),
    0 0 18px rgba(255,110,196,.40),
    0 14px 26px rgba(0,0,0,.5);
}
/* the rhinestone sprinkle — tiny twinkling gems over the shell */
.slot.vip .lid::after,
.slot.vip .shell-closed::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:inherit;
  background-image:
    radial-gradient(circle at 12% 15%, #ffffff 0 1px, transparent 2.2px),
    radial-gradient(circle at 83% 11%, #ffd1ec 0 1px, transparent 2.4px),
    radial-gradient(circle at 26% 80%, #bfe4ff 0 1px, transparent 2.4px),
    radial-gradient(circle at 69% 68%, #ffffff 0 1px, transparent 2.2px),
    radial-gradient(circle at 47% 40%, #ffe58a 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 90% 85%, #ffffff 0 1px, transparent 2.2px),
    radial-gradient(circle at 7% 54%, #ffd1ec 0 1px, transparent 2.2px),
    radial-gradient(circle at 55% 90%, #bfe4ff 0 1px, transparent 2.2px);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.7));
  animation:vipTwinkle 2.6s ease-in-out infinite;
}
@keyframes vipTwinkle{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .slot.vip .lid::after,
  .slot.vip .shell-closed::after{ animation:none; }
}
/* little gold "VIP" pill in the caption */
.slot-vip{
  margin-left:8px; padding:2px 11px; border-radius:999px;
  font-size:13px; font-weight:900; letter-spacing:.10em;
  color:#3a2a00;
  background:linear-gradient(180deg,#ffe58a,#f7c948);
  box-shadow:0 0 8px rgba(247,201,72,.6), inset 0 1px 0 rgba(255,255,255,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}

/* ---- the caption + action under each phone ------------------------------- */
.slot-foot{ margin-top:26px; text-align:center; width:100%; }
.slot-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.slot-status .dot{ width:9px; height:9px; border-radius:50%; }
.slot.avail .slot-status{ color:var(--gain); }
.slot.avail .slot-status .dot{ background:var(--gain); box-shadow:0 0 8px var(--gain); }
.slot.taken .slot-status{ color:var(--loss); }
.slot.taken .slot-status .dot{ background:var(--loss); box-shadow:0 0 8px var(--loss); }

.slot-numline{ margin-top:6px; color:var(--ink-lo); font-size:11px; }
.slot-numline .num{ color:var(--ink-mid); }

.rent-btn{
  margin-top:12px;
  background:var(--p300); color:var(--ink-hi);
  border:1px solid var(--p500); border-radius:10px;
  padding:11px 24px; font-weight:800; font-size:15px; letter-spacing:.03em;
  box-shadow:0 6px 18px rgba(46,134,200,.35);
  transition:background .16s ease, transform .1s ease, box-shadow .16s ease;
}
.rent-btn:hover{ background:var(--p400); box-shadow:0 8px 22px rgba(77,169,238,.5); }
.rent-btn:active{ transform:translateY(1px); }
.taken-note{ margin-top:12px; display:inline-block; color:var(--ink-faint); font-size:14px; }

/* a gentle idle bob for open phones so the shelf feels alive (motion-safe) */
.slot.avail .phone{ animation:bob 5s ease-in-out infinite; }
.slot.avail:nth-child(even) .phone{ animation-delay:-2.5s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* ---------------------------------------------------------------------------
   4 · RENT PREVIEW MODAL + TOAST
   ------------------------------------------------------------------------ */
#rentModal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
/* CRITICAL: the ID rule above beats the UA [hidden] attribute, so without this
   the modal shows on load AND can't be dismissed (hidden=true had no effect). */
#rentModal[hidden]{ display:none !important; }
.rm-backdrop{ position:absolute; inset:0; background:rgba(5,4,10,.78); backdrop-filter:blur(3px); }
.rm-card{
  position:relative; z-index:1; width:min(400px,100%);
  background:var(--raised); border:1px solid var(--p500);
  border-radius:16px; padding:22px 22px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  animation:rmIn .18s ease;
}
@keyframes rmIn{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.rm-x{ position:absolute; top:12px; right:14px; color:var(--ink-lo); font-size:20px; line-height:1; padding:2px 6px; }
.rm-x:hover{ color:var(--ink-hi); }
.rm-tag{
  color:var(--sweep); font-size:9px; font-weight:800; letter-spacing:.14em;
  margin-bottom:10px;
}
.rm-card h3{ margin:0 0 14px; color:var(--ink-hi); font-size:18px; }
.rm-screen{
  background:var(--lcd-bg); border:2px solid #000; border-radius:8px;
  padding:14px; text-align:center; margin-bottom:14px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.85);
}
.rm-num{
  color:var(--lcd-ink); background:var(--lcd-on);
  font-weight:700; font-size:18px; letter-spacing:.03em;
  padding:6px 10px; border-radius:4px; display:inline-block;
  box-shadow:0 0 14px var(--lcd-glow);
}
.rm-body{ color:var(--ink-mid); font-size:12.5px; line-height:19px; margin:0 0 18px; }
.rm-actions{ display:flex; gap:10px; }
.rm-go{
  flex:1 1 auto; background:var(--p300); color:var(--ink-hi);
  border:1px solid var(--p500); border-radius:10px; padding:10px; font-weight:800;
  text-align:center; text-decoration:none; cursor:pointer;
}
.rm-go:hover{ background:var(--p400); }
.rm-cancel{
  flex:0 0 auto; background:var(--raised); color:var(--ink-mid);
  border:1px solid var(--hairline-2); border-radius:10px; padding:10px 16px;
}
.rm-cancel:hover{ border-color:var(--p500); color:var(--ink-hi); }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  z-index:90; max-width:calc(100vw - 32px);
  background:var(--raised); color:var(--ink-hi);
  border:1px solid var(--p500); border-radius:10px;
  padding:11px 18px; font-size:13px; font-weight:600;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast .t-strong{ color:var(--gain); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------------
   5 · REDUCED MOTION — freeze all decoration; states stay fully legible.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  #rack{ scroll-behavior:auto; }
  .led{ opacity:1; }          /* stays lit, just doesn't pulse */
  .frag-live i{ opacity:1; }
}

/* ---------------------------------------------------------------------------
   6 · RESPONSIVE — the carousel and hero adapt down to phone widths.
   ------------------------------------------------------------------------ */
@media (max-width: 719px){
  #hero{ min-height:auto; padding:30px 14px 30px; }
  #inv-summary{ gap:12px; padding:12px 14px; width:100%; }
  .inv-n{ font-size:22px; }
  #store{ padding:20px 8px 56px; }
  #rack{ padding:12px 30px 24px; gap:12px; }
  .slot{ width:190px; }
  .rack-nav{ width:36px; height:36px; font-size:20px; }
  .rack-prev{ left:-2px; } .rack-next{ right:-2px; }
}
@media (max-width: 419px){
  #hero-tag{ font-size:14px; }
  .inv-div{ display:none; }
  #inv-summary{ justify-content:space-between; }
}

/* FRAGZ rental sign — the founder's own sign image, edges cleaned (white margin
   auto-trimmed), shown as a neat clickable plaque linking to @frag. */
.frag-sign{
  display:inline-block; vertical-align:bottom; margin:10px 14px 2px 0;
  line-height:0; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  transform:translateZ(0); transition:transform 100ms ease, box-shadow 100ms ease;
}
.frag-sign:hover{ transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10); }
.frag-sign:active{ transform:translateY(1px); }
.frag-sign-img{ display:block; height:112px; width:auto; max-width:100%; }
@media (max-width:560px){ .frag-sign-img{ height:74px; } }
@media (prefers-reduced-motion:reduce){ .frag-sign{ transition:none; } }

/* =============================================================================
   PLATFORM FOOTER — on every page.
   ========================================================================== */
.it-foot{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:12px; padding:26px 16px 40px; margin-top:24px;
  border-top:1px solid var(--hairline-2);
  color:var(--ink-faint); font-size:13px;
}
.it-foot .foot-net{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-lo); }
.it-foot .foot-hash{ width:18px; height:18px; border-radius:50%; }
.it-foot a{ color:var(--ink-lo); text-decoration:none; }
.it-foot a:hover{ color:var(--ink-hi); }
.it-foot .foot-pyonya b{ color:var(--ink-mid); }
.it-foot .foot-sep{ opacity:.45; }

/* =============================================================================
   LIST-YOUR-NUMBER CTA — page-local restyle (overrides fragchat.css).

   The base look (a loud, centred blue-gradient hero button) ships in
   fragchat.css. This is a secondary "sell side" action, not the hero, so we
   quiet it to a left-aligned neutral ghost button that reads as shop chrome.
   Scoped under .rack-section for the higher specificity needed to win over the
   later-loaded fragchat.css WITHOUT editing that file.
   ========================================================================== */
.rack-section .fc-list-cta-wrap{
  align-items:flex-start; text-align:left; margin:2px 0 16px;
}
.rack-section .fc-list-cta{
  padding:8px 14px; border-radius:9px; gap:8px;
  color:var(--ink-lo); font-weight:700; font-size:13px; letter-spacing:.01em;
  background:var(--raised);
  border:1px solid var(--hairline);
  box-shadow:none;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.rack-section .fc-list-cta b{ font-weight:800; color:var(--ink-mid); }
.rack-section .fc-list-cta-ic{ font-size:14px; color:var(--ink-faint); }
.rack-section .fc-list-cta:hover{
  transform:none; filter:none; box-shadow:none;
  color:var(--ink-hi); background:var(--hover); border-color:var(--hairline-2);
}
.rack-section .fc-list-cta:hover .fc-list-cta-ic{ color:var(--ink-lo); }
.rack-section .fc-list-cta:active{ transform:translateY(1px); }