/* =====================================================================================
   GeroGame meta screens + reward widgets (frontend-meta).
   leaderboard · shop · missions · profile · inbox · friends · daily · spin · levelup · achievements
   Uses tokens.css + app.css tokens only. Rarity / game accents are the only literal colors.
   ===================================================================================== */

:root {
  --r-common: #A9B4C8;
  --r-rare: #3DA9FF;
  --r-epic: #B05CFF;
  --r-legendary: #FFB300;
  --mk-card-bg: var(--card-sheen), var(--glass);
  --mk-white: #fff;
}
[data-theme="paper"] { --r-common: #7D88A0; }

/* ---------- shared keyframes ---------- */
@keyframes mk-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mk-bump-k { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes mk-shake-k { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@keyframes mk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mk-shine { 0% { transform: translateX(-120%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes mk-glowpulse { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes mk-rot { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mk-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes mk-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.mk-bump { animation: mk-bump-k .5s var(--ease-spring); }
.mk-shake { animation: mk-shake-k .45s ease; }

/* ---------- screen base ---------- */
/* root = the shell's .page scroll container (position:absolute, padded) — don't override its box */
.mscr { display: flex; flex-direction: column; gap: 14px; }
.mscr > * { flex-shrink: 0; min-width: 0; }
.mscr-title { font-family: var(--font-kdisplay); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0; letter-spacing: 0; }
.mscr-sub { margin: 3px 0 0; color: var(--fg-3); font-size: 13px; font-weight: 600; }
.mscr h2, .mscr h3, .mk-sheet h2, .mk-sheet h3 { margin: 0; }
.mscr p, .mk-sheet p { margin: 0; }
.mscr button { font-family: inherit; }
.btn.btn-xs { --d: 2px; min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: 10px; gap: 4px; }
.btn.busy { pointer-events: none; filter: saturate(.7) brightness(.92); }
.btn.busy::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: mk-spin .7s linear infinite; flex: none; }
.btn .cur { min-height: 26px; padding: 0 8px 0 4px; background: rgba(0, 0, 0, .14); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.btn .cur i { font-size: 15px; width: 18px; height: 18px; }
.btn .cur b { color: inherit !important; font-size: 13px; }
.btn.btn-gold .cur { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .45); }

/* ---------- empty / error ---------- */
.mk-empty { padding: 26px 12px 30px; }
.mk-empty .empty-emoji { animation: none; }
.mk-empty .mk-mascot { width: 128px; height: 128px; object-fit: contain; display: block; animation: mk-float 3.2s ease-in-out infinite; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.mk-empty p { font-weight: 800; font-size: 16px; color: var(--fg); }
.mk-empty p.mk-empty-sub { font-weight: 600; font-size: 13px; color: var(--fg-3); margin-top: -6px; }
.mk-empty .btn { margin-top: 6px; }

/* ---------- skeletons ---------- */
.mk-skel-list { display: grid; gap: 10px; }
.mk-skel-card.skeleton { width: 100% !important; height: 78px; border-radius: var(--radius-l); }
.sh-skel { grid-template-columns: 1fr 1fr; }
.sh-skel .mk-skel-card { height: 210px; }
.ms-skel-grid { grid-template-columns: repeat(3, 1fr); }
.ms-skel-grid .mk-skel-card { height: 128px; }

/* ---------- pull to refresh ---------- */
.mk-ptr { position: absolute; left: 50%; top: calc(var(--page-top, 66px) - 50px); width: 40px; height: 40px; margin-left: -20px; z-index: 6; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1);
  opacity: 0; pointer-events: none; transition: transform .3s var(--ease-spring), opacity .2s; }
.mk-ptr.drag { transition: none; }
.mk-ptr-ic { font-style: normal; font-size: 20px; font-weight: 900; color: var(--primary-2); display: inline-block; line-height: 1; }
.mk-ptr.arm .mk-ptr-ic { color: var(--accent); }
.mk-ptr.spin .mk-ptr-ic { animation: mk-spin .7s linear infinite; }
.mk-fly-anchor { position: fixed; top: calc(var(--safe-top) + 18px); left: 50%; width: 2px; height: 2px; pointer-events: none; }

/* ---------- segmented control (sliding) ---------- */
.mk-seg { position: relative; display: flex; padding: 4px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); isolation: isolate; }
.mk-seg-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: 14px; background: var(--grad-primary);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mk-seg.ready .mk-seg-ind { transition: transform .42s var(--ease-spring), width .42s var(--ease-spring); }
.mk-seg-btn { position: relative; z-index: 1; flex: 1; min-height: 40px; padding: 0 12px; border: 0; border-radius: 14px; background: none; cursor: pointer;
  color: var(--fg-2); font-weight: 800; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; transition: color .25s, transform .2s var(--ease-spring); }
.mk-seg-btn:active { transform: scale(.94); }
.mk-seg-btn.on { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.mk-seg-s { border-radius: 14px; padding: 3px; }
.mk-seg-s .mk-seg-ind { top: 3px; bottom: 3px; left: 3px; border-radius: 11px; }
.mk-seg-s .mk-seg-btn { min-height: 32px; font-size: 12.5px; padding: 0 10px; border-radius: 11px; }

/* ---------- ring / bar ---------- */
.mk-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.mk-ring svg { position: absolute; inset: 0; overflow: visible; }
.mk-ring-bar { transition: stroke-dashoffset 1.2s var(--ease-out); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)); }
.mk-ring-label { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.mk-bar { position: relative; height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.mk-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--bc, var(--primary)), color-mix(in srgb, var(--bc, var(--accent)) 55%, #fff));
  box-shadow: 0 0 12px color-mix(in srgb, var(--bc, var(--primary)) 60%, transparent); transition: width 1.1s var(--ease-out); }
.mk-bar-fill::before { content: ''; position: absolute; left: 4px; right: 4px; top: 2px; height: 35%; border-radius: 999px; background: rgba(255, 255, 255, .35); }
.mk-bar-fill::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: mk-shine 2.6s ease-in-out infinite; }
.mk-bar.full .mk-bar-fill { background: var(--grad-gold); box-shadow: 0 0 14px rgba(255, 180, 60, .65); }

/* ---------- title badge ---------- */
.mk-title { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px 0 8px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg); background: var(--glass-2); border: 1px solid var(--glass-border); }
.mk-title i { font-style: normal; font-size: 14px; line-height: 1; }
.mk-title.r-rare { background: color-mix(in srgb, var(--r-rare) 18%, transparent); border-color: color-mix(in srgb, var(--r-rare) 55%, transparent); }
.mk-title.r-epic { background: linear-gradient(135deg, color-mix(in srgb, var(--r-epic) 30%, transparent), color-mix(in srgb, #FF4D8D 22%, transparent)); border-color: color-mix(in srgb, var(--r-epic) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--r-epic) 35%, transparent); }
.mk-title.r-legendary { background: linear-gradient(135deg, #FFE27A, #FFB547 55%, #FF7A3C); color: #3A1E00; border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 16px rgba(255, 180, 60, .5); }

/* ---------- treasure chest (CSS drawn) ---------- */
.chest { --cw: 96px; position: relative; width: var(--cw); height: calc(var(--cw) * .9); flex: none; }
.chest .ch-glow { position: absolute; left: 50%; top: 50%; width: 170%; height: 170%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 90, .75) 0%, rgba(255, 170, 40, .25) 38%, transparent 66%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.chest .ch-rays { position: absolute; left: 50%; top: 40%; width: 230%; height: 230%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 140, .55) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 64%); mask: radial-gradient(circle, #000 18%, transparent 64%); transition: opacity .4s; }
.chest .ch-body { position: absolute; inset: 0; }
.chest .ch-base { position: absolute; left: 7%; right: 7%; bottom: 8%; height: 52%; border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #D98A3A 0%, #A9561C 60%, #7C3A10 100%); border: 3px solid #4E2408;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), inset 0 3px 0 rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .35); }
.chest .ch-lid { position: absolute; left: 4%; right: 4%; top: 8%; height: 40%; border-radius: 26px 26px 6px 6px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #F2A24C 0%, #C46A26 70%, #9A4A16 100%); border: 3px solid #4E2408;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .18); transition: transform .55s var(--ease-spring); z-index: 2; }
.chest .ch-band { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 18%; transform: translateX(-50%);
  background: linear-gradient(90deg, #B8860B, #FFE27A 45%, #FFC93C 60%, #B8860B); border-left: 2px solid #4E2408; border-right: 2px solid #4E2408; }
.chest .ch-lock { position: absolute; left: 50%; top: 40%; width: 22%; height: 22%; transform: translate(-50%, -30%); z-index: 3; border-radius: 6px;
  background: linear-gradient(180deg, #FFF1B0, #FFC93C 50%, #C9931A); border: 2.5px solid #4E2408; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transition: transform .4s var(--ease-spring), opacity .3s; }
.chest .ch-lock::after { content: ''; position: absolute; left: 50%; top: 48%; width: 22%; height: 34%; transform: translateX(-50%); border-radius: 2px; background: #4E2408; }
.chest .ch-shadow { position: absolute; left: 16%; right: 16%; bottom: 0; height: 9%; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(3px); }
.chest.ready { animation: chest-wiggle 1.8s ease-in-out infinite; cursor: pointer; }
.chest.ready .ch-body { animation: chest-hop-body 1.8s ease-in-out infinite; }
@keyframes chest-hop-body { 0%, 40%, 100% { transform: translateY(0) scale(1, 1); } 48% { transform: translateY(2px) scale(1.08, .9); } 56% { transform: translateY(-14px) scale(.96, 1.06); } 64% { transform: translateY(0) scale(1.06, .94); } 70% { transform: translateY(0) scale(1, 1); } }
.chest.ready .ch-glow { opacity: 1; animation: mk-glowpulse 1.4s ease-in-out infinite; }
.chest.opening { animation: chest-rattle .5s linear; }
.chest.open .ch-lid { transform: translateY(-34%) rotate(-24deg) translateX(-6%); }
.chest.open .ch-lock { opacity: 0; transform: translate(-50%, 20%) scale(.4); }
.chest.open .ch-glow, .chest.open .ch-rays { opacity: 1; }
.chest.open .ch-rays { animation: mk-rot 9s linear infinite; }
.chest.open .ch-base::before { content: ''; position: absolute; left: 10%; right: 10%; top: -6px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, #FFF6C8, #FFC93C 60%, transparent 72%); filter: blur(1px); }
.chest:not(.ready):not(.open) { filter: saturate(.75); }
@keyframes chest-wiggle { 0%, 60%, 100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-7deg) scale(1.06); } 72% { transform: rotate(6deg) scale(1.06); } 78% { transform: rotate(-4deg) scale(1.04); } 84% { transform: rotate(2deg) scale(1.02); } }
@keyframes chest-rattle { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-3px, 0) rotate(-5deg); } 30% { transform: translate(3px, -2px) rotate(5deg); } 45% { transform: translate(-3px, 0) rotate(-6deg) scale(1.05); } 60% { transform: translate(3px, -3px) rotate(6deg) scale(1.08); } 80% { transform: translate(0, -6px) scale(1.12); } }

/* =====================================================================================
   LEADERBOARD
   ===================================================================================== */
.scr-rank { --rk-c: var(--primary); }
.rk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.rk-head-r { display: flex; align-items: center; gap: 8px; }
.rk-reset { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-border);
  font-size: 12px; font-weight: 800; color: var(--fg-2); white-space: nowrap; }
.rk-reset i { font-style: normal; }
.rk-reset-t { font-variant-numeric: tabular-nums; }
.rk-refresh { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--glass-border); color: var(--fg); cursor: pointer;
  transition: transform .2s var(--ease-spring); }
.rk-refresh i { font-style: normal; font-size: 20px; font-weight: 900; line-height: 1; display: inline-block; }
.rk-refresh.pressed { transform: scale(.9); }
.rk-refresh.spin i { animation: mk-spin .8s linear infinite; }

.rk-games { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 4px var(--gutter, 16px) 8px; scroll-snap-type: x proximity; }
.rk-games::-webkit-scrollbar { display: none; }
.rk-gpill { --gc: var(--primary); flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 5px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--fg-2); font-weight: 800; font-size: 14px; white-space: nowrap;
  transition: transform .3s var(--ease-spring), background .25s, color .25s, box-shadow .25s; }
.rk-gpill-img, .rk-gpill-ic { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gc) 30%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 70%, transparent); }
.rk-gpill-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rk-gpill-img i { font-style: normal; font-size: 16px; }
.rk-gpill-img img + i { display: none; }
.rk-gpill-ic { font-size: 18px; }
.rk-gpill.pressed { transform: scale(.94); }
.rk-gpill.on { color: #fff; border-color: transparent; transform: translateY(-1px);
  background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 55%, #1A0B3A));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--gc) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rk-gpill.on .rk-gpill-img, .rk-gpill.on .rk-gpill-ic { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

.rk-filters { display: flex; gap: 8px; align-items: center; }
.rk-seg-period { flex: 1; }
.rk-seg-scope { flex: none; width: 128px; }

.rk-dailyinfo { display: none; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--radius-l);
  background: linear-gradient(135deg, color-mix(in srgb, #FFC93C 22%, transparent), color-mix(in srgb, var(--rk-c) 18%, transparent)), var(--glass);
  border: 1px solid color-mix(in srgb, #FFC93C 45%, transparent); }
.rk-dailyinfo.show { display: flex; animation: mk-in .4s var(--ease-spring); }
.rk-dailyinfo-ic { font-size: 26px; }
.rk-dailyinfo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk-dailyinfo b { font-size: 14px; font-weight: 800; }
.rk-dailyinfo small { font-size: 12px; color: var(--fg-2); }

.rk-body { min-height: 300px; }
.rk-content.enter .rk-podium { animation: mk-in .45s var(--ease-out); }
.rk-skel-pod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 10px; align-items: end; height: 220px; margin-bottom: 14px; }
.rk-skel-pod .skeleton { width: 100% !important; border-radius: 22px 22px 12px 12px; }
.rk-skel-pod .skeleton:nth-child(1) { height: 150px; }
.rk-skel-pod .skeleton:nth-child(2) { height: 200px; }
.rk-skel-pod .skeleton:nth-child(3) { height: 130px; }
.rk-skel { display: flex; flex-direction: column; gap: 8px; }
.rk-skel-row.skeleton { width: 100% !important; height: 64px; border-radius: 18px; }

/* podium */
.rk-podium { position: relative; display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 8px; align-items: end; padding-top: 34px; margin-bottom: 14px; }
.rk-podium::before { content: ''; position: absolute; left: 50%; top: 8%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--rk-c) 45%, transparent) 0%, transparent 65%); animation: mk-glowpulse 3s ease-in-out infinite; }
.rk-pod { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; cursor: pointer; transition: transform .25s var(--ease-spring); }
.rk-pod.pressed { transform: scale(.96); }
.rk-pod-av { position: relative; animation: pod-drop .7s var(--ease-spring) both; }
.rk-pod.p1 .rk-pod-av { animation-delay: .32s; }
.rk-pod.p2 .rk-pod-av { animation-delay: .2s; }
.rk-pod.p3 .rk-pod-av { animation-delay: .44s; }
.rk-pod-q { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 2px dashed var(--glass-border); color: var(--fg-3); font-family: var(--font-display); font-size: 20px; }
.rk-crown { position: absolute; left: 50%; top: -30px; transform: translateX(-50%) rotate(-8deg); font-size: 34px; z-index: 3; filter: drop-shadow(0 4px 8px rgba(255, 180, 0, .6)); animation: crown-bob 2.4s ease-in-out infinite; }
@keyframes crown-bob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-8deg); } 50% { transform: translateX(-50%) translateY(-4px) rotate(6deg); } }
.rk-pod-medal { position: absolute; right: -6px; bottom: -4px; z-index: 3; font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.rk-pod.p1 .avatar { box-shadow: 0 0 0 3px #FFD54A, 0 0 26px rgba(255, 201, 60, .7); }
.rk-pod.p2 .avatar { box-shadow: 0 0 0 3px #D7DEE8, 0 0 18px rgba(200, 215, 235, .45); }
.rk-pod.p3 .avatar { box-shadow: 0 0 0 3px #E39A62, 0 0 18px rgba(227, 154, 98, .45); }
.rk-pod-name { max-width: 100%; margin-top: 6px; padding: 0 4px; font-weight: 800; font-size: 13.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pod-score { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rk-pod.p1 .rk-pod-score { font-size: 16px; color: var(--gold); }
.rk-pod .rk-delta { position: absolute; top: -8px; left: 4px; }
.rk-pod-block { width: 100%; margin-top: 8px; border-radius: 20px 20px 10px 10px; display: grid; place-items: start center; padding-top: 10px; transform-origin: bottom; animation: pod-grow .7s var(--ease-spring) both;
  position: relative; overflow: hidden; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 10px 24px rgba(0, 0, 0, .25); }
.rk-pod-block::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: mk-shine 3.4s ease-in-out infinite; }
.rk-pod-block b { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: rgba(255, 255, 255, .95); text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.rk-pod.p1 .rk-pod-block { height: 118px; background: linear-gradient(180deg, #FFE27A, #FFB547 55%, #F08A2E); animation-delay: .1s; }
.rk-pod.p2 .rk-pod-block { height: 88px; background: linear-gradient(180deg, #EEF2F8, #B8C4D6 60%, #8E9BB2); }
.rk-pod.p3 .rk-pod-block { height: 66px; background: linear-gradient(180deg, #F6C08F, #D9894E 60%, #B0632E); animation-delay: .2s; }
.rk-pod.p2 .rk-pod-block b, .rk-pod.p1 .rk-pod-block b { color: rgba(60, 35, 0, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.rk-pod.p2 .rk-pod-block b { color: rgba(40, 50, 70, .55); }
.rk-pod.empty .rk-pod-block { opacity: .35; filter: grayscale(.6); }
.rk-pod.me .rk-pod-name { color: var(--primary-2); }
@keyframes pod-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pod-drop { 0% { opacity: 0; transform: translateY(-40px) scale(.6); } 100% { opacity: 1; transform: none; } }

/* rank rows */
.rk-list { display: flex; flex-direction: column; gap: 8px; }
.rk-row { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px 8px 8px; border-radius: 18px; cursor: pointer;
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 35ms + 120ms);
  transition: transform .2s var(--ease-spring), background .2s; }
.rk-row.pressed { transform: scale(.975); }
.rk-rank { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.rk-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.rk-name span { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name small { font-size: 11px; color: var(--fg-3); font-weight: 700; flex: none; }
.rk-meta { display: flex; gap: 6px; align-items: center; }
.rk-lv { font-size: 11px; font-weight: 800; color: var(--fg-2); padding: 1px 7px; border-radius: 8px; background: var(--glass-2); }
.rk-you { font-family: var(--font-display); font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 7px; background: var(--grad-primary); color: #fff; letter-spacing: .04em; }
.rk-score-w { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rk-score { font-family: var(--font-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rk-score-w small { font-size: 11px; color: var(--fg-3); font-weight: 700; }
.rk-row.me { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent), color-mix(in srgb, var(--rk-c) 16%, transparent)), var(--glass);
  border-color: color-mix(in srgb, var(--primary) 65%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 30%, transparent); }
.rk-row.me .rk-rank { color: var(--primary-2); }
.rk-delta { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.rk-delta.up { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.rk-delta.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.rk-delta.new { color: #3A1E00; background: var(--grad-gold); }
.rk-flash { animation: mk-flash .8s ease-out; }
.rk-foot { text-align: center; color: var(--fg-3); font-size: 13px; padding: 14px 0 4px; }

/* sticky my-rank bar */
.rk-mebar { position: sticky; bottom: 10px; z-index: 5; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; margin-top: 4px;
  min-height: 62px; padding: 9px 12px 9px 9px; border-radius: 22px; cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 55%, var(--surface-solid)), color-mix(in srgb, var(--rk-c) 35%, var(--surface-solid)));
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(30px); opacity: 0; transition: transform .5s var(--ease-spring), opacity .3s; }
.rk-mebar:empty { display: none; }
.rk-mebar.show { transform: none; opacity: 1; }
.rk-me-main { display: flex; flex-direction: column; line-height: 1.1; }
.rk-me-main small { font-size: 11px; font-weight: 700; opacity: .85; }
.rk-me-rank { display: flex; align-items: center; gap: 6px; }
.rk-me-rank b { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.rk-me-rank .rk-delta.up { background: rgba(255, 255, 255, .22); color: #fff; }
.rk-me-rank .rk-delta.down { background: rgba(0, 0, 0, .2); color: #fff; }
.rk-me-side { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; }
.rk-me-side b { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.rk-me-side small { font-size: 11.5px; font-weight: 700; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rk-mebar .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

/* =====================================================================================
   SHOP
   ===================================================================================== */
.sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sh-wallet { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sh-wallet .cur { min-height: 30px; }
.sh-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 6px var(--gutter, 16px) 10px; position: sticky; top: -1px; z-index: 4;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 72%, transparent 100%); }
.sh-tabs::-webkit-scrollbar { display: none; }
.sh-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 15px 0 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--fg-2); font-weight: 800; font-size: 14px; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .25s var(--ease-spring), background .25s, color .25s, box-shadow .25s; }
.sh-tab i { font-style: normal; font-size: 17px; }
.sh-tab.pressed { transform: scale(.93); }
.sh-tab.on { background: var(--grad-primary); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent); }
.sh-tab-n { font-style: normal; position: absolute; top: -5px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 800; color: #fff; background: var(--danger); box-shadow: 0 0 0 2px var(--bg), 0 2px 8px color-mix(in srgb, var(--danger) 60%, transparent); animation: mk-pop .4s var(--ease-spring), dot-pulse 2s ease-in-out .5s infinite; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.sh-tab-n:empty { display: none; }

.sh-cat { display: flex; flex-direction: column; gap: 12px; }
.sh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 500px) { .sh-grid { gap: 14px; } }
.sh-sec { --gc: var(--primary); display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 2px; }
.sh-sec b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.sh-sec small { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fg-3); }
.sh-sec-img { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 75%, transparent), 0 0 14px color-mix(in srgb, var(--gc) 50%, transparent); }
.sh-sec-ic { font-size: 20px; }
.sh-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--mk-card-bg); border: 1px solid var(--glass-border); font-size: 12.5px; color: var(--fg-2); }
.sh-note i { font-style: normal; font-size: 22px; }
.sh-note span { flex: 1; }
.sh-note b { white-space: nowrap; color: var(--fg); font-weight: 800; }

/* item card with rarity border */
.sh-card { --rc: var(--r-common); position: relative; border-radius: 22px; padding: 2px; cursor: pointer; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 50%, transparent), var(--glass-border) 40%, color-mix(in srgb, var(--rc) 30%, transparent));
  animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .25s var(--ease-spring), box-shadow .25s; }
.sh-cat:not(.enter) .sh-card { animation: none; }
.sh-card.pressed { transform: scale(.955); }
.sh-card.r-rare { --rc: var(--r-rare); box-shadow: 0 0 18px color-mix(in srgb, var(--r-rare) 30%, transparent); }
.sh-card.r-epic { --rc: var(--r-epic); box-shadow: 0 0 22px color-mix(in srgb, var(--r-epic) 38%, transparent); }
.sh-card.r-legendary { --rc: var(--r-legendary); box-shadow: 0 0 26px rgba(255, 179, 0, .45); }
.sh-card.r-epic::before, .sh-card.r-legendary::before { content: ''; position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; z-index: -1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, var(--r-epic), #FF4D8D, #7C5CFF, #00E5FF, var(--r-epic)); animation: mk-rot 4s linear infinite; }
.sh-card.r-legendary::before { background: conic-gradient(from 0deg, #FFE27A, #FFB300, #FF7A3C, #FFF6C8, #FFB300, #FFE27A); animation-duration: 3s; }
.sh-card-in { position: relative; z-index: 1; height: 100%; border-radius: 20px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--surface-solid)) 0%, var(--surface-solid) 55%); overflow: hidden; }
.sh-card.r-legendary .sh-card-in::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 240, 180, .32), transparent); animation: mk-shine 3.2s ease-in-out infinite; }
.sh-name { font-weight: 800; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.sh-rar { position: absolute; left: 14px; top: 14px; z-index: 2; height: 20px; padding: 0 7px; border-radius: 7px; display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: var(--rc); box-shadow: 0 2px 10px color-mix(in srgb, var(--rc) 60%, transparent); }
.sh-card.r-legendary .sh-rar { color: #3A1E00; background: var(--grad-gold); }
.sh-lock { position: absolute; right: 6px; bottom: 6px; z-index: 2; height: 22px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(10, 8, 30, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sh-eqdot { position: absolute; right: 14px; top: 14px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #04261A;
  background: linear-gradient(180deg, #5CF5BD, #18C987); box-shadow: 0 0 0 3px var(--surface-solid), 0 0 14px rgba(46, 229, 157, .6); animation: mk-pop .5s var(--ease-spring); }
.sh-price { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 32px; }
.sh-price small { font-size: 10.5px; color: var(--fg-3); font-weight: 700; }
.sh-pr .cur { min-height: 30px; padding: 0 10px 0 4px; }
.sh-price.two .sh-pr .cur { min-height: 26px; padding: 0 8px 0 3px; }
.sh-price.two .sh-pr .cur i { font-size: 14px; width: 18px; height: 18px; }
.sh-price.two .sh-pr .cur b { font-size: 12px; }
.sh-pr.no .cur { opacity: .55; }
.sh-pr.no .cur b { color: var(--fg-3) !important; }
.sh-state { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 12px; font-size: 12.5px; font-weight: 800; }
.sh-state.eq { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.sh-state.own { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 14%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
[data-theme="paper"] .sh-state.own { color: var(--primary); }
.sh-state.lv { color: var(--fg-2); background: var(--glass-2); }
.sh-card.locked .sh-pv { filter: grayscale(.65) brightness(.85); }
.sh-card.locked .sh-price { opacity: .7; }
.sh-card.equipped { box-shadow: 0 0 0 2px var(--success), 0 0 22px rgba(46, 229, 157, .35); }
.sh-card.sh-pop { animation: mk-bump-k .55s var(--ease-spring); }

/* previews */
.sh-pv { position: relative; width: 100%; aspect-ratio: 1 / .82; border-radius: 15px; overflow: hidden; display: grid; place-items: center; background: var(--glass); }
.sh-pv.lg { width: min(260px, 72vw); margin-inline: auto; border-radius: 24px; }
/* theme mock */
.sh-pv-theme { background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--c1) 45%, var(--c0)) 0%, var(--c0) 70%); }
.sh-pv-theme .t-phone { position: relative; width: 52%; height: 86%; border-radius: 12px; background: var(--c0); box-shadow: 0 0 0 2px rgba(255, 255, 255, .22), 0 10px 22px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; gap: 6%; padding: 9% 8%; overflow: hidden; }
.sh-pv-theme .t-phone i { display: block; font-style: normal; }
.sh-pv-theme .t-bar { display: flex !important; justify-content: space-between; height: 7%; }
.sh-pv-theme .t-bar i { width: 28%; border-radius: 4px; background: color-mix(in srgb, var(--c2) 70%, transparent); }
.sh-pv-theme .t-bar i:first-child { width: 18%; border-radius: 50%; aspect-ratio: 1; height: auto; background: var(--c1); }
.sh-pv-theme .t-card { position: relative; height: 34%; border-radius: 8px; background: linear-gradient(135deg, var(--c1), var(--c2)); padding: 8%; display: flex !important; flex-direction: column; gap: 10%; box-shadow: 0 4px 12px color-mix(in srgb, var(--c1) 50%, transparent); }
.sh-pv-theme .t-dot { width: 22%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.sh-pv-theme .t-line { height: 9%; width: 70%; border-radius: 4px; background: rgba(255, 255, 255, .7); }
.sh-pv-theme .t-line.s { width: 45%; opacity: .7; }
.sh-pv-theme .t-row { display: flex !important; gap: 8%; height: 12%; }
.sh-pv-theme .t-btn { flex: 1; border-radius: 6px; background: var(--c1); box-shadow: 0 2px 0 color-mix(in srgb, var(--c1) 55%, #000); }
.sh-pv-theme .t-btn.g { background: color-mix(in srgb, var(--c2) 80%, #fff); }
.sh-pv-theme .t-tab { display: flex !important; justify-content: space-around; align-items: center; margin-top: auto; height: 10%; border-radius: 6px; background: color-mix(in srgb, var(--c0) 70%, #fff 12%); }
.sh-pv-theme .t-tab i { width: 12%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c2) 55%, transparent); }
.sh-pv-theme .t-tab i:first-child { background: var(--c1); }
.sh-pv-theme .t-sw { position: absolute; right: 7px; bottom: 7px; display: flex; gap: 3px; }
.sh-pv-theme .t-sw i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.sh-pv-theme.lg .t-sw i { width: 18px; height: 18px; }
/* skin */
.sh-pv-skin { background: linear-gradient(135deg, var(--c0), var(--c2)); }
.sh-pv-skin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-pv-skin .sk-tint { position: absolute; inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--c0) 55%, transparent), color-mix(in srgb, var(--c1) 35%, transparent) 55%, color-mix(in srgb, var(--c2) 70%, transparent)); mix-blend-mode: hard-light; }
.sh-pv-skin.sk-default .sk-tint { background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .45)); mix-blend-mode: normal; }
.sh-pv-skin.sk-cyber .sk-tint { background: linear-gradient(160deg, rgba(0, 229, 255, .45), rgba(255, 0, 229, .35) 50%, rgba(11, 15, 46, .7)); mix-blend-mode: hard-light; }
.sh-pv-skin.sk-gold .sk-tint { background: linear-gradient(160deg, rgba(255, 213, 74, .6), rgba(184, 134, 11, .45) 55%, rgba(59, 42, 0, .65)); mix-blend-mode: hard-light; }
.sh-pv-skin .sk-chips { position: absolute; left: 7px; bottom: 7px; display: flex; gap: 3px; }
.sh-pv-skin .sk-chips i { width: 14px; height: 14px; border-radius: 5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 2px 6px rgba(0, 0, 0, .3); }
.sh-pv-skin .sk-game { position: absolute; right: 7px; bottom: 7px; max-width: 60%; font-size: 10px; font-weight: 800; color: #fff; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-pv-skin.lg .sk-chips i { width: 22px; height: 22px; border-radius: 7px; }
.sh-pv-skin.lg .sk-game { font-size: 12px; padding: 3px 8px; }
/* avatar */
.sh-pv-avatar { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, var(--primary)) 35%, transparent), transparent 70%), var(--glass); }
.sh-pv-avatar .av-ring { width: 72%; aspect-ratio: 1; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, color-mix(in srgb, var(--rc, var(--primary)) 90%, #fff), color-mix(in srgb, var(--rc, var(--primary)) 40%, transparent)); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.sh-pv-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-solid); }
.sh-pv-avatar.lg { aspect-ratio: 1; width: min(200px, 56vw); }
/* frame */
.sh-pv-frame { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rc, var(--primary)) 25%, transparent), transparent 70%), var(--glass); }
.sh-pv-frame .fr-wrap { position: relative; display: grid; place-items: center; }
.sh-pv-frame .fr-ring { position: absolute; inset: -9px; border-radius: 50%; background: var(--ring); opacity: .38; filter: blur(8px); animation: mk-glowpulse 2.4s ease-in-out infinite; }
.sh-pv-frame.none .fr-ring { display: none; }
.sh-pv-frame.lg { aspect-ratio: 1; width: min(200px, 56vw); }
/* title */
.sh-pv-title { display: flex; flex-direction: column; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc, var(--primary)) 28%, transparent), transparent 70%), var(--glass); }
.sh-pv-title .ti-emoji { font-size: 40px; line-height: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.sh-pv-title .mk-title { max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.sh-pv-title.lg { aspect-ratio: 1.5; }
.sh-pv-title.lg .ti-emoji { font-size: 70px; }
.sh-pv-title.lg .mk-title { height: 34px; font-size: 16px; padding: 0 16px 0 12px; }
/* ticket */
.sh-pv-ticket { background: radial-gradient(circle at 50% 45%, rgba(255, 111, 181, .3), transparent 70%), var(--glass); }
.sh-pv-ticket .tk-stack { position: relative; width: 60px; height: 50px; }
.sh-pv-ticket .tk-stack i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 40px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.sh-pv-ticket .tk-stack i:nth-child(1) { transform: translate(-72%, -58%) rotate(-16deg); opacity: .7; }
.sh-pv-ticket .tk-stack i:nth-child(2) { transform: translate(-28%, -42%) rotate(14deg); opacity: .85; }
.sh-pv-ticket .tk-amt { position: absolute; right: 9px; bottom: 7px; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--ticket); text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.sh-pv-ticket.lg { aspect-ratio: 1.4; }
.sh-pv-ticket.lg .tk-stack { transform: scale(1.7); }
.sh-pv-ticket.lg .tk-amt { font-size: 34px; right: 16px; bottom: 12px; }

/* purchase sheet */
.sh-sheet-c { --rc: var(--r-common); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sh-sheet-c.r-rare { --rc: var(--r-rare); }
.sh-sheet-c.r-epic { --rc: var(--r-epic); }
.sh-sheet-c.r-legendary { --rc: var(--r-legendary); }
.shs-pv { position: relative; width: 100%; display: grid; place-items: center; padding: 8px 0 6px; }
.shs-pv .sh-pv { z-index: 1; box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 40px color-mix(in srgb, var(--rc) 35%, transparent); animation: mk-pop .6s var(--ease-spring) both; }
.shs-rays { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 40%, transparent) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%); opacity: .5; animation: mk-rot 16s linear infinite; }
.sh-sheet-c.r-common .shs-rays { opacity: .2; }
.shs-meta { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.shs-rar, .shs-game { height: 24px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; }
.shs-rar { font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: var(--rc); }
.shs-rar.r-common { color: #1B1340; }
.shs-rar.r-legendary { color: #3A1E00; background: var(--grad-gold); }
.shs-game { background: var(--glass-2); color: var(--fg-2); }
.shs-name { font-family: var(--font-kdisplay); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 2px 0 0; }
.shs-desc { color: var(--fg-2); font-size: 14px; max-width: 320px; }
.shs-tpv { margin-top: 2px; }
.shs-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.shs-actions > .btn { width: 100%; }
.shs-buy { justify-content: center; }
.shs-buy.cant { filter: grayscale(.5) brightness(.85); }
.shs-bal { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--fg-3); font-weight: 700; }
.shs-status { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 16px; font-weight: 800; }
.shs-status.eq { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.shs-status.own { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 14%, transparent); }
[data-theme="paper"] .shs-status.own { color: var(--primary); }
.shs-lockbox { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--glass-2); border: 1px dashed var(--glass-border); }
.shs-lockbox b { font-size: 15px; font-weight: 800; }
.shs-lockbox small { color: var(--fg-3); font-weight: 700; }
.shs-cur { width: 100%; }
.shs-nudge:empty { display: none; }
.shs-nudgebox { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 14%, transparent), color-mix(in srgb, var(--primary) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); animation: mk-in .4s var(--ease-spring); }
.nb-top { display: flex; align-items: center; gap: 10px; }
.nb-top > div { display: flex; flex-direction: column; }
.nb-top b { font-size: 15px; font-weight: 800; }
.nb-top small { font-size: 12px; color: var(--fg-2); }
.nb-mascot { width: 52px; height: 52px; object-fit: contain; flex: none; animation: mk-float 3s ease-in-out infinite; }
.nb-btns { display: flex; gap: 8px; }
.nb-btns .btn { flex: 1; padding: 0 8px; font-size: 13px; }
.nb-btns .btn-primary { flex: 1.6; }
.sh-sheet-c.won .shs-pv .sh-pv { animation: won-pop .8s var(--ease-spring) both; }
.shs-won span { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: .02em; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255, 180, 60, .45)); animation: mk-pop .6s var(--ease-spring) both; }
.sh-sheet-c.won .shs-rays { opacity: .85; }
@keyframes won-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 55% { transform: scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: none; } }

/* =====================================================================================
   MISSIONS
   ===================================================================================== */
.ms-seg { width: 100%; }
.ms-tab-n { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 99px; vertical-align: 1px;
  font-family: var(--font-display); font-size: 10px; font-weight: 800; color: #fff; background: var(--danger); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 10px color-mix(in srgb, var(--danger) 60%, transparent); animation: dot-pulse 2s ease-in-out infinite; }
.ms-tab-n:empty { display: none; }
.ms-body { min-height: 320px; }
.ms-daily, .ms-ach { display: flex; flex-direction: column; gap: 12px; }
.ms-daily.enter > *, .ms-ach.enter > * { animation: mk-in .45s var(--ease-spring) both; }
.ms-daily.enter > :nth-child(2) { animation-delay: .06s; }
.ms-daily.enter > :nth-child(3) { animation-delay: .12s; }

.ms-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 16px 14px 16px 18px; border-radius: var(--radius-l); overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 42%, transparent), color-mix(in srgb, var(--pink, #FF4D8D) 26%, transparent) 70%), var(--glass);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--glass-border)); box-shadow: var(--shadow-1); }
.ms-hero::after { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%); pointer-events: none; }
.ms-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ms-kicker { font-size: 12px; font-weight: 800; color: var(--fg-2); }
.ms-hero h2 { font-family: var(--font-kdisplay); font-weight: 400; font-size: 24px; line-height: 1.15; }
.ms-pips { display: flex; gap: 6px; }
.ms-pips i { width: 30px; height: 9px; border-radius: 99px; background: var(--track); }
.ms-pips i.on { background: var(--grad-gold); box-shadow: 0 0 10px rgba(255, 190, 60, .6); animation: mk-pop .5s var(--ease-spring) both; animation-delay: calc(var(--i) * 120ms + 200ms); }
.ms-bonus-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ms-bonus-r small { font-size: 11.5px; font-weight: 700; color: var(--fg-2); }
.ms-bonus-r .cur { min-height: 26px; padding: 0 9px 0 3px; }
.ms-bonus-r .cur i { font-size: 14px; width: 18px; height: 18px; }
.ms-bonus-r .cur b { font-size: 12px; }
.ms-reset { font-size: 12px; font-weight: 800; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ms-reset small { font-weight: 700; color: var(--fg-3); }
.ms-hero-r { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ms-hero-r .chest { --cw: 92px; }
.ms-chest-btn { min-width: 92px; }

.ms-list { display: flex; flex-direction: column; gap: 10px; }
.ms-card { --gc: var(--primary); position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 20px; overflow: hidden;
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); transition: transform .2s var(--ease-spring), opacity .3s, filter .3s; }
.ms-card.pressed { transform: scale(.98); }
.ms-card::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gc); box-shadow: 0 0 12px var(--gc); }
.ms-ic { position: relative; width: 54px; height: 54px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--gc) 28%, var(--glass)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 50%, transparent); }
.ms-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ms-ic span { position: relative; font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.ms-ic img + span { position: absolute; right: 2px; bottom: 0; font-size: 18px; }
.ms-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ms-title { font-weight: 800; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.02em; }
.ms-bar { height: 9px; }
.ms-row { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.ms-prog { font-size: 12px; color: var(--fg-3); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-prog b { color: var(--fg); font-family: var(--font-display); font-size: 13px; }
.ms-rw { display: flex; gap: 4px; margin-left: auto; }
.ms-rw .cur { min-height: 24px; padding: 0 8px 0 2px; }
.ms-rw .cur i { font-size: 13px; width: 17px; height: 17px; }
.ms-rw .cur b { font-size: 11.5px; }
.ms-side .btn { min-width: 72px; }
.ms-card.done { border-color: color-mix(in srgb, #FFC93C 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #FFC93C 35%, transparent), 0 0 24px rgba(255, 190, 60, .28), var(--shadow-1);
  background: linear-gradient(135deg, rgba(255, 201, 60, .14), transparent 60%), var(--glass); }
.ms-card.done .ms-act { animation: btn-pulse 1.4s var(--ease-spring) infinite; }
.ms-card.claimed { opacity: .62; filter: saturate(.6); box-shadow: none; }
.ms-card.claimed.just { animation: claimed-squish .5s var(--ease-spring); }
@keyframes claimed-squish { 0% { transform: scale(1); } 40% { transform: scale(.96); } 100% { transform: scale(1); } }
.ms-stamp { position: absolute; left: 16px; top: 50%; width: 46px; height: 46px; margin-top: -23px; background: color-mix(in srgb, var(--surface-solid) 70%, transparent); border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 22px; font-weight: 900; color: var(--success); border: 3px solid var(--success); transform: rotate(-14deg); opacity: .8; pointer-events: none; }
.ms-card.just .ms-stamp { animation: stamp-in .5s var(--ease-spring) both; }
@keyframes stamp-in { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(-14deg); opacity: .8; } }
.ms-tip { font-size: 12px; color: var(--fg-3); text-align: center; padding: 4px 8px; }

/* achievements */
.ms-ach-sum { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-l);
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); }
.ms-ach-sum .mk-ring { grid-row: span 2; }
.ms-ach-sum-t { display: flex; flex-direction: column; min-width: 0; }
.ms-ach-sum-t small { font-size: 12px; font-weight: 700; color: var(--fg-3); }
.ms-ach-sum-t h2 { font-size: 15px; font-weight: 700; color: var(--fg-3); }
.ms-ach-sum-t h2 b { font-family: var(--font-display); font-size: 26px; color: var(--fg); }
.ms-ach-sum-t p { font-size: 12.5px; color: var(--fg-2); }
.ms-sort { justify-self: start; }
.ms-ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ach { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 18px; text-align: center; cursor: pointer;
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform .2s var(--ease-spring); }
.ach.pressed { transform: scale(.94); }
.ach-ic { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); }
.ach-ic span { font-size: 28px; line-height: 1; filter: grayscale(1) opacity(.55); }
.ach-t { font-size: 12px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); }
.ach-p { width: 100%; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ach-bar { height: 6px; width: 100%; }
.ach-p small { font-size: 10px; font-weight: 700; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ach-ok { font-size: 11px; font-weight: 800; color: var(--gold); }
.ach.on { border-color: color-mix(in srgb, #FFC93C 50%, transparent); background: linear-gradient(180deg, rgba(255, 201, 60, .16), transparent 70%), var(--glass); }
.ach.on .ach-ic { background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFC93C 55%, #E08A1E); box-shadow: 0 0 0 3px rgba(255, 220, 120, .35), 0 0 22px rgba(255, 190, 60, .55); }
.ach.on .ach-ic span { filter: none; }
.ach.on .ach-t { color: var(--fg); }
.ach.near { border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.ach.near .ach-ic span { filter: grayscale(.4) opacity(.85); }

.ach-sheet { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.achs-ic { position: relative; width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); margin: 4px 0 6px; }
.achs-ic span { position: relative; z-index: 1; font-size: 58px; line-height: 1; filter: grayscale(1) opacity(.6); }
.achs-rays { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .5) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%); }
.ach-sheet.on .achs-ic { background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFC93C 55%, #E08A1E); box-shadow: 0 0 0 5px rgba(255, 220, 120, .3), 0 0 40px rgba(255, 190, 60, .6); animation: mk-pop .6s var(--ease-spring) both; }
.ach-sheet.on .achs-ic span { filter: none; }
.ach-sheet.on .achs-rays { opacity: 1; animation: mk-rot 12s linear infinite; }
.achs-state { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--glass-2); color: var(--fg-2); }
.ach-sheet.on .achs-state { color: #3A1E00; background: var(--grad-gold); }
.ach-sheet h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.achs-desc { color: var(--fg-2); }
.achs-prog { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.achs-bar { height: 12px; }
.achs-nums { font-size: 13px; color: var(--fg-3); font-weight: 700; }
.achs-nums b { font-family: var(--font-display); color: var(--fg); font-size: 15px; }
.achs-rw { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 4px; }
.achs-rw small { font-size: 12px; color: var(--fg-3); font-weight: 700; }
.achs-rw > div { display: flex; gap: 6px; }
.achs-foot { font-size: 12.5px; color: var(--fg-3); }

/* =====================================================================================
   PROFILE
   ===================================================================================== */
.pf-hero-host { display: block; }
.pf-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px 18px; border-radius: var(--radius-xl); overflow: hidden; text-align: center;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); isolation: isolate; animation: mk-in .45s var(--ease-spring) both; }
.pf-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pf-hero-bg::before { content: ''; position: absolute; inset: -30%; background: var(--av) center / cover no-repeat; filter: blur(34px) saturate(1.5); opacity: .45; transform: scale(1.1); }
.pf-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 28%, transparent) 0%, transparent 45%, color-mix(in srgb, var(--bg-2) 70%, transparent) 100%); }
[data-theme="paper"] .pf-hero-bg::before { opacity: .3; }
.pf-editbtn { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--ease-spring); }
.pf-editbtn.pressed { transform: scale(.88); }
.pf-av { position: relative; display: grid; place-items: center; margin-bottom: 4px; }
.pf-av .pf-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pf-av-in { position: relative; z-index: 1; animation: mk-pop .6s var(--ease-spring) .05s both; }
.pf-lv { position: absolute; z-index: 2; left: 50%; bottom: -10px; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 2px; height: 26px; padding: 0 10px; border-radius: 99px;
  background: var(--grad-gold); color: #3A1E00; box-shadow: 0 4px 12px rgba(255, 170, 40, .45), 0 0 0 3px var(--surface-solid); line-height: 26px; }
.pf-lv small { font-size: 10px; font-weight: 800; }
.pf-lv b { font-family: var(--font-display); font-size: 14px; font-weight: 900; }
.pf-name { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 8px 0 0; font-family: var(--font-kdisplay); font-weight: 400; font-size: 26px; line-height: 1.15; flex-wrap: wrap; }
.pf-name small { font-family: var(--font-display); font-size: 13px; color: var(--fg-3); font-weight: 700; }
.pf-title { margin-top: -2px; }
.pf-xp { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.pf-xp-t { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; color: var(--fg-2); }
.pf-xp-t b { font-family: var(--font-display); font-size: 14px; color: var(--fg); }
.pf-xpbar { height: 12px; }
.pf-xp-n { font-size: 11.5px; color: var(--fg-3); font-weight: 700; text-align: right; }
.pf-curs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.pf-curs .cur-big { min-height: 40px; }

.pf-rest { display: flex; flex-direction: column; gap: 12px; }
.pf-rest > * { animation: mk-in .45s var(--ease-spring) both; }
.pf-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pf-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 18px; cursor: pointer; background: var(--mk-card-bg); border: 1px solid var(--glass-border);
  transition: transform .2s var(--ease-spring); }
.pf-act.pressed { transform: scale(.92); }
.pf-act small { font-size: 12px; font-weight: 800; color: var(--fg-2); }
.pf-act-ic { position: relative; font-size: 26px; line-height: 1; }
.pf-badge { position: absolute; top: -6px; right: -12px; font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 10px; font-weight: 800; color: #fff; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); animation: mk-pop .4s var(--ease-spring); }
.pf-guest { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; cursor: pointer; color: #fff; overflow: hidden;
  background: var(--grad-primary); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 40%, transparent); transition: transform .2s var(--ease-spring); }
.pf-guest::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); animation: mk-shine 3s ease-in-out infinite; }
.pf-guest.pressed { transform: scale(.97); }
.pf-guest-ic { font-size: 32px; animation: mk-float 2.6s ease-in-out infinite; }
.pf-guest-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pf-guest-t b { font-size: 16px; font-weight: 800; }
.pf-guest-t small { font-size: 12px; opacity: .9; line-height: 1.4; }
.pf-guest-go { font-size: 22px; font-weight: 900; }
.pf-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 12px 16px; border-radius: 20px; background: var(--mk-card-bg); border: 1px solid var(--glass-border); }
.pf-code small { display: block; font-size: 11.5px; color: var(--fg-3); font-weight: 700; }
.pf-code-v { font-family: var(--font-display); font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.pf-code-b { display: flex; gap: 6px; }
.pf-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 2px; }
.pf-sec h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.pf-sec small { font-size: 12px; color: var(--fg-3); font-weight: 700; }
.pf-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-game-skel.skeleton { width: 100% !important; height: 148px; border-radius: 22px; }
.pf-game { --gc: var(--primary); position: relative; min-height: 148px; border-radius: 22px; overflow: hidden; cursor: pointer; color: #fff; isolation: isolate;
  background: linear-gradient(155deg, color-mix(in srgb, var(--gc) 92%, #fff 0%), color-mix(in srgb, var(--gc) 45%, #120A2E));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--gc) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  animation: mk-in .5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .2s var(--ease-spring); }
.pf-game.pressed { transform: scale(.96); }
.pf-game-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .55; }
.pf-game::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .55) 100%); }
.pf-game-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.pf-game-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
.pf-game-h span { font-size: 16px; }
.pf-game-best { margin-top: auto; display: flex; flex-direction: column; line-height: 1.05; }
.pf-game-best small { font-size: 10.5px; font-weight: 700; opacity: .85; }
.pf-game-best b { font-family: var(--font-display); font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.pf-game-m { display: flex; gap: 8px; font-size: 11px; font-weight: 700; opacity: .92; flex-wrap: wrap; }
.pf-game-last { font-size: 10.5px; font-weight: 700; opacity: .75; }
.pf-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-sum-i { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; background: var(--mk-card-bg); border: 1px solid var(--glass-border); text-align: center; }
.pf-sum-i b { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.pf-sum-i small { font-size: 11px; font-weight: 700; color: var(--fg-3); }
.pf-sum-ach { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 201, 60, .16), transparent 70%), var(--glass); border: 1px solid color-mix(in srgb, #FFC93C 40%, transparent); transition: transform .2s var(--ease-spring); }
.pf-sum-ach.pressed { transform: scale(.97); }
.pf-sum-ach-ic { grid-row: span 2; font-size: 34px; }
.pf-sum-ach b { font-family: var(--font-display); font-size: 18px; }
.pf-sum-ach small { font-size: 12px; color: var(--fg-3); font-weight: 700; margin-left: 6px; }
.pf-achbar { height: 8px; }
.pf-joined { text-align: center; font-size: 11.5px; color: var(--fg-3); }

/* edit sheet */
.pe { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.pe-prev { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-border); margin-bottom: 4px; }
.pe-prev > div:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-prev-name { font-family: var(--font-kdisplay); font-weight: 400; font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-label { font-size: 13px; font-weight: 800; color: var(--fg-2); margin-top: 8px; }
.pe-field { position: relative; }
.pe-input { width: 100%; height: 52px; padding: 0 56px 0 16px; border-radius: 16px; border: 2px solid var(--glass-border); background: var(--glass-2); color: var(--fg); font: 700 17px var(--font-body); outline: none; transition: border-color .2s, box-shadow .2s; }
.pe-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); }
.pe-input.bad { border-color: var(--danger); }
.pe-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 12px; color: var(--fg-3); }
.pe-err { min-height: 16px; font-size: 12px; font-weight: 700; color: var(--danger); }
.pe-avgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 380px) { .pe-avgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pe-av { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 3px; border: 0; cursor: pointer; background: var(--glass-2); transition: transform .25s var(--ease-spring), box-shadow .2s; }
.pe-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pe-av.on { background: var(--grad-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 16px color-mix(in srgb, var(--primary) 50%, transparent); transform: scale(1.06); }
.pe-av.locked img { filter: grayscale(.8) brightness(.6); }
.pe-av-lock { position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.pe-av-lock small { font-size: 9px; font-weight: 800; font-family: var(--font-display); }
.pe-frgrid { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 -2px; }
.pe-frgrid::-webkit-scrollbar { display: none; }
.pe-fr { position: relative; flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 16px; cursor: pointer; border: 2px solid transparent; background: var(--glass); color: var(--fg-2); }
.pe-fr small { font-size: 10.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pe-fr.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--fg); }
.pe-fr.locked .avatar { filter: grayscale(.8) opacity(.6); }
.pe-fr-lock { position: absolute; right: 6px; top: 6px; font-size: 12px; }
.pe-tirow { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-ti { border: 2px solid transparent; border-radius: 999px; padding: 2px; background: none; cursor: pointer; transition: transform .2s var(--ease-spring); }
.pe-ti.on { border-color: var(--primary); transform: scale(1.04); }
.pe-ti.more { padding: 0 12px; height: 30px; border: 1px dashed var(--glass-border); color: var(--fg-3); font-size: 12px; font-weight: 800; }
.pe-actions { position: sticky; bottom: -20px; margin: 12px -20px -20px; padding: 12px 20px calc(var(--safe-bottom) + 16px); background: linear-gradient(180deg, transparent, var(--surface-solid) 30%); }
.pe-save { width: 100%; }

/* public profile */
.pf-hero.pub { padding-top: 26px; }
.pf-pubrow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pf-pubstat { display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--glass-2); font-size: 13px; font-weight: 700; color: var(--fg-2); }
.pf-pubstat b { font-family: var(--font-display); color: var(--fg); }
.pf-friendchip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 800; color: var(--success); background: color-mix(in srgb, var(--success) 15%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.pf-friendchip.pop { animation: mk-pop .5s var(--ease-spring); }
.pf-hero-skel.skeleton { width: 100% !important; height: 300px; border-radius: var(--radius-xl); }
.pf-cmp { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-l); background: var(--mk-card-bg); border: 1px solid var(--glass-border); animation: mk-in .45s var(--ease-spring) .1s both; }
.pf-cmp .pf-sec { margin-top: 0; }
.pf-cmp-legend { display: flex; gap: 10px; font-size: 11.5px; font-weight: 800; }
.pf-cmp-legend span { display: inline-flex; align-items: center; gap: 5px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cmp-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pf-cmp-legend .them::before { background: var(--fg-3); }
.pf-cmp-legend .me::before { background: var(--grad-primary); }
.pf-cmp-score { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 6px 0 4px; }
.pf-cmp-score b { font-family: var(--font-display); font-size: 30px; font-weight: 900; }
.pf-cmp-score b.me { color: var(--primary-2); }
[data-theme="paper"] .pf-cmp-score b.me { color: var(--primary); }
.pf-cmp-score b.them { color: var(--fg-3); }
.pf-cmp-score small { font-size: 12px; font-weight: 800; color: var(--fg-3); }
.pf-cmp-score i { font-style: normal; font-size: 22px; color: var(--fg-3); margin: 0 4px; }
.pf-cmp-row { --gc: var(--primary); display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 16px; background: var(--glass); animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.pf-cmp-row.win { box-shadow: inset 3px 0 0 var(--success); }
.pf-cmp-row.lose { box-shadow: inset 3px 0 0 var(--danger); }
.pf-cmp-g { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pf-cmp-g span { font-size: 18px; }
.pf-cmp-g b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cmp-bars { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-cmp-b { position: relative; height: 18px; border-radius: 6px; background: var(--track); overflow: hidden; }
.pf-cmp-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; animation: bar-grow 1s var(--ease-out) both; animation-delay: .3s; transform-origin: left; }
.pf-cmp-b.them i { background: color-mix(in srgb, var(--fg-3) 70%, transparent); }
.pf-cmp-b.me i { background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 50%, #fff)); box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 50%, transparent); }
.pf-cmp-b span { position: relative; z-index: 1; display: block; padding: 0 7px; line-height: 18px; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); color: #fff; }
[data-theme="paper"] .pf-cmp-b.them span { color: var(--fg); text-shadow: none; }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pf-cmp-crown { font-size: 22px; text-align: center; animation: crown-bob2 2.4s ease-in-out infinite; }
@keyframes crown-bob2 { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
.pf-cmp-eq { text-align: center; font-family: var(--font-display); color: var(--fg-3); }
.pf-pub-foot { display: flex; justify-content: center; }

/* =====================================================================================
   INBOX
   ===================================================================================== */
.ib-top:empty { display: none; }
.ib-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 14px 16px; border-radius: var(--radius-l);
  background: linear-gradient(135deg, rgba(255, 201, 60, .18), color-mix(in srgb, var(--primary) 14%, transparent)), var(--glass); border: 1px solid color-mix(in srgb, #FFC93C 35%, var(--glass-border)); animation: mk-in .4s var(--ease-spring); }
.ib-sum > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ib-sum b { font-size: 16px; font-weight: 800; }
.ib-sum small { font-size: 12px; color: var(--fg-3); font-weight: 700; }
.ib-sum-rw { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ib-sum-rw .cur { min-height: 24px; padding: 0 8px 0 2px; }
.ib-sum-rw .cur i { font-size: 13px; width: 17px; height: 17px; }
.ib-sum-rw .cur b { font-size: 11.5px; }
.ib-all { flex: none; }
.ib-all:not([disabled]) { animation: btn-pulse 1.6s var(--ease-spring) infinite; }
.ib-list { display: flex; flex-direction: column; gap: 10px; }
.ib-item { position: relative; display: grid; grid-template-columns: 48px 1fr auto; align-items: start; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 20px; cursor: pointer;
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); transition: opacity .3s, filter .3s, transform .2s var(--ease-spring), background .4s; }
.ib-item.enter { animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ib-item.pressed { transform: scale(.985); }
.ib-ic { position: relative; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--glass-2); }
.ib-ic span { font-size: 26px; line-height: 1; }
.ib-item.gift .ib-ic { background: radial-gradient(circle at 35% 30%, rgba(255, 240, 180, .5), rgba(255, 180, 60, .25) 60%, transparent), var(--glass-2); box-shadow: 0 0 16px rgba(255, 190, 60, .3); }
.ib-item.gift:not(.claimed) .ib-ic span { animation: gift-wobble 2.4s ease-in-out infinite; }
@keyframes gift-wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-12deg) scale(1.08); } 82% { transform: rotate(10deg) scale(1.08); } 88% { transform: rotate(-5deg); } }
.ib-dot { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface-solid), 0 0 10px var(--danger); transform: scale(0); transition: transform .35s var(--ease-spring); }
.ib-item.unread .ib-dot { transform: scale(1); }
.ib-item.unread { border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-border)); }
.ib-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ib-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ib-h b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.ib-h small { flex: none; font-size: 11px; color: var(--fg-3); font-weight: 700; }
.ib-body { font-size: 13px; color: var(--fg-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ib-item.open .ib-body { -webkit-line-clamp: unset; display: block; }
.ib-rw { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ib-rw .cur { min-height: 26px; padding: 0 9px 0 3px; }
.ib-rw .cur i { font-size: 14px; width: 18px; height: 18px; }
.ib-rw .cur b { font-size: 12px; }
.ib-claim { align-self: center; min-width: 64px; }
.ib-item.claimed { opacity: .6; filter: saturate(.55); }
.ib-item.just { animation: claimed-squish .5s var(--ease-spring); }

/* =====================================================================================
   FRIENDS
   ===================================================================================== */
.fr-codecard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 16px 16px; border-radius: var(--radius-xl); overflow: hidden; color: #fff; text-align: center; isolation: isolate;
  background: var(--grad-primary); box-shadow: 0 16px 40px color-mix(in srgb, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); animation: mk-in .45s var(--ease-spring) both; }
.fr-codecard-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .35), transparent 45%), radial-gradient(circle at 100% 100%, rgba(0, 0, 0, .25), transparent 55%); }
.fr-codecard-bg::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation: mk-shine 3.6s ease-in-out infinite; }
.fr-codecard small { font-size: 12.5px; font-weight: 800; opacity: .9; }
.fr-code-v { font-family: var(--font-display); font-size: 38px; font-weight: 900; letter-spacing: .14em; margin-left: .14em; line-height: 1.15; text-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.fr-code-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.fr-codecard .btn-ghost { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: #fff; --btn-ghost-depth: rgba(0, 0, 0, .22); }
.fr-codecard .btn-primary { background: #fff; color: var(--primary); text-shadow: none; --btn-depth: rgba(0, 0, 0, .25); box-shadow: 0 var(--d) 0 rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .2); }
.fr-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-l); background: var(--mk-card-bg); border: 1px solid var(--glass-border); animation: mk-in .45s var(--ease-spring) both; }
.fr-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fr-card-h b { font-size: 15px; font-weight: 800; }
.fr-card-h small { font-size: 12px; color: var(--fg-3); font-weight: 700; }
.fr-row { display: flex; gap: 8px; }
.fr-input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--glass-border); background: var(--glass-2); color: var(--fg); outline: none;
  font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s, box-shadow .2s; }
.fr-input::placeholder { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.fr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.fr-addbtn, .fr-refbtn { flex: none; min-height: 50px; padding: 0 18px; }
.fr-ref { background: linear-gradient(135deg, rgba(255, 201, 60, .16), transparent 70%), var(--glass); border-color: color-mix(in srgb, #FFC93C 38%, var(--glass-border)); }
.fr-ref.leave { animation: fr-leave .4s ease forwards; }
.fr-ref-h { display: flex; align-items: center; gap: 10px; }
.fr-ref-h > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fr-ref-h b { font-size: 15px; font-weight: 800; }
.fr-ref-h small { font-size: 12px; color: var(--fg-2); }
.fr-ref-ic { font-size: 30px; animation: gift-wobble 2.4s ease-in-out infinite; }
.fr-ref-rw { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.fr-ref-rw .cur { min-height: 24px; padding: 0 8px 0 2px; }
.fr-ref-rw .cur i { font-size: 13px; width: 17px; height: 17px; }
.fr-ref-rw .cur b { font-size: 11.5px; }
.fr-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 0 2px; }
.fr-sec h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.fr-sec h3 em { font-style: normal; font-family: var(--font-display); font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--glass-2); color: var(--fg-2); }
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 6px 10px 10px; border-radius: 20px; cursor: pointer;
  background: var(--mk-card-bg); border: 1px solid var(--glass-border); transition: transform .2s var(--ease-spring), opacity .3s, max-height .3s; }
.fr-item.enter { animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.fr-item.pressed { transform: scale(.98); }
.fr-item.leave { animation: fr-leave .32s ease forwards; }
@keyframes fr-leave { to { opacity: 0; transform: translateX(40px) scale(.96); } }
.fr-av { position: relative; }
.fr-online { position: absolute; right: 1px; bottom: 1px; z-index: 3; width: 13px; height: 13px; border-radius: 50%; background: var(--fg-3); box-shadow: 0 0 0 2.5px var(--surface-solid); }
.fr-online.on { background: var(--success); box-shadow: 0 0 0 2.5px var(--surface-solid), 0 0 10px var(--success); }
.fr-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fr-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.fr-name b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-name small { font-size: 11px; color: var(--fg-3); font-weight: 700; flex: none; }
.fr-lv { flex: none; margin-left: 4px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 8px; background: var(--glass-2); color: var(--fg-2); }
.fr-bests { display: flex; gap: 4px; flex-wrap: wrap; }
.fr-best { --gc: var(--primary); display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 4px; border-radius: 8px; font-family: var(--font-display); font-size: 10.5px; font-weight: 800;
  background: color-mix(in srgb, var(--gc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); }
.fr-best i { font-style: normal; font-size: 11px; }
.fr-best.none { opacity: .45; }
.fr-seen { font-size: 11px; color: var(--fg-3); font-weight: 700; }
.fr-seen.on { color: var(--success); }
.fr-more { width: 40px; height: 40px; border-radius: 12px; border: 0; background: none; color: var(--fg-3); font-size: 22px; font-weight: 900; cursor: pointer; }
.fr-more:active { background: var(--glass-2); }
.fr-invite { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-l); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--primary) 16%, transparent)), var(--glass); border: 1px solid var(--glass-border); }
.fr-invite > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fr-invite b { font-size: 14px; font-weight: 800; line-height: 1.3; }
.fr-invite small { font-size: 11.5px; color: var(--fg-3); }
.fr-invite-m { width: 56px; height: 56px; object-fit: contain; flex: none; animation: mk-float 3s ease-in-out infinite; }
.fr-skel .mk-skel-card { height: 72px; }
.fr-menu-b { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 4px; }
.fr-menu-b small { color: var(--fg-3); font-weight: 700; }
.fr-menu .modal-actions { flex-direction: column; }
.fr-refwin-b { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fr-refwin-b p { color: var(--fg-2); }
.fr-refwin-rw { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* =====================================================================================
   WIDGET: close button shared
   ===================================================================================== */
.w-x { position: absolute; right: -4px; top: -4px; z-index: 5; width: 36px; height: 36px; border-radius: 12px; border: 0; background: var(--glass-2); color: var(--fg-2); font-size: 15px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.w-x:active { transform: scale(.9); }

/* =====================================================================================
   WIDGET: DAILY STREAK
   ===================================================================================== */
.w-daily { position: relative; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.wd-loading { display: flex; flex-direction: column; gap: 14px; }
.wd-sk-h.skeleton { width: 70% !important; height: 64px; border-radius: 20px; }
.wd-sk.skeleton { width: 100% !important; height: auto; aspect-ratio: .82; border-radius: 16px; }
.wd-sk.big { grid-column: span 2; aspect-ratio: auto; }
.wd-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.wd-flame { position: relative; flex: none; width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: var(--glass-2); }
.wd-flame span { font-size: 40px; line-height: 1; filter: grayscale(1) opacity(.5); }
.wd-flame.lit { background: radial-gradient(circle at 50% 70%, rgba(255, 140, 40, .55), rgba(255, 60, 60, .2) 60%, transparent), var(--glass-2); box-shadow: 0 0 24px rgba(255, 120, 40, .45); }
.wd-flame.lit span { filter: drop-shadow(0 0 10px rgba(255, 120, 0, .8)); animation: flame 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes flame { 0% { transform: scale(1) rotate(-3deg); } 100% { transform: scale(1.1, 1.16) rotate(3deg); } }
.wd-streak-n { position: absolute; right: -8px; bottom: -8px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 99px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #FF8A00, #FF2E63); box-shadow: 0 0 0 3px var(--surface-solid), 0 4px 12px rgba(255, 60, 60, .45); }
.wd-head-t h2 { font-family: var(--font-kdisplay); font-weight: 400; font-size: 26px; line-height: 1.1; }
.wd-head-t p { font-size: 13px; color: var(--fg-2); margin-top: 3px; }
.wd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wd-card { position: relative; aspect-ratio: .8; perspective: 700px; animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i) * 45ms + 80ms); }
.wd-card.big { grid-column: span 2; aspect-ratio: auto; }
.wd-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease-spring); }
.wd-card.flipped .wd-inner { transform: rotateY(180deg); }
.wd-face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; overflow: hidden; }
.wd-front { background: var(--card-sheen), var(--glass-2); border: 1px solid var(--glass-border); }
.wd-back { transform: rotateY(180deg); background: linear-gradient(160deg, color-mix(in srgb, var(--success) 30%, transparent), color-mix(in srgb, var(--success) 10%, transparent)), var(--glass); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
.wd-back small { font-size: 11px; font-weight: 800; }
.wd-check { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 900; color: #04261A; background: linear-gradient(180deg, #5CF5BD, #18C987); box-shadow: 0 0 14px rgba(46, 229, 157, .6); }
.wd-card.just .wd-check { animation: mk-pop .6s var(--ease-spring) .35s both; }
.wd-day { font-size: 10.5px; font-weight: 800; color: var(--fg-3); }
.wd-ic { font-size: 30px; line-height: 1.05; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
.wd-amt { font-family: var(--font-display); font-size: 13px; font-weight: 800; }
.wd-plus { font-size: 9.5px; font-weight: 800; color: var(--fg-3); white-space: nowrap; }
.wd-rw { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.wd-rw .cur { min-height: 22px; padding: 0 7px 0 2px; }
.wd-rw .cur i { font-size: 12px; width: 16px; height: 16px; }
.wd-rw .cur b { font-size: 10.5px; }
.wd-card.big .wd-front { flex-direction: column; background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 40%, transparent), color-mix(in srgb, #FFB547 30%, transparent)), var(--glass-2); border-color: color-mix(in srgb, #FFC93C 45%, transparent); }
.wd-card.big .wd-day { color: var(--fg); }
.wd-chest { --cw: 62px; }
.wd-card.s-today .wd-front { border: 2px solid #FFC93C; background: linear-gradient(180deg, rgba(255, 201, 60, .26), rgba(255, 201, 60, .06)), var(--glass-2); box-shadow: 0 0 22px rgba(255, 190, 60, .45), inset 0 0 18px rgba(255, 220, 120, .18); }
.wd-card.s-today { z-index: 1; animation: mk-in .45s var(--ease-spring) both, mk-breathe 1.6s ease-in-out .6s infinite; }
.wd-card.s-today .wd-day { color: var(--gold); }
.wd-card.s-today .wd-ic { animation: mk-float 1.8s ease-in-out infinite; }
.wd-today { position: absolute; left: 50%; top: -9px; z-index: 3; transform: translateX(-50%); height: 18px; padding: 0 7px; border-radius: 6px; display: grid; place-items: center; white-space: nowrap;
  font-family: var(--font-display); font-size: 9px; font-weight: 900; letter-spacing: .05em; color: #3A1E00; background: var(--grad-gold); box-shadow: 0 2px 8px rgba(255, 170, 40, .5); }
.wd-card.s-future .wd-front { opacity: .82; }
.wd-cta { display: flex; flex-direction: column; gap: 10px; }
.wd-claim { width: 100%; }
.wd-claim:not([disabled]):not(.busy) { animation: btn-pulse 1.4s var(--ease-spring) infinite; }
.wd-next { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 16px; background: var(--glass); border: 1px dashed var(--glass-border); }
.wd-next small { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.wd-next b { font-family: var(--font-display); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* =====================================================================================
   WIDGET: LUCKY SPIN
   ===================================================================================== */
.w-spin-modal { overflow: visible; }
.w-spin { --ws: 280px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ws-head h2 { font-family: var(--font-kdisplay); font-weight: 400; font-size: 28px; line-height: 1.1; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(255, 170, 40, .35)); }
.ws-head p { font-size: 13px; color: var(--fg-2); margin-top: 2px; }
.ws-stage { --ws: 280px; position: relative; width: calc(var(--ws) + 30px); height: calc(var(--ws) + 30px); display: grid; place-items: center; margin: 6px 0 2px; }
.ws-halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 60, .35), color-mix(in srgb, var(--primary) 25%, transparent) 45%, transparent 68%); animation: mk-glowpulse 2.6s ease-in-out infinite; pointer-events: none; }
.ws-stage::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, #3A2470, #1A0F3A); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -3px 0 rgba(0, 0, 0, .35); }
[data-theme="paper"] .ws-stage::before { background: linear-gradient(160deg, #5B3FD0, #2B1A6E); }
.ws-bulbs { position: absolute; inset: 0; pointer-events: none; }
.ws-bulbs i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #FFF6C8;
  transform: rotate(var(--a)) translateY(calc(var(--ws) / -2 - 8px)); box-shadow: 0 0 8px #FFD54A, 0 0 2px #fff; animation: bulb 1.2s steps(1) infinite; animation-delay: calc(var(--i) % 2 * .6s); }
@keyframes bulb { 0% { opacity: 1; } 50% { opacity: .28; } }
.w-spin.spinning .ws-bulbs i { animation-duration: .24s; animation-delay: calc(var(--i) * 15ms); }
.ws-rotor { position: relative; width: var(--ws); height: var(--ws); border-radius: 50%; will-change: transform; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }
.ws-wheel { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ws-pointer { position: absolute; left: 50%; top: -4px; z-index: 3; width: 34px; height: 46px; margin-left: -17px; transform-origin: 50% 8px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.ws-pointer i { position: absolute; inset: 0; background: linear-gradient(180deg, #FFF6C8, #FFC93C 45%, #E08A1E); clip-path: polygon(50% 100%, 0 22%, 12% 6%, 50% 0, 88% 6%, 100% 22%); }
.ws-pointer i::after { content: ''; position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.ws-pointer.flap { animation: ptr-flap .16s ease-out; }
.ws-pointer.bounce { animation: ptr-bounce .7s var(--ease-spring); }
@keyframes ptr-flap { 0% { transform: rotate(0); } 35% { transform: rotate(-22deg); } 100% { transform: rotate(0); } }
@keyframes ptr-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(.95) rotate(4deg); } 100% { transform: none; } }
.ws-hub { position: absolute; left: 50%; top: 50%; z-index: 2; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 4px solid #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #FFF6C8, #FFC93C 45%, #E0701E); color: #4A2400; box-shadow: 0 6px 0 #9A4A10, 0 10px 22px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .6);
  transition: transform .15s var(--ease-spring), box-shadow .15s; }
.ws-hub b { font-family: var(--font-display); font-size: 15px; font-weight: 900; letter-spacing: .04em; }
.ws-hub:active { transform: translateY(4px); box-shadow: 0 2px 0 #9A4A10, 0 4px 10px rgba(0, 0, 0, .4); }
.ws-hub.free { animation: hub-pulse 1.3s var(--ease-spring) infinite; }
@keyframes hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.ws-hub[disabled] { animation: none; filter: saturate(.7); cursor: default; }
.ws-stage.won .ws-halo { animation: won-halo .9s ease-out; }
@keyframes won-halo { 0% { transform: scale(.8); opacity: 1; filter: brightness(2); } 100% { transform: scale(1.1); opacity: .6; } }
.ws-result { display: none; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 20px; background: var(--glass-2); border: 1px solid var(--glass-border); }
.ws-result.show { display: flex; animation: mk-pop .55s var(--ease-spring) both; }
.ws-result.big { background: var(--grad-gold); color: #3A1E00; border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 30px rgba(255, 180, 60, .55); }
.ws-res-ic { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); animation: mk-float 1.6s ease-in-out infinite; }
.ws-res-t { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ws-res-t small { font-size: 12px; font-weight: 800; opacity: .85; }
.ws-res-t > div { font-family: var(--font-display); font-size: 24px; font-weight: 900; }
.ws-res-t span { font-family: var(--font-body); font-size: 14px; font-weight: 800; }
.ws-cta { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ws-go { width: 100%; }
.ws-go.btn-gold:not([disabled]) { animation: btn-pulse 1.4s var(--ease-spring) infinite; }
.ws-go.cant { filter: grayscale(.45) brightness(.9); }
.ws-cost { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 10px; background: rgba(0, 0, 0, .2); font-family: var(--font-display); font-size: 14px; }
.ws-note { font-size: 12px; color: var(--fg-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-note b { font-family: var(--font-display); color: var(--fg-2); }

/* =====================================================================================
   WIDGET: LEVEL UP (full screen)
   ===================================================================================== */
.w-levelup { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; overflow: hidden; cursor: pointer; color: #fff; outline: none;
  opacity: 0; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.w-levelup.in { opacity: 1; }
.w-levelup.out { opacity: 0; transition-duration: .35s; }
.wl-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--primary) 55%, #0B0820) 0%, rgba(8, 6, 24, .94) 62%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wl-rays { position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .16) 0deg 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 4%, transparent 50%); mask: radial-gradient(circle, #000 4%, transparent 50%);
  animation: mk-rot 22s linear infinite; }
.wl-glow { position: absolute; left: 50%; top: 42%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 90, .55), rgba(255, 140, 60, .18) 45%, transparent 70%);
  animation: lv-glow 2.2s ease-in-out infinite; }
@keyframes lv-glow { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .8; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
.wl-stars i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #FFD54A; transform: scale(var(--s)); animation: twinkle 1.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(calc(var(--s) * .5)); } 50% { opacity: 1; transform: scale(var(--s)); } }
.wl-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; text-align: center; transform: scale(.6); opacity: 0;
  transition: transform .7s var(--ease-spring), opacity .3s; }
.w-levelup.in .wl-content { transform: none; opacity: 1; }
.wl-mascot img { width: min(170px, 42vw); height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45)); animation: lv-mascot .9s var(--ease-spring) .1s both, mk-float 2.6s ease-in-out 1s infinite; }
@keyframes lv-mascot { 0% { transform: translateY(80px) scale(.4) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.wl-kicker { font-family: var(--font-display); font-size: clamp(26px, 8vw, 38px); font-weight: 900; letter-spacing: .04em; background: linear-gradient(180deg, #FFF6C8, #FFC93C 50%, #FF8A3C); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255, 150, 40, .55)); animation: mk-pop .6s var(--ease-spring) .25s both; }
.wl-lv { display: flex; align-items: baseline; gap: 6px; line-height: 1; margin: 2px 0 4px; }
.wl-lv small { font-family: var(--font-display); font-size: 26px; font-weight: 800; opacity: .8; }
.wl-num { font-family: var(--font-display); font-size: clamp(84px, 26vw, 128px); font-weight: 900; letter-spacing: -0.04em; color: #fff; text-shadow: 0 0 30px color-mix(in srgb, var(--primary) 80%, transparent), 0 6px 0 rgba(0, 0, 0, .25); display: inline-block; }
.w-levelup.hit .wl-num { animation: lv-hit .55s var(--ease-spring); }
@keyframes lv-hit { 0% { transform: scale(1); } 30% { transform: scale(1.35); color: #FFE27A; } 100% { transform: scale(1); } }
.wl-sub { font-size: 15px; font-weight: 700; opacity: .9; }
.wl-rw { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.wl-chip { opacity: 0; transform: scale(.4); background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .28) !important; }
.w-levelup.hit .wl-chip { animation: mk-pop .55s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 120ms + 150ms); }
.wl-unlock { margin-top: 6px; padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 800; color: #3A1E00; background: var(--grad-gold); opacity: 0; }
.w-levelup.hit .wl-unlock { animation: mk-pop .5s var(--ease-spring) .5s both; }
.wl-hint { margin-top: 18px; font-size: 13px; font-weight: 700; opacity: 0; transition: opacity .4s; }
.w-levelup.ready .wl-hint { opacity: .75; animation: hint-blink 1.6s ease-in-out infinite; }
@keyframes hint-blink { 0%, 100% { opacity: .75; } 50% { opacity: .35; } }

/* =====================================================================================
   WIDGET: ACHIEVEMENT TOASTS
   ===================================================================================== */
.w-ach-host { position: fixed; z-index: 1250; left: 50%; top: calc(var(--safe-top) + 10px); width: min(420px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.wa-card { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px; padding: 12px 16px 14px 12px; border-radius: 22px; overflow: hidden; pointer-events: auto; cursor: pointer; touch-action: none;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(135deg, #FFE27A, #FFB547 45%, #FF7A3C) border-box; border: 2px solid transparent;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(255, 190, 60, .35);
  transform: translateY(-150%) scale(.9); opacity: 0; transition: transform .55s var(--ease-spring), opacity .25s; }
.wa-card.in { transform: none; opacity: 1; }
.wa-card.out { transform: translateY(-150%) scale(.95); opacity: 0; transition: transform .32s ease-in, opacity .3s; }
.wa-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 240, 180, .35), transparent); transform: translateX(-120%) skewX(-18deg); }
.wa-card.in .wa-shine { animation: mk-shine 1.6s ease-out .3s 1 both; }
.wa-ic { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFC93C 55%, #E08A1E); box-shadow: 0 0 0 3px rgba(255, 220, 120, .35), 0 0 18px rgba(255, 190, 60, .6); }
.wa-ic span { position: relative; z-index: 1; font-size: 30px; line-height: 1; }
.wa-card.in .wa-ic span { animation: mk-pop .6s var(--ease-spring) .15s both; }
.wa-rays { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 120, .45) 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 66%); mask: radial-gradient(circle, #000 30%, transparent 66%); animation: mk-rot 6s linear infinite; z-index: 0; }
.wa-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-t small { font-size: 11.5px; font-weight: 800; color: var(--gold); }
.wa-t b { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-t p { margin: 0; font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-rw { display: flex; gap: 4px; margin-top: 3px; }
.wa-rw .cur { min-height: 24px; padding: 0 8px 0 2px; }
.wa-rw .cur i { font-size: 13px; width: 17px; height: 17px; }
.wa-rw .cur b { font-size: 11.5px; }
.wa-timer { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--grad-gold); transform-origin: left; opacity: .7; transform: scaleX(1); }
.wa-card.in .wa-timer { transform: scaleX(0); transition: transform var(--hold, 2800ms) linear .4s; }

/* =====================================================================================
   addictive extras: ribbons, almost-affordable row, tomorrow preview, spin tease
   ===================================================================================== */
.sh-ribbon { position: absolute; z-index: 4; top: 13px; right: -32px; width: 112px; padding: 3px 0; transform: rotate(45deg); text-align: center; pointer-events: none;
  font-family: var(--font-body); font-size: 11px; font-weight: 900; letter-spacing: .06em; color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.sh-ribbon.rb-new { background: linear-gradient(90deg, #2EE59D, #00B3FF); }
.sh-ribbon.rb-hot { background: linear-gradient(90deg, #FF7A3C, #FF2E63); }
.sh-ribbon.rb-limited { background: linear-gradient(90deg, #B05CFF, #FF4D8D); }
.sh-ribbon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: mk-shine 2.8s ease-in-out infinite; }
.sh-soon:empty { display: none; }
.sh-soon { display: flex; flex-direction: column; gap: 8px; animation: mk-in .45s var(--ease-spring) both; }
.sh-soon-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.sh-soon-h b { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
.sh-soon-h small { font-size: 12px; color: var(--fg-3); font-weight: 700; }
.sh-soon-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 2px var(--gutter, 16px) 6px; scroll-snap-type: x proximity; }
.sh-soon-row::-webkit-scrollbar { display: none; }
.sh-mini { --rc: var(--r-common); flex: none; width: 128px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 7px 7px 9px; border-radius: 18px; cursor: pointer;
  background: var(--mk-card-bg); border: 1px solid color-mix(in srgb, var(--rc) 45%, var(--glass-border)); animation: mk-in .45s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 50ms);
  transition: transform .2s var(--ease-spring); }
.sh-mini.r-rare { --rc: var(--r-rare); } .sh-mini.r-epic { --rc: var(--r-epic); } .sh-mini.r-legendary { --rc: var(--r-legendary); }
.sh-mini.pressed { transform: scale(.95); }
.sh-mini .sh-pv { aspect-ratio: 1.25; border-radius: 12px; }
.sh-mini .sh-pv-title .ti-emoji { font-size: 28px; }
.sh-mini .sh-pv-title .mk-title { display: none; }
.sh-mini .sh-pv-theme .t-sw, .sh-mini .sh-pv-skin .sk-game { display: none; }
.sh-mini-n { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-mini-bar { height: 7px; }
.sh-mini-p { font-family: var(--font-display); font-size: 10.5px; font-weight: 800; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sh-mini.ok { border-color: color-mix(in srgb, var(--success) 60%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--success) 25%, transparent); }
.sh-mini.ok .sh-mini-p { color: var(--success); font-family: var(--font-body); font-size: 11.5px; }
.ach-p small b { font-family: var(--font-display); color: var(--fg); }
.ach-hot { position: absolute; top: 6px; right: 6px; height: 18px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font-size: 9.5px; font-weight: 900; color: #fff;
  background: linear-gradient(90deg, #FF7A3C, #FF2E63); box-shadow: 0 2px 8px rgba(255, 60, 80, .4); animation: dot-pulse 1.6s ease-in-out infinite; }
.wd-tmr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); }
.wd-tmr.big { border-color: color-mix(in srgb, #FFC93C 50%, transparent); background: linear-gradient(90deg, rgba(255, 201, 60, .18), transparent), var(--glass); }
.wd-tmr-l { font-size: 12.5px; font-weight: 800; color: var(--fg-2); }
.wd-tmr-r { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.wd-tmr-r .cur { min-height: 24px; padding: 0 8px 0 2px; }
.wd-tmr-r .cur i { font-size: 13px; width: 17px; height: 17px; }
.wd-tmr-r .cur b { font-size: 11.5px; }
.wd-warn { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--fg-3); }
.ws-stage.tease .ws-halo { animation: tease-flash .28s ease-out; }
@keyframes tease-flash { 0% { filter: brightness(2.2) saturate(1.4); transform: scale(1.06); } 100% { filter: none; transform: none; } }
.rk-me-go { flex: none; padding: 0 12px; }

/* =====================================================================================
   desktop column niceties
   ===================================================================================== */
@media (min-width: 560px) {
  .rk-podium { gap: 14px; }
  .ms-ach-grid { gap: 12px; }
}

/* =====================================================================================
   reduced motion
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mscr *, .mscr *::before, .mscr *::after, .mk-sheet *, .mk-sheet *::before, .mk-sheet *::after,
  .w-levelup, .w-levelup *, .w-levelup *::before, .w-levelup *::after, .w-ach-host *, .w-ach-host *::before, .w-ach-host *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
}
html.reduce-motion .mscr *, html.reduce-motion .mscr *::before, html.reduce-motion .mscr *::after,
html.reduce-motion .mk-sheet *, html.reduce-motion .mk-sheet *::before, html.reduce-motion .mk-sheet *::after,
html.reduce-motion .w-levelup, html.reduce-motion .w-levelup *, html.reduce-motion .w-levelup *::before, html.reduce-motion .w-levelup *::after,
html.reduce-motion .w-ach-host *, html.reduce-motion .w-ach-host *::before, html.reduce-motion .w-ach-host *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important;
}