:root {
    /* --- Core Colors --- */
    --bgColor: rgb(15,40,100);
    --textColor: white;
    
    /* --- Link Colors --- */
    --linkColor: #87CEEB;       /* Sky Blue */
    --linkHover: #FFFFFF;       /* White */

    /* --- UI Colors --- */
    --headerGold: #FFD700;
    --borderBlue: #6495ED;
    --refBoxBg: rgba(0, 0, 0, 0.3); /* Transparent dark for reference boxes */
    
    /* --- Status/Game Colors --- */
    --statusBg: rgb(240,240,255);
    --statusText: blue;
}

/* =========================================
   GLOBAL DEFAULTS
   ========================================= */

i {
    color: #FFD700;      /* Gold color */
    font-weight: bold;   /* Make it thick */
/*    font-style: normal;  /* Optional: removes the slant if you want it upright */
}


e { color: rgb(200,255,200);;
    font-weight: bold;
/*    font-size: 24px; */
  }
    

body {
    background-color: var(--bgColor); 
    color: var(--textColor);
    font-family: Calibri, 'Carlito', sans-serif;
    font-size: 18px;
    margin: 8px; /* Standard browser margin */
}

/* Global Link Styles */
a, a:visited {
    color: var(--linkColor);
    text-decoration: none;   
    font-weight: bold;       
    transition: color 0.2s;  
}

a:hover {
    color: var(--linkHover);
    text-decoration: underline; 
    cursor: pointer;         
}

/* =========================================
   GAME BOARD STYLES (Mill.html specific)
   ========================================= */
th, td {
    border: 1px solid black;
    text-align: right;
    vertical-align: top;
}

th { text-align: left; }

table {
    border-collapse: collapse;
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    color: var(--textColor);
    background-color: var(--bgColor);
    width: fit-content;
    margin: 0 auto;
}

/* Game Table specific overrides */
.gameTable {
    background-color: transparent;
    color: var(--textColor);
    border-collapse: collapse; 
    margin: 0 auto;
    border: 1px solid black;
}

.gameTable td, .gameTable th {
    border: 1px solid black;
    text-align: center;
    padding: 1px 1px;
    vertical-align: middle;
}

/* Inputs and Status Boxes */
.whiteStatusBox {
    font-size: 30px;
    background-color: white;
    color: black;
    height: 40px;
    flex: 1;
    min-width: 10px;
    border: 2px solid black;
    /* justify-content: center; Fixed typo from justify-contents */
}

.blackStatusBox {
    font-size: 30px;
    background-color: black;
    color: white;
    height: 40px;
    flex: 1;
    min-width: 10px;
    border: 2px solid white;
    opacity: 1;
}

.statusBox {
    font-size: 35px;
    background-color: var(--statusBg);
    color: var(--statusText);
    height: 40px;
    flex: 1;
    min-width: 10px;
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input, .whiteInput, .blackInput {
    font-weight: bold;
    font-size: 20px;
    vertical-align: -6px; /* Alignment fix */
}

.input {
    font-family: "Courier New", monospace; 
    background-color: rgb(220,240,255);
    vertical-align: 5px;
    color: rgb(55,55,0);
}

.whiteInput {
    color: black;
    background-color: white;
    width: 6ch;
    border: 2px solid black;
}

.blackInput {
    color: white;
    background-color: black;
    width: 6ch;
    border: 2px solid white;
}

/* Animations */
@keyframes blinker {
    50% { opacity: 0; }
}

.blink {
    animation: blinker 1s linear 5;
    font-weight: bold;
}

/* Scrollable Game Log */
.box {
    width: 100%;
    height: 120px;
    border: 4px solid #000;
    overflow: auto;
    display: grid;          
    place-items: center; 
}

#game {
    background-color: rgb(127,255,127);  
    color: rgb(0,0,150);             
    border: 2px solid var(--borderBlue);
    font-family: 'sans-serif', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    font-weight: normal;
    width: fit-content;
    min-width: 300px;
    padding: 1px;        
    margin: 3px auto;    
    border-radius: 10px; 
    text-align: center;
    scroll-behavior: smooth;
    max-height: 625px;
    overflow-y: auto;
}    

#game table {
    margin: auto;
    color: rgb(0,100,0);
    background-color: rgb(200,255,155);
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: normal;
}

/* Form Elements */
label, select {
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    color: rgb(50,50,240);
}

select {
    background-color: rgb(200,255,255);
    border: 1px solid black;
}

/* =========================================
   DOCUMENTATION STYLES (Instructions, Rules, etc.)
   ========================================= */

/* Wrapper to restrict width on text pages, 
   but DOES NOT affect the wide game board */



/* Documentation Headers */
.doc-wrapper h1 {
//    border-bottom: 2px solid white;
    padding-bottom: 5px;
}

.doc-wrapper h2 {
    padding-bottom: 2px;     /* Reduced from 5px */
    color: var(--headerGold);
    margin-top: 5px;        /* Drastically reduced from default (~25px) */
    margin-bottom: 5px;      /* Drastically reduced from default (~25px) */
}

.doc-wrapper h3 {
    color: var(--headerGold);
    margin-top: 5px;
}

/* Navigation Box (Table of Contents) */
.nav-box {
    /* Transparent background as requested */
    background-color: transparent; 
    color: var(--textColor);
    padding: 0;
    margin-bottom: 5px;
}

.nav-box h3 {
    margin-top: 10px;
    display: inline-block;
    margin-bottom: 5px;
}

.nav-box ul {
    list-style-type: none;
    padding-left: 5px;
    margin-top: 5px;
}

.nav-box li {
    margin-bottom: 5px;
    font-size: 20px;
}

/* Reference Item Boxes (for Button descriptions) */
.ref-item {
    background-color: var(--refBoxBg);
    border: 1px solid var(--linkColor);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.ref-item b {
    color: var(--headerGold);
    font-size: 1.1em;
}

.back-link {
    font-size: 14px;
    font-style: italic;
    float: right;
    opacity: 0.8;
}

p {
  margin: 5px;
}

.doc-wrapper ul {
    margin-top: 5px;    /* Removes space before the list */
    margin-bottom: 10px; /* Reduces space after the list */
}

.doc-wrapper li {
    margin-bottom: 5px;
}

/* The Floating Tooltip Box */
#custom-tooltip {
    position: fixed;        /* Fixed ensures it stays relative to the screen, not the element */
    background-color: #222; /* Dark background */
    color: #fff;            /* White text */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-family: sans-serif;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    max-width: 300px;       /* Prevents it from getting too wide */
    white-space: pre-wrap;  /* Respects the newlines you put in the HTML */
    
    z-index: 99999;         /* Ensures it sits on top of literally everything */
    pointer-events: none;   /* Important: lets the mouse clicks pass through it */
    
    display: none;          /* Hidden by default */
}