/* CODI.GG upgrade screen (owner: upgrade) */
.upg { gap: 6px; align-items: center; }
.upg-title { margin: 0; font-size: 26px; text-align: center; line-height: 1.05; }
.upg-cards { width: 100%; max-width: 250px; display: flex; align-items: center; gap: 4px; }
.upg-slot { flex: 1; min-width: 0; }
.upg-tag { font-family: var(--f-impact); font-size: 12px; letter-spacing: 1px; color: var(--dim); text-align: center; margin-bottom: 3px; }
.upg-tag-t { color: var(--gold); }
.upg-arrow { flex: none; font-size: 22px; color: var(--green); animation: pulse 1s ease-in-out infinite; }
.upg-dialwrap { position: relative; width: min(70vw, 34dvh, 300px); transition: width .4s; aspect-ratio: 1; flex: none; }
.upg-dial { width: 100%; height: 100%; overflow: visible; }
.upg-ring { fill: #0b0e16; stroke: #26304a; stroke-width: 14; }
.upg-arc { fill: none; stroke: var(--green); stroke-width: 14; stroke-linecap: butt; filter: drop-shadow(0 0 5px var(--green)); }
.upg-nl { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.upg-np { fill: #ff2d55; stroke: #fff; stroke-width: 1.5; }
.upg-hub { fill: #fff; stroke: #000; stroke-width: 2; }
.upg-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; padding-top: 14%; }
.upg-pct { font-size: 40px; line-height: 1; color: var(--green); }
.upg-sub { font-size: 12px; color: var(--dim); }
.upg-wasted { position: absolute; left: 50%; top: 80%; width: 70%; transform: translate(-50%, -50%) rotate(-6deg); animation: pop .5s cubic-bezier(.2,1.6,.4,1); filter: drop-shadow(0 4px 8px #000); pointer-events: none; }
.upg-wasted[hidden], .upg-after[hidden] { display: none; }
.upg.lost .upg-dial { filter: grayscale(.7) brightness(.7); }
.upg.lost .upg-center { visibility: hidden; }
.upg-msg { margin: 0; text-align: center; font-size: 15px; line-height: 1.15; max-width: 360px; }
.upg-close { display: inline-block; font-size: 22px; color: var(--gold); }
.upg-after { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: pop .4s ease-out; }
.upg-pepe { position: absolute; right: -16%; bottom: 6%; width: 30%; height: auto; animation: pop .5s .3s both; filter: drop-shadow(0 3px 6px #000); pointer-events: none; }
.upg-pepe[hidden] { display: none; }
.upg.lost .upg-dialwrap { width: min(60vw, 27dvh, 250px); }
/* popup */
.upg-modal { position: relative; gap: 6px; max-height: 94dvh; overflow-y: auto; }
.upg-bonus { font-size: 26px; line-height: 1.05; }
.upg-free { font-family: var(--f-impact); font-size: 20px; letter-spacing: 1px; }
.upg-pic { width: 46%; max-width: 150px; }
.upg-line { margin: 0; font-size: 16px; }
.upg-keep { margin: 0; font-size: 16px; color: var(--green); }
.upg-x { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--dim); font-size: 30px; line-height: 1; padding: 0; cursor: pointer; }
.upg-modal .btn { min-width: 0; }