/* Otakuchar Meta Deck: tier list and deck pages. Inherits the theme's colors. */
.otk-meta { --otk-border: rgba(127,127,127,.25); --otk-soft: rgba(127,127,127,.08); --otk-game: var(--brand, #8b74ff); box-sizing: border-box; }
.otk-meta *, .otk-meta *::before, .otk-meta *::after { box-sizing: inherit; }
.otk-meta h2 { margin: 1.6em 0 .6em; }

.otk-meta__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.otk-meta__tabs a { padding: .4em 1em; border: 1px solid var(--otk-border); border-radius: 999px; font-weight: 600; font-size: .92em; text-decoration: none; color: inherit; background: var(--otk-soft); }
.otk-meta__tabs a:hover { border-color: var(--otk-game); }
.otk-meta__tabs a[aria-current] { background: var(--otk-game); border-color: var(--otk-game); color: #fff; }

.otk-meta__status { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; font-size: .9em; }
.otk-meta__status span { padding: .2em .75em; border-radius: 999px; background: var(--otk-soft); border: 1px solid var(--otk-border); }
.otk-meta__intro { margin: 0 0 1.25rem; }
.otk-meta__empty, .otk-meta__old { padding: .8em 1em; border-radius: 12px; background: var(--otk-soft); border: 1px solid var(--otk-border); }
.otk-meta__old { border-color: rgba(224,138,30,.45); background: rgba(224,138,30,.12); }
.otk-meta__note { font-size: .82em; opacity: .7; margin-top: 2rem; }
.otk-meta__more { font-weight: 700; }

/* Tier rows */
.otk-tiers { display: grid; gap: .6rem; margin: 0 0 1.5rem; }
.otk-tier { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); border: 1px solid var(--otk-border); border-radius: 14px; overflow: hidden; background: var(--otk-soft); }
.otk-tier__label { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2rem; padding: .8rem .5rem; background: var(--tier); color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.otk-tier__label strong { font-size: 2.4rem; line-height: 1; font-weight: 800; }
.otk-tier__label small { font-size: .72em; line-height: 1.3; opacity: .95; }
.otk-tier__decks { list-style: none; margin: 0; padding: .7rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .6rem; }
.otk-tier__decks li { margin: 0; min-width: 0; }

.otk-deck { display: flex; gap: .7rem; align-items: flex-start; height: 100%; padding: .55rem; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--otk-border); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.otk-deck:hover { border-color: var(--otk-game); transform: translateY(-2px); }
.otk-deck img, .otk-deck__noimg { flex: 0 0 auto; width: 52px; height: 73px; object-fit: cover; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.otk-deck__noimg { display: grid; place-items: center; background: var(--otk-game); color: #fff; font-weight: 800; font-size: 1.4rem; }
.otk-deck__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.otk-deck__name { font-weight: 700; line-height: 1.25; }
.otk-deck__tags { font-size: .78em; opacity: .7; }
.otk-deck__summary { font-size: .82em; line-height: 1.35; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.otk-trend { align-self: flex-start; display: inline-flex; align-items: center; gap: .25em; padding: .05em .55em; border-radius: 999px; font-size: .72em; font-weight: 700; white-space: nowrap; }
/* Dark is the theme default; light mode gets darker text. */
.otk-trend--up { color: #4ade80; background: rgba(34,197,94,.15); }
.otk-trend--down { color: #f87171; background: rgba(239,68,68,.15); }
.otk-trend--new { color: #60a5fa; background: rgba(59,130,246,.15); }
:root[data-theme="light"] .otk-trend--up { color: #15803d; }
:root[data-theme="light"] .otk-trend--down { color: #b91c1c; }
:root[data-theme="light"] .otk-trend--new { color: #1d4ed8; }

/* Changes and table */
.otk-meta__changes ul { margin: 0; padding-left: 1.2em; }
.otk-meta__changes li { margin: .2em 0; background: none; }
.otk-meta__wrap { overflow-x: auto; border: 1px solid var(--otk-border); border-radius: 14px; }
.otk-meta__table { width: 100%; border-collapse: collapse; margin: 0; }
.otk-meta__table th, .otk-meta__table td { padding: .55em .8em; border-bottom: 1px solid var(--otk-border); text-align: left; vertical-align: middle; }
.otk-meta__table thead th { background: var(--otk-soft); font-size: .85em; }
.otk-meta__table tbody tr:last-child td { border-bottom: 0; }
.otk-meta__table .otk-trend { margin-left: .3em; vertical-align: middle; }
.otk-tierbadge { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--tier); color: #fff; font-weight: 800; }
.otk-meta__history { margin-top: 1.5rem; padding: .7rem 1rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); }
.otk-meta__history summary { cursor: pointer; font-weight: 700; }
.otk-meta__sources { font-size: .92em; }

/* All games */
.otk-meta__game { margin-bottom: 2.5rem; }
.otk-meta__game > h2 a { color: inherit; text-decoration: none; border-bottom: 3px solid var(--otk-game); }

/* Deck page */
.otk-deckhead { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: 1.25rem; margin-bottom: 1.5rem; border: 1px solid var(--otk-border); border-radius: 14px; background: var(--otk-soft); }
.otk-deckhead > div:only-child { grid-column: 1 / -1; }
.otk-deckhead__img { width: 100%; height: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.otk-deckhead__tier { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.otk-deckhead__tier strong { padding: .15em .7em; border-radius: 8px; background: var(--tier); color: #fff; font-size: 1.15em; }
.otk-deckhead__tier span { opacity: .8; font-size: .9em; }
.otk-deckhead__summary { margin: 0 0 .8rem; font-weight: 600; }
.otk-deckhead__facts { width: 100%; border-collapse: collapse; margin: 0; }
.otk-deckhead__facts th, .otk-deckhead__facts td { padding: .35em .5em .35em 0; border-bottom: 1px solid var(--otk-border); text-align: left; vertical-align: top; }
.otk-deckhead__facts th { width: 1%; white-space: nowrap; padding-right: 1em; font-weight: 600; }

.otk-meta__listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.otk-meta__listhead h2 { margin-bottom: .3em; }
.otk-meta__copy { padding: .5em 1.1em; border: 1px solid var(--otk-border); border-radius: 10px; background: var(--otk-soft); color: inherit; font: inherit; font-weight: 600; font-size: .9em; cursor: pointer; }
.otk-meta__copy:hover { border-color: var(--otk-game); }
.otk-meta__list h3 { margin: 1.2em 0 .5em; font-size: 1.05em; }
.otk-meta__list h3 small { opacity: .6; font-weight: 400; }
.otk-decklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .7rem; }
.otk-decklist li { margin: 0; min-width: 0; }
.otk-decklist li > a, .otk-decklist li > span { position: relative; display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.otk-decklist img { width: 100%; height: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: transform .15s; }
.otk-decklist a:hover img { transform: translateY(-3px); }
.otk-decklist__noimg { display: grid; place-items: center; aspect-ratio: 63 / 88; padding: .5rem; border: 1px dashed var(--otk-border); border-radius: 8px; background: var(--otk-soft); font-size: .8em; text-align: center; overflow: hidden; }
.otk-decklist__qty { position: absolute; top: .3rem; right: .3rem; padding: .05em .45em; border-radius: 6px; background: rgba(0,0,0,.78); color: #fff; font-size: .85em; }
.otk-decklist__name { font-size: .8em; line-height: 1.3; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otk-meta__article { margin: 1.5rem 0; }
.otk-meta__related .otk-tier__decks { padding: 0; }

@media (max-width: 640px) {
	.otk-tier { grid-template-columns: 1fr; }
	.otk-tier__label { flex-direction: row; justify-content: flex-start; gap: .7rem; padding: .5rem .9rem; text-align: left; }
	.otk-tier__label strong { font-size: 1.6rem; }
	.otk-tier__decks { grid-template-columns: 1fr; padding: .55rem; }
	.otk-deckhead { grid-template-columns: 1fr; padding: 1rem; }
	.otk-deckhead__img { max-width: 220px; margin: 0 auto; display: block; }
	.otk-decklist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
}