/* CrossedWords play-gate: share screen + epic release countdown. */
#xg{position:fixed;inset:0;z-index:50;overflow:hidden;color:#f4f2ea;
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:radial-gradient(1200px 800px at 50% 18%, #171d38 0%, #0b0e1c 55%, #05060d 100%);
  --gold:#e8b24c;--teal:#37c99b;--pink:#ff5e8a;--violet:#7c5cff;--ink:#f4f2ea;--dim:#9aa2b6;
  --accent:var(--violet);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
#xg *{box-sizing:border-box}
#xg canvas.xg-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
#xg .xg-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:14px}
#xg .xg-eyebrow{font-family:monospace;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--dim);
  min-height:1em;transition:color .4s}
#xg .xg-head{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;line-height:.92;letter-spacing:.01em;
  font-size:clamp(2.2rem,9vw,5.2rem);margin:0;
  background:linear-gradient(100deg,var(--gold),var(--pink) 45%,var(--violet) 75%,var(--teal));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 30px rgba(124,92,255,.35))}
/* Wordmark (Option D inline lockup): metal CROSSED + crossword-tile WORDS */
#xg .xg-mark{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:2px 0 4px}
#xg .xg-crossed{font-family:"Metal Mania","Anton",Impact,cursive;font-size:clamp(2.2rem,9vw,3.8rem);line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,#e2e8f4 38%,#8b93a8 52%,#c9d0e0 60%,#f5f8ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 8px rgba(255,72,20,.75)) drop-shadow(0 2px 1px rgba(0,0,0,.6))}
#xg .xg-words{display:flex;gap:5px}
#xg .xg-words i{width:clamp(30px,7.5vw,46px);height:clamp(30px,7.5vw,46px);border-radius:7px;position:relative;
  background:#1b2135;border:1px solid #2c3452;box-shadow:0 3px 0 #0a0c14,inset 0 1px 0 rgba(255,255,255,.05);
  display:grid;place-items:center;font-family:"Anton",Impact,sans-serif;font-style:normal;
  font-size:clamp(1.1rem,3.6vw,1.8rem);color:#37c99b}
#xg .xg-sub{color:var(--dim);font-size:clamp(.85rem,2.6vw,1.05rem);max-width:640px;line-height:1.5;margin:0}
#xg .xg-sub b{color:var(--ink)}

/* split-flap timer */
#xg .xg-timer{display:flex;align-items:center;gap:6px;margin:6px 0 2px;filter:drop-shadow(0 8px 40px rgba(0,0,0,.5))}
#xg .xg-grp{display:flex;gap:6px}
#xg .xg-tile{position:relative;width:clamp(42px,11vw,86px);height:clamp(58px,15vw,116px);border-radius:12px;
  background:linear-gradient(180deg,#1b2136,#0d1120);border:1px solid #2b3350;
  display:grid;place-items:center;overflow:hidden;
  font-family:"Anton",Impact,sans-serif;font-size:clamp(2rem,7.5vw,4.6rem);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.45)}
#xg .xg-tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
#xg .xg-tile.flip{animation:xgflip .28s ease}
#xg .xg-tile .glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,var(--accent),transparent 65%);
  opacity:0;transition:opacity .3s;mix-blend-mode:screen}
#xg .xg-tile.hot .glow{opacity:.5}
#xg .xg-colon{font-family:"Anton";font-size:clamp(1.6rem,6vw,3.4rem);color:var(--accent);opacity:.85;
  align-self:center;animation:xgblink 1s steps(2,start) infinite}
#xg .xg-unit{font-family:monospace;font-size:.6rem;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
#xg .xg-units{display:flex;gap:6px;margin-top:-2px}
#xg .xg-units span{width:clamp(42px,11vw,86px);text-align:center}
@keyframes xgflip{0%{transform:rotateX(0)}45%{transform:rotateX(-88deg)}55%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
@keyframes xgblink{50%{opacity:.15}}

/* progress + charge */
#xg .xg-prog{width:min(560px,84vw);height:8px;border-radius:99px;background:#161c31;border:1px solid #2b3350;overflow:hidden;margin-top:4px}
#xg .xg-prog i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--violet),var(--pink),var(--gold));
  border-radius:99px;transition:width 1s linear}
#xg .xg-charge{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:8px}
#xg .xg-charge .lab{font-family:monospace;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
#xg .xg-meter{width:min(320px,70vw);height:14px;border-radius:99px;background:#12172a;border:1px solid #2b3350;overflow:hidden;position:relative}
#xg .xg-meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--gold),var(--pink));
  border-radius:99px;transition:width .12s ease-out}
#xg .xg-tap{margin-top:2px;font-size:.8rem;color:var(--dim)}
#xg .xg-tap b{color:var(--gold)}

/* buttons */
#xg .xg-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}
#xg .xg-btn{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;
  border:0;border-radius:14px;padding:14px 26px;cursor:pointer;color:#0a0c12;
  background:linear-gradient(180deg,#ffd579,var(--gold));transition:transform .12s,box-shadow .12s;
  box-shadow:0 10px 30px rgba(232,178,76,.3)}
#xg .xg-btn:active{transform:translateY(2px) scale(.98)}
#xg .xg-btn.teal{background:linear-gradient(180deg,#6ff0c4,var(--teal));box-shadow:0 10px 30px rgba(55,201,155,.3);color:#04120d}
#xg .xg-btn.ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid #2b3350;box-shadow:none}

/* stat row (share) */
#xg .xg-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 2px}
#xg .xg-stat{background:rgba(255,255,255,.03);border:1px solid #2b3350;border-radius:14px;padding:12px 18px;min-width:96px}
#xg .xg-stat .v{font-family:"Anton",Impact,sans-serif;font-size:clamp(1.5rem,5vw,2.2rem);color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
#xg .xg-stat .k{font-family:monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:6px}
#xg .xg-stat.teal .v{color:var(--teal)} #xg .xg-stat.gold .v{color:var(--gold)} #xg .xg-stat.pink .v{color:var(--pink)}

/* final-seconds takeover */
#xg .xg-take{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:5;
  background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.22),rgba(5,6,13,.86) 60%)}
#xg .xg-take.on{display:flex}
#xg .xg-take .big{font-family:"Anton",Impact,sans-serif;font-size:min(60vw,52vh);line-height:1;color:var(--ink);
  text-shadow:0 0 60px var(--accent);animation:xgslam .9s cubic-bezier(.2,1.4,.3,1)}
@keyframes xgslam{0%{transform:scale(2.6);opacity:0;filter:blur(14px)}55%{transform:scale(.86);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
#xg.shake{animation:xgshake .3s}
@keyframes xgshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,4px)}50%{transform:translate(5px,-5px)}75%{transform:translate(-4px,-3px)}}
#xg .xg-foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:.72rem;color:#5b627a}
#xg .xg-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#12172a;border:1px solid #2b3350;color:var(--ink);padding:10px 18px;border-radius:12px;font-size:.85rem;
  transition:opacity .25s,transform .25s;z-index:60;pointer-events:none}
#xg .xg-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){
  #xg .xg-tile.flip{animation:none}
  #xg .xg-colon{animation:none}
  #xg .xg-take .big{animation:none}
}