:root {
    --purple: #D1A3FF;
    --faint-purple: #F4E8FF;
    --green: #3DBA50; 
    --light-gray: #e0e0e0;
    --dark-gray: #333;
    --subtle-gray: #f0f0e0;
    --disabled-gray: #ccc;
    --bg-color: #ffffff; 
    --text-color: #1a1a1a; 
    --border-color: #e0e0e0; 
    --checkbox-blue: #007aff;
}
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#splash-screen {
    background-color: #D1A3FF;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 12vh 20px 10vh;
    box-sizing: border-box;
    color: #000000;
    flex-direction: column;
}
.splash-header{position:absolute;top:20px;left:20px}#splash-back-btn{cursor:pointer;width:28px;height:28px}
#splash-screen .splash-content-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}
#splash-screen .splash-logo{width:120px;height:120px;margin-bottom:0}
#splash-screen .splash-title{font-size:3rem;font-weight:900;margin:20px 0 5px}
#splash-screen .splash-subtitle{font-size:1.5rem;font-weight:400;margin-top:5px;margin-bottom:30px;text-align:center;line-height:1.4}
#play-button{background-color:#000;color:#fff;border:none;border-radius:50px;padding:15px 70px;font-size:1.2rem;font-weight:500;cursor:pointer;margin-bottom:20px}
.splash-info{font-weight:500;text-align:center;line-height:1.4;margin-bottom:50px;font-size:1.1rem}
.splash-info p{margin:0}
.splash-info p:nth-child(2){color:#555;font-weight:400}
.splash-demo-release{font-family:'Courier New',Courier,monospace;text-align:center;line-height:1.5;color:#333;font-size:1rem}
.splash-demo-release p{margin:0}
#game-screen { display: none; flex-direction: column; align-items: center; height: 100vh; overflow: hidden; }
.game-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); box-sizing: border-box; flex-shrink: 0; position: relative; }
.game-back-arrow { cursor: pointer; width: 24px; height: 24px; }
.header-icons { display: flex; align-items: center; gap: 16px; }
.header-icons svg { cursor: pointer; fill: var(--dark-gray); }
.header-icons i {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 24px;
    color: var(--dark-gray);
    cursor: pointer;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    flex-grow: 1;
    justify-content: space-between;
    position: relative;
}
.top-section { width: 100%; max-width: 450px; flex-shrink: 0; }
.ranking-wrapper { width: 100%; margin-bottom: 15px; cursor: pointer; } .rank-title { font-weight: bold; font-size: 1.2em; } .rank-subtitle { font-size: 0.9em; color: #666; margin-top: 4px; }
.progress-bar {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}
.progress-segment {
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.progress-segment:first-child {
    flex-grow: 0;
}
.progress-hex {
    width: 14px;
    height: 16.17px;
    background-color: var(--light-gray);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    flex-shrink: 0;
}
.progress-hex.current {
    width: 40px;
    height: 46.19px;
    background-color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--dark-gray);
}
.progress-connector {
    flex-grow: 1;
    border-bottom: 2px dotted var(--light-gray);
    margin: 0 5px;
}
.game-screen.shape-hexagon .progress-connector {
    transform: translateY(7px);
}
.game-screen.shape-square .progress-connector,
.game-screen.shape-circle .progress-connector {
    transform: translateY(6px);
}
.progress-segment.achieved .progress-connector,
.progress-segment.current .progress-connector {
    border-color: var(--purple);
}
.shape-square .hexagon { clip-path: none; border-radius: 8px; width: 70px; height: 70px; }
.shape-square .hex-row:nth-child(2), .shape-square .hex-row:nth-child(3) { margin-top: 5px; }
.shape-square .progress-hex { clip-path: none; border-radius: 4px; width: 14px; height: 14px; }
.shape-square .progress-hex.current { width: 40px; height: 40px; border-radius: 8px; }
.shape-circle .hexagon { clip-path: none; border-radius: 50%; width: 75px; height: 75px; }
.shape-circle .hex-row:nth-child(2), .shape-circle .hex-row:nth-child(3) { margin-top: 5px; }
.shape-circle .progress-hex { clip-path: none; border-radius: 50%; width: 14px; height: 14px; }
.shape-circle .progress-hex.current { width: 40px; height: 40px; border-radius: 50%; }
.word-box-wrapper { width: 100%; border-radius: 8px; margin-bottom: 10px; }
.word-box-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; cursor: pointer; background-color: var(--subtle-gray); border: 1px solid var(--light-gray); border-radius: 8px; }
.word-box-header svg { transition: transform 0.3s ease; } .word-box-wrapper.expanded .word-box-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.word-list {
    display: none;
}
.word-box-wrapper.expanded + .word-input-line,
.top-section:has(.word-box-wrapper.expanded) + .bottom-section {
    display: none;
}
.top-section:has(.word-box-wrapper.expanded) {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.word-box-wrapper.expanded {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
}
.word-box-wrapper.expanded .word-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 15px;
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    border: none;
    line-height: 1.5;
    word-spacing: 8px;
    align-content: start;
}
.word-box-wrapper.expanded .word-list span {
    text-transform: capitalize;
}
.word-box-wrapper.expanded {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.word-box-wrapper.expanded .word-box-header {
    border: 1px solid var(--border-color);
    border-bottom: none;
}
.word-input-line { width: 70%; max-width: 250px; border-bottom: 2px solid var(--light-gray); text-align: center; padding-bottom: 5px; margin-left: auto; margin-right: auto; }
.word-input { display: flex; align-items: center; justify-content: center; font-size: 1.5em; min-height: 30px; font-weight: bold; letter-spacing: 2px; }
.word-input span { color: var(--dark-gray); } .word-input span.highlight { color: var(--purple); }
.cursor { width: 2px; height: 25px; background-color: var(--purple); animation: blink 1s step-end infinite; } @keyframes blink { from, to { background-color: transparent } 50% { background-color: var(--purple); } }
.bottom-section { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; min-height: 0; }
.hexagon-wrapper { display: flex; flex-direction: column; align-items: center; } .hex-row { display: flex; justify-content: center; }
.hexagon { position: relative; width: 75px; height: 86.6px; background-color: var(--light-gray); margin: 2px 4px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; font-size: 1.8em; font-weight: bold; color: var(--dark-gray); cursor: pointer; user-select: none; }
.hex-row:nth-child(2) { margin-top: -22px; } .hex-row:nth-child(3) { margin-top: -22px; } .hexagon.center { background-color: var(--purple); }
.controls { display: flex; gap: 20px; margin-top: 40px; padding-bottom: 10px; justify-content: center; width: 100%; }
.control-button { border: 2px solid var(--dark-gray); background-color: transparent; cursor: pointer; font-size: 1rem; font-weight: bold; color: var(--dark-gray); height: 45px; border-radius: 25px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 25px 25px; touch-action: manipulation; }
.control-button.icon-button { width: 50px; height: 50px; border-radius: 50%; font-size: 1.3rem; padding: 0; }
.control-button:disabled { border-color: var(--disabled-gray); color: var(--disabled-gray); cursor: not-allowed; }
#more-menu { display: none; position: absolute; top: 50px; right: 10px; background-color: var(--bg-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1100; width: 160px; border: 1px solid var(--border-color); }
#more-menu div { padding: 12px 16px; cursor: pointer; font-weight: 500; border-bottom: 1px solid var(--border-color); } #more-menu div:last-child { border-bottom: none; }
.full-page-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); z-index: 2000; display: none; flex-direction: column; align-items: center; overflow-y: auto; }
.page-container { width: 100%; max-width: 500px; margin: 0 auto; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; }
.page-header { display: flex; justify-content: center; align-items: center; position: relative; padding: 10px 0; margin-bottom: 25px; flex-shrink: 0; }
.page-header h2 { margin: 0; font-weight: 700; font-size: 1.2rem; }
.close-page-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 32px; line-height: 1; font-weight: 400; color: var(--text-color); cursor: pointer; }
.page-content { flex-grow: 1; line-height: 1.6; }
.page-footer { margin-top: auto; padding: 20px 0 2px; text-align: center; color: #4B4B4B; font-size: 16px; flex-shrink: 0; }

body.dark-mode .page-footer {
    color: #a0a0a0;
}


.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2500; display: none; justify-content: center; align-items: center; }
.modal-card { position: relative; background-color: var(--bg-color); color: var(--text-color); border-radius: 12px; padding: 25px; width: 90%; max-width: 360px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); text-align: left; }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: 300; line-height: 1; cursor: pointer; color: var(--disabled-gray); }
.modal-card h4 { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 0 0 10px; }
.modal-card p { text-align: center; color: #666; margin: 0 0 20px; font-size: 0.95rem; }
.issue-types { color: #000000; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.issue-type-btn { width: 100%; padding: 12px; border: 1px solid var(--border-color); background-color: transparent; border-radius: 8px; text-align: left; font-size: 0.95rem; font-family: 'Roboto', sans-serif; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; color: var(--text-color); }
.issue-type-btn.selected { border-color: var(--text-color); background-color: var(--subtle-gray); }
#feedback_comment { width: 100%; height: 80px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background-color: transparent; color: var(--text-color); font-family: 'Roboto', sans-serif; font-size: 0.95rem; resize: vertical; box-sizing: border-box; margin-bottom: 20px; }
.checkbox-container { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; user-select: none; }
.checkbox-container input { accent-color: #000000; width: 18px; height: 18px; }
.checkbox-container label { font-size: 0.9rem; color: #666; }
#submit-feedback-btn { width: 100%; padding: 14px; border-radius: 8px; border: none; background-color: var(--disabled-gray); color: #fff; font-weight: 700; font-size: 1rem; cursor: not-allowed; transition: background-color 0.2s; }
#submit-feedback-btn:not(:disabled) { background-color: var(--text-color); cursor: pointer; }
.toast { visibility: hidden; min-width: 120px; background-color: var(--text-color); color: var(--bg-color); text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 3000; left: 50%; top: 80px; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease-in-out; }
.toast.show { visibility: visible; opacity: 1; top: 100px; }
.toast-banner { top: auto; bottom: -100px; left: 0; transform: none; width: 100%; border-radius: 0; padding: 14px 0; font-weight: 500; transition: bottom 0.4s ease-in-out, background-color 0.3s, color 0.3s; }
.toast-banner.show { bottom: 0; top: auto; }

/* --- SHARED COACH MARK STYLES --- */

.coach-mark-pointer {
    position: absolute;
    top: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background-color: #2c2c2c;
    transform: rotate(45deg);
}

.coach-mark-close { 
    position: absolute; 
    top: 5px; 
    right: 12px; 
    font-size: 24px; 
    font-weight: 300; 
    cursor: pointer; 
    opacity: 0.7; 
}

.coach-mark-svg-icon {
   width: 1.1em;
   height: 1.1em;
   vertical-align: middle;
   margin-bottom: 0.1em;
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(-10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

body.dark-mode .coach-mark-pointer { 
    background-color: #f0f0f0; 
}

.page-content h4 { margin-top: 25px; margin-bottom: 8px; }
.page-content p { margin-top: 0; }
body.dark-mode {
    --bg-color: #121212;
    --text-color: #e1e1e1;
    --dark-gray: #e1e1e1;
    --light-gray: #2e2e2e;
    --subtle-gray: #1a1a1a;
    --border-color: #444;
    --disabled-gray: #666;
    --purple: #aa77ff;
}
body, .full-page-overlay, .modal-card, .game-header, .control-button, .hexagon {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
body.dark-mode #submit-feedback-btn:not(:disabled) {
     background-color: #fff;
     color: #000;
}
body.dark-mode .word-box-header {
     background-color: #1f1f1f;
}
body.dark-mode .word-list {
    background-color: #1a1a1a;
}
.settings-list { display: flex; flex-direction: column; gap: 15px; }
.setting-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 25px; }
.setting-info { flex-grow: 1; margin-right: 15px; }
.setting-title { font-weight: 500; font-size: 1rem; margin-bottom: 4px; }
.setting-description { font-size: 0.9rem; color: #666; }
body.dark-mode .setting-description { color: var(--disabled-gray); }
.toggle-switch { position: relative; display: inline-block; width: 70px; height: 34px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #A6A6A6; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--green); }
input:checked + .slider:before { transform: translateX(36px); }
.segmented-control { display: flex; background-color: var(--light-gray); border-radius: 8px; padding: 4px; }
#activity-view-toggle { margin-bottom: 24px; }
.segmented-btn { flex: 1; padding: 6px 12px; border: none; background-color: transparent; color: var(--text-color); font-weight: 500; border-radius: 6px; cursor: pointer; transition: background-color 0.3s, color 0.3s; font-size: 0.9rem; }
.segmented-btn.active { background-color: var(--bg-color); color: var(--text-color); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
body.dark-mode .segmented-btn.active { background-color: #444; }
#game-toast-container {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 80%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}
.game-toast {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(20px);
}
.game-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.word-list .pangram {
    background-color: var(--purple);
    color: #000;
    padding: 1px 4px;
    border-radius: 4px;
}
body.dark-mode .word-list .pangram {
    color: #fff;
}

body.dark-mode .rank-subtitle {
    color: #a0a0a0;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.rank-celebrate span {
    display: inline-block;
    animation: wave 0.8s ease-in-out;
    position: relative;
}
body.dark-mode .game-toast {
    background-color: #e1e1e1;
    color: #121212;
}


.achievement-toast {
    background-color: var(--purple);
    color: #000;
    font-weight: 700;
    animation: sparkle 1.5s ease-in-out;
}
body.dark-mode .achievement-toast {
    background-color: var(--purple);
    color: #fff;
}
@keyframes sparkle {
    0%, 100% { box-shadow: 0 0 0px var(--purple); }
    50% { box-shadow: 0 0 20px var(--purple); }
}
#new-rankings-list-container {
    padding: 0 10px;
}
.rankings-header {
    display: flex;
    justify-content: space-between;
    padding: 0 5px 10px 24px;
    font-weight: 700;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    margin: 0 10px 15px 10px;
}
body.dark-mode .rankings-header {
    color: var(--disabled-gray);
}
.new-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    font-size: 1.1rem;
}
.new-rank-name {
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-align: left;
    flex-basis: 100px;
    flex-shrink: 0;
}
.new-rank-score {
    font-weight: 500;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.rank-connector {
    flex-grow: 1;
    border-bottom: 2px dotted var(--border-color);
    margin: 0 16px;
    transform: translateY(2px);
    transition: border-color 0.3s ease;
}
.new-rank-item.current .new-rank-name {
    background-color: var(--purple);
    color: #000;
    font-weight: 700;
}
.new-rank-item.current .new-rank-score {
    background-color: var(--purple);
    color: #000;
    font-weight: 700;
}
.new-rank-item.current .rank-connector {
    border-color: var(--purple);
}
#new-rankings-list-container.shape-hexagon .new-rank-item.current .new-rank-score {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#new-rankings-list-container.shape-square .new-rank-item.current .new-rank-score {
    border-radius: 8px;
}
#new-rankings-list-container.shape-circle .new-rank-item.current .new-rank-score {
    border-radius: 50%;
}
body.dark-mode .new-rank-item.current .new-rank-name,
body.dark-mode .new-rank-item.current .new-rank-score {
    color: #fff;
}
.footer-link {
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-color);
}


.header-button-outline {
    background-color: transparent;
    border: 1px solid var(--dark-gray);
    color: var(--dark-gray);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s ease;
}
body.dark-mode .header-button-outline {
    border-color: var(--text-color);
    color: var(--text-color);
}
#stats-page .page-container {
    padding: 0;
}
#stats-page .page-header, #yesterday-solve-page .page-header {
    padding: 10px 20px;
}
#stats-page .page-content, #yesterday-solve-page .page-content {
    padding: 20px;
}
#stats-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.page-header h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.streaks-card {
    background-color: var(--faint-purple);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}
.streaks-card h3 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.dark-mode .streaks-card {
    background-color: #3a2d4f;
    border: 1px solid #5a486f;
}

body.dark-mode .streaks-card h3 {
    color: #a0a0a0;
}

body.dark-mode .streaks-card .streak-item {
    color: var(--text-color);
}

.streak-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 8px;
}
.streak-item:last-child {
    margin-bottom: 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    text-align: center;
    margin-bottom: 24px;
}
.stat-item {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 16px 12px;
}
body.dark-mode .stat-item {
    background-color: var(--light-gray);
}
.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}
.stat-label {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: #666;
}
body.dark-mode .stat-label {
    color: var(--disabled-gray);
}
.divider {
    border-bottom: 1px solid var(--border-color);
    margin: 24px 0;
}
.personal-bests {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.personal-bests div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}
.personal-bests span {
    font-weight: 400;
}
.longest-word-value {
    font-weight: 700;
    letter-spacing: 1px;
    border: 2px solid var(--purple);
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}
.highest-rank-value {
    font-weight: 700;
    background-color: var(--purple);
    color: #000;
    padding: 4px 8px;
    border-radius: 6px;
}
body.dark-mode .highest-rank-value {
    color: #fff;
}
.section-title {
    font-size: 1.2rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 24px 0 12px;
    font-weight: 700;
    text-align: center;
}
body.dark-mode .section-title {
    color: var(--disabled-gray);
}
.activity-card {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 16px;
}
body.dark-mode .activity-card {
    background-color: var(--light-gray);
}
.activity-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0;
}
.activity-item.clickable {
    cursor: pointer;
}
.activity-item:last-child {
    margin-bottom: 0;
}
.day {
    font-weight: 400;
    width: 40px;
}
.rank {
    font-weight: 500;
    width: 90px;
}
.progress {
    flex-grow: 1;
    display: flex;
    align-items: center;
}
.progress-bar-bg {
    height: 12px;
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
body.dark-mode .progress-bar-bg {
    background-color: #444;
}
.progress-bar-fill {
    height: 100%;
    background-color: var(--purple);
    border-radius: 6px;
}
.score {
    font-size: 0.8rem;
    color: #666;
    margin-left: 12px;
}

body.dark-mode .score {
    color: var(--text-color);
}

.chevron {
    color: #aaa;
    margin-left: 12px;
}
.activity-item.missed .rank, .activity-item.upcoming .rank {
    color: #999;
    font-style: italic;
}
.activity-item.missed .progress, .activity-item.upcoming .progress {
    color: #999;
    font-size: 1.2rem;
}
.stats-footer-link {
    display: block;
    text-align: center;
    padding: 24px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.stats-footer-link a {
    color: #666;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

body.dark-mode .stats-footer-link a {
    color: var(--text-color);
}

.solve-summary {
    text-align: center;
    margin-bottom: 16px;
    color: #666;
    font-size: 0.9rem;
}
body.dark-mode .solve-summary {
    color: var(--disabled-gray);
}
.solve-letters {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 4px;
}
.solve-letters .center-letter {
    color: var(--purple);
}
.solve-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    justify-content: center;
    line-height: 1.5;
}
.solve-word-list a {
    text-decoration: none;
    color: var(--text-color);
    text-transform: capitalize;
}
.solve-word-list .found {
    font-weight: 700;
}
.solve-word-list .pangram {
    background-color: var(--purple);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
}
body.dark-mode .solve-word-list .pangram {
    color: #fff;
}

.solve-instructions {
    font-size: 0.8rem;
    color: #999;
    text-align: center;
    margin-top: 20px;
}
.solve-key {
    text-align: center;
    font-size: 0.8rem;
    color: #666;
    margin-top: 24px;
    line-height: 1.6;
}
body.dark-mode .solve-key {
    color: var(--disabled-gray);
}
.share-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.share-btn-wrapper span {
    font-weight: 400;
    font-size: 1rem;
    color: #666;
}

body.dark-mode .share-btn-wrapper span {
    color: var(--disabled-gray);
}

.share-icon-circle {
    width: 28px;
    height: 28px;
    background-color: var(--text-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode .share-icon-circle {
    background-color: var(--text-color);
}
.share-icon-svg {
    width: 16px;
    height: 16px;
    fill: var(--bg-color);
}
.thank-you-note {
    text-align: center;
    color: #333;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 24px;
}
body.dark-mode .thank-you-note {
    color: var(--text-color);
}
.play-missed-btn {
    background-color: black;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8rem;
}
body.dark-mode .play-missed-btn {
    background-color: #e1e1e1;
    color: #121212;
}
.missed-rank-placeholder {
    display: inline-block;
    width: 24px;
    height: 12px;
    border-bottom: 2px solid #999;
}
.daily-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.daily-stat-card {
    background-color: #f7f7f7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}
.daily-stat-card .stat-label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}

#daily-stats-page .back-arrow {
    margin-left: -10px;
}

body.dark-mode .daily-stat-card {
    background-color: var(--light-gray);
}

body.dark-mode .daily-stat-card .stat-label {
    color: var(--disabled-gray);
}

body.dark-mode .daily-stat-card .stat-value {
    color: var(--text-color);
}

body.dark-mode .daily-stat-card .stat-value.rank-value {
    color: var(--purple);
}

.daily-stat-card .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
}
.daily-stat-card.full-width {
    grid-column: 1 / -1;
}
.daily-stat-card .stat-value.rank-value {
    color: var(--purple);
}
#understanding-page .page-header {
    padding-top: 20px;
    margin-bottom: 15px;
    justify-content: flex-end;
}
#understanding-page .page-header h2 {
    font-size: 1.2rem !important;
    white-space: nowrap !important;
}


