/* czaczi-style sandbox base (single source of truth)
   file: /static/site.css
*/

:root{
  --bg0:#06090f;
  --bg1:#070b10;
  --ink:#cfe8d6;
  --muted:rgba(207,232,214,.72);
  --line:rgba(207,232,214,.18);
  --line2:rgba(207,232,214,.28);
  --glow:rgba(90,255,170,.25);
  --glow2:rgba(90,255,170,.45);

  /* matrix greens (dim -> bright) */
  --mx-dim: rgba(40, 190, 95, .42);
  --mx-mid: rgba(55, 235, 125, .75);
  --mx-bright: rgba(120, 255, 180, 1);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --maxw: 1100px;
  --pad: 20px;
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1200px 700px at 50% -20%, rgba(90,255,170,.08), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.02em;
  overflow-x:hidden;
}

/* shell layout */
.shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.top, .bottom{
  width:100%;
  display:flex;
  justify-content:center;
  pointer-events:none; /* contents enable pointer events themselves */
}

.top-inner, .bottom-inner{
  width:min(var(--maxw), calc(100% - 2*var(--pad)));
  pointer-events:auto;
}

/* content frame helpers */
.panel{
  border:1px solid var(--line);
  background: rgba(2,4,7,.35);
  box-shadow: 0 0 40px rgba(0,0,0,.35), 0 0 24px var(--glow);
  backdrop-filter: blur(3px);
}

.panel.pad{ padding:14px; }

.hr{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line2), transparent);
  margin:10px 0;
}

/* subtle noise overlay */
body:before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px);
  opacity:.10;
  pointer-events:none;
}

/* matrix canvas (goes behind everything) */
#matrix{
  position:fixed;
  inset:0;
  z-index:-1;
}

/* logo block */
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 18px 0 12px;
}

.logo a{
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
  letter-spacing:.08em;
  font-weight:600;
  text-shadow: 0 0 14px var(--glow);
  transform: translateZ(0);
}

.logo a:hover{
  animation: breathe 1.25s ease-in-out infinite;
}

/* CRT top-left PS2P logo (separate class so site.js doesn't animate it) */
body.crt-layout .top .logo-ps2p{
  font-family: "Press Start 2P", var(--mono);
  font-size:26px;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  display:inline-block;

  /* base dark matrix green */
  color: var(--mx-dim);
  text-shadow: 0 0 8px rgba(40,190,95,.10);

  position:relative;
}

/* per-letter spans (created by JS) */
body.crt-layout .top .logo-ps2p .ch{
  display:inline-block;
  color: inherit;
  opacity: .95;
  transform: translateY(0);
  filter: none;
  text-shadow: inherit;
  will-change: transform, filter, opacity, text-shadow, color;
  transition:
    color 140ms linear,
    opacity 140ms linear,
    filter 140ms linear,
    text-shadow 140ms linear,
    transform 140ms linear;
}

/* “spark” = brief bright phosphor hit (subtle, not a big glow) */
body.crt-layout .top .logo-ps2p .ch.spark{
  color: var(--mx-bright);
  opacity: 1;
  filter: brightness(1.10);
  text-shadow:
    0 0 6px rgba(120,255,180,.18),
    0 0 10px rgba(120,255,180,.08);
  transform: translateY(var(--dy, 0px));
}

/* optional “soft” spark */
body.crt-layout .top .logo-ps2p .ch.soft{
  color: var(--mx-mid);
  opacity: 1;
  filter: brightness(1.05);
  text-shadow: 0 0 6px rgba(90,255,170,.10);
}

@keyframes breathe{
  0%,100%{ text-shadow: 0 0 14px var(--glow); filter:brightness(1); transform: translateZ(0); }
  50%{ text-shadow: 0 0 22px var(--glow2); filter:brightness(1.15); transform: translateZ(0); }
}

/* nav panel */
#navPanelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 14px 14px;
  border-bottom:1px solid var(--line);
}

#navPanelHeader .title{
  opacity:.85;
  letter-spacing:.08em;
}

#navPanelHeader button{
  font-family:var(--mono);
  color:var(--ink);
  background:transparent;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  pointer-events:auto;
}

#navPanelHeader button:hover{
  border-color:var(--line2);
  box-shadow: 0 0 16px var(--glow);
}

/* generic links */
a{ color:var(--ink); }
a:hover{ color:#ffffff; }

/* utilities */
.muted{ color:var(--muted); }
.small{ font-size:11px; opacity:.9; }
.nowrap{ white-space:nowrap; }

/* footer / bottom */
.bottom-inner{
  padding: 0 0 18px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body.crt-layout .top .logo-ps2p .ch{
    transition:none !important;
  }
  body.crt-layout .top .logo-ps2p .ch.spark,
  body.crt-layout .top .logo-ps2p .ch.soft{
    color: inherit !important;
    text-shadow: inherit !important;
    filter: none !important;
    transform: none !important;
  }
}

/* responsive */
@media (max-width: 640px){
  :root{ --pad: 14px; }
  body{ font-size:11px; }
}