/* Core variables, base layout, card, buttons, and UI components (extracted from original styles.css) */

:root{
  --bg:#000;
  --green-1:#00ff41;
  --green-2:#39ff14;
  --green-3:#7cffb2;
  --muted:#0b0b0b;
  --glass: rgba(0,0,0,0.45);
  --accent: var(--green-1);
  --scroll-bg: rgba(6,6,6,0.75);
  --scroll-thumb: rgba(40,40,40,0.9);
  --scroll-thumb-hover: rgba(64,64,64,0.98);
  --scroll-track-glow: rgba(57,255,20,0.04);
  font-family: 'UnifrakturCook', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* alternative serif for lines containing 'k' to avoid glyph issues */
.alt-font{
  font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
  font-size:16.5px;
  line-height:1.45;
  color:var(--green-2);
  animation: side-bounce 2.4s ease-in-out infinite;
  will-change: transform;
}

/* subtle movement */
@keyframes side-bounce {
  0%   { transform: translateX(-6px); }
  50%  { transform: translateX(6px); }
  100% { transform: translateX(-6px); }
}

/* base layout */
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--green-1);overflow:hidden}
html,body{
  background:
    linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.68)),
    url('/Saint Monti & Lovequincyy.jpg') center/cover no-repeat fixed;
  background-blend-mode: normal;
  color:var(--green-1);
  height:100%;
  margin:0;
  overflow:hidden;
}
canvas#matrix{position:fixed;inset:0;z-index:0}

/* UI container */
.ui{position:relative;z-index:2;display:flex;align-items:center;gap:16px;padding:18px 28px}

/* Card & hero */
.hero{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;height:calc(100vh - 120px)}
.card{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:min(880px,92%);
  max-height: calc(100vh - 160px);
  overflow: auto;
  background:linear-gradient(180deg, rgba(0,0,0,0.72), rgba(10,10,10,0.72));
  border:1px solid rgba(0,255,65,0.08);
  padding:22px;
  border-radius:14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 80px rgba(0,0,0,0.75);
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  text-align:center;
  align-items:center;
  justify-items:center;
}

/* Card title */
@keyframes title-pop {
  0%   { transform: scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); color: var(--green-2); letter-spacing:0.6px; font-weight:700; filter: none; }
  35%  { transform: scale(1.06); text-shadow: 0 18px 48px rgba(57,255,20,0.22); color: #b7ffb7; letter-spacing:0.8px; font-weight:800; filter: drop-shadow(0 6px 18px rgba(57,255,20,0.18)); }
  70%  { transform: scale(1.02); text-shadow: 0 12px 36px rgba(57,255,20,0.14); color: #dfffe0; letter-spacing:0.7px; font-weight:800; filter: drop-shadow(0 4px 14px rgba(57,255,20,0.12)); }
  100% { transform: scale(1); text-shadow: 0 6px 20px rgba(57,255,20,0.06); color: var(--green-2); letter-spacing:0.6px; font-weight:700; filter: none; }
}
.card-title{
  display:block;
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:26px;
  color:var(--green-2);
  margin:0 0 8px 0;
  padding:6px 12px;
  text-align:center;
  letter-spacing:0.6px;
  text-shadow: 0 6px 20px rgba(57,255,20,0.06);
  font-weight:700;
  position:sticky;
  top:8px;
  z-index:6;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.32));
  border-radius:8px;
  backdrop-filter: blur(4px);
  transform-origin: center;
  will-change: transform, text-shadow, color;
  animation: title-pop 2200ms cubic-bezier(.2,.9,.2,1) infinite;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.45);
  transition: text-shadow .18s ease, color .18s ease, transform .18s ease;
}

/* Subheading */
.card-subheading{
  margin-top:6px;
  font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
  font-size:16px;
  color: rgba(124,255,178,0.95);
  letter-spacing:0.8px;
  font-weight:700;
  text-transform:none;
  text-align:center;
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
  -webkit-text-stroke: 0.35px rgba(0,0,0,0.35);
  opacity:0.95;
}

/* Buttons and interactive elements */
.grid-btn{ display:inline-block; margin:0 0 8px 0; color:var(--accent); background:transparent; border:none; padding:8px 18px; border-radius:10px; font-size:28px; font-weight:600; cursor:pointer; }
.grid-btn:hover{ transform: translateY(-3px); }
.btn{ background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45)); border:1px solid rgba(57,255,20,0.18); color:#ffffff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; transition: all 180ms ease; }
.interactive { transition: transform 160ms ease, box-shadow 200ms ease; position: relative; }
.interactive.active { animation: glow-pulse 840ms ease-out; box-shadow:0 18px 64px rgba(57,255,20,0.32); border-color:var(--green-2); color:var(--green-2); background:linear-gradient(180deg, rgba(57,255,20,0.06), rgba(0,0,0,0.45)); }
@keyframes glow-pulse { 0%{box-shadow:0 0 0 rgba(57,255,20,0);} 30%{box-shadow:0 0 28px rgba(57,255,20,0.45); transform: translateY(-2px);} 60%{box-shadow:0 0 44px rgba(57,255,20,0.32); transform: translateY(-3px);} 100%{box-shadow:0 0 0 rgba(57,255,20,0);} }

