/* ═══════════════════════════════════════════════════════════
   SCATTER SYMBOL PAGE — page-specific layer (sc- prefix;
   tokens + .tt-*/.viz/.tip-grid/.flow/.stack3/.sessions/.tline/
   .chase/.vpanel/.nbox etc. all inherited from chrome/layer.css)
   ═══════════════════════════════════════════════════════════ */

/* ── master reel (hero + recap): banner + dim + anticipation ── */
.sc-master{position:relative}
.sc-banner{margin-top:8px;padding:.6rem .9rem;border-radius:9px;text-align:center;
  background:linear-gradient(178deg,#FFF6DC,#F7E2AE);border:2px solid var(--gold-dk);
  font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:#6B4E06}
.sc-banner[hidden]{display:none}
.sc-dim .tile:not(.scat){opacity:.32;filter:grayscale(.35)}
.sc-anticipating{animation:scPulse 1.1s ease-in-out infinite}
@keyframes scPulse{
  0%,100%{box-shadow:inset 0 0 10px rgba(150,100,10,.3),0 0 0 rgba(255,190,60,0);filter:blur(0)}
  50%{box-shadow:inset 0 0 20px rgba(255,200,80,.85),0 0 16px rgba(255,190,60,.65);filter:blur(.6px)}
}

/* ── flat 5-tile rows used in the state walkthrough & compare strip ── */
.sc-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:.4rem 0}
.sc-row .tile{width:60px;height:60px;flex:0 0 auto;padding:6px}
.sc-row-sm .tile{width:40px;height:40px;padding:4px}

/* ── status strip ── */
.sc-status{display:flex;gap:10px;flex-wrap:wrap}
.sc-status-item{flex:1 1 180px;min-width:0;text-align:center;padding:.8rem .9rem;border-radius:12px;
  background:linear-gradient(178deg,#FFFDF5,#FBF1D6);border:2px solid var(--line)}
.sc-status-k{display:block;font-family:var(--orn);font-weight:700;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8A6B34;margin-bottom:.3rem}
.sc-status-v{display:block;font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:var(--ink)}

/* ── near-miss replay: ghost scatter + window overlay bands ── */
.sc-replay-shell .reel:last-child{overflow:visible}
.sc-ghost{position:absolute;left:14%;right:14%;top:-46%;z-index:5;opacity:.9;
  filter:drop-shadow(0 3px 6px rgba(90,60,10,.4))}
.sc-ghost[hidden]{display:none}
.sc-win-active,.sc-win-outside{position:absolute;left:2px;right:2px;z-index:6;pointer-events:none;
  border-radius:6px;display:flex;align-items:flex-start;justify-content:center}
.sc-win-active{top:2px;bottom:2px;border:2px dashed var(--turq-dk);background:rgba(23,162,168,.08)}
.sc-win-outside{top:-40%;height:34%;border:2px dashed var(--red);background:rgba(224,58,47,.1)}
.sc-win-active span,.sc-win-outside span{margin-top:2px;padding:.15rem .5rem;border-radius:999px;
  font-weight:800;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sc-win-active span{background:var(--turq-dk);color:#FFF6D8}
.sc-win-outside span{background:var(--red);color:#fff;margin-top:-10px}
.sc-win-active[hidden],.sc-win-outside[hidden]{display:none}

/* ── tap-to-place trigger illustrator ── */
.sc-tapgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;min-width:380px}
.sc-slot{aspect-ratio:1/1;border-radius:8px;background:linear-gradient(158deg,#EFDCB1,#DCC188 70%,#D2B678);
  border:1.5px solid #BC9E62;display:flex;align-items:center;justify-content:center;min-height:44px;
  transition:background .18s,border-color .18s,transform .1s}
.sc-slot:hover{border-color:var(--turq-dk)}
.sc-slot:active{transform:scale(.96)}
.sc-slot[aria-pressed="true"]{background:radial-gradient(circle at 50% 42%,#FFF0C0,#F3C75A 58%,#D79A17);
  border-color:#9A6A08;box-shadow:inset 0 0 12px rgba(150,100,10,.4)}
.sc-slot img{width:66%;height:66%;object-fit:contain}

/* ── three-states compare strip ── */
.sc-compare{display:flex;gap:14px;min-width:700px}
.sc-ccard{flex:1;min-width:210px;padding:clamp(12px,1.6vw,18px);border-radius:13px;
  border:2px solid var(--line);background:var(--card);text-align:center}
.sc-ccard.hot{border-color:var(--gold-dk);background:linear-gradient(178deg,#FFF6DC,#F7E2AE)}
.sc-ccard-h{font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.5rem}
.sc-ccard-v{margin-top:.6rem;font-weight:800;font-size:.88rem;color:var(--muted)}
.sc-ccard-v.hot{color:var(--gold-dk)}

/* ── no-countdown strip ── */
.sc-nocount{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sc-nc-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .9rem;
  border-radius:12px;background:#FBF1D6;border:1.5px solid var(--line);min-width:84px}
.sc-nc-item img{opacity:.55;filter:grayscale(.4)}
.sc-nc-item span{font-weight:700;font-size:.72rem;color:var(--ink-2)}
.sc-nc-q{background:linear-gradient(178deg,#FFF6DC,#F7E2AE);border-color:var(--gold-dk)}
.sc-q{font-family:var(--dsp);font-weight:900;font-size:1.6rem;color:var(--gold-dk);line-height:1}

/* ── back-to-back / long-gap two-column ── */
.sc-gap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}

/* ── frequency demo 4-card grid ── */
.sc-freq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}

/* ── scatter history ribbon ── */
.sc-history{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sc-h-item{min-width:52px;padding:.6rem .5rem;text-align:center;border-radius:10px;
  background:#FBF1D6;border:1.5px solid var(--line);font-family:var(--dsp);font-weight:900;
  font-size:1.1rem;color:var(--ink)}
.sc-h-item.trig{background:linear-gradient(178deg,#FFF6DC,#F7E2AE);border-color:var(--gold-dk);
  color:var(--gold-dk);font-family:var(--orn);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;padding:.6rem .7rem}

/* ── myth cards: torn-note look ── */
.sc-myth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.sc-myth-card{position:relative;padding:clamp(16px,2vw,22px) clamp(14px,1.8vw,18px) clamp(20px,2.6vw,26px);
  background:#FFFDF0;border:1px solid #E9DBAE;
  box-shadow:0 8px 18px rgba(90,60,10,.16);
  clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,82% 91%,70% 100%,58% 91%,46% 100%,34% 91%,22% 100%,10% 91%,0 100%);
  transform:rotate(-1deg)}
.sc-myth-grid .sc-myth-card:nth-child(2){transform:rotate(1.1deg)}
.sc-myth-grid .sc-myth-card:nth-child(3){transform:rotate(-.8deg)}
.sc-myth-grid .sc-myth-card:nth-child(4){transform:rotate(1.3deg)}
.sc-myth-card::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:44px;height:16px;background:rgba(233,168,28,.55);border:1px solid rgba(184,122,12,.5)}
.sc-myth-claim{font-weight:700;font-style:italic;font-size:.92rem;color:var(--ink-2);line-height:1.4;
  margin-bottom:.6rem}
.sc-myth-verdict{font-family:var(--orn);font-weight:900;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:980px){
  .sc-gap-grid{grid-template-columns:1fr}
  .sc-freq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-myth-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .sc-status{flex-direction:column}
}
@media(max-width:560px){
  .sc-row .tile{width:48px;height:48px}
  .sc-freq-grid{grid-template-columns:1fr}
  .sc-myth-grid{grid-template-columns:1fr}
  .sc-myth-card{transform:none !important}
}
@media(prefers-reduced-motion:reduce){
  .sc-anticipating{animation:none}
}