/* ===== GLOBAL STYLES ===== */
/* Global Colors */
:root {
    --primary-dark: #0a0a15;
    --secondary-dark: #121225;
    --accent-glow: #00e6ff;
    --neon-gold: #ffd000;
    --neon-pink: #ff00c8;
    --neon-cyan: #00fff7;
    --neon-green: #00ff9d;
    --neon-purple: #8c27ff;
    --text-primary: #ffffff;
    --text-glow: rgba(0, 230, 255, 0.8);
    --glass-border: rgba(0, 230, 255, 0.3);
}

/* Website Background */
body {
    font-family: "Audiowide", sans-serif;
    background: 
        radial-gradient(circle at 10% 10%, rgb(255, 0, 128) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgb(0, 0, 0) 0%, transparent 35%),
        radial-gradient(circle at 90% 90%, rgb(0, 247, 255) 0%, transparent 40%),
        linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

body.home-page {
    justify-content: center;
}

/* ===== TYPOGRAPHY ===== */
h1 {
    font-size: 5.5rem;
    margin: 10px 0;
    text-transform: uppercase;
    text-shadow: 2px 1px 20px #ffffff;
    background-clip: text;
    letter-spacing: 2px;
    position: relative;
    background: linear-gradient(
        to left,
        #4dfafa 20%,
        #ffffff 30%,
        #fffb00 70%,
        #00f7ff 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: .5px;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

h2 {
    font-size: 2.5rem;
    margin: 20px 0;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--text-glow);
    letter-spacing: 1px;
}

h3 {
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin: 10px 0;
}

h4 {
    font-size: 1.8rem;
    margin: 0;
    text-align: center;
}

p {
    font-size: 4rem;
    color: var(--text-primary);
    text-shadow: 0 0 15px var(--text-glow);
    margin: 10px 0;
    font-style: italic;
}

/* ===== NAVIGATION ===== */
.main-nav {
    display: flex;
    justify-content: center;
    padding: 20px;
    width: 100%;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.main-nav a {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 2px;
    background: rgba(20, 20, 40, 0.8);
    border: 2px solid rgba(0, 229, 255, 0.8);
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 180px;
    text-align: center;
}

.main-nav a:hover {
    border-color: var(--accent-glow);
    box-shadow: 0 0 20px rgba(0, 230, 255, 0.4);
}

/* ===== HOME PAGE ===== */
.titleBox {
    text-align: center;
    padding: 60px;
    margin: 40px auto;
    max-width: 900px;
    background: rgba(10, 10, 25, 0.7);
    border: 2px solid rgba(0, 229, 255, 0.8);
    border-radius: 24px;
    box-shadow: 
        0 0 40px rgba(0, 230, 255, 0.3),
        0 0 80px rgba(157, 0, 255, 0.2);
    backdrop-filter: blur(8px);
}

/* ===== DUEL PAGE ===== */
.body.duel-page {
    max-height: 100dvh;
}
/* Container */
.container {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

/* Main Calculator Grid */
.wrapper {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(10, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    max-width: 1200px;
}

/* Duelist Boxes */
.duelist1Box, .duelist2Box {
    min-height: 15vh;
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(20, 20, 40);
    backdrop-filter: blur(10px);
}

/* Default Neon Colors */
#duelist1 {
    border-color: var(--neon-pink);
    box-shadow: 
        inset 0 0 30px rgba(255, 0, 200, 0.2),
        0 0 50px rgba(255, 0, 200, 0.3);
}

#duelist2 {
    border-color: var(--neon-cyan);
    box-shadow: 
        inset 0 0 30px rgba(0, 255, 247, 0.2),
        0 0 50px rgba(131, 163, 162, 0.3);
}

/* Default Title colors */
.duelist1Box h2 {
    color: var(--neon-pink);
    text-shadow: 0 0 15px rgba(255, 0, 200, 0.7);
    font-size: 1.8rem;
    margin: 0.5rem 0;
}

.duelist2Box h2 {
    color: var(--neon-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 247, 0.7);
    font-size: 1.8rem;
    margin: 0.5rem 0;
}

/* Point Display */
.duelist1Box p, .duelist2Box p {
    font-size: 4rem;
    font-weight: bold;
    margin: 10px 0;
    text-shadow: 0 0 20px currentColor;
}

/* Calculator Input Display */
#display {
    height: 4.25rem;
    width: 100%;
    border-radius: 12px;
    background: rgba(10, 10, 20, 0.9);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: rgb(255, 255, 255);
    border: 2px solid var(--glass-border);
    font-family: "Audiowide", sans-serif;
    box-shadow: 
        inset 0 0 20px rgba(0, 230, 255, 0.1),
        0 0 30px rgba(0, 230, 255, 0.2);
}

/* ===== BUTTON STYLES ===== */
/* Base Button */
button {
    font-family: "Audiowide", sans-serif;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
    letter-spacing: 1px;
    backdrop-filter: blur(2px);
}

/* ===== DUEL PAGE BUTTONS ===== */
/* Duel Page Number Buttons */
body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
    width: 6rem;
    height: 4.5rem;
    font-size: 1.5rem;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    color: var(--text-primary);
    border: 2px solid rgba(0, 230, 255, 0.3);
}

body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset):hover {
    background: linear-gradient(145deg, #22223e, #1a1a3e);
    border-color: var(--accent-glow);
    box-shadow: 0 6px 20px rgba(0, 230, 255, 0.3);
}

body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset):active {
    transform: translateY(2px);
}

