/*
:root {
    --bs-body-line-height: 1.4;
}
*/

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-top: 12px;
    margin-bottom: 90px;
    min-height: 90%;
    height: 95%;
    display: flex;
    flex-direction: column;
    background: white;
}

    body.offline {
        background: white;
    }

    body.math {
        /* background-color: wheat;*/
        background: rgb(252,244,230);
        background: -moz-linear-gradient(120deg, rgba(252,244,230,1) 20%, rgba(251,225,202,1) 60%, rgba(245,222,179,1) 80%, rgba(244,164,96,1) 100%);
        background: -webkit-linear-gradient(120deg, rgba(252,244,230,1) 20%, rgba(251,225,202,1) 60%, rgba(245,222,179,1) 80%, rgba(244,164,96,1) 100%);
        background: linear-gradient(120deg, rgba(252,244,230,1) 20%, rgba(251,225,202,1) 60%, rgba(245,222,179,1) 80%, rgba(244,164,96,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcf4e6",endColorstr="#f4a460",GradientType=1);
    }

    body.mash {
        /*background-color: powderblue;*/
        background: rgb(229,245,247);
        background: -moz-linear-gradient(120deg, rgba(229,245,247,1) 20%, rgba(176,224,230,1) 60%, rgba(135,206,250,1) 80%, rgba(172,172,197,1) 100%);
        background: -webkit-linear-gradient(120deg, rgba(229,245,247,1) 20%, rgba(176,224,230,1) 60%, rgba(135,206,250,1) 80%, rgba(172,172,197,1) 100%);
        background: linear-gradient(120deg, rgba(229,245,247,1) 20%, rgba(176,224,230,1) 60%, rgba(135,206,250,1) 80%, rgba(172,172,197,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5f5f7",endColorstr="#acacc5",GradientType=1);
    }

    body.match {
        /* New Teal / LightCyan theme */
        background: rgb(224, 247, 247); /* LightCyan */
        background: -moz-linear-gradient(120deg, rgba(224, 247, 247, 1) 20%, rgba(175, 225, 225, 1) 60%, rgba(72, 180, 180, 1) 80%, rgba(0, 128, 128, 1) 100%); /* Teal */
        background: -webkit-linear-gradient(120deg, rgba(224, 247, 247, 1) 20%, rgba(175, 225, 225, 1) 60%, rgba(72, 180, 180, 1) 80%, rgba(0, 128, 128, 1) 100%);
        background: linear-gradient(120deg, rgba(224, 247, 247, 1) 20%, rgba(175, 225, 225, 1) 60%, rgba(72, 180, 180, 1) 80%, rgba(0, 128, 128, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0f7f7",endColorstr="#008080",GradientType=1);
    }

    body.mass {
        /*background-color: darkseagreen;*/
        background: rgb(218,233,218);
        background: -moz-linear-gradient(120deg, rgba(218,233,218,1) 20%, rgba(143,188,143,1) 60%, rgba(60,179,113,1) 80%, rgba(46,139,87,1) 100%);
        background: -webkit-linear-gradient(120deg, rgba(218,233,218,1) 20%, rgba(143,188,143,1) 60%, rgba(60,179,113,1) 80%, rgba(46,139,87,1) 100%);
        background: linear-gradient(120deg, rgba(218,233,218,1) 20%, rgba(143,188,143,1) 60%, rgba(60,179,113,1) 80%, rgba(46,139,87,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dae9da",endColorstr="#2e8b57",GradientType=1);
    }

.container {
    flex: 1 0 auto;
}

.flexshrink {
    flex-shrink: 0;
}

hr {
    height: 2px !important;
    background-color: dimgray;
    border: none;
}

label {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 3px;
    background-color: transparent;
}

    label:hover {
    }


#headerspan {
    font-size: larger;
    color: black;
    font-weight: 700;
}

#msgonespan,
#msgtwospan {
    color: black;
    font-size: 100%;
    font-weight: 500;
    justify-content: normal;
    align-items: normal;
    text-align: left;
}

    /* Adjustments for when the warning appears in the large Top Header */
    #msgtwospan .capacity-warning {
        font-size: 0.6em; /* Relative to the large header font */
        display: block; /* Force it to a new line */
        margin-top: 4px;
    }

    #msgonespan.math,
    #msgtwospan.math {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #msgonespan.math {
        font-size: 1.2em;
        color: darkslategray;
        font-weight: 600;
    }

    #msgtwospan.math {
        font-size: 1.5em;
        font-weight: 700;
        margin-top: -3px;
        margin-bottom: 6px;
        margin-left: 4px;
    }

    #msgtwospan.userteaminput {
        color: black;
        font-weight: 600;
        font-size: 1.1em;
        text-align: left;
        display: block;
    }

.resultsrow:after {
    content: "";
    display: table;
    clear: both;
}

td.resultscol0 {
}

td.resultscol1 {
    padding-left: 18px;
}

td.resultscol2 {
    padding-left: 9px;
}

.teamassigned {
    color: darkslategray;
    font-size: 120%;
    font-weight: 600;
}

.prepinfo {
    display: inline-block;
    line-height: 40px;
    vertical-align: baseline;
    font-weight: 700;
}

/* --- FIX: Changed width to 100% --- */
/*
.activitycontainer {
    flex: 1 0 auto;
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
*/

.activitycontainer {
    flex: 1 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#timeleftspan {
    color: blue;
    font-weight: 600;
    font-size: 1.0em;
    line-height: 48px;
}


/* UPDATE: Footer Styling 
   - Uses flexbox to keep Score/Team/User aligned vertically 
   - Sets min-height to reserve space for the 2-line warning 
    was
        line-height: 140%;
*/
.footer {
    /* CRITICAL FIX: Override the generic .container flex growth */
    flex: 0 0 auto !important;
    /* Push to bottom */
    margin-top: auto;
    width: 100%;
    /* Border and Spacing */
    border-top: 1px solid dimgray !important;
    padding-top: 5px;
    padding-bottom: 5px;
    /* Stack items naturally */
    display: block;
    line-height: 1.2;
    text-align: left;
}

    /* Clean up spans so they align with the container edge */
    .footer > span {
        display: block; /* Forces new lines */
        /* REMOVED manual padding. 
       The 'container' class on the parent div handles the alignment 
       with the rest of the page content automatically. */
        padding-left: 0;
        padding-right: 0;
    }

#scorespan {
    /*padding: 0px 0px 0px 18px;*/
    padding-left: 0;
    padding-right: 0;
    color: saddlebrown;
    font-weight: 600;
    font-size: 125%;
    line-height: 150%
}

/* UPDATE: Team Span 
   - Allows stacking the Name and the Warning vertically
    was
        padding-left: var(--bs-gutter-x,.75rem);
        font-weight: 500;
        font-size: 100%;
}
*/

#teamspan {
    /* ~2.4em reserves space for Team Name + Warning */
    min-height: 2.4em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* NEW: Capacity Warning Class 
   - Standardizes the red warning text for Footer and Top Header
*/
.capacity-warning {
    font-size: 0.85em;
    color: #b22222;
    font-weight: 600;
    font-style: italic;
    line-height: 1.5;
}

/* 
    Force Users count to a NEW full line below Score/Team 
    was...
        padding-right: var(--bs-gutter-x,.75rem);
        font-weight: 500;
        font-size: 100%;
        color: dimgray;
*/
#userspan {
    color: dimgray;
    font-weight: 500;
    font-size: 0.9em;
    margin-top: 2px;
}

