/* GHOST game layer + big-type overrides.
   Antwan's directive (16 Jul): TEXT SIZE IS BIG — projector at the back of the room
   and a phone in a teenager's hand both read everything. Engine CSS lives in
   @layer sw, so these unlayered rules win without hacks. */

/* ---- engine copy: bigger everything ---- */
.sw-copy { width: min(48vw, 640px); }
.sw-copy__num { font-size: 1rem; letter-spacing: .14em; }
.sw-copy__eyebrow { font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: .22em; font-weight: 800; }
.sw-copy__title { font-size: clamp(2.8rem, 5.8vw, 5rem); font-weight: 900; line-height: 1.0; text-shadow: 0 4px 34px rgba(4, 8, 24, .9); }
.sw-copy__body { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.45; font-weight: 600; color: #cfe0ff; text-shadow: 0 2px 18px rgba(4, 8, 24, .95); max-width: 34ch; }
.sw-copy__tags li { font-size: 1.02rem; font-weight: 800; background: rgba(93, 185, 255, .12); color: #bfe0ff; border-color: rgba(93, 185, 255, .35); }
.sw-hint { font-size: .95rem; }
.sw-brand__name { font-weight: 900; letter-spacing: .3em; }
.sw-route__label { background: rgba(10, 17, 40, .85); color: #eaf2ff; border-color: rgba(93, 185, 255, .3); }

@media (max-width: 860px) {
  .sw-copy { width: auto; }
  .sw-copy__title { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .sw-copy__body { font-size: clamp(1.15rem, 4.6vw, 1.4rem); max-width: none; }
}

/* ---- HUD ---- */
.gh-hud { position: fixed; inset: 0; z-index: 45; pointer-events: none; font-family: 'Poppins', system-ui, sans-serif; }

.gh-level {
  position: absolute; top: clamp(14px, 2.4vw, 26px); left: clamp(18px, 5vw, 64px);
  font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: .2em;
  color: #bfe0ff; text-transform: uppercase; text-shadow: 0 2px 14px rgba(4, 8, 24, .9);
  opacity: 0; transform: translateY(-8px); transition: opacity .5s, transform .5s;
}
.gh-level.is-on { opacity: 1; transform: none; }

.gh-tracker {
  position: absolute; top: clamp(14px, 2.4vw, 26px); right: clamp(18px, 5vw, 64px);
  display: flex; gap: clamp(8px, 1vw, 14px);
}
.gh-tracker span {
  font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1;
  color: rgba(142, 162, 201, .35); transition: color .6s, text-shadow .6s, transform .3s;
}
.gh-tracker span.is-lit {
  color: #5db9ff; text-shadow: 0 0 18px rgba(93, 185, 255, .9), 0 0 46px rgba(93, 185, 255, .5);
}
.gh-tracker span.is-pop { transform: scale(1.35); }

/* ---- level intro card: the letter slam ---- */
.gh-card {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  opacity: 0; visibility: hidden;
}
.gh-card.is-live { opacity: 1; visibility: visible; }
.gh-card__letter {
  font-weight: 900; font-size: clamp(9rem, 30vw, 24rem); line-height: 1; color: #eaf2ff;
  text-shadow: 0 0 40px rgba(93, 185, 255, .85), 0 0 120px rgba(93, 185, 255, .45);
  will-change: transform, opacity;
}
.gh-card__letter.is-word {
  font-size: clamp(3.6rem, 14vw, 11rem); letter-spacing: .1em;
}
.gh-card__name {
  font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.6rem); letter-spacing: .3em;
  text-transform: uppercase; color: #bfe0ff; margin-top: clamp(6px, 1vh, 16px);
  text-shadow: 0 2px 18px rgba(4, 8, 24, .9); will-change: transform, opacity;
}
.gh-card__ring {
  position: absolute; left: 50%; top: 50%; width: 12vmax; height: 12vmax;
  margin: -6vmax 0 0 -6vmax; border-radius: 50%;
  border: 3px solid rgba(93, 185, 255, .8); opacity: 0; will-change: transform, opacity;
}

/* ---- in-world beat cards ---- */
.gb-host { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.gb-host.is-live { opacity: 1; visibility: visible; }
/* Week 6 law (Antwan): text sits on BLACK — nothing behind the words. */
.gb-scrim { position: absolute; inset: 0; background: rgba(3, 5, 14, .97); }

/* FULL-BLEED (Antwan 18 Jul): image fills the whole screen — he wants the videos
   full, not boxed to the side. The 2K source keeps it sharp at full size.
   Desktop/projector: cover the viewport. Phones keep their own layout below. */
@media (min-width: 861px) {
  .sw-scene__video, .sw-scene__still {
    inset: 0 !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center center !important;
  }
}
@media (max-width: 860px) {
  .sw-scene__video, .sw-scene__still {
    object-fit: contain !important; object-position: center 22% !important;
  }
}
.gb-card { position: relative; max-width: min(84vw, 1100px); padding: 0 4vw; text-align: center; font-family: 'Poppins', system-ui, sans-serif; cursor: pointer; }
.gb-eyebrow { font-weight: 800; font-size: clamp(1.05rem, 1.7vw, 1.5rem); letter-spacing: .26em; text-transform: uppercase; color: var(--gb-accent, #5db9ff); text-shadow: 0 0 22px rgba(93, 185, 255, .45); margin-bottom: clamp(14px, 2.4vh, 30px); }
.gb-verse { font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.9rem); line-height: 1.18; color: #eaf2ff; text-shadow: 0 4px 34px rgba(4, 8, 24, .95); }
.gb-verse .gb-w { display: inline-block; will-change: transform, opacity; }
.gb-ref { font-weight: 900; font-size: clamp(3rem, 8vw, 7rem); line-height: 1.02; color: #eaf2ff; text-shadow: 0 0 46px rgba(93, 185, 255, .5); }
.gb-slot { margin-top: clamp(12px, 2vh, 22px); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: .12em; text-transform: uppercase; color: #8ea2c9; border: 1.5px dashed rgba(142, 162, 201, .55); border-radius: 14px; display: inline-block; padding: 10px 22px; }
.gb-creed {
  max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; text-align: center;
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}
.gb-creed::-webkit-scrollbar { display: none; }
.gb-creed__scroll { padding: 5vh 0; }
.gb-creed__scroll p {
  font-weight: 800; font-size: clamp(1.5rem, 3.1vw, 2.7rem); line-height: 1.4;
  color: #eaf2ff; text-shadow: 0 4px 34px rgba(4, 8, 24, .95);
  margin: 0 0 clamp(14px, 2.6vh, 30px);
}
.gb-reveal { font-weight: 900; line-height: .98; color: #eaf2ff; }
.gb-reveal__holy { font-size: clamp(2.6rem, 8vw, 7rem); letter-spacing: .28em; color: #ffb84d; text-shadow: 0 0 40px rgba(255, 184, 77, .55); }
.gb-reveal__ghost { font-size: clamp(4rem, 13vw, 11rem); letter-spacing: .12em; text-shadow: 0 0 60px rgba(93, 185, 255, .65); }
.gb-reveal__line { margin-top: clamp(16px, 3vh, 34px); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.7rem); color: #cfe0ff; }
body.gb-active .sw-copylayer { opacity: .1; transition: opacity .35s; }
body.gb-active .sw-copylayer::before { opacity: 0; }

/* phones: keep the HUD out of its own way — tracker stays top-right,
   level label shrinks and yields the right half of the top edge */
@media (max-width: 860px) {
  .gh-level { max-width: 52vw; font-size: .78rem; letter-spacing: .14em; line-height: 1.5; }
  .gh-tracker { gap: 6px; }
  .gh-tracker span { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gh-card { display: none; }
}