.hero {
  text-align: center;
  padding: 18px 16px 6px;
}

.hero h1 {
  margin: 0;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 12vw, 84px);
  line-height: .86;
  letter-spacing: .02em;
  text-shadow:
    0 2px 0 #ffe08a,
    0 5px 0 #e0a020,
    0 9px 0 #b86a12,
    0 14px 22px rgba(0, 0, 0, .35);
}

.tag {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: #ffe7c2;
}

.cards {
  width: min(1080px, calc(100% - 28px));
  margin: 18px auto 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 16px 16px 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 246, 232, .08), rgba(0, 0, 0, .18));
  border: 1px solid rgba(240, 193, 74, .38);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.pick:hover { transform: translateY(-4px); border-color: #ffe08a; }
.pick:active { transform: translateY(0); }
.pick:focus-visible { outline: 3px solid #fff6e8; outline-offset: 3px; }

.scene {
  width: 100%;
  height: 92px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  background: #10281f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}

.scene i, .scene b {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.scene-bloco i:nth-child(1) { background: linear-gradient(180deg, #ff8d98, #c00022); }
.scene-bloco i:nth-child(2) { background: linear-gradient(180deg, #fff3a0, #e09400); transform: translateY(-8px); }
.scene-bloco i:nth-child(3) { background: linear-gradient(180deg, #7ef6f0, #0a7a78); }
.scene-bloco i:nth-child(4) { background: linear-gradient(180deg, #d7b0ff, #5c14b8); transform: translateY(6px); }

.scene-doce { gap: 6px; flex-wrap: wrap; width: 100%; padding: 0 18px; }
.scene-doce i { border-radius: 50%; width: 26px; height: 26px; }
.scene-doce i:nth-child(1) { background: linear-gradient(180deg, #ff8d98, #c00022); }
.scene-doce i:nth-child(2) { background: linear-gradient(180deg, #fff3a0, #e09400); }
.scene-doce i:nth-child(3) { background: linear-gradient(180deg, #8dff9e, #0c7a28); }
.scene-doce i:nth-child(4) { background: linear-gradient(180deg, #9ec6ff, #143fb8); }
.scene-doce i:nth-child(5) { background: linear-gradient(180deg, #d7b0ff, #5c14b8); }
.scene-doce i:nth-child(6) { background: linear-gradient(180deg, #ff8d98, #ff2d42); }

.scene-junta b {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-family: Fredoka, sans-serif;
  font-size: 28px;
  color: #ffe08a;
}
.scene-junta i:first-child,
.scene-junta i:last-child {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff8d98, #e1062c);
}

.scene-bolhas i { width: 34px; height: 34px; border-radius: 50%; }
.scene-bolhas i:nth-child(1) { background: radial-gradient(circle at 32% 28%, #ff8d98, #ff2d42 42%, #c00022); }
.scene-bolhas i:nth-child(2) { background: radial-gradient(circle at 32% 28%, #fff3a0, #ffe03a 42%, #e09400); transform: translateY(8px); }
.scene-bolhas i:nth-child(3) { background: radial-gradient(circle at 32% 28%, #8dff9e, #22c24a 42%, #0c7a28); }
.scene-bolhas i:nth-child(4) { background: radial-gradient(circle at 32% 28%, #9ec6ff, #2f7dff 42%, #143fb8); transform: translateY(-6px); }

.scene-copos { gap: 10px; }
.scene-copos i {
  width: 22px;
  height: 52px;
  border-radius: 5px 5px 12px 12px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, transparent 30%, #e1062c 30% 62%, #f0b000 62%);
}
.scene-copos i:nth-child(2) { background: linear-gradient(180deg, transparent 18%, #12a33a 18%); }
.scene-copos i:nth-child(3) { background: linear-gradient(180deg, transparent 46%, #1d5fe0 46%); }

.scene-palavra i { width: 26px; height: 32px; border-radius: 6px; }
.scene-palavra i:nth-child(1),
.scene-palavra i:nth-child(4) { background: #3a2a24; }
.scene-palavra i:nth-child(2) { background: linear-gradient(180deg, #ffe08a, #e0a020); }
.scene-palavra i:nth-child(3) { background: linear-gradient(180deg, #b6f5a8, #2f9e44); }
.scene-palavra i:nth-child(5) { background: linear-gradient(180deg, #ffd0e8, #e23d8c); }

.scene-caca b {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-family: Fredoka, sans-serif;
  font-size: 28px;
  color: #fff6e8;
}

.scene-domino { gap: 8px; }
.scene-domino i {
  width: 26px;
  height: 52px;
  border-radius: 6px;
  background:
    linear-gradient(#1c140f, #1c140f) center / 70% 2px no-repeat,
    linear-gradient(180deg, #fffaf3, #f0e2d0);
  box-shadow: 0 4px 0 #c8b49a;
}

.scene-paciencia { position: relative; }
.scene-paciencia i {
  position: absolute;
  width: 34px;
  height: 48px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffaf4, #f4e6d4);
}
.scene-paciencia i:nth-child(1) { transform: translate(-28px, 4px) rotate(-8deg); }
.scene-paciencia i:nth-child(2) { transform: translate(0, -2px); background: linear-gradient(160deg, #ff5fa2, #9d1848); }
.scene-paciencia i:nth-child(3) { transform: translate(28px, 6px) rotate(8deg); }

.pick h2 {
  margin: 0;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-size: 32px;
  letter-spacing: .04em;
}

.pick p {
  margin: 0;
  min-height: 2.8em;
  font-weight: 700;
  line-height: 1.35;
  color: #f3e0c8;
}

.meta {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
}

.go {
  margin-top: 4px;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-size: 18px;
  color: #3d2408;
  background: linear-gradient(180deg, #ffe7a3, #f0a31a);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 4px 0 #b86a12;
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; max-width: 440px; }
  .pick p { min-height: 0; }
}