/* ONLY Imperial Table formatting  */
/* for Ancients   */

/* used for div.header-panel like a 1-cell table to hide background map  */
    .header-panel-light {
      display: flex;
      flex-direction: column;   /* stack children vertically */
      align-items: flex-start;  /* keep text left-aligned */
      gap: .3rem;    /*  vertical spacing */
      background-color: rgba(248, 247, 247, var(--tabl-opaq));
      padding: 1rem;
      border-radius: 10px;
    }

    .header-panel-dark {
      display: flex;
      flex-direction: column;   /* stack children vertically */
      align-items: flex-start;  /* keep text left-aligned */
      gap: .3rem;    /*  vertical spacing */
      background-color: rgba(20, 20, 20, var(--tabl-opaq));
      padding: 1rem;
      border-radius: 10px;
    }

    /*   used for javascript slider call  */
    :root {
      --tabl-opaq: 0.64;  /* default = 70% */
    }

  /* THEME TUNING VARIABLES
     bg = table/cell backgrounds
     p  = paragraph colors
     pfl = paragraph first-letter colors
  */


  /* Table Defines:  must define in this order */
  /*  table, th, td {
    padding: 1 rem;
    text-align: center;
    border: 4px solid rgb(31,31,84);
    background-color: transparent;
    }  */

/* general for no-class Table  not used ??  */
    table {
    width: 1100px;
    height: auto;
    border-collapse: separate;
    border: 4px solid rgb(182,82,84);
    border-spacing: 0.5rem;
    vertical-align: top;
    /* this is color expresssed, Olive= but Almost trasparent w slightly grrenish tint */
    background-color: rgba(114, 114, 29, 0.4);
    display:block;
    }

  /* =========================================================
     Roman Tables (Imperial + Dominate via variables)
     ========================================================= */

  /* -----------------------------
    Base Table geometry (shared)
    ----------------------------- */

   .Imperial,
   .Dominate {
     height: auto;
     border-collapse: separate;
     border-spacing: 0.5rem;
     vertical-align: top;
     display: block;
   }

   /* Cell Borders geometry (shared) */
   .Imperial th, .Imperial td,
   .Dominate th, .Dominate td {
     padding: 1rem;
     text-align: center;
   }


 /* ============================
    TABLE BORDERS colors
    ============================ */
   .Imperial {
     border: 4px solid rgba(241,191,49, var(--tabl-opaq));   /* Vivid Gold border */
   }

 /* ============================
    CELL BORDERS colors
    ============================ */
   .Imperial th,
   .Imperial td {
    /*    border: 2px solid rgba(88,58,98, var(--tabl-opaq));    /* purple cell borders */
      border: 2px solid rgba(120,90,30, var(--tabl-opaq));    /* bronze cell borders */
   }


    /* =========================================================
       IMPERIAL VARIABLES v 1
       ========================================================= */

    .Imperial {
      background-color: rgba(114,114,29, var(--tabl-opaq));

      --bg-odd: 232,115,123;
      --bg-firstcol-odd: 131,13,20;

      --bg-even: 73,73,73;
      --bg-firstcol-even: 60,15,18;

      --p-odd: 55,23,94;
      --p-firstcol-odd: 255,255,255;

      --p-even: 255,255,255;
      --p-firstcol-even: 255,51,51;

      --pfl-odd: 60,15,18;
      --pfl-firstcol-odd: 143,143,159;

      --pfl-even: 241,241,76;
      --pfl-firstcol-even: 241,241,76;
    }


/* =========================================================
   BACKGROUND + BASE TEXT : IMPERIAL
   ========================================================= */

/* ---- ODD ROWS ---- */

.Imperial tr:nth-child(odd) td {
  background-color: rgba(var(--bg-odd), var(--tabl-opaq));
  color: rgb(var(--p-odd));
}

.Imperial tr:nth-child(odd) td:nth-child(3n+1) {
  background-color: rgba(var(--bg-firstcol-odd), var(--tabl-opaq));
  color: rgb(var(--p-firstcol-odd));
}

/* ---- EVEN ROWS ---- */

.Imperial tr:nth-child(even) td {
  background-color: rgba(var(--bg-even), var(--tabl-opaq));
  color: rgb(var(--p-even));
}

.Imperial tr:nth-child(even) td:nth-child(3n+1) {
  background-color: rgba(var(--bg-firstcol-even), var(--tabl-opaq));
  color: rgb(var(--p-firstcol-even));
}


