.wp-player {
    --wp-amber: #f7b848;
    --wp-reload-time: 2200ms;
    --wp-kick: -13px;
    --wp-rise: -1.8deg;
    width: 100%;
    min-width: 0;
    color: #eee8dc;
    font-family: inherit;
    text-align: left;
}
.wp-player *, .wp-player *::before, .wp-player *::after { box-sizing: border-box; }
.wp-player[data-category*="shotgun"], .wp-player[data-category*="sniper"] { --wp-kick: -22px; --wp-rise: -3deg; }
.wp-player[data-category*="pistol"], .wp-player[data-category*="revolver"] { --wp-kick: -10px; --wp-rise: -4deg; }
.wp-player[data-category*="machine"] { --wp-kick: -9px; --wp-rise: -1deg; }
.wp-player .wp-surface {
    display: block;
    position: relative;
    width: 100%;
    min-height: 180px;
    aspect-ratio: 1.62;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ffffff0d;
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 45%, #51452c35 0%, #171716 64%);
    color: inherit;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    isolation: isolate;
}
.wp-player .wp-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 50px #0002;
    border-radius: inherit;
}
.wp-player .wp-surface:hover { border-color: #f7b84852; }
.wp-player .wp-surface:focus-visible, .wp-player .wp-reload:focus-visible, .wp-player .wp-shoot:focus-visible { outline: 2px solid var(--wp-amber); outline-offset: 4px; }
.wp-player .wp-surface:disabled { cursor: default; opacity: .65; }
.wp-player[data-phase="reloading"] .wp-surface { opacity: 1; cursor: wait; }
.wp-player .wp-scene { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wp-player .wp-impact-stage { position: absolute; top: 0; right: 0; width: 32%; height: 48%; pointer-events: none; overflow: visible; }
.wp-player[data-category="melee"] .wp-impact-stage { top: 8%; right: 7%; width: 38%; height: 58%; }
.wp-player .wp-art { transform-origin: 48% 55%; transform-box: view-box; }
.wp-player .wp-magazine { transform-origin: 50% 64%; transform-box: view-box; }
.wp-player .wp-no-art { fill: #9b978f; font: 32px sans-serif; }
.wp-player .wp-hint {
    position: absolute;
    left: 14px;
    bottom: 11px;
    font-family: inherit;
    line-height: 1.4;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .15em;
    color: #c5b795a3;
    pointer-events: none;
}
.wp-player .wp-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 36px; }
.wp-player .wp-ammunition { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-player .wp-rounds { color: #f3eee3; font-size: 27px; font-weight: 700; line-height: 1; }
.wp-player .wp-capacity { color: #8d8b84; font-size: 12px; }
.wp-player .wp-mode { color: #b0a48a; font-size: 9px; letter-spacing: .12em; }
.wp-player .wp-reload, .wp-player .wp-shoot {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid #f7b84855;
    background: #f7b84812;
    color: var(--wp-amber);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.wp-player .wp-shoot { margin-left: auto; border-color: #f7b848; background: #f7b848; color: #1c170d; touch-action: pan-y; }
.wp-player .wp-shoot:hover:not(:disabled) { background: #ffcd71; }
.wp-player .wp-shoot:disabled { opacity: .43; cursor: default; }
.wp-player .wp-reload:hover:not(:disabled) { background: #f7b84826; border-color: var(--wp-amber); }
.wp-player .wp-reload:disabled { opacity: .43; cursor: default; }
.wp-player [hidden] { display: none !important; }
.wp-player .wp-status { min-height: 1.4em; margin: 9px 0 0; font-size: 11px; line-height: 1.4; color: #96938c; }
.wp-player .wp-progress { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: #ffffff12; }
.wp-player .wp-progress > span { display: block; height: 100%; width: 100%; background: var(--wp-amber); transform: scaleX(0); transform-origin: left; }
.wp-player .wp-flash { opacity: 0; }
.wp-player.is-firing .wp-flash { animation: wp-flash 75ms ease-out both; }
.wp-player.is-firing .wp-art { animation: wp-recoil 180ms ease-out both; }
.wp-player[data-reload-style="none"].is-firing .wp-flash { display: none; }
.wp-player[data-muzzle="false"] .wp-flash { display: none; }
.wp-player[data-reload-style="none"].is-firing .wp-art { animation: wp-swing var(--wp-swing-time, 260ms) ease-out var(--wp-swing-delay, 0ms) both; }
.wp-player.is-reloading .wp-art { animation: wp-reload-pose var(--wp-reload-time) ease-in-out both; }
.wp-player.is-reloading[data-reload-style="magazine"] .wp-magazine, .wp-player.is-reloading[data-reload-style="cylinder-exchange"] .wp-magazine { animation: wp-magazine-change var(--wp-reload-time) ease-in-out both; }
.wp-player.is-reloading[data-reload-style="shell"] .wp-art { animation: wp-shell-load var(--wp-reload-time) ease-in-out both; }
.wp-player.is-reloading[data-reload-style="break"] .wp-art { animation: wp-break-load var(--wp-reload-time) ease-in-out both; }
.wp-player.is-reloading[data-reload-style="cylinder"] .wp-art { animation: wp-cylinder-load var(--wp-reload-time) ease-in-out both; }
.wp-compact .wp-surface { min-height: 138px; aspect-ratio: 1.55; border-radius: 8px; }
.wp-compact .wp-controls { gap: 8px; margin-top: 10px; }
.wp-compact .wp-mode { display: none; }
.wp-compact .wp-rounds { font-size: 23px; }
.wp-compact .wp-status { font-size: 10px; }
.wp-compact .wp-reload, .wp-compact .wp-shoot { padding-inline: 10px; }
@media (pointer: coarse), (max-width: 540px) {
    .wp-player .wp-reload, .wp-player .wp-shoot { min-height: 44px; }
}
@keyframes wp-recoil { 0% { transform: translateX(0) rotate(0); } 18% { transform: translateX(var(--wp-kick)) rotate(var(--wp-rise)); } 100% { transform: translateX(0) rotate(0); } }
@keyframes wp-flash { 0%, 24% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wp-swing { 0%, 100% { transform: rotate(0); } 35% { transform: translateX(-20px) rotate(-10deg); } 65% { transform: translateX(24px) rotate(8deg); } }
@keyframes wp-reload-pose { 0%, 100% { transform: rotate(0) translateY(0); } 15%, 75% { transform: rotate(-8deg) translateY(-20px); } 84% { transform: rotate(-4deg) translateX(-14px); } 90% { transform: rotate(-3deg) translateX(6px); } }
@keyframes wp-magazine-change { 0%, 12%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; } 34% { transform: translate(-20px, 220px) rotate(10deg); opacity: 0; } 44% { transform: translate(15px, 230px) rotate(-8deg); opacity: 0; } 54% { opacity: 1; } 71% { transform: translate(0, -9px) rotate(0); } 77% { transform: translate(0, 0) rotate(0); } }
@keyframes wp-shell-load { 0%, 100% { transform: rotate(0); } 12%, 80% { transform: rotate(-13deg) translateY(-12px); } 30%, 50%, 70% { transform: rotate(-11deg) translateY(-7px); } 90% { transform: rotate(-5deg) translateX(-17px); } }
@keyframes wp-break-load { 0%, 100% { transform: rotate(0); } 20%, 70% { transform: rotate(15deg) translateY(12px); } 85% { transform: rotate(-3deg); } }
@keyframes wp-cylinder-load { 0%, 100% { transform: rotate(0) scaleX(1); } 20%, 72% { transform: rotate(-12deg) scaleX(.92); } 82% { transform: rotate(-6deg) scaleX(.97); } }
@media (prefers-reduced-motion: reduce) {
    .wp-player .wp-art, .wp-player .wp-magazine { animation: none !important; transform: none !important; }
    .wp-player .wp-effects, .wp-player .wp-flash, .wp-player .wp-impact-stage { display: none; }
}
