:root { --gwos-lift: 0vh; }

/* Lock viewport / dark base */
html, body {
  background:#000;
  color:#00ffcc;
  margin:0; padding:0; height:100%;
  overflow:hidden; overscroll-behavior:none; touch-action:none;
}

/* Terminal pinned & centered */
#terminal-overlay {
  position: fixed;
  top: calc(50% - var(--gwos-lift, 0vh));
  left: 50%;
  transform: translate(-50%, -50%);
}

.hidden { display: none }
.visible { display: block; }

/* ==== INIT SCREEN ==== */
#init-screen {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  z-index: 10000;
}
#init-button {
  padding: 18px 32px;
  font: 700 1.2rem 'Share Tech Mono', monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00ff66;
  background: #000;
  border: 2px solid #00ff66;
  cursor: pointer;
}

/* ==== GATEWAY UI (hidden until INITIATE is clicked) ==== */
#gateway-ui { display: none; }
.grimm-footer { display: none; }

/* ==== CIPHER BOXES ==== */
.decrypt-wrapper { background:#001100; padding:24px 30px; border-radius:12px; box-shadow:0 0 20px #00ff44; max-width:900px; margin:0 auto; }
.decrypt-wrapper.hidden { display:none!important; }
.decrypt-boxes { display:flex; align-items:center; gap:10px; justify-content:center; }
.decrypt-boxes .box { width:50px; height:60px; background:#0a0000; color:#000; font-size:2rem; font-weight:bold; display:flex; align-items:center; justify-content:center; border:2px solid #330000; box-shadow:0 0 18px #ff2b2b, inset 0 0 6px rgba(255,0,0,.35); cursor:pointer; user-select:none; transition:all .3s ease; }
.decrypt-boxes .box.green { background:#00ff00; box-shadow:0 0 14px #00ff00,inset 0 0 6px rgba(0,255,0,.35); color:#000; border-color:#004400; }
.separator { font-size:2rem; color:#ffffff; padding:0 5px; }
.decrypt-instruction { margin-top:14px; text-align:center; font-family:'Courier New', monospace; font-size:1.05rem; color:#00ff00; opacity:0; text-shadow:0 0 4px #00ff00,0 0 8px #00ff66,0 0 12px #00ffaa; }

/* ==== ACCESS BLOCK ==== */
#access-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*margin-top: 100px;  adjust to sit under terminal */
}
#access-message {
  margin-top: 0;
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
}
#access-message .granted {
  color: #00ffcc;
  text-shadow: 0 0 6px #00ffee;
  display: block;
}
#access-message .warning {
  color: #ff4444;
  text-shadow: 0 0 6px #ff0000, 0 0 12px #ff2222, 0 0 18px #ff4444;
  font-style: italic;
  font-weight: bold;
  margin-top: 6px;
  display: block;
}
.warning.glitch {
  animation: corruptText 5s infinite;
}

/* ==== RUN IT BUTTON ==== */
.run-button-wrapper { margin-top:30px; background:#110000; padding:16px 32px; border-radius:12px; box-shadow:0 0 16px #ff4444; display:none; opacity:0; transition:opacity .5s ease; width:auto; align-self:center; }
.run-button-wrapper.glitch-in { display:block; opacity:1; animation: glitchFadeIn 1s ease forwards; }
#run-button { padding:16px 28px; font-size:1.4rem; color:#ff3b3b; background:#000; border:2px solid #ff3b3b; box-shadow:0 0 18px rgba(255,59,59,.8); font-family:'Share Tech Mono', monospace; text-transform:uppercase; letter-spacing:2px; cursor:pointer; position:relative; animation:pulseGlow 2.8s infinite alternate; }
#run-button:hover { background:#ff3b3b; color:#000; box-shadow:0 0 24px rgba(255,59,59,1); border-color:#000; }
@keyframes pulseGlow { 0% { box-shadow:0 0 14px rgba(255,59,59,.6); } 100% { box-shadow:0 0 30px rgba(255,59,59,1);} }

/* ==== VEIL EFFECT ==== */
.fullscreen-glitch { position:fixed; inset:0; z-index:99999; pointer-events:none; background:#000; animation:glitchFlash 1.5s ease-out forwards; overflow:hidden; }
.fullscreen-glitch::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.06) 2px, transparent 2px, transparent 4px); mix-blend-mode:screen; animation:glitchScanlines .6s infinite linear; }
@keyframes glitchFlash { 0%{opacity:0;} 10%{opacity:1; background:#f00;} 40%{background:#0f0;} 70%{background:#00f;} 100%{opacity:0; background:#000;} }
@keyframes glitchScanlines { 0%{transform:translateY(0);} 100%{transform:translateY(4px);} }

/* ==== TERMINAL ==== */
#terminal-overlay {
  position: fixed;                           /* critical */
  top: calc(50% - var(--gwos-lift, 0vh));
  left: 50%;
  transform: translate(-50%, -50%);          /* center */
  width: 650px;
  max-width: 95vw;
  height: 260px;
  background: rgba(0,15,0,.7);
  color: #00fff8;
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  line-height: 1.6;
  z-index: 9999;
  padding: 1.5rem;
  overflow: hidden;
  display: none;
  border: 1px solid rgba(0,255,255,.2);
  box-shadow: 0 0 12px rgba(0,255,255,.3);
  border-radius: 6px;
  pointer-events: none;
}
#terminal-overlay.show { display: flex; flex-direction: column; }

#terminal-lines { overflow:hidden; scrollbar-width:none; }
#terminal-lines::-webkit-scrollbar { display:none; }

/* ==== LOGO/TAGLINE BASICS ==== */
.logo-container { display:flex; flex-direction:column; align-items:center; margin:30px 0; }
.logo-main { max-height:280px; margin-bottom:15px; filter:drop-shadow(0 0 12px red); opacity:0; }
.tagline { max-height:80px; filter:drop-shadow(0 0 6px #00ffcc); opacity:0; }
.fade-in { animation: fadeIn 1.2s ease-out forwards; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ==== FOOTER / SIGNATURE ==== */
.grimm-footer { position: fixed; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: .75rem; color: #00ffcc; opacity: .3; pointer-events: none; z-index: 5000; text-align: center; display: none; }
@media (max-width: 600px){ .grimm-footer{ font-size: .7rem; bottom: 2px; } }

/* ==== Final line flicker ==== */
.run-it-flicker { color: #ff2b2b; animation: glitchTextRed .7s infinite; }
@keyframes glitchTextRed { 0% { text-shadow: 0 0 2px #ff2b2b; } 50% { text-shadow: -1px 1px 4px #b30000; } 100% { text-shadow: 0 0 2px #ff2b2b; } }

/* ==== ACCESS GRANTED / WARNING BLOCK (under terminal) ==== */
#access-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  
}
#access-message{ margin-top:0; text-align:center; opacity:0; transition:opacity .5s ease; }
#access-message .granted{ color:#00ffcc; text-shadow:0 0 6px #00ffee; display:block; }
#access-message .warning{ color:#ff4444; text-shadow:0 0 6px #ff0000,0 0 12px #ff2222,0 0 18px #ff4444; font-style:italic; font-weight:bold; margin-top:6px; display:block; }
.warning.glitch{ animation:corruptText 5s infinite; }

/* Minimal text-glitch animation (legacy feel) */
@keyframes corruptText{
  0%,100%{ opacity:.85; transform:none; }
  10%{ opacity:1; transform:skewX(3deg); }
  20%{ opacity:.3; transform:none; }
  50%{ opacity:.9; transform:translate(-1px,1px) rotate(-.5deg); }
  70%{ opacity:.5; }
}

/* === RUN IT Button — Tear‑In + Struggle (safe add-on) ===================== */
/* Stage 1: TEAR‑IN */
#run-button.btn-enter{
  animation: runit-tear 0.9s cubic-bezier(.2,.8,.1,1) forwards;
  filter: url(#ripDisplace) saturate(1.08) contrast(1.05);
}
/* Stage 2: STRUGGLE (overrides base pulseGlow while active) */
#run-button.btn-struggle{
  animation: runit-struggle 1.6s steps(60,end) 0s infinite;
}
#run-button.btn-struggle .label,
#run-button.btn-struggle span{
  text-shadow: -1px 0 rgba(255,0,80,.3), 1px 0 rgba(0,200,255,.25);
}

/* Jagged rip reveal */
@keyframes runit-tear{
  0%   {opacity:0; clip-path:polygon(0% 48%,0% 52%,0% 52%,0% 48%); transform:scale(.92) rotate(-.4deg); filter:blur(.5px) contrast(1.3);}
  12%  {opacity:.25; clip-path:polygon(0% 0%,0% 100%,10% 62%,10% 38%);}
  28%  {opacity:.55; clip-path:polygon(0% 0%,0% 100%,28% 72%,28% 28%);}
  48%  {opacity:.85; clip-path:polygon(0% 0%,0% 100%,54% 82%,54% 18%);}
  70%  {opacity:.97; clip-path:polygon(0% 0%,0% 100%,82% 66%,82% 34%); transform:scale(.985) rotate(.2deg);}
  100% {opacity:1;  clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%); transform:scale(1) rotate(0); filter:none;}
}

/* Restless fight */
@keyframes runit-struggle{
  0%{transform:translate(0,0) rotate(0) scale(1);}7%{transform:translate(-.3px,.2px) rotate(-.15deg) scale(1.002);}14%{transform:translate(.4px,-.3px) rotate(.12deg) scale(.998);}21%{transform:translate(-.6px,.4px) rotate(-.2deg) scale(1.001);}34%{transform:translate(.5px,.2px) rotate(.14deg) scale(1.003);}47%{transform:translate(-.4px,-.5px) rotate(-.1deg) scale(.999);}62%{transform:translate(.3px,.6px) rotate(.18deg) scale(1.002);}79%{transform:translate(-.2px,.2px) rotate(-.12deg) scale(1.001);}100%{transform:translate(0,0) rotate(0) scale(1);}
}

/* Hidden wrapper should never block clicks pre-reveal */
.run-button-wrapper.hidden{ display:none !important; pointer-events:none !important; opacity:0 !important; }

/* === RUN IT Button — Gizmo-veil flavor =================================== */
/* Additive to your existing styles; safe to append. */

/* Chroma edges + spectral bleed while struggling */
#run-button.btn-struggle {
  animation: runit-struggle 1.6s steps(60,end) 0s infinite;
}
#run-button.btn-struggle::before,
#run-button.btn-struggle::after{
  content:''; position:absolute; inset:-3px; pointer-events:none; border-radius:inherit;
  mix-blend-mode:screen; opacity:.28;
}
#run-button.btn-struggle::before{
  box-shadow: 0 0 12px rgba(255,0,80,.4), 0 0 22px rgba(255,0,80,.2) inset;
  animation: runit-chroma-r 1.2s linear infinite;
}
#run-button.btn-struggle::after{
  box-shadow: 0 0 12px rgba(0,200,255,.35), 0 0 22px rgba(0,200,255,.18) inset;
  animation: runit-chroma-b 1.1s linear infinite;
}