/* Duel Page Special Buttons (Clear, Duelist 1/2) */
body.duel-page .specialButton {
    width: 100%;
    height: 4.5rem;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    color: var(--text-primary);
    font-size: 1.2rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

body.duel-page .specialButton:hover {
    background: linear-gradient(145deg, #22223e, #1a1a3e);
    border-color: rgba(255, 255, 255, 0.767);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.4);
}

body.duel-page .specialButton:active {
    transform: translateY(2px);
}

/* Duel Page Operator Buttons */
body.duel-page .operatorButton {
    width: 8rem;
    height: 4.5rem;
    background: linear-gradient(170deg, #df75ff, #630fff);
    color: white;
    border: 2px solid rgba(155, 67, 238, 0.973);
    font-size: 1.8rem;
}

body.duel-page .operatorButton:hover {
    background: linear-gradient(170deg, #e48bff, #813dff);
    border-color: rgba(191, 123, 255, 0.973);
    box-shadow: 0 6px 20px rgba(231, 136, 255, 0.5);
}

body.duel-page .operatorButton:active {
    transform: translateY(2px);
}

/* Duel Page Reset Button */
body.duel-page #resetButton {
    width: 100%;
    height: 4.5rem;
    font-size: 1.2rem;
    background: linear-gradient(170deg, #ff7575, #ff0f0f);
    border: 2px solid rgb(255, 78, 78);
    color: white;
    align-items: center;
    justify-content: center;
}

body.duel-page #resetButton:hover {
    background: linear-gradient(170deg, #ff8888, #ff2a2a);
    border-color: #ff6262;
    box-shadow: 0 6px 20px rgba(255, 67, 67, 0.767);
}

body.duel-page #resetButton:active {
    transform: translateY(2px);
}

/* Duel Page Dice and Coin Buttons */
body.duel-page #diceButton, body.duel-page #coinButton {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(145deg, #ffd32a, #ffa801);
    border: 2px solid rgba(255, 168, 1, 0.4);
    color: #2f3640;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 4px 15px rgba(255, 168, 1, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.duel-page #diceButton:hover, body.duel-page #coinButton:hover {
    background: linear-gradient(145deg, #ffdd59, #ffb142);
    border-color: #ffa801;
    box-shadow: 
        0 6px 20px rgba(255, 168, 1, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-5px) rotate(4deg);
}

body.duel-page #diceButton:active, body.duel-page #coinButton:active {
    background: linear-gradient(145deg, #ffdd59, #ffb142);
    border-color: #ffa801;
    box-shadow: 
        0 6px 20px rgba(255, 168, 1, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* Duel Page Coin and Dice Areas */
.coin, .dice { 
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip, .roll { 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 230, 255, 0.7);
    color: var(--text-primary);
    height: 3rem;
}

/* Duel Page Timer */
body.duel-page .timerDisplay {
    background: rgba(10, 10, 20, 0.9);
    border: 2px solid var(--glass-border);
    color: var(--neon-green);
    font-size: 2.2rem;
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
    box-shadow: 
        inset 0 0 20px rgba(0, 255, 157, 0.1),
        0 0 30px rgba(0, 255, 157, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
}

body.duel-page .timerButtons { 
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

/* ===== GRID POSITIONS (Duel Page Buttons) ===== */
/* Duelist Boxes */
.duelist1Box {
    grid-column: 1 / span 4;
    grid-row: 1 / span 4; 
}

.duelist2Box {
    grid-column: 8 / span 4;
    grid-row: 1 / span 4; 
}

.numDisplay {
    grid-column: 5 / span 4;
    grid-row: 6;
    display: flex;
    align-items: center;
}

.coin { grid-column: 5; grid-row: 1; }
.flip { grid-column: 5; grid-row: 2; }
.dice { grid-column: 7; grid-row: 1; }
.roll { grid-column: 7; grid-row: 2; }
.timerDisplay { grid-column: 5 / span 3; grid-row: 3; }
.timerButtons { grid-column: 5 / span 3; grid-row: 4; }

/* Calculator Buttons Grid Positioning */
.clearDisplay { grid-column: 4; grid-row: 6; }
.addB { grid-column: 4; grid-row: 7; } 
.sevenB { grid-column: 5; grid-row: 7; } 
.eightB { grid-column: 6; grid-row: 7; } 
.nineB { grid-column: 7; grid-row: 7; } 
.applyToD1 { grid-column: 8; grid-row: 8; } 
.subtractB { grid-column: 4; grid-row: 8; } 
.fourB { grid-column: 5; grid-row: 8; } 
.fiveB { grid-column: 6; grid-row: 8; } 
.sixB { grid-column: 7; grid-row: 8; }
.applyToD2 { grid-column: 8; grid-row: 9; } 
.multiplyB { grid-column: 4; grid-row: 9; } 
.oneB { grid-column: 5; grid-row: 9; }
.twoB { grid-column: 6; grid-row: 9; }
.threeB { grid-column: 7; grid-row: 9; }
.reset { grid-column: 8; grid-row: 7; }
.divideB { grid-column: 4; grid-row: 10; }
.b0 { grid-column: 5; grid-row: 10; }
.b00 { grid-column: 6; grid-row: 10; }
.b000 { grid-column: 7; grid-row: 10; }
.calculateB { grid-column: 8; grid-row: 10; }

/* ===== SETTINGS PAGE STYLES ===== */
/* Settings Page Layout */
body.settings-page {
    text-align: center;
    align-content: center;
}

/* Settings Page Color Selection Section */
body.settings-page section {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 2rem;
    margin: 0;
    padding: 2rem;
    background: rgba(20, 20, 40, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: 
        inset 0 0 30px rgba(0, 230, 255, 0.1),
        0 0 50px rgba(0, 230, 255, 0.2);
}

/* Settings Page Color Buttons - PRESERVED INTEGRITY */
body.settings-page .colorButton {
    width: 100%;
    height: 120px;
    margin: 0;
    border-radius: 16px;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 
        inset 0 0 30px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(0, 0, 0, 0.5);
}

body.settings-page .colorButton h3 {
    position: relative;
    font-size: 1.4rem;
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    text-shadow: 0 0 10px currentColor;
    z-index: 2;
}

body.settings-page .colorButton:hover {
    transform: translateY(-1px);
}

/* Specific Color Button Glows - PRESERVED */
body.settings-page .colorButton:nth-child(1):hover { box-shadow: 0 0 40px rgb(255, 85, 85); }
body.settings-page .colorButton:nth-child(2):hover { box-shadow: 0 0 40px rgb(120, 255, 120); }
body.settings-page .colorButton:nth-child(3):hover { box-shadow: 0 0 40px rgb(253, 131, 253); }
body.settings-page .colorButton:nth-child(4):hover { box-shadow: 0 0 40px rgb(162, 0, 255); }
body.settings-page .colorButton:nth-child(5):hover { box-shadow: 0 0 40px rgb(0, 255, 242); }
body.settings-page .colorButton:nth-child(6):hover { box-shadow: 0 0 40px rgba(255, 255, 255, 0.5); }

/* Settings Page Reset Colors Button */
body.settings-page .colorReset {
    grid-column: 1 / -1;
    padding: 12px;
    font-size: 1.5rem;
    font-weight: bold;
    justify-self: center;
    color: var(--text-primary);
    background: linear-gradient(170deg, #ff7575, #ff0f0f);
    border-radius: 16px;
    border: 2px solid rgb(255, 78, 78);
    cursor: pointer;
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.settings-page .colorReset:hover {
    border-color: rgb(255, 0, 0);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 0, 0, 0.5);
}

/* Settings Page Custom Color Section */
body.settings-page .custom-color-section {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
    padding: 30px;
    margin-bottom: 1rem;
    background: rgba(20, 20, 40, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: 
        inset 0 0 30px rgba(0, 230, 255, 0.1),
        0 0 50px rgba(0, 230, 255, 0.2);
}

/* Duelist 1 & 2 Custom Color Containers */
body.settings-page .custom-color-picker {
    text-align: center;
    padding: 20px;
    background: rgba(30, 30, 50, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(0, 230, 255, 0.2);
}

body.settings-page .custom-color-picker:hover {
    border-color: var(--accent-glow);
    box-shadow: 0 0 30px rgba(0, 230, 255, 0.3);
}

body.settings-page .custom-color-picker h3 {
    color: var(--accent-glow);
    text-shadow: 0 0 10px rgba(0, 230, 255, 0.7);
    margin-bottom: 20px;
    font-size: 1.4rem;
}

body.settings-page .custom-color-picker.combined h3 {
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
}

body.settings-page .color-picker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* Settings Page Color Pickers */
body.settings-page #colorPicker1,
body.settings-page #colorPicker2 {
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.432);
    cursor: pointer;
    transition: all 0.25s ease;
}

body.settings-page #colorPicker1::-webkit-color-swatch-wrapper,
body.settings-page #colorPicker2::-webkit-color-swatch-wrapper {
    padding: 0;
}

body.settings-page #colorPicker1::-webkit-color-swatch,
body.settings-page #colorPicker2::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

body.settings-page #colorPicker1::-moz-color-swatch,
body.settings-page #colorPicker2::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

body.settings-page #colorPicker1:hover,
body.settings-page #colorPicker2:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px currentColor;
}

/* Settings Page Hex Code Display */
body.settings-page .color-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

body.settings-page .hex-value {
    font-family: monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.5);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    min-width: 100px;
    text-align: center;
}

/* Settings Page Combined Preview Section */
body.settings-page .color-preview {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem;
}

body.settings-page .preview-box {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

body.settings-page .preview-box:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px currentColor;
}

body.settings-page .save-both-btn {
    font-size: 1.1rem;
    font-weight: bold;
    width: 100%;
    padding: 1rem;
    margin-top: 10px;
    background: linear-gradient(145deg, var(--neon-purple), var(--neon-pink));
    color: white;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.733);
    cursor: pointer;
}

body.settings-page .save-both-btn:hover {
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.6);
}

body.settings-page .save-both-btn:active {
    transform: translateY(1px);
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== DESKTOP: 1024px and above ===== */
@media (min-width: 1024px) {
    .wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }
    /* Desktop uses the base 11-column layout already defined in main CSS */
}

/* ===== TABLET: 768px to 1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .wrapper {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: auto;
        gap: 0.8rem;
        margin: 0 1rem;
        max-width: 95vw;
    }
    
    /* Duelist Boxes - Side by side */
    .duelist1Box {
        grid-column: 1 / span 3;
        grid-row: 1 / span 4;
    }
    
    .duelist2Box {
        grid-column: 7 / span 3;
        grid-row: 1 / span 4;
    }
    
    /* Utility Tools - Reorganize for tablet */
    .coin { grid-column: 4; grid-row: 1; }
    .flip { grid-column: 4; grid-row: 2; }
    .dice { grid-column: 6; grid-row: 1; }
    .roll { grid-column: 6; grid-row: 2; }
    .timerDisplay { grid-column: 4 / span 3; grid-row: 3; }
    .timerButtons { grid-column: 4 / span 3; grid-row: 4; }
    
    /* Calculator Area */
    .numDisplay {
        grid-column: 4 / span 4;
        grid-row: 5;
    }
    
    /* Calculator Buttons Grid for Tablet */
    .clearDisplay { grid-column: 3; grid-row: 5; }
    .addB { grid-column: 3; grid-row: 6; }
    .sevenB { grid-column: 4; grid-row: 6; }
    .eightB { grid-column: 5; grid-row: 6; }
    .nineB { grid-column: 6; grid-row: 6; }
    .reset { grid-column: 7; grid-row: 6; }
    
    .subtractB { grid-column: 3; grid-row: 7; }
    .fourB { grid-column: 4; grid-row: 7; }
    .fiveB { grid-column: 5; grid-row: 7; }
    .sixB { grid-column: 6; grid-row: 7; }
    .applyToD1 { grid-column: 7; grid-row: 7; }

    .multiplyB { grid-column: 3; grid-row: 8; }
    .oneB { grid-column: 4; grid-row: 8; }
    .twoB { grid-column: 5; grid-row: 8; }
    .threeB { grid-column: 6; grid-row: 8; }
    .applyToD2 { grid-column: 7; grid-row: 8; }

    .divideB { grid-column: 3; grid-row: 9; }
    .b0 { grid-column: 4; grid-row: 9; }
    .b00 { grid-column: 5; grid-row: 9; }
    .b000 { grid-column: 6; grid-row: 9; }
    .calculateB { grid-column: 7; grid-row: 9; }
    
    /* Adjust button sizes */
    body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
        width: 5rem;
        height: 4rem;
        font-size: 1.3rem;
    }
    
    body.duel-page .specialButton,
    body.duel-page .operatorButton,
    body.duel-page #resetButton {
        height: 4rem;
        font-size: 1rem;
    }
    
    body.duel-page .operatorButton {
        width: 6rem;
    }
    
    body.duel-page .operatorButton h4 {
        font-size: 1.5rem;
    }
    
    /* Adjust duelist boxes */
    .duelist1Box, .duelist2Box {
        padding: 1.5rem;
        min-height: 12vh;
    }
    
    .duelist1Box h2, .duelist2Box h2 {
        font-size: 1.6rem;
    }
    
    .duelist1Box p, .duelist2Box p {
        font-size: 3.2rem;
    }
    
    /* Adjust calculator display */
    #display {
        height: 3.5rem;
        font-size: 1.8rem;
    }
    
    /* Adjust timer */
    body.duel-page .timerDisplay {
        font-size: 1.8rem;
        height: 3rem;
    }
    
    /* Adjust dice/coin buttons */
    body.duel-page #diceButton,
    body.duel-page #coinButton {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    body.duel-page #diceButton i,
    body.duel-page #coinButton i {
        font-size: 1.8rem;
    }
}

