/* CoSy-Tec Games — Shared Design Tokens */

/* Google Fonts import — muss als erste Regel stehen, sonst ignoriert der Browser den @import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;500&display=swap');

:root {
  --ct-green:       #88C378;
  --ct-green-deep:  #4F7A42;
  --ct-black:       #000000;
  --ct-white:       #FFFFFF;
  --ct-graphite:    #2E2E2E;
  --ct-slate:       #9DA5AE;
  --ct-fog:         #E5E7EB;
  --ct-ice:         #F7F8F7;

  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --radius: 0;
  --shadow: none;
  --transition: 0.2s ease;
}

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

html { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  background: var(--ct-black);
  color: var(--ct-white);
  height: 100%;
  overflow: hidden;
}

/* --- Typography --- */
h1,h2,h3,h4 { font-family: var(--font-head); }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 600; }

/* --- Buttons --- */
.btn {
  font-family: var(--font-head);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid var(--ct-green);
  transition: var(--transition);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.btn-primary { background: var(--ct-green); color: var(--ct-black); }
.btn-primary:hover { background: var(--ct-green-deep); border-color: var(--ct-green-deep); }
.btn-ghost { background: transparent; color: var(--ct-white); }
.btn-ghost:hover { background: var(--ct-green); color: var(--ct-black); }

/* --- Game Container --- */
.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  background: var(--ct-black);
}

.game-header {
  width: 100%;
  max-width: 800px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.game-header .slash {
  color: var(--ct-green);
  font-family: var(--font-head);
  font-size: 1.4rem;
}
.game-header h1 { font-size: 1.3rem; color: var(--ct-white); }
.game-header .score-box {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--ct-slate);
}
.game-header .score-box span { color: var(--ct-green); font-weight: 700; font-size: 1.1rem; }

.game-canvas {
  background: var(--ct-graphite);
  border-radius: var(--radius);
  border: 1px solid #333;
  position: relative;
  overflow: hidden;
}

/* --- HUD / Overlay --- */
.overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
}
.overlay h2 { font-size: 1.6rem; color: var(--ct-green); }
.overlay p  { color: var(--ct-slate); font-size: 0.9rem; }

/* --- Panel boxes (Game 08 Design-System) --- */
.panel-box {
  background: #111;
  border: 1px solid #2E2E2E;
  border-radius: 6px;
  padding: 12px;
  overflow: hidden;
}
.panel-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ct-slate);
  margin-bottom: 8px;
  white-space: nowrap;
}
.panel-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ct-green);
  white-space: nowrap;
}

/* --- HUD labels --- */
.hud-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ct-slate);
  white-space: nowrap;
}

/* --- Accent separator --- */
.ct-divider {
  width: 40px; height: 3px;
  background: var(--ct-green);
  border-radius: 2px;
  margin: 8px 0;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .game-header h1 { font-size: 1rem; }
  body { font-size: 14px; }
}