/* Occasional void tugs */
#run-button.btn-tug{
  animation: runit-jerk 140ms cubic-bezier(.3,.9,.2,1) 1;
}

/* Spectral flicker */
#run-button.btn-spectre{
  filter: hue-rotate(2deg) saturate(1.15) contrast(1.08);
  animation: runit-spectre .18s ease-in-out 1;
}

/* Optional: faint heartbeat ring matching the struggle beat */
#run-button.btn-struggle .label::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:110%; height:60%; border:1px solid rgba(255,80,80,.25); border-radius:10px;
  opacity:0; pointer-events:none;
  animation: runit-heart 1.6s ease-out infinite;
}

/* Keyframes */
@keyframes runit-chroma-r{ 
  0%{ filter:drop-shadow(1px 0 rgba(255,0,80,.35)); } 
  50%{ filter:drop-shadow(0 0 rgba(255,0,80,.15)); } 
  100%{ filter:drop-shadow(1px 0 rgba(255,0,80,.35)); } 
}
@keyframes runit-chroma-b{ 
  0%{ filter:drop-shadow(-1px 0 rgba(0,200,255,.3)); } 
  50%{ filter:drop-shadow(0 0 rgba(0,200,255,.15)); } 
  100%{ filter:drop-shadow(-1px 0 rgba(0,200,255,.3)); } 
}
@keyframes runit-jerk{
  0%{ transform:translate(0,0) rotate(0) scale(1); }
  60%{ transform:translate(-1.2px,.6px) rotate(-.6deg) scale(1.01) skewX(-.3deg); }
  100%{ transform:translate(0,0) rotate(0) scale(1); }
}
@keyframes runit-spectre{
  0%{ opacity:1; }
  50%{ opacity:.78; text-shadow:-1px 0 rgba(255,0,80,.4), 1px 0 rgba(0,200,255,.35); }
  100%{ opacity:1; }
}
@keyframes runit-heart{
  0%{ opacity:.0; transform:translate(-50%,-50%) scale(.96); }
  30%{ opacity:.35; transform:translate(-50%,-50%) scale(1.02); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.06); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #run-button.btn-struggle{ animation:none; }
  #run-button.btn-struggle::before, #run-button.btn-struggle::after{ animation:none; }
  #run-button.btn-tug{ animation:none; }
  #run-button.btn-spectre{ animation:none; }
  #run-button.btn-struggle .label::after{ display:none; }
}

