@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root {
  --bg: #000000;
  --text: #FFB000;
  --grid-line: rgba(255,176,0,0.1);
  --border: #FFB000;
}

html, body { margin:0; padding:0; width:100%; height:93vh; background:var(--bg); color:var(--text); font-family:'VT323', monospace; overflow:hidden; }
.edge-border { position:relative; width:100vw; height:100vh; box-sizing:border-box; border:4px solid var(--border); }
.container { position:relative; width:100%; height:100%; display:flex; flex-direction:column; }
.header { padding:0.5rem 1rem; text-align:right; }
#panic { background:none; border:1px solid var(--text); color:var(--text); padding:0.2rem 0.6rem; font-size:0.9rem; }
.grid { flex:1; display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:1.5rem; padding:1.5rem; overflow-y:auto; position:relative; padding-bottom: 50vh; }
/* background grid lines */
.grid::before {
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.item { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; hover:opacity(0.7); transition: opacity 0.3s;}
.item:hover { opacity:0.7; }
.item img { width:78px; height:48px; filter: invert(0%) sepia(0%); }
.item span { margin-top:0.5rem; font-size:0.9rem; color:var(--text);}
.footer { padding:0.5rem 1rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--text); position: fixed; background:var(--bg); color:var(--text); bottom: 0; left: 0; width: 100%; padding: 10px;}
.footer-link { color:var(--text); text-decoration:none; font-size:0.9rem; hover:opacity(0.7); transition: opacity 0.3s; }
.footer-link:hover { opacity:0.7; }
.links { color:var(--text); text-decoration:none; font-size:1.2rem; height: 1.3rem; display:flex; hover:opacity(0.7); transition: opacity 0.3s; }
.links:hover { opacity:0.7; }
.logo { width:100px; filter: invert(0%) sepia(0%); }
/* Suggestions form */
.suggestion-form { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.suggestion-box { width: 100%; min-height: 8rem; background: #000; color: #FFB000; border: 2px solid #FFB000; padding: 0.75rem; font-family: 'VT323', monospace; font-size: 1rem; resize: vertical; outline: none; }
.suggestion-box::placeholder { color: rgba(255, 176, 0, 0.5); }
.btn-suggest { align-self: flex-end; background: none; color: #FFB000; border: 2px solid #FFB000; padding: 0.5rem 1.25rem; font-family: 'VT323', monospace; font-size: 1rem; cursor: pointer; transition: background 0.2s, color 0.2s; }
.btn-suggest:hover { background: #FFB000; color: #000;}


/* CRT scanline overlay */
.crt-overlay { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
/* Flicker effect */
@keyframes flicker { 0%,100% {opacity:1;} 50% {opacity:0.97;} }
.container { animation: flicker 0.15s infinite; }

/* Custom scrollbar */
.grid::-webkit-scrollbar { width:8px; }
.grid::-webkit-scrollbar-thumb { background: var(--text); opacity:0.3; }
.grid::-webkit-scrollbar-track { background: transparent; }