/* 
    Force Copyright to the very bottom line
    was...
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
        font-weight: 500;
        font-size: 100%;
        color: dimgray;
*/
/* Style the copyright specifically to be smaller/lighter */
#footerspan {
    font-size: 0.8em;
    color: dimgray;
    margin-top: 2px;
}

.border-top {
    border-top: 1px solid darkgray !important;
}


/*
=====================================================
    #mathkeypad and #mashboard STYLES
=====================================================
*/
:root {
    /* --- FIX: Increased button size --- */
    --b_maxsize: min(21vw, 130px); /* Was 120px */
    --b_size: max(30px, var(--b_maxsize));
    --b_cent: 50%;
    
	/* --- CRITICAL SIZING VARIABLES (Must be defined here) --- */
    --container-size: min(95vw, 85vh);
    --game-size: var(--container-size);
    --radius: calc(var(--game-size) * 0.5 - var(--b_size) * 0.6); 
 
}

#inputspan {
    color: navy;
    font-weight: 700;
    font-size: 1.5em;
    
    display: flex; /* <<< FIX 2 */
    justify-content: center; /* Centers mashboard horizontally */
    align-items: center; /* Centers mashboard vertically */
    width: 100%;
    flex-grow: 1; /* Allows it to fill the activitycontainer */
}