/* === TOP CONTAINER — legacy purge (clean) ================================ */
#top-container{
  display:flex; flex-direction:column; align-items:center;
  padding-top:40px; padding-bottom:30px;
}

#top-container.purged{
  pointer-events:none;
  animation: topPurge 1.1s ease-in forwards;
  filter: contrast(140%) brightness(120%);
  transform-origin: center;
}

@keyframes topPurge{
  0%   { opacity:1;   transform:scale(1) rotate(0deg) skew(0deg);   filter:none; }
  15%  { opacity:.95; transform:scale(1.02) rotate(-.5deg) skewX(-2deg); filter:grayscale(.3) brightness(1.1) contrast(1.2); }
  35%  { opacity:.75; transform:scale(1.05) rotate(.6deg)  skewX(3deg);  filter:grayscale(.7) brightness(1.25) contrast(1.6); }
  60%  { opacity:.45; transform:scale(1.08) rotate(-1deg) skewX(-4deg); filter:grayscale(1) brightness(1.6) contrast(2); }
  85%  { opacity:.18; transform:scale(1.12) rotate(1.2deg) skewX(5deg); filter:grayscale(1) brightness(1.9) contrast(2.6) blur(1.5px); }
  100% { opacity:0;   transform:scale(1.16) rotate(-1.4deg) skewX(-6deg); filter:grayscale(1) brightness(2.2) contrast(3) blur(2px); }
}

