/* Theme tokens. Dark retains the original DUEL LAB palette. */
:root { color-scheme: dark; --bg: #0b1015; --panel: #141c24; --surface: #17212a; --field: #0c141b; --button: #202c35; --line: #29333d; --text: #eef2f5; --muted: #96a4b1; --lime: #d4ff5f; --accent-text: #d4ff5f; --elixir: #cda1ff; --danger: #f4b5a0; --focus: #d4ff5f; }
:root[data-theme=light] { color-scheme: light; --bg: #f5f7fa; --panel: #ffffff; --surface: #edf2f6; --field: #f7f9fb; --button: #e5ecf2; --line: #b9c6d1; --text: #17212b; --muted: #526375; --accent-text: #426400; --elixir: #7641a0; --danger: #a13624; --focus: #426400; }

/* Shared layout and components. Each selector is defined once per breakpoint. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
button:disabled { opacity: .4; cursor: default; }
a { outline-offset: 5px; color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 900; letter-spacing: 1px; }
.brand small { font-size: 10px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.logo { background: var(--lime); color: #101710; padding: 5px 9px; border-radius: 6px; font-size: 22px; }
.logo span { font-size: 13px; }
main { max-width: 1440px; margin: auto; padding: 0 5vw; }
.eyebrow { font-size: 10px; letter-spacing: 2.5px; color: var(--accent-text); font-weight: 700; }
h1 { font-size: clamp(38px,4.5vw,64px); line-height: 1.35; letter-spacing: -2px; margin: 16px 0; }
h1 em { font-style: normal; color: var(--accent-text); }
.primary { display: inline-block; background: var(--lime); color: #162009; border: 0; border-radius: 7px; padding: 14px 20px; font-weight: 800; }
.notice { display: flex; gap: 20px; align-items: center; border: 1px solid #7e70433d; border-radius: 8px; padding: 16px 20px; background: #b48a2410; font-size: 12px; color: #c5bc9d; }
.notice b { white-space: nowrap; color: #e2cd86; }

h2 { font-size: 23px; letter-spacing: -.6px; margin: 8px 0 22px; }
h2 span { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 10px; letter-spacing: 0; }
.filters { margin-bottom: 22px; }
.search { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 0 14px; font-size: 24px; }
.search input { width: 100%; background: transparent; border: 0; color: var(--text); padding: 14px 0; font-size: 13px; }
.filter-row { display: flex; gap: 8px; margin: 10px 0 14px; }
.toggle { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
input[type=checkbox] { accent-color: var(--lime); }

.deck.active { border-color: var(--lime); }
.deck-top { display: flex; justify-content: space-between; align-items: center; }
.tag { font-size: 10px; background: var(--button); color: var(--text); padding: 4px 8px; border-radius: 4px; }

h3 { font-size: 17px; margin: 12px 0 6px; }
.deck p { font-size: 11px; line-height: 1.8; color: var(--muted); min-height: 40px; margin: 0 0 16px; }
.card-tile b { font-size: 27px; line-height: 1.4; }
.copy { border: 0; background: transparent; color: var(--muted); padding: 0; }
.active button[data-add] { background: var(--lime); color: #142008; }
.valid { background: #b8ed5710; color: #c1e391; }

.empty { padding: 35px 20px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; text-align: center; grid-column: 1/-1; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12px; }
th { border: 1px solid var(--line); padding: 15px; text-align: left; vertical-align: top; line-height: 1.9; min-width: 150px; background: var(--surface); }
td { border: 1px solid var(--line); padding: 15px; text-align: left; vertical-align: top; line-height: 1.9; min-width: 150px; color: var(--muted); }
.library p { color: var(--muted); font-size: 11px; }
#library { display: grid; grid-template-columns: repeat(16,minmax(0,1fr)); gap: 8px; margin-top: 22px; }
footer b { white-space: nowrap; color: var(--text); font-size: 16px; }
footer span { margin-left: auto; white-space: nowrap; font-size: 8px; letter-spacing: 1px; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 14px 22px; background: var(--lime); color: #152208; border-radius: 8px; font-size: 12px; font-weight: 700; box-shadow: 0 5px 40px #0008; opacity: 0; pointer-events: none; z-index: 9; max-width: 90vw; width: max-content; }
#toast.show { opacity: 1; }
button:hover:not(:disabled) { filter: brightness(1.15); }
.meta-source { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.meta-source b { color: var(--accent-text); }
.meta-source a { color: var(--accent-text); margin-left: auto; text-decoration: underline; }
.card-tile { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #40505e; border-radius: 6px; min-height: 77px; overflow: hidden; padding: 4px 2px 6px; background: linear-gradient(140deg,#2b3843,#18222b); }
.card-tile img { display: block; width: 100%; height: auto; aspect-ratio: 5/6; object-fit: contain; }
.card-tile i { position: absolute; font-style: normal; font-weight: 800; z-index: 1; background: #6e36a9; border: 1px solid #c99cff; border-radius: 50%; width: 19px; height: 19px; display: grid; place-items: center; color: white; left: 3px; top: 3px; font-size: 10px; }
.card-tile span { text-align: center; line-height: 1.3; overflow-wrap: anywhere; min-height: 22px; font-size: 9px; }

.card-tile img.broken { display: none; }

#deck-sets { display: grid; gap: 24px; }
.lineup-set { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.set-heading { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }

.set-heading h3 { margin: 0 0 5px; font-size: 18px; }
.set-heading p { margin: 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
.set-status { margin-left: auto; font-size: 10px; color: var(--accent-text); white-space: nowrap; background: #d4ff5f0a; padding: 8px; border-radius: 5px; }
.set-decks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 20px; gap: 16px; }
.set-deck { min-width: 0; padding: 0 14px 0 0; border-right: 1px solid var(--line); }
.set-deck:last-child { border: 0; padding-right: 0; }

.set-deck h4 { font-size: 13px; margin: 10px 0 14px; min-height: 21px; }
.set-deck .card-tile span { font-size: 8px; }
.set-deck>.copy { margin-top: 14px; font-size: 10px; }

.partner-section>p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.partner-section h2 { font-size: 28px; margin-bottom: 12px; }
.base-label { display: block; color: var(--muted); font-size: 11px; margin: 20px 0 8px; }
#base-deck { width: min(100%,450px); font-size: 14px; padding: 14px; display: block; border-color: #617246; }
.base-selected { margin: 24px 0; display: flex; align-items: center; gap: 28px; padding: 20px; border: 1px solid #6e8244; background: #d4ff5f08; border-radius: 9px; }
.base-selected h3 { font-size: 19px; }
.base-selected p { font-size: 10px; color: var(--muted); }
.base-selected>.cards { flex: 1; }
.base-selected>.cards img { max-height: 85px; }
.base-selected>div:first-child { min-width: 190px; }
#partner-summary { margin: 24px 0 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 13px; }
#partner-summary>span { margin-left: auto; color: var(--accent-text); font-size: 11px; }
#partner-summary>small { width: 100%; color: var(--muted); font-size: 10px; }
.partner-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }

.page-title { font-size: 28px; letter-spacing: -1px; margin: 30px 0; }
.profile-section h2 { font-size: 22px; margin-bottom: 12px; }
.preferences p { color: var(--muted); font-size: 11px; line-height: 1.9; }
.small-note { color: var(--muted); font-size: 11px; line-height: 1.9; }
.picker-tools { display: flex; gap: 10px; }
.player-search { display: flex; gap: 10px; }
.picker-tools input { background: var(--field); border: 1px solid var(--line); color: var(--text); padding: 12px; border-radius: 6px; min-width: 0; flex: 1; }
.player-search input { background: var(--field); border: 1px solid var(--line); color: var(--text); padding: 12px; border-radius: 6px; min-width: 0; flex: 1; }
.picker-tools select { max-width: 180px; }
.variant-badge.hero { background: #ba733b; }
.variant-badge.champion { background: #8c741e; }
.card-tile:has(.variant-badge.hero) { border-color: #d39a60; }
.card-tile:has(.variant-badge.evolution) { border-color: #b690fd; }
.card-tile:has(.variant-badge.champion) { border-color: #d0be5a; }
.pick-card button[aria-pressed=true] { background: var(--lime); color: #17200c; }
#picked-cards b { color: var(--text); margin-right: 7px; }
#picked-cards button { margin: 3px; }
.include-chip { color: var(--accent-text); border-color: #7c9651; }
.exclude-chip { color: var(--danger); border-color: #83554c; }
.player-search .primary { font-size: 12px; }
.profile-section form label { font-size: 12px; display: block; margin-bottom: 8px; }
.import-label { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin: 14px 10px 8px 0; }
#player-file { font-size: 11px; max-width: 240px; }
#player-status { padding: 12px 0; font-size: 12px; line-height: 1.8; color: var(--accent-text); }
#player-results { display: flex; flex-wrap: wrap; gap: 8px; }
.page-intro .page-title { margin: 9px 0; font-size: 30px; }
.data-pill { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 7px 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.data-details>summary { cursor: pointer; padding: 8px 0; }
.data-details .meta-source { padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.tab-nav button>span { margin-right: 8px; font-size: 16px; }
.tab-nav button[aria-selected=true] { background: var(--lime); color: #17200d; font-weight: 800; }
.tab-nav button:focus-visible { outline: 2px solid var(--lime); }
.show-more { display: flex; justify-content: center; margin: 25px 0; }
.show-more button { min-width: 180px; padding: 13px; }
.context-strip { display: flex; gap: 14px; align-items: center; padding: 14px; background: #d4ff5f09; border: 1px solid #d4ff5f22; border-radius: 8px; font-size: 11px; color: var(--muted); }
.context-strip button { margin-left: auto; color: var(--accent-text); white-space: nowrap; }
.partner-section { padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; border: 0; padding-bottom: 0; }
.sets-section { padding: 40px 0 8px; padding-top: 25px; }
.library { border-top: 1px solid var(--line); padding: 34px 0; border: 0; padding-top: 0; }
footer { border-top: 1px solid var(--line); padding: 28px 0; display: flex; gap: 24px; align-items: center; color: var(--muted); font-size: 9px; line-height: 1.9; margin-top: 10px; }
.filtered-section .tab-heading h2 { font-size: 21px; }
.partner-grid .card-tile { justify-content: flex-start; }
.list-controls { display: flex; justify-content: flex-end; margin: 14px 0; color: var(--muted); font-size: 11px; }
.list-controls select { margin-left: 8px; min-width: 100px; }
.browse-grid .deck { min-width: 0; padding: 12px; }
.browse-grid .card-tile { justify-content: flex-start; min-height: 0; padding: 3px 1px 4px; border-radius: 4px; }
.browse-grid .card-tile span { font-size: 8px; }
.browse-grid .card-tile i { width: 15px; height: 15px; font-size: 8px; left: 1px; top: 1px; }
.browse-grid .partner-actions { gap: 5px; margin-top: 10px; }
.browse-grid .partner-actions button { font-size: 9px; padding: 8px 3px; line-height: 1.5; }
.profile-identity>.data-pill { margin-left: auto; }
.profile-clan>span { margin-left: 20px; }
.profile-date { margin: 5px 0 18px; }
.profile-stat { min-width: 0; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); padding: 14px; }
.profile-stat dt { font-size: 11px; color: var(--muted); line-height: 1.6; }
.profile-stat dd { font-size: 21px; font-weight: 750; margin: 8px 0 0; overflow-wrap: anywhere; }
.profile-stat small { font-size: 9px; color: var(--muted); display: block; line-height: 1.8; margin-top: 4px; }
.profile-loadout h3 { font-size: 16px; margin: 0 0 14px; }
.profile-seasons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.profile-season { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: var(--surface); }
.profile-season h4 { margin: 0 0 12px; font-size: 12px; color: var(--accent-text); }
.profile-season dl { display: flex; margin: 0; gap: 8px; }
.profile-season .profile-stat { border: 0; padding: 0; flex: 1; }
.profile-season .profile-stat dd { font-size: 17px; }
.profile-season .profile-stat dt { font-size: 10px; }

.profile-history { margin-top: 16px; font-size: 12px; color: var(--muted); }

.profile-history summary { cursor: pointer; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

.profile-loadout { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 32px; }
.profile-loadout .card-tile { justify-content: flex-start; }
.profile-favorite>.card-tile { max-width: 100px; }
.profile-recent-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-recent-heading h3 { font-size: 16px; margin: 0; }
.profile-recent-heading>span { font-size: 12px; color: var(--accent-text); }
.profile-history ol { list-style: none; padding: 0; margin: 12px 0; }
.profile-history li { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding: 12px 4px; }
.battle-result { font-size: 11px; font-weight: 700; padding: 7px 9px; border-radius: 5px; background: var(--button); color: var(--muted); }
.battle-result.win { background: #d4ff5f12; color: var(--accent-text); }
.battle-result.loss { background: #f0998512; color: var(--danger); }
.profile-history li>div { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-history b { color: var(--text); }
.profile-history small { font-size: 10px; color: var(--muted); }
.duel-tabs button { flex: 1; padding: 12px; }
.duel-tabs small { display: block; margin-top: 5px; }
.duel-tabs [aria-selected=true] { background: var(--lime); color: #17200d; }
#duel-builder .card-tile>span { display: none; }
#duel-builder .card-tile { padding: 2px; min-height: 0; }
#duel-builder .variant-badge { font-size: 7px; }
#duel-builder>div[role=tabpanel]>.deck { max-width: 350px; }
#player-search-panel>summary { cursor: pointer; font-size: 13px; color: var(--accent-text); padding: 10px 0; }
#player-search-panel[open]>summary { margin-bottom: 12px; }
.cards .variant-badge { position: absolute; bottom: 1px; left: 1px; right: 1px; text-align: center; font-size: 7px; padding: 1px; }
.cards .card-tile i { top: 2px; left: 2px; }
.deck { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.browse-grid .deck h3 { line-height: 1.65; min-height: 0; margin: 7px 0 5px; font-size: 12px; }
.browse-grid .deck p { font-size: 10px; margin: 0 0 9px; min-height: 0; margin-bottom: 7px; }
.partner-actions { display: grid; margin-top: 7px; gap: 4px; }
.pick-card>div { display: flex; gap: 2px; flex-direction: column; margin-top: 3px; }
.profile-loadout .cards { max-width: 360px; }
.duel-search-nav button { padding: 12px 18px; }
.deck .cards { margin-top: 8px; }
#world-ranking { list-style: none; padding: 0; }
#world-ranking li { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#world-ranking span { font-size: 11px; color: var(--muted); }
#world-ranking button { margin-left: auto; }
#ranking-date { font-size: 12px; color: var(--muted); }
#favorite-players { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
#favorite-players>p { width: 100%; }
#deck-ranking { margin-top: 20px; }
.rank-switch { display: flex; gap: 8px; margin-bottom: 22px; }
.rank-switch button { padding: 12px 24px; }
.rank-switch [aria-selected=true] { background: var(--lime); color: #17200d; }
#card-picker .card-tile>span { display: none; }
.preferences[data-pick-mode=include] [data-exclude] { display: none; }
.preferences[data-pick-mode=exclude] [data-include] { display: none; }
.pick-tabs { display: flex; gap: 6px; margin: 16px 0; overflow-x: auto; }
.pick-tabs [aria-pressed=true] { background: var(--lime); color: #17200d; }
.profile-tabs [aria-selected=true] { background: var(--lime); color: #17200d; }
.pick-card button { padding: 7px 0; font-size: 8px; }
#favorite-player { color: var(--accent-text); padding: 12px 18px; }
.world-player-deck { width: 100%; max-width: 650px; }
.analysis-row { display: grid; gap: 6px; margin: 16px 0; font-size: 12px; }
.analysis-row span { color: var(--muted); }
.analysis-row progress { width: 100%; height: 14px; accent-color: var(--lime); }
#clan-form { display: flex; gap: 8px; }
#clan-tag { padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.best-level { grid-column: 1/-1; margin: 6px 0; color: var(--accent-text); font-size: 13px; }
.game-copy { display: block; text-align: center; border: 1px solid var(--line); background: var(--lime); color: #17200d; padding: 10px 5px; border-radius: 5px; font-size: 11px; font-weight: 700; text-decoration: none; }
.game-copy:focus-visible { outline: 2px solid var(--focus); }
.compact-deck { position: relative; }
.compact-deck>.cards .card-tile i { width: 13px; height: 13px; font-size: 8px; }
.deck-details>summary { position: absolute; right: 2px; top: 6px; cursor: pointer; list-style: none; width: 22px; min-height: 32px; display: grid; place-items: center; color: var(--accent-text); font-size: 19px; }
.deck-details>summary::-webkit-details-marker { display: none; }
.deck-details[open]>summary span { transform: rotate(90deg); }
.deck-details[open] { margin-top: 12px; }
.deck-details .deck-top { margin-bottom: 8px; }
.browse-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.deck-rank-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.deck-rank-row .game-copy { flex: 0 0 auto; width: auto; padding: 4px 9px; font-size: 11px; }
.deck-rank { display: block; color: var(--accent-text); padding: 4px 6px; font-size: 12px; }

.duel-candidate { position: relative; padding-right: 34px; }
.duel-adopt-check { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 34px; padding: 0; font-size: 20px; background: var(--lime); color: #17200d; }
.duel-adopt-check:focus-visible { outline: 2px solid var(--focus); }
#language { flex: none; max-width: 125px; margin-left: 12px; padding: 8px; font-size: 12px; }
.language-note { padding: 10px; border: 1px solid var(--line); border-radius: 6px; }
.deck-users { margin: 12px 0; font-size: 11px; }
.deck-users button { display: block; margin-top: 5px; overflow-wrap: anywhere; }
#feedback-form { display: grid; gap: 10px; max-width: 650px; }
#feedback-form input { padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
#feedback-form textarea { padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; min-height: 110px; }
#feedback-messages { max-width: 700px; }
#feedback-messages article { padding: 15px; margin: 12px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#feedback-messages small { display: block; color: var(--muted); margin: 6px 0; }
#feedback-messages p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.site-about { padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.9; }
.site-about h2 { color: var(--text); font-size: 18px; }
#options-menu { margin-left: auto; position: relative; z-index: 30; }
#options-menu>summary { cursor: pointer; list-style: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 12px; white-space: nowrap; }
#options-menu>summary::-webkit-details-marker { display: none; }
.options-body { position: absolute; right: 0; top: 45px; width: 260px; max-width: 85vw; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 15px 40px #0009; display: grid; gap: 12px; }
.options-body h2 { font-size: 17px; margin: 0; }
.options-body label { font-size: 12px; }
.options-body #language { display: block; margin: 8px 0 0; max-width: none; width: 100%; }
.options-body button { text-align: left; }
.edition { font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-right: 12px; }
.selected-lineup { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.selected-slot.editing { border-color: var(--lime); }
.selected-slot-title { margin-bottom: 8px; }
.selected-slot .deck-top { display: none; }
.selected-slot .deck-details>p { display: none; }
.selected-slot .partner-actions>button { display: none; }
.selected-slot .deck-details[open] { margin-top: 5px; }
.selected-slot { padding: 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; background: var(--panel); display: grid; grid-template-columns: minmax(70px,1fr) auto auto; gap: 6px; align-items: center; }
.selected-slot .compact-deck { padding: 4px; border: 0; display: contents; }
.selected-slot .deck-details { display: contents; }
.selected-slot .partner-actions { display: contents; }
.selected-slot .cards { grid-column: 1/-1; grid-row: 2; }
.selected-slot .selected-slot-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 11px; padding: 8px 4px; }
.selected-slot>button[data-remove-index] { margin-top: 6px; font-size: 10px; grid-column: 2; grid-row: 1; margin: 0; padding: 8px; }
.selected-slot .game-copy { display: block; grid-column: 3; grid-row: 1; padding: 8px; font-size: 10px; }
.selected-slot .small-note { grid-column: 1/-1; }
.selected-slot .deck-details>summary { display: none; }
#picked-cards { font-size: 11px; color: var(--muted); line-height: 2.2; margin-top: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
#picked-cards .picked-group { padding: 8px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
#picked-cards .picked-group>b { display: block; font-size: 11px; }
#picked-cards .picked-group>div { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-start; }
#picked-cards button[data-include] { display: inline-block; position: relative; width: 50px; padding: 2px; margin: 0; }
#picked-cards button[data-exclude] { display: inline-block; position: relative; width: 50px; padding: 2px; margin: 0; }
#picked-cards .card-tile>span { display: none; }
#picked-cards .card-tile { padding: 0; border: 0; background: transparent; min-height: 0; }
#picked-cards .card-tile img { width: 100%; }
#picked-cards button>span:last-child { position: absolute; right: 0; top: 0; font-size: 12px; background: var(--surface); border-radius: 50%; line-height: 16px; width: 16px; }
.inline-help { display: inline-block; vertical-align: top; max-width: 100%; margin: 2px 0 6px; }
.inline-help>summary { cursor: pointer; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; color: var(--muted); list-style: none; }
.inline-help>summary::-webkit-details-marker { display: none; }
.inline-help[open] { display: block; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.inline-help .small-note { margin: 6px 0; }
.page-intro { align-items: center; justify-content: space-between; padding: 30px 0 16px; gap: 20px; display: none; }
header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 max(5vw,20px); position: relative; height: 64px; }
.tab-nav { display: flex; border-bottom: 1px solid var(--line); padding-bottom: 12px; overflow-x: auto; scrollbar-width: thin; padding: 5px 0; gap: 4px; }
.tab-nav button { flex: 1; min-width: max-content; border: 0; background: transparent; color: var(--muted); font-size: 13px; border-radius: 8px; padding: 10px 12px; }
[role=tabpanel] { outline: none; padding: 12px 0; }
.tab-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 5px; }
.tab-heading h2 { font-size: 21px; margin: 3px 0; }
.duel-search-nav { display: flex; gap: 8px; margin: 6px 0; }
.duel-tabs { display: flex; gap: 8px; margin: 8px 0; }
.preferences { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 0 0 30px; padding: 12px; margin-bottom: 12px; }
.preferences h2 { margin-bottom: 12px; font-size: 19px; margin: 0 0 6px; }
#card-picker { display: grid; grid-template-columns: repeat(20,minmax(0,1fr)); gap: 3px; margin: 8px 0; }
.profile-section { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; margin: 20px 0; margin-top: 0; padding: 14px; }
.data-details { color: var(--muted); font-size: 10px; margin: 0 0 4px; }
.tab-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.analysis-summary { display: grid; gap: 8px; background: var(--panel); padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.analysis-summary span { font-size: 13px; color: var(--muted); }
.opponent-card-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.opponent-card-stat { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.opponent-card-stat>.card-tile { width: 64px; flex: 0 0 64px; }
.opponent-card-stat>.card-tile>span { display: none; }
.opponent-card-stat .analysis-row { flex: 1; min-width: 0; }
.analysis-deck { padding: 12px 0; border-bottom: 1px solid var(--line); max-width: 680px; }
.analysis-deck p { font-size: 13px; color: var(--muted); }
.owned-card-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.owned-card-controls label { display: grid; gap: 6px; font-size: 12px; }
.owned-card-controls input { padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.owned-card-controls select { padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.owned-card-row strong { color: var(--accent-text); font-size: 14px; }
.owned-card-row span { color: var(--muted); }
.owned-card-row small { color: var(--muted); }
.profile-stats { display: grid; margin: 14px 0 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
#panel-normal>.rank-switch { margin-bottom: 14px; }
#panel-duel>.rank-switch { margin-bottom: 14px; }
#panel-normal [role="tabpanel"][hidden] { display: none; }
#duel-ranking[hidden] { display: none; }
#duel-builder[hidden] { display: none; }
#player-detail { margin-top: 12px; padding-top: 8px; border-top: 0; }
.player-detail { margin: 22px 0 24px; border-top: 1px solid var(--line); padding-top: 24px; padding: 12px; margin-top: 10px; }
.profile-identity { display: flex; align-items: center; gap: 8px; }
.profile-monogram { display: grid; place-items: center; border: 1px solid #849b45; border-radius: 16px; background: #d4ff5f12; color: var(--accent-text); font-weight: 800; flex-shrink: 0; width: 36px; height: 36px; font-size: 20px; }
.profile-identity h3 { line-height: 1.5; font-size: 20px; margin: 2px 0; }
.profile-identity p { color: var(--muted); font-size: 11px; margin: 5px 0; }
.profile-clan { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 5px 0; }
.profile-identity .eyebrow { font-size: 9px; }
.profile-highlights { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 10px 0; gap: 4px; }
.profile-highlights .profile-stat { padding: 6px 8px; }
.profile-stats .profile-stat { padding: 6px 8px; }
.profile-highlights .profile-stat dd { color: var(--accent-text); font-size: 18px; margin: 3px 0; }
.profile-stats .profile-stat dd { font-size: 16px; margin: 3px 0; }
.profile-highlights .profile-stat dt { font-size: 9px; }
.profile-stats .profile-stat dt { font-size: 9px; }
.profile-highlights .profile-stat small { font-size: 8px; }
.profile-block { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.profile-block>h3 { font-size: 14px; margin: 5px 0 10px; }
.profile-tabs { display: flex; overflow-x: auto; gap: 4px; margin: 10px 0; }
.profile-tabs button { white-space: nowrap; padding: 7px 9px; font-size: 11px; }
.owned-card-grid { display: grid; grid-template-columns: repeat(20,minmax(0,1fr)); gap: 2px; }
.owned-card-row { align-items: center; gap: 10px; min-width: 0; display: block; padding: 0; border: 0; background: none; border-radius: 0; }
.owned-card-row[hidden] { display: none; }
.owned-card-row>div { gap: 5px; font-size: 12px; min-width: 0; display: none; }
.owned-card-row img { flex-shrink: 0; display: block; width: 100%; max-width: 100%; height: auto; }
.owned-filter-options { font-size: 11px; margin: 6px 0; }
.rarity-progress { margin-top: 18px; }
.rarity-progress section { border-bottom: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; font-size: 12px; }
.rarity-progress label { display: grid; gap: 6px; }
.rarity-progress progress { width: 100%; height: 12px; accent-color: var(--lime); }
.owned-level-group { margin: 10px 0 16px; }
.owned-level-group h4 { font-size: 12px; margin: 6px 0; color: var(--accent-text); }
.owned-level-group h4 small { font-weight: 400; color: var(--muted); margin-left: 8px; }
.owned-level-group[hidden] { display: none; }
.counter-candidate { border-bottom: 1px solid var(--line); padding: 12px 0; max-width: 680px; }
.counter-evidence { font-size: 12px; color: var(--muted); }
.counter-card-group { margin-top: 20px; }
.diagnosis-deck { max-width: 680px; border-bottom: 1px solid var(--line); padding: 10px 0; }
#level-diagnosis-panel { margin: 12px 0; border: 1px solid var(--line); padding: 10px; border-radius: 8px; }
#level-diagnosis-panel summary { cursor: pointer; color: var(--accent-text); }

#clan-announcement { width: 100%; display: block; margin-bottom: 10px; padding: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
#clan-goal { padding: 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }
#diagnosis-target { padding: 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line); }

.deck-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.deck-badges>span { font-size: 10px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); white-space: nowrap; }
.deck-quick-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.deck-quick-actions a { font-size: 10px; padding: 7px 9px; }
.deck-quick-actions button { font-size: 10px; padding: 7px 9px; }
.recent-players { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 8px 0; }
.recent-players>span { font-size: 10px; color: var(--muted); }
.recent-players small { font-size: 10px; color: var(--muted); }
.recent-players button { padding: 5px 9px; font-size: 11px; border-radius: 16px; }
.analysis-find-card { font-size: 10px; padding: 6px; margin: 4px; }
.selected-slot .deck-badges { grid-column: 1/-1; grid-row: 3; }
.selected-slot .deck-quick-actions { display: contents; }
.selected-slot .deck-quick-actions>[data-cycle] { grid-column: 1/-1; grid-row: 4; justify-self: start; }
#recommendation-source { font-size: 11px; color: var(--muted); }
.selected-slot .deck-details .deck-badges { display: flex; }
.selected-slot .deck-details .deck-quick-actions { display: contents; }
.deck-details .deck-badges { margin: 6px 0; }
.favorite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.favorite-row #favorite-players { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.favorite-row .inline-help { margin: 0; }
.profile-section>.profile-tabs { margin: 0 0 12px; position: sticky; top: 0; background: var(--panel); z-index: 2; padding: 5px 0; }
#duel-sort { padding: 9px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 5px; }
#base-photo-query { padding: 9px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 5px; }
.card-stat-name { display: flex; align-items: center; gap: 8px; }
.card-stat-name>.card-tile { width: 50px; flex: 0 0 50px; }
.card-stat-name .card-tile>span { display: none; }
.card-stat-table button { font-size: 10px; padding: 7px; white-space: nowrap; }
#base-photo-picker { padding: 10px; border: 1px solid var(--line); border-radius: 6px; margin: 10px 0; }
#base-photo-picker summary { cursor: pointer; }
#base-photo-picker summary .cards { max-width: 500px; margin-top: 6px; }
#base-photo-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.base-photo-choice { text-align: left; min-width: 0; padding: 8px; }
.base-photo-choice>span:first-child { display: block; font-size: 11px; margin-bottom: 5px; }
.base-photo-choice[aria-pressed=true] { border-color: var(--lime); }
.duel-set-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.duel-set-grid>article { border: 1px solid var(--line); padding: 10px; border-radius: 8px; }
.duel-set-grid .deck { margin-bottom: 5px; }
.duel-usage { display: block; color: var(--muted); font-size: 10px; margin: 4px 0; }
.duel-suggestions h3 { font-size: 16px; }
.analysis-more { margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.analysis-more>summary { cursor: pointer; color: var(--accent-text); font-size: 12px; }
.card-metric-tabs { margin: 12px 0; }
.card-metric-tabs button[aria-selected=true] { background: var(--lime); color: #17200d; }
.card-metric-tabs button { min-width: 80px; }
.counter-deck-line { display: flex; align-items: center; gap: 8px; }
.counter-deck-line>.cards { flex: 1; min-width: 0; }
.counter-deck-line .compact-copy { flex: 0 0 auto; width: auto; display: inline-block; padding: 7px 9px; font-size: 10px; white-space: nowrap; }
.rarity-progress section:first-of-type { background: #d4ff5f08; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Noto Sans JP",sans-serif; font-size: 14px; transition: background-color .15s,color .15s; }
button { font: inherit; outline-offset: 5px; cursor: pointer; border: 1px solid var(--line); background: var(--button); color: var(--text); padding: 9px 10px; border-radius: 5px; font-size: 10px; font-weight: 600; max-width: 100%; }
textarea { max-width: 100%; }
input { font: inherit; outline-offset: 5px; max-width: 100%; min-width: 0; }
select { font: inherit; outline-offset: 5px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 10px 8px; border-radius: 6px; font-size: 11px; flex: 1; max-width: 100%; min-width: 0; }
button:focus-visible { outline: 2px solid var(--focus); }
a:focus-visible { outline: 2px solid var(--focus); }
input:focus-visible { outline: 2px solid var(--focus); }
select:focus-visible { outline: 2px solid var(--focus); }
summary:focus-visible { outline: 2px solid var(--focus); }
#theme-mode { display: block; width: 100%; margin-top: 8px; padding: 9px; }
.cards { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; }
.cards .card-tile { padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; justify-content: flex-start; }
.cards .card-tile img { width: 100%; height: auto; max-height: none; aspect-ratio: 5/6; object-fit: contain; }
.cards .card-tile>span { display: none; }
.variant-badge { border-radius: 3px; padding: 2px 3px; font-size: 8px; color: white; background: #7857cb; display: none; }
#card-picker .card-tile { border-radius: 4px; justify-content: flex-start; padding: 0; min-height: 0; border: 0; background: transparent; }
#card-picker .card-tile img { aspect-ratio: 5/6; object-fit: contain; width: 100%; max-height: none; }
.deck.compact-deck { position: relative; padding: 6px 25px 6px 6px; }
.compact-deck>.cards { margin: 0; }
.deck-stats-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin: 6px 0; min-width: 0; }
.deck-stats-row .deck-badges { margin: 0; min-width: 0; }
.deck-stats-row .deck-quick-actions { margin: 0; flex: none; }
.deck-stats-row .game-copy { white-space: nowrap; padding: 6px 8px; font-size: 10px; }
.selected-slot .deck-stats-row { display: contents; }
.selected-slot .deck.compact-deck { padding: 0; }
.diagnosis-deck p { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; justify-content: space-between; line-height: 1.6; }
.diagnosis-deck p>span { min-width: 0; }
.diagnosis-deck p .game-copy { flex: none; font-size: 11px; padding: 7px 9px; white-space: nowrap; }
.general-filters { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(165px,1fr)); gap: 12px; }
.general-filters label { flex: 1; color: var(--muted); display: grid; gap: 6px; align-content: start; min-width: 0; font-size: 11px; }
.general-filters select { display: block; margin-top: 6px; width: 100%; margin: 0; padding: 10px 8px; min-height: 40px; font-size: 13px; background: var(--field); color: var(--text); }
.general-filters input { border: 1px solid var(--line); border-radius: 5px; width: 100%; margin: 0; padding: 10px 8px; min-height: 40px; font-size: 13px; background: var(--field); color: var(--text); }
.card-stat-controls { flex-wrap: wrap; display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.card-stat-controls label { font-size: 12px; min-width: 0; display: grid; gap: 6px; }
.card-stat-controls input { padding: 9px; color: var(--text); border: 1px solid var(--line); border-radius: 5px; width: 100%; min-height: 40px; background: var(--field); }
.card-stat-controls select { padding: 9px; color: var(--text); border: 1px solid var(--line); border-radius: 5px; width: 100%; min-height: 40px; background: var(--field); }
.card-stat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(64px,1fr)); gap: 6px; }
.card-stat-photo { position: relative; padding: 2px; border-color: transparent; background: transparent; min-width: 0; }
.card-stat-rank { position: absolute; top: 0; left: 0; z-index: 2; min-width: 18px; padding: 1px 3px; border-radius: 5px; background: var(--panel); color: var(--text); border: 1px solid var(--line); font-size: 11px; font-weight: 800; line-height: 1.3; pointer-events: none; }
.card-stat-photo:hover { border-color: var(--accent-text); background: var(--surface); }
.card-stat-photo:focus-visible { border-color: var(--accent-text); background: var(--surface); }
.card-stat-photo .card-tile { background: transparent; border: 0; padding: 0; min-height: 0; }
.card-stat-photo .card-tile img { width: 100%; height: auto; max-height: none; }
.card-stat-photo .card-tile>span { display: none; }
.card-stat-photo .card-tile i { display: none; }
#card-detail-dialog { width: min(480px,calc(100vw - 24px)); max-height: 85dvh; overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); }
#card-detail-dialog::backdrop { background: #0009; }

#card-detail-dialog .card-stat-name>.card-tile { width: 64px; flex-basis: 64px; }
#card-detail-dialog h3 { margin: 0; font-size: 20px; }
#card-detail-dialog>button { margin-top: 12px; }
.card-detail-evidence { font-size: 12px; line-height: 1.8; color: var(--muted); }
.card-stat-table { width: 100%; table-layout: fixed; font-size: 12px; }
.card-stat-table th { min-width: 0; padding: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.card-stat-table td { min-width: 0; padding: 8px; line-height: 1.6; overflow-wrap: anywhere; }
.ranking-card-filters { margin: 12px 0 20px; }
#ranking-card-panel { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
#ranking-card-panel>summary { cursor: pointer; color: var(--accent-text); font-size: 13px; }
.ranking-card-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ranking-card-tools label { display: grid; gap: 6px; font-size: 12px; flex: 1; min-width: 0; }
#ranking-card-query { padding: 10px; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 6px; width: 100%; }
#ranking-card-picker { display: grid; grid-template-columns: repeat(20,minmax(0,1fr)); gap: 3px; margin-top: 10px; }
#ranking-card-picker button { padding: 1px; min-width: 0; background: transparent; }
#ranking-card-picker button[aria-pressed=true] { border-color: var(--accent-text); background: var(--surface); }
#ranking-card-picker .card-tile { min-height: 0; padding: 0; border: 0; background: transparent; }
#ranking-card-picker .card-tile>span { display: none; }
#ranking-card-picker .card-tile img { max-height: none; }
#ranking-picked-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.ranking-picked-group { display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.ranking-picked-group button { width: 40px; padding: 0; position: relative; }
.ranking-picked-group button>span:last-child { position: absolute; right: 0; bottom: 0; background: var(--panel); border-radius: 50%; padding: 0 3px; }
.ranking-picked-group .card-tile { padding: 0; border: 0; background: transparent; min-height: 0; }
.ranking-picked-group .card-tile>span { display: none; }
#ranking-result-count { font-size: 12px; color: var(--muted); }

/* (min-width:1500px) */
@media (min-width:1500px) {
  main { padding: 0 40px; }
}

/* (max-width:1100px) */
@media (max-width:1100px) {

  #library { grid-template-columns: repeat(8,1fr); }
  .set-decks { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .set-deck:nth-child(2) { border-right: 0; }
  .partner-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .base-selected { display: block; }
  .base-selected>.cards { margin-top: 16px; }
  #card-picker { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .browse-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* (max-width:1000px) */
@media (max-width:1000px) {

  .profile-seasons { grid-template-columns: 1fr; }
  .profile-season dl { gap: 16px; }

  .profile-recent-heading { align-items: flex-start; flex-direction: column; }
  #card-picker { grid-template-columns: repeat(10,minmax(0,1fr)); }
  .owned-card-grid { grid-template-columns: repeat(15,minmax(0,1fr)); }
  #ranking-card-picker { grid-template-columns: repeat(10,minmax(0,1fr)); }
}

/* (max-width:800px) */
@media (max-width:800px) {
  .browse-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .general-filters select { font-size: 12px; padding: 10px 6px; }
}

/* (max-width:760px) */
@media (max-width:760px) {
  .brand { font-size: 17px; }
  .brand small { display: none; }
  .edition { display: none; }
  .notice { align-items: flex-start; flex-direction: column; gap: 6px; font-size: 10px; padding: 13px; }

  .deck { padding: 12px; }
  .deck h3 { font-size: 14px; }
  .deck p { min-height: 58px; font-size: 10px; }
  .card-tile b { font-size: 23px; }
  .card-tile span { font-size: 7px; }

  .copy { text-align: left; font-size: 9px; }
  .filter-row { gap: 5px; }
  select { font-size: 10px; padding: 10px 3px; }
  footer { flex-wrap: wrap; gap: 7px; }
  footer span { margin-left: 0; }
  footer p { width: 100%; }
  .meta-source a { margin-left: 0; }

  .set-heading { padding: 16px; gap: 10px; flex-wrap: wrap; }
  .set-heading h3 { font-size: 16px; }
  .set-heading p { font-size: 10px; }
  .set-status { margin-left: 0; }
  .set-decks { padding: 14px; gap: 18px 12px; }
  .set-deck { padding-right: 10px; }
  .set-deck h4 { font-size: 11px; min-height: 32px; }
  .set-deck .card-tile { border-radius: 4px; min-height: 0; }
  .set-deck .card-tile span { font-size: 7px; min-height: 28px; }
  .set-deck .card-tile i { width: 14px; height: 14px; font-size: 8px; }





  .card-tile { min-height: 0; }
  #library { gap: 5px; grid-template-columns: repeat(6,minmax(0,1fr)); }
  .partner-section h2 { font-size: 24px; }
  .base-selected { padding: 14px; }
  .base-selected>.cards img { max-height: 100px; }
  .partner-grid { gap: 10px; }


  .partner-actions button { font-size: 9px; padding: 10px 3px; }

  #partner-summary>span { margin-left: 0; }
  .preferences { padding: 16px; }
  .profile-section { padding: 16px; }
  .page-title { font-size: 25px; }
  .player-search { flex-direction: column; }
  #card-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .picker-tools select { max-width: 115px; }
  .picker-tools input { width: 100px; }
  .card-tile .variant-badge { font-size: 7px; }
  .partner-section { padding-top: 25px; }
  .page-intro { padding: 24px 0 8px; }
  .page-intro .page-title { font-size: 25px; }
  .page-intro>.data-pill { display: none; }
  .tab-nav { gap: 3px; position: sticky; top: 0; background: var(--bg); z-index: 5; padding: 8px 0; }
  .general-filters { padding: 10px; }
  .general-filters select { font-size: 10px; padding: 10px 3px; }
  .browse-grid { gap: 12px; }
  .browse-grid .deck { padding: 12px; }
  .browse-grid .deck h3 { font-size: 12px; min-height: 42px; }
  .browse-grid .deck p { font-size: 9px; min-height: 32px; }
  .browse-grid .card-tile span { font-size: 8px; }
  .tab-heading h2 { font-size: 23px; }
  .context-strip { display: block; line-height: 1.9; }
  .context-strip button { margin: 8px 0 0; }
  .tab-heading { align-items: flex-start; }
  .tab-heading p { font-size: 11px; }
  .profile-identity { gap: 10px; flex-wrap: wrap; }
  .profile-identity h3 { font-size: 22px; }
  .profile-identity>.data-pill { margin: 0; }
  .profile-monogram { width: 48px; height: 48px; font-size: 25px; }
  .profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .profile-stat { padding: 11px; }
  .profile-stat dd { font-size: 19px; }
  .profile-clan>span { display: block; margin: 6px 0 0; }
  .profile-loadout { grid-template-columns: 1fr; gap: 20px; }

  .profile-history li>div { gap: 6px 10px; }
  .profile-history small { width: 100%; }
  .profile-favorite { display: flex; gap: 18px; align-items: center; }
  .profile-favorite .card-tile { width: 85px; }
  .profile-season .profile-stat { padding: 0; }
  .profile-season .profile-stat dd { font-size: 16px; }
  header { height: 58px; }
  .tab-nav button { font-size: 10px; min-width: 0; white-space: nowrap; padding: 7px 8px; }
  .tab-nav button>span { display: block; margin: 0 0 4px; font-size: 13px; margin-bottom: 1px; }
  [role=tabpanel] { padding-top: 10px; }
  .selected-lineup { margin: 8px 0; }
  .profile-highlights { gap: 8px; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-highlights .profile-stat dd { font-size: 16px; }
  .profile-highlights .profile-stat small { line-height: 1.3; }
}

/* (max-width:600px) */
@media (max-width:600px) {
  .card-metric-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .card-metric-tabs button { min-width:0; padding:10px 4px; }
  #duel-builder .cards { max-width: none; }
  .profile-loadout .cards { max-width: none; }
  .base-selected>.cards { max-width: none; }
  .cards .card-tile img { width: 100%; aspect-ratio: 5/6; }
  #duel-builder .card-tile img { width: 100%; aspect-ratio: 5/6; }
  .browse-grid .card-tile img { width: 100%; aspect-ratio: 5/6; }
  .deck { padding: 12px; }
  #card-picker .card-tile img { width: 100%; }
  #card-picker button { font-size: 10px; padding: 10px 2px; }

  .set-deck { border: 0; padding: 0; }
  #duel-builder>div[role=tabpanel]>.deck { max-width: none; }
  .compact-deck .card-tile img { min-height: 0; }
  .compact-deck>.cards .card-tile i { width: 11px; height: 11px; font-size: 7px; top: 0; left: 0; }
  .selected-lineup { grid-template-columns: 1fr; }
  .opponent-card-stats { grid-template-columns: 1fr; }
  .owned-card-row { padding: 8px; }
  .owned-card-controls label { flex: 1; min-width: 130px; }
  .owned-card-controls input { width: 100%; }
  .owned-card-controls select { width: 100%; }
  .owned-card-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .rarity-progress section { grid-template-columns: 1fr 1fr; }
  .rarity-progress section>b { grid-column: 1/-1; }
  #base-photo-options { grid-template-columns: 1fr; }
  .duel-set-grid { grid-template-columns: 1fr; }
  .card-stat-name>span { max-width: 100px; }
  .card-stat-controls label { flex: 1; min-width: 120px; }
  .general-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .card-stat-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .general-filters label { font-size: 12px; }
  .general-filters select { font-size: 16px; padding: 9px 6px; }
  .general-filters input { font-size: 16px; padding: 9px 6px; }
  .card-stat-controls input { font-size: 16px; padding: 9px 6px; }
  .card-stat-controls select { font-size: 16px; padding: 9px 6px; }
  .cards { max-width: none; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
  .compact-deck>.cards { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; }
  #duel-builder .compact-deck>.cards { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; }
  .selected-slot .cards { grid-template-columns: repeat(8,minmax(0,1fr)); gap: 0; }
  .deck.compact-deck { padding: 5px 25px 5px 5px; }
  .browse-grid { grid-template-columns: 1fr; gap: 8px; }
  .partner-grid { grid-template-columns: 1fr; gap: 8px; }
  .set-decks { grid-template-columns: 1fr; gap: 8px; }
  .card-stat-grid { grid-template-columns: repeat(auto-fill,minmax(48px,1fr)); gap: 4px; }
  .card-stat-table { font-size: 11px; }
  .card-stat-table td { padding: 6px; line-height: 1.5; }
  .card-stat-table th { padding: 6px; line-height: 1.5; }
  #card-detail-dialog { padding: 14px; }
  #card-picker { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  #ranking-card-picker { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .diagnosis-deck p { font-size: 11px; gap: 6px; }
}

/* (max-width:400px) */
@media (max-width:400px) {
  .set-decks { grid-template-columns: 1fr; }
  .set-deck { border-right: 0; padding: 0; }
  .set-deck h4 { min-height: 0; }
}

/* (max-width:390px) */
@media (max-width:390px) {

  #library { grid-template-columns: repeat(4,1fr); }
  .partner-grid { grid-template-columns: 1fr; }
  .tab-nav button { padding: 10px 6px; font-size: 9px; }
  .browse-grid { grid-template-columns: 1fr; gap: 8px; }
  .browse-grid .deck { padding: 8px; }
  .browse-grid .deck h3 { font-size: 11px; }
  .browse-grid .tag { font-size: 9px; padding: 3px 5px; }

  .browse-grid .card-tile span { font-size: 7px; }
}

/* (max-width:340px) */
@media (max-width:340px) {
  .browse-grid { grid-template-columns: 1fr; }
}

/* (prefers-reduced-motion:reduce) */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
}