#daily-stats-page .page-header,
#yesterday-solve-page .page-header {
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 40px;
    position: relative; /* This is important for centering the title */
}

#daily-stats-page .page-header h2,
#yesterday-solve-page .page-header h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}


.header-placeholder {
    width: 80px; 
 }
  
  body.dark-mode .back-arrow {
    fill: var(--text-color);
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2500;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15vh;
}
.modal-card {
    position: relative;
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 12px;
    padding: 25px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    text-align: left;
}
#finds-hint-modal-card {
    padding: 0;
    min-height: 380px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    color: var(--dark-gray);
    z-index: 10;
}
.hint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 20px 25px 15px;
    margin-top: 50px;
}
.hint-title-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.hint-title-container h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}
#hint-info-icon {
    cursor: pointer;
    color: var(--text-color);
}
.info-card {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 240px;
    z-index: 2600;
    text-align: left;
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 8px;
}
.info-card.show {
    display: block;
}
.info-card h4 {
    margin: 0 0 5px 0;
    font-weight: 700;
    font-size: 1rem;
}
.info-card p {
    margin: 0;
    line-height: 1.4;
    color: #666;
}
body.dark-mode .info-card {
    background-color: #333;
}
body.dark-mode .info-card p {
    color: #ccc;
}
#hint-points-display {
    font-weight: 700;
    font-size: 1rem;
    background-color: var(--light-gray);
    padding: 6px 12px;
    border-radius: 20px;
}
#hint-main-text {
    text-align: center;
    line-height: 1.5;
    padding: 0 25px;
    margin-top: 30px;
}
.hint-actions {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 25px 0;
}
#reveal-path-btn {
    width: 100%;
    font-size: 1.1rem;
}
.hexagon.spotlight-path {
    background-color: #D6EAF8 !important;
    color: var(--dark-gray) !important;
    transform: scale(1.1);
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
body.dark-mode .hexagon.spotlight-path {
    color: #000000 !important;
}
#hint-points-remaining-text {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    margin-top: 25px;
    padding-bottom: 25px;
}
body.dark-mode #hint-points-remaining-text {
    color: var(--disabled-gray);
}
.hint-button-styled {
    background-color: var(--text-color);
    color: var(--bg-color);
    border: 2px solid var(--text-color);
    border-radius: 50px;
    font-weight: 700;
    width: 100%;
    padding: 14px;
    transition: opacity 0.2s;
}
.hint-button-styled:hover:not(:disabled) {
    opacity: 0.85;
}
.hint-button-styled:disabled {
    border-color: var(--disabled-gray);
    background-color: var(--disabled-gray);
    color: #fff;
    opacity: 0.7;
}
body.hint-mode-active .hexagon:hover {
    color: var(--purple);
}