/* ===== MOBILE: 0-767px (BASE MOBILE STYLES) ===== */
@media (max-width: 767px) {
    .wrapper {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: auto;
        gap: 0.5rem;
        max-width: 100vw;
        margin: 0 0.5rem;
    }
    
    /* Header adjustments */
    .container h1 {
        font-size: 2rem;
        padding: 0.5rem 0;
        margin: 0;
    }
    
    /* Duelist Boxes - Side by side on mobile */
    .duelist1Box {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    
    .duelist2Box {
        grid-column: 4 / span 2;
        grid-row: 1;
    }
    
    /* Adjust duelist boxes for mobile */
    .duelist1Box, .duelist2Box {
        padding: 1rem;
        min-height: 10vh;
    }
    
    .duelist1Box h2, .duelist2Box h2 {
        font-size: 1rem;
        margin: 0.3rem 0;
    }
    
    .duelist1Box p, .duelist2Box p {
        font-size: 1.5rem;
        margin: 0.3rem 0;
    }
    
    /* Utility Tools */
    .coin { grid-column: 1; grid-row: 2; }
    .flip { 
        grid-column: 2; 
        grid-row: 2; 
        place-self: center;
    }
    .dice { grid-column: 5; grid-row: 2; }
    .roll { 
        grid-column: 4; 
        grid-row: 2; 
        place-self: center;
    }
    
    .timerDisplay {
        grid-column: 1 / span 3;
        grid-row: 3;
        font-size: 1rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .timerButtons {
        grid-column: 4 / span 2;
        grid-row: 3;
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }
    
    /* Calculator Area */
    .numDisplay {
        grid-column: 2 / span 4;
        grid-row: 5;
        display: flex;
        align-items: center;
    }
    
    #display {
        height: 3rem;
        font-size: 1.6rem;
        width: 100%;
    }
    
    /* Calculator Buttons Grid for Mobile */
    .clearDisplay { grid-column: 1; grid-row: 5; }
    .addB { grid-column: 1; grid-row: 6; }
    .sevenB { grid-column: 2; grid-row: 6; }
    .eightB { grid-column: 3; grid-row: 6; }
    .nineB { grid-column: 4; grid-row: 6; }
    .applyToD1 { grid-column: 5; grid-row: 7; }
    .reset { grid-column: 5; grid-row: 6; }
    
    .subtractB { grid-column: 1; grid-row: 7; }
    .fourB { grid-column: 2; grid-row: 7; }
    .fiveB { grid-column: 3; grid-row: 7; }
    .sixB { grid-column: 4; grid-row: 7; }
    .applyToD2 { grid-column: 5; grid-row: 8; }
    .multiplyB { grid-column: 1; grid-row: 8; }
    .divideB { grid-column: 1; grid-row: 9; }
    
    .oneB { grid-column: 2; grid-row: 8; }
    .twoB { grid-column: 3; grid-row: 8; }
    .threeB { grid-column: 4; grid-row: 8; }
    .calculateB { grid-column: 5; grid-row: 9; }
    
    .b0 { grid-column: 2; grid-row: 9; }
    .b00 { grid-column: 3; grid-row: 9; }
    .b000 { grid-column: 4; grid-row: 9; }
    
    /* Adjust button sizes for mobile */
    body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
        width: 3.75rem;
        height: 3.2rem;
        font-size: 1rem;
    }
    
    body.duel-page .specialButton,
    body.duel-page #resetButton {
        width: 4.5rem;
        height: 3.2rem;
        font-size: 0.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    body.duel-page .operatorButton {
        width: 4.5rem;
        height: 3.2rem;
    }
    
    body.duel-page .operatorButton h4 {
        font-size: 1.3rem;
        margin: 0;
    }
    
    body.duel-page #diceButton,
    body.duel-page #coinButton {
        width: 3rem;
        height: 3.2rem;
    }
    
    /* Adjust font icons for mobile */
    body.duel-page #diceButton i,
    body.duel-page #coinButton i {
        font-size: 1.5rem;
    }
    
    /* Adjust result displays */
    .flip, .roll {
        font-size: 1.2rem;
        height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ===== MEDIUM MOBILE ENHANCEMENTS: 481px-767px ===== */
@media (min-width: 481px) and (max-width: 767px) {
    /* Only override what's different from base mobile */
    .duelist1Box h2, .duelist2Box h2 {
        font-size: 1.2rem; /* Slightly larger for medium phones */
    }
    
    .duelist1Box p, .duelist2Box p {
        font-size: 1.8rem; /* Slightly larger LP display */
    }
    
    #display {
        height: 3.2rem; /* Slightly taller */
        font-size: 1.7rem;
    }
    
    body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
        width: 5rem; /* Slightly larger buttons */
        height: 3.4rem;
    }
    
    body.duel-page .specialButton,
    body.duel-page #resetButton {
        width: 5rem;
        height: 3.4rem;
        font-size: 1rem; /* Slightly larger text */
    }
    
    body.duel-page .operatorButton {
        width: 5rem;
        height: 3.4rem;
    }
    
    body.duel-page .operatorButton h4 {
        font-size: 1.4rem; /* Slightly larger operator symbol */
    }
    
    .timerDisplay {
        font-size: 1.2rem; /* Slightly larger timer */
        height: 2.2rem;
    }
    
    .flip, .roll {
        font-size: 1.3rem; /* Slightly larger result text */
    }
}

