/* Shared visual language lives in rakuen/styles.css. */
button, input { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, .card:focus-visible { outline: 2px solid #777; outline-offset: 3px; }
[hidden] { display: none !important; }
.tag-category summary { font-size: .7rem; color: #777; cursor: pointer; padding: 5px 0; text-transform: uppercase; letter-spacing: .03em; }
.tag-category-tags { padding: 3px 0 8px; }
.browse-tag { display: inline-flex; align-items: center; gap: 3px; }
.tag-pill { border: 0; }
#search-empty { padding: 12px 0; font-size: .82rem; color: #777; }
.card { background: #f3f3f3; cursor: default; }
.card-tags { gap: 3px; flex-wrap: wrap; max-height: 65%; overflow-y: auto; }
.card-tag { border: 0; font-family: inherit; line-height: 1.6; }
.card:focus-within .card-tags { display: flex; }
.card:focus-within .card-name { display: block; }
.card-name { white-space: normal; padding: 22px 10px 10px; }
.card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.card-title h2 { font-size: .8rem; font-weight: 600; }
.creator-btn { border: 0; background: none; color: inherit; font-size: .75rem; cursor: pointer; }
.creator-btn:hover { text-decoration: underline; }
.card-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.card-link:focus-visible { outline-offset: -3px; }
.card-tags, .card-name { z-index: 2; pointer-events: none; }
.card-tag, .creator-btn { pointer-events: auto; }
@media (hover: none) { .card .card-name { display: block; } .card .card-tags { display: flex; } }
@media (max-width: 400px) { #tag-search-row { flex-wrap: wrap; } #tag-search { flex-basis: 100%; } }