/* Player and footer */
.player audio{width:100%;margin-top:8px;background:transparent;color:var(--green-2)}
footer.footer{position:relative;z-index:2;justify-content:center;padding:12px 20px;border-top:1px solid rgba(0,255,65,0.04);font-size:12px;color:rgba(0,255,65,0.5);position:fixed;left:0;right:0;bottom:0}

/* Links */
.links-row{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.stream, .social{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid rgba(0,255,65,0.12);color:var(--green-2);text-decoration:none;font-weight:600;transition:transform .16s ease, box-shadow .16s ease;text-align:center}
.stream:hover, .social:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,255,65,0.12);color:var(--accent);border-color:var(--accent);background:rgba(0,0,0,0.25)}

/* Signup / forms */
.signup{display:flex;gap:8px;margin-top:14px;align-items:center}
.signup input[type="email"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,255,65,0.08);background:rgba(0,0,0,0.35);color:var(--green-2);outline:none}
.signup input[type="email"]:focus{box-shadow:0 6px 24px rgba(0,255,65,0.06);border-color:var(--accent)}
.signup-form{display:flex;gap:8px;align-items:center;width:100%}
.signup-form input[type="email"]{flex:1;padding:12px 14px;border-radius:8px;border:1px solid rgba(0,255,65,0.12);background:rgba(0,0,0,0.35);color:var(--green-2);outline:none;font-weight:600}
.signup-form .btn{flex:0 0 auto;padding:10px 14px}
.signup-form input[type="email"]::placeholder{color:rgba(124,255,178,0.5)}
.signup-msg{margin:8px 0 0 0;font-size:13px;color:rgba(124,255,178,0.9)}

/* Command prompt box */
.cmd-container{width:100%;display:flex;justify-content:center;position: relative;}
.cmd-box{
  width:min(520px,86%);
  max-width:100%;
  background:linear-gradient(180deg,#050505,#0b0b0b);
  border:1px solid rgba(57,255,20,0.08);
  color:var(--green-2);
  padding:10px 12px;
  border-radius:8px;
  font-family: 'Courier New', Courier, monospace;
  font-size:14px;
  text-align:left;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);
  caret-color: #9aff9a;
  outline:none;
  min-height:36px;
  align-self:center;
}
.cmd-box:focus{ box-shadow:0 0 0 6px rgba(57,255,20,0.04), inset 0 2px 10px rgba(0,0,0,0.6); border-color:var(--green-2); }
.cmd-label{
  position: absolute;
  left: 12%;
  top: 8px;
  transform: translateY(-50%);
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  color: rgba(124,255,178,0.95);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  letter-spacing: 0.6px;
  pointer-events: none;
  z-index: 3;
  animation: label-bounce 1.6s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cmd-arrow{ display:inline-block; font-size:12px; line-height:1; padding:6px 8px; border-radius:8px; background: rgba(0,0,0,0.55); border:1px solid rgba(57,255,20,0.12); color: var(--green-2); box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 10px rgba(57,255,20,0.04) inset; transform-origin: center; animation: arrow-pulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes label-bounce { 0%{transform:translateY(-50%) translateY(0);}25%{transform:translateY(-50%) translateY(-6px);}50%{transform:translateY(-50%) translateY(0);}75%{transform:translateY(-50%) translateY(-3px);}100%{transform:translateY(-50%) translateY(0);} }
@keyframes arrow-pulse { 0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(57,255,20,0);} 40%{transform:translateY(4px) scale(1.02);box-shadow:0 10px 28px rgba(57,255,20,0.08);} 80%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(57,255,20,0);} 100%{transform:translateY(0) scale(1);} }

/* Scrollbars */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: linear-gradient(180deg, rgba(6,6,6,0.85), rgba(10,10,10,0.75)); border-radius: 10px; box-shadow: inset 0 0 8px var(--scroll-track-glow); }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--scroll-thumb), var(--scroll-thumb-hover)); border-radius: 10px; border: 2px solid rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--scroll-thumb-hover), #4cff6a33); box-shadow: 0 0 18px rgba(57,255,20,0.08); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-bg); }
.card { scrollbar-color: var(--scroll-thumb) var(--scroll-bg); scrollbar-width: thin; }

/* small responsive tweaks */
@media (max-width:640px){
  .alt-font{ animation-duration:3s; transform: translateX(0); }
  .ui{padding:12px}
  .card{padding:18px}
  .logo h1{font-size:18px}
  canvas#matrix{filter:contrast(1.1)}
  .card-title{ font-size:18px; top:6px; padding:6px 10px }
  .section-title{ font-size:14px }
}