/* Box-specific decay for cipher tiles when zapped */
.box-purge { animation: boxDecay .4s ease forwards; }
@keyframes boxDecay {
  0% { transform: scale(1) rotate(0deg); opacity: 1; filter: none; }
  100% { transform: scale(1.3) rotate(3deg); opacity: 0; filter: blur(2px) grayscale(1); }
}
/* === LEGACY PURGE-GLITCH (for logo/tagline/container zap) ================== */
/* gateway.js adds .purge-glitch to .logo-main, .tagline, .logo-container      */
/* This restores the original burst/fade effect before elements are removed.   */

.purge-glitch {
  animation: purgeGlitch 0.6s ease-in forwards;
  filter: contrast(400%) brightness(200%) grayscale(100%) blur(2px);
  transform: scale(1.05) rotate(0.5deg);
  will-change: filter, transform, opacity;
}

@keyframes purgeGlitch {
  0%   { opacity:1;   transform:scale(1)    rotate(0);    filter:none; }
  25%  { opacity:.85; transform:scale(1.02) rotate(.2deg); filter:blur(1px) contrast(200%); }
  50%  { opacity:.65; transform:scale(1.04) rotate(.4deg); filter:grayscale(80%) brightness(1.3); }
  75%  { opacity:.35; transform:scale(1.07) rotate(.7deg); filter:blur(2px) contrast(300%); }
  100% { opacity:0;   transform:scale(1.10) rotate(1deg);  }
}

/* === ANGRY PURGE MODE (Gizmo is MAD) ===================================== */
/* Additive; safe to append to main.css */

#top-container.purge-angry {
  pointer-events: none;
  animation: angryPurge 1.1s cubic-bezier(.2,.9,.1,1) forwards;
  filter: contrast(180%) brightness(120%);
  transform-origin: center;
  position: relative;
}

/* Rapid chroma split + shake + disintegrate */
@keyframes angryPurge {
  0%   { opacity:1; transform:translate(0,0) scale(1) rotate(0); filter:none; }
  10%  { transform:translate(-1px,0) rotate(-.3deg); filter:drop-shadow(-2px 0 rgba(255,0,80,.45)) drop-shadow(2px 0 rgba(0,200,255,.35)) contrast(1.2); }
  25%  { transform:translate(1px,-1px) rotate(.4deg) scale(1.02); filter:contrast(1.5) brightness(1.2) saturate(1.2); }
  45%  { transform:translate(-2px,1px) rotate(-.6deg) scale(1.04); filter:blur(.5px) contrast(1.9) brightness(1.35); }
  65%  { transform:translate(2px,0) rotate(.8deg) scale(1.07); filter:blur(1px) contrast(2.2) brightness(1.5) grayscale(.5); }
  85%  { transform:translate(-1px,1px) rotate(-1deg) scale(1.1); filter:blur(2px) contrast(2.8) brightness(1.8) grayscale(.9); }
  100% { opacity:0; transform:translate(0,0) scale(1.14) rotate(-1.4deg); filter:blur(3px) contrast(3.2) brightness(2); }
}

/* Inner asset glitch pop */
#top-container .asset-glitch {
  animation: assetPop .35s ease-out forwards;
  will-change: transform, filter, opacity;
}
@keyframes assetPop {
  0% { opacity:1; transform:scale(1) rotate(0); filter:none; }
  60% { opacity:.25; transform:scale(1.18) rotate(.8deg); filter:blur(1px) contrast(2) brightness(1.6); }
  100% { opacity:0; transform:scale(1.28) rotate(1.5deg); filter:blur(2px) contrast(3); }
}

/* Shock ring */
#top-container.purge-angry::after {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 140%; height: 100%;
  border: 2px solid rgba(255,0,80,.35);
  border-radius: 16px;
  opacity: .0; pointer-events:none;
  animation: angryShock 0.5s ease-out 1;
}
@keyframes angryShock {
  0% { opacity:.45; transform:translate(-50%,-50%) scale(.9); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.15); }
}

/* Shred bars (spawned dynamically) */
#gateway-overlay .angry-shred {
  position:absolute; top:-8vh; width: 2.2vw; height: 16vh; background:#000;
  box-shadow: 0 0 14px rgba(255,0,80,.35), inset 0 0 10px rgba(255,255,255,.05);
  transform: translateY(-100%);
  will-change: transform, opacity;
  mix-blend-mode: screen;
  opacity:.9;
  animation: angryShredFall 640ms forwards ease-in;
}
@keyframes angryShredFall { to { transform: translateY(110vh); opacity:.0; } }

/* ===== CLEANED TRACE MODE STYLES ===== */
:root {
  --gwos-lift: 0vh;
  --trace-red: #ff0033;
  --trace-green: #00ff00;
  --trace-timer-bg: #000;
}

/* === Global Reset === */
html, body {
  background: #000;
  color: #00ffcc;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  transition: background 0.4s ease;
}

