@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; cursor: crosshair; }
body { background: #000; color: #fff; font-family: 'Courier Prime', monospace; font-size: 11px; height: 100vh; overflow: hidden; }
.rina-red { color: #ff0000; font-weight: bold; text-shadow: 0 0 5px rgba(255,0,0,0.5); }

#system-wrapper { display: flex; height: 100vh; }
#sidebar { width: 180px; border-right: 1px solid #222; background: #050505; padding: 20px; z-index: 10; }
#terminal { flex-grow: 1; display: flex; flex-direction: column; z-index: 5; position: relative; }

.nav-item { display: block; color: #888; text-decoration: none; margin-bottom: 20px; font-size: 14px; }
.nav-item:hover { color: #fff; text-shadow: 0 0 8px #fff; }

.board-layer { display: none; padding: 30px; animation: fadeIn 0.5s ease-out; height: calc(100vh - 40px); overflow-y: auto; }
.board-layer.active { display: block; }
.board-header { border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 20px; color: #444; }

/* FRISK: GLOBAL WANDERER (COLOR) */
#frisk-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 99999; pointer-events: none; }
#frisk-sprite { position: absolute; height: 40px; image-rendering: pixelated; transition: all 3.5s linear; top: 80%; left: 50%; }

/* CONTENT STYLES (NO GRAYSCALE) */
.wired-img { width: 100%; max-width: 400px; border: 1px solid #222; margin-bottom: 15px; }
.entity-grid { display: flex; flex-direction: column; gap: 30px; }
.entity-card { display: flex; gap: 20px; align-items: center; border-left: 1px solid #111; padding-left: 10px; }
.entity-img { width: 80px; height: 80px; object-fit: cover; border: 1px solid #333; }
.quote { font-style: italic; color: #ccc; font-size: 12px; }

/* FLAME */
#flame-container { margin-top: 60px; text-align: center; padding-bottom: 100px; border-top: 1px solid #111; padding-top: 30px; }
#eternal-flame { width: 30px; height: 30px; background: #ff0000; border-radius: 50% 50% 20% 80%; transform: rotate(-45deg); display: inline-block; cursor: pointer; box-shadow: 0 0 10px #ff0000; animation: flicker 0.1s infinite alternate; }
#eternal-flame.ignited { background: #fff; box-shadow: 0 0 40px #ff0000, 0 0 80px #0000ff; animation: rainbow 2s infinite linear; }

@keyframes flicker { 0% { opacity: 0.8; } 100% { opacity: 1; transform: rotate(-43deg) scale(1.05); } }
@keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: #222; }