/* Cybersecurity CTF Theme for infosec.ink */
:root {
  --primary-color: #00ff00;      /* Neon green */
  --secondary-color: #0a192f;    /* Dark blue */
  --accent-color: #64ffda;       /* Cyan accent */
  --dark-bg: #0a0e17;            /* Very dark blue-black */
  --terminal-green: #33ff33;     /* Terminal green */
  --warning-red: #ff3333;        /* Warning red */
  --text-color: #e6f1ff;         /* Light blue-white text */
  --panel-bg: rgba(16, 24, 39, 0.8); /* Semi-transparent dark panel */
  --border-glow: 0 0 5px var(--primary-color);
}

/* Terminal font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

/* Body and background */
body {
  background-color: #0a1620;
  color: var(--text-color);
  font-family: 'Fira Code', monospace;
  background-image: none;
}

/* Game area */
#gameAreaWrapper {
  background: #0a1620;
}

/* Start menu */
#startMenu {
  background-color: var(--secondary-color);
  border: 1px solid var(--accent-color);
  box-shadow: var(--border-glow);
  color: var(--text-color);
}

#startMenu p {
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 28px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px var(--primary-color);
}

/* Add a subtitle with domain name */
#startMenu p:after {
  content: "infosec.ink";
  display: block;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--accent-color);
  margin-top: 5px;
}

/* Player name input */
#playerNameInput {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--accent-color);
  color: var(--text-color);
  padding: 12px;
  font-family: 'Fira Code', monospace;
}

#playerNameInput:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 5px var(--primary-color);
}

/* Buttons */
#startMenu button {
  background: var(--secondary-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  box-shadow: none;
  text-transform: uppercase;
  font-family: 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s;
}

#startMenu button:hover,
#startMenu button:active {
  background: var(--primary-color);
  color: var(--secondary-color);
  text-shadow: none;
}

#startMenu button:disabled {
  background: rgba(0, 0, 0, 0.3);
  color: #555;
  border-color: #555;
}

/* Connect wallet button */
#connectWalletButton {
  background: var(--secondary-color);
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  box-shadow: none;
  text-transform: uppercase;
  font-family: 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s;
}

#connectWalletButton:hover {
  background: var(--accent-color);
  color: var(--secondary-color);
}

/* Settings */
#settings, #instructions {
  color: var(--text-color);
}

#settings h3, #instructions h3 {
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
  position: relative;
}

#settings h3:before, #instructions h3:before {
  content: "> ";
  color: var(--primary-color);
}

/* Status and leaderboard */
#status {
  background-color: var(--panel-bg);
  border: 1px solid var(--accent-color);
}

#status .title {
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Solana balance */
#solanaBalance {
  background-color: var(--panel-bg);
  border: 1px solid var(--accent-color);
}

#solanaValue {
  color: var(--primary-color);
  font-weight: bold;
}

/* Terminal effect for errors */
.input-error {
  color: var(--warning-red);
  font-family: 'Fira Code', monospace;
}

/* Terminal animation for text */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#settings ul li, #instructions ul li {
  position: relative;
  list-style-type: none;
}

#instructions ul li:before {
  content: "> ";
  color: var(--primary-color);
}

/* Exit button */
#exitButton {
  background-color: rgba(255, 0, 0, 0.7);
  color: white;
  border: 1px solid #ff0000;
}

#exitButton:hover {
  background-color: #ff0000;
}

/* Wallet status */
#walletStatus {
  font-family: 'Fira Code', monospace;
}

.wallet-connected {
  color: var(--terminal-green);
}

.wallet-error {
  color: var(--warning-red);
}

/* Verify transaction button */
.solana-verify-btn {
  background-color: var(--panel-bg);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  font-family: 'Fira Code', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.solana-verify-btn:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

/* Hack-like effect for chatbox */
.chatbox {
  background: rgba(0, 20, 40, 0.7);
  border: 1px solid var(--accent-color);
}

.chatbox .chat-input {
  background: rgba(0, 0, 0, 0.3);
  color: var(--primary-color);
  border-top: 1px solid var(--accent-color);
  font-family: 'Fira Code', monospace;
}

.chatbox .chat-list li.system {
  color: var(--primary-color);
}

/* Matrix-like loading animation */
@keyframes matrix-rain {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

#startMenuWrapper {
  background: rgba(15, 22, 36, 0.90);
}