/* === Terminal Container === */
#terminal-overlay {
  position: fixed;
  top: calc(50% - var(--gwos-lift, 0vh));
  left: 50%;
  transform: translate(-50%, -50%);
}

/* === Gizmo Eyes Backdrop === */
#gizmo-eyes-bg {
  inset: 0;
  z-index: 0;
  opacity: 0.065;
  background: url('/assets/img/the-eyes-of-gizmo.png');
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-attachment: fixed;
  background-color: #000; 
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
}

#gizmo-eyes-bg.visible {
  opacity: 0.15;
}

#gizmo-eyes-bg.hidden {
  display: none !important;
}

#gizmo-eyes-bg img {
  filter: brightness(1.15) contrast(1.25) saturate(1.1);
  transition: filter 0.6s ease;
}

/* === Eyes Overlay Patch === */
.eyes-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  transition: opacity 1.5s ease-in-out;
}

.eyes-overlay.active {
  opacity: 0.065;
}

/* === Trace Cipher Box === */
.trace-active .cipher-box {
  background-color: var(--trace-green) !important;
  color: #000 !important;
  border-color: transparent !important;
  box-shadow: 0 0 8px var(--trace-green) !important;
}

.trace-active .cipher-box.active {
  background-color: var(--trace-red) !important;
  color: #fff !important;
  box-shadow: 0 0 12px var(--trace-red) !important;
  border-color: var(--trace-red) !important;
}

/* === Instruction Wipe === */
.trace-active #decrypt-instruction {
  display: none !important;
}

/* === Trace Mode Overlay === */
#trace-overlay-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  bottom: -40px;
  left: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}

/* === Warning Text === */
#trace-warning-copy {
  color: var(--trace-red);
  font-size: 1.1rem;
  font-family: monospace;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 4px rgba(255, 0, 64, 0.6);
  animation: flickerWarning 1.2s infinite alternate;
}

/* === Digital Timer === */
#trace-digital-timer {
  font-size: 1.8rem;
  font-family: 'Orbitron', monospace;
  color: var(--trace-green);
  background: var(--trace-timer-bg);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  display: inline-block;
  animation: pulseTimer 1s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(0, 255, 144, 0.4);
}

/* === Trace Copy Text === */
.trace-copy {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.25rem;
  color: var(--trace-red);
  text-align: center;
  margin-top: 24px;
  line-height: 1.6;
}

.trace-copy .sub {
  font-size: 0.95rem;
  color: #ff99aa;
  display: block;
  margin-top: 8px;
}

/* === Trace Timer Pulse === */
.trace-timer {
  font-family: 'Share Tech Mono', monospace;
  font-size: 2rem;
  color: var(--trace-red);
  margin-top: 12px;
  text-align: center;
  animation: pulseTimer 1s infinite;
}

/* === Lockout Screen === */
#trace-lockout {
  position: fixed;
  inset: 0;
  background: #000;
  color: var(--trace-red);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}

.lockout-inner {
  text-align: center;
}

.lockout-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.lockout-desc {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

#reload-btn {
  padding: 12px 24px;
  font: 700 1rem 'Share Tech Mono', monospace;
  color: #fff;
  background: var(--trace-red);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
}

