.award-popup { position:relative; display:flex; flex-direction:column; box-sizing:border-box; width:100%; max-width:350px; max-height:calc(100vh - 48px); overflow:hidden; border:1px solid rgba(229,198,139,.27); border-radius:22px; background:var(--surface,#1b2b35); color:var(--text,#f2eee5); box-shadow:0 24px 80px rgba(0,0,0,.4); text-align:center; animation:award-enter .22s ease-out; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.award-popup::before { content:''; position:absolute; z-index:1; top:0; left:33%; right:33%; height:1px; background:var(--accent,#e5c68b); }
.award-scroll { min-height:0; overflow-y:auto; padding:28px 22px 0; box-sizing:border-box; overscroll-behavior:contain; }
scroll-view.award-scroll { padding:0; }.award-scroll-content { padding:28px 22px 0; box-sizing:border-box; }
.award-popup .award-close { position:absolute; z-index:2; top:4px; right:4px; display:flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; padding:0; margin:0; border:0; background:transparent; color:var(--muted,#b1bfc6); font-size:25px; font-weight:300; }
.award-eyebrow { margin:0 20px 9px; color:var(--accent,#e5c68b); font-size:12px; letter-spacing:1.3px; line-height:1.6; }
.award-title { margin:0; color:var(--text,#f2eee5); font-size:23px; font-weight:600; line-height:1.4; letter-spacing:.5px; }
.award-count { margin:9px 0 0; color:var(--muted,#b1bfc6); font-size:13px; line-height:1.7; }.award-count text,.award-count strong { color:var(--accent,#e5c68b); font-size:16px; font-weight:600; }
.award-popup button { box-sizing:border-box; border:0; font-family:inherit; cursor:pointer; }.award-popup button::after { border:0; }
.award-popup .award-hero-art { display:block; width:164px; height:177px; min-height:0; padding:0; margin:17px auto 3px; background:transparent; }
.award-hero-art image,.award-hero-art img,.award-small-art image,.award-small-art img,.award-large-art image,.award-large-art img { display:block; width:100%; height:100%; object-fit:contain; }
.award-hero-name { margin:6px 0 4px; font-size:20px; font-weight:600; line-height:1.5; }.award-reason { margin:0; color:var(--muted,#b1bfc6); font-size:12px; line-height:1.8; overflow-wrap:anywhere; }.award-rank { color:var(--accent,#e5c68b); font-size:13px; }
.award-secondary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 0; padding-top:15px; border-top:1px solid rgba(177,191,198,.17); }.award-small { min-width:0; }
.award-small button { display:block; width:100%; min-height:44px; padding:0 0 4px; margin:0; background:transparent; color:var(--text,#f2eee5); }.award-small-art { display:block; height:95px; width:94px; margin:0 auto 5px; }.award-name { display:block; font-size:14px; font-weight:500; line-height:1.6; }
.award-dual .award-secondary { border:0; padding:0; margin:26px 0 24px; }.award-dual .award-small-art { height:153px; width:128px; margin:0 auto 10px; }.award-dual .award-name { font-size:16px; font-weight:600; margin-bottom:8px; }
.award-single .award-hero-art { width:187px; height:214px; margin-top:23px; }.award-single .award-hero-name { margin-top:12px; }
.award-message { margin:17px 0 0; color:var(--text,#f2eee5); font-size:13px; line-height:1.8; }.award-hint { margin:17px 0 0; color:var(--muted,#b1bfc6); font-size:12px; line-height:1.8; }
.award-actions { flex-shrink:0; padding:18px 22px 20px; }.award-popup .award-confirm { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin:0; padding:12px; border:1px solid var(--accent,#e5c68b); border-radius:12px; background:var(--accent,#e5c68b); color:var(--bg,#101c24); font-size:16px; font-weight:600; line-height:1.5; }
.award-popup .award-view { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin:3px 0 0; padding:6px; color:var(--muted,#b1bfc6); background:transparent; font-size:13px; line-height:1.5; }
.award-large-art { width:100%; height:300px; margin:18px auto 12px; }.award-detail .award-reason { font-size:13px; margin-top:12px; }.award-popup button:focus-visible { outline:2px solid var(--accent,#e5c68b); outline-offset:-3px; }.award-popup button:active { opacity:.78; }
@keyframes award-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:359px) { .award-title { font-size:21px; }.award-scroll,.award-scroll-content { padding:25px 18px 0; }scroll-view.award-scroll { padding:0; }.award-actions { padding:16px 18px 14px; }.award-hero-art { height:153px; width:144px; }.award-small-art { height:85px; width:84px; }.award-dual .award-small-art { width:110px; height:133px; } }
@media(max-height:640px) { .award-popup { max-height:calc(100vh - 32px); }.award-hero-art { height:130px; width:120px; }.award-single .award-hero-art { width:145px; height:165px; }.award-small-art { height:75px; width:75px; }.award-large-art { height:220px; } }
@media(prefers-reduced-motion:reduce) { .award-popup { animation:none; } }