:root{
  --bg0:#ffffff;
  --bg1:#f3f5f8;

  --font:"Share Tech Mono", monospace;
  --matrix-font-size:16px;

  --g:#00ff41;

  --term0: rgba(2, 12, 8, 0.96);
  --term1: rgba(1, 8, 6, 0.96);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:var(--font);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
  overscroll-behavior:none;
}

#matrix-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

#glitch-layer{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
}

.glitch-node{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:110px;
  height:110px;
  border-radius:22px;

  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action:manipulation;

  background:transparent;
  border:0;
  box-shadow:none;
  outline:none;

  overflow:hidden;
  isolation:isolate;
}

.glitch-node::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  background: radial-gradient(circle at 50% 50%,
    rgba(0,255,65,0.18),
    rgba(0,255,65,0.00) 62%
  );
  opacity:0;
  transition:opacity 0.12s ease;
  pointer-events:none;
}

.glitch-node:hover::before,
.glitch-node:focus-visible::before{
  opacity:1;
}

.glitch-node:hover,
.glitch-node:focus-visible{
  box-shadow:
    0 0 0 1px rgba(0,255,65,0.22) inset,
    0 0 28px rgba(0,255,65,0.14);
}

.glitch-node .node-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:1;
}

.glitch-node .glyph{
  position:relative;
  z-index:2;

  display:inline-block;
  font-size:30px;
  line-height:1;

  color: rgba(0,255,65,0.42);
  text-shadow:
    0 0 10px rgba(0,255,65,0.18),
    0 0 22px rgba(0,255,65,0.10);

  opacity:0.55;
  transition:opacity 0.12s ease;
}

.glitch-node:hover .glyph,
.glitch-node:focus-visible .glyph{
  opacity:0.92;
}

.glitch-node .glyph::before,
.glitch-node .glyph::after{
  content:attr(data-glyph);
  position:absolute;
  top:0; left:0;
  pointer-events:none;
  opacity:0.0;
}
.glitch-node .glyph::before{
  color:rgba(255, 0, 90, 0.55);
  transform:translate(-1.6px, 0.2px);
  mix-blend-mode:screen;
}
.glitch-node .glyph::after{
  color:rgba(0, 170, 255, 0.55);
  transform:translate(1.6px, -0.2px);
  mix-blend-mode:screen;
}

.glitch-node:hover .glyph::before,
.glitch-node:hover .glyph::after,
.glitch-node:focus-visible .glyph::before,
.glitch-node:focus-visible .glyph::after{
  opacity:0.85;
  animation:glyphShift 0.22s steps(2, end) infinite;
}

.glitch-node.burst{
  animation:burstNudge 0.22s steps(2, end) 1;
}

.modal-wrapper{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.16s ease;
}
.modal-wrapper.active{
  opacity:1;
  pointer-events:auto;
}

.modal-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.52);
  backdrop-filter: blur(7px);
  z-index:0;
}

.terminal-window{
  position:relative;
  z-index:1;

  width:920px;
  max-width:min(94vw, 920px);
  max-height:min(86vh, 720px);

  display:flex;
  flex-direction:column;

  border-radius:18px;
  background: linear-gradient(180deg, var(--term0), var(--term1));
  border:1px solid rgba(0,255,65,0.40);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);

  overflow:hidden;
}

.term-bar{
  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:12px 14px;
  background: rgba(0,0,0,0.62);
  border-bottom:1px solid rgba(0,255,65,0.22);
}

.term-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.term-led{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(0,255,65,0.95);
}

#term-title{
  color: rgba(0,255,65,0.95);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:70vw;
}

.close-btn{
  border:1px solid rgba(0,255,65,0.32);
  background: rgba(0,0,0,0.40);
  color: rgba(0,255,65,0.92);
  width:36px;
  height:32px;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
  line-height:1;
}
.close-btn:hover,
.close-btn:focus-visible{
  outline:none;
  background: rgba(0,0,0,0.62);
  border-color: rgba(0,255,65,0.58);
}

.term-body{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-height:0;
}

.term-content{
  position:relative;
  z-index:2;

  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;

  padding:18px 18px 16px;
  font-size:16px;
  line-height:1.65;

  color: rgba(0,255,65,0.88);
}

.ca-panel{
  min-height: 52vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
}

.ca-prompt{
  letter-spacing:3px;
  color: rgba(0,255,65,0.92);
  font-weight:700;
  text-transform:uppercase;
}

.action-box{
  width:min(820px, 100%);
  border-radius:14px;
  border:1px dashed rgba(0,255,65,0.52);
  background: rgba(0,0,0,0.58);
  padding:12px 12px;
  cursor:pointer;
  user-select:none;
}
.action-box:hover,
.action-box:focus-visible{
  outline:none;
  background: rgba(0,0,0,0.72);
  border-color: rgba(0,255,65,0.76);
}

.mono{
  word-break:break-all;
  color: rgba(0,255,65,0.98);
}

.ca-display{
  font-size: 1.05rem;
  letter-spacing: 1px;
  padding-top: 2px;
}

.ca-hint{
  margin-top:6px;
  font-size:0.86rem;
  color: rgba(0,255,65,0.62);
}

.term-rain{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;

  opacity:0.32;         
  mix-blend-mode:screen;
  filter: blur(0.15px);
}

#toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:2000;
  bottom:calc(18px + env(safe-area-inset-bottom));

  background: rgba(0,0,0,0.90);
  color: rgba(0,255,65,0.96);
  border:1px solid rgba(0,255,65,0.22);
  box-shadow:0 14px 30px rgba(0,0,0,0.30);

  padding:10px 14px;
  border-radius:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.14s ease, transform 0.14s ease;
}
#toast.active{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}

@keyframes glyphShift{
  0%{ clip-path: inset(0 0 82% 0); transform:translate(-2px,0); }
  50%{ clip-path: inset(38% 0 38% 0); transform:translate(2px,0); }
  100%{ clip-path: inset(82% 0 0 0); transform:translate(-2px,0); }
}

@keyframes burstNudge{
  0%{ transform:translate(-50%, -50%); }
  50%{ transform:translate(calc(-50% - 1px), calc(-50% + 1px)); }
  100%{ transform:translate(-50%, -50%); }
}

@media (max-width:480px){
  .glitch-node{ width:104px; height:104px; border-radius:20px; }
  .glitch-node .glyph{ font-size:28px; }
  .term-content{ padding:16px; font-size:15px; }
  .term-rain{ opacity:0.28; }
}

@media (prefers-reduced-motion: reduce){
  .glitch-node:hover .glyph::before,
  .glitch-node:hover .glyph::after,
  .glitch-node:focus-visible .glyph::before,
  .glitch-node:focus-visible .glyph::after{
    animation:none !important;
  }
}