/* ============================================================
   c4 — cinematic move announcement
   dark-mode, high-octane, single focus
   ============================================================ */

:root{
  --bg:        #05070a;
  --bg-2:      #090d13;
  --ink:       #e9f6ff;
  --dim:       #7f95ab;
  --cyan:      #3fe9ff;
  --cyan-soft: rgba(63,233,255,.55);
  --violet:    #8b5cf6;
  --amber:     #ffb545;
  --edge:      rgba(63,233,255,.22);
  --ui-pad:    clamp(18px, 3.4vw, 46px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

#app{
  position:fixed;
  inset:0;
  height:100dvh;
  isolation:isolate;
}

/* ---------- 3D stage ---------- */

#scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* ---------- atmosphere ---------- */

.vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(105% 80% at 50% 46%, transparent 18%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(0,0,0,.62), transparent 20%, transparent 68%, rgba(0,0,0,.8));
}

.grain{
  position:absolute; inset:-120px; z-index:3; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-14px,8px,0)}
  66%{transform:translate3d(9px,-11px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* anamorphic streak fired on impact */
.flare{
  position:absolute; z-index:4; pointer-events:none;
  left:-10%; right:-10%; top:56%;
  height:clamp(60px,12vh,150px);
  transform:translateY(-50%) scaleX(.2);
  opacity:0;
  mix-blend-mode:screen;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(63,233,255,.42) 40%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(63,233,255,.5) 22%, rgba(220,250,255,.95) 50%, rgba(139,92,246,.45) 78%, transparent);
  filter:blur(10px);
}

.flash{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:0;
  background:radial-gradient(60% 55% at 50% 62%, #ffffff, rgba(180,240,255,.7) 45%, transparent 78%);
  mix-blend-mode:screen;
}

/* ---------- interface ---------- */

#ui{
  position:absolute; inset:0; z-index:5;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:var(--ui-pad);
  pointer-events:none;
  will-change:transform;
}

.mono{ font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:clamp(9px,1.1vw,11px);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--dim);
}
.topbar .mark{
  display:flex; align-items:center; gap:10px;
  font-weight:600; color:rgba(233,246,255,.72);
  letter-spacing:.34em;
}
.topbar .glyph{ color:var(--cyan); font-size:1.4em; letter-spacing:0; text-shadow:0 0 14px var(--cyan-soft); }
.topbar .meta{ opacity:.6; }

/* hero ------------------------------------------------------ */

.hero{
  position:relative;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  gap:clamp(8px,1.8vh,20px);
  padding-bottom:clamp(50px,15vh,190px);
}

.eyebrow{
  margin:0;
  font-size:clamp(9px,1.15vw,12px);
  letter-spacing:.62em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:0;
  text-shadow:0 0 22px rgba(63,233,255,.45);
  padding-left:.62em;
}

.move{
  position:relative;
  display:grid;
  margin:0;
  font-family:"Archivo Black",Impact,"Arial Black",sans-serif;
  font-weight:400;
  font-size:clamp(5.5rem, min(31vw, 44vh), 26rem);
  line-height:.82;
  letter-spacing:.02em;
  mix-blend-mode:screen;
  user-select:none;
}
.move > span{
  grid-area:1/1;
  display:block;
}

/* hollow letterforms: the pawn reads straight through them */
.move-outline{
  color:transparent;
  -webkit-text-stroke:clamp(1.5px,.32vw,4px) rgba(200,242,255,.9);
  opacity:0;
  filter:drop-shadow(0 0 26px rgba(63,233,255,.35));
}