/* === Animations === */
@keyframes flickerWarning {
  0% { opacity: 1; }
  45% { opacity: 0.65; }
  60% { opacity: 0.85; }
  85% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes pulseTimer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes pulseEyes {
  0%, 100% {
    opacity: 0.18;
    filter: brightness(1.0) contrast(1.1);
  }
  50% {
    opacity: 0.3;
    filter: brightness(1.4) contrast(1.3);
  }
}

/* === Active Background Fix for Trace === */
.trace-active {
  background-color: #060606 !important;
}
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
@keyframes glitch-ominous-fade {
  0%   { opacity: 0; transform: scale(1) rotate(0deg); filter: brightness(0.8); }
  10%  { opacity: 1; transform: scale(1.02) rotate(0.5deg); filter: contrast(1.2); }
  25%  { transform: scale(1.01) rotate(-0.3deg); }
  40%  { transform: scale(1.03) rotate(0.2deg); }
  55%  { transform: scale(1.01) rotate(-0.2deg); filter: brightness(1.1); }
  70%  { transform: scale(1.02) rotate(0.3deg); }
  85%  { transform: scale(1.00) rotate(0deg); opacity: 0.9; }
  100% { opacity: 0; transform: scale(1) rotate(0deg); filter: none; }
}

.glitch-ominous {
  animation: glitch-ominous-fade 2.3s ease-in-out forwards;
  pointer-events: none;
}
@keyframes borderFlicker {
  0%, 100% {
    box-shadow: 0 0 2px #ff5500;
  }
  30% {
    box-shadow: 0 0 8px #ff2200, 0 0 12px #f00;
  }
  60% {
    box-shadow: 0 0 6px #ff0000, 0 0 10px #ff5500;
  }
  90% {
    box-shadow: 0 0 10px #ff2200, 0 0 14px #f00, inset 0 0 4px #f00;
  }
}
.glitch-border {
  animation: borderFlicker 0.4s infinite alternate;
}
@keyframes violentFlicker {
  0%, 100% { opacity: 1; filter: none; }
  5%  { opacity: 0.2; filter: hue-rotate(15deg) contrast(150%) saturate(200%); }
  15% { opacity: 0.6; filter: blur(2px) brightness(1.5); }
  25% { opacity: 0.1; filter: grayscale(1) hue-rotate(-25deg); }
  40% { opacity: 0.9; filter: contrast(200%) saturate(250%) blur(1px); }
  55% { opacity: 0.4; filter: hue-rotate(90deg); }
  70% { opacity: 0.7; filter: invert(1); }
  85% { opacity: 0.3; filter: blur(1px); }
}

.glitch-violent-flicker {
  animation: violentFlicker 2.3s infinite;
}
.eyes-overlay.trace-flicker {
  animation: traceFlicker 0.15s steps(2, start) infinite;
}

@keyframes traceFlicker {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  50%  { opacity: 0.4; transform: scale(1.01) rotate(0.2deg); filter: brightness(2); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}
.counter-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.1rem;
  color: #00ffcc;
  text-shadow: 0 0 3px #00ffcc, 0 0 5px #00aa88;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.counter-value {
  font-size: 2.25rem;
  font-weight: bold;
  color: #ff003c;
  text-shadow: 0 0 2px #ff003c, 0 0 10px #ff003c;
  letter-spacing: 0.1em;
  animation: glitch-flicker 0.6s infinite;
}
@keyframes glitch {
  0% { opacity: 1; }
  20% { opacity: 0.4; transform: translateX(-1px); }
  40% { opacity: 0.6; transform: translateX(2px); }
  60% { opacity: 0.4; transform: translateX(-1px); }
  80% { opacity: 0.8; transform: translateX(1px); }
  100% { opacity: 1; transform: none; }
}

.counter-value.glitch {
  animation: glitch 0.4s ease-in-out;
}
.trace-crack {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99990;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  mix-blend-mode: screen;
}

.crack-topright {
  background-image: url('/assets/img/shattered-glass.png');
  background-position: top right;
}

.crack-bottomleft {
  background-image: url('/assets/img/shattered-glass-flipped.png');
  background-position: bottom left;
}
/* 🔴 TRACE BORDER EFFECT */
.trace-active::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: 0 0 15px 5px red inset;
  animation: tracePulse 1.2s infinite;
  z-index: 9999;
}

@keyframes tracePulse {
  0% { box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.2) inset; }
  50% { box-shadow: 0 0 25px 8px rgba(255, 0, 0, 0.5) inset; }
  100% { box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.2) inset; }
} 

/* Optional: Glow around whole body for extra edge pulse */
.trace-active body {
  outline: 3px solid red;
  outline-offset: -10px;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
  transition: box-shadow 0.3s ease-in-out;
}

