/* per-game styles */

.game-screen { padding: 40px 48px; text-align: center; }

.clicker-screen {
  width: min(640px, 92vw);
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.clicker-hud {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1.5rem;
}

.clicker-counter { color: var(--accent-gold); }
.clicker-timer { color: var(--accent-orange); }

.creep-btn {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 4px solid var(--accent-gold);
  background: radial-gradient(circle, var(--bg-elevated) 0%, var(--bg-deep) 70%);
  color: var(--text-primary);
  font-size: 6rem;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 30px rgba(200, 170, 110, 0.4) inset, 0 0 30px rgba(200, 170, 110, 0.2);
  transition: transform 80ms var(--ease-default);
}

.creep-btn:active { transform: scale(0.96); }

.creep-btn.pulse { animation: creepPulse 150ms var(--ease-default); }
@keyframes creepPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); box-shadow: 0 0 50px var(--accent-gold) inset, 0 0 50px var(--accent-gold); }
  100% { transform: scale(1); }
}

.particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  color: var(--accent-gold);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 0 6px var(--accent-gold);
  animation: particleRise 800ms var(--ease-default) forwards;
  pointer-events: none;
}

@keyframes particleRise {
  0%   { transform: translate(-50%, 0) scale(0.8); opacity: 1; }
  100% { transform: translate(-50%, -80px) scale(1.2); opacity: 0; }
}

.reaction-screen {
  width: min(640px, 92vw);
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--accent-gold);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 100ms var(--ease-default);
}
.reaction-wait   { background: var(--danger); }
.reaction-go     { background: var(--success); }
.reaction-result { background: var(--bg-panel); cursor: default; }
.reaction-falseStart { background: #5a1a1a; }
.rxn-text {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.rxn-progress { color: var(--text-secondary); margin-top: 16px; }
.rxn-result-value { font-family: var(--font-mono); font-size: 2.5rem; color: var(--accent-gold); margin-bottom: 12px; }
.rxn-result-caption { font-size: 1.2rem; color: var(--text-primary); }
.rxn-summary { font-family: var(--font-mono); margin: 20px 0; font-size: 1.1rem; }

.simon-screen {
  width: min(560px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: var(--bg-panel);
  border: 1px solid rgba(200, 170, 110, 0.4);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.simon-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  color: var(--accent-gold);
}
.simon-status { color: var(--text-primary); }
.simon-pads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}
.simon-pad {
  height: 160px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  cursor: default;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 150ms var(--ease-default), box-shadow 100ms var(--ease-default);
}
/* активные только в input-фазе */
.simon-screen[data-phase="input"] .simon-pad {
  cursor: pointer;
  opacity: 0.55;
  pointer-events: auto;
}
.simon-screen[data-phase="input"] .simon-pad:hover { opacity: 0.85; }
.simon-pad.active { opacity: 1 !important; box-shadow: 0 0 40px currentColor; }
.pad-orange { background: #ff6b35; color: #ff6b35; }
.pad-blue   { background: #3a7bd5; color: #3a7bd5; }
.pad-purple { background: #8a3ab9; color: #8a3ab9; }
.pad-green  { background: #5d9d3f; color: #5d9d3f; }

.simon-feedback-win  { box-shadow: 0 0 40px var(--success); }
.simon-feedback-fail { box-shadow: 0 0 40px var(--danger); }

.wam-screen {
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.wam-hud {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1.4rem;
}
.wam-score { color: var(--accent-gold); }
.wam-timer { color: var(--accent-orange); }
.wam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  aspect-ratio: 1;
}
.wam-cell {
  background: var(--bg-elevated);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background 80ms var(--ease-default);
}
.wam-cell:hover { background: var(--bg-panel); }
.wam-cell.mole {
  background: radial-gradient(circle, var(--accent-orange) 0%, #8b2a0e 70%);
  box-shadow: 0 0 20px var(--accent-orange);
  animation: molePop 200ms var(--ease-default);
}
.wam-cell.mole::before {
  content: '👹';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}
@keyframes molePop {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}