/* ============================================================
   GAME STUDIO — Shared Style Sheet
   Theme: Stellar Ascent (Sci-Fi / Dark Navy)
   Version: 1.0  |  2026-04-15
   ============================================================
   All values are CSS custom properties (tokens).
   To swap themes: redefine :root values only.
   Game files must never hardcode values that have a token.
   ============================================================ */

:root {

  /* ── Color Palette ─────────────────────────────────────── */
  --color-bg:            #030810;
  --color-bg-secondary:  #07111e;
  --color-panel:         #0b1a2c;
  --color-panel-deep:    #0e2038;
  --color-primary:       #00d4ff;   /* cyan  */
  --color-primary-mid:   #0099cc;
  --color-primary-dark:  #006688;
  --color-secondary:     #b080ff;   /* purple */
  --color-accent:        #ffd040;   /* yellow */
  --color-accent-2:      #ff9933;   /* orange */
  --color-success:       #00f080;   /* green  */
  --color-success-dim:   #00aa55;
  --color-danger:        #ff4060;   /* red    */
  --color-text:          #c8e8f5;
  --color-text-dim:      #7aabcc;
  --color-text-dark:     #3d6688;
  --color-bright:        #eef8ff;
  --color-border:        #1a3050;
  --color-border-dim:    #102030;
  --color-ui-bg:         rgba(3, 8, 16, 0.93);

  /* ── Typography ─────────────────────────────────────────── */
  --font-primary:         'Courier New', Consolas, 'Lucida Console', monospace;
  --font-display:         'Courier New', Consolas, 'Lucida Console', monospace;
  --font-size-xs:         10px;
  --font-size-sm:         12px;
  --font-size-base:       15px;
  --font-size-lg:         20px;
  --font-size-xl:         32px;
  --font-size-xxl:        44px;
  --line-height:          1.4;
  --letter-spacing:       0.05em;
  --letter-spacing-wide:  0.12em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;

  /* ── UI Chrome ───────────────────────────────────────────── */
  --border-width:  1px;
  --border-style:  solid;
  --border-radius: 0px;
  --hud-height:    40px;
  --hud-padding:   var(--space-sm);
  --hud-font-size: var(--font-size-sm);

  /* ── Animation ───────────────────────────────────────────── */
  --anim-fast:   80ms;
  --anim-normal: 200ms;
  --anim-slow:   400ms;
  --anim-easing: linear;

  /* ── Canvas / Game Area ──────────────────────────────────── */
  --canvas-width:   480px;
  --canvas-height:  800px;
  --canvas-border:  1px solid var(--color-border);
  --canvas-bg:      var(--color-bg);

  /* ── Glow Effects ────────────────────────────────────────── */
  --glow-color:   var(--color-primary);
  --glow-radius:  8px;
  --glow-strong:  0 0 20px rgba(0, 212, 255, 0.65);
  --glow-soft:    0 0 8px  rgba(0, 212, 255, 0.25);
  --glow-accent:  0 0 12px rgba(255, 208, 64, 0.5);

}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ────────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color-bg);
  background-image: radial-gradient(
    rgba(0, 200, 255, 0.045) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Scanline overlay — applied over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Game Wrapper ────────────────────────────────────────── */
/* Outer container — centers game on screen, handles scaling */
.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: top center;
}

/* ── Game Container ──────────────────────────────────────── */
/* Inner container — holds HUD + canvas as a unit */
.game-container {
  position: relative;
  width: var(--canvas-width);
  display: flex;
  flex-direction: column;
  border: var(--canvas-border);
  box-shadow: var(--glow-soft);
}

canvas#gameCanvas {
  display: block;
  width: var(--canvas-width);
  height: var(--canvas-height);
  background: var(--canvas-bg);
  flex-shrink: 0;
}

/* ── HUD ─────────────────────────────────────────────────── */
.hud {
  width: var(--canvas-width);
  height: var(--hud-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--hud-padding);
  background: var(--color-ui-bg);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  font-family: var(--font-primary);
  font-size: var(--hud-font-size);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  flex-shrink: 0;
  gap: var(--space-sm);
}

