/* dex4.html layout, scoped to the collection dialog. */
.game-modal.collection-modal { position:fixed; display:flex; flex-direction:column; gap:0; width:1120px; height:620px; padding:12px 14px; border:3px solid #b08f58; border-radius:14px; background:linear-gradient(#23332f,#1b2825); color:#e9e3d2; font-family:"Malgun Gothic",sans-serif; box-shadow:none; }
.collection-modal:not([open]) { display:none; }
.collection-modal .modal-heading { flex:0 0 auto; min-height:37px; gap:4px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #44544f; background:transparent; box-shadow:none; }
.collection-modal .modal-heading h2 { flex:1; margin:0; font-size:19px; font-weight:normal; color:#ffe0a1; }
.game-modal.collection-modal button { box-shadow:none; text-shadow:none; min-width:0; min-height:0; margin:0; padding:6px 10px; font-size:14px; line-height:normal; font-weight:normal; border:1px solid #3c4c47; background:#22322e; color:#e9e3d2; }
.collection-modal .modal-heading .close-modal,.game-modal.collection-modal .collection-claim-all { flex:0 0 auto; width:auto; height:auto; min-height:28px; border:1px solid #8a7550; border-radius:8px; padding:5px 12px; font-size:12px; background:#22322e; }
.collection-toolbar { display:flex; align-items:center; }
.game-modal.collection-modal .collection-claim-all { border-color:#e9c27a; background:#4a3d22; color:#ffe0a1; }
.collection-modal button:disabled { cursor:default; opacity:1; }
.collection-modal .collection-claim-all:disabled { opacity:.45; }
.collection-main-tabs { display:flex; gap:4px; flex-shrink:0; margin-bottom:8px; }
.game-modal.collection-modal .collection-main-tab { min-width:0; padding:6px 22px; font-size:14px; border-radius:8px 8px 0 0; border:1px solid #3c4c47; border-bottom:none; color:#a9b3ad; }
.collection-modal .collection-main-tab[aria-selected=true] { background:#2f4440; color:#ffe0a1; border-color:#b08f58; }
.collection-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff5a5a; margin-left:5px; vertical-align:middle; }
.collection-content { flex:1; min-width:0; min-height:0; overflow:hidden; }
.collection-content > .bestiary-body { height:100%; min-width:0; grid-template-columns:156px minmax(0,1fr) minmax(220px,248px); gap:12px; }
.collection-scroll { overflow-y:auto; overflow-x:hidden; }
.collection-overview { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; }
.collection-summary,.collection-backgrounds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; flex-shrink:0; }
.game-modal.collection-modal .collection-summary-card { display:flex; flex-direction:column; text-align:left; gap:0; border:none; border-radius:9px; background:#22322e; padding:10px; font-size:13px; }
.collection-summary-card strong { font-size:22px; font-weight:normal; }
.collection-summary-card strong small { font-size:13px; }
.collection-summary-card > small { margin:4px 0 8px; font-size:11px; color:#a9b3ad; }
.collection-modal .bestiary-progress { appearance:none; display:block; width:100%; height:5px; margin:4px 0 0; border:none; border-radius:3px; background:#3a4a46; accent-color:#9be89b; }
.collection-modal progress::-webkit-progress-bar { border-radius:3px; background:#3a4a46; }
.collection-modal progress::-webkit-progress-value { border-radius:3px; background:#9be89b; }
.collection-modal progress::-moz-progress-bar { border-radius:3px; background:#9be89b; }
.collection-modal .hard-progress { accent-color:#ff9d6b; }
.collection-modal .hard-progress::-webkit-progress-value { background:#ff9d6b; }
.collection-modal .hard-progress::-moz-progress-bar { background:#ff9d6b; }
.collection-overview > h3 { font-size:13px; font-weight:normal; color:#ffe0a1; margin:12px 0 5px; }
.collection-reward-list { min-height:38px; overflow-y:auto; flex-shrink:1; }
.collection-reward-row { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; gap:12px; background:#22322e; border-radius:6px; padding:6px 9px; margin-bottom:4px; font-size:12px; }
.collection-reward-value { display:grid; grid-template-columns:minmax(0,1fr) auto; min-width:0; align-items:start; gap:8px; }
.collection-backgrounds { grid-template-columns:repeat(4,minmax(0,1fr)); }
.collection-background-card { display:flex; flex-direction:column; border-radius:9px; background:#22322e; padding:10px; color:#a9b3ad; font-size:12px; }
.collection-background-card small { font-size:12px; }
.collection-modal .bestiary-tabs { display:flex; flex-direction:column; gap:5px; overflow-y:auto; }
.game-modal.collection-modal .bestiary-tab { display:grid; grid-template-columns:minmax(0,1fr) auto; flex-shrink:0; gap:0; padding:5px 8px; border-radius:8px; font-size:12px; color:#e9e3d2; background:#22322e; }
.collection-modal .bestiary-tab[aria-selected=true] { border-color:#e9c27a; background:#3a4430; box-shadow:none; }
.collection-modal .bestiary-tab-count,.collection-modal .bestiary-tab small { color:#a9b3ad; font-size:12px; }
.collection-mode-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px; margin-bottom:6px; flex-shrink:0; font-size:14px; }
.collection-mode-title { min-width:0; overflow-wrap:anywhere; line-height:1.5; }
.collection-mode-row[data-mode=hard] .collection-mode-title { color:#ff9d6b; font-size:12px; }
.collection-mode-chips { display:flex; align-items:center; flex-shrink:0; gap:3px; font-size:12px; color:#a9b3ad; }
.game-modal.collection-modal .collection-chip { display:inline-block; flex-shrink:0; min-width:40px; min-height:0; padding:2px 4px; font-size:11px; text-align:center; border-radius:6px; border:1px solid #555; color:#888; background:#262b2a; }
.collection-modal .collection-chip[data-ready=true] { border-color:#e9c27a; color:#ffe0a1; background:#4a3d22; }
.collection-modal .collection-chip[data-claimed=true] { border-color:#4fa85f; color:#9be89b; background:#1f3a28; }
.game-modal.collection-modal .collection-reward-value .collection-chip { border-radius:8px; padding:5px 12px; font-size:12px; }
.collection-modal .bestiary-grid { grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:92px; flex:1; align-content:start; gap:5px; padding:0; scrollbar-gutter:auto; }
.game-modal.collection-modal .bestiary-cell { position:relative; border:1px solid #3c4c47; background:#22322e; border-radius:8px; padding:0; }
.collection-modal .bestiary-cell[data-boss=true] { border:1px solid #c9a24b; background:#22322e; }
.collection-modal .bestiary-cell[aria-pressed=true] { border-color:#e9c27a; outline:none; background:#22322e; }
.collection-modal .bestiary-number { font-size:10px; color:#e9c27a; line-height:14px; margin-top:2px; }
.collection-modal .bestiary-art { width:58px; height:58px; flex:0 0 58px; background:none; }
.collection-modal .bestiary-cell-name { font-size:11px; line-height:16px; }
.collection-cell-badges { position:absolute; top:3px; right:4px; display:flex; gap:2px; font-size:10px; }
.normal-done { color:#9be89b; }
.hard-done,.collection-hard { color:#ff9d6b; }
.collection-missing { color:#d77; }
.collection-ready { color:#f2cf4a; }
.collection-muted { color:#a9b3ad; }
.collection-note { color:#a9b3ad; font-size:12px; margin:6px 0 0; flex-shrink:0; }
.collection-modal .bestiary-detail { background:#1f2d2a; border:1px solid #3c4c47; border-radius:10px; padding:10px; text-align:left; overflow-y:auto; font-size:12px; }
.collection-modal .bestiary-detail .bestiary-art-large { width:150px; height:150px; margin:0 auto; }
.collection-modal .bestiary-detail h3 { margin:4px 0; font-size:17px; font-weight:normal; line-height:normal; color:#f3ead2; }
.collection-modal .bestiary-detail h4 { margin:8px 0 2px; font-size:12px; font-weight:normal; color:#ffe0a1; }
.collection-modal .bestiary-detail p { display:block; margin:4px 0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.collection-achievement { display:flex; gap:5px; font-size:12px; }
.collection-achievement > span + span::before { content:'· '; color:#e9e3d2; }
.collection-receipt { flex-shrink:0; min-width:0; max-height:70px; overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; font-size:12px; line-height:1.5; color:#f8dc9b; }
.collection-receipt:empty { display:none; }
.collection-receipt p { margin:3px 0; }
.collection-equipment-heading { display:flex; justify-content:space-between; align-items:center; gap:4px; margin-bottom:6px; flex-shrink:0; font-size:14px; }
.collection-progress-chip { display:inline-flex; align-items:center; gap:4px; border:1px solid #6b6048; border-radius:7px; padding:3px 9px; font-size:11px; background:#262f2c; color:#cfd6d1; }
.collection-modal .collection-weapon-tab,.collection-modal .collection-record-tab { margin-top:10px; }
.collection-equipment-grid { display:grid; grid-template-columns:70px repeat(2,minmax(0,1fr)); gap:5px; align-content:start; align-items:center; min-height:0; overflow-y:auto; font-size:11px; }
.collection-equipment-grid > b { font-size:11px; font-weight:normal; color:#a9b3ad; }
.collection-region-label { display:flex; align-items:center; gap:2px; }
.game-modal.collection-modal .collection-region-label .collection-chip { min-width:20px; padding:2px; }
.game-modal.collection-modal .collection-gear-cell { display:flex; align-items:center; min-width:0; height:44px; gap:6px; padding:0 6px; border:1px solid #3c4c47; border-radius:7px; text-align:left; font-size:11px; }
.collection-modal .collection-gear-cell[aria-pressed=true] { border-color:#e9c27a; }
.collection-gear-cell[data-known=false] { opacity:.45; }
.collection-gear-icon { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.collection-equipment-art { display:block; width:120px; max-width:100%; height:120px; margin:0 auto 4px; object-fit:contain; }
.collection-modal[data-collection-view=weapons] .collection-equipment-art { width:110px; height:110px; }
.collection-modal[data-collection-view=equipment] .bestiary-detail h3,.collection-modal[data-collection-view=weapons] .bestiary-detail h3,.collection-modal[data-collection-view=adventure] .bestiary-detail h3,.collection-modal .bestiary-detail .collection-muted { text-align:center; }
.collection-modal[data-collection-view=adventure] .bestiary-detail .bestiary-art-large { width:140px; height:140px; }
.collection-silhouette { filter:brightness(0) opacity(.35); }
.weapon-history { grid-template-columns:60px repeat(4,minmax(0,1fr)); text-align:center; }
.collection-modal .weapon-history .collection-gear-cell { height:62px; flex-direction:column; justify-content:center; gap:0; }
.weapon-history .collection-gear-icon { width:44px; height:44px; }
.collection-first-clears { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; flex-shrink:0; }
.collection-card { min-width:0; flex-shrink:0; background:#22322e; border-radius:9px; padding:10px; font-size:13px; }
.collection-card h4 { color:#ffe0a1; margin:0 0 4px; font-size:13px; font-weight:normal; }
.collection-locked { opacity:.45; }
.collection-all-clears { margin-top:8px; }
.collection-clear-marks { display:flex; gap:5px; }
.difficulty-toggle { display:flex; gap:8px; align-items:center; }
.difficulty-toggle button[aria-pressed=true] { border-color:#f6d080; background:#675332; color:#ffecba; }
.difficulty-toggle small { max-width:230px; font-size:11px; }
.collection-shortcuts { display:flex; flex-shrink:0; gap:8px; }
#bestiary-button { position:relative; }
#bestiary-button[data-reward=true]::after { content:''; width:7px; height:7px; border-radius:50%; background:#f26767; position:absolute; right:4px; top:4px; }
.coupon-modal { width:680px; height:430px; }
.collection-modal[data-density=compact] .bestiary-body,.collection-modal[data-density=tight] .bestiary-body { grid-template-columns:125px minmax(0,1fr) 180px; gap:8px; }
.collection-modal[data-density=compact] .bestiary-detail .bestiary-art-large,.collection-modal[data-density=tight] .bestiary-detail .bestiary-art-large { width:95px; height:95px; }
.collection-modal[data-density=compact] .collection-mode-row,.collection-modal[data-density=tight] .collection-mode-row,.collection-modal[data-density=compact] .collection-equipment-heading,.collection-modal[data-density=tight] .collection-equipment-heading { flex-wrap:wrap; font-size:12px; }
.collection-modal[data-stack=true] .bestiary-body { grid-template-columns:84px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 130px; gap:5px; }
.collection-modal[data-stack=true] .bestiary-detail { grid-column:1 / -1; }
.collection-modal[data-stack=true] .bestiary-detail .bestiary-art-large { width:94px; height:94px; float:left; margin:0 10px 0 0; }
.collection-modal[data-stack=true] .bestiary-detail h4,.collection-modal[data-stack=true] .bestiary-detail p { display:inline; margin-right:5px; }
.collection-modal[data-stack=true] .bestiary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.collection-modal[data-stack=true] .collection-main-tab { flex:1; padding:5px; font-size:12px; }
.collection-modal[data-stack=true] .collection-mode-row,.collection-modal[data-stack=true] .collection-equipment-heading { flex-wrap:wrap; font-size:12px; }
.collection-modal[data-stack=true] .collection-mode-chips { font-size:11px; }
.collection-modal[data-stack=true] .collection-mode-chips .collection-chip { min-width:34px; }
.collection-modal[data-stack=true] .collection-summary { gap:5px; }
.collection-modal[data-stack=true] .collection-summary-card { padding:5px; font-size:12px; }
.collection-modal[data-stack=true] .collection-backgrounds { grid-template-columns:repeat(2,minmax(0,1fr)); }
.collection-modal[data-stack=true] .collection-reward-row { align-items:start; }
.collection-modal[data-stack=true] .collection-reward-value { flex-wrap:wrap; }
.collection-modal[data-stack=true] .collection-equipment-grid { grid-template-columns:50px repeat(2,minmax(0,1fr)); font-size:10px; }
.collection-modal[data-stack=true] .weapon-history { grid-template-columns:34px repeat(4,minmax(0,1fr)); }
.collection-modal[data-stack=true] .collection-gear-cell { flex-direction:column; font-size:10px; height:64px; }
.collection-modal[data-stack=true] .collection-gear-icon { width:29px; height:29px; }
.collection-modal[data-stack=true] .bestiary-tab { grid-template-columns:minmax(0,1fr); padding:3px 4px; font-size:10px; }
.collection-modal[data-stack=true] .bestiary-tab > span:first-child { white-space:nowrap; }
.collection-modal[data-stack=true] .bestiary-tab small,.collection-modal[data-stack=true] .bestiary-tab-count { justify-self:end; font-size:10px; }
.game-modal.title-customization { height:570px; }
.title-customization .title-options { min-height:0; }
.title-customization .title-options:first-of-type .title-choices { grid-template-columns:repeat(7,minmax(0,1fr)); }

/* The game uses one logical stage on phones; reward text has real block flow. */
.collection-modal .bestiary-panel,.collection-modal .bestiary-detail,.collection-modal .bestiary-tabs { min-width:0; min-height:0; }
.collection-modal .bestiary-detail { overflow-x:hidden; overflow-wrap:anywhere; }
.collection-modal .bestiary-panel.collection-scroll { gap:10px; padding-right:4px; scrollbar-gutter:stable; }
.collection-modal .collection-card h4 { line-height:1.5; }
.collection-clear-title { margin:0 0 10px; font-size:14px; line-height:1.5; }
.collection-reward-block { min-width:0; }
.collection-reward-block + .collection-reward-block { border-top:1px solid #3c4c47; margin-top:12px; padding-top:12px; }
.collection-reward-heading { display:flex; justify-content:space-between; align-items:start; gap:10px; min-width:0; }
.collection-reward-heading h4 { flex:1; min-width:0; margin:0; }
.collection-reward-items { display:grid; gap:4px; list-style:none; min-width:0; margin:6px 0 0; padding:0; color:#c9d2c9; font-size:13px; line-height:1.5; }
.collection-reward-items li { min-width:0; overflow-wrap:anywhere; }
.collection-reward-value > .collection-reward-items { margin:0; }
.collection-reward-row > span:first-child { min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.collection-threshold-rewards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; flex-shrink:0; margin-top:10px; }
.collection-threshold-rewards .collection-reward-block + .collection-reward-block { border:0; padding:0; margin:0; }
.game-modal.collection-modal .collection-chip { line-height:1.4; white-space:nowrap; }
.collection-background-card { min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.collection-modal[data-stage=true] .collection-first-clears .collection-note { line-height:1.5; }