.app-page .medal-inspect { display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:inherit; cursor:zoom-in; }
.app-page .medal-inspect:not(.medal-display-slot):not(.level-medal-inspect) { width:100%; height:100%; }
.app-page .medal-inspect:focus-visible { outline:2px solid #00dc83; outline-offset:4px; border-radius:4px; }
.app-page .level-medal-inspect { flex:0 1 96px; width:96px; min-width:0; }
.medal-view-open { overflow:hidden; }
.app-page .medal-viewer { width:min(820px,calc(100% - 28px)); box-sizing:border-box; max-height:calc(100dvh - 28px); margin:auto; padding:34px 24px 24px; overflow:auto; border:1px solid #37545c; border-top:3px solid #e8bd54; border-radius:12px; background:linear-gradient(140deg,#10202b,#060e17); color:#edf3f6; box-shadow:0 24px 100px #000b; }
.medal-viewer::backdrop { background:#02080de0; backdrop-filter:blur(6px); }
.medal-viewer-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:center; }
.medal-viewer-close { position:absolute; top:10px; right:10px; width:32px; height:32px; padding:0; border:1px solid #40535e; border-radius:5px; background:#0d1a24; color:#e2edf5; font:inherit; font-size:22px; cursor:pointer; }
.medal-viewer-stage { display:flex; align-items:center; justify-content:center; height:390px; overflow:hidden; border:1px solid #2d424d; border-radius:8px; background:radial-gradient(ellipse at center,#b18a2e20,transparent 70%),#061018; touch-action:none; user-select:none; }
.medal-viewer-art { display:flex; align-items:center; justify-content:center; transform-origin:center; pointer-events:none; }
.app-page .medal-viewer-art .award-emblem { width:min(280px,65vw); max-width:none; flex:none; filter:none; }
.app-page .medal-viewer-art .award-custom-kills { background-image:url('/assets/kill-medals-detail-v1.webp'); }
.app-page .medal-viewer-art .award-custom-pistols { background-image:url('/assets/pistol-medals-detail-v2.webp'); }
.app-page .medal-viewer-art .award-custom-wins { background-image:url('/assets/wins-medals-detail-v2.webp'); }
.app-page .medal-viewer-art .award-custom-kdr { background-image:url('/assets/kdr-medals-detail-v1.webp'); }
.app-page .medal-viewer-art .xp-level-medal { width:min(250px,60vw); max-width:none; flex:none; }
.app-page .medal-viewer-art .award-ribbon { width:90%; height:46px; }
.app-page .medal-viewer-art .award-medallion { display:block; width:100%; height:auto; margin-top:-8px; }
.medal-viewer-stage.can-drag { cursor:grab; }
.medal-viewer-stage.is-dragging { cursor:grabbing; }
.medal-viewer-controls { display:flex; align-items:center; gap:9px; margin-top:14px; }
.medal-viewer-controls input { min-width:40px; width:100%; accent-color:#e8bd54; }
.medal-viewer-controls button { flex-shrink:0; border:1px solid #37545c; padding:5px 9px; border-radius:4px; background:#101f2b; color:#e5eef5; font:inherit; cursor:pointer; }
.medal-viewer-controls button:disabled { opacity:.4; cursor:default; }
.medal-viewer-controls output { min-width:42px; color:#edce7d; font-size:.75rem; }
.medal-viewer-controls [data-zoom-reset] { padding:7px; font-size:.7rem; }
.medal-viewer-hint { margin:10px 0 0; color:#8da5b6; font-size:.72rem; line-height:1.5; }
.medal-viewer-copy .medal-viewer-eyebrow { color:#e8bd54; font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.medal-viewer-copy h2 { margin:9px 0 26px; color:#fff; font-size:1.7rem; line-height:1.2; overflow-wrap:anywhere; }
.medal-viewer-copy h3 { margin:22px 0 8px; color:#00dc83; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.medal-viewer-copy p { color:#b9cad6; font-size:.9rem; line-height:1.7; }
.medal-viewer-edit { margin-top:20px; padding:11px 14px; border:1px solid #00dc83; border-radius:5px; color:#00dc83; background:transparent; font:inherit; font-size:.8rem; cursor:pointer; }
.medal-viewer-edit[hidden] { display:none; }
.medal-viewer button:focus-visible { outline:2px solid #00dc83; outline-offset:3px; }
@media(max-width:620px) { .app-page .medal-viewer { padding:40px 16px 20px; } .medal-viewer-layout { grid-template-columns:1fr; gap:20px; } .medal-viewer-stage { height:320px; } .medal-viewer-copy h2 { margin-bottom:14px; font-size:1.4rem; } }