:root { color-scheme: dark; --gold: #dfc58e; --ink: #f0e9da; --muted: #bab7b3; --line: #d5b77a40; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at 85% 0, #28334b70, transparent 55%), #0b0d14; color: var(--ink); font: 16px/1.8 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif; }
a { color: var(--gold); text-underline-offset: 4px; }
button, input, select { font: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button, summary { cursor: pointer; }
button, select, input[type=search] { background: #181c27; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; min-height: 46px; padding: 9px 14px; }
button:hover { border-color: var(--gold); }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: absolute; top: -100px; left: 12px; background: #0b0d14; padding: 12px; z-index: 10; }
.skip-link:focus { top: 10px; }
.catalog-shell { max-width: 1280px; margin: auto; padding: 0 40px; }
.catalog-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.catalog-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; font-family: Georgia, serif; letter-spacing: .15em; }
.catalog-brand img { width: 44px; height: 44px; object-fit: contain; }
.catalog-brand small { display: block; font: 12px/1.5 'Yu Gothic', sans-serif; letter-spacing: .1em; color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; }
nav a { padding: 6px 0; text-decoration: none; }
nav a[aria-current] { border-bottom: 1px solid var(--gold); }
.catalog-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 46px 0 30px; }
.eyebrow { color: var(--gold); font: 12px/1.5 Georgia, serif; letter-spacing: .2em; }
h1, h2, .composer-name { font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-weight: 500; }
.catalog-hero h1 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: .06em; margin: 10px 0; }
.hero-description { color: var(--muted); margin: 16px 0 0; }
.collection-seal { flex: 0 0 175px; text-align: center; padding: 15px; border: 1px solid var(--line); border-radius: 50%; height: 175px; color: var(--gold); font: 12px/1.5 Georgia, serif; letter-spacing: .12em; }
.collection-seal span { display: block; font-size: 64px; line-height: 1.4; }
.collection-seal small { display: block; font-size: 11px; margin-top: 5px; }
.catalog-disclaimer { font-size: 14px; color: var(--muted); padding: 15px 20px; border-left: 2px solid var(--gold); background: #dfc58e08; margin: 0 0 28px; }
.catalog-tools { border-top: 1px solid var(--line); padding-top: 24px; }
.search-row { display: flex; gap: 20px; }
.search-row > div { min-width: 0; }
.search-input { flex: 1; }
.search-row label { display: block; margin-bottom: 7px; font-size: 14px; }
.search-row input { width: 100%; }
.filter-help { color: var(--muted); font-size: 14px; }
.filter-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.filter-group { border: 1px solid var(--line); border-radius: 7px; background: #131620; }
.filter-group summary { padding: 10px 14px; min-height: 46px; }
.filter-group fieldset { border: 0; border-top: 1px solid var(--line); padding: 12px; margin: 0; }
.filter-group legend { font-size: 13px; color: var(--muted); padding: 0 5px; }
.filter-group label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; padding: 3px 5px; }
.filter-group label:has(input:checked) { background: #dfc58e18; border-radius: 5px; }
.filter-group input { width: 18px; height: 18px; accent-color: var(--gold); }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 20px 0 26px; }
#resultCount { color: var(--gold); font-size: 17px; margin: 0; }
.results-bar button { font-size: 14px; }
.composer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.composer-card { --era: #ae9cc6; position: relative; min-width: 0; background: #161820; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px #0002; transition: border-color .15s, transform .15s; }
.composer-card[data-era=BAROQUE] { --era: #d7bc86; }
.composer-card[data-era=CLASSICAL] { --era: #99bfb9; }
.composer-card[data-era=ROMANTIC] { --era: #d5a4ad; }
.composer-card[data-era=MODERN] { --era: #9fb9d7; }
.composer-card[data-era=CONTEMPORARY] { --era: #b5be8c; }
.composer-grid .composer-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.composer-card:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.card-number { color: var(--gold); font: 11px/1.4 Georgia, serif; letter-spacing: .17em; margin: 0; padding: 13px 16px; }
.composer-portrait { aspect-ratio: 4/5; margin: 0 12px; position: relative; background: #0a0b0f; border: 1px solid #d5b77a20; }
.composer-portrait img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.portrait-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 20px; text-align: center; background: radial-gradient(ellipse at 50% 40%, #3a3544, #151923 75%); }
.portrait-monogram { display: grid; place-items: center; width: 105px; height: 105px; border: 1px solid #d5b77a60; border-radius: 50%; font: 32px Georgia, serif; letter-spacing: .08em; color: var(--gold); }
.placeholder-name { font-family: 'Yu Mincho', serif; font-size: 16px; overflow-wrap: anywhere; }
.placeholder-message { font-size: 13px; color: var(--muted); }
.composer-body { padding: 20px; }
.composer-name { font-size: 22px; line-height: 1.55; margin: 0 0 6px; overflow-wrap: anywhere; }
.composer-english { color: var(--muted); font: 14px/1.6 Georgia, serif; margin: 0 0 12px; overflow-wrap: anywhere; min-height: 2.8em; }
.composer-years { font-size: 14px; margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.composer-country { color: var(--muted); font-size: 14px; margin: 12px 0; }
.composer-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.composer-tag { padding: 2px 9px; border: 1px solid #b6b2b13c; color: #ded9d0; font-size: 13px; border-radius: 4px; }
.era-tags .composer-tag { border-color: var(--era); color: var(--era); }
.composer-open { display: inline-block; margin-top: 8px; font-size: 14px; text-decoration: none; }
.composer-open::after { content: ''; position: absolute; inset: 0; }
.back-link { display: inline-block; padding: 14px 0; margin: 16px 0; }
.composer-card-detail { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); padding: 24px; gap: 20px 30px; }
.composer-card-detail .composer-visual { max-width: 380px; width: 100%; justify-self: center; }
.composer-card-detail .composer-body { padding: 20px 0; }
.composer-card-detail .composer-name { font-size: clamp(28px, 4vw, 38px); }
.composer-card-detail .composer-english { min-height: 0; font-size: 17px; }
.composer-card-detail h2 { font-size: 21px; margin: 24px 0 12px; }
.composer-card-detail h3 { font-size: 16px; }
.composer-extra { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.composer-extra section { border-top: 1px solid var(--line); min-width: 0; }
.composer-extra p, .composer-extra li { font-size: 15px; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.skill-row { display: grid; grid-template-columns: minmax(100px,1fr) 110px 44px; gap: 12px; align-items: center; padding: 7px 0; font-size: 15px; }
.skill-row strong { font-size: 14px; white-space: nowrap; }
.skill-meter { display: flex; gap: 5px; }
.skill-meter i { width: 18px; height: 11px; border: 1px solid #dfc58e55; border-radius: 2px; }
.skill-meter .filled { background: var(--gold); border-color: var(--gold); }
.composer-ability ul { padding-left: 22px; }
.ability-uses { color: var(--gold); }
.credit-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.catalog-message { text-align: center; border: 1px solid var(--line); padding: 32px 20px; margin: 30px 0; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) { .composer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .catalog-header { align-items: flex-start; } nav { justify-content: flex-end; } }
@media (max-width: 820px) { .catalog-shell { padding: 0 24px; } .composer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog-header { flex-direction: column; gap: 16px; } nav { justify-content: flex-start; } .composer-extra { grid-template-columns: 1fr; } .composer-card-detail { gap: 16px; padding: 16px; } }
@media (max-width: 560px) { .catalog-shell { padding: 0 20px; } .catalog-hero { padding-top: 25px; } .collection-seal { display: none; } .composer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .composer-portrait { max-height: 380px; } .filter-groups { grid-template-columns: 1fr; } .search-row { flex-direction: column; gap: 12px; } .search-row select { width: 100%; } .composer-card-detail { grid-template-columns: minmax(0, 1fr); } .composer-card-detail .composer-body { padding: 4px; } .composer-extra { gap: 12px; } .skill-row { grid-template-columns: minmax(90px,1fr) 90px 40px; gap: 8px; font-size: 14px; } .skill-meter { gap: 3px; } .skill-meter i { width: 15px; } nav { gap: 8px 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .composer-grid .composer-card:hover { transform: none; } }
/* Palace gallery: scoped to the encyclopedia, independent of game tables. */
.catalog-palace { --gold:#e5c483; --line:#d0a75d60; background:radial-gradient(ellipse at 50% 0,#642a304d,transparent 65%),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 80px),#171116; }
.catalog-palace .catalog-shell { max-width:1400px; }
.catalog-palace .catalog-hero { padding:64px 0 40px; }
.catalog-palace .catalog-hero h1 { font-size:clamp(30px,4vw,50px); letter-spacing:.12em; }
.catalog-palace .collection-seal { border:4px double #d5ad6b; outline:1px solid #d5ad6b60; outline-offset:7px; background:radial-gradient(circle,#72503255,#27191b); box-shadow:0 0 50px #d5ad6b15; }
.catalog-palace .catalog-tools { padding:24px; margin-bottom:30px; border:1px solid var(--line); background:#241b22; box-shadow:inset 0 0 0 5px #d0a75d07; }
.catalog-palace .results-bar { margin-bottom:0; }
.catalog-palace .composer-grid { gap:30px; }
.catalog-palace .composer-card { border:1px solid #b18b51; border-radius:3px; background:linear-gradient(115deg,#f5ecda,#e6d6b8); color:#392b25; box-shadow:0 16px 30px #0006,inset 0 0 0 5px #a47a3628; }
.catalog-palace .composer-visual { position:relative; padding:0 16px 24px; background:radial-gradient(ellipse at center,#713337,#351a23 80%); border-bottom:4px double #b99153; }
.catalog-palace .card-number { text-align:center; color:#efcd8a; padding:19px 0 25px; font-size:10px; letter-spacing:.22em; }
.catalog-palace .composer-portrait { margin:0 3px; border:10px solid #a97b38; border-image:linear-gradient(135deg,#f9e2a2 0%,#79501f 17%,#e7bf6c 32%,#8e5f28 50%,#f1d590 69%,#64421e 84%,#d8b56e) 10; outline:1px solid #ebcd86; outline-offset:3px; box-shadow:0 8px 14px #0009,inset 0 0 14px #000; background:#1f1715; }
.catalog-palace .composer-portrait::before { content:'❧ ◆ ❧'; position:absolute; z-index:1; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap; color:#ebc97c; font:22px/1 Georgia,serif; text-shadow:0 2px 2px #26130a; pointer-events:none; }
.catalog-palace .composer-portrait::after { content:''; position:absolute; inset:4px; border:1px solid #f6d98b80; box-shadow:inset 0 0 12px #0007; pointer-events:none; }
.catalog-palace .composer-body { padding:24px; }
.catalog-palace .composer-name { font-weight:600; font-size:23px; }
.catalog-palace .composer-english { color:#756149; font-style:italic; }
.catalog-palace .composer-years { color:#6e4c32; letter-spacing:.08em; }
.catalog-palace .composer-country,.catalog-palace .muted { color:#6d6051; }
.catalog-palace .composer-tag { color:#58432d; border-color:#9a794c66; border-radius:0; background:#fff8e740; }
.catalog-palace .era-tags .composer-tag { color:#664725; border-color:#997242; }
.catalog-palace .composer-open { color:#704320; border-top:1px solid #a9865055; display:block; padding-top:14px; margin-top:18px; font-family:'Yu Mincho',serif; }
.catalog-palace .composer-card-detail { padding:38px; gap:30px 48px; }
.catalog-palace .composer-card-detail .composer-visual { align-self:start; padding-bottom:32px; border:1px solid #a37a43; }
.catalog-palace .composer-card-detail .composer-body { padding:16px 0; }
.catalog-palace .composer-card-detail .composer-name { font-size:clamp(28px,4vw,44px); }
.catalog-palace .composer-extra { gap:32px; align-items:start; }
.catalog-palace .composer-extra section { border-top:4px double #ad8b56; padding-top:12px; }
.catalog-palace .composer-extra h2 { color:#57351f; }
.catalog-palace .composer-extra h3 { color:#6f4426; margin-top:26px; border-bottom:1px solid #aa875044; padding-bottom:8px; }
.catalog-palace .composer-extra .eyebrow { color:#78512b; }
.catalog-palace .composer-extra a { color:#754b22; }
.catalog-palace .composer-extra li { margin-bottom:12px; }
.catalog-palace .skill-meter i { border-color:#967143; }
.catalog-palace .skill-meter .filled { background:linear-gradient(#c6a76b,#8d632f); }
.catalog-palace .composer-notes { line-height:2; }
.catalog-palace .composer-credits { font-size:13px; }
.role-rates { display:grid; grid-template-columns:1fr auto; gap:6px 20px; font-size:14px; }
.role-rates dt,.role-rates dd { margin:0; padding:5px 0; border-bottom:1px solid #a9865033; }
.role-rates dd { font-variant-numeric:tabular-nums; font-weight:bold; }
@media(max-width:820px) { .catalog-palace .composer-card-detail { padding:24px; gap:24px; } }
@media(max-width:560px) { .catalog-palace .catalog-shell { padding:0 16px; } .catalog-palace .catalog-hero { padding:32px 0; } .catalog-palace .catalog-tools { padding:16px; } .catalog-palace .composer-card-detail { padding:18px; } .catalog-palace .composer-card-detail .composer-visual { max-width:340px; } }

/* Shared game typography for reading and controls; retain Mincho titles. */
.catalog-palace { font-family:'M PLUS 2','Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif; }
.catalog-palace .catalog-brand small,
.catalog-palace .eyebrow,
.catalog-palace .card-number,
.catalog-palace .collection-seal,
.catalog-palace .composer-open { font-family:inherit; }
.catalog-palace .composer-english { font-family:inherit; font-style:normal; }