/*
=====================================================
    MATH DASH STYLES
=====================================================
*/
:root {
    --kp_min: min(75vw, 40vh);
    --kp_actwidth: min(240px, var(--kp_min));
    --kp_pad: calc(var(--kp_actwidth) / 30);
    --kp_bor: calc(var(--kp_actwidth) / 80);
    --kp_width: calc(var(--kp_actwidth) - calc(2 * var(--kp_pad)) - calc(2 * var(--kp_bor)));
    --kp_butmargin: calc(var(--kp_width) * 0.03);
    --kp_butwidth: calc(var(--kp_width) * 0.273);
    --kp_fontsize: max(calc(var(--kp_butwidth) * 0.375), 1em);
}

#mathkeypad {
    /* Uses the responsive sizing variables from the Math section */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0 auto;
    width: var(--kp_actwidth);
    border: var(--kp_bor) solid black;
    border-radius: var(--kp_pad);
    background: #eee;
    padding: calc(var(--kp_pad)*2);
    /* padding: calc(var(--kp_pad)*2) var(--kp_pad) var(--kp_pad) var(--kp_pad);*/
}

    /* Correct/Incorrect feedback background */
    #mathkeypad.correct {
        background: lightgreen;
    }

    #mathkeypad.incorrect {
        background: lightpink;
    }

    /* Math Input Text Box (using the trig style appearance) */
    #mathkeypad .mathinput input {
        /* Overrides the simpler .mathinput styles */
        -moz-appearance: textfield;
        position: relative;
        width: calc(100%);
        border: 2px solid black;
        padding: 0;
        margin-bottom: var(--kp_pad);
        justify-content: center;
        align-items: center;
        text-align: right; /* Right-align as requested */
        font-weight: 700;
        font-size: 1.8em; /* Larger font */
    }


/* Main 3x3 grid layout */
#mathkeypad .keypad-math-main { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kp_butmargin);
    margin-bottom: var(--kp_butmargin);
}

/* Bottom row layout (C, 0, Go) */
#mathkeypad .keypad-math-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for C, 0, Go */
    gap: var(--kp_butmargin);
    margin-top: var(--kp_butmargin);
}


/* Base style for ALL math buttons */
#mathkeypad button {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
    margin: 0;
    width: 100%;
    height: var(--kp_butwidth);
    border: 2px solid black;
    border-radius: 25%;
    font-size: var(--kp_fontsize);
    color: black;
    background: lightgoldenrodyellow;
    cursor: pointer;
    touch-action: manipulation;
}

    /* Active state (copied from trig styles) */
    #mathkeypad button:active:enabled,
    #mathkeypad button.activate {
        background: palegoldenrod;
        box-shadow: 0 2px 4px darkslategray;
        transform: translateY(2px);
    }