/* the ignite layer */
.move-fill{
  opacity:0;
  background:linear-gradient(178deg,#ffffff 4%, var(--cyan) 46%, #1f7fa8 78%, rgba(139,92,246,.9) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 34px rgba(63,233,255,.65));
}

.sub{
  margin:0;
  text-shadow:0 2px 26px rgba(0,0,0,.9);
  font-size:clamp(10px,1.35vw,14px);
  letter-spacing:.46em;
  text-transform:uppercase;
  color:rgba(233,246,255,.62);
  opacity:0;
  padding-left:.46em;
}
.sub .arrow{ color:var(--cyan); }

.taunt{
  margin:clamp(4px,1.2vh,14px) 0 0;
  font-family:"Archivo Black",Impact,"Arial Black",sans-serif;
  font-weight:400;
  font-size:clamp(1.05rem,2.4vw,2.1rem);
  letter-spacing:.04em;
  color:#f2fbff;
  opacity:0;
  text-shadow:0 0 34px rgba(63,233,255,.6), 0 0 90px rgba(63,233,255,.28), 0 2px 24px rgba(0,0,0,.95);
}

/* dock ------------------------------------------------------ */

.dock{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  opacity:0;
}

.badge{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 18px;
  border:1px solid var(--edge);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(18,26,34,.72), rgba(8,11,16,.72));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:clamp(9.5px,1.05vw,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(233,246,255,.78);
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 18px 50px -20px rgba(63,233,255,.35);
}
.badge b{ color:var(--cyan); font-weight:600; letter-spacing:.2em; }
.badge .sep{ color:rgba(127,149,171,.55); }

.pulse-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 0 rgba(255,181,69,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,181,69,.55); }
  70%{ box-shadow:0 0 0 12px rgba(255,181,69,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,181,69,0); }
}

.replay{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px;
  border:1px solid rgba(63,233,255,.45);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(63,233,255,.14), rgba(63,233,255,.04));
  color:var(--ink);
  font:inherit;
  font-size:clamp(11px,1.15vw,13px);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, background .25s ease;
  box-shadow:0 0 26px -8px rgba(63,233,255,.6), inset 0 0 22px -14px rgba(63,233,255,.9);
}
.replay svg{ width:15px; height:15px; fill:var(--cyan); }
.replay:hover{
  transform:translateY(-2px);
  border-color:rgba(63,233,255,.95);
  background:linear-gradient(180deg, rgba(63,233,255,.24), rgba(63,233,255,.07));
  box-shadow:0 0 46px -6px rgba(63,233,255,.75), inset 0 0 26px -12px rgba(63,233,255,1);
}
.replay:active{ transform:translateY(0) scale(.98); }
.replay:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
.replay[disabled]{ opacity:.45; cursor:default; transform:none; }

/* ---------- fallback (no WebGL) ---------- */

.fallback{
  position:absolute; inset:0; z-index:1;
  display:none;
  place-items:center;
  background:radial-gradient(70% 60% at 50% 40%, #12181f 0%, var(--bg) 65%);
}
.fallback-pawn{
  width:min(38vh,42vw);
  filter:drop-shadow(0 0 60px rgba(63,233,255,.45));
  animation:slam 1.2s cubic-bezier(.6,0,.2,1) .3s both;
}
@keyframes slam{
  0%{ transform:translateY(-46vh) scaleY(1.25); opacity:0; }
  62%{ transform:translateY(0) scaleY(.86); opacity:1; }
  80%{ transform:translateY(-3vh) scaleY(1.04); }
  100%{ transform:translateY(0) scaleY(1); }
}
body.no-3d .fallback{ display:grid; }
body.no-3d #scene{ display:none; }
body.no-3d .move-outline{ opacity:.9 !important; }
body.no-3d .eyebrow,
body.no-3d .sub,
body.no-3d .taunt,
body.no-3d .dock{ opacity:1 !important; }

/* ---------- responsive ---------- */

@media (max-width:760px){
  #ui{ grid-template-rows:auto 1fr auto; }
  .topbar .meta{ display:none; }
  .move{ font-size:clamp(4.5rem, min(42vw, 34vh), 16rem); }
  .hero{ padding-bottom:clamp(120px,26vh,260px); }
  .eyebrow{ letter-spacing:.42em; padding-left:.42em; }
  .sub{ letter-spacing:.3em; padding-left:.3em; }
  .taunt{ font-size:clamp(1rem,4.6vw,1.6rem); }
  .dock{ justify-content:center; gap:14px; }
  .badge{ order:2; text-align:center; justify-content:center; }
  .replay{ order:1; width:100%; justify-content:center; }
}

/* where the piece fills the middle of the frame, the taunt drops to the clear
   band just above the dock instead of landing on the pawn */
@media (max-width:760px), (max-height:620px) and (orientation:landscape){
  .taunt{
    position:absolute;
    left:0; right:0;
    bottom:clamp(6px,1.6vh,16px);
    margin:0;
  }
}

@media (max-height:620px) and (orientation:landscape){
  .hero{ padding-bottom:clamp(30px,8vh,80px); }
  .badge{ font-size:9px; }
}

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .pulse-dot{ animation:none; }
  .fallback-pawn{ animation:none; }
}