.cc-target { color: var(--accent); font-family: 'Caveat', cursive; font-size: 1.2em; }

.cc-jar {
  margin: .5rem auto 1rem;
  width: clamp(180px, 45%, 280px);
  height: clamp(120px, 22vw, 170px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 3px solid rgba(255,255,255,.18);
  border-top: 3px solid rgba(255,255,255,.3);
  border-radius: 14px 14px 40px 40px;
  position: relative;
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.3);
  display: grid;
  place-items: center;
}
.cc-jar::before {
  content: '';
  position: absolute;
  top: -10px; left: 20%; right: 20%;
  height: 8px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}
.cc-jar__label {
  font-family: 'Caveat', cursive;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--accent);
}

.cc-tray {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .5rem 0;
}
.cc-coin {
  width: clamp(60px, 14vw, 84px);
  height: clamp(60px, 14vw, 84px);
  border-radius: 50%;
  border: none;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.3rem);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 -5px 8px rgba(0,0,0,.2);
  transition: transform .08s ease;
  touch-action: manipulation;
}
.cc-coin:active { transform: translateY(2px); }
.cc-coin--p { background: radial-gradient(circle at 30% 30%, #f0a270, #a5582a); color: #fff; }
.cc-coin--n { background: radial-gradient(circle at 30% 30%, #e8e8e8, #9e9e9e); color: #1a1a1a; }
.cc-coin--d { background: radial-gradient(circle at 30% 30%, #f5f5f5, #b0b0b0); color: #1a1a1a; }
.cc-coin--q { background: radial-gradient(circle at 30% 30%, #f8f8f8, #808080); color: #1a1a1a; }
.cc-coin__name { display: block; font-size: .85em; opacity: .85; }

.cc-controls {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}