/* Specific button colors (copied from trig styles) */
#mathkeypad .keyC {
    background-color: #ffdada; /* Light red */
    color: #a00;
}

#mathkeypad .keygo { 
    background-color: #d4ffd4; /* Light green */
    color: #006400;
}

/* Button text styles (copied from trig styles) */
#mathkeypad .keypad .key-value, /* FIX: Was .keypad-math-main */
#mathkeypad .keypad-bottom .key-value { /* FIX: Was .keypad-math-bottom */
    font-size: 1.2em;
    line-height: 1.1;
    font-weight: bold;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.8em;
    box-sizing: border-box;
}

#mathkeypad .keypad .key-shortcut, /* FIX: Was .keypad-math-main */
#mathkeypad .keypad-bottom .key-shortcut { /* FIX: Was .keypad-math-bottom */
    /* Shortcut display */
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 2px;
    font-size: 0.6em;
    font-weight: bold;
    color: #333;
    line-height: 1.075;
    margin-top: 0;
    border: 1px solid #888;
    border-radius: 3px;
}

.rsmath {
     /* width: var(--kp_actwidth);
     FIX: Was 180px, now matches keypad */
    margin: 0 auto; /* FIX: Centers the response */
    font-weight: 600;
    font-size: 1.8em;
    margin-top: 1px;
}

/*
=====================================================
    TRIG DASH STYLES
=====================================================
*/

/* 1. Add new background for Trig Dash */
body.trig {
    /* Colors inspired by 'DarkOrchid' */
    background: rgb(245, 230, 247);
    background: -moz-linear-gradient(120deg, rgba(245, 230, 247, 1) 20%, rgba(221, 160, 221, 1) 60%, rgba(186, 85, 211, 1) 80%, rgba(153, 50, 204, 1) 100%);
    background: -webkit-linear-gradient(120deg, rgba(245, 230, 247, 1) 20%, rgba(221, 160, 221, 1) 60%, rgba(186, 85, 211, 1) 80%, rgba(153, 50, 204, 1) 100%);
    background: linear-gradient(120deg, rgba(245, 230, 247, 1) 20%, rgba(221, 160, 221, 1) 60%, rgba(186, 85, 211, 1) 80%, rgba(153, 50, 204, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5e6f7",endColorstr="#9932cc",GradientType=1);
}

/* 2. Style for the question text (e.g., "SOLVE...") */
#msgonespan.trig {
    font-size: 1.2em;
    color: darkorchid;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 3. Style for the question itself (e.g., "sin(pi/6)") */
#msgtwospan.trig {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: -3px;
    margin-bottom: 6px;
    margin-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 4. Style for the response area ("Correct", "Incorrect") */
.rstrig {
    /* width: var(--kp_actwidth);  Use same width as math keypad */
    margin: 0 auto; /* FIX: Center the response */
    font-weight: 600;
    font-size: 1.8em;
    margin-top: 1px;
}


/* 5. Main Trig Keypad Container (borrows from #mathkeypad) */
#trigkeypad {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0 auto;
    width: calc(var(--kp_actwidth) * 1.2);
    border: var(--kp_bor) solid black; /* USE YOUR VARIABLE */
    border-radius: var(--kp_pad); /* USE YOUR VARIABLE */
    background: #eee;
    padding: calc(var(--kp_pad)*2);
    /*padding: calc(var(--kp_pad)*2) var(--kp_pad) var(--kp_pad) var(--kp_pad); USE YOUR VARIABLE */

}

    /* Correct/Incorrect background (borrows from #mathkeypad) */
    #trigkeypad.correct {
        background: lightgreen;
    }

    #trigkeypad.incorrect {
        background: lightpink;
    }

