/* /translations/ — the fan translations section. Site colours and fonts (style.css :root); each translation's tile is its own pixel picture. */
.tr-list{display:grid;gap:16px;margin:4px 0 26px}
.tr-card{display:flex;gap:20px;align-items:flex-start;padding:20px 22px;border-radius:var(--radius);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);text-decoration:none;transition:box-shadow .2s}
.tr-card:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--gold-line),var(--glow-soft)}
.tr-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tr-tile{flex:none;width:72px;height:72px}
.tr-tile svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 0 #0008)}
.tr-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.tr-title{font-family:var(--display);font-size:22px;line-height:1.2}
.tr-text{color:var(--soft);font-size:15px}
.tr-tags{display:flex;flex-wrap:wrap;gap:6px}
.tr-tag{padding:3px 10px;border-radius:999px;background:var(--panel-raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--soft);font-size:13px}
.tr-tag b{color:var(--text)}
.tr-more{color:var(--gold-bright);font-weight:700;font-size:15px}
.tr-card:hover .tr-more{text-decoration:underline}
.tr-note{color:var(--muted);font-size:14px}
@media (max-width:520px){.tr-card{flex-direction:column;gap:14px;padding:18px}.tr-tile{width:60px;height:60px}}