/* ===== SMALL MOBILE ENHANCEMENTS: 0-480px ===== */
/* This only contains adjustments FROM the base mobile styles */
/* Base mobile styles (above) already apply to 0-767px */
/* These are just tweaks for extra small screens */
@media (max-width: 480px) {
    /* Everything here OVERRIDES the base mobile styles */
    /* No duplication - only differences */
    .duelist1Box h2, .duelist2Box h2 {
        font-size: 0.9rem; /* Smaller than base mobile */
    }
    
    .duelist1Box p, .duelist2Box p {
        font-size: 1.4rem; /* Smaller than base mobile */
    }
    
    .container h1 {
        font-size: 1.8rem; /* Smaller header */
    }
    
    #display {
        height: 2.8rem;
        font-size: 1.5rem;
    }
    
    body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
        width: 4.2rem;
        height: 3rem;
        font-size: 0.95rem;
    }
    
    body.duel-page .specialButton,
    body.duel-page #resetButton {
        width: 4.2rem;
        height: 3rem;
        font-size: 0.85rem;
    }
    
    body.duel-page .operatorButton {
        width: 4.2rem;
        height: 3rem;
    }
    
    body.duel-page .operatorButton h4 {
        font-size: 1.2rem;
    }
    
    body.duel-page #diceButton,
    body.duel-page #coinButton {
        width: 2.8rem;
        height: 3rem;
    }
    
    body.duel-page #diceButton i,
    body.duel-page #coinButton i {
        font-size: 1.3rem;
    }
    
    .timerDisplay {
        font-size: 0.95rem;
        height: 1.9rem;
    }
    
    .flip, .roll {
        font-size: 1.1rem;
        height: 2rem;
    }
}