/* 6. Trig Input Text Box (borrows from .mathinput input) */
.triginput input {
    -moz-appearance: textfield;
    position: relative;
    width: calc(100%);
    border: 2px solid black;
    padding: 0;
    margin-bottom: var(--kp_pad); /* USE YOUR VARIABLE */
    justify-content: center;
    align-items: center;
    text-align: right; /* Changed to right-align */
    font-weight: 700;
    font-size: 1.8em; /* A bit larger for this style */
}

/* Main 3x3 grid */
.keypad-trig-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kp_butmargin);
    margin-top: 0; /* CHANGED (was var(--kp_butmargin)) */
    margin-bottom: var(--kp_butmargin); /* CHANGED (was var(--kp_butmargin)) */
}

/* top of 1x4 control rows */
.keypad-trig-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kp_butmargin);
    margin-bottom: var(--kp_butmargin); /* This row had no margin, which is fine, but we add margin-bottom */
}

/* bottom of 1x4 operator row */
.keypad-trig-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--kp_butmargin);
    margin-top: var(--kp_butmargin); /* ADDED margin-top */
}

/* 8. Base style for ALL trig buttons */
#trigkeypad button {
    position: relative; /* This is the anchor for the absolute shortcut */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
    margin: 0;
    width: 100%;
    height: var(--kp_butwidth);
    border: 2px solid black;
    border-radius: 25%;
    font-size: var(--kp_fontsize);
    color: black;
    background: lightgoldenrodyellow;
    cursor: pointer;
    touch-action: manipulation;
}
    /* 9. Active state (borrows from .keypad button:active:enabled) */
    #trigkeypad button:active:enabled,
    #trigkeypad button.activate {
        background: palegoldenrod;
        box-shadow: 0 2px 4px darkslategray;
        transform: translateY(2px);
    }

/* 10. Specific button colors */
#trigkeypad .keypi,
#trigkeypad .keysqrt,
#trigkeypad .keydiv,
#trigkeypad .keyneg {
    background-color: #eee; /* Lighter operator keys */
}

#trigkeypad .keyC {
    background-color: #ffdada; /* Light red */
    color: #a00;
}

#trigkeypad .keygo {
    background-color: #d4ffd4; /* Light green */
    color: #006400;
}

/* New style for generic operators (sqrt, div) */
#trigkeypad .keyop {
    background-color: #ddd;
    color: #000;
}

#trigkeypad button.activate {
    background: palegoldenrod;
    box-shadow: 0 2px 4px darkslategray;
    transform: translateY(2px);
}

/* 11. New styles for the hint boxes */

/* Button text styles (main value + shortcut) */
.key-value {
    font-size: 1.2em;
    line-height: 1.1;
    font-weight: bold; /* <-- Makes all key text bold */
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.8em; /* <-- Make space for the shortcut */
    box-sizing: border-box; /* Important for padding */
}

.key-shortcut {
    /* This "glues" the shortcut to the bottom of the button */
    position: absolute;
    bottom: 5px; /* 4px from the bottom edge */
    left: 50%;
    transform: translateX(-50%); /* Horizontally centers it */
    padding: 0 2px;
    font-size: 0.6em;
    font-weight: bold;
    color: #333;
    line-height: 1.075;
    margin-top: 0;
    border: 1px solid #888;
    border-radius: 3px;
}


/* New style for the UNDEF button */
#trigkeypad .keyundef .key-value {
    font-size: 0.9em; /* <-- Smaller font */
    font-family: sans-serif; /* <-- Use default font */
    /* Squish the text horizontally */
    transform: scaleX(0.9);
}

/* New rule to make the hyphen hint extra bold */
#trigkeypad .keyneg .key-shortcut {
    font-weight: 900; /* Extra bold */
}

