/* 
 * Workout Card Game - Cross-Browser Compatible Stylesheet
 * 
 * Playing Card Graphics Attribution:
 * Vector Playing Cards courtesy of Byron Knoll
 * Source: http://byronknoll.blogspot.com/2011/03/vector-playing-cards.html
 * License: Public Domain (CC0)
 * 
 * Cross-Browser Compatibility Reset
 * Works across Chrome, Firefox, Safari, Edge, IE11+, Mobile Browsers
 */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* Remove default touch highlight and callout */
html,
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* Enable text selection for specific elements only */
input,
textarea,
button,
.selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Cross-browser compatibility for CSS properties */
:root {
    --transition-speed: 0.3s;
    --border-radius: 12px;
    --card-width: 100px;
    --card-height: 140px;
    --glow-intensity: 20px;
    --text-glow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    background-color: #000000;
    background: -webkit-repeating-linear-gradient(135deg, #000000 0px, #020213 5px);
    background: -moz-repeating-linear-gradient(135deg, #000000 0px, #020213 5px);
    background: -o-repeating-linear-gradient(135deg, #000000 0px, #020213 5px);
    background: repeating-linear-gradient(135deg, #000000 0px, #020213 5px);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    color: #D0C0C0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow-x: hidden;
    position: relative;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available;
    }
}

/* Prevent bounce effect on mobile */
body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Chest Day Theme - Red/Pink tones */
body.theme-chest {
    background: repeating-linear-gradient(135deg, #000000 0px, #130002 5px);
}

body.theme-chest .category-btn[data-day="chest"],
body.theme-chest .deck-stack::before,
body.theme-chest .deck-count {
    background: linear-gradient(135deg, #500002, #F00000);
    box-shadow: 0px 0px 15px #F00000;
}

body.theme-chest .current-exercise h4 {
    color: #FF6B6B;
    text-shadow: 0px 0px 10px #F00000;
}

body.theme-chest .rep-number {
    color: #FF6B6B;
    text-shadow: 
        0px 0px 20px #F00000,
        0px 0px 40px #F00000,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* Legs Day Theme - Blue/Purple tones */
body.theme-legs {
    background: repeating-linear-gradient(135deg, #000000 0px, #000213 5px);
}

body.theme-legs .category-btn[data-day="legs"],
body.theme-legs .deck-stack::before,
body.theme-legs .deck-count {
    background: linear-gradient(135deg, #000050, #5050E0);
    box-shadow: 0px 0px 15px #5050E0;
}

body.theme-legs .current-exercise h4 {
    color: #A0C0FF;
    text-shadow: 0px 0px 10px #5050E0;
}

body.theme-legs .rep-number {
    color: #A0C0FF;
    text-shadow: 
        0px 0px 20px #5050E0,
        0px 0px 40px #5050E0,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* Back Day Theme - Green/Black tones */
body.theme-back {
    background: repeating-linear-gradient(135deg, #000000 0px, #001300 5px);
}

body.theme-back .category-btn[data-day="back"],
body.theme-back .deck-stack::before,
body.theme-back .deck-count {
    background: linear-gradient(135deg, #005000, #00D000);
    box-shadow: 0px 0px 15px #00D000;
}

body.theme-back .current-exercise h4 {
    color: #C0FFC0;
    text-shadow: 0px 0px 10px #00D000;
}

body.theme-back .rep-number {
    color: #C0FFC0;
    text-shadow: 
        0px 0px 20px #00D000,
        0px 0px 40px #00D000,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* AB Day Theme - Orange/Yellow tones */
body.theme-ab {
    background: repeating-linear-gradient(135deg, #000000 0px, #131300 5px);
}

body.theme-ab .category-btn[data-day="ab"],
body.theme-ab .deck-stack::before,
body.theme-ab .deck-count {
    background: linear-gradient(135deg, #805000, #FFB000);
    box-shadow: 0px 0px 15px #FFB000;
}

body.theme-ab .current-exercise h4 {
    color: #FFD700;
    text-shadow: 0px 0px 10px #FFB000;
}

body.theme-ab .rep-number {
    color: #FFD700;
    text-shadow: 
        0px 0px 20px #FFB000,
        0px 0px 40px #FFB000,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* Set Counter Theme - Purple/Indigo tones */
body.theme-counter {
    background: repeating-linear-gradient(135deg, #000000 0px, #130013 5px);
}

body.theme-counter .category-btn[data-day="counter"],
body.theme-counter .deck-stack::before,
body.theme-counter .deck-count {
    background: linear-gradient(135deg, #400080, #8000FF);
    box-shadow: 0px 0px 15px #8000FF;
}

body.theme-counter .current-exercise h4 {
    color: #B19CD9;
    text-shadow: 0px 0px 10px #8000FF;
}

body.theme-counter .rep-number {
    color: #B19CD9;
    text-shadow: 
        0px 0px 20px #8000FF,
        0px 0px 40px #8000FF,
        2px 2px 4px rgba(0,0,0,0.8);
}

.container {
    text-align: center;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
    box-shadow: 0px 0px 20px #100020;
    border-radius: 10px;
    background: linear-gradient(135deg, #0A0015, #100020);
}

h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-shadow: 0px 0px 15px #F00000;
    color: #D0C0C0;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-shadow: black 2px 2px 1px;
    color: white;
}

.category-selection {
    background: linear-gradient(135deg, #0A0015, #100020);
    padding: 2rem;
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 5px 5px 8px #100020;
    text-align: center;
}

.category-selection h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.category-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.legs-options {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.legs-options h3 {
    color: #A0C0FF;
    margin-bottom: 1rem;
    text-align: center;
    text-shadow: 0px 0px 10px #5050E0;
}

.difficulty-options, .mode-options {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.difficulty-options label, .mode-options label {
    color: #C0C0C0;
    font-weight: 600;
}

.difficulty-select {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    color: #C0C0C0;
    border: 1px solid #202050;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.difficulty-select option {
    background: #100020;
    color: #C0C0C0;
}

#anti-social-mode {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.start-workout-btn {
    margin-top: 1rem;
    padding: 0.8rem 2rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    color: #00EF00;
    border: 1px solid #202050;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.start-workout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 15px #5050E0;
    color: #FFFFFF;
}

.chest-options {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.chest-options h3 {
    color: #FF6B6B;
    margin-bottom: 1rem;
    text-align: center;
    text-shadow: 0px 0px 10px #F00000;
}

.back-options {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.back-options h3 {
    color: #50C878; /* Green color for back day */
    margin-bottom: 1rem;
    text-align: center;
    text-shadow: 0px 0px 10px #00FF00;
}

.game-mode-options {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.game-mode-options label {
    color: #C0C0C0;
    font-weight: 600;
}

.mode-selection {
    display: flex;
    gap: 2rem;
}

.mode-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #C0C0C0;
    cursor: pointer;
    font-weight: 500;
}

.mode-label input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.mode-description {
    margin: 1rem 0;
    text-align: center;
}

.mode-description p {
    color: #C0C0C0;
    font-size: 0.9rem;
    margin: 0.5rem 0;
    opacity: 0.8;
}

.mode-description strong {
    color: #FF6B6B;
}

.chest-close {
    color: #FF4444 !important;
    text-shadow: 0px 0px 10px #FF0000 !important;
}

.chest-wide {
    color: #44FF44 !important;
    text-shadow: 0px 0px 10px #00FF00 !important;
}

.chest-close .rep-number,
.chest-wide .rep-number {
    transition: all 0.3s ease;
}

.chest-close .rep-number {
    color: #FF4444 !important;
    text-shadow: 
        0px 0px 20px #FF0000,
        0px 0px 40px #FF0000,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.chest-wide .rep-number {
    color: #44FF44 !important;
    text-shadow: 
        0px 0px 20px #00FF00,
        0px 0px 40px #00FF00,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.chest-close .rep-label,
.chest-wide .rep-label {
    font-weight: 700;
    letter-spacing: 1px;
}

.chest-close .rep-label {
    color: #FF6B6B !important;
}

.chest-wide .rep-label {
    color: #6BFF6B !important;
}

/* Full Body Chest Mode - Additional Exercise Colors */
.back-exercise {
    color: #4444FF !important;
    text-shadow: 0px 0px 10px #0000FF !important;
}

.shoulders-exercise {
    color: #FFAA44 !important;
    text-shadow: 0px 0px 10px #FF8800 !important;
}

.triceps-exercise {
    color: #AA44FF !important;
    text-shadow: 0px 0px 10px #8800FF !important;
}

.back-exercise .rep-number,
.shoulders-exercise .rep-number,
.triceps-exercise .rep-number {
    transition: all 0.3s ease;
}

.back-exercise .rep-number {
    color: #4444FF !important;
    text-shadow: 
        0px 0px 20px #0000FF,
        0px 0px 40px #0000FF,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.shoulders-exercise .rep-number {
    color: #FFAA44 !important;
    text-shadow: 
        0px 0px 20px #FF8800,
        0px 0px 40px #FF8800,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.triceps-exercise .rep-number {
    color: #AA44FF !important;
    text-shadow: 
        0px 0px 20px #8800FF,
        0px 0px 40px #8800FF,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.back-exercise .rep-label,
.shoulders-exercise .rep-label,
.triceps-exercise .rep-label {
    font-weight: 700;
    letter-spacing: 1px;
}

.back-exercise .rep-label {
    color: #6B6BFF !important;
}

.shoulders-exercise .rep-label {
    color: #FFCC6B !important;
}

.triceps-exercise .rep-label {
    color: #CC6BFF !important;
}

/* Legs Day Exercises - Same Colors as Full Body Chest Mode */
.squats-exercise {
    color: #AA44FF !important;
    text-shadow: 0px 0px 10px #8800FF !important;
}

.lunges-exercise {
    color: #FFAA44 !important;
    text-shadow: 0px 0px 10px #FF8800 !important;
}

.calf-raises-exercise {
    color: #4444FF !important;
    text-shadow: 0px 0px 10px #0000FF !important;
}

.jumping-jacks-exercise {
    color: #FF4444 !important;
    text-shadow: 0px 0px 10px #FF0000 !important;
}

.squats-exercise .rep-number,
.lunges-exercise .rep-number,
.calf-raises-exercise .rep-number,
.jumping-jacks-exercise .rep-number {
    transition: all 0.3s ease;
}

.squats-exercise .rep-number {
    color: #AA44FF !important;
    text-shadow: 
        0px 0px 20px #8800FF,
        0px 0px 40px #8800FF,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.lunges-exercise .rep-number {
    color: #FFAA44 !important;
    text-shadow: 
        0px 0px 20px #FF8800,
        0px 0px 40px #FF8800,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.calf-raises-exercise .rep-number {
    color: #4444FF !important;
    text-shadow: 
        0px 0px 20px #0000FF,
        0px 0px 40px #0000FF,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.jumping-jacks-exercise .rep-number {
    color: #FF4444 !important;
    text-shadow: 
        0px 0px 20px #FF0000,
        0px 0px 40px #FF0000,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.squats-exercise .rep-label,
.lunges-exercise .rep-label,
.calf-raises-exercise .rep-label,
.jumping-jacks-exercise .rep-label {
    font-weight: 700;
    letter-spacing: 1px;
}

.squats-exercise .rep-label {
    color: #CC6BFF !important;
}

.lunges-exercise .rep-label {
    color: #FFCC6B !important;
}

.calf-raises-exercise .rep-label {
    color: #6B6BFF !important;
}

.jumping-jacks-exercise .rep-label {
    color: #FF6B6B !important;
}

/* Classic Chest Mode Exercises */
.wide-pushups {
    color: #44FF44 !important;
    text-shadow: 0px 0px 10px #00FF00 !important;
}
.normal-pushups {
    color: #FF4444 !important;
    text-shadow: 0px 0px 10px #FF0000 !important;
}
.diamond-pushups {
    color: #AA44FF !important;
    text-shadow: 0px 0px 10px #8800FF !important;
}
.burpees {
    color: #FFAA44 !important;
    text-shadow: 0px 0px 10px #FF8800 !important;
}

.wide-pushups .rep-number,
.normal-pushups .rep-number,
.diamond-pushups .rep-number,
.burpees .rep-number {
    transition: all 0.3s ease;
}

.wide-pushups .rep-number {
    color: #44FF44 !important;
    text-shadow: 
        0px 0px 20px #00FF00,
        0px 0px 40px #00FF00,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.normal-pushups .rep-number {
    color: #FF4444 !important;
    text-shadow: 
        0px 0px 20px #FF0000,
        0px 0px 40px #FF0000,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.diamond-pushups .rep-number {
    color: #AA44FF !important;
    text-shadow: 
        0px 0px 20px #8800FF,
        0px 0px 40px #8800FF,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.burpees .rep-number {
    color: #FFAA44 !important;
    text-shadow: 
        0px 0px 20px #FF8800,
        0px 0px 40px #FF8800,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.wide-pushups .rep-label,
.normal-pushups .rep-label,
.diamond-pushups .rep-label,
.burpees .rep-label {
    font-weight: 700;
    letter-spacing: 1px;
}

.wide-pushups .rep-label {
    color: #44FF44 !important;
}

.normal-pushups .rep-label {
    color: #FF4444 !important;
}

.diamond-pushups .rep-label {
    color: #AA44FF !important;
}

.burpees .rep-label {
    color: #FFAA44 !important;
}

.category-btn {
    padding: 1rem 2rem;
    font-size: 1.2rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    color: #C0C0C0;
    border-bottom: #605090 1px solid;
    border-left: #8070C0 1px solid;
    border-right: #605090 1px solid;
    border-top: #8070C0 1px solid;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 15px #300070;
    font-family: Tahoma,sans-serif;
    font-weight: normal;
}

.category-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0px 0px 15px #5050E0;
    color: #00EF00;
}

.workout-area {
    background: linear-gradient(135deg, #0A0015, #100020);
    padding: 2rem;
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 5px 5px 8px #100020;
}

.workout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.shuffle-btn, .back-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    color: #C0C0C0;
    border-bottom: #605090 1px solid;
    border-left: #8070C0 1px solid;
    border-right: #605090 1px solid;
    border-top: #8070C0 1px solid;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 15px #300070;
    font-family: Tahoma,sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shuffle-btn:hover, .back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 0px 15px #5050E0;
    color: #00EF00;
}

.card-game-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    gap: 1rem;
    flex-wrap: wrap;
}

.deck-area, .discard-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    position: relative;
}

.deck-area {
    align-self: flex-start;
}

.discard-area {
    align-self: flex-start;
}

.card-counter {
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    border: 1px solid #ccc;
    min-width: 60px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.deck-stack {
    width: 100px;
    height: 140px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.deck-stack:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0px 0px 15px #5050E0;
}

.deck-stack::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #300070, #5050E0);
    border-radius: 5px;
    z-index: -1;
    opacity: 0.8;
}

.deck-stack::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #F00000, #A00070);
    border-radius: 5px;
    z-index: -2;
    opacity: 0.6;
}

.deck-count {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C0C0C0;
    font-size: 1.8rem;
    font-weight: bold;
    box-shadow: inset 0 2px 5px #300070;
    text-shadow: 1px 1px 2px #100020;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
}

.discard-pile {
    width: 120px;
    height: 160px;
    border: 3px dashed #202050;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 160px;
    background: linear-gradient(135deg, #0A0015, #100020);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible;
    box-shadow: inset 0px 0px 10px #300070;
}

.discard-pile .card {
    position: absolute;
    cursor: default;
    transition: all 0.3s ease;
    transform-origin: center center;
    width: 100px;
    height: 140px;
}

.discard-pile .card:hover {
    transform: translateY(-3px) scale(1.05) !important;
    z-index: 100 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}

.discard-pile:hover {
    border-color: #5050E0;
    background: linear-gradient(135deg, #151025, #1A0030);
    transform: scale(1.02);
}

.deck-label, .discard-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card {
    width: 100px;
    height: 140px;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    color: black;
    font-weight: bold;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border: 2px solid rgba(0,0,0,0.1);
}

.card:hover {
    transform: translateY(-5px) scale(1.05) rotateX(5deg);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.card.shuffling {
    animation: shuffle 0.5s ease-in-out;
}

.card.flipping {
    animation: none;
    transform-style: preserve-3d;
}

.card.face-down {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border: 2px solid #1a252f;
}

.card.face-down .card-value,
.card.face-down .card-suit,
.card.face-down .card-image {
    display: none;
}

.card-back-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 1;
}

.card.face-down::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    border-radius: 6px;
    z-index: 0;
}

@-webkit-keyframes cardFlip3D {
    0% {
        -webkit-transform: translateZ(0px) rotateY(0deg) scale(1);
        transform: translateZ(0px) rotateY(0deg) scale(1);
        -webkit-box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    25% {
        -webkit-transform: translateZ(50px) rotateY(90deg) scale(0.95);
        transform: translateZ(50px) rotateY(90deg) scale(0.95);
        -webkit-box-shadow: 0 15px 35px rgba(0,0,0,0.4);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    50% {
        -webkit-transform: translateZ(100px) rotateY(180deg) scale(0.9);
        transform: translateZ(100px) rotateY(180deg) scale(0.9);
        -webkit-box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    }
    75% {
        -webkit-transform: translateZ(50px) rotateY(270deg) scale(0.95);
        transform: translateZ(50px) rotateY(270deg) scale(0.95);
        -webkit-box-shadow: 0 15px 35px rgba(0,0,0,0.4);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    100% {
        -webkit-transform: translateZ(0px) rotateY(360deg) scale(1);
        transform: translateZ(0px) rotateY(360deg) scale(1);
        -webkit-box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
}

@-moz-keyframes cardFlip3D {
    0% {
        -moz-transform: translateZ(0px) rotateY(0deg) scale(1);
        transform: translateZ(0px) rotateY(0deg) scale(1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    25% {
        -moz-transform: translateZ(50px) rotateY(90deg) scale(0.95);
        transform: translateZ(50px) rotateY(90deg) scale(0.95);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    50% {
        -moz-transform: translateZ(100px) rotateY(180deg) scale(0.9);
        transform: translateZ(100px) rotateY(180deg) scale(0.9);
        box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    }
    75% {
        -moz-transform: translateZ(50px) rotateY(270deg) scale(0.95);
        transform: translateZ(50px) rotateY(270deg) scale(0.95);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    100% {
        -moz-transform: translateZ(0px) rotateY(360deg) scale(1);
        transform: translateZ(0px) rotateY(360deg) scale(1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
}

@keyframes cardFlip3D {
    0% {
        transform: translateZ(0px) rotateY(0deg) scale(1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    25% {
        transform: translateZ(50px) rotateY(90deg) scale(0.95);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    50% {
        transform: translateZ(100px) rotateY(180deg) scale(0.9);
        box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    }
    75% {
        transform: translateZ(50px) rotateY(270deg) scale(0.95);
        box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }
    100% {
        transform: translateZ(0px) rotateY(360deg) scale(1);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
}

@keyframes shuffle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(-5deg); }
    50% { transform: translateY(-40px) rotate(5deg); }
    75% { transform: translateY(-20px) rotate(-5deg); }
}

.card.diamonds {
    color: #e74c3c;
}

.card.hearts {
    color: #e74c3c;
}

.card.spades {
    color: #2c3e50;
}

.card.clubs {
    color: #2c3e50;
}

.card-back {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: 2px solid #1a252f;
}

/*
 * Vector Playing Cards Attribution
 * Playing card images courtesy of Byron Knoll
 * Source: http://byronknoll.blogspot.com/2011/03/vector-playing-cards.html
 * License: Public Domain (CC0)
 * 
 * These SVG card images provide high-quality, scalable graphics
 * for the workout card game interface.
 */
.card-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}

.card-value {
    font-size: 1.2rem;
    font-weight: bold;
}

.card-suit {
    font-size: 1.5rem;
}

.workout-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.current-workout {
    background: rgba(255,255,255,0.1);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.2);
}

.workout-legend {
    background: linear-gradient(135deg, #0A0015, #100020);
    padding: 1.5rem;
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.workout-legend h3 {
    margin-bottom: 1rem;
    color: #f39c12;
}

.legend-item {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

.current-exercise {
    margin-top: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #0A0015, #100020);
    border-radius: 10px;
    border-top: 1px solid #202050;
    border-bottom: 2px solid #202050;
    border-left: 1px solid #202050;
    border-right: 2px solid #202050;
    box-shadow: 0px 0px 15px #300070;
}

.current-exercise h4 {
    color: #E0C0FF;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    text-shadow: 0px 0px 10px #A00070;
}

.current-exercise p {
    font-size: 1.1rem;
    margin: 0.3rem 0;
}

.rep-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.rep-display::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #5050E0, #F00000, #00D000, #A00070);
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
    animation: borderGlow 3s ease-in-out infinite;
}

/* Back day exercise color classes */
.rep-display.chin-ups .rep-number {
    color: #00FF00; /* Green */
    text-shadow: 
        0px 0px 20px #00FF00,
        0px 0px 40px #00FF00,
        2px 2px 4px rgba(0,0,0,0.8);
}

.rep-display.bicep-curls .rep-number {
    color: #9B59B6; /* Purple */
    text-shadow: 
        0px 0px 20px #9B59B6,
        0px 0px 40px #9B59B6,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* AB Day exercise color classes */
.rep-display.ab-hearts .rep-number {
    color: #FF69B4; /* Hot Pink */
    text-shadow: 
        0px 0px 20px #FF69B4,
        0px 0px 40px #FF69B4,
        2px 2px 4px rgba(0,0,0,0.8);
}

.rep-display.ab-diamonds .rep-number {
    color: #00CED1; /* Dark Turquoise */
    text-shadow: 
        0px 0px 20px #00CED1,
        0px 0px 40px #00CED1,
        2px 2px 4px rgba(0,0,0,0.8);
}

.rep-display.ab-clubs .rep-number {
    color: #32CD32; /* Lime Green */
    text-shadow: 
        0px 0px 20px #32CD32,
        0px 0px 40px #32CD32,
        2px 2px 4px rgba(0,0,0,0.8);
}

/* Comprehensive Back Day exercise color classes */
/* Exercise type colors - more specific selectors */
.rep-label .chin-ups-green {
    color: #00FF00 !important; /* Green for Chin Ups */
    text-shadow: 
        0px 0px 20px #00FF00 !important,
        0px 0px 40px #00FF00 !important,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.rep-label .pull-ups-red {
    color: #FF0000 !important; /* Red for Pull Ups */
    text-shadow: 
        0px 0px 20px #FF0000 !important,
        0px 0px 40px #FF0000 !important,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* Variation colors - more specific selectors */
.rep-label .variation-wide {
    color: #AAAAFF !important; /* Light Blue for Wide */
    text-shadow: 
        0px 0px 20px #AAAAFF !important,
        0px 0px 40px #AAAAFF !important,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.rep-label .variation-normal {
    color: #FFFFAA !important; /* Light Yellow for Normal */
    text-shadow: 
        0px 0px 20px #FFFFAA !important,
        0px 0px 40px #FFFFAA !important,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}

.rep-label .variation-close {
    color: #FFAAAA !important; /* Light Red for Close */
    text-shadow: 
        0px 0px 20px #FFAAAA !important,
        0px 0px 40px #FFAAAA !important,
        2px 2px 4px rgba(0,0,0,0.8) !important;
}


.rep-number {
    font-size: 3rem;
    font-weight: 900;
    color: #FFFFFF;
    text-shadow: 
        0px 0px 20px currentColor,
        0px 0px 40px currentColor,
        2px 2px 4px rgba(0,0,0,0.8);
    line-height: 1;
    margin: 0;
    padding: 0;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
}

.rep-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #C0C0C0;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 0.5rem;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.rep-highlight {
    animation: repPulse 0.6s ease-out;
}

.constant-reps .rep-number {
    color: #E0C0FF;
    text-shadow: 
        0px 0px 15px #A00070,
        0px 0px 30px #A00070,
        2px 2px 4px rgba(0,0,0,0.8);
}

@-webkit-keyframes repPulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
    25% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        -webkit-filter: brightness(1.5);
        filter: brightness(1.5);
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-filter: brightness(1.2);
        filter: brightness(1.2);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-filter: brightness(1.3);
        filter: brightness(1.3);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: brightness(1);
        filter: brightness(1);
    }
}

@-moz-keyframes repPulse {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        -moz-transform: scale(1.3);
        transform: scale(1.3);
        filter: brightness(1.5);
    }
    50% {
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    75% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
        filter: brightness(1.3);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes repPulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.3);
        filter: brightness(1.5);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
    75% {
        transform: scale(1.2);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0.5;
        transform: rotate(0deg);
    }
    50% {
        opacity: 0.9;
        transform: rotate(180deg);
    }
}

@keyframes shuffle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(-5deg); }
    50% { transform: translateY(-40px) rotate(5deg); }
    75% { transform: translateY(-20px) rotate(-5deg); }
}

.hidden {
    display: none;
}

/* 
 * Comprehensive Responsive Design & Cross-Browser Compatibility
 * Mobile-first approach with touch optimizations
 */

/* Mobile Devices - Small Phones */
@media (max-width: 480px) {
    .container {
        width: 100%;
        padding: 10px;
        max-width: 100vw;
    }

    h1 { 
        font-size: 1.5rem; 
        text-align: center;
        margin-bottom: 1rem;
    }
    
    h2 { 
        font-size: 1.2rem; 
        text-align: center;
    }
    
    h3 { 
        font-size: 1.1rem; 
    }

    /* Mobile-specific category buttons with proper centering */
    .category-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .category-btn {
        width: 100%;
        max-width: 280px;
        padding: 1.2rem 1rem;
        font-size: 1.1rem;
        min-height: 60px;
        border-radius: 15px;
        /* Ensure button text is centered */
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .workout-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .workout-header h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    .shuffle-btn, .back-btn {
        width: 100%;
        max-width: 200px;
        padding: 12px 20px;
        font-size: 1rem;
        min-height: 50px;
    }

    .card-game-area {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        padding: 15px 0;
        margin: 1rem 0;
    }

    .deck-area, .discard-area {
        text-align: center;
        min-width: 100px;
        flex: 0 0 auto; /* Don't grow or shrink */
        align-self: flex-start;
    }

    .card-counter {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
        min-width: 50px;
        top: -1.8rem;
    }

    .deck-stack {
        width: 70px;
        height: 98px;
        margin: 0 auto;
    }

    .discard-pile {
        min-height: 98px;
        width: 70px;
        margin: 0 auto;
    }

    .card {
        width: 70px !important;
        height: 98px !important;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .card-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .workout-info {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 10px;
        margin-top: 10px;
    }

    .current-exercise {
        text-align: center;
        padding: 15px 10px;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.2);
    }

    .rep-display {
        margin-bottom: 15px;
    }

    .rep-number {
        font-size: 2.2rem;
        line-height: 1;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .rep-label {
        font-size: 1rem;
        line-height: 1.2;
    }

    .workout-legend {
        font-size: 0.9rem;
    }

    .legend-item {
        padding: 8px 0;
        font-size: 0.85rem;
    }

    .legend-item span:first-child {
        min-width: 80px;
        font-size: 0.8rem;
    }

    /* Touch-optimized interactive elements */
    .category-btn, .shuffle-btn, .back-btn, .start-workout-btn {
        min-height: 55px;
        min-width: 55px;
        /* Larger touch target */
        padding: 15px 25px;
    }

    .deck-stack, .discard-pile {
        cursor: pointer;
        /* Ensure large touch target */
        min-width: 80px;
        min-height: 80px;
    }

    /* Form elements for mobile */
    .difficulty-select, .mode-selection {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }

    .difficulty-select {
        padding: 12px;
        font-size: 1rem;
        border-radius: 8px;
    }

    .mode-label {
        display: block;
        margin: 10px 0;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        cursor: pointer;
    }

    .mode-label input[type="radio"] {
        margin-right: 10px;
        transform: scale(1.2);
    }

    /* Mobile-specific animations */
    .card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Hardware acceleration for smoother animations */
    }

    @media (hover: none) {
        .card:hover {
            transform: none;
        }
        
        .category-btn:hover,
        .shuffle-btn:hover,
        .back-btn:hover {
            transform: none;
        }
    }
}

/* Tablets and Medium Devices */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        width: 95%;
        padding: 15px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .category-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .category-btn {
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
        /* Improve touch targets */
        min-height: 60px;
        min-width: 120px;
        /* Prevent accidental touches */
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        /* Add visual feedback for touch */
        position: relative;
    }
    
    /* Touch feedback for category buttons */
    .category-btn:active {
        transform: scale(0.95);
        box-shadow: 0px 0px 10px #5050E0;
    }
    
    /* Add spacing between options to prevent accidental touches */
    .chest-options, .legs-options, .back-options {
        margin-top: 20px;
        padding: 20px;
        border-radius: 15px;
    }
    
    /* Center-align category selection */
    .category-selection {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .category-selection h2 {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .category-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 2rem auto;
        width: 100%;
    }
    
    .category-btn {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
    
    /* Center workout title */
    .workout-header h2 {
        text-align: center;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Center workout header content */
    .workout-header {
        justify-content: center;
        text-align: center;
    }
    
    .workout-header .shuffle-btn,
    .workout-header .back-btn {
        margin: 0 auto;
        display: block;
    }

    .workout-header {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
        text-align: center;
    }
    
    /* Desktop styles remain normal */

    .card-game-area {
        flex-direction: row;
        justify-content: space-around;
        gap: 20px;
    }

    .deck-stack {
        width: 90px;
        height: 126px;
    }

    .discard-pile {
        min-height: 126px;
        width: 90px;
    }

    .card {
        width: 90px !important;
        height: 126px !important;
        font-size: 0.9rem;
    }

    .workout-info {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .rep-number {
        font-size: 3rem;
    }
}

/* Desktop and Large Devices */
@media (min-width: 769px) {
    .container {
        width: 90%;
        max-width: 1200px;
        padding: 20px;
    }

    .category-buttons {
        flex-direction: row;
        gap: 20px;
    }

    .workout-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .card-game-area {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }

    .workout-info {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
}

/* High DPI/Retina Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .card {
        /* Sharper rendering on high DPI displays */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Landscape Mode Specific Fixes */
@media (max-width: 768px) and (orientation: landscape) {
    .container {
        padding: 10px;
    }
    
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.1rem; }
    
    .category-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
    }
    
    .category-btn {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
        min-height: 45px;
    }
    
    .workout-info {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

/* Accessibility and Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
    }
}

/* Light Mode Support */
@media (prefers-color-scheme: light) {
    :root {
        --bg-primary: #f5f5f5;
        --bg-secondary: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
    }
}

/* Internet Explorer 11 Support */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .card-game-area {
        display: -ms-flexbox;
        -ms-flex-direction: row;
        -ms-flex-pack: center;
    }
    
    .workout-info {
        display: -ms-grid;
        -ms-grid-columns: 1fr 1fr;
    }
}

/* Legacy Browser Fallbacks */
.no-flexbox .category-buttons,
.no-flexbox .workout-header {
    display: block;
    text-align: center;
}

.no-flexbox .category-btn {
    display: block;
    margin: 10px auto;
}

/* Print Styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .category-btn,
    .shuffle-btn,
    .back-btn,
    .deck-stack {
        display: none;
    }
    
    .workout-info {
        break-inside: avoid;
    }

    /* Comprehensive Back Day legend divider */
    .legend-divider {
        height: 2px;
        background-color: #000000;
        margin: 15px 0;
        opacity: 0.8;
    }
}