:root {
  --bg: rgba(13,16,21,255);
  --text: rgba(143,176,177,255);
  --subtext: rgba(90,111,114,255);
}

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Fira Code', monospace;
  height: 100vh;
}

#dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 180px;
  gap: 10px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.panel {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--subtext);
  padding: 10px;
  overflow: hidden;
}

#terminal-panel {
  display: flex;
  flex-direction: column;
}

#page-content {
  flex: 1;
  overflow-y: auto;
}

#terminal {
  border-top: 1px solid var(--subtext);
  display: flex;
  flex-direction: column;
  height: 150px;
}

#terminal-output {
  flex: 1;
  white-space: pre-wrap;
  overflow-y: auto;
}

#terminal-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
}

#filesystem ul {
  list-style: none;
  padding: 0;
}

#filesystem li {
  margin: 4px 0;
}

#filesystem a {
  color: var(--text);
  text-decoration: none;
}

/* Keyboard */
#keyboard-panel {
  display: flex;
  flex-direction: column;
}
#keyboard { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.keyboard-row { display:flex; gap:4px; }
.key {
  flex:1;
  background: var(--text);
  border: none;
  color: var(--bg);
  font-weight: bold;
  cursor: pointer;
}
.key.active {
  background: var(--subtext);
  color: var(--bg);
}

/* Boot screen */
#boot-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#boot-screen.hidden { display: none; }
#boot-log { white-space: pre-wrap; }
#logo { text-align:center; font-size:2rem; margin-top:20px; }


.category-buttons {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin:20px 0;
}
.category-button {
  border:none;
  background:none;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  width:180px;
}
.category-button img { width:100%; display:block; border-radius:12px; }

#board { display:flex; flex-direction:column; gap:20px; }
.card-row { display:flex; flex-wrap:wrap; gap:15px; margin-bottom:30px; }
.dino-button {
  width:300px; height:120px; border:none; border-radius:12px;
  background-size:cover; background-position:center; cursor:pointer;
  position:relative; box-shadow:0 0 0 4px var(--text);
  display:flex; align-items:center; justify-content:center;
}
.dino-button-label {
  background-color:rgba(20,20,20,0.7);
  color:#fff; padding:8px 12px; font-weight:bold; font-size:14px; border-radius:6px;
}
.modal { position:fixed; top:10%; left:10%; width:80%; background:var(--bg); padding:20px; border-radius:10px; z-index:10; }
.hidden { display:none; }
.gallery-container { margin-top:15px; position:relative; height:200px; }
.gallery-image { max-height:200px; max-width:100%; border-radius:6px; position:absolute; top:0; left:0; opacity:0; transition:opacity 1s; }
.gallery-image.active { opacity:1; z-index:1; }
.gallery-controls { text-align:center; margin-top:5px; }
.gallery-controls button { background-color:var(--text); color:var(--bg); border:none; padding:6px 12px; margin:0 6px; border-radius:4px; font-weight:bold; cursor:pointer; }
.lightbox { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); justify-content:center; align-items:center; z-index:999; }
.lightbox img { max-width:90%; max-height:90%; border-radius:10px; }