:root{
  --main-bg: #0D0D0D;
  --text-color: #E0E0E0;
  --accent-blue: #00FFFF;
  --accent-green: #00FF00;
  --accent-red: #FF007F; /* From auxiliary color in spec, used for female dialogue */
  --pixel-font: 'Press Start 2P', cursive;
  --mono-font: 'Roboto Mono', monospace;
  --glitch-color1: #00FF00;
  --glitch-color2: #00FFFF;
}

.urban-panel{
  max-width: 900px;
  margin: 5vh auto;
  padding: 25px;
  background-color: rgba(0,0,0,0.85);
  border: 2px solid var(--accent-blue);
  box-shadow: 0 0 15px var(--accent-blue), inset 0 0 10px var(--accent-blue);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.urban-panel::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--accent-green) 0%, transparent 20%, transparent 80%, var(--accent-blue) 100%);
  opacity: 0.05;
  pointer-events: none;
}
.urban-panel hr{
  border: none;
  border-top: 1px dashed rgba(0,255,255,0.4);
  margin: 20px 0;
  box-shadow: 0 0 5px rgba(0,255,255,0.6);
}
.urban-panel p,.urban-panel div,.urban-panel details{
  line-height: 1.6;
  margin-bottom: 10px;
  font-size: 0.95em;
  color: var(--text-color);
}
.urban-panel h1,.urban-panel h2,.urban-panel h3,.urban-panel h4,.urban-panel h5,.urban-panel h6{
  font-family: var(--pixel-font);
  color: var(--accent-green);
  text-shadow: 0 0 8px var(--accent-green);
  margin-bottom: 15px;
  text-transform: uppercase;
}
.urban-panel span{
  display: block;
  margin-bottom: 5px;
}
.urban-panel span.aus{
  color: var(--accent-blue);
  text-shadow: 0 0 5px var(--accent-blue);
  font-weight: bold;
}
.urban-panel span.aes{
  color: var(--accent-red);
  text-shadow: 0 0 5px var(--accent-red);
  font-weight: bold;
}
.urban-panel details{
  background-color: rgba(0,0,0,0.6);
  border: 1px solid var(--accent-green);
  box-shadow: 0 0 8px var(--accent-green);
  border-radius: 5px;
  margin-top: 20px;
  transition: all 0.3s ease-in-out;
}
.urban-panel details[open]{
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px var(--accent-blue);
}
.urban-panel summary{
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  font-family: var(--pixel-font);
  color: var(--accent-green);
  text-shadow: 0 0 5px var(--accent-green);
  transition: color 0.3s, text-shadow 0.3s;
  position: relative;
  user-select: none;
}
.urban-panel summary:hover{
  color: var(--accent-blue);
  text-shadow: 0 0 10px var(--accent-blue);
}
.urban-panel summary::before{
  content: '▶';
  display: inline-block;
  margin-right: 10px;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
  color: var(--accent-green);
}
.urban-panel details[open] summary::before{
  content: '▼';
  transform: rotate(90deg);
  color: var(--accent-blue);
}
.urban-panel details p,.urban-panel details div{
  padding: 5px 15px;
  border-top: 1px dashed rgba(0,255,255,0.2);
}
.urban-panel details p:first-of-type,.urban-panel details div:first-of-type{
  border-top: none;
}
.urban-panel details > *:not(summary){
  padding: 10px 15px;
  margin: 0;
  color: var(--text-color);
  font-size: 0.85em;
}
.urban-panel details > *:last-child{
  padding-bottom: 15px;
}
.urban-panel details > *:first-of-type:not(summary){
  padding-top: 15px;
}
.urban-panel details p + div,.urban-panel details div + p{
  margin-top: -10px;
}
.urban-panel details span{
  display: inline;
}
.urban-panel details ul{
  list-style: none;
  padding-left: 15px;
  margin: 0;
}
.urban-panel details ul li{
  margin-bottom: 5px;
  color: var(--accent-green);
  position: relative;
}
.urban-panel details ul li::before{
  content: '// ';
  color: var(--accent-blue);
}
.urban-panel details ul li:hover{
  color: var(--accent-blue);
  text-shadow: 0 0 3px var(--accent-blue);
}
@keyframes glitchText{
  0%{text-shadow: 2px 0 0 var(--glitch-color1), -2px 0 0 var(--glitch-color2);}
  25%{text-shadow: -2px 0 0 var(--glitch-color1), 2px 0 0 var(--glitch-color2);}
  50%{text-shadow: 3px 0 0 var(--glitch-color1), -3px 0 0 var(--glitch-color2);}
  75%{text-shadow: -3px 0 0 var(--glitch-color1), 3px 0 0 var(--glitch-color2);}
  100%{text-shadow: 2px 0 0 var(--glitch-color1), -2px 0 0 var(--glitch-color2);}
}
.glitch-effect{
  animation: glitchText 0.5s infinite alternate;
}
@media (max-width: 768px){
  .urban-panel{
    margin: 2vh auto;
    padding: 15px;
    border-width: 1px;
    box-shadow: 0 0 10px var(--accent-blue), inset 0 0 5px var(--accent-blue);
    width: calc(100% - 30px);
  }
  .urban-panel h1,.urban-panel h2,.urban-panel h3,.urban-panel h4,.urban-panel h5,.urban-panel h6{
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  .urban-panel p,.urban-panel div,.urban-panel details{
    font-size: 0.9em;
  }
  .urban-panel summary{
    padding: 8px 10px;
    font-size: 0.95em;
  }
  .urban-panel details > *:not(summary){
    font-size: 0.8em;
    padding: 8px 10px;
  }
}