/*
=====================================================
    MASH DASH
=====================================================
*/
:root {
    /* --- Mash Geometry Constants (UNCHANGED) --- */
    --PI: 3.14159265358979;
    --onefifthPI: 0.62832;
    --twofifthPI: 1.25664;
    --fourfifthPI: 2.51327;
       
    /* --- Dependent Positioning Variables (Calculated using gameSize/radius) --- */
    --b_maxydist: min(calc(40vw - var(--bs-gutter-x,.75rem) - var(--b_size)/2), 180px);
    --b_ydist: max(60px, var(--b_maxydist));
    --r_maxwidth: min(calc(calc(2 * var(--b_ydist) * 0.95106) - var(--b_size)), calc(2 * var(--b_size)));
    --r_left: calc(var(--b_cent) - (var(--r_maxwidth) / 2));
    --bm_fontsize: min(calc(var(--b_size) * 0.7), 0.75em);
    --rs_1: calc(var(--b_size) * 0.24);
    --rs_2: calc(var(--r_maxwidth) * 0.14);
    --rs_fontsize: min(var(--rs_1), var(--rs_2));
}

#mashboard {
    font-size: var(--bm_fontsize);
    position: relative;
    /* --- FIX: Set explicit height to contain buttons and SVG --- */
    height: calc(var(--b_ydist) * 2 + var(--b_size));
    width: 100%; /* Take up full activity container width */
}


button[class^="buttonmash"] {
    position: absolute;
    cursor: pointer;
    /*background-color: lightgoldenrodyellow;*/
    background: rgb(250,250,210);
    background: -moz-radial-gradient(circle, rgba(250,250,210,1) 50%, rgba(238,232,170,1) 70%, rgba(218,165,32,1) 80%, rgba(255,215,0,1) 90%);
    background: -webkit-radial-gradient(circle, rgba(250,250,210,1) 50%, rgba(238,232,170,1) 70%, rgba(218,165,32,1) 80%, rgba(255,215,0,1) 90%);
    background: radial-gradient(circle, rgba(250,250,210,1) 50%, rgba(238,232,170,1) 70%, rgba(218,165,32,1) 80%, rgba(255,215,0,1) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fafad2",endColorstr="#ffd700",GradientType=1);
    height: var(--b_size);
    width: var(--b_size);
    border-radius: 50%;
    border: 2px solid #000;
    box-shadow: 0 3px 6px darkslategray;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 10;
}

    button[class^="buttonmash"]:active:enabled {
        background: palegoldenrod;
        box-shadow: 0 2px 4px darkslategray;
        transform: translateY(2px);
    }

button[disabled] {
    border: 2px solid #999999;
    background-color: #cccccc;
    color: #666666;
    box-shadow: 0 2px 4px black;
}

button[class^="buttonmash"]:disabled {
    background: rgba(204,204,204,1);
    background: darkgray;
    box-shadow: 0 3px 6px darkslategray;
}

button.buttonmashselected:disabled {
    background: lightgray;
    font-size: 2.4em;
    font-weight: 750;
}

button[name="mash0"] {
    position: absolute;
    /*
    left: calc(var(--b_cent) - (var(--b_size) / 2));
    top: calc(0px);
    */
}

button[name="mash1"] {
    position: absolute;
    /* left: calc(var(--b_cent) - (var(--b_ydist) * 0.95106) - (var(--b_size) / 2)); sin(2pi/5)*/
    /* top: calc(var(--b_ydist) - (var(--b_ydist) * 0.30902));  cos(2pi/5)*/
}

button[name="mash2"] {
    position: absolute;
    /* left: calc(var(--b_cent) + (var(--b_ydist) * 0.95106) - (var(--b_size) / 2)); sin(2pi/5)*/
    /* top: calc(var(--b_ydist) - (var(--b_ydist) * 0.30902)); cos(2pi/5)*/
}

button[name="mash3"] {
    position: absolute;
    /* left: calc(var(--b_cent) - (var(--b_ydist) * 0.58779) - (var(--b_size) / 2)); sin(1pi/5)*/
    /* top: calc(var(--b_ydist) - (var(--b_ydist) * -0.80902)); cos(4pi/5)*/
}

button[name="mash4"] {
    position: absolute;
    /* left: calc(var(--b_cent) + (var(--b_ydist) * 0.58779) - (var(--b_size) / 2)); sin(1pi/5)*/
    /* top: calc(var(--b_ydist) - (var(--b_ydist) * -0.80902)); cos(4pi/5)*/
}

.rscenter {
    position: absolute;
    width: var(--r_maxwidth);
    height: var(--b_size);
    left: var(--r_left);
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* 
    font-size: var( --rs_fontsize);
    top: var(--b_ydist); 
    */
}

    .rscenter #timeleftspan {
        font-size: inherit;
    }