/*Trace Fail Transition*/
.trace-fail-flash { background: #ff0000 !important; transition: none; }
.trace-fail-eyes { background: #000; filter: brightness(1.5) contrast(1.3); }
.trace-fail-glitch1 { filter: invert(1) hue-rotate(90deg); }
.trace-fail-glitch2 { filter: contrast(2) saturate(2); }
.trace-fail-glitch3 { filter: hue-rotate(200deg) brightness(1.4); }
.trace-fail-black { background: #000 !important; }
#trace-fail-text.fail-flicker {
  position: fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--mono, monospace); font-size: clamp(20px, 3vw, 42px);
  color: #ff0000; animation: flickerText .1s steps(2, end) infinite;
}
@keyframes flickerText { 0%{opacity:1} 50%{opacity:0.3} 100%{opacity:1} }

/* [GIZ_PATCH:trace-cracks-pos] ensure correct corners + +30% size */
.trace-crack {
  position: fixed;
  pointer-events: none;
  z-index: 9994; /* under quote overlays if those are ~9997 */
  height: auto;
  opacity: 1;
}

/* Top‑right crack */
.trace-crack.crack-topright {
  top: 0; right: 0; left: auto; bottom: auto;
  width: min(calc(52vmin * 1.3), calc(48vw * 1.3));
  transform: translate(5%, -5%);
  transform-origin: top right;
}

/* Bottom‑left crack */
.trace-crack.crack-bottomleft {
  bottom: 0; left: 0; right: auto; top: auto;
  width: min(calc(56vmin * 1.3), calc(52vw * 1.3));
  transform: translate(-5%, 5%);
  transform-origin: bottom left;
}
/* Jitter (grab) */
.gwos-seize-start .decrypt-boxes .box {
  filter: invert(1) contrast(1.2);
}
.gwos-seize-jitter .box {
  animation: seize-jitter 90ms steps(2) infinite;
}
@keyframes seize-jitter {
  0% { transform: translate(-1px, 0); }
  50%{ transform: translate(1px, 0); }
  100%{transform: translate(0, 0); }
}

/* Corruption flood */
.gwos-seize-corrupt .box {
  animation: seize-glyph 0.22s steps(3) infinite;
  text-shadow: 0 0 6px rgba(255,0,0,0.55);
}
@keyframes seize-glyph {
  0% { filter: hue-rotate(0deg) saturate(1.2); }
  50%{ filter: hue-rotate(-45deg) saturate(1.8); }
  100%{filter: hue-rotate(0deg) saturate(1.2); }
}

/* Pull-in (vortex feel) */
.gwos-seize-pull .decrypt-boxes {
  transform-origin: center;
  animation: seize-pull 0.7s ease-out forwards;
}
@keyframes seize-pull {
  0%   { transform: scale(1) }
  100% { transform: scale(0.94) }
}

/* Vanish originals while frags fly */
.gwos-seize-vanish .box { opacity: 0; }

/* “<< MINE >>” sigil */
.gwos-mine-stamp {
  position: absolute;
  left: 50%; top: calc(100% + 8px);
  transform: translateX(-50%);
  font: 700 12px/1 monospace;
  padding: 2px 6px;
  background: #000;
  border: 1px solid #f22;
  color: #f22;
  text-shadow: 0 0 6px #f22;
  letter-spacing: 0.12em;
  z-index: 100;
  animation: mine-flicker 0.18s steps(2) infinite;
}
@keyframes mine-flicker {
  0% { opacity: 0.2; filter: blur(0.3px) }
  100%{ opacity: 1;   filter: blur(0) }
}

/* Fragments (clones) */
.gwos-frag {
  transition: transform 380ms cubic-bezier(.23,1,.32,1), opacity 380ms linear;
  will-change: transform, opacity;
  background: rgba(0,0,0,0.05);
  backdrop-filter: blur(1px);
}
/* 1-frame(ish) lock flash */
.gwos-snap-flash{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(255,255,255,0.0) 60%),
    rgba(255,0,0,0.12);
  mix-blend-mode: screen;
  z-index: 100000;
  pointer-events: none;
  animation: snap-flash 90ms steps(2) 1;
}
@keyframes snap-flash{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* subtle motion blur during the yank back in */
.gwos-frag-snap{
  filter: drop-shadow(0 0 4px rgba(255,50,50,0.35)) blur(0.3px);
}
/* 200ms red impact burst */
.gwos-red-burst{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100000;
  
  /* white core + red field; screen blend so it kisses highlights */
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
    rgba(255, 20, 20, 0.18);
  mix-blend-mode: screen;
  animation: gwos-burst-200 200ms ease-out 1;
}
@keyframes gwos-burst-200 {
  0%   { opacity: 1;   filter: blur(0px)    brightness(1.1); }
  60%  { opacity: 0.7; filter: blur(1px)    brightness(1.2); }
  100% { opacity: 0;   filter: blur(1.5px)  brightness(1.0); }
}

/* micro thump (optional) — 120ms body nudge for added impact */
.gwos-screen-thump {
  animation: gwos-thump-120 120ms cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes gwos-thump-120 {
  0%   { transform: translate(0,0); }
  35%  { transform: translate(0,-1px); }
  100% { transform: translate(0,0); }
}
/* Scope all mobile tweaks so desktop is unchanged */
html.mobile-lite { --gwos-scale: 1; }

/* Scale only core stack elements; cipher, footer, and cracks scale separately */
.mobile-lite #top-container,
.mobile-lite #terminal-overlay {
  transform: scale(var(--gwos-scale));
  transform-origin: top center;
}

/* Access centered (cipher width handled separately) */
.mobile-lite #access-container {
  width: min(92vw, 900px);
  margin-inline: auto;
  text-align: center;
}


/* Footer pinned dead center */
.mobile-lite .grimm-footer {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  width: max-content;
  z-index: 5000;
}



/* Text and HUD scaling in trace */
.mobile-lite .decrypt-instruction,
.mobile-lite #terminal-lines,
.mobile-lite #access-message {
  font-size: clamp(.9rem, 1.9vw, 1.05rem);
}
@media (max-width: 420px) {
  .mobile-lite .trace-hud, 
  .mobile-lite .trace-warning, 
  .mobile-lite .trace-timer {
    transform: scale(.92);
    transform-origin: top center;
  }
  .mobile-lite .trace-warning { line-height: 1.2; }
}

/* Orientation blocker */
html:not(.mobile-lite) #gwos-rotate-blocker { display: none !important; }
html.mobile-lite.orientation-blocked body { pointer-events: none; }
html.mobile-lite #gwos-rotate-blocker { pointer-events: all; }
#gwos-rotate-blocker{
  display:none; position:fixed; inset:0; z-index:100000;
  place-items:center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.80), rgba(0,0,0,.95));
  color:#00ffaa; font-family:'VT323', monospace; text-align:center;
}
#gwos-rotate-blocker .inner{
  font-size: clamp(1.1rem, 4.8vw, 1.6rem);
  letter-spacing:.04em;
  text-shadow: 0 0 6px #00ffaa;
  border: 1px solid rgba(0,255,170,.35);
  padding: .9rem 1.2rem; border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,255,170,.25);
}

