/* Themes: pick the world the runes are cast in. */
.th-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.th-card { all: unset; box-sizing: border-box; display: grid; width: 100%; cursor: pointer; border-radius: 16px; overflow: hidden; background: #0f1d24; border: 1px solid rgba(233, 224, 204, 0.12); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.th-card:hover, .th-card:focus-visible { transform: translateY(-3px); border-color: var(--neon-soft); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(47, 201, 237, 0.15); }
.th-card:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.th-card.on { border-color: var(--neon); }
.th-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.th-text { display: grid; gap: 4px; padding: 14px 16px 16px; }
.th-name { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--bone); }
.th-now { font-family: var(--serif); font-weight: 500; font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px; color: #04212b; background: var(--neon); }
.th-sub { font-size: 0.95rem; color: var(--lichen); }
.th-note { margin-top: 18px; }