/* Base compartilhada: reset, botões, cards, modal, confete, animações.
   Cada jogo pode sobrescrever as variáveis de :root e adicionar seu próprio
   style.css só com o que for específico dele. */
:root {
  --bg1: #a8e6ff;
  --bg2: #ffe28a;
  --accent: #4CAF50;
  --accent-dark: #2e7d32;
  --panel: #ffffff;
  --text: #2b2b3a;
  --radius: 22px;
  font-size: 18px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Comic Sans MS", "Trebuchet MS", "Segoe UI Rounded", "Baloo 2", sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  user-select: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
}

.topbar h1 {
  font-size: 1.6rem;
  margin: 0;
  color: var(--accent-dark);
  text-shadow: 2px 2px 0 #fff8;
  flex: 1;
  text-align: center;
}

.wobble {
  display: inline-block;
  animation: wobble 1.6s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-4px); }
}

.icon-btn {
  font-size: 1.8rem;
  background: var(--panel);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 0 #0002;
  cursor: pointer;
  transition: transform .12s ease;
}
.icon-btn:active { transform: scale(0.88) translateY(3px); box-shadow: 0 1px 0 #0002; }

main {
  display: flex;
  justify-content: center;
  padding: 10px 14px 40px;
}

.screen { width: 100%; max-width: 900px; }
.hidden { display: none !important; }

.panel-card {
  background: var(--panel);
  border-radius: 30px;
  padding: 30px 24px 34px;
  max-width: 480px;
  margin: 30px auto;
  text-align: center;
  box-shadow: 0 10px 0 #0001, 0 20px 40px #0002;
}

.panel-card h2 {
  margin-top: 0;
  font-size: 1.8rem;
  color: var(--accent-dark);
}

.field {
  margin: 22px 0;
  text-align: left;
}

.field label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

select {
  width: 100%;
  font-size: 1.15rem;
  padding: 14px 16px;
  border-radius: 16px;
  border: 3px solid #ffd54f;
  background: #fffdf5;
  font-family: inherit;
  color: var(--text);
}

.big-btn {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 18px 30px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(180deg, #66bb6a, var(--accent-dark));
  color: white;
  box-shadow: 0 6px 0 #1b5e20;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.big-btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #1b5e20;
}

.secondary-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-size: 1.1rem;
  padding: 12px;
  border: none;
  border-radius: 16px;
  background: #eeeeee;
  color: var(--text);
  cursor: pointer;
}
.secondary-btn:active { transform: scale(0.96); }

.toggle-btn {
  font-size: 1.1rem;
  padding: 14px;
  border-radius: 16px;
  border: none;
  width: 100%;
  cursor: pointer;
  background: #c8e6c9;
  color: var(--accent-dark);
  font-weight: bold;
}
.toggle-btn[data-on="false"] {
  background: #ffcdd2;
  color: #b71c1c;
}

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 0 6px;
}

.hud-info {
  display: flex;
  gap: 18px;
  background: var(--panel);
  padding: 12px 22px;
  border-radius: 20px;
  font-size: 1.3rem;
  font-weight: bold;
  box-shadow: 0 4px 0 #0001;
}

.modal {
  position: fixed;
  inset: 0;
  background: #0006;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}

.modal-content {
  background: var(--panel);
  border-radius: 26px;
  padding: 28px 24px;
  max-width: 420px;
  width: 100%;
}

.modal-content h2 { margin-top: 0; text-align: center; color: var(--accent-dark); }

.win-emoji {
  font-size: 3rem;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 40;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  font-size: 1.6rem;
  animation: fall linear forwards;
}

@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}

@media (max-width: 520px) {
  :root { font-size: 16px; }
  .topbar h1 { font-size: 1.25rem; }
}