/*
 * The panels: privacy page, the hamburger, achievements, notifications, the
 * power-up list and the scrollbars they use.
 *
 * Split from style.css so no file runs long. Nothing here is referenced by the
 * canvas; it is all the page furniture around it.
 */

/* Privacy Page */
.privacy-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    height: calc(100vh - 100px);
    z-index: 50;
    overflow-y: auto;
}

.privacy-content {
    background: rgba(23, 30, 43, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 40px;
    color: #ffffff;
}

.privacy-content h1 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #ffffff;
}

.privacy-content .last-updated {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
    font-style: italic;
}

.privacy-content h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.privacy-content p {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
}

.privacy-content a {
    color: #4d82c4;
    text-decoration: none;
}

.privacy-content a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .privacy-container {
        width: 95%;
        top: 70px;
        height: calc(100vh - 80px);
    }
    
    .privacy-content {
        padding: 30px 20px;
    }
    
    .privacy-content h1 {
        font-size: 28px;
    }
}


/* Hamburger Button */
.hamburger-btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    z-index: 101;
    transition: color 0.3s ease;
}

.hamburger-btn:hover {
    color: #ffffff;
}

/* Update header to accommodate hamburger */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px 20px 70px;
    background: rgba(23, 30, 43, 0.7);
    backdrop-filter: blur(10px);
    z-index: 100;
}


/* Panels - Both start below header */
.slide-panel {
    position: fixed;
    top: 80px;
    width: 500px;
    height: calc(100vh - 80px);
    background: rgba(23, 30, 43, 0.95);
    backdrop-filter: blur(20px);
    z-index: 200;
    transition: left 0.4s ease, right 0.4s ease;
    overflow-y: auto;
}

.slide-panel-left {
    left: -500px;
}

.slide-panel-left.active {
    left: 0;
}

.slide-panel-right {
    right: -500px;
}

.slide-panel-right.active {
    right: 0;
}


/* Achievements */
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.achievement {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.achievement.locked {
    opacity: 0.5;
}

.achievement.unlocked {
    border-color: #305268;
    background: rgba(119, 77, 196, 0.1);
}

.achievement-icon {
    font-size: 32px;
    min-width: 40px;
    text-align: center;
}

.achievement-info {
    flex: 1;
}

.achievement-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}


.achievement-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* Achievement Notifications */
.achievement-notification {
    position: fixed;
    top: 100px;
    right: -400px;
    width: 350px;
    background: #305268;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 300;
    transition: right 0.3s ease;
}

.achievement-notification.show {
    right: 20px;
}

.achievement-notification-icon {
    font-size: 48px;
    min-width: 50px;
    text-align: center;
}

.achievement-notification-text {
    flex: 1;
}

.achievement-notification-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
}

.achievement-notification-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

/* Power-up list */
.powerup-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.powerup-item {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}


/* Scrollbar Styling for Panels */
.slide-panel::-webkit-scrollbar {
    width: 8px;
}

.slide-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.slide-panel::-webkit-scrollbar-thumb {
    background: rgba(119, 77, 196, 0.5);
    border-radius: 4px;
}

.slide-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(119, 77, 196, 0.7);
}

.privacy-container::-webkit-scrollbar {
    width: 8px;
}

.privacy-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.privacy-container::-webkit-scrollbar-thumb {
    background: rgba(119, 77, 196, 0.5);
    border-radius: 4px;
}

.privacy-container::-webkit-scrollbar-thumb:hover {
    background: rgba(119, 77, 196, 0.7);
}


