/* ═══ Работа: статус, карточка лучшей смены, сетка профессий с рисунком игры ═══ */
.wstat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 22px; }
.wring { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: #7fd8ad; }
.wring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 4; fill: none; }
.wring .rt { stroke: rgba(255,255,255,.1); } .wring .rp { stroke: #7fd8ad; stroke-linecap: round; }
.wring > svg:last-child, .wring > .mk { width: 18px; height: 18px; }
.wstat b { font-size: 15.5px; } .wstat .mut { font-size: 12.5px; }

.whero { position: relative; overflow: hidden; display: block; padding: 16px; margin-bottom: 10px; border-radius: 26px; min-height: 190px;
  background: radial-gradient(90% 110% at 100% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 62%), radial-gradient(70% 80% at 0% 100%, rgba(79,174,132,.16), transparent 70%), var(--card);
  border-color: color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.08)); }
.whero::before { display: none; }
.whero .wart { position: absolute; right: -14px; top: -8px; width: 170px; height: 170px; color: var(--c); opacity: .95; transform: rotate(10deg); filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--c) 40%, transparent)); pointer-events: none; }
.whero .wart svg { width: 100%; height: 100%; stroke-width: 2.6; }
.whero .wtxt { position: relative; max-width: 62%; }
.whero .wn { font-size: 23px; font-weight: 800; letter-spacing: -.015em; line-height: 1.12; margin-top: 10px; }
.whero .wg { margin-top: 5px; font-size: 12.5px; color: var(--mute); }
.whero .wpay { margin-top: 12px; font-size: 20px; font-weight: 750; color: var(--gold); }
.whero .wpay small { font-size: 12px; font-weight: 500; color: var(--mute); }
.whero .btn { position: relative; margin-top: 14px; }
.wg i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }

.whow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 4px; }
.whow > div { padding: 8px 4px 7px; border-radius: 14px; text-align: center; background: rgba(255,255,255,.04); }
.whow b { display: block; font-size: 14.5px; font-weight: 750; color: #9be0bf; }
.whow > div:nth-child(2) b { color: #cfe0a6; } .whow > div:nth-child(3) b { color: #e3c878; } .whow > div:nth-child(4) b { color: #e0a48a; }
.whow small { display: block; font-size: 10px; line-height: 1.2; color: var(--mute); margin-top: 1px; }

.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wcard { position: relative; overflow: hidden; display: block; height: 148px; padding: 13px; margin: 0; border-radius: 22px; transition: transform .15s;
  background: radial-gradient(95% 95% at 100% 100%, color-mix(in srgb, var(--c) 24%, transparent), transparent 64%), var(--card); }
.wcard::before { display: none; }
.wcard:active, .whero:active { transform: scale(.97); }
.wcard .wart { position: absolute; right: -12px; bottom: -14px; width: 104px; height: 104px; color: var(--c); transform: rotate(-12deg); opacity: .92; pointer-events: none; transition: transform .2s;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--c) 35%, transparent)); }
.wcard:active .wart { transform: rotate(-12deg) scale(1.08); }
.wcard .wart svg { width: 100%; height: 100%; }
.wcard .wtxt { position: relative; z-index: 1; max-width: 78%; }
.wcard .wn { font-size: 14.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcard .wg { margin-top: 4px; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfoot { position: absolute; left: 13px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.wfoot .wpay { padding: 4px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--gold); background: rgba(10,12,11,.62); white-space: nowrap; }
.wfoot .wxp { font-size: 10.5px; color: var(--mute); padding-left: 2px; }
.wcard.lock { opacity: 1; }
.wcard.lock { background: var(--card); }
.wcard.lock .wart { color: var(--faint); filter: none; opacity: .5; }
.wcard.lock .wn { color: var(--mute); }
.wcard.lock .wg i { background: var(--faint); }
.wcard.lock .wfoot .wpay { color: var(--mute); }