@font-face {
    font-family: 'Hua Kang'; /* Choose a CSS name, e.g., matching the English part */
    src: url('assets/Hua_Kang_Long_Men_Shi_Bei.ttf') format('truetype'); /* ADJUST FILENAME AND PATH */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* General Body and Layout */
body {
    font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.25;
    margin: 0;
    padding: 12px;
    background: #301934;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
}

.green-wrapper {
    background-color: #659157;
    border-radius: 20px;
    padding: 12px;
    width: 100%;
    max-width: 720px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    margin: 0 auto;
    color: #FFFFFF;
}

h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
}

h1 {
    font-size: 1.44em;
    margin-bottom: 16px;
    color: #FFFFFF;
}

.chart-title {
    font-size: 1.04em;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #5d7a96;
    padding: 8px 10px;
    margin: -12px -12px 12px -12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.1);
}

h3 {
    font-size: 0.92em;
    margin-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
    color: #3f51b5;
    text-align: left;
}
.green-wrapper > h3 {
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

a { color: #3f51b5; text-decoration: none; }
.green-wrapper a { color: #d1eaff; }
a:hover { text-decoration: underline; }

.pinyin {
    font-size: 0.56em;
    font-weight: 500;
    color: inherit;
    opacity: 0.85;
    margin: 0;
    text-transform: capitalize;
    display: block;
    font-family: 'Roboto', sans-serif;
}

.card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: #333;
}

.input-section .input-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 12px;
}

.input-section .input-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 84px;
}

.input-section .input-group label {
    font-size: 0.64em;
    color: #555;
    margin-bottom: 3px;
    font-weight: bold;
}

