.medal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(84 * var(--ui)),1fr));gap:calc(22 * var(--ui)) calc(8 * var(--ui));padding:calc(22 * var(--ui)) calc(12 * var(--ui))}.medal-empty{padding:calc(22 * var(--ui)) calc(16 * var(--ui));text-align:center;color:var(--text-dim);font-size:calc(12.5 * var(--ui));line-height:1.4}.medal-slot{position:relative;display:flex;justify-content:center}.medal-pin{position:absolute;top:calc(-2 * var(--ui));right:calc(6 * var(--ui));width:calc(20 * var(--ui));height:calc(20 * var(--ui));display:grid;place-items:center;border-radius:50%;background:#2e2408eb;border:1px solid rgba(255,206,74,.6);color:#ffce4a;z-index:6;pointer-events:none}.medal-pin .icon{width:60%;height:60%}.medal-badge{display:flex;flex-direction:column;align-items:center;gap:calc(10 * var(--ui));text-align:center}.medal{--face: 64;--depth: 9;--edges: 40;position:relative;width:calc(var(--face) * var(--ui));height:calc(var(--face) * var(--ui));perspective:640px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;contain:layout paint style}.medal img{-webkit-user-drag:none;-khtml-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}.medal:before{content:"";position:absolute;left:12%;right:12%;bottom:1%;height:22%;z-index:-1;background:radial-gradient(ellipse at center,#00000080,#0000 72%);pointer-events:none}.medal[data-spin="1"]{cursor:grab}.medal.grabbing{cursor:grabbing}.medal-coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;--core-scale: calc(var(--depth) / var(--face))}.medal-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 calc(1.5 * var(--ui)) calc(2 * var(--ui)) #ffffff73,inset 0 calc(-3 * var(--ui)) calc(6 * var(--ui)) #0000008c}.medal-front{transform:translateZ(calc(var(--depth) * var(--ui) / 2))}.medal-back{transform:rotateY(180deg) translateZ(calc(var(--depth) * var(--ui) / 2))}.medal-field{position:absolute;inset:calc(7 * var(--ui));z-index:1;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--accent, #6a7484) 34%,#10141b),#090c11 80%);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 calc(3 * var(--ui)) calc(6 * var(--ui)) #0000008c,inset 0 calc(-2 * var(--ui)) calc(4 * var(--ui)) color-mix(in srgb,var(--accent, transparent) 22%,transparent)}.medal-edge{position:absolute;inset:calc(-1 * var(--ui));border-radius:50%;background:linear-gradient(180deg,#ffffff4d,#0006),var(--medal-edge, #7a4a1d);transform:translateZ(calc((var(--i) / (var(--edges) - 1) - .5) * var(--depth) * var(--ui) * .92))}.medal-core{position:absolute;inset:0;border-radius:calc(3 * var(--ui));background:linear-gradient(180deg,#ffffff38,#0000008c),var(--medal-edge, #7a4a1d);opacity:0;will-change:opacity}.medal-core-a{transform:rotateY(90deg) scaleX(var(--core-scale))}.medal-core-b{transform:rotateY(-90deg) scaleX(var(--core-scale))}.medal-face:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;background:radial-gradient(120% 78% at 30% 14%,#ffffff80,#fff0 52%);opacity:.45;pointer-events:none}.medal-sheen{position:absolute;inset:-45%;z-index:3;pointer-events:none;opacity:0;will-change:transform,opacity;transform:rotate(38deg);background:linear-gradient(90deg,#fff0 36%,#ffffff57 47%,#ffffff85,#ffffff57 53%,#fff0 64%)}.medal-glyph{position:relative;z-index:1;display:grid;place-items:center;width:64%;height:64%;color:#f4f7fc;filter:drop-shadow(0 calc(1.5 * var(--ui)) calc(1.5 * var(--ui)) rgba(0,0,0,.6))}.medal-glyph .badge-art{width:100%;height:100%}.medal-glyph .icon{width:92%;height:92%;stroke-width:2.1}.medal-emblem{position:relative;width:54%;height:54%;opacity:.4;filter:grayscale(1) brightness(1.6);pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.tier-bronze .medal-face{background:radial-gradient(circle at 36% 26%,#f0c089,#c4792f 46%,#8a4d18 72%,#4f2a0d);--banner: linear-gradient(180deg, #d68a3e, #8a4d18)}.tier-silver .medal-face{background:radial-gradient(circle at 36% 26%,#f4f7fb,#b7c0cd 46%,#7c8696 72%,#4a5260);--banner: linear-gradient(180deg, #c7d0db, #6f7a8b)}.tier-gold .medal-face{background:radial-gradient(circle at 36% 26%,#ffedb0,#ecc04a 44%,#b9851d 72%,#7a560f);--banner: linear-gradient(180deg, #f0c948, #a9781a)}.tier-platinum .medal-face{background:radial-gradient(circle at 36% 26%,#f6f9fd,#d2dbe6 44%,#9aa6b8 72%,#5f6b7d);--banner: linear-gradient(180deg, #dde4ee, #7e8a9c)}.tier-diamond .medal-face{background:radial-gradient(circle at 36% 24%,#eafaff,#9fe0ff 40%,#46a3e6 72%,#275fb8);--banner: linear-gradient(180deg, #7fd0ff, #2f74cc)}.tier-bronze{--medal-edge: #7e4a1c}.tier-silver{--medal-edge: #8b95a3}.tier-gold{--medal-edge: #a87c1f}.tier-platinum{--medal-edge: #99a4b5}.tier-diamond{--medal-edge: #2f7fc6}.shape-hex .medal-face,.shape-hex .medal-edge,.shape-hex .medal-field,.shape-hex .medal-core{clip-path:polygon(50% 1%,94% 25%,94% 75%,50% 99%,6% 75%,6% 25%)}.shape-shield .medal-face,.shape-shield .medal-edge,.shape-shield .medal-field,.shape-shield .medal-core{clip-path:polygon(50% 99%,8% 70%,8% 11%,50% 4%,92% 11%,92% 70%)}.shape-star .medal-face,.shape-star .medal-edge,.shape-star .medal-field,.shape-star .medal-core{clip-path:polygon(50% 2%,61% 35%,96% 35%,68% 57%,79% 95%,50% 72%,21% 95%,32% 57%,4% 35%,39% 35%)}.shape-gem .medal-face,.shape-gem .medal-edge,.shape-gem .medal-field,.shape-gem .medal-core{clip-path:polygon(22% 4%,78% 4%,98% 38%,50% 98%,2% 38%)}.shape-banner .medal-face,.shape-banner .medal-edge,.shape-banner .medal-field,.shape-banner .medal-core{clip-path:polygon(8% 3%,92% 3%,92% 78%,50% 98%,8% 78%)}.shape-star .medal-field,.shape-gem .medal-field{inset:27%;border-radius:50%;clip-path:none;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 calc(2 * var(--ui)) calc(5 * var(--ui)) #0009,inset 0 calc(-1 * var(--ui)) calc(3 * var(--ui)) color-mix(in srgb,var(--accent, transparent) 22%,transparent)}.shape-star .medal-glyph,.shape-gem .medal-glyph{width:62%;height:62%}.shape-star .medal-banner,.shape-gem .medal-banner,.shape-banner .medal-banner{bottom:calc(11 * var(--ui))}.medal-art-coin{--medal-edge: color-mix(in srgb, var(--accent, #6a7484) 45%, #15181e)}.medal-art-coin.rim-bronze{--rim-hi: #f3c98e;--rim-mid: #bd7a33;--rim-lo: #5e3411}.medal-art-coin.rim-silver{--rim-hi: #f6f9fd;--rim-mid: #aeb8c6;--rim-lo: #525c69}.medal-art-coin.rim-gold{--rim-hi: #ffe9a6;--rim-mid: #e3b43f;--rim-lo: #7e5810}.medal-art-coin.rim-platinum{--rim-hi: #fbfdff;--rim-mid: #c3ccd8;--rim-lo: #69727f}.medal-art-coin.rim-diamond{--rim-hi: #eef7fb;--rim-mid: #c4d3dd;--rim-lo: #5f6f7b}.medal-art-coin .medal-face{border-radius:0;overflow:visible;box-shadow:none}.medal-art-coin .medal-face:after{display:none}.medal-art-coin .medal-field{inset:0;border-radius:0;background:transparent;box-shadow:none;clip-path:none;overflow:visible}.medal-art{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.medal-art-coin .medal-edge,.medal-art-coin .medal-core{inset:0;border-radius:0;clip-path:none;background:linear-gradient(180deg,var(--rim-hi, #aeb8c6),var(--rim-mid, #7c8696) 46%,var(--rim-lo, #4a5260));-webkit-mask-image:var(--mask-url);mask-image:var(--mask-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.medal-emboss,.medal-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}.medal-shade{mix-blend-mode:multiply;opacity:.62}.medal-emboss{mix-blend-mode:screen;opacity:.75}.medal-fx{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.medal-art-sheen{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;-webkit-mask-image:var(--mask-url);mask-image:var(--mask-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.medal-art-coin .medal-sheen{background:linear-gradient(90deg,#fff0 38%,#ffffff1f 48%,#fff3,#ffffff1f 52%,#fff0 62%)}.medal-banner{position:absolute;left:50%;bottom:calc(7 * var(--ui));transform:translate(-50%) translateZ(calc(var(--depth) * var(--ui) / 2 + .6px));backface-visibility:hidden;-webkit-backface-visibility:hidden;min-width:calc(19 * var(--ui));height:calc(15 * var(--ui));padding:0 calc(5 * var(--ui));display:grid;place-items:center;border-radius:calc(7 * var(--ui));background:var(--banner, linear-gradient(180deg, #c8cdd6, #7c8696));color:#fff;font-size:calc(9.5 * var(--ui));font-weight:800;letter-spacing:.04em;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.55);box-shadow:0 calc(1 * var(--ui)) calc(2 * var(--ui)) #0000008c,inset 0 1px #ffffff80,inset 0 0 0 1px #00000047;z-index:4}.medal-banner-done .icon{width:calc(11 * var(--ui));height:calc(11 * var(--ui));stroke-width:3.2}.medal-flat{--depth: 0;perspective:none;container-type:size;filter:drop-shadow(0 calc(3 * var(--ui)) calc(5 * var(--ui)) rgba(0,0,0,.45))}.medal-flat:before{display:none}.medal-flat .medal-coin{transform-style:flat}.medal-png{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:transform .16s ease}.medal-flat[data-spin="1"]:hover .medal-png{transform:translateY(calc(-2 * var(--ui))) scale(1.07)}.medal-flat .medal-level{position:absolute;left:50%;bottom:-3cqmin;transform:translate(-50%);min-width:22cqmin;padding:2.5cqmin 7cqmin;border-radius:999px;background:linear-gradient(180deg,#2c2319,#14100a);border:2cqmin solid var(--lvl, #e6b94e);color:var(--lvl, #ffe6a6);font-size:22cqmin;font-weight:900;letter-spacing:.01em;line-height:1;text-align:center;text-shadow:0 .6cqmin 1cqmin rgba(0,0,0,.85);box-shadow:0 2cqmin 4cqmin #0000008c,inset 0 1cqmin 1.5cqmin #ffffff2e;pointer-events:none;z-index:4}.medal-flat.tier-bronze .medal-level{--lvl: #e0974a}.medal-flat.tier-silver .medal-level{--lvl: #d3dcea}.medal-flat.tier-gold .medal-level{--lvl: #f3cb4e}.medal-flat.tier-platinum .medal-level{--lvl: #bfe9fb}.medal-flat.tier-diamond .medal-level{--lvl: #84f0e2}.medal-flat[data-spin="1"]:hover .medal-level{transform:translate(-50%) translateY(calc(-2 * var(--ui))) scale(1.07)}.medal-badge.locked .medal-png{filter:brightness(.16) grayscale(1) contrast(1.1)}.badge-name{font-size:calc(10.5 * var(--ui));font-weight:600;color:var(--text-dim);line-height:1.2;max-width:calc(82 * var(--ui))}.badge-sub{margin-top:calc(-7 * var(--ui));font-size:calc(9.5 * var(--ui));font-weight:500;color:var(--text-faint);line-height:1.15}.medal-badge.locked .medal{--medal-edge: #0a0d12}.medal-badge.locked .medal-face{background:radial-gradient(circle at 36% 30%,#171b22,#090c11 72%);box-shadow:inset 0 1px 1px #ffffff0d,inset 0 calc(-2 * var(--ui)) calc(5 * var(--ui)) #0009}.medal-badge.locked .medal-face:after{opacity:0}.medal-badge.locked .medal-field{background:#05070a;box-shadow:inset 0 0 0 1px #ffffff0a,inset 0 calc(2 * var(--ui)) calc(5 * var(--ui)) #000000b3}.medal-badge.locked .medal-glyph{opacity:0}.medal-badge.locked .medal-sheen{display:none}.medal-badge.locked .badge-name{color:var(--text-faint)}.medal-lock{position:absolute;inset:0;display:grid;place-items:center;color:#ffffff57;pointer-events:none;z-index:5}.medal-lock .icon{width:calc(20 * var(--ui));height:calc(20 * var(--ui))}@media(prefers-reduced-motion:reduce){.medal-sheen{opacity:0!important}}