/* ============================================================================
   npod.css — ALL new styles for the npod staging build live here.
   styles.css / mp.css only ever receive CLEANUP edits — never new features.
   Discipline for build agents: insert your rules ABOVE your domain anchor
   comment (@SP-SECTION for game.js/index.html work, @MP-SECTION for mp.* work,
   @SHARED-SECTION for cross-page components). Never edit another domain's block.
   ========================================================================== */

:root{
  --np-r-sm:10px; --np-r-md:14px; --np-r-lg:18px;
  --np-gold:#ffd27a;
  --np-card-bg:linear-gradient(180deg,rgba(30,40,80,.45),rgba(16,22,48,.55));
  --np-card-bd:1px solid rgba(122,151,255,.16);
}

/* ---- core components (design system §3 of SPEC.md) ---- */
.np-card{ background:var(--np-card-bg); border:var(--np-card-bd); border-radius:var(--np-r-lg); padding:14px 16px; }
.np-card--hero{ position:relative; border:1px solid transparent;
  background:linear-gradient(180deg,rgba(30,40,80,.6),rgba(16,22,48,.72)) padding-box,
             linear-gradient(120deg,#3de0ff,#5ea0ff,#9a6bff) border-box;
  box-shadow:0 8px 28px rgba(61,124,255,.14); }
.np-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:rgba(30,40,80,.5); border:1px solid rgba(122,151,255,.18); font-size:.82rem; cursor:pointer;
  color:inherit; text-decoration:none; }
