#dex-dialog { box-sizing:border-box; width:min(680px,calc(100vw - 24px)); height:min(720px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); max-width:calc(100vw - 24px); padding:16px; border:3px solid var(--ui-panel-dex-dex-dialog-border); border-radius:12px; color:var(--ui-panel-dex-dex-dialog-text); background:var(--ui-panel-dex-dex-dialog-background); overflow:hidden; }
#dex-dialog[open] { display:flex; flex-direction:column; gap:10px; }
#dex-dialog::backdrop { background:var(--ui-panel-dex-dex-dialog-background-2); }
#dex-dialog .dex-head { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; flex:none; }
#dex-dialog h2 { margin:0; font-size:20px; }
#dex-dialog button { min-height:44px; min-width:44px; padding:8px 12px; font:inherit; color:inherit; border:1px solid var(--ui-panel-dex-dex-dialog-border-2); border-radius:7px; background:var(--ui-panel-dex-dex-dialog-background-3); }
#dex-dialog button:focus-visible,#dex-dialog .dex-list:focus-visible { outline:3px solid var(--ui-panel-dex-dex-dialog-dex-dialog-dex-list-focus); outline-offset:-3px; }
#dex-dialog .dex-tabs { display:flex; gap:8px; flex:none; }
#dex-dialog .dex-tabs button { flex:1; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
#dex-dialog .dex-tabs [aria-selected="true"] { background:var(--ui-panel-dex-dex-dialog-dex-tabs-true-background); border-color:var(--ui-panel-dex-dex-dialog-dex-tabs-true-border-color); }
#dex-dialog .dex-page { display:flex; flex-direction:column; min-height:0; flex:1; gap:8px; }
#dex-dialog p { margin:0; }
#dex-dialog .dex-summary { color:var(--ui-panel-dex-dex-dialog-dex-summary-text); font-weight:700; }
#dex-dialog .dex-help { font-size:12px; line-height:1.5; color:var(--ui-panel-dex-dex-dialog-dex-help-text); }
#dex-dialog .dex-milestones { margin:0; padding:0; list-style:none; font-size:12px; line-height:1.5; }
#dex-dialog .dex-milestones .complete { color:var(--c-success-dex-dex-dialog-dex-milestones-complete-text); }
#dex-dialog .dex-list { overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; flex:1; padding-right:4px; display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
#dex-dialog .dex-card { display:flex; align-items:center; gap:12px; min-height:80px; padding:12px; border:1px solid var(--ui-panel-dex-dex-dialog-dex-card-border); border-radius:8px; background:var(--ui-panel-dex-dex-dialog-dex-card-background); min-width:0; }
#dex-dialog .dex-copy { min-width:0; overflow-wrap:anywhere; }
#dex-dialog h3 { margin:0 0 6px; font-size:15px; }
#dex-dialog .dex-copy p { font-size:12px; line-height:1.5; }
#dex-dialog .item-icon { width:40px; height:40px; flex:none; }
#dex-dialog .unknown { color:var(--ui-panel-dex-dex-dialog-unknown-text); background:var(--ui-panel-dex-dex-dialog-unknown-background); }
#dex-dialog .dex-skill { display:grid; grid-template-columns:1fr auto; gap:5px 8px; font-size:13px; padding:10px; border:1px solid var(--ui-panel-line); border-radius:8px; background:var(--ui-panel-soft); }
#dex-dialog .dex-skill-value { color:var(--ui-panel-muted); }
#dex-dialog .dex-progress { display:block; width:100%; height:6px; border:0; border-radius:4px; overflow:hidden; background:var(--ui-panel-soft); color:var(--ui-panel-acc); accent-color:var(--ui-panel-acc); }
#dex-dialog .dex-progress::-webkit-progress-bar { background:var(--ui-panel-line); }
#dex-dialog .dex-progress::-webkit-progress-value { background:var(--ui-panel-acc); }
#dex-dialog .dex-skill .dex-progress { grid-column:1/-1; }
#dex-dialog .dex-milestones { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#dex-dialog .dex-milestones li { min-width:0; }
#dex-dialog .dex-milestones .dex-progress { margin-top:4px; }
#dex-dialog .dex-list { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:max-content; }
#dex-dialog .dex-card { display:flex; flex-direction:column; justify-content:flex-start; gap:8px; padding:10px 6px; text-align:center; }
#dex-dialog .dex-copy { width:100%; }
#dex-dialog h3 { font-size:13px; margin:0 0 4px; }
#dex-dialog .dex-copy p { font-size:11px; line-height:1.45; }
#dex-dialog .dex-silhouette { filter:brightness(0); opacity:.55; }
#dex-dialog .dex-no-picture { display:grid; place-items:center; width:40px; height:40px; }
#dex-dialog .dex-unknown-label { font-weight:700; }
#dex-dialog .dex-hint { color:var(--ui-panel-muted); }
#dex-dialog .dex-card[data-rarity="rare"] { border-color:var(--c-rarity-play-ui-item-icon-rare-shadow); }
#dex-dialog .dex-card[data-rarity="unique"] { border-color:var(--c-rarity-play-ui-item-icon-unique-shadow); }
#dex-dialog .dex-card[data-rarity="epic"] { border-color:var(--c-rarity-play-ui-item-icon-epic-shadow); }
#dex-dialog .dex-card[data-rarity="divine"] { border-color:var(--c-rarity-play-ui-item-icon-divine-shadow); }
@media(max-width:600px) {
 #dex-dialog { padding:12px; }
 #dex-dialog .dex-head { gap:6px; }
 #dex-dialog h2 { font-size:15px; }
 #dex-dialog button { padding:6px; }
 #dex-dialog .dex-tabs { gap:4px; }
 #dex-dialog .dex-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
 #dex-dialog .dex-card { padding:6px 4px; gap:4px; }
 #dex-dialog .item-icon { width:32px; height:32px; }
 #dex-dialog .dex-milestones { font-size:11px; }
}
@media(orientation:landscape) and (max-height:500px) {
 #dex-dialog { padding:10px; }
 #dex-dialog .dex-head h2 { font-size:17px; }
 #dex-dialog .dex-page { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto minmax(0,1fr); gap:4px 12px; }
 #dex-dialog .dex-skill { grid-column:1; grid-row:1; padding:4px; }
 #dex-dialog .dex-summary { grid-column:2; grid-row:1; align-self:center; }
 #dex-dialog .dex-help { grid-column:2; grid-row:2; font-size:11px; }
 #dex-dialog .dex-milestones { grid-column:1; grid-row:2; font-size:11px; }
 #dex-dialog .dex-list { grid-column:1/-1; grid-row:3; grid-template-columns:repeat(5,minmax(0,1fr)); }
}