#hint-coach-mark {
    display: none;
    position: absolute;
    top: 55px; 
    right: 95px; /* Positioned to point at the hint icon */
    width: 220px;
    background-color: #2c2c2c;
    color: #ffffff;
    border-radius: 8px;
    padding: 20px 15px;
    z-index: 1500;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-size: 0.95rem;
    animation: fadeIn 0.3s ease-out;
}

#hint-coach-mark .coach-mark-pointer {
    right: 55px; /* Aligns pointer with the hint icon */
}

body.dark-mode #hint-coach-mark {
    background-color: #f0f0f0;
    color: #1a1a1a;
}
body.dark-mode #hint-coach-mark .coach-mark-pointer {
    background-color: #f0f0f0;
}

#finds-waitlist-overlay {
    align-items: center;
    padding-top: 0;
}

#finds-waitlist-card {
    background-color: var(--purple);
    color: #000; /* Set main text color to black for readability */
    text-align: center;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Style the close button to be black on the purple background */
#finds-waitlist-card .modal-close {
    color: #000;
    opacity: 0.7;
}

/* Ensure headings and paragraphs are also black */
#finds-waitlist-card h4, 
#finds-waitlist-card p {
    color: #000;
}

/* Style the input field for the purple background */
#finds-waitlist-form input {
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white looks good on purple */
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#finds-waitlist-form input::placeholder {
    color: #555;
}

