/*
 * Lucavo Game Widget — game.css
 * Nur für das Canvas-Spiel. Wird per Shortcode [lucavo_game] geladen.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

.lucavo-game-wrap {
  --cyan:       #00d4ff;
  --violet:     #7b2fff;
  --arc:        linear-gradient(135deg, #00d4ff 0%, #7b2fff 100%);
  --panel:      #0d0d1f;
  --rim:        rgba(0,212,255,0.10);
  --rim-hi:     rgba(0,212,255,0.28);
  --ink-muted:  #6b6b8a;
  --r:          10px;
  --r-lg:       18px;
  --glow-c:     0 0 24px rgba(0,212,255,0.22), 0 0 60px rgba(0,212,255,0.08);
  --glow-v:     0 0 24px rgba(123,47,255,0.22), 0 0 60px rgba(123,47,255,0.08);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  font-family: 'Inter', sans-serif;
}

/* HUD */
.lucavo-game-wrap .game-hud {
  display: flex;
  gap: 3rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--rim);
  border-radius: 50px;
  padding: .75rem 2.5rem;
}
.lucavo-game-wrap .hud-item { text-align: center; }
.lucavo-game-wrap .hud-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  background: var(--arc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
}
.lucavo-game-wrap .hud-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: .25rem;
}

/* Canvas frame */
.lucavo-game-wrap .game-frame {
  border: 1px solid var(--rim-hi);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glow-c), var(--glow-v);
  background: #000;
}
.lucavo-game-wrap #gameCanvas { display: block; }

/* Keyboard hints */
.lucavo-game-wrap .game-keys {
  display: flex;
  gap: .75rem;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
  justify-content: center;
}
.lucavo-game-wrap .key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 .4rem;
  border: 1px solid var(--rim-hi);
  border-radius: 5px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--cyan);
  background: rgba(0,212,255,.05);
}

/* Mobile touch pad */
.lucavo-game-wrap .game-mobile-pad {
  display: none;
  gap: .4rem;
  flex-direction: column;
  align-items: center;
}
.lucavo-game-wrap .pad-row { display: flex; gap: .4rem; }
.lucavo-game-wrap .pad-btn {
  width: 50px;
  height: 50px;
  border: 1px solid var(--rim-hi);
  border-radius: var(--r);
  background: rgba(0,212,255,.06);
  color: var(--cyan);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.lucavo-game-wrap .pad-btn:active { background: rgba(0,212,255,.2); }

/* Responsive */
@media (max-width: 768px) {
  .lucavo-game-wrap .game-keys    { display: none; }
  .lucavo-game-wrap .game-mobile-pad { display: flex; }
  .lucavo-game-wrap #gameCanvas   { width: 300px !important; height: 300px !important; }
  .lucavo-game-wrap .game-hud     { gap: 1.5rem; padding: .6rem 1.5rem; }
}
@media (max-width: 480px) {
  .lucavo-game-wrap .game-hud { gap: 1rem; padding: .5rem 1rem; }
  .lucavo-game-wrap .hud-val  { font-size: 1.2rem; }
}