/* ===== VERY SMALL MOBILE: 320px and below ===== */
/* Further reductions for tiny screens */
@media (max-width: 320px) {
    .wrapper {
        gap: 0.3rem; /* Tighter spacing */
    }
    
    .duelist1Box, .duelist2Box {
        padding: 0.8rem; /* Less padding */
    }
    
    .duelist1Box h2, .duelist2Box h2 {
        font-size: 0.85rem; /* Even smaller */
    }
    
    .duelist1Box p, .duelist2Box p {
        font-size: 1.2rem; /* Even smaller LP */
    }
    
    body.duel-page button:not(.specialButton):not(.operatorButton):not(#resetButton):not(#diceButton):not(#coinButton):not(.colorButton):not(.colorReset) {
        width: 3.3rem;
        height: 2.8rem;
        font-size: 0.9rem;
    }
    
    body.duel-page .specialButton,
    body.duel-page #resetButton,
    body.duel-page .operatorButton {
        height: 2.8rem;
        font-size: 0.8rem;
    }
    
    body.duel-page .operatorButton {
        width: 3.3rem;
    }
    
    body.duel-page .operatorButton h4 {
        font-size: 1.1rem;
    }
    
    #display {
        height: 2.6rem;
        font-size: 1.3rem;
    }
    
    .timerDisplay {
        font-size: 0.9rem;
        height: 1.8rem;
    }
}