/* =========================================================
   PARAGRAPH COLORS : IMPERIAL
   ========================================================= */

 /* ---- ODD ROWS ---- */

 .Imperial tr:nth-child(odd) td p:not([class]) {
   color: rgb(var(--p-odd));
 }

 .Imperial tr:nth-child(odd) td:nth-child(3n+1) p:not([class]) {
   color: rgb(var(--p-firstcol-odd));
 }

 /* ---- EVEN ROWS ---- */

 .Imperial tr:nth-child(even) td p:not([class]) {
   color: rgb(var(--p-even));
 }

 .Imperial tr:nth-child(even) td:nth-child(3n+1) p:not([class]) {
   color: rgb(var(--p-firstcol-even));
 }

 /* =========================================================
    PARAGRAPH 1st LETTER COLORS : IMPERIAL
    ========================================================= */

 /* ---- ODD ROWS ---- */

 .Imperial tr:nth-child(odd) td p:not([class])::first-letter {
   color: rgb(var(--pfl-odd));
   font-size: 2.0em;
 }

 .Imperial tr:nth-child(odd) td:nth-child(3n+1) p:not([class])::first-letter {
   color: rgb(var(--pfl-firstcol-odd));
   font-size: 2.4em;
 }

 /* ---- EVEN ROWS ---- */

 .Imperial tr:nth-child(even) td p:not([class])::first-letter {
   color: rgb(var(--pfl-even));
   font-size: 2.0em;
 }

 .Imperial tr:nth-child(even) td:nth-child(3n+1) p:not([class])::first-letter {
   color: rgb(var(--pfl-firstcol-even));
   font-size: 2.4em;
 }


  /* =========================================================
     Dominate VARIABLES  use        for table Borders
     pfl = <p>:: 1st letter is not dynamically editable thru Dev Tools (F12)
     ========================================================= */

 /* ============================
    TABLE BORDERS colors
    ============================ */

     .Dominate {
         border: 4px solid rgba(80,20,20, var(--tabl-opaq));     /* dark red border */
       }

   /* ============================
      CELL BORDERS colors
      ============================ */

     .Dominate th,
     .Dominate td {
       border: 2px solid rgba(40,10,10, var(--tabl-opaq));     /* dark cell borders */
     }

     .Dominate {
     background-color: rgba(88, 58, 98, var(--tabl-opaq));   /* imperial purple base - Interstitial  */

     /* ===== Background Colors ===== */

     /* odd rows (cells 2–3) */
     --bg-odd: 226,218,196;          /* warm ivory stone */

     /* odd rows (cell 1) */
     --bg-firstcol-odd: 126,96,154;  /* purple */

     /* even rows (cells 2–3) */
     --bg-even: 196,184,156;         /* darker warm stone */

     /* even rows (cell 1) */
     --bg-firstcol-even: 92,64,122;  /* deeper purple */

     /* ===== Paragraph Colors ===== */

     /* odd rows */
     --p-odd: 61,43,31;              /* dark bronze-brown */
     --p-firstcol-odd: 247,231,168;  /* pale gold */

     /* even rows */
     --p-even: 47,33,24;             /* deep brown */
     --p-firstcol-even: 255,210,74;  /* stronger gold */

     /* ===== First Letter ===== */

     --pfl-odd: 138,106,31;          /* bronze-gold */
     --pfl-firstcol-odd: 255,242,168;/* bright gold */

     --pfl-even: 110,79,22;          /* darker bronze */
     --pfl-firstcol-even: 255,224,102;/* imperial gold */
   }


   /* =========================================================
      BACKGROUND + BASE TEXT : DOMINATE
      ========================================================= */

   /* ---- ODD ROWS ---- */

   .Dominate tr:nth-child(odd) td {
     background-color: rgba(var(--bg-odd), var(--tabl-opaq));
     color: rgb(var(--p-odd));
   }

   .Dominate tr:nth-child(odd) td:nth-child(3n+1) {
     background-color: rgba(var(--bg-firstcol-odd), var(--tabl-opaq));
     color: rgb(var(--p-firstcol-odd));
   }

   /* ---- EVEN ROWS ---- */

   .Dominate tr:nth-child(even) td {
     background-color: rgba(var(--bg-even), var(--tabl-opaq));
     color: rgb(var(--p-even));
   }

   .Dominate tr:nth-child(even) td:nth-child(3n+1) {
     background-color: rgba(var(--bg-firstcol-even), var(--tabl-opaq));
     color: rgb(var(--p-firstcol-even));
   }


   /* =========================================================
      PARAGRAPH COLORS : DOMINATE
      ========================================================= */

   /* ---- ODD ROWS ---- */

   .Dominate tr:nth-child(odd) td p:not([class]) {
     color: rgb(var(--p-odd));
   }

   .Dominate tr:nth-child(odd) td:nth-child(3n+1) p:not([class]) {
     color: rgb(var(--p-firstcol-odd));
   }

   /* ---- EVEN ROWS ---- */

   .Dominate tr:nth-child(even) td p:not([class]) {
     color: rgb(var(--p-even));
   }

   .Dominate tr:nth-child(even) td:nth-child(3n+1) p:not([class]) {
     color: rgb(var(--p-firstcol-even));
   }


   /* =========================================================
      PARAGRAPH 1st LETTER COLORS : DOMINATE
      ========================================================= */

   /* ---- ODD ROWS ---- */

   .Dominate tr:nth-child(odd) td p:not([class])::first-letter {
     color: rgb(var(--pfl-odd));
     font-size: 2.0em;
   }

   .Dominate tr:nth-child(odd) td:nth-child(3n+1) p:not([class])::first-letter {
     color: rgb(var(--pfl-firstcol-odd));
     font-size: 2.4em;
   }

   /* ---- EVEN ROWS ---- */

   .Dominate tr:nth-child(even) td p:not([class])::first-letter {
     color: rgb(var(--pfl-even));
     font-size: 2.0em;
   }

   .Dominate tr:nth-child(even) td:nth-child(3n+1) p:not([class])::first-letter {
     color: rgb(var(--pfl-firstcol-even));
     font-size: 2.4em;
   }