.modal.modal-offline-progress .modal-box{width:500px;max-width:calc(100vw - 24px);height:330px;max-height:calc(100dvh - 24px);padding:12px;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:linear-gradient(140deg,#26364a,#152335);border:1px solid #7d96ad99;border-radius:8px}.modal-offline-progress .modal-head{flex:none;height:20px;margin-bottom:8px}.modal-offline-progress #modal-title{font-size:14px}.modal-offline-progress #modal-body{flex:1;min-height:0;overflow:hidden;display:flex}.offline-progress{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.offp-zone{display:flex;align-items:center;gap:7px;height:34px;flex:none;padding:6px 8px;border:1px solid #b49b514f;border-radius:5px;background:#8f78411c}.offp-zone>i{width:15px;height:15px;color:#ddca8e;flex:none}.offp-zone strong{font-size:11px;color:#e3d4ac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.offp-zone>span{margin-left:auto;color:#e4ca7b;font-size:9px;white-space:nowrap}.offp-info{padding:1px;border:0;background:none;color:#a8bdd0;width:17px;height:17px;flex:none}.offp-zone svg,.offp-metric svg{width:100%;height:100%}.offp-metrics{height:94px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,44px);gap:6px;flex:none}.offp-metric{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid #8197ae33;border-radius:5px;background:#101e2c66;min-width:0}.offp-metric>i{width:25px;height:25px;padding:5px;border-radius:5px;background:#96b6d512;color:#bbcbdc;flex:none}.offp-metric small{font-size:8px;font-weight:900;letter-spacing:.6px;color:#a6b9cf;text-transform:uppercase}.offp-metric strong{display:block;font-size:17px;font-weight:900;line-height:1.15;margin-top:2px;color:#e7edf5}.offp-metric.exp strong{color:#d3a3e9}.offp-metric.money strong{color:#e9ce83;font-size:14px}.offp-metric.levels strong{color:#a4d3b5}.offp-rewards{height:90px;flex:none;position:relative;border-bottom:1px solid #b8ad906b}.offp-rewards h4{display:flex;align-items:center;justify-content:center;gap:9px;height:17px;margin:0 0 6px;font:800 10px/1 'Multiverse Nunito Sans',Arial;color:#e0d5b5;letter-spacing:1.1px;text-transform:uppercase}.offp-rewards h4:before,.offp-rewards h4:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#c0b39199)}.offp-rewards h4:after{transform:rotate(180deg)}.offp-reward-list{display:flex;align-items:flex-start;justify-content:center;gap:10px;height:66px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:2px 3px 0}.offp-reward-list.many{justify-content:flex-start}.offp-reward{position:relative;width:50px;flex:none;display:flex;flex-direction:column;align-items:center}.offp-reward .nto-cell{width:47px!important;height:47px!important;min-width:47px;padding:3px!important;border-radius:0!important;position:relative;cursor:pointer;overflow:visible!important;flex:none;isolation:isolate}.offp-reward .nto-cell:before{content:'';position:absolute;inset:-3px;border:1px solid #c3baa0;pointer-events:none;z-index:-1}.offp-reward .nto-cell>.icon-item{width:39px!important;height:39px!important;object-fit:contain;image-rendering:auto}.offp-quantity{position:absolute;top:39px;left:50%;transform:translateX(-50%);z-index:5;min-width:34px;height:14px;display:grid;place-items:center;padding:0 5px;background:#14202c;border:1px solid #d3c7a8;color:#f5f4eb;font:900 10px/1 'Multiverse Nunito Sans',Arial;white-space:nowrap;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 50%,calc(100% - 4px) 100%,4px 100%,0 50%);pointer-events:none}.offp-rarity{color:var(--reward-color);font-size:8px;line-height:10px;margin-top:7px;max-width:56px;white-space:nowrap;text-align:center}.offp-reward .bag-rank{top:1px!important;left:1px!important;width:12px!important;height:18px!important}.offp-unknown{border-color:#a1adbb!important}.offp-empty{font-size:11px;color:#a0b7cd;align-self:center;text-align:center}.offp-finish{margin-top:auto;display:flex;flex-direction:column;position:relative;flex:none}.offp-continue{height:30px;min-height:30px;width:100%;padding:5px!important;font-size:11px}.offp-lost{position:absolute;right:3px;bottom:34px;font-size:8px;color:#e2ba83;background:#142335;padding:2px 4px;border-radius:2px}.offp-details{font-size:12px;line-height:1.6;color:#b5cada}.offp-details p{margin:7px 0}.offp-details strong{color:#e0e8f2}.offp-details>small{display:block;margin-top:10px}.offp-details>.btn{margin-top:15px;width:100%}.modal.modal-offline-details .modal-box{width:min(460px,calc(100vw - 24px));background:linear-gradient(#26384c,#162538);border-color:#8199ad}@media(max-width:600px){.modal.modal-offline-progress .modal-box{padding:10px;height:330px}.offp-zone{padding:6px;gap:5px}.offp-zone strong{font-size:10px}.offp-zone>span{font-size:8px}.offp-metric strong{font-size:16px}.offp-metric.money strong{font-size:13px}.offp-reward-list{justify-content:flex-start}.offp-reward-list:not(.many):has(.offp-reward:nth-child(-n+4):last-child){justify-content:center}.offp-reward-list{gap:8px}}

/* Two rows of rewards, with pages only when both rows are full. */
.offp-reward-list{display:grid;grid-template-columns:repeat(var(--reward-columns,8),50px);grid-auto-rows:64px;justify-content:center!important;align-content:start;gap:6px 8px!important;height:auto;min-height:66px;overflow:visible;padding:3px 3px 0;scrollbar-width:none}
.offp-rewards{height:auto;min-height:90px;padding-bottom:2px}
.modal.modal-offline-progress.offp-two-rows .modal-box{height:400px}
.offp-two-rows .offp-reward-list{height:136px}
.offp-pages{display:flex;justify-content:center;align-items:center;gap:10px;height:22px;margin-top:2px;color:#b5cada;font-size:10px}
.offp-pages[hidden]{display:none}
.offp-pages button{width:25px;height:21px;display:grid;place-items:center;padding:0;border:1px solid #8197ae66;border-radius:3px;background:#26384c;color:#e3d4ac;font-size:18px;cursor:pointer}
.offp-pages button:disabled{opacity:.3;cursor:default}
.modal.modal-offline-progress.offp-paginated .modal-box{height:424px}
.offp-empty{grid-column:1/-1;min-height:57px;display:grid;place-items:center}
@media(max-height:450px){.modal-offline-progress #modal-body{overflow-y:auto;overflow-x:hidden}}