#modal.reference-dialog{width:min(1020px,calc(100vw - 32px));max-width:none;height:min(900px,calc(100dvh - 32px));max-height:none;padding:0;overflow:hidden;border:1px solid #b38a46;border-radius:12px;background:#0c1e28;color:#eee5d0;font-family:Heebo,Arial,sans-serif}
#modal.reference-dialog>.modal-top{display:none}
#modal.reference-dialog #dialog-body{padding:0;height:100%}
.reference-panel{height:100%;display:flex;flex-direction:column;min-height:0}
#modal .ref-header{flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid #a885494d;background:#10252f}
#modal .ref-header h2{flex:1;margin:0;font-size:23px;text-align:center}
#modal .ref-header button{font:inherit;font-size:14px;min-height:40px;padding:8px 12px;color:#eac482;background:#0b1b24;border:1px solid #65716b;border-radius:5px}
#modal .ref-header .ref-clock{margin:0;width:100%;text-align:center;color:#f5c775;font-size:14px}
.ref-clock[hidden]{display:none}
.reference-panel .card.play-card.painted-card{padding:0;overflow:hidden;border-radius:4.5% / 3.1%}
.ref-body{overflow:auto;overscroll-behavior:contain;padding:24px;flex:1;min-height:0;scrollbar-gutter:stable}
.ref-lead{font-size:20px;line-height:1.7;max-width:740px;margin:0 auto 24px}
.ref-sections{max-width:800px;margin:auto}.ref-sections>details{border-top:1px solid #56707860;padding:12px 0}.ref-sections summary{cursor:pointer;padding:10px 0;font-size:19px;font-weight:700;color:#f0d69b}.ref-sections p,.ref-sections li{font-size:16px;line-height:1.8}.ref-sections details details{border-right:2px solid #a8854955;padding:0 18px;margin:14px 0}.ref-sections details details summary{font-size:16px}.ref-sections button{font:inherit;padding:10px;color:#edbb5f;background:#142e39;border:1px solid #8d754c;border-radius:5px}
.ref-example{display:flex;justify-content:center;align-items:center;gap:24px;padding:16px;background:#081720;border-radius:8px}.ref-example>div{width:180px;display:grid;gap:8px;text-align:center}.ref-example .play-card,.ref-card .play-card{display:block;position:relative;width:100%;height:auto;min-height:0;aspect-ratio:459/673;container-type:inline-size}.ref-example b{font-size:15px}.ref-example span:not(.play-card):not(.painted-face *){font-size:14px}.ref-caption{text-align:center}
.ref-types{display:grid;gap:10px;list-style:none;padding:0}.ref-types li{display:flex;align-items:center;gap:12px}.ref-types svg{width:28px;height:28px;flex:none}
.ref-equation{display:flex;direction:ltr;justify-content:center;align-items:center;gap:20px;background:#142e39;padding:20px;border:1px solid #846e45;border-radius:8px}.ref-equation span{direction:rtl;text-align:center;display:grid;font-size:14px}.ref-equation b{font-size:34px;color:#f1c775}.ref-equation i{font-style:normal;font-size:24px}
.ref-filters{max-width:800px;margin:0 auto 20px}.ref-filters label{display:block;margin-bottom:8px;font-size:14px}.ref-filters input{width:100%;box-sizing:border-box;padding:12px;font:inherit;color:#f3ecd9;background:#081820;border:1px solid #5b747b;border-radius:6px}.ref-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.ref-filter-row button,.ref-count-row button{display:flex;gap:6px;align-items:center;font:inherit;font-size:14px;min-height:40px;padding:8px 12px;background:#112832;border:1px solid #536d74;border-radius:5px;color:#c7d5d7}.ref-filter-row button[aria-pressed=true]{border-color:#edbb5f;background:#364035;color:#ffe2a0}.ref-filter-row svg{width:20px;height:20px}.ref-count-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0;color:#b5c6c9}.ref-count-row button{border:0;background:none;color:#edbb5f}
.ref-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.ref-grid .ref-card{display:block;padding:0;background:none;border:0;cursor:pointer;min-width:0;color:#e9e3d4;text-align:center;border-radius:8px}.ref-card-label{display:block;margin-top:8px;font-size:14px}.ref-card:focus-visible{outline:3px solid #edbb5f;outline-offset:6px}.ref-card:hover{filter:brightness(1.08)}.ref-empty{grid-column:1/-1;padding:30px;text-align:center}
#modal.reference-dialog .inspect-dossier{height:auto;min-height:0;grid-template-columns:250px minmax(0,1fr);padding:0;gap:28px}#modal.reference-dialog .inspect-stage{min-height:0;padding:12px;align-self:start}#modal.reference-dialog .inspect-card-host{width:220px;transform:none}#modal.reference-dialog .inspect-card-host .play-card{width:100%;height:auto;aspect-ratio:459/673}#modal.reference-dialog .inspect-body{height:auto;min-height:0;overflow:visible}#modal.reference-dialog .inspect-pane{height:auto;overflow:visible}#modal.reference-dialog .inspect-pane h2{font-size:28px}.ref-ability-example{border-right:3px solid #b58b46;background:#152d36;padding:12px 16px;margin-top:20px}.ref-ability-example h3{margin:0 0 6px;color:#eac482}.ref-ability-example p{margin:0;font-size:16px;line-height:1.7}
@media(max-width:700px){#modal.reference-dialog{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}#modal .ref-header{padding:10px 12px;gap:8px}#modal .ref-header h2{font-size:19px}#modal .ref-header button{font-size:12px;padding:6px 8px}.ref-body{padding:18px 14px;scrollbar-gutter:auto}.ref-lead{font-size:17px}.ref-sections summary{font-size:17px}.ref-example{gap:10px;padding:12px 8px}.ref-example>div{width:42%;font-size:12px}.ref-example b{font-size:13px}.ref-equation{gap:12px;padding:14px 8px}.ref-equation span{font-size:12px}.ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}.ref-filter-row{gap:6px}.ref-filter-row button{font-size:12px;padding:6px 8px}#modal.reference-dialog .inspect-dossier{grid-template-columns:1fr;gap:12px}#modal.reference-dialog .inspect-card-host{width:180px}#modal.reference-dialog .inspect-stage{display:flex;justify-content:center}.ref-types li{font-size:14px}}