/* ============== SETTINGS PAGE RESPONSIVE =============== */

@media (max-width: 1023px) {
    h1 { font-size: 3.5rem; }
    h2 { font-size: 1.8rem; }
    .titleBox { padding: 30px 20px; }
    
    body.settings-page section {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        max-width: 900px;
    }
    
    body.settings-page .colorButton {
        height: 110px;
    }
    
    body.settings-page .colorButton h3 {
        font-size: 1.3rem;
    }
    
    body.settings-page .colorReset {
        min-width: 280px;
        height: 75px;
        font-size: 1.4rem;
    }
    
    body.settings-page .custom-color-section {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.1rem; }
    p { font-size: 3rem; }
    
    .main-nav ul { gap: 15px; }
    .main-nav a {
        padding: 10px 20px;
        font-size: 1rem;
        min-width: 120px;
    }
    
    .titleBox {
        padding: 25px 15px;
        margin: 15px;
    }
    
    body.settings-page section {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
        gap: 20px;
        max-width: 600px;
    }
    
    body.settings-page .colorButton {
        height: 100px;
    }
    
    body.settings-page .colorButton h3 {
        font-size: 1.2rem;
        padding: 8px;
    }
    
    body.settings-page .colorReset {
        min-width: 250px;
        height: 70px;
        font-size: 1.3rem;
    }
    
    body.settings-page #colorPicker1,
    body.settings-page #colorPicker2 {
        width: 70px;
        height: 70px;
    }
    
    body.settings-page .hex-value {
        font-size: 1rem;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1rem; }
    p { font-size: 1rem; }
    
    .main-nav ul { 
        gap: 10px;
    }
    
    .main-nav a {
        width: 200px;
        max-width: 90vw;
    }
    
    body.settings-page section {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
    }
    
    body.settings-page .colorButton {
        height: 90px;
    }
    
    body.settings-page .colorButton h3 {
        font-size: 1.1rem;
        padding: 6px;
    }
    
    body.settings-page .colorReset {
        min-width: 200px;
        height: 60px;
        font-size: 1.1rem;
        padding: 0 30px;
    }
    
    body.settings-page .custom-color-section {
        padding: 15px;
        gap: 15px;
    }
    
    body.settings-page .color-display {
        flex-direction: column;
        gap: 8px;
    }
    
    body.settings-page .save-both-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 320px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.4rem; }
    
    body.settings-page .colorButton {
        height: 80px;
    }
    
    body.settings-page .colorButton h3 {
        font-size: 1rem;
    }
    
    body.settings-page .colorReset {
        min-width: 180px;
        height: 55px;
        font-size: 1rem;
        padding: 0 20px;
    }
}