/*
=====================================================
    SVG MASH/MATCH SHARED STYLES (NEW)
=====================================================
*/
#mashboard svg,
#match-game-container svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Above snow (at -1) but below buttons (at 10) */
    pointer-events: none; /* Make sure SVG doesn't block clicks */
    overflow: visible; /* Allows glow/effects to appear */
}

.connector-line {
    fill: none;
    /* This stroke will be a URL set by JavaScript */
    stroke: url(#rainbow-gradient); 
    stroke-linecap: butt; /* Use flat ends so gaps are visible */
    
    /* The stroke-dasharray will be set by JavaScript */

    /* We run two animations at the same time! */
    animation: 
        segment-flow 10s linear infinite,  /* The "marching" */
        rainbow 10s linear infinite; /* The "color moving" */
}

/* This keyframe moves the segments */
@keyframes segment-flow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        /* This animates one full "segment" (dash + gap) */
        /* '1' works because we will use pathLength="1" */
        stroke-dashoffset: -1; 
    }
}

/* This keyframe cycles the color wheel */
@keyframes rainbow {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/*
=====================================================
    MATCH DASH STYLES (NEW)
=====================================================
*/
:root {
    /* --- FIX: Smaller font sizes --- */
    --match-font-size: calc(var(--b_size) * 0.22); /* Was 0.25 */
    --match-font-size-large: calc(var(--b_size) * 0.35); /* Was 0.4 */
    /* --- COLORS (Specific to Match Dash feedback) --- */
    --color-border: #b0c4de;
    --color-selected: #007bff;
    --color-correct: #28a745;
    --color-correct-bg: #e6f7eb;
    --color-incorrect: #dc3545;
    --color-incorrect-bg: #fbeaea;
}

/*
#match-game-container {
    position: relative;
    width: var(--game-size);
    height: var(--game-size);
    margin: 0 auto;
}
*/

#match-game-container {
    position: relative;
    width: var(--game-size);
    height: var(--game-size);
    margin: 0 auto;
    display: block;
    max-width: 90vw;
    aspect-ratio: 1 / 1;
}


.match-button {
    /* --- SIZE & FONT ARE NOW FROM ROOT VARS --- */
    width: var(--b_size);
    height: var(--b_size);
    font-size: var(--match-font-size); /* Default (2-line) size */
    /* --- Standard Styling --- */
    position: absolute;
    transform: translate(-50%, -50%); /* centers reliably */
    border-radius: 50%;
    border: 4px solid var(--color-border);
    background: #fff;
    line-height: 1.1;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 10; /* On top of the SVG lines */
}

    .match-button:hover {
        transform: scale(1.05) translate(-50%, -50%);
        border-color: #88a;
    }

    .match-button .emoji-line {
        display: block;
        text-align: center;
        white-space: nowrap;
        /* --- FIX: Remove extra space between emojis --- */
        letter-spacing: -0.05em; /* Pulls emojis slightly closer */
    }

    /* --- NEW: Larger font for 1-2 emojis --- */
    .match-button.one-line {
        font-size: var(--match-font-size-large);
        line-height: 1; /* Adjust line-height for single line */
    }

    /* --- END NEW --- */


    /* --- FEEDBACK STATES --- */
    .match-button.selected {
        border-color: var(--color-selected);
        box-shadow: 0 0 15px var(--color-selected);
    }

    .match-button.correct {
        border-color: var(--color-correct);
        background-color: var(--color-correct-bg);
        box-shadow: 0 0 15px var(--color-correct);
    }

    .match-button.incorrect {
        border-color: var(--color-incorrect);
        background-color: var(--color-incorrect-bg);
        box-shadow: 0 0 15px var(--color-incorrect);
    }

    .match-button.incorrect-correct {
        border: 6px solid var(--color-incorrect);
        outline: 4px solid var(--color-correct);
        outline-offset: -10px;
        background: #fff;
        box-shadow: 0 0 15px var(--color-incorrect);
    }

    .match-button.missed-correct {
        border-color: var(--color-correct);
        background-color: var(--color-correct-bg);
        animation: pulse 0.8s infinite;
    }