.input-section input[type="text"],
.input-section select {
    width: 100%;
    padding: 6px 7px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.68em;
    box-sizing: border-box;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.time-selection-group .time-selects {
    display: flex;
    align-items: center;
    gap: 3px;
}
.time-selection-group .time-selects select {
    flex-grow: 1;
    width: auto;
    padding: 6px 4px;
    font-size: 0.68em;
}
.time-selection-group .time-selects span {
    font-weight: bold;
    font-size: 0.8em;
    padding: 0 1px;
}

.input-section input[type="text"]:focus,
.input-section select:focus {
    border-color: #3f51b5;
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

.input-section .gender-selection {
    flex-grow: 0;
    min-width: 64px;
    padding-bottom: 2px;
}
.input-section .gender-selection .radio-group {
    display: flex;
    gap: 6px;
    padding-top: 0;
    margin-top: 5px;
}
.input-section .gender-selection label { margin-bottom: 0; font-weight: normal; font-size: 0.68em; }
.input-section .gender-selection input[type="radio"] { margin-right: 2px; width: 11px; height: 11px; }

.calculate-button-container {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

#calculate-btn {
    padding: 7px 24px;
    font-size: 0.8em;
    border-radius: 5px;
    background-color: #3f51b5; color: white; border: none; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 6px rgba(63, 81, 181, 0.3);
}
#calculate-btn:hover { background-color: #303f9f; transform: translateY(-1px); }
#calculate-btn:active { transform: translateY(0); }
.info-message { margin-top: 10px; font-size: 0.64em; color: #FFFFFF; }
.card .info-message { color: #c0392b; }


.pillars-section { background-color: #fdfdfd; padding-top: 0; }
.pillars-section table { width: 100%; border-collapse: separate; border-spacing: 1px; margin: 0 auto; table-layout: fixed; border: none; }
.pillars-section th, .pillars-section td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    border-radius: 4px;
    overflow: hidden;
    min-width: 54px; max-width: 70px; width: 62px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

.pillars-section th {
    background-color: #6c757d;
    font-weight: bold;
    color: #fff;
    font-size: 0.80em;
    padding: 2px 1px;
    border-color: #6c757d;
    height: 10px;
}

.user-input-display-row td {
    padding: 2px 1px;
    font-size: 0.7em;
    color: #444;
    background-color: #f8f9fa;
    font-weight: normal;
    border-color: #e0e0e0;
    height: 10px;
}

/* Wood */
.p1, .p2, .k3, .k4 { 
    background-color: #3DC24B; 
    color: #FFFFFF; 
}

/* Fire */
.p3, .p4, .k6, .k7 { 
    background-color: #D94D4D; 
    color: #FFFFFF; 
}

/* Earth */
.p5, .p6, .k2, .k5, .k8, .k11 { 
    background-color: #C28E3D; 
    color: #FFFFFF; 
}

/* Metal */
.p7, .p8, .k9, .k10 { 
    background-color: #8A959E; 
    color: #FFFFFF; 
}

/* Water */
.p9, .p10, .k1, .k12 { 
    background-color: #3D71C2; 
    color: #FFFFFF; 
}

/* Day Master Glow for the TD cell */
/* td.day-master-highlight {
    border: 2px solid #fffbe7 !important; /* Subtle white border */
    box-shadow:
        0 0 10px 4px #fffbe7cc,           /* Soft white glow */
        0 0 18px 6px #ffe06699;          /* Layered faint gold */
    position: relative;
    z-index: 2;
    transition: box-shadow 0.3s;
}
*/

.heavenly-stems-row td { /* Add position relative for Ten God symbol */
    position: relative;
}

/* General Styling for Heavenly/Earthly Stem Cells (UNIVERSAL) */
.heavenly-stems-row td, .earthly-branches-row td {
    min-height: 34px;
    padding: 5px 2px;
    font-size: 1.5em; /* Base for em calculations within */
    position: relative !important; /* CRITICAL for z-index stacking */
    overflow: visible !important;/* Allow effects like glow to be visible */
    transition: all 0.3s ease; /* For hover effects if any */
    cursor: default;
}


.heavenly-stems-row span, .earthly-branches-row span {
    display: block;
    line-height: 1.1;
}
.heavenly-stems-row td:hover, .earthly-branches-row td:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    z-index: 10; /* Ensure hover is on top */
}
.heavenly-stems-row span.chinese, .earthly-branches-row span.chinese {
    font-family: 'Hua Kang', 'Noto Serif SC', serif;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1;
}

.heavenly-stems-row span.pinyin, .earthly-branches-row span.pinyin {
    font-size: 0.7em;
    opacity: 0.95;
    margin-top: 1px;
    font-weight: 500;
    text-transform: capitalize;
}

.heavenly-stems-row span.english, .earthly-branches-row span.english {
    font-size: 0.5em;
    opacity: 0.95;
    margin-top: 2px;
    font-weight: 500;
    text-transform: capitalize;
}

.hidden-stems-row td {
    background-color: #fff;
    color: #444;
    padding: 0;
    height: 30px;
    vertical-align: middle;
    border: 1px solid #e9ecef;
    font-size: 0.62em;
}
.hidden-stem-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
}
.hidden-stem-group .hidden-stem-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline; /* Changed for better symbol alignment */
    padding: 1px; /* Added padding */
    transition: background-color 0.3s ease;
    white-space: nowrap;
    flex-grow: 1; flex-shrink: 1; min-width: 10px; height: 100%; box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.hidden-stem-group .hidden-stem-item:first-child { border-left: none; }
.hidden-stem-group .hidden-stem-item span.chinese {
    font-family: 'Noto Serif SC', serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
}
.hidden-stem-group .hidden-stem-item span.english {
    font-size: 0.9em;
    opacity: 0.9;
    text-transform: capitalize;
}
.hidden-stem-item.p1, .hidden-stem-item.p2 { background-color: #d4edda; color: #155724; }
.hidden-stem-item.p3, .hidden-stem-item.p4 { background-color: #f8d7da; color: #721c24; }
.hidden-stem-item.p5, .hidden-stem-item.p6 { background-color: #fff3cd; color: #856404; }
.hidden-stem-item.p7, .hidden-stem-item.p8 { background-color: #e2e3e5; color: #383d41; }
.hidden-stem-item.p9, .hidden-stem-item.p10 { background-color: #d1ecf1; color: #0c5460; }

/* For Ten God Symbols */
.ten-god-symbol {
    font-size: 0.6em; /* Made smaller */
    font-weight: bold;
    color: #333;
    display: inline-block;
    margin-right: 2px; /* Adjusted margin */
    line-height: 1;
}
.main-stem-ten-god {
    position: absolute;
    top: 1px; /* Adjusted for smaller font */
    right: 1px; /* Adjusted for smaller font */
    font-size: 0.55em; /* Made smaller */
    color: #555;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0 2px;
    border-radius: 2px;
    z-index: 1;
    letter-spacing: -0.5px; /* Helps with two-letter codes */
}
.hs-ten-god { /* Hidden Stem Ten God */
    font-size: 0.7em; /* Made smaller */
    margin-right: 1px;
    letter-spacing: -0.5px;
}
.lp-ten-god { /* Luck Period Ten God */
    display: block;
    font-size: 0.6em; /* Made smaller */
    margin-bottom: 1px;
    color: #444;
    letter-spacing: -0.5px;
}
.lp-hidden-stems .hidden-stem-group {
    font-size: 0.8em;
    margin-top: 3px;
}
.lp-hidden-stems .hs-ten-god {
    font-size: 0.8em; /* Adjusted from 0.9em for consistency */
}


/* === UNIVERSAL DAY MASTER GLOW STYLES === */
/* These classes are added by script.js to the Day Master's TD */
.dm-glow-wood, .dm-glow-fire, .dm-glow-earth, .dm-glow-metal, .dm-glow-water, .dm-glow-default {
    position: relative !important; /* Already on TDs, but ensures specificity */
    z-index: 100 !important;      /* <<< UNIVERSAL HIGH Z-INDEX FOR DAY MASTER CELL */
    overflow: visible !important; /* Ensure glow isn't clipped by the cell itself */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Wood Daymaster Glow */
.dm-glow-wood {
    border: 2px solid #21AB49 !important;
    box-shadow:
        0 0 7px 2px #21AB49,
        0 0 20px 5px #02AB49 !important;
}
/* Fire Daymaster Glow */
.dm-glow-fire {
    border: 2px solid #EB3F42 !important;
    box-shadow:
        0 0 7px 2px #EB3F42,
        0 0 20px 5px #EB0004 !important;
}
/* Earth Daymaster Glow */
.dm-glow-earth { /* Original yellow glow */
    border: 2px solid #785236 !important;
    box-shadow:
        0 0 7px 2px #785236,
        0 0 20px 5px #785200 !important;
}
/* Metal Daymaster Glow */
.dm-glow-metal {
    border: 2px solid #FFFFFF !important;
    box-shadow:
        0 0 7px 2px #FFFFFF,
        0 0 20px 5px #ADA8B0 !important;
}
/* Water Daymaster Glow */
.dm-glow-water {
    border: 2px solid #515AF5 !important;
    box-shadow:
        0 0 7px 2px #515AF5,
        0 0 20px 5px #000EF5 !important;
}
.dm-glow-default { /* Fallback, can be similar to Earth or a neutral glow */
    border: 2px solid #FFFBE7 !important;
    box-shadow:
        0 0 7px 2px #FFFBE7,
        0 0 20px 5px #FFE066 !important;
}
/* === END OF UNIVERSAL DAY MASTER GLOW STYLES === */


.strength-section h3 { text-align: center; color: #3f51b5; }
.strength-section table { width: 100%; border-collapse: collapse; margin-bottom: 10px; border: none; }
.strength-section td { padding: 4px 2px; text-align: left; vertical-align: middle; font-size: 0.68em; border: none; }
.strength-section td:first-child { width: 25%; font-weight: bold; color: #555; }
.strength-section .element-name { width: 15%; text-transform: capitalize; font-weight: bold; }
.strength-section .element-value { width: 10%; text-align: right; font-weight: bold; color: #444; padding-right: 6px; }
.strength-section .strength-bar { width: 100%; height: 12px; background-color: #e9ecef; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.strength-section .strength-bar .fill { height: 100%; border-radius: 6px; transition: width 0.8s ease-out; }
.strength-bar .p1, .strength-bar .p2 { background-color: #7FC96A; } .strength-bar .p3, .strength-bar .p4 { background-color: #FF6D70; }
.strength-bar .p5, .strength-bar .p6 { background-color: #FFD187; } .strength-bar .p7, .strength-bar .p8 { background-color: #C9C3CC; }
.strength-bar .p9, .strength-bar .p10 { background-color: #9BA2FF; }
.overall-strength { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 12px; }
.overall-strength .strength-label { width: 48%; text-align: center; font-weight: bold; font-size: 0.72em; color: #555; margin-bottom: 3px; }
.overall-strength .overall-bar { width: 100%; display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin-top: 5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15); border: 1px solid #ddd; }
.overall-strength .supporting-fill { background-color: #8bc34a; transition: width 0.8s ease-out; }
.overall-strength .opposing-fill { background-color: #ef5350; transition: width 0.8s ease-out; }
.overall-strength .overall-percentages { width: 100%; display: flex; justify-content: space-between; margin-top: 5px; font-weight: bold; font-size: 0.76em; padding: 0 6px; box-sizing: border-box; }
.overall-percentages span:first-child { color: #5a8e2e; } .overall-percentages span:last-child { color: #c62828; }

.luck-periods-section h3 {
    text-align: center;
    color: #3f51b5;
    font-size: 1.1em;
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 5px;
}

.luck-periods-section table.luck-periods-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px 1px; /* horizontal spacing 2px, vertical 1px (or 0px for seamless column) */
}

/* Column Headers (Timeframe/Age) */
.luck-periods-section th {
    background-color: #5B6780; 
    font-weight: bold;
    color: #EAEAEA; /* Darker text for headers */
    font-size: 0.65em; /* Smaller for headers */
    padding: 2px 1px;
    line-height: 1.3;
    border: 1px solid #5B6780;
    border-bottom: 1px solid #626c7f; /* Remove bottom border to merge with HS cell */
    border-radius: 4px 4px 0 0; /* Rounded top corners */
    height: 26px;
    vertical-align: middle;
}

/* General styling for ALL data cells (HS, EB) in Luck Periods */
.luck-periods-section td {
    border: 1px solid #D0D0D0;
    text-align: center;
    vertical-align: middle; /* Change to middle for main content */
    border-radius: 0; /* Will set specific radius for bottom cells */
    padding: 0; /* Remove base padding, handle internally */
    position: relative; /* For hidden stems */
    overflow: visible; /* Allow hover effects/glows if any */
}

/* Heavenly Stem Row Cells in Luck Periods */
.luck-periods-section tbody tr:nth-child(1) td { /* HS ROW */
    height: 50px !important; /* Main content height for HS */
    vertical-align: middle;
    padding: 2px 2px;
}

/* Earthly Branch Row Cells in Luck Periods */
.luck-periods-section tbody tr:nth-child(2) td { /* EB ROW */
    height: 81px !important; /* Total height for EB main info + hidden stems. HS is 50, Hidden is 31. */
    vertical-align: top; /* Align EB main info to top, hidden stems will be at bottom */
    padding-top: 2px; /* Space for EB main info */
}

/* Styling for content SPANS within HS and EB cells (Ten God, Chinese Char, English Text) */
.luck-periods-section td span {
    display: block;
    line-height: 1.2;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Ten God Symbol in HS Row */
.luck-periods-section tbody tr:nth-child(1) td span.lp-ten-god {
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0;
}

/* Chinese Characters in HS and EB Rows */
.luck-periods-section tbody tr:nth-child(1) td span.chinese { /* HS Chinese */
    font-family: 'Noto Serif SC', serif;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.2;
}

.luck-periods-section tbody tr:nth-child(2) td span.chinese { /* EB Chinese (main part) */
    font-family: 'Noto Serif SC', serif; /* Or 'Hua Kang' if you prefer */
    font-size: 1.5em;
    font-weight: normal;
    margin-bottom: 1px;
    line-height: 1.2;
}

/* English Text (Element/Animal) in HS and EB Rows */
.luck-periods-section tbody tr:nth-child(1) td span.english{ /* HS English */
    font-size: 0.7em;
    line-height: 1.2;
}

.luck-periods-section tbody tr:nth-child(2) td span.english { /* EB English (main part) */
    font-size: 0.7em;
    line-height: 1.2;
}

/* Container for Hidden Stems within the EB cell */
.luck-periods-section div.lp-hidden-stems {
    height: 30px; /* Fixed height for hidden stem section */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #f8f9fa; /* Slightly different background for hidden stems section */
    border-top: 1px solid #E0E0E0; /* Separator line above hidden stems */
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0 0 3px 3px; /* Match bottom rounding of the cell */
}

.luck-periods-section div.lp-hidden-stems .hidden-stem-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 0.8em; /* Smaller base for hidden stems */
    padding-top: 1px; /* Add a little padding at the top of the group */
    box-sizing: border-box;
}

.luck-periods-section div.lp-hidden-stems .hidden-stem-item {
    padding: 0 1px !important;
    line-height: 1.1;
    flex-basis: 0 !important;
    flex-grow: 1 !important;
    min-width: 15px; /* From previous */
    display: flex; flex-direction: column; align-items: center; /* For centering content within item if needed */
}

.luck-periods-section div.lp-hidden-stems .hidden-stem-item span.chinese {
    font-family: 'Noto Serif SC', serif;
    font-size: 0.85em;
    margin-bottom: 2px;
    display: block; /* Ensure it stacks above Ten God */
    line-height: 1.1;
}
.luck-periods-section div.lp-hidden-stems .hidden-stem-item span.english {
    font-size: 0.7em;
    display: none; /* Keeping English hidden for space */
}
.luck-periods-section div.lp-hidden-stems .hidden-stem-item .hs-ten-god {
    font-size: 0.75em;
    display: block; /* Ensure it stacks below Chinese */
    line-height: 1.1;
}

/* Text color for hidden stems based on their BG - FULL LIST */
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p1 span,
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p2 span { color: #155724 !important; } /* Wood */
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p3 span,
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p4 span { color: #721c24 !important; } /* Fire */
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p5 span,
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p6 span { color: #856404 !important; } /* Earth */
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p7 span,
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p8 span { color: #383d41 !important; } /* Metal */
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p9 span,
.luck-periods-section div.lp-hidden-stems .hidden-stem-item.p10 span { color: #0c5460 !important; }/* Water */


/* --- Highlighting the CURRENT Luck Pillar (ENTIRE COLUMN) --- */
/* This targets the TH and both TDs of the current luck period column */
.luck-periods-section th.current-luck-pillar-column,
.luck-periods-section td.current-luck-pillar {
    border-left: 3px solid #8A2BE2 !important;   /* Thick Purple Left Border */
    border-right: 3px solid #8A2BE2 !important;  /* Thick Purple Right Border */
    border-top: none !important;    /* Remove individual top borders */
    border-bottom: none !important; /* Remove individual bottom borders */
    box-shadow: none !important; /* Remove individual cell shadows if any */
    /* The color of element will still show through due to .pX/.kX on the cell */
}

/* Apply top border to the header of the current column */
.luck-periods-section th.current-luck-pillar-column {
    border-top: 3px solid #8A2BE2 !important;
    border-top-left-radius: 5px !important; /* Slightly more rounded for highlighted column */
    border-top-right-radius: 5px !important;
}

/* Apply bottom border to the EB cell (which contains hidden stems) of the current column */
.luck-periods-section tbody tr:nth-child(2) td.current-luck-pillar {
    border-bottom: 3px solid #8A2BE2 !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

/* Make text bold in the current pillar for emphasis */
.luck-periods-section th.current-luck-pillar-column,
.luck-periods-section td.current-luck-pillar span {
    font-weight: bold !important;
}
.luck-periods-section td.current-luck-pillar div.lp-hidden-stems span {
    font-weight: bold !important; 
}


/* Current Year Pillar ("Now" column) Styling - remains largely the same */
.luck-periods-section th.current-year-pillar-header {
    background-color: #E0E8F5 !important; /* Slightly different light blue */
    color: #2a4365 !important; /* Darker blue text */
    font-size: 0.65em !important;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}
.luck-periods-section td.current-year-pillar-cell {
    background-color: #F0F5FA !important;
    border: 1px solid #a3b8d3 !important; /* Dashed border */
    border-top: none;
}
/* Specific styling for HS cell of current year */
.luck-periods-section tbody tr:nth-child(1) td.current-year-pillar-cell {
     border-bottom: none; /* Merge with EB cell below */
     font-weight: bold !important;
}
/* Specific styling for EB cell of current year */
.luck-periods-section tbody tr:nth-child(2) td.current-year-pillar-cell {
    border-radius: 0 0 3px 3px;
    font-weight: bold !important;
}

.luck-periods-section td.current-year-pillar-cell span {
    color: #000000 !important;
    opacity: 0.85; /* Slightly less faded */
}
.luck-periods-section td.current-year-pillar-cell div.lp-hidden-stems {
    background-color: #e0e8f0; /* Background for hidden stems in "Now" column */
    border-top: 1px solid #cBd5e5;
}
.luck-periods-section td.current-year-pillar-cell div.lp-hidden-stems span {
     opacity: 0.85;
}

.daymaster-description-section { text-align: center; padding: 12px; }
.daymaster-description-section h3 { text-align: center; border: none; padding-bottom: 0; margin-bottom: 10px; color: #3f51b5;}
.daymaster-description-section .daymaster-name-highlight { color: #3f51b5; font-weight: bold; }
.daymaster-description-section .daymaster-content { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; }
.daymaster-description-section .daymaster-image {
    width: 64px;
    height: 64px;
    object-fit: cover; /* This works well with a square */
    border-radius: 12px; /* The key value. Not 50%, but a specific pixel value. */
    border: 2px solid #E0E0E0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.daymaster-description-section p { text-align: left; font-size: 0.8em; color: #333; line-height: 1.5; }

/* BaZi Profile Section */
.bazi-profile-section .profile-content {
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin-top: 5px;
    text-align: left;
}
.bazi-profile-section h3 { /* Already defined, but ensure it's left-aligned if it was center before */
    text-align: center;
}
#bazi-profile-name {
    margin-top: 0;
    color: #303f9f; /* Darker blue for emphasis */
    font-size: 1em; /* Slightly smaller than card H3 */
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 8px;
}
#bazi-profile-description {
    font-size: 0.8em; /* Smaller for readability */
    line-height: 1.5;
    color: #333;
}

.opt-in-section { text-align: center; background-color: #e8f5e9; border-color: #c8e6c9; padding: 16px; }
.opt-in-section h3 { color: #2e7d32; border: none; margin-bottom: 6px; text-align: center;}
.opt-in-section p { font-size: 0.72em; margin-bottom: 12px; color: #555; }
.opt-in-section .concern-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
.opt-in-section .concern-options label { padding: 6px 12px; font-size: 0.72em; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.opt-in-section .concern-options input[type="radio"] { display: none; }
.opt-in-section .concern-options input[type="radio"]:checked + label { background-color: #a5d6a7; border-color: #2e7d32; color: #2e7d32; font-weight: bold;}
.opt-in-button { padding: 8px 28px; font-size: 0.88em; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
.opt-in-button:hover { background-color: #45a049; }

footer { text-align: center; margin-top: 20px; font-size: 0.6em; color: #d0d0d0; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 12px; }

@media (max-width: 614px) {
    .green-wrapper { padding: 8px; border-radius: 16px; }
    .card { padding: 8px; }
    h1 { font-size: 1.28em; }
    .chart-title { font-size: 0.96em; margin: -8px -8px 8px -8px; padding: 6px 8px;}
    .input-section .input-grid { flex-direction: column; align-items: stretch;}
    .input-section .input-group { min-width: unset; width:100%;}

    .pillars-section table, .luck-periods-section table { font-size: 0.6em; } /* Reduced base for smaller screens */
    .heavenly-stems-row span.chinese, .earthly-branches-row span.chinese { font-size: 1.2em; } /* Slightly reduced */
    .luck-periods-section th { font-size: 0.52em; } /* Smaller for LP headers */
    .luck-periods-section td span.chinese { font-size: 0.9em; } /* Slightly reduced for LPs */

    .hidden-stems-row td {
        height: 18px;
        font-size: 0.58em;
    }
}
@media (max-width: 384px) {
    body { padding: 4px; }
    .green-wrapper { padding: 6px; border-radius: 12px; }
    .card { padding: 6px; }
    h1 { font-size: 1.12em; }
    .chart-title { font-size: 0.8em; margin: -6px -6px 6px -6px; padding: 5px 6px;}
    .pillars-section table { font-size: 0.52em; }
    .heavenly-stems-row span.chinese, .earthly-branches-row span.chinese { font-size: 1.05em; } /* Further reduced */
    .heavenly-stems-row td, .earthly-branches-row td { min-height: 38px; padding: 3px 1px;} /* Adjusted height and padding */
    .luck-periods-section th { font-size: 0.48em; word-break: break-word; } /* Allow word break for very small screens */
    .luck-periods-section td { min-height: 34px; padding: 3px 1px;} /* Adjusted for LPs */
    .luck-periods-section td span.chinese { font-size: 0.82em; } /* Further reduced for LPs */


    .hidden-stems-row td {
        height: 16px;
        font-size: 0.5em;
    }
    .daymaster-description-section .daymaster-content { flex-direction: column; }
}