.np-chip:active{ transform:scale(.96); }
.np-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px;
  border-radius:var(--np-r-md); border:0; cursor:pointer; font-weight:700; font-size:.95rem;
  background:linear-gradient(120deg,#3de0ff,#5ea0ff,#9a6bff); color:#081127; }
.np-btn:active{ transform:scale(.97); }
.np-btn--ghost{ background:rgba(30,40,80,.5); color:inherit; border:1px solid rgba(122,151,255,.25); }
.np-row{ display:flex; gap:10px; flex-wrap:wrap; }
.np-muted{ opacity:.72; font-size:.82rem; }
.np-gold{ color:var(--np-gold); }

/* ---- SP landing redesign (SPEC §5.1) — consistent 16px section rhythm ---- */
.panel--intro > .np-daily, .panel--intro > .namefield, .panel--intro > .diff,
.panel--intro > .np-modes, .panel--intro > .np-wotd{ margin-top:16px; }

/* Daily Ladder hero card (primary CTA). Sundays: game.js swaps the copy to 💙 Milo's Sunday Ladder. */
.np-daily{ text-align:left; }
.np-daily__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.np-daily__title{ font-weight:900; font-size:1.02rem; letter-spacing:.01em; }
.np-daily__lvl{ font-size:.72rem; padding:4px 10px; cursor:default; }
.np-daily__streak{ font-size:.72rem; padding:4px 10px; cursor:default; color:var(--np-gold);
  border-color:rgba(255,210,122,.4); }
.np-daily__sub{ font-size:.78rem; opacity:.75; margin:6px 0 10px; }
.np-daily__go{ width:100%; font-size:1.02rem; padding:13px 18px; }
.np-daily__done{ margin-top:10px; font-size:.82rem; color:var(--np-gold); }
.np-daily__done a{ color:#7fd0ff; text-decoration:underline; cursor:pointer; }
.np-daily--sunday .np-daily__title{ color:#9fc4ff; }   /* 💙 Milo's Sunday Ladder — soft blue, warm not loud */

/* modes row — three equal cards (Zen / Sprint / Online) */
.np-modes{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.np-chip--mode{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px;
  background:var(--np-card-bg); border:var(--np-card-bd); border-radius:var(--np-r-md);
  color:inherit; text-decoration:none; cursor:pointer; font:inherit; font-size:1.05rem; }
.np-chip--mode b{ font-size:.85rem; }
.np-chip--mode small{ font-size:.62rem; opacity:.6; letter-spacing:.04em; }
.np-chip--mode:active{ transform:scale(.97); }
@media (max-width:400px){ .np-chip--mode small{ display:none; } }   /* collapse gracefully on tiny phones */

/* Word-of-the-Day mini-card container — Wave 3 fills #wotdCard; hidden until then */
.np-wotd{ text-align:left; font-size:.86rem; }

/* footer privacy/about links on the landing (also used by the static pages) */
.panel__foot .np-footlinks{ margin:10px auto 0; }

/* scorecard: one-time "claim your rank" box (guest → name → deferred submit) */
.np-claim{ margin:12px 0; text-align:left; }
.np-claim__t{ font-weight:700; font-size:.9rem; margin-bottom:8px; }
.np-claim__row{ display:flex; gap:8px; }
.np-claim__row input{ flex:1; min-width:0; padding:10px 12px; border-radius:var(--np-r-sm);
  background:rgba(8,12,30,.7); border:1px solid rgba(122,151,255,.3); color:inherit;
  font:inherit; text-transform:uppercase; letter-spacing:.08em; }
.np-claim__row .np-btn{ padding:10px 16px; }

/* scorecard: emoji share-grid preview (matches the shared text exactly) */
.np-sharegrid{ margin:10px auto 0; width:max-content; max-width:100%; overflow-x:auto;
  white-space:pre-line; line-height:1.25; font-size:.82rem; letter-spacing:1px;
  padding:10px 14px; border-radius:var(--np-r-md); background:rgba(8,12,30,.55);
  border:1px solid rgba(122,151,255,.18); }

/* HUD 🔥 streak chip — sits under the player label in the score box */
.hud__streak{ font-size:.6rem; color:var(--np-gold); letter-spacing:.06em; }

/* ---- SP wave-3 P1/P2 features (game.js / index.html) ---- */
/* ⚔️ challenge/duel landing banner (§8.1/§8.7) */
.np-chall{ text-align:left; }
.np-chall__t{ font-weight:900; font-size:.98rem; }
.np-chall__s{ font-size:.78rem; opacity:.75; margin:5px 0 10px; }
.np-chall__go{ width:100%; }
/* 🌀 weekly Mood chip (§8.8) — pure flavor, gold-free so it never competes with the daily card.
   ONE consolidated block for both pages (colour folded in from the former MP-section duplicate). */
.np-mood{ font-size:.74rem; cursor:default; opacity:.85; color:#9fe2ff; }
.np-moodrow{ margin-top:12px; text-align:center; }
/* 🐾 referral fine print under the challenger pill (§8.10) */
.np-refline{ margin-top:6px; font-size:.7rem; opacity:.65; }
/* boss-stage chip in the HUD (§8.8) — presentation only; data-s drives the accent */
.hud__stage{ display:inline-block; margin-bottom:2px; padding:2px 9px; border-radius:999px; width:max-content;
  font-size:.58rem; letter-spacing:.08em; background:rgba(30,40,80,.55); border:1px solid rgba(122,151,255,.25); }
.hud__stage[data-s="2"]{ color:var(--np-gold); border-color:rgba(255,210,122,.4); }
.hud__stage[data-s="3"]{ color:#ffb0a0; border-color:rgba(255,120,90,.5); background:rgba(80,20,14,.5); }
/* scorecard: challenge/duel compare line + install card + recap + duel board */
.np-cmp{ margin:12px 0 0; font-size:.9rem; text-align:left; }
.np-install{ margin:12px 0 0; text-align:left; }
.np-install__t{ font-weight:900; font-size:.95rem; }
.np-install__s{ font-size:.82rem; opacity:.85; margin:6px 0 10px; }
.np-recap{ margin:12px 0 0; text-align:left; }
.np-recap__t{ font-weight:700; font-size:.88rem; margin-bottom:8px; }
.np-recap__list{ list-style:none; margin:0; padding:0; }
.np-recap__list li{ margin:0 0 9px; font-size:.82rem; line-height:1.45; }
.np-recap__list li:last-child{ margin-bottom:0; }
.np-recap__list b{ letter-spacing:.12em; }
.np-recap__list i{ opacity:.6; font-size:.74rem; }
.np-recap__list span{ display:block; opacity:.8; }
.np-duelb{ margin:12px 0 0; text-align:left; }
.np-duelb__t{ font-weight:700; font-size:.88rem; margin-bottom:8px; }
/* board scope tabs (§8.2) — smaller second row under the level tabs / rank head */
.lbtabs--scope{ display:flex; gap:6px; margin:8px 0; flex-wrap:wrap; }
.lbtabs--scope button{ flex:1; padding:6px 10px; font-size:.74rem; border-radius:999px; cursor:pointer;
  color:inherit; font:inherit; background:rgba(30,40,80,.5); border:1px solid rgba(122,151,255,.18); }
.lbtabs--scope button.is-on{ background:linear-gradient(120deg,#3de0ff,#5ea0ff,#9a6bff); color:#081127; font-weight:700; }
#lbTabs.is-dim button{ opacity:.4; }   /* level tabs don't apply while the Daily scope is showing */
/* small centered mini-panels (sprint chooser / tutorial offer) */
.panel--mini{ max-width:380px; text-align:center; }
.np-row--center{ justify-content:center; margin-top:12px; }
.np-tutpod{ display:block; margin:0 auto 4px; border-radius:50%; }
/* 📚 My Words overlay (§8.3) */
.np-wordshead{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.np-wordshead .np-btn{ padding:8px 14px; font-size:.82rem; }
.np-wordslist{ list-style:none; margin:0; padding:0; text-align:left; }
.np-wordslist li{ padding:8px 2px; border-bottom:1px solid rgba(122,151,255,.12); font-size:.84rem; line-height:1.45; }
.np-wordslist li:last-child{ border-bottom:0; }
.np-wordslist b{ letter-spacing:.12em; }
.np-wordslist i{ opacity:.6; font-size:.74rem; }
.np-wordslist span{ display:block; opacity:.8; }
.np-wordslist .empty{ opacity:.6; border:0; text-align:center; padding:18px 0; }
/* the 5-question quiz */
.np-quiz{ text-align:left; margin:0 0 12px; }
.np-quiz__q{ font-size:.9rem; margin:0 0 10px; }
.np-quiz__opt{ display:block; width:100%; margin:0 0 8px; padding:10px 12px; border-radius:var(--np-r-md);
  background:rgba(30,40,80,.5); border:1px solid rgba(122,151,255,.22); color:inherit; font:inherit;
  font-size:.82rem; text-align:left; cursor:pointer; }
.np-quiz__opt.is-right{ border-color:rgba(90,230,160,.7); background:rgba(20,60,40,.55); }
.np-quiz__opt.is-wrong{ border-color:rgba(255,110,90,.7); background:rgba(70,22,16,.55); }
/* 🎖️ badges grid (§8.8) */
.np-badgegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; text-align:left; }
@media (max-width:400px){ .np-badgegrid{ grid-template-columns:1fr; } }
.np-badge{ background:var(--np-card-bg); border:var(--np-card-bd); border-radius:var(--np-r-md); padding:10px 12px; }
.np-badge b{ display:block; font-size:.8rem; letter-spacing:.04em; }
.np-badge small{ display:block; font-size:.7rem; opacity:.7; line-height:1.4; }
.np-badge__ic{ font-size:1.3rem; float:right; margin-left:6px; }
.np-badge__p{ display:block; margin-top:5px; font-size:.68rem; font-style:normal; color:var(--np-gold); }
.np-badge:not(.is-on){ opacity:.45; filter:grayscale(.6); }
.np-badge:not(.is-on) .np-badge__p{ color:inherit; opacity:.7; }
/* badge unlock toast — slides up, compositor-only (transform/opacity), auto-removes */
.np-badgetoast{ position:fixed; left:50%; bottom:26px; z-index:120; display:flex; align-items:center; gap:10px;
  max-width:min(92vw,380px); transform:translate(-50%,20px); opacity:0; transition:transform .3s ease,opacity .3s ease;
  pointer-events:none; font-size:.84rem; line-height:1.4; }
.np-badgetoast.show{ transform:translate(-50%,0); opacity:1; }
.np-badgetoast__ic{ font-size:1.6rem; }
/* 📖 Word of the Day card (§8.3) */
.np-wotd__head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.np-wotd__lbl{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.np-wotd__w{ font-size:1.05rem; letter-spacing:.14em; }
.np-wotd__ipa{ opacity:.6; font-size:.78rem; }
.np-wotd__def{ margin:6px 0 10px; opacity:.85; line-height:1.5; }
.np-wotd__go{ padding:9px 14px; font-size:.82rem; }
/* 🧘 ZEN mode (SP-only): no clock, no coins — study chrome. `.zen` lives on #app */
.zen .hud__timer{ visibility:hidden; }          /* keeps the HUD grid stable, clock simply absent */
.zen .hud__coins, .zen #revealBtn{ display:none; }
.zen .bub__def{ font-size:.92rem; line-height:1.55; }   /* the meaning IS the point in zen — read it comfortably */
.zen .bub__say{ font-size:.9rem; }
.bub__speak{ margin-top:6px; padding:3px 10px; border-radius:999px; border:1px solid rgba(122,151,255,.3);
  background:rgba(30,40,80,.5); color:inherit; font-size:.78rem; cursor:pointer; display:block; }
.is-noclock .hud__timer{ visibility:hidden; }   /* tutorial's untimed first turns hide the clock too */
/* ⚡ SPRINT mode: no pod / no coins / no lifeline-bonus-reveal — strip those controls */
.is-sprint .hud__coins, .is-sprint #revealBtn, .is-sprint #powerBtn, .is-sprint #bonusBtn,
.is-sprint .hud__stage{ display:none; }
/* zen scorecard = quiet recap: no rank board, no claim, no share grid */
#scorePanel.is-zen .rankboard, #scorePanel.is-zen .np-claim, #scorePanel.is-zen .np-sharegrid{ display:none; }
/* tutorial pod speech bubbles read like chat, slightly bigger than a def line */
.bub__say{ font-size:.86rem; line-height:1.5; }

/* ============================ @SP-SECTION ============================ */
/* (game.js / index.html feature styles are inserted above this line) */

/* ---- MP wave-1 fixes (mp.js / mp.html) ---- */
/* own scoreboard pill — player = CYAN (matches the .row--you chat bubble palette; rivals keep pc-0..3) */
.mp-sc.me-pc .mp-sc__pic{ background:linear-gradient(135deg,#3de0ff,#5ea0ff); color:#081127; }
/* pod-wins crown = Milo's face (never 🤖) — sized to sit where the big emoji did */
.mp-over__crown .mp-milo--crown{ width:56px; height:56px; vertical-align:middle; }
/* "reconnecting…" pill — appears after 2 consecutive poll failures; static (no animation — battery) */
.np-net{ position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:70; padding:5px 14px;
  border-radius:999px; font-size:.78rem; color:#ffc2b0; background:rgba(40,16,14,.9);
  border:1px solid rgba(255,140,110,.35); pointer-events:none; }
/* "loading dictionary…" chip above the tiles while the word list for this length is still loading */
.np-dictchip{ margin:2px auto 4px; width:max-content; max-width:90%; padding:4px 12px; border-radius:999px;
  font-size:.74rem; opacity:.85; background:rgba(30,40,80,.6); border:1px solid rgba(122,151,255,.25); }
/* "joining lobby CODE after sign-in" hint on the login card (deep-link stashed through the OTP flow) */
.np-joinhint{ margin:10px 0 0; padding:7px 12px; border-radius:999px; font-size:.82rem; width:max-content;
  max-width:100%; margin-left:auto; margin-right:auto; background:rgba(30,40,80,.55);
  border:1px solid rgba(122,151,255,.3); color:#cfe0ff; }
/* modal shake — empty password submit (transform-only, one-shot) */
.np-shake{ animation:npShake .3s ease; }
@keyframes npShake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-7px) } 60%{ transform:translateX(6px) } }

/* ---- MP wave-2 P0 features (mp.js / mp.html) ---- */
/* "🐾 Daily #N" chip (§5.3) — gold accent; on mp-badge (lobby card / waiting room) AND hud__mode (game HUD) */
.mp-badge.np-daily{ background:rgba(80,60,16,.45); border-color:rgba(255,210,122,.45); color:var(--np-gold); }
#mpDaily:not([hidden]){ display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px;
  background:rgba(80,60,16,.55); border:1px solid rgba(255,210,122,.45); color:var(--np-gold);
  font-size:.6rem; letter-spacing:.08em; text-shadow:none; }
/* tiny "not ranked" fine print next to the daily chip on lobby cards */
.np-finep{ font-size:.74rem; opacity:.75; }
/* guest badge in the top bar (§8.5) */
.np-guestbadge{ font-size:.56rem; font-weight:800; letter-spacing:.14em; padding:2px 7px; border-radius:999px;
  background:rgba(80,60,16,.55); border:1px solid rgba(255,210,122,.4); color:var(--np-gold); flex:0 0 auto; }
/* "or — play as guest" block on the login card */
.np-guestrow{ margin-top:14px; }
.np-guestrow .mp-note{ margin-top:8px; }
.np-or{ display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--mp-muted,#8ea6c8);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.np-or::before,.np-or::after{ content:''; flex:1; height:1px; background:rgba(122,151,255,.22); }
/* spectator banner (§8.6) — static chrome, no animation (battery) */
.np-specbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin:6px 10px 2px; padding:8px 12px; border-radius:var(--np-r-md);
  background:linear-gradient(180deg,rgba(30,40,80,.55),rgba(16,22,48,.65)); border:1px solid rgba(122,151,255,.28); }
.np-specbar__lbl{ font-size:.82rem; font-weight:700; }
.np-specbar__cta{ display:flex; gap:8px; flex-wrap:wrap; }
.np-specbar__cta .mp-btn{ padding:6px 12px; font-size:.78rem; }
/* read-only mode: no tiles/keyboard/send, no personal score/coins (spectators have neither) */
body.is-spectate #mpDock{ display:none; }
body.is-spectate .hud__right{ display:none; }
body.is-spectate #mpChat{ padding-bottom:10px; }
/* emoji share-grid preview on #v-over (§5.5) — plain <pre>, emoji rows, centered */
.np-grid{ margin:4px auto 10px; padding:10px 14px; width:max-content; max-width:100%; overflow-x:auto;
  border-radius:var(--np-r-md); background:rgba(13,18,38,.65); border:1px solid rgba(122,151,255,.2);
  font-family:inherit; font-size:.85rem; line-height:1.35; letter-spacing:1px; text-align:center; white-space:pre; }
/* privacy/about links under the RapidLoop footer lockup (lobby screens) */
.rl-sitefoot .np-footlinks{ margin:12px auto 0; }

/* ---- MP wave-3 P1/P2 features (mp.js / mp.html) ---- */
/* boss-stage chip (§8.8) — vs-pod HUD only; pod = PURPLE accent, data-s="3" (APEX) warms to ember */
#mpStage:not([hidden]){ display:inline-flex; align-items:center; gap:3px; padding:2px 9px; border-radius:999px;
  background:rgba(64,32,96,.5); border:1px solid rgba(190,120,255,.4); color:#d9b8ff;
  font-size:.6rem; letter-spacing:.08em; text-shadow:none; }
#mpStage[data-s="3"]{ background:rgba(96,32,24,.55); border-color:rgba(255,150,90,.5); color:#ffc9a3; }
/* weekly Mood (§8.8): np-mood--bar = lobby-browser banner line; span.np-mood = waiting-room badge
   (base .np-mood chip lives in the SP section above — one block for both pages) */
.np-mood--bar{ margin:10px 0 2px; padding:8px 14px; border-radius:999px; width:max-content; max-width:100%;
  font-size:.8rem; background:rgba(20,40,70,.5); border:1px solid rgba(122,200,255,.25); }
.np-mood--bar small{ opacity:.6; font-size:.68rem; }
span.np-mood{ border-color:rgba(122,200,255,.35); background:rgba(20,40,70,.5); }
/* rematch nudge on #v-over — button swaps to a "you're in" chip once tapped (visual-only, see mp.js) */
.np-nudge{ margin:10px 0 2px; }
.np-nudge .np-btn{ font-size:.85rem; padding:9px 16px; border-radius:999px; }   /* pill — matches the mp-btn system this card lives in */
.np-nudge__on{ display:inline-block; padding:8px 14px; border-radius:999px; font-size:.82rem; color:var(--np-gold);
  background:rgba(80,60,16,.45); border:1px solid rgba(255,210,122,.4); }

/* ============================ @MP-SECTION ============================ */
/* (mp.js / mp.html feature styles are inserted above this line) */

/* ---- static content pages (privacy.html / press.html / bn.html) ----
   These pages link styles.css for the brand tokens/wordmark, but styles.css is built
   for the fixed game shell (body{overflow:hidden;height:100%}) — .np-page reverts
   that so long-form pages scroll normally. */
body.np-page{ overflow-y:auto; height:auto; min-height:100dvh;
  padding:0 18px calc(env(safe-area-inset-bottom) + 44px); overscroll-behavior:auto; }
.np-brandbar{ display:flex; align-items:center; gap:12px; max-width:720px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 0 6px; }
.np-brandbar a{ text-decoration:none; }
.np-brandbar__tag{ font-size:.62rem; color:var(--muted2); letter-spacing:.22em; text-transform:uppercase; margin-right:auto; }
.np-brandbar__back{ font-size:.8rem; font-weight:700; color:var(--text); padding:7px 14px; border-radius:999px;
  background:rgba(30,40,80,.5); border:1px solid rgba(122,151,255,.25); }
.np-prose{ max-width:720px; margin:0 auto; line-height:1.75; }
.np-prose h1{ font-size:1.6rem; margin:18px 0 6px; letter-spacing:-.01em; }
.np-prose h2{ font-size:1.05rem; margin:26px 0 8px; color:var(--cyan); }
.np-prose p, .np-prose ul{ margin:0 0 13px; color:#dbe4f7; font-size:.95rem; }
.np-prose ul{ padding-left:22px; }
.np-prose li{ margin-bottom:6px; }
.np-prose small{ color:var(--muted); }
.np-lede{ font-size:1.02rem; color:var(--muted); font-style:italic; }
.np-license{ font-size:.72rem; line-height:1.6; color:var(--muted); background:rgba(13,18,38,.6);
  border:1px solid var(--line); border-radius:var(--np-r-md); padding:12px 14px; margin:10px 0 16px; }
.np-figure{ margin:18px 0; border-radius:var(--np-r-lg); overflow:hidden; border:1px solid rgba(122,151,255,.25); }
.np-figure img{ display:block; width:100%; height:auto; }
.np-figure figcaption{ font-size:.75rem; color:var(--muted2); padding:8px 12px; background:rgba(13,18,38,.7); }
.np-factbox{ margin:16px 0; }
.np-factbox dt{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); margin-top:10px; }
.np-factbox dd{ margin:2px 0 0; font-size:.92rem; }
.np-footlinks{ max-width:720px; margin:34px auto 0; font-size:.74rem; color:var(--muted2); text-align:center; }
.np-footlinks a{ color:var(--muted); text-decoration:none; }
.np-footlinks a:hover{ color:var(--cyan); }
/* corner "draft — awaiting owner review" chip on bn.html (SPEC §13) */
.np-draftchip{ position:fixed; top:calc(env(safe-area-inset-top) + 10px); right:10px; z-index:9;
  font-size:.68rem; font-weight:700; color:#2b1d00; padding:6px 11px; border-radius:999px;
  background:var(--np-gold); box-shadow:0 4px 14px rgba(0,0,0,.4); }
.np-prose a{ color:#7fd0ff; }

/* 7/8-letter chat-tile chips (.wordchips) shrink on narrow phones so long words never overflow the bubble —
   mirrors the input-tile breakpoints (styles.css .tiles--7/--8 at ≤520/≤400). :has() reads the word length
   off the chip count (chips are built per-letter in both game.js and mp.js); browsers without :has() simply
   keep the larger chips — graceful. Width/height/font only; the cyan/purple theming rules are untouched. */
@media (max-width:520px){
  .wordchips:has(span:nth-child(7)){ gap:4px; }
  .wordchips:has(span:nth-child(7)) span{ width:26px; height:30px; font-size:.92rem; }
  .wordchips:has(span:nth-child(8)) span{ width:24px; height:29px; font-size:.86rem; }
}
@media (max-width:400px){
  .wordchips:has(span:nth-child(7)) span{ width:23px; height:27px; font-size:.82rem; }
  .wordchips:has(span:nth-child(8)) span{ width:21px; height:26px; font-size:.76rem; }
}

/* ========================== @SHARED-SECTION ========================== */
/* (cross-page components are inserted above this line) */

/* ?daily= arrival highlight — one-shot compositor-only pulse on the daily card */
.np-pulse{ animation:npPulse 1.3s ease 2; }
@keyframes npPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }

/* ❓ rejected-Send reason pill — same anchor as .usedtag but neutral, not "error red".
   It carries full sentences ("that's 3 changes — max 2 on this move"), so unlike the tiny
   ALREADY-USED tag it reads at sentence size, sentence case, wraps, and sits on a real pill. */
.usedtag.np-why{ color:#cfe8ff; text-shadow:none; font-size:.74rem; letter-spacing:.02em; text-transform:none;
  font-weight:600; white-space:normal; width:max-content; max-width:min(92vw,340px); text-align:center; line-height:1.35;
  padding:6px 13px; border-radius:12px; background:rgba(8,12,30,.92); border:1px solid rgba(94,160,255,.4);
  box-shadow:0 8px 24px -10px #000; }

/* ⬇ landing fold cue — a static bottom fade on the intro panel while more content sits below
   (game.js toggles .has-more on scroll/resize; the panel's scrollbar is deliberately invisible) */
.panel--intro::after{ content:""; position:sticky; bottom:-27px; display:block; height:34px; margin:-34px -22px 0;
  background:linear-gradient(180deg,transparent,rgba(5,7,18,.94)); pointer-events:none; opacity:0; transition:opacity .25s ease; }
.panel--intro.has-more::after{ opacity:1; }

/* short-viewport compression for the v2 landing sections (the styles.css blocks only shave the v1 parts) */
@media (max-height:780px){
  .panel--intro > .np-daily, .panel--intro > .namefield, .panel--intro > .diff,
  .panel--intro > .np-modes, .panel--intro > .np-wotd{ margin-top:10px; }
  .panel--intro .np-card{ padding:11px 13px; }
  .np-daily__sub{ margin:4px 0 7px; }
  .np-daily__go{ padding:11px 16px; }
  .np-moodrow{ margin-top:8px; }
}
@media (max-height:680px){
  .panel--intro > .np-daily, .panel--intro > .namefield, .panel--intro > .diff,
  .panel--intro > .np-modes, .panel--intro > .np-wotd{ margin-top:8px; }
  .np-chip--mode{ padding:9px 6px; }
}

/* full-width gradient primaries share ONE shape — the pill (matches .btn--play) */
.np-daily__go, .np-chall__go{ border-radius:999px; }

/* 9-letter chat chips need a ≤340px tier too (Nightmare words on the smallest phones) */
@media (max-width:520px){ .wordchips:has(span:nth-child(9)) span{ width:22px; height:27px; font-size:.8rem; } }
@media (max-width:400px){ .wordchips:has(span:nth-child(9)){ gap:3px; } .wordchips:has(span:nth-child(9)) span{ width:20px; height:25px; font-size:.74rem; } }
@media (max-width:340px){ .wordchips:has(span:nth-child(9)) span{ width:18px; height:23px; font-size:.68rem; border-radius:6px; } }