/* Rewards use the viewport, not the much shorter battle canvas. */
#result-overlay.battle-result { position:fixed;inset:0;z-index:25;padding:20px;overflow:visible;touch-action:none;overscroll-behavior:contain;background:#050c14cc; }
body:has(#result-overlay:not([hidden])),body:has(.reward-modal) { overflow:hidden; }
#result-overlay .result-card { width:min(670px,100%);max-width:670px;max-height:none;overflow:visible;padding:24px;text-align:left;border-color:#b99b68;background:radial-gradient(ellipse at top,#36352df5,#141e26fc 70%); }
.reward-heading { display:flex;align-items:center;gap:16px;margin-bottom:20px; }
.reward-emblem { display:grid;place-items:center;flex:0 0 54px;height:54px;color:#e3c78e;font-size:36px;border:1px solid #9c835866;background:#332f2688; }
#result-overlay .reward-heading h3 { font-size:28px;letter-spacing:3px;line-height:1.3; }
#result-overlay .reward-heading p { margin:5px 0 0;color:#b9b6aa;font-size:12px;line-height:1.5; }
.reward-heading p>span { margin-left:10px;color:#929d9e; }
.reward-body { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px; }
.reward-summary,.reward-equipment { min-width:0; }
.reward-totals { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.reward-totals>div { text-align:center;padding:12px 5px;background:#101a22;border:1px solid #6d675244;min-width:0; }
.reward-totals span { display:block;font-size:11px;color:#9eaaa7;margin-bottom:7px; }
.reward-totals b { font:22px Georgia,serif;color:#e3c68c;overflow-wrap:anywhere; }
.reward-metrics { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #77735b44; }
.reward-metrics span { text-align:center;font-size:10px;color:#91a4a7; }
.reward-metrics b { display:block;font:18px Georgia,serif;color:#b8c4bd;margin-bottom:5px; }
.reward-equipment h4,.offline-loot-heading h4 { font-size:13px;margin:0 0 10px;color:#cabb9d; }
.reward-item { display:flex;align-items:center;gap:11px;width:100%;min-width:0;text-align:left;white-space:normal;padding:12px;background:linear-gradient(125deg,#2e3132,#182128);border:1px solid var(--q);border-radius:3px; }
.reward-item-icon { display:grid;place-items:center;flex:0 0 48px;height:48px;border:1px solid var(--q);background:#101720; }
.reward-item-icon img { width:40px;height:40px; }
.reward-item-copy { display:flex;flex-direction:column;gap:5px;min-width:0; }
.reward-item-copy b { color:var(--q);font-size:14px;line-height:1.4;overflow-wrap:anywhere; }
.reward-item-copy small { color:#b0b7ae;font-size:10px;line-height:1.4; }
.reward-item-copy>span { color:#95aba3;font-size:10px;line-height:1.4; }
#result-overlay .reward-empty,.reward-modal .reward-empty { margin:0;padding:15px;background:#101a2255;font-size:12px;color:#9aaba8;line-height:1.7; }
#result-overlay .reward-recruits { margin-top:9px;color:#d8bd86;font-size:11px;line-height:1.5; }
#result-overlay .reward-reason { margin:0;font-size:13px;line-height:1.7;color:#c1b3a2; }
.reward-footer { margin-top:20px;padding-top:16px;border-top:1px solid #9a8a6544;text-align:center; }
.reward-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.reward-actions button { min-width:0;min-height:38px;padding:9px 6px;font-size:12px; }
#next-countdown { display:block;min-height:16px;font-size:10px;margin-top:9px;color:#97a29e; }
/* Offline equipment can be paged horizontally; the dialog never becomes a scroll panel. */
.modal.reward-modal { width:min(670px,calc(100vw - 32px));max-height:none;overflow:visible;padding:24px; }
.reward-modal .modal-head { margin-bottom:12px;padding-bottom:12px; }
.reward-modal .offline-overview { display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 12px;font-size:12px;line-height:1.5;margin:0 0 16px; }
.offline-overview span { color:#8faaa7; }
.offline-loot-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 10px; }
.offline-loot-heading h4 { margin:0; }
.offline-loot-heading small { font-size:10px; }
.offline-reward-items { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.offline-reward-items .reward-empty { grid-column:1/-1; }
.offline-reward-footer { display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #9a8a6544;margin-top:20px;padding-top:15px; }
.loot-pagination { display:flex;align-items:center;gap:10px; }
.loot-pagination button { width:30px;min-height:30px;padding:2px;font-size:20px; }
.loot-pagination small { font-size:11px;white-space:nowrap; }
.offline-reward-footer>.primary { font-size:12px; }
@media(max-width:500px) {
 #result-overlay.battle-result { padding:16px; }
 #result-overlay .result-card,.modal.reward-modal { padding:18px; }
 .reward-heading { gap:12px;margin-bottom:16px; }.reward-emblem { flex-basis:42px;height:42px;font-size:28px; }
 #result-overlay .reward-heading h3 { font-size:24px; }
 .reward-heading p>span { display:block;margin-left:0; }
 .reward-body { grid-template-columns:1fr;gap:16px; }
 .reward-totals>div { padding:10px 4px; }.reward-totals b { font-size:22px; }
 .reward-metrics { padding-top:8px;margin-top:10px; }.reward-metrics b { display:inline;font-size:14px;margin-right:5px; }
 .reward-equipment h4 { margin-bottom:8px; }
 .reward-item { padding:10px;gap:10px; }
 .reward-footer { margin-top:16px;padding-top:12px; }.reward-actions { gap:6px; }
 .reward-actions button { padding:8px 3px;font-size:11px; }
 .offline-reward-items { grid-template-columns:1fr;gap:8px; }
 .offline-reward-items .reward-item-icon { flex-basis:38px;height:38px; }.offline-reward-items .reward-item-icon img { width:32px;height:32px; }
 .offline-reward-items .reward-item-copy { gap:2px; }.offline-reward-items .reward-item-copy b { font-size:12px; }
 .offline-reward-footer { gap:8px; }.loot-pagination { gap:6px; }
}
@media(max-height:560px) and (orientation:landscape) {
 #result-overlay.battle-result { padding:12px; }
 #result-overlay .result-card,.modal.reward-modal { padding:14px 18px;max-width:670px; }
 .reward-heading { gap:12px;margin-bottom:12px; }.reward-emblem { flex-basis:38px;height:38px;font-size:28px; }
 #result-overlay .reward-heading h3 { font-size:23px;letter-spacing:2px; }
 #result-overlay .reward-heading p { margin-top:3px;font-size:11px; }
 .reward-body { gap:16px; }.reward-totals>div { padding:8px 4px; }.reward-totals span { margin-bottom:4px;font-size:10px; }.reward-totals b { font-size:19px; }
 .reward-metrics { margin-top:8px;padding-top:7px; }.reward-metrics b { display:inline;font-size:14px;margin-right:5px; }
 .reward-item { padding:9px;gap:9px; }.reward-item-icon { flex-basis:40px;height:40px; }.reward-item-icon img { width:34px;height:34px; }.reward-item-copy { gap:3px; }.reward-item-copy b { font-size:12px; }
 .reward-footer { margin-top:12px;padding-top:10px; }.reward-actions button { min-height:32px;padding:6px; }.reward-footer #next-countdown { margin-top:5px;font-size:9px; }
 .reward-modal .modal-head { padding-bottom:8px;margin-bottom:8px; }.reward-modal .modal-head h2 { font-size:21px; }
 .reward-modal .offline-overview { margin-bottom:10px;font-size:11px; }
 .offline-loot-heading { margin:12px 0 8px; }.offline-reward-footer { margin-top:12px;padding-top:10px; }
}
/* Avoid canvas/backdrop compositing artifacts while the viewport changes. */
#result-overlay.battle-result,#modal-root:has(.reward-modal) { backdrop-filter:none; }
#modal-root:has(.reward-modal) { touch-action:none;overscroll-behavior:contain; }
@media(max-height:360px) and (orientation:landscape) {
 .modal.reward-modal { padding:10px 14px; }
 .reward-modal .modal-head { padding-bottom:5px;margin-bottom:5px; }
 .reward-modal .offline-overview { margin-bottom:6px; }
 .reward-modal .offline-loot-heading { margin:8px 0 5px; }
 .reward-modal .offline-reward-footer { margin-top:8px;padding-top:6px; }
 .reward-modal .offline-reward-footer>.primary { min-height:30px;padding:5px 10px; }
}