/* Mobile counters */
.mobile-lite .counter-container{
  align-items: center;
}
.mobile-lite #cipherCount,
.mobile-lite #traceCount{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
}
.mobile-lite #cipherCount .counter-label,
.mobile-lite #traceCount .counter-label{
  letter-spacing: .03em;
}
.mobile-lite #cipherCount .counter-value,
.mobile-lite #traceCount .counter-value{
  font-weight: 700;
  font-family: 'VT323', monospace;
  font-size: clamp(1.1rem, 6vw, 1.6rem);
  color: #ff2244;
  text-shadow: 0 0 5px #ff2244;
}
/* ===== MOBILE BASE VARS ===== */
html.mobile-lite{
  --gwos-box: 64px;   /* default gets overridden by JS, but nicer pre-calc */
  --gwos-gap: 12px;   /* wider default spacing */
  --gwos-sep: 28px;
}

/* Edge-to-edge wrapper with 5px pad (JS sets width/pad; this is the shape) */
.mobile-lite .decrypt-wrapper{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 12px 5px;
  margin: 0 auto;
}

/* No-wrap, centered row that uses our computed width */
.mobile-lite .decrypt-boxes{
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: var(--gwos-gap) !important;
  margin: 0 auto;
}

/* Big-thumb tiles driven by JS-calculated vars */
.mobile-lite .decrypt-boxes .box{
  width: var(--gwos-box) !important;
  height: calc(var(--gwos-box) * 1.12) !important;
  line-height: calc(var(--gwos-box) * 1.12) !important;
  font-size: calc(var(--gwos-box) * 0.58) !important;
}

.mobile-lite .decrypt-boxes .separator{
  width: var(--gwos-sep);
  text-align: center;
  display: inline-block;
  line-height: 1;
}

/* Mobile boot line pinned above footer */
/* Mobile boot line pinned above footer */
/* Boot-line rail: fixed just above footer (desktop + mobile) */
#boot-line-rail {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 36px); /* desktop: raise ~30px */
  width: auto;                                 /* shrink to content */
  max-width: min(96vw, 900px);                 /* guard width */
  text-align: center;                          /* center the line */
  z-index: 9998;
  pointer-events: none;
}
#boot-line-rail[hidden]{ display:none; }
#boot-line-rail #terminal-boot{
  position: static;
  display: inline-block;                       /* allow centering */
  margin: 0 auto;
  font-family: "VT323", monospace;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  color: #00ffaa;
  text-shadow: 0 0 6px #00ffaa;
}
/* Mobile variant keeps the same anchor; nothing else needed */
.mobile-lite #boot-line-rail{ bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }

/* MOBILE: Cipher container edge-to-edge (5px gutters + safe area) */
.mobile-lite .decrypt-wrapper{
  box-sizing: border-box;
  /* full width minus 5px gutters + notch safe area */
  width: calc(
    100vw - (env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 10px)
  ) !important;
  max-width: none !important;
  margin: 0 auto;
  /* ensure the visual frame breathes without stealing width */
  padding-left: 5px;
  padding-right: 5px;
}

/* Make the row span the container and prevent drift/wrap */
.mobile-lite .decrypt-boxes{
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap !important;
}
/* MOBILE: center the terminal, keep legacy compact size */
.mobile-lite #terminal-overlay{
  position: fixed !important;
  top: calc(50% - var(--gwos-lift, 10vh)) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(650px, 92vw) !important;
  height: 260px !important;
  z-index: 9999 !important;
}
.mobile-lite #access-container{
  width: min(96vw, 900px) !important;
  margin: 0 auto !important;
  text-align: center;
}
.mobile-lite #access-container { margin-top: 0 !important; }

.trace-background {
    background-image: url('assets/img/trace.exe.png');
    background-size: contain; /* keep full image visible */
    background-repeat: no-repeat;
    background-position: center center;
    background-color: black; /* fill space around it */
}
/* never allow zero spacing even if the var isn't set */
.mobile-lite .decrypt-boxes { gap: var(--gwos-gap, 8px) !important; }

/* === GWOS DESKTOP PATCH: keep access block on-screen, kill hard shove === */
@media (min-width: 900px) {
  /* Lift the terminal up a touch so there’s breathing room below it */
  :root { --gwos-lift: 8vh; } /* was 0; positive lifts the console upward */

  /* Hard override the old 300px shove */
  #access-container {
    margin-top: 0 !important;
    position: fixed !important;
    left: 50% !important;
    transform: translate(-50%, -6vh) !important;  /* lift up by 6vh */
    bottom: 12vh !important;                    /* sits above footer strip */
    width: min(900px, 92vw) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5000;                               /* under the terminal (9999) */
  }

  /* Make sure the wrapper/button can’t be pushed out */
  .run-button-wrapper { margin-top: 18px !important; display: block; opacity: 1; }
  #run-button { position: relative; margin: 0 auto; }
}