* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cyan: #00f5ff;
  --green: #00ff88;
  --pink: #ff2d55;
  --bg: #06060f;
  --panel: #0d0d1e;
  --line: #1e1e42;
  --text: #d0e4ff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Fondos decorativos */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,245,255,0.03) 0 1px, transparent 1px 3px);
}
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}

/* Header */
.page-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(6,6,15,0.7); backdrop-filter: blur(6px);
}
.back-home {
  font-family: 'Orbitron', monospace; font-size: 10px; letter-spacing: 2px;
  color: var(--cyan); text-decoration: none; border: 1px solid var(--cyan);
  padding: 6px 10px; text-transform: uppercase; transition: all 0.2s;
}
.back-home:hover { background: rgba(0,245,255,0.15); box-shadow: 0 0 14px rgba(0,245,255,0.4); }
.brand {
  margin-left: auto; font-family: 'Press Start 2P','Orbitron',monospace; font-weight: 900;
  font-size: 18px; letter-spacing: 2px; color: #fff; text-shadow: 0 0 18px rgba(0,245,255,0.6);
}
.brand span { color: var(--cyan); }
.status {
  font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2px;
  color: var(--green); border: 1px solid var(--green); padding: 5px 9px;
}

/* Botones */
.game-btn {
  font-family: 'Orbitron', monospace; font-weight: 700; font-size: 13px; letter-spacing: 2px;
  padding: 12px 18px; cursor: pointer; text-transform: uppercase;
  background: transparent; color: var(--text); border: 1px solid var(--line);
  transition: all 0.15s;
}
.game-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.game-btn.primary { color: var(--cyan); border-color: var(--cyan); background: rgba(0,245,255,0.1); }
.game-btn.primary:hover { background: rgba(0,245,255,0.22); box-shadow: 0 0 18px rgba(0,245,255,0.5); }
.game-btn.secondary { color: var(--green); border-color: var(--green); }
.game-btn.danger { color: var(--pink); border-color: var(--pink); }
.game-btn small { display: block; font-size: 8px; opacity: 0.7; letter-spacing: 1px; }

/* Shell */
.pic-shell {
  position: relative; z-index: 2;
  max-width: 900px; margin: 0 auto; padding: 20px 16px 40px;
}

/* Lobby */
.lobby-card {
  background: var(--panel); border: 1px solid var(--line);
  padding: 28px 22px; text-align: center; max-width: 460px; margin: 30px auto;
}
.lobby-card h2 {
  font-family: 'Press Start 2P','Orbitron',monospace; font-size: 16px;
  color: var(--cyan); letter-spacing: 3px; margin-bottom: 14px;
  text-shadow: 0 0 18px rgba(0,245,255,0.5);
}
.lobby-lead { font-size: 16px; color: rgba(208,228,255,0.7); margin-bottom: 18px; }
.lobby-msg { margin-top: 14px; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--green); min-height: 18px; }
.online-users { margin-top: 16px; }

/* Topbar del juego */
.pic-topbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
}
.pic-role { font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 2px; color: var(--green); }
.pic-word {
  margin-left: auto; font-family: 'Press Start 2P','Orbitron',monospace; font-size: 14px;
  letter-spacing: 3px; color: #fff; text-shadow: 0 0 14px rgba(0,245,255,0.6);
}
.pic-timer { font-family: 'Share Tech Mono', monospace; font-size: 16px; color: var(--cyan); min-width: 44px; text-align: right; }

/* Canvas */
.canvas-wrap { position: relative; }
#pic-canvas {
  width: 100%; height: auto; aspect-ratio: 800 / 560;
  background: #f7f7fa; border: 1px solid var(--cyan);
  box-shadow: 0 0 24px rgba(0,245,255,0.15); touch-action: none; display: block;
  cursor: crosshair;
}

/* Overlay de elegir palabra */
.pic-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,15,0.85); backdrop-filter: blur(4px);
}
.overlay-card { text-align: center; padding: 24px; }
.overlay-card h3 { font-family: 'Orbitron', monospace; color: var(--cyan); letter-spacing: 2px; margin-bottom: 16px; }
.choose-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Herramientas */
.pic-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.colors { display: flex; gap: 6px; }
.color-swatch {
  width: 28px; height: 28px; border: 2px solid var(--line); cursor: pointer; padding: 0;
}
.color-swatch.active { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6); }
.tool-btn {
  font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 1px;
  padding: 8px 12px; cursor: pointer; background: transparent;
  color: var(--text); border: 1px solid var(--line); transition: all 0.15s;
}
.tool-btn:hover, .tool-btn.active { border-color: var(--cyan); color: var(--cyan); }

/* Adivinar */
.pic-guess { display: flex; gap: 8px; margin-top: 12px; }
#pic-guess-input {
  flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  padding: 12px 14px; font-family: 'Rajdhani', sans-serif; font-size: 18px; outline: none;
}
#pic-guess-input:focus { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,245,255,0.25); }

/* Feed de intentos */
.pic-feed { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; }
.pic-feed li {
  font-family: 'Share Tech Mono', monospace; font-size: 13px; color: rgba(208,228,255,0.8);
  padding: 6px 10px; border: 1px solid var(--line); background: rgba(13,13,30,0.6);
}
.pic-feed li.acierto { color: var(--green); border-color: rgba(0,255,136,0.4); }
.pic-feed li b { color: var(--cyan); }

@media (max-width: 600px) {
  .brand { font-size: 14px; }
  .pic-word { font-size: 11px; }
}