#finds-submit-waitlist-btn {
    font-size: 1.1rem; 
}

#keeper-modal-overlay,
#aha-modal-overlay {
    align-items: center;
    padding-top: 0;
}

.celebration-card {
    background-color: var(--purple);
    color: #000;
    max-width: 320px;
    padding: 80px 25px;
}
.celebration-card .modal-close {
    color: #000;
}

.celebration-icon {
    font-size: 48px;
    display: block;
    text-align: center;
    margin-bottom: 25px;
    color: #000;
}
.celebration-card h4 {
    margin-bottom: 15px;
    font-size: 1.8rem;
}
.celebration-card p {
    color: #000;
    line-height: 1.5;
    font-size: 1rem;
}

body.dark-mode .celebration-card {
    background-color: var(--purple);
    color: #000;
}
body.dark-mode .celebration-card p {
    color: #000;
}
body.dark-mode .celebration-icon {
    color: #000;
}
body.dark-mode .celebration-card .modal-close {
    color: #000;
}

/* --- HOW TO PLAY THEME TOGGLE --- */
.header-icon-btn {
    position: absolute;
    right: 50px; /* Positions it to the left of the close 'X' button */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.header-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .header-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ensure the SVG icon fits nicely */
.header-icon-btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none; /* Prevents clicks on the SVG itself blocking the div */
}

@media (max-height: 500px) {
  main {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .ranking-wrapper {
    margin-bottom: 5px;
  }
  .progress-bar {
    margin-top: 5px;
  }
  .hexagon {
    width: 60px;
    height: 69.28px;
    font-size: 1.6em;
  }
  .hex-row:nth-child(2), .hex-row:nth-child(3) {
    margin-top: -18px;
  }
  .shape-square .hexagon { 
    width: 60px; 
    height: 60px; 
  }
  .shape-circle .hexagon { 
    width: 60px; 
    height: 60px; 
  }
  .controls {
    margin-top: 15px; 
    gap: 15px;
  }
}

@media (max-width: 360px) {
  .control-button {
    padding: 20px 20px;
    height: 40px;
  }
  .control-button.icon-button {
    width: 45px;
    height: 45px;
  }
  .hexagon {
    width: 70px;
    height: 80.83px;
  }
  .hex-row:nth-child(2), .hex-row:nth-child(3) {
    margin-top: -20px;
  }
}