@keyframes pulse {
    0% {
        box-shadow: 0 0 5px var(--color-correct);
    }

    50% {
        box-shadow: 0 0 20px var(--color-correct);
    }

    100% {
        box-shadow: 0 0 5px var(--color-correct);
    }
}

/* --- DYNAMIC LAYOUTS --- */
.place-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* B=3 (Triangle) */
.layout-3-0 {
    top: calc(50% - var(--radius));
}

.layout-3-1 {
    top: calc(50% + var(--radius) * 0.5);
    left: calc(50% - var(--radius) * 0.866);
}

.layout-3-2 {
    top: calc(50% + var(--radius) * 0.5);
    left: calc(50% + var(--radius) * 0.866);
}

/* B=4 (Square) - Vertically Aligned */
.layout-4-0 {
    top: calc(50% - var(--radius) * 0.7);
    left: calc(50% - var(--radius) * 0.7);
}

.layout-4-1 {
    top: calc(50% - var(--radius) * 0.7);
    left: calc(50% + var(--radius) * 0.7);
}

.layout-4-2 {
    top: calc(50% + var(--radius) * 0.7);
    left: calc(50% - var(--radius) * 0.7);
}

.layout-4-3 {
    top: calc(50% + var(--radius) * 0.7);
    left: calc(50% + var(--radius) * 0.7);
}

/* B=5 (Pentagon) - Like Mash Dash */
.layout-5-0 {
    top: calc(50% - var(--radius));
}

.layout-5-1 {
    top: calc(50% - var(--radius) * 0.309);
    left: calc(50% + var(--radius) * 0.951);
}

.layout-5-2 {
    top: calc(50% + var(--radius) * 0.809);
    left: calc(50% + var(--radius) * 0.588);
}

.layout-5-3 {
    top: calc(50% + var(--radius) * 0.809);
    left: calc(50% - var(--radius) * 0.588);
}

.layout-5-4 {
    top: calc(50% - var(--radius) * 0.309);
    left: calc(50% - var(--radius) * 0.951);
}

/* B=6 (Hexagon) - 4 vertices aligned vertically */
.layout-6-0 {
    top: calc(50% - var(--radius) * 0.8);
    left: calc(50% - var(--radius) * 0.5);
}

.layout-6-1 {
    top: calc(50% - var(--radius) * 0.8);
    left: calc(50% + var(--radius) * 0.5);
}

.layout-6-2 {
    top: 50%;
    left: calc(50% + var(--radius) * 0.9);
}
/* Right middle */
.layout-6-3 {
    top: calc(50% + var(--radius) * 0.8);
    left: calc(50% + var(--radius) * 0.5);
}

.layout-6-4 {
    top: calc(50% + var(--radius) * 0.8);
    left: calc(50% - var(--radius) * 0.5);
}

.layout-6-5 {
    top: 50%;
    left: calc(50% - var(--radius) * 0.9);
}
/* Left middle */


/*
=====================================================
    FINAL CSS CHECK
=====================================================
*/
#cssloadcheck {
    display: none;
}