.hud-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 48px;
}

.hud-field.right { align-items: flex-end; }
.hud-field.center { align-items: center; flex: 1; }

.hud-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-dark);
  letter-spacing: var(--letter-spacing-wide);
}

.hud-value {
  font-size: var(--font-size-sm);
  font-weight: bold;
  line-height: 1;
}

/* HUD value color variants */
.hud-coins   { color: var(--color-accent); }
.hud-balls   { color: var(--color-success); }
.hud-level   { color: var(--color-text); }

.hud-timer               { color: var(--color-primary); }
.hud-timer.warning       { color: var(--color-accent-2); }
.hud-timer.danger        { color: var(--color-danger); animation: blink 0.5s step-end infinite; }

/* Sound toggle button */
.hud-sound {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
  font-family: var(--font-primary);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing);
  padding: 3px 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color var(--anim-fast), border-color var(--anim-fast);
  flex-shrink: 0;
}
.hud-sound:hover,
.hud-sound.on { color: var(--color-primary); border-color: var(--color-primary); }
.hud-sound.off { color: var(--color-text-dark); border-color: var(--color-border); }

/* ── Overlays ────────────────────────────────────────────── */
/* Sits on top of canvas for title / game over / level clear */
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-ui-bg);
  gap: var(--space-md);
  z-index: 100;
  padding: var(--space-lg);
}

.overlay.hidden { display: none; }

.overlay-eyebrow {
  font-size: var(--font-size-xs);
  color: var(--color-text-dark);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.overlay-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xxl);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-shadow: var(--glow-strong);
  text-align: center;
  line-height: 1.1;
}

.overlay-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-dim);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

.overlay-divider {
  width: 70%;
  height: 1px;
  background: var(--color-border);
}

.overlay-stat {
  font-size: var(--font-size-base);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  text-align: center;
}

.overlay-stat strong {
  color: var(--color-accent);
}

.overlay-stat.good  strong { color: var(--color-success); }
.overlay-stat.great strong { color: var(--color-primary); }

.overlay-cta {
  font-size: var(--font-size-base);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  animation: blink 1s step-end infinite;
  margin-top: var(--space-sm);
}

/* ── Shop Modal ──────────────────────────────────────────── */
.shop-modal {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  padding: var(--space-md);
  overflow-y: auto;
}

.shop-modal.hidden { display: none; }

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.shop-title {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  text-shadow: var(--glow-soft);
}

.shop-coins {
  font-size: var(--font-size-base);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing);
}

.shop-coins span {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.shop-section-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-dark);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  margin-top: var(--space-sm);
}

.shop-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid var(--color-border);
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: border-color var(--anim-fast), background var(--anim-fast);
  gap: var(--space-sm);
}

.shop-item:hover:not(.locked):not(.cannot-afford) {
  border-color: var(--color-primary);
  background: rgba(0, 212, 255, 0.05);
}

.shop-item.cannot-afford { opacity: 0.45; cursor: not-allowed; }
.shop-item.locked        { opacity: 0.25; cursor: not-allowed; }
.shop-item.maxed         { border-color: var(--color-success-dim); opacity: 0.7; cursor: default; }

.shop-item-info { flex: 1; }

.shop-item-name {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
}

.shop-item-desc {
  color: var(--color-text-dark);
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

.shop-item-level {
  color: var(--color-primary-dark);
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

.shop-item-cost {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}

.shop-item-cost.maxed { color: var(--color-success); }

.shop-close {
  align-self: center;
  margin-top: var(--space-md);
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  font-family: var(--font-primary);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  text-transform: uppercase;
  transition: color var(--anim-fast), border-color var(--anim-fast);
}

.shop-close:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── Utility Animations ──────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.015); }
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: var(--glow-soft); }
  50%       { text-shadow: var(--glow-strong); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes coin-pop {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.7); }
}

/* ── Scrollbar (shop) ────────────────────────────────────── */
.shop-modal::-webkit-scrollbar { width: 4px; }
.shop-modal::-webkit-scrollbar-track { background: var(--color-bg); }
.shop-modal::-webkit-scrollbar-thumb { background: var(--color-border); }