// Native s&box panels; artwork and paint masks are existing game assets.
TrainingHud .paint-menu {
    position: absolute; width: 100%; height: 100%; z-index: 100;
    pointer-events: all; color: white; font-family: Poppins;
    .menu-art { position: absolute; width: 100%; height: 100%; background-image: url("/textures/ui/baddies-vs-sausages-splash-v5.png"); background-size: cover; background-position: center; }
    .menu-shade { position: absolute; width: 100%; height: 100%; background-image: linear-gradient(0deg, #080613f5, #08061300 80%); }
    &.inside .menu-shade { background-color: #0d0916e8; }
    .paint-fleck { position: absolute; width: 550px; height: 550px; background-image: url("/textures/venue_wear/splash_3.png"); background-size: contain; background-repeat: no-repeat; opacity: .15; pointer-events: none; }
    .paint-fleck.teal { left: -180px; top: -160px; background-tint: #42ffee; transform: rotate(20deg); }
    .paint-fleck.pink { right: -200px; bottom: -180px; background-tint: #ff198c; transform: rotate(-30deg); }
    button { cursor: pointer; color: white; font-size: 22px; padding: 14px 22px; background-color: #2b243de8; border: 1px solid #ffffff25; min-height: 54px; align-items: center; flex-shrink: 0; }
    button:hover { background-color: #56416be8; border-color: #fff; sound-in: ui.button.over; }
    .small-actions button.selected { background-color: #188986; border-color: #65e4e0; }
    button label { pointer-events: none; }
    .paint-button { font-family: "Permanent Marker"; font-size: 38px; letter-spacing: 1px; padding: 8px 28px; min-height: 65px; background-color: #130e22b8; border: 0; border-left: 5px solid #ff49b4; text-shadow: 2px 3px 0 #110b22; }
    .paint-button:hover { background-color: #3c294dde; }
    .paint-button.primary { background-color: #ff399ce8; border-left-color: #ffcf45; }
    .paint-button.primary:hover { background-color: #d91987; }
    .paint-button.quiet { font-size: 29px; border-left-color: #66e2de; }
    .home-actions { position: absolute; left: 50%; top: 54%; width: 36%; max-width: 620px; transform: translateX(-50%); flex-direction: column; gap: 6px; .paint-button { justify-content: center; } }
    .home-actions.in-match { top: 36%; }
    .home-footer { position: absolute; left: 6%; bottom: 3%; right: 5%; justify-content: space-between; align-items: center; font-size: 17px; label { color: #c6bccf; } div { gap: 12px; } button { font-size: 17px; min-height: 38px; padding: 8px 14px; background-color: #100a20aa; } }
    .paint-sheet { position: absolute; top: 6%; left: 50%; width: 84%; max-width: 1280px; height: 88%; transform: translateX(-50%); flex-direction: column; gap: 24px; }
    .paint-heading { width: 100%; align-items: center; justify-content: center; padding: 0 150px; flex-shrink: 0; }
    .paint-heading > label { font-family: "Permanent Marker"; font-size: 56px; color: #ffcf45; text-shadow: 3px 4px #f4218655; }
    .back-button { position: absolute; left: 0; font-family: "Permanent Marker"; font-size: 25px; background-color: #ff3da080; }
    .paint-content { flex-direction: column; align-items: center; gap: 20px; overflow: scroll; padding: 10px 6px 24px 6px; width: 100%; flex-grow: 1; }
    .paint-content > * { flex-shrink: 0; }
    .paint-caption { color: #65e4e0; font-size: 25px; font-weight: 700; letter-spacing: 2px; text-align: center; }
    .paint-note { color: #d6cfe1; font-size: 22px; max-width: 1060px; text-align: center; }
    .paint-note.notice { color: #ffce78; background-color: #251b2dcc; padding: 12px; }
    .choice-row { width: 100%; gap: 28px; justify-content: center; }
    .choice-card { width: 50%; min-height: 340px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: 32px; background-image: url("/textures/venue_wear/splash_2.png"); background-size: cover; border: 2px solid #ffffff44; border-radius: 6px; label { font-size: 25px; } }
    .choice-card.rush, .choice-card.foundry { background-color: #3c173bec; border-bottom: 8px solid #ff49b4; }
    .choice-card.riot, .choice-card.marine { background-color: #103d42ec; border-bottom: 8px solid #65e4e0; }
    .restaurant-choices { gap: 18px; .choice-card { width: 48%; padding: 24px; .card-title { font-size: 40px; } .card-kicker { font-size: 17px; letter-spacing: 2px; } } }
    .choice-card:hover { border-color: #ffcf45; transform: translateY(-4px); background-color: #553249; }
    .choice-card .card-kicker { font-size: 20px; letter-spacing: 4px; color: #e4cbdc; }
    .choice-card .card-title { font-family: "Permanent Marker"; font-size: 48px; color: white; }
    .choice-card .card-foot { font-size: 19px; color: #ffcf45; margin-top: 18px; }
    .duration-row { gap: 18px; button { font-family: "Permanent Marker"; font-size: 32px; padding: 16px 28px; min-width: 150px; justify-content: center; } button.selected { background-color: #188986; border-color: #65e4e0; } }
    .launch { min-height: 90px; font-size: 46px; justify-content: center; width: 70%; }
    .small-actions { gap: 14px; flex-wrap: wrap; justify-content: center; }
    .settings-grid { flex-wrap: wrap; gap: 25px; width: 100%; justify-content: center; .paint-button { width: 46%; min-height: 140px; justify-content: center; } }
    .binding-list { width: 90%; flex-direction: column; }
    .binding-row { justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #ffffff18; label { font-size: 23px; } button { min-width: 220px; justify-content: center; background-color: #263e4b; } }
    .player-name { width: 75%; padding: 20px; font-size: 32px; min-height: 80px; color: white; background-color: #21172f; border: 2px solid #65e4e0; }
    .how-row { width: 90%; gap: 28px; align-items: center; label { font-size: 23px; } .how-key { min-width: 250px; color: #65e4e0; font-family: "Permanent Marker"; font-size: 29px; } }
}

TrainingHud {
    .local-prototype-brand { position: absolute; left: 6%; top: 12%; width: 70%; padding: 24px; flex-direction: column; gap: 10px; background-color: #17131fec; border-left: 6px solid #ffcc6a; }
    .local-prototype-brand label { font-family: "Permanent Marker"; font-size: 56px; font-weight: 700; color: #fff1d7; }
    .local-prototype-brand span { font-size: 15px; letter-spacing: 3px; color: #ffc56a; }
}
TrainingHud {
    .results-menu {
        .paint-sheet { top: 4%; height: 92%; gap: 12px; }
        .paint-heading > label { font-size: 42px; }
        .result-content { gap: 12px; padding: 12px 18px; background-color: #130e22dc; border-top: 3px solid #ff49b4; }
        .result-title { font-family: "Permanent Marker"; color: #ffcf45; font-size: 27px; }
        .result-reason { text-align: center; font-size: 14px; color: #d6cfe1; }
        .result-progress { color: #65e4e0; font-size: 19px; }
        .result-stats { width: 100%; justify-content: center; gap: 22px; label { font-weight: bold; color: #ffcf45; font-size: 18px; } }
        .round-awards { width: 100%; gap: 12px; }
        .award-card { background-color: #2b243de8; border-top-color: #ff49b4; }
        .award-title { font-family: "Permanent Marker"; font-size: 21px; color: #ffcf45; }
        .result-actions { flex-shrink: 0; width: 100%; gap: 12px; justify-content: center; }
        .result-action { font-family: "Permanent Marker"; font-size: 23px; min-height: 54px; padding: 12px 20px; background-color: #2b243de8; border: 1px solid #ffffff25; }
        .result-action.primary { background-color: #ff399ce8; border-left: 4px solid #ffcf45; }
        .result-action.unavailable { align-items: center; label { font-size: 19px; color: #d6cfe1; } }
        .result-feedback { font-size: 15px; min-height: 38px; padding: 8px 16px; }
    }
}
TrainingHud .results-menu {
    .result-content { gap: 8px; }
    MatchStandings .table-heading, MatchStandings .standing-row { padding: 8px 12px; }
    .award-card { padding: 10px 14px; gap: 4px; }
}