/* Engraved enamel medals in a quiet display case. Artwork remains sharp at full size. */
html body #rewards .badge-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
html body #rewards .badge{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 18px 20px;gap:9px;min-width:0;border:1px solid #c7b592;border-radius:8px;background:radial-gradient(ellipse at 50% 25%,#fff7df 0,transparent 65%),linear-gradient(155deg,#f5ede0,#e8dfd2);box-shadow:inset 0 0 0 4px #ffffff40,inset 0 0 0 5px #a48a5a30,0 6px 15px #52412d12;color:#65533f}
html body #rewards .badge::before{content:'';position:absolute;inset:10px;pointer-events:none;border:1px solid #b69a6630;border-radius:3px;background:linear-gradient(45deg,transparent 48%,#aa8b4220 49%,transparent 51%) 0 0/22px 22px;opacity:.4;z-index:-1}
html body #rewards .badge::after{content:none}
html body #rewards .badge.earned{border-color:#b58b48;background:radial-gradient(ellipse at 50% 24%,#fff5d1 0,transparent 68%),linear-gradient(150deg,#f5e8ce,#eaddc5);box-shadow:inset 0 0 0 4px #fff5d266,inset 0 0 0 5px #bf985c66,0 7px 20px #946b2420}
html body #rewards .badge .badge-inspect{position:relative;display:grid;place-items:center;width:min(200px,100%);height:auto;aspect-ratio:1;margin:0;min-height:0;max-width:none;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;opacity:1;transform:none;cursor:zoom-in;transition:transform .25s ease,filter .25s ease;-webkit-tap-highlight-color:transparent}
html body #rewards .badge .badge-art{display:block;width:100%;height:100%;object-fit:contain;opacity:.9;transform:none;filter:saturate(.55) brightness(.94);transition:filter .25s ease}
html body #rewards .badge.earned .badge-art{opacity:1;filter:drop-shadow(0 3px 7px #6e471c33)}
html body #rewards .badge .badge-inspect:hover,html body #rewards .badge .badge-inspect:focus-visible{transform:translateY(-4px) scale(1.035)}
html body #rewards .badge .badge-inspect:hover .badge-art,html body #rewards .badge .badge-inspect:focus-visible .badge-art{filter:saturate(1) drop-shadow(0 5px 9px #79562244)}
html body #rewards .badge .badge-inspect:focus-visible{outline:2px solid #a27c39;outline-offset:3px;border-radius:8px}
html body #rewards .badge.earned .badge-inspect::before{content:'';position:absolute;inset:16%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ebc16666,transparent 68%);animation:badge-halo 5s ease-in-out infinite;pointer-events:none}
html body #rewards .badge.earned .badge-inspect::after{content:'✦';position:absolute;right:15%;top:14%;color:#e0b14f;text-shadow:0 0 8px #ffd584;font-size:16px;animation:badge-glint 4s ease-in-out infinite;pointer-events:none}
html body #rewards .badge:nth-child(2n) .badge-inspect::after{animation-delay:-2s}
html body #rewards .badge .badge-category{display:inline-block;color:#806439;font-size:11px;letter-spacing:.15em;border:1px solid #b3986555;border-radius:20px;padding:3px 10px;background:#fff7e455}
html body #rewards .badge>strong{font-family:'WenxuanKai',KaiTi,STKaiti,serif;font-size:23px;font-weight:600;line-height:1.4;color:#54402b;letter-spacing:.05em}
html body #rewards .badge>span:not(.badge-category):not(.badge-status){font-size:13px;line-height:1.65;color:#766551;min-height:21px}
html body #rewards .badge progress{margin-top:4px;width:100%;height:5px;accent-color:#b69453;border:0;border-radius:5px;overflow:hidden;background:#c5b89e55}
html body #rewards .badge progress::-webkit-progress-bar{background:#b4a58633;border-radius:5px}
html body #rewards .badge progress::-webkit-progress-value{background:linear-gradient(90deg,#a57e3f,#ebcf88);border-radius:5px}
html body #rewards .badge .badge-status{font-size:12px;font-weight:500;color:#847663;line-height:1.6}
html body #rewards .badge.earned .badge-status{color:#926a23;font-weight:700}
html[data-theme=dark] body #rewards .badge{background:radial-gradient(ellipse at 50% 20%,#59496366,transparent 68%),linear-gradient(145deg,#3e3548,#2d2936)!important;border-color:#867352!important;box-shadow:inset 0 0 0 4px #edddab08,inset 0 0 0 5px #c3a86a28,0 6px 16px #18141b33!important}
html[data-theme=dark] body #rewards .badge.earned{background:radial-gradient(ellipse at 50% 24%,#94734544,transparent 67%),linear-gradient(145deg,#514151,#332d3d)!important;border-color:#d2b276!important;box-shadow:inset 0 0 0 4px #e9c87f14,inset 0 0 0 5px #e2bf7355,0 6px 18px #15101944!important}
html[data-theme=dark] body #rewards .badge>strong{color:#f8e9c5!important}
html[data-theme=dark] body #rewards .badge>span:not(.badge-category):not(.badge-status),html[data-theme=dark] body #rewards .badge .badge-status{color:#d5c9bd!important}
html[data-theme=dark] body #rewards .badge .badge-category{color:#e2c997!important;border-color:#d4b77e66;background:#a9833b14}
html[data-theme=dark] body #rewards .badge.earned .badge-status{color:#ffe1a0!important}
html body dialog.badge-detail-dialog{box-sizing:border-box;padding:0;width:min(780px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);overflow:auto;border:2px solid #b69b66!important;border-radius:12px;background:linear-gradient(145deg,#f1e6d2,#fff5e5)!important;box-shadow:0 28px 100px #14111b99!important;color:#554329!important}
html body dialog.badge-detail-dialog[open]{display:grid;grid-template-columns:1.08fr 1fr;align-items:center}
html body dialog.badge-detail-dialog::backdrop{background:#17101fd4;backdrop-filter:blur(6px)}
html body .badge-detail-close{position:absolute;right:12px;top:10px;z-index:3;width:36px;height:36px;padding:0;border:1px solid #cfb680!important;border-radius:50%;background:#f7ecd9!important;color:#685132!important;font-size:24px;line-height:1;cursor:pointer}
html body .badge-detail-stage{position:relative;min-width:0;padding:26px 18px;background:radial-gradient(ellipse at center,#b8946d55,transparent 68%),linear-gradient(135deg,#413644,#201c2c);overflow:hidden;display:grid;place-items:center;align-self:stretch}
html body .badge-detail-stage::before{content:'';position:absolute;inset:15px;border:1px solid #d4bb7b66;pointer-events:none}
html body .badge-detail-stage img{position:relative;display:block;width:100%;height:auto;max-width:360px;filter:drop-shadow(0 10px 12px #100e17aa)}
html body .badge-detail-copy{padding:36px 30px}
html body .badge-detail-kicker{font-size:12px;letter-spacing:.13em;color:#916c37}
html body .badge-detail-copy h2{font-family:'WenxuanKai',KaiTi,serif;font-size:34px;font-weight:500;line-height:1.4;letter-spacing:.04em;margin:12px 0}
html body .badge-detail-status{font-size:14px;line-height:1.8;color:#8d672e}
html body .badge-detail-rule{padding-top:18px;border-top:1px solid #bfa67955;font-size:15px;line-height:1.9;color:#6b5845}
html body .badge-detail-copy progress{display:block;width:100%;height:7px;accent-color:#aa8545;margin:20px 0 10px}
html body .badge-detail-copy small{font-size:12px;color:#877158;line-height:1.7}
html[data-theme=dark] body dialog.badge-detail-dialog{background:linear-gradient(145deg,#514453,#302a39)!important;color:#f5e6c9!important;border-color:#bea574!important}
html[data-theme=dark] body .badge-detail-close{background:#665361!important;color:#fff0ca!important;border-color:#cfb680!important}
html[data-theme=dark] body .badge-detail-kicker,html[data-theme=dark] body .badge-detail-status{color:#eac98c}
html[data-theme=dark] body .badge-detail-rule,html[data-theme=dark] body .badge-detail-copy small{color:#ddd0bd}
@keyframes badge-halo{0%,100%{opacity:.4;transform:scale(.95)}50%{opacity:.9;transform:scale(1.07)}}
@keyframes badge-glint{0%,100%{opacity:.3;transform:scale(.7)}45%{opacity:1;transform:scale(1.2)}}
@media(max-width:1000px){html body #rewards .badge-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:640px){html body #rewards .badge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}html body #rewards .badge{padding:12px 10px 16px;gap:7px}html body #rewards .badge>strong{font-size:20px}html body #rewards .badge .badge-inspect{width:min(160px,100%)}html body #rewards .badge>span:not(.badge-category):not(.badge-status){font-size:12px;min-height:38px}html body dialog.badge-detail-dialog[open]{grid-template-columns:1fr}html body .badge-detail-stage{padding:18px;max-height:310px}html body .badge-detail-stage img{width:min(270px,100%)}html body .badge-detail-copy{padding:18px 24px 24px}html body .badge-detail-copy h2{font-size:29px;margin:6px 0}html body .badge-detail-rule{padding-top:12px}html body .badge-detail-copy progress{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html body #rewards .badge .badge-inspect,html body #rewards .badge .badge-art{transition:none}html body #rewards .badge .badge-inspect::before,html body #rewards .badge .badge-inspect::after{animation:none!important}}