/* Apps Panel - Full Width */
.apps-panel {
    position: fixed;
    top: -500px;
    left: 0;
    right: 0;
    background: rgba(23, 30, 43, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99;
    transition: top 0.4s ease;
    padding: 30px 0;
}

.apps-panel.active {
    top: 80px;
}








.app-card h3 {
    text-align: center;
    margin-top: 15px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.app-details {
    padding: 0 40px 30px 40px;
    color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.app-details.active {
    max-height: 800px;
}

.app-details h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #305268;
}

.app-details p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.app-details ul {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.app-details ul li {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.app-details ul li:before {
    content: "\2192";
    color: #305268;
    font-weight: bold;
    margin-right: 10px;
}

.app-details .download-button {
    display: inline-block;
    padding: 12px 30px;
    background: #305268;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
    transition: transform 0.2s ease;
}

.app-details .download-button:hover {
    transform: translateY(-2px);
}


/* Settings Panel Buttons */
.style-buttons, .theme-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.style-btn, .theme-btn {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.style-btn:hover, .theme-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #305268;
}

.style-btn.active, .theme-btn.active {
    background: rgb(102 163 209 / 29%);
    border-color: #305268;
}

.theme-preview {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.theme-preview span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}


/* Reset sits small at the foot of Settings: reachable, never shouting. */
.settings-reset-btn {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(175, 76, 95, 0.16);
    border: 1px solid rgba(175, 76, 95, 0.5);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    margin: 18px 0 6px;
}

.settings-reset-btn:hover {
    background: rgba(175, 76, 95, 0.4);
    color: #ffffff;
}

.settings-reset-btn i {
    margin-right: 7px;
}

/*
 * The panel tabs
 * ---------------------------------------------------------------
 * Three flat tabs across the top of the sidebar; the active one carries the
 * underline. Panes swap through the hidden attribute, so there is exactly one
 * visible at a time.
 */

.pp-panel-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 18px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.pp-ptab-btn {
    flex: 1 1 0;
    padding: 10px 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pp-ptab-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.07);
}

.pp-ptab-btn.active {
    background: rgb(77 130 196 / 26%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

/* The Hit and Shot racks behind one pair of small tabs. */
.pp-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.pp-subtab-btn {
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.pp-subtab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.pp-subtab-btn.active {
    background: rgb(77 130 196 / 26%);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}


/* Apps Panel - Full Width */
.apps-panel {
    position: fixed;
    top: -100%;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: rgba(23, 30, 43, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 99;
    transition: top 0.4s ease;
    padding: 30px 0;
    overflow-y: auto;
}

.apps-panel.active {
    top: 80px;
}






.screenshot-container {
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
}

.app-screenshot {
    height: 100%;
    width: auto;
    display: block;
}

.screenshot-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.screenshot-container:hover .screenshot-nav {
    opacity: 1;
}

.screenshot-nav:hover {
    background: rgba(119, 77, 196, 0.8);
    border-color: #ffffff;
}

.screenshot-nav-left {
    left: 10px;
}

.screenshot-nav-right {
    right: 10px;
}

.app-card h3 {
    text-align: center;
    margin-top: 15px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.app-details {
    padding: 0 40px 30px 40px;
    color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.app-details.active {
    max-height: 800px;
}

.app-details h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #305268;
}

.app-details p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.app-details ul {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.app-details ul li {
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.app-details ul li:before {
    content: "\2192";
    color: #305268;
    font-weight: bold;
    margin-right: 10px;
}

.app-details .download-button {
    display: inline-block;
    padding: 12px 30px;
    background: #305268;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 20px;
    transition: transform 0.2s ease;
}

.app-details .download-button:hover {
    transform: translateY(-2px);
}


/* Apps Panel Controls */
.apps-panel-controls {
    display: flex;
    justify-content: center;
    padding: 0 40px 20px 40px;
}

.size-toggle {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    border-radius: 8px;
}

.size-toggle-btn {
    padding: 8px 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.size-toggle-btn:hover {
    color: #ffffff;
}

.size-toggle-btn.active {
    background: rgba(119, 77, 196, 0.5);
    color: #ffffff;
}


/* Carousel: centered featured card with arrows */
.apps-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 20px 30px 20px;
    position: relative;
    overflow: hidden;
}

.carousel-arrow {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 5;
}

.carousel-arrow:hover {
    background: rgba(119,77,196,0.4);
    border-color: rgba(119,77,196,0.6);
    color: #fff;
}

.carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    overflow: hidden;
}

.app-card {
    flex-shrink: 0;
    opacity: 0.5;
    transform: scale(0.85);
    transition: all 0.4s ease;
    cursor: pointer;
    text-align: center;
}

.app-card-featured {
    opacity: 1;
    transform: scale(1);
    z-index: 10;
}

/* Small size mode */
.apps-carousel-small .app-card {
    flex: 0 0 auto;
}

.apps-carousel-small .screenshot-container {
    height: 300px;
}


.panel-content {
    padding: 20px 40px 40px 40px;
    color: #ffffff;
}

.panel-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    transition: color 0.3s ease;
}

.panel-close:hover {
    color: #ffffff;
}


/* Full-Page Achievement Display */
.achievement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}

.achievement-overlay.show {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
}

.achievement-fullscreen {
    position: relative;
    text-align: center;
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-overlay.show .achievement-fullscreen {
    transform: scale(1);
    opacity: 1;
}

.achievement-overlay.show {
    background: rgba(0, 0, 0, 0.7);
    opacity: 1;
    pointer-events: auto;
}

.achievement-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(119, 77, 196, 0.4), transparent 70%);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

.achievement-fullscreen-icon {
    font-size: 120px;
    color: #305268;
    margin-bottom: 30px;
    text-shadow: 0 0 40px rgba(119, 77, 196, 0.8);
    animation: iconBounce 0.6s ease-out;
}

@keyframes iconBounce {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.achievement-fullscreen-title {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
}

.achievement-fullscreen-name {
    font-size: 56px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.achievement-fullscreen-desc {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}


.achievement-icon {
    font-size: 32px;
    min-width: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.achievement.unlocked .achievement-icon {
    color: #305268;
}


/* Settings Panel - Compact 2x2 Grid Layout */
.style-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 15px 0 !important;
}

.theme-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 15px 0 !important;
}

.style-btn, .theme-btn {
    padding: 12px 15px !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 8px !important;
}

.theme-preview {
    gap: 5px !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
}

.theme-preview span {
    width: 20px !important;
    height: 20px !important;
}

.panel-content h2 {
    font-size: 16px !important;
    margin: 20px 0 10px 0 !important;
}

.achievement-list {
    gap: 10px !important;
    margin: 15px 0 !important;
}

.achievement {
    padding: 10px 12px !important;
}

.achievement-icon {
    font-size: 20px !important;
}

.achievement-name {
    font-size: 13px !important;
}

.achievement-desc {
    font-size: 11px !important;
}

.style-buttons.bubble-style-buttons {
    grid-template-columns: 1fr 1fr !important;
}
/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(119, 77, 196, 0.08);
    border: 1px solid rgb(102 163 209 / 29%);
    border-radius: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    background: rgba(119, 77, 196, 0.15);
    border-color: rgba(119, 77, 196, 0.4);
}

.feature-card i {
    font-size: 18px;
    color: #305268;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.feature-card span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

/* ------------------------------------------------------------------
   Icon-only controls when the icon font did not arrive
   ------------------------------------------------------------------
   index.php loads Font Awesome from a CDN. Two buttons in the corner rail
   carry a glyph and no words, so a failed request leaves an empty box that
   still works and says nothing about what it does; a photograph of that
   state was read last round as two blank buttons. js/hud.js watches for the
   stylesheet and marks the body when it is missing, and these rules put the
   button's own accessible name into the hole. The name is read from the
   element rather than written here, so the mute button says Mute or Unmute
   in step with what pressing it would do.
*/

body.pp-noicons .pp-corner-icon,
body.pp-noicons .pp-mute {
    width: auto;
    min-width: 42px;
    padding: 0 11px;
}

body.pp-noicons .pp-corner-icon::after,
body.pp-noicons .pp-mute::after {
    content: attr(aria-label);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The sound button sits outside the rail and grows to the left with its
   label, so the rail steps further clear of it to keep the twelve pixels of
   air it has when the glyphs are there. */
body.pp-noicons .pp-rail-right {
    right: 96px;
}

@media (max-width: 768px) {
    body.pp-noicons .pp-rail-right,
    body.pp-noicons.pp-run.fly-mode .pp-rail-right {
        right: 80px;
    }
}

/* A dropup row keeps its own words, so the empty glyph box goes instead of
   growing a second copy of the label beside it. */
body.pp-noicons .pp-dropup-item i,
body.pp-noicons .pp-corner-btn:not(.pp-corner-icon) i {
    display: none;
}

/* ------------------------------------------------------------------
   Progress, at the top of the settings panel
   ------------------------------------------------------------------
   The same three rows the corner ledger carries, with the sentence that
   says what each one is. js/hud-cards.js builds them.
*/

.pp-prog {
    margin-bottom: 18px;
}

.pp-prog-row + .pp-prog-row {
    margin-top: 12px;
}

.pp-prog-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pp-prog-top span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.pp-prog-top b {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
}

.pp-prog-bar {
    margin-top: 5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.11);
    overflow: hidden;
}

.pp-prog-bar > i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #4d82c4;
}

.pp-prog-won .pp-prog-bar > i,
.pp-prog-won .pp-prog-top span {
    background: #4ec98a;
}

.pp-prog-won .pp-prog-top span {
    background: none;
    color: #4ec98a;
}

.pp-prog-first .pp-prog-bar {
    visibility: hidden;
}

.pp-prog-plain .pp-prog-bar {
    visibility: hidden;
}

.pp-prog-note {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.42);
}