/* rps-arena/shared.css */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&family=Fredoka:wght@400;600&display=swap');

:root {
  --bg: #030310;
  --surface: #0a0a1e;
  --surface2: #12122a;
  --border: #2a2a4a;
  --text: #e8e8f0;
  --text-dim: #8888aa;

  --neon-cyan: #00f5ff;
  --neon-pink: #ff6b9d;
  --neon-yellow: #ffbe0b;
  --neon-green: #39ff14;
  --neon-red: #ff4444;
  --neon-purple: #bf00ff;
  --neon-orange: #ff8c00;

  --team-a: #ff6b9d;
  --team-b: #00f5ff;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
  min-height: 100vh;
}

/* Panel component */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.panel-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--neon-cyan);
  padding: 12px 16px;
  background: rgba(0, 245, 255, 0.05);
  border-bottom: 1px solid var(--border);
  letter-spacing: 1px;
}

.panel-body {
  padding: 16px;
}

/* Button styles */
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 10px 16px;
  border: 2px solid var(--neon-cyan);
  background: transparent;
  color: var(--neon-cyan);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  letter-spacing: 1px;
}

.btn:hover {
  background: rgba(0, 245, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.4);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-green {
  border-color: var(--neon-green);
  color: var(--neon-green);
}

.btn-green:hover {
  background: rgba(57, 255, 20, 0.1);
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
}

.btn-pink {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
}

.btn-pink:hover {
  background: rgba(255, 107, 157, 0.1);
  box-shadow: 0 0 12px rgba(255, 107, 157, 0.4);
}

.btn-orange {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
}

.btn-orange:hover {
  background: rgba(255, 140, 0, 0.1);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.4);
}

/* Input styles */
input, select, textarea {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--neon-cyan);
}

/* Label */
.label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: block;
}

/* Badge */
.badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
}

.badge-cyan {
  background: rgba(0, 245, 255, 0.15);
  color: var(--neon-cyan);
  border: 1px solid var(--neon-cyan);
}

.badge-pink {
  background: rgba(255, 107, 157, 0.15);
  color: var(--neon-pink);
  border: 1px solid var(--neon-pink);
}

/* Function card */
.function-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.function-card-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--neon-yellow);
}

.function-card-student {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: var(--text-dim);
}

.function-card-version {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
}

/* CodeMirror overrides */
.CodeMirror {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  height: 300px !important;
  background: var(--surface2) !important;
  border-radius: 0 0 4px 4px;
}