.pn-skin-pixel {
    --mc-grass: #7ED957;
    --mc-grass-light: #8FE86B;
    --mc-grass-dark: #5CB334;
    --mc-dirt: #6E4327;
    --mc-dirt-dark: #5A3620;
    --mc-panel: #26262B;
    --mc-slot: #1D1D21;
    --mc-stone: #6E6E72;
    --mc-stone-light: #9D9DA2;
    --mc-stone-dark: #46464A;
}

.pn-skin-pixel .pn-card,
.pn-skin-pixel .pn-stat {
    border-radius: 2px;
    border-width: 2px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .04), inset 0 -3px 0 rgba(0, 0, 0, .35);
}

.pn-skin-pixel .pn-card-title,
.pn-skin-pixel .pn-stat-value {
    font-family: "VT323", ui-monospace, monospace;
    letter-spacing: .05em;
}

.pn-skin-pixel .pn-card-title {
    font-size: 1.15rem;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}

.pn-skin-pixel .pn-stat-value {
    font-size: 1.5rem;
}

.pn-skin-pixel .pn-badge {
    border-radius: 2px;
    text-transform: uppercase;
    font-family: "VT323", ui-monospace, monospace;
    font-size: .95rem;
    letter-spacing: .06em;
    border-color: #000;
}

.pn-skin-pixel .pn-btn {
    border-radius: 2px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -2px 0 rgba(0, 0, 0, .3);
}

.pn-skin-pixel .pn-thumb {
    border-radius: 0;
}

.pn-skin-pixel .font-mono {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.1em;
    letter-spacing: .03em;
}

.pn-skin-pixel .pn-game-icon {
    background: url("/assets/games/minecraft/icon.svg") center / cover no-repeat;
    image-rendering: pixelated;
    border-color: rgba(0, 0, 0, .55);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    inset 2px 0 0 rgba(255, 255, 255, .08),
    inset -2px 0 0 rgba(0, 0, 0, .18);
}

.pn-skin-pixel .pn-game-icon::after {
    content: none;
}

.server-card.pn-skin-pixel {
    border-color: color-mix(in srgb, var(--mc-grass) 48%, #000);
    background:
        repeating-linear-gradient(90deg, rgba(126, 217, 87, .045) 0 12px, transparent 12px 24px),
        linear-gradient(135deg, color-mix(in srgb, var(--game-tint) 55%, transparent), transparent 46%),
        var(--pn-surface);
    box-shadow: inset 4px 0 0 var(--mc-grass);
}

.pn-skin-pixel[id^="server-control-"] {
    position: relative;
    min-height: 190px;
    display: flex;
    align-items: flex-end;
    border: 3px solid #000;
    border-radius: 4px;
    padding: 1rem;
    image-rendering: pixelated;
    box-shadow: 0 0 0 2px #101014, 0 10px 30px rgba(0, 0, 0, .5);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .55) 100%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 16px) left bottom / 100% 64px repeat-x,
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 16px) left bottom / 100% 64px repeat-x,
        linear-gradient(var(--mc-dirt) 0 0) left bottom / 100% 64px no-repeat,
        repeating-linear-gradient(90deg, var(--mc-grass) 0 16px, var(--mc-grass-dark) 16px 32px) left bottom 64px / 100% 22px no-repeat,
        linear-gradient(var(--mc-grass-light) 0 0) left bottom 86px / 100% 3px no-repeat,
        linear-gradient(180deg, #4E7FD0 0%, #7FA8EE 45%, #B7D0F5 78%, #D8E6F8 100%);
}

.pn-skin-pixel[id^="server-control-"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(253, 244, 201, .32) 0 42%, transparent 58%) right 52px top 12px / 72px 72px no-repeat,
        linear-gradient(#FDF4C9 0 0) right 66px top 26px / 44px 44px no-repeat,
        linear-gradient(#FFFFFF 0 0) left 110px top 30px / 56px 12px no-repeat,
        linear-gradient(#FFFFFF 0 0) left 122px top 18px / 32px 12px no-repeat,
        linear-gradient(rgba(255, 255, 255, .75) 0 0) left 46% top 62px / 44px 10px no-repeat,
        linear-gradient(rgba(255, 255, 255, .75) 0 0) left calc(46% + 12px) top 52px / 20px 10px no-repeat;
}

.pn-skin-pixel[id^="server-control-"] .pn-game-icon {
    width: 3.25rem;
    height: 3.25rem;
    border: 3px solid #000;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 8px),
        linear-gradient(var(--mc-grass-light) 0 12%, var(--mc-grass) 12% 34%, var(--mc-dirt) 34% 100%);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .18), inset -2px -2px 0 rgba(0, 0, 0, .45), 0 0 0 2px #101014;
}

.pn-skin-pixel[id^="server-control-"] .pn-game-icon::after {
    content: none;
}

.pn-skin-pixel[id^="server-control-"] .pn-card-title {
    font-size: 1.75rem;
    color: #FFFFFF;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .7);
}

.pn-skin-pixel[id^="server-control-"] > .relative {
    width: 100%;
}

.pn-skin-pixel[id^="server-control-"] .pn-server-plate {
    background: rgba(12, 14, 12, .82);
    border: 2px solid #000;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08);
    padding: .5rem .875rem .625rem;
}

.pn-skin-pixel[id^="server-control-"] .pn-faint {
    color: #B9C2B4;
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn,
.pn-skin-page.pn-skin-pixel .pn-btn {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.15rem;
    letter-spacing: .05em;
    font-weight: 400;
    color: #FFFFFF;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .65);
    background: var(--mc-stone);
    border: 2px solid #000;
    border-radius: 0;
    padding: .3rem 1rem .4rem;
    box-shadow: inset 2px 2px 0 var(--mc-stone-light), inset -2px -2px 0 var(--mc-stone-dark), 0 3px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn:hover:not(:disabled),
.pn-skin-page.pn-skin-pixel .pn-btn:hover:not(:disabled) {
    color: #FFFFFF;
    background: #7A8DBE;
    box-shadow: inset 2px 2px 0 #A9B8E0, inset -2px -2px 0 #4C5A80, 0 3px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn:active:not(:disabled),
.pn-skin-page.pn-skin-pixel .pn-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 2px 2px 0 var(--mc-stone-light), inset -2px -2px 0 var(--mc-stone-dark), 0 1px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn-success,
.pn-skin-page.pn-skin-pixel .pn-btn-primary {
    background: #4F8F3D;
    box-shadow: inset 2px 2px 0 #7EC46A, inset -2px -2px 0 #33601F, 0 3px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn-success:hover:not(:disabled),
.pn-skin-page.pn-skin-pixel .pn-btn-primary:hover:not(:disabled) {
    background: #5CA347;
    box-shadow: inset 2px 2px 0 #7EC46A, inset -2px -2px 0 #33601F, 0 3px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn-danger,
.pn-skin-page.pn-skin-pixel .pn-btn-danger {
    background: #8E3B3B;
    color: #FFFFFF;
    box-shadow: inset 2px 2px 0 #C06A6A, inset -2px -2px 0 #5E2424, 0 3px 0 #000;
}

.pn-skin-pixel[id^="server-control-"] .pn-btn-danger:hover:not(:disabled),
.pn-skin-page.pn-skin-pixel .pn-btn-danger:hover:not(:disabled) {
    background: #A84A4A;
    color: #FFFFFF;
    box-shadow: inset 2px 2px 0 #C06A6A, inset -2px -2px 0 #5E2424, 0 3px 0 #000;
}

.server-shell:has(.pn-skin-pixel) .pn-tabs {
    gap: .375rem;
    border-bottom: 2px solid #000;
}

.server-shell:has(.pn-skin-pixel) .pn-tab {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--mc-panel);
    border: 2px solid #000;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    margin-bottom: -2px;
    padding: .4rem 1.15rem .3rem;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .07), inset -2px 0 0 rgba(0, 0, 0, .35);
}

.server-shell:has(.pn-skin-pixel) .pn-tab:hover:not(.is-active) {
    background: #2C2C32;
    color: #D7DBE0;
}

.server-shell:has(.pn-skin-pixel) .pn-tab.is-active {
    color: #FFFFFF;
    background: #33333A;
    box-shadow: inset 0 3px 0 var(--mc-grass), inset 2px 2px 0 rgba(255, 255, 255, .08);
}

.pn-skin-page.pn-skin-pixel {
    position: relative;
    isolation: isolate;
    padding-bottom: 26px;
}

.pn-skin-page.pn-skin-pixel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--game-primary) 13%, transparent) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--game-primary) 13%, transparent) 0 1px, transparent 1px 36px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 100%);
}

.pn-skin-page.pn-skin-pixel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    image-rendering: pixelated;
    background: repeating-linear-gradient(90deg, var(--game-primary) 0 18px, color-mix(in srgb, var(--game-primary) 72%, #000) 18px 36px);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .18);
}

.pn-skin-page.pn-skin-pixel .pn-card {
    position: relative;
    border-color: #000;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 3px, transparent 3px 6px),
        var(--mc-panel);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .06), inset -2px -2px 0 rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .35);
}

.pn-skin-page.pn-skin-pixel .pn-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--game-primary, var(--mc-grass));
    opacity: .85;
}

.pn-skin-page.pn-skin-pixel .pn-stat {
    background: var(--mc-slot);
    border-color: #000;
    border-radius: 0;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -2px -2px 0 rgba(255, 255, 255, .06);
}

.pn-skin-page.pn-skin-pixel .pn-stat:hover {
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -2px -2px 0 rgba(255, 255, 255, .06), 0 0 0 2px rgba(255, 255, 255, .75);
}

.pn-skin-pixel .pn-stat-label {
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pn-skin-pixel .pn-stat-label::before {
    content: "\25A0 ";
    color: var(--game-primary);
    font-size: .6rem;
    vertical-align: 2px;
}

.pn-skin-page.pn-skin-pixel .pn-address {
    color: #D9FFC8;
    background: var(--mc-slot);
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -2px -2px 0 rgba(255, 255, 255, .05);
    text-shadow: 0 0 8px rgba(126, 252, 32, .35);
}

.mc-player-count {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--pn-muted);
    font-family: "VT323", ui-monospace, monospace;
    font-size: 1.2rem;
    letter-spacing: .05em;
}

.mc-player-hearts {
    width: 9rem;
    height: 1.35rem;
    appearance: none;
    border: 0;
    background: #3A3A40;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='black' d='M12 22 3 13C-3 7 2-2 9 2l3 3 3-3c7-4 12 5 6 11z'/%3E%3C/svg%3E") left center / 20% 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='black' d='M12 22 3 13C-3 7 2-2 9 2l3 3 3-3c7-4 12 5 6 11z'/%3E%3C/svg%3E") left center / 20% 100% repeat-x;
    filter: drop-shadow(2px 2px 0 #000);
}

.mc-player-hearts::-webkit-progress-bar {
    background: #3A3A40;
}

.mc-player-hearts::-webkit-progress-value {
    background: #FF5A5A;
}

.mc-player-hearts::-moz-progress-bar {
    background: #FF5A5A;
}