:root{
  --bg: #0b0e12;
  --frame: #111826;
  --edge: #273246;

  /* OFF state */
  --dim: rgba(235,240,255,0.18);

  /* monks = warm discipline */
  --monk-on: rgba(255,220,160,0.95);
  --monk-glow: rgba(255,185,90,0.45);

  /* pirates = cold execution */
  --pirate-on: rgba(185,225,255,0.96);
  --pirate-glow: rgba(80,170,255,0.45);
}

.mode-sentence{
  width: 100%;
margin-bottom:50px;

  /* Force a font that actually supports thin weights */
  font-family: "Inter var", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Prevent browsers from “faking” weight in a way that looks bolder than intended */
  font-synthesis: none;
  font-synthesis-weight: none;}

.mode-sentence__frame{
  width: 100%;
  background: linear-gradient(180deg, var(--frame), rgba(10,14,20,0.7));
  border: 1px solid var(--edge);
  padding: 28px 32px 18px;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.mode-sentence__line{
display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;   /* ← ADD THIS */
  text-align: center;        /* ← ADD THIS (important for wrapping) */
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(22px, 3.5vw, 44px);
}

/* -------------------- */
/* DEFAULT / OFF STATE  */
/* -------------------- */

.word{
  color: rgba(235,240,255,0.14);
  font-weight: 300;
  letter-spacing: 0.14em; /* slightly more air when dormant */
  transition: color 180ms ease, text-shadow 180ms ease, font-weight 180ms ease, letter-spacing 180ms ease;
}

/* emojis are fully hidden by default */
.mode-sentence__emoji{
  display: none;
  font-size: 1.1em;
  margin-right: 6px;
}

/* invariant scripture */
.mode-sentence__scripture{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 600;
  color: rgba(235,240,255,0.38);
  user-select: none;
}

/* -------------------- */
/* MONKS MODE */
/* 🧘‍♂️ We are the pirates monks of capitalism */
/* -------------------- */

.mode-sentence[data-mode="monks"] .mode-sentence__emoji--monk{
  display: inline;
  text-shadow:
    0 0 8px var(--monk-glow),
    0 0 20px rgba(255,190,90,0.25);
}

.mode-sentence[data-mode="monks"] .word--we,
.mode-sentence[data-mode="monks"] .word--are,
.mode-sentence[data-mode="monks"] .word--the,
.mode-sentence[data-mode="monks"] .word--monks,
.mode-sentence[data-mode="monks"] .word--of,
.mode-sentence[data-mode="monks"] .word--capitalism{
  color: var(--monk-on);
  font-weight: 600;
letter-spacing: 0.08em;
  text-shadow:
    0 0 10px var(--monk-glow),
    0 0 26px rgba(255,190,90,0.22);
}

/* pirates stay recessed */
.mode-sentence[data-mode="monks"] .word--pirates{
  color: var(--dim);
  font-weight: 300;
  text-shadow: none;
}

/* -------------------- */
/* PIRATES MODE */
/* 🏴‍☠️ We are the pirates */
/* -------------------- */

.mode-sentence[data-mode="pirates"] .mode-sentence__emoji--pirate{
  display: inline;
  text-shadow:
    0 0 8px var(--pirate-glow),
    0 0 22px rgba(80,170,255,0.3);
}

.mode-sentence[data-mode="pirates"] .word--we,
.mode-sentence[data-mode="pirates"] .word--are,
.mode-sentence[data-mode="pirates"] .word--pirates{
  color: var(--pirate-on);
  font-weight: 600;
letter-spacing: 0.08em;
  text-shadow:
    0 0 10px var(--pirate-glow),
    0 0 28px rgba(80,170,255,0.24);
}

/* monks + structure words recede */
.mode-sentence[data-mode="pirates"] .word--the,
.mode-sentence[data-mode="pirates"] .word--of,
.mode-sentence[data-mode="pirates"] .word--capitalism,
.mode-sentence[data-mode="pirates"] .word--monks{
  color: var(--dim);
  font-weight: 300;
  text-shadow: none;
}

/* -------------------- */
/* DEMO CONTROLS */
/* -------------------- */

.mode-sentence__controls{
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.mode-sentence__controls button{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(235,240,255,0.85);
  padding: 8px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .word{
    transition: none;
  }
}

/* Ensure Font Awesome icons inherit glow + color */
.mode-sentence__emoji i{
  color: currentColor;
}

/* MONKS icon glow */
.mode-sentence[data-mode="monks"] .mode-sentence__emoji--monk i{
  color: var(--monk-on);
  text-shadow:
    0 0 10px var(--monk-glow),
    0 0 26px rgba(255,190,90,0.28);
}

/* PIRATES icon glow */
.mode-sentence[data-mode="pirates"] .mode-sentence__emoji--pirate i{
  color: var(--pirate-on);
  text-shadow:
    0 0 10px var(--pirate-glow),
    0 0 28px rgba(80,170,255,0.32);
}

/* -------------------- */
/* EXPLANATORY TEXT */
/* -------------------- */

.mode-sentence__explain{
  margin-top: 14px;
  text-align: center;
}

/* base (hidden) */
.explain{
  display: none;
  max-width: 720px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* MONKS explanation */
.mode-sentence[data-mode="monks"] .explain--monks{
  display: block;
  color: rgba(255,220,160,0.75);
}

/* PIRATES explanation */
.mode-sentence[data-mode="pirates"] .explain--pirates{
  display: block;
  color: rgba(185,225,255,0.75);
}

/* -------------------- */
/* DIRECTIVE LINE */
/* -------------------- */

.mode-sentence__directive{
  margin-top: 15px;
  text-align: center;
}

/* base (hidden) */
.directive{
  display: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* MONKS directive */
.mode-sentence[data-mode="monks"] .directive--monks{
  display: block;
  color: rgba(255,220,160,0.85);
}

/* PIRATES directive */
.mode-sentence[data-mode="pirates"] .directive--pirates{
  display: block;
  color: rgba(185,225,255,0.9);
}