/* ================= ARCADE ================= */
.arcade { padding: var(--s7) 0 var(--s8); }
.arcade__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.arcade__head .section-title { margin: 0; }
.levels { display: flex; flex-wrap: wrap; gap: var(--s2); }
.topic {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; cursor: pointer;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--navy);
  background: var(--snow); border: 2px solid var(--navy); border-radius: var(--r-pill); box-shadow: 0 3px 0 var(--navy);
}
.topic.is-on { background: var(--sun); }
.arcade__join {
  display: flex; align-items: center; gap: var(--s3); max-width: none;
  margin-bottom: var(--s6); padding: var(--s3) var(--s4); background: var(--snow);
  border: 2px solid var(--navy); border-radius: 18px; font-weight: 700;
}
.arcade__join .coin { width: 34px; height: 34px; }
.arcade__join a { color: var(--tie-dark); }

.games { list-style: none; display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.games li[hidden] { display: none; }
.game {
  --tone: var(--meadow);
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--snow); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift); overflow: hidden;
  transition: transform var(--t-med) var(--ease-pop), box-shadow var(--t-med) var(--ease-pop);
}
.game:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--lift-hover); }
.game:active { transform: translateY(3px); box-shadow: var(--lift-press); }
.game--lake { --tone: var(--lake); } .game--tie { --tone: var(--tie); } .game--sun { --tone: var(--sun); }
.game--fox { --tone: var(--fox); } .game--navy { --tone: var(--navy); }
.game--meadow { --tone: var(--meadow); }
.game__poster { display: block; aspect-ratio: 4 / 3; background: var(--tone); border-bottom: var(--ink); overflow: hidden; }
.game__poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--t-med) var(--ease-out); }
.game:hover .game__poster img { transform: scale(1.05); }
.game__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); flex: 1; }
.game__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.05; }
.game__desc { font-size: 1rem; line-height: 1.45; }
.game__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: auto; padding-top: var(--s2); }
.game__play { align-self: flex-start; margin-top: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 0.2rem 0.65rem; border-radius: var(--r-pill);
  background: var(--lake-pale); color: var(--navy); font-weight: 700; font-size: 0.85rem;
}
.chip--easy { background: #e3f8ec; } .chip--medium { background: #fff1c2; } .chip--hard { background: #ffe1df; }
.chip--coins { background: var(--sun); }
.chip--coins .coin { width: 16px; height: 16px; border-width: 1.5px; }
.arcade__cap { margin-top: var(--s6); font-weight: 700; color: var(--navy-2); max-width: none; }

/* ================= PRINTABLES ================= */
.printables { background: var(--lake); padding: var(--s8) 0; border-block: var(--ink); }
.printables .section-title { color: var(--snow); text-shadow: 0 4px 0 var(--navy); -webkit-text-stroke: 1.5px var(--navy); paint-order: stroke fill; }
.prints { list-style: none; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.print {
  --tone: var(--sun);
  display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s5);
  text-decoration: none; background: var(--tone); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
}
.print--lake { --tone: var(--snow); } .print--meadow { --tone: var(--meadow); } .print--fox { --tone: var(--fox); }
.print__type { font-weight: 700; font-size: .9rem; }
.print__title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.print .btn { margin-top: auto; align-self: flex-start; }
.empty--bright { background: var(--snow); }
.empty {
  display: grid; gap: var(--s5); align-items: center; padding: var(--s6);
  border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
}
.empty img { width: 150px; justify-self: center; }
.empty h3 { font-size: var(--text-xl); }
@media (min-width: 700px) { .empty { grid-template-columns: 170px minmax(0, 1fr); } }

/* ================= VILLAGE LINK ================= */
.explore-cta { padding: var(--s8) 0; }
.world-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s6); text-decoration: none; color: var(--snow);
  background: var(--navy) url("/assets/img/maps/village-900.webp") center / cover;
  border: var(--ink); border-radius: var(--r-tile); box-shadow: 0 6px 0 var(--sun-dark);
  position: relative; overflow: hidden; isolation: isolate; min-height: 220px;
}
.world-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,33,88,.92), rgba(24,33,88,.35)); }
.world-card h2 { font-size: var(--text-2xl); margin-bottom: var(--s2); color: var(--sun); }
.world-card__text { font-weight: 700; font-size: var(--text-lg); }

.chip.chip--modes { background: var(--navy); color: var(--sun); border-color: var(--navy); }