/*RESET*/
:root {
  --bg-color:
    linear-gradient(
      180deg,
      #f7f9fc 0%,
      #e9eef5 100%
    );
  --surface-color: #ffffff;
  --surface-transparent: rgba(255, 255, 255, .85);
  --text-color: #17243a;
  --muted-text: #667085;
  /* Navy + Coral */
  --primary-color: #17365d;
  --primary-hover: #102a49;
  --primary-shadow: rgba(23, 54, 93, .25);
  --hover-shadow: rgba(23, 54, 93, .10);
  --hover-background: #edf1f6;
  --border-color: #dce3ec;
  --shadow-color: rgba(23, 54, 93, .06);
  --secondary-background: #f5f7fa;
  --surface-overlay: rgba(23, 54, 93, .03);
  --footer-background: #e7edf5;
  --footer-border: #c9d5e4;
  --footer-muted: #8490a3;
  /* Status colors */
  --danger-text: #991b1b;
  --danger-background: #fff5f5;
  --danger-border: #fecaca;
  --success-text: #166534;
  --success-background: #ecfdf5;
  --success-border: #a7f3d0;
  --success-dark: #15803d;
  --info-color: #2563eb;
  --info-light: #eff6ff;
  --info-hover: #1d4ed8;
  --warning-color: #d97706;
  --warning-light: #fffbeb;
  --success-color: #16a34a;
  --success-light: #f0fdf4;
  /* Coral accents */
  --success-accent: #e76f61;
  --warning-accent: #e2a400;
  --info-accent: #2878d7;
  --chart-background: #edf1f6;
  --chart-gradient-start: #f08072;
  --chart-gradient-end: #17365d;
  --card-accent: #d7e0eb;
  --star-color: #f5b301;
  --white: #ffffff;
  /* Archive Calendar */
  --calendar-win-background: #e8f7ef;
  --calendar-win-border: #b8e5c9;
  --calendar-win-text: #166534;
  --calendar-loss-background: #fee2e2;
  --calendar-loss-border: #fecaca;
  --calendar-loss-text: #991b1b;
  --calendar-archive-background: #eeeaf8;
  --calendar-archive-border: #ddd4f0;
  --calendar-archive-text: #6d4aa2;
  --calendar-hover-background: #e8edf4;
  --calendar-archive-hover: #e7e1f3;
  --base-font-size: 16px;
}


select:focus-visible,
[tabindex]:focus-visible{
    outline:
    3px solid color-mix(
        in srgb,
        var(--primary-color),
        transparent 65%
    );
    outline-offset:3px;
}

html{scroll-behavior:smooth;}

*{
    box-sizing:border-box;
}

body{
    min-height:100vh;
    margin:0;
    font-family:"Segoe UI",sans-serif;
    font-size:var(--base-font-size);
    line-height:1.5;
    color:var(--text-color);
    background:var(--bg-color) fixed;
}

img{
    max-width:100%;
    height:auto;
}

a{color:var(--primary-hover);}

a:not(.btn):hover{
    color:var(--primary-color);
}

h1,
h2,
h3,
p{
    margin:0;
}

/*PAGE LAYOUT*/
.page{
    max-width:900px;
    margin:auto;
    padding:30px 20px 60px;
}

/*CARD*/
.card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:32px;
    box-shadow:
        0 12px 30px var(--shadow-color);
}

/*Hero Styling*/
.hero {
    max-width:850px;
    margin:30px auto 20px;
    text-align:center;
    padding:48px 24px;
    backdrop-filter:blur(8px);
    background:var(--surface-transparent);
    border-radius:28px;
    box-shadow:0 20px 45px var(--shadow-color);
    overflow:hidden;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    margin-bottom: 12px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 800;
    color: var(--text-color);
}

.hero-subtitle {
    margin-top: 12px;
    font-size: 1.15rem;
    color: var(--muted-text);
}

/*SECTION HEADER*/
.section-header{
    margin-bottom:24px;
}

.section-label{
    margin-bottom:6px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1.2px;
    color:var(--primary-color);
}

.section-header h2{
    color:var(--text-color);
    font-size:28px;
}

/*BUTTONS*/
.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:14px 24px;
    border-radius:999px;
    border:none;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    transition:
        background .2s,
        transform .15s;
    min-height: 48px;
    user-select:none;
    white-space:nowrap;
}

.btn:active{
    transform:scale(.97);
}

.btn-primary{
    background:var(--primary-color);
    color:var(--white);
}

.btn-primary,
.btn-primary:hover{
    color:var(--white);
}

.btn-secondary{
    background:var(--surface-color);
    color:var(--primary-hover);
    border:1px solid var(--border-color);
}

/*SITE HEADER*/
.site-header {
    width: calc(100% - 48px);
    max-width: 1180px;
    min-height: 56px;
    margin: 18px auto;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
    background: var(--surface-transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow:
        0 6px 18px var(--shadow-color);
}

/*LOGO*/
.site-logo {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .2s ease,
        transform .15s ease;
}

.site-logo:hover {
    color: var(--text-color);
    transform: translateY(-1px);
}

/*DESKTOP NAVIGATION*/
.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.site-nav .btn {
    min-height: 40px;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .92rem;
}

/*QUIET SECONDARY NAV BUTTONS*/
.site-nav .btn-secondary {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
}

.site-nav .btn-secondary:hover {
    background: var(--secondary-background);
    border-color: transparent;
    color: var(--text-color);
}

/*PRIMARY NAV BUTTON*/
.site-nav .btn-primary {
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 9px;
    box-shadow:
        0 5px 12px var(--primary-shadow);
}

/*MOBILE MENU BUTTON*/
.mobile-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .15s ease;
}

.mobile-menu-button:hover {
    background: var(--secondary-background);
    border-color: var(--primary-color);
}

.mobile-menu-button:active {
    transform: scale(.96);
}

.page-section{
    max-width:850px;
    margin:30px auto;
}

.btn:disabled,button:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.site-footer {
    margin-top:60px;
    padding:40px 20px;
    background:var(--footer-background);
    border-top:1px solid var(--footer-border);
}

.footer-content {
    max-width:900px;
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:24px;
}

.footer-brand h3 {
    margin:0 0 8px;
    color:var(--text-color);
    font-size:1.4rem;
}

.footer-brand p {
    margin:0;
    color:var(--muted-text);
    max-width:500px;
    line-height:1.6;
}

.footer-disclaimer {
    max-width:700px;
    font-size:.9rem;
    color:var(--muted-text);
    line-height:1.6;
}

.footer-bottom {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding-top:20px;
    border-top:1px solid var(--border-color);
}

.footer-bottom p {
    margin:0;
    color:var(--footer-muted);
    font-size:.85rem;
}

.return-top {
    color:var(--primary-color);
    font-weight:700;
    text-decoration:none;
}

.return-top:hover {
    text-decoration:underline;
}

/* Shared page container */
.container{
    max-width:900px;
    margin:auto;
    padding:30px 20px 60px;
}

/*Shared spacing between sections*/
.section{
    margin-bottom:30px;
}

/*Shared Card Layout*/
.card-small{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:20px;
    box-shadow:
        0 8px 20px var(--shadow-color);
}

.page-title{
    font-size:clamp(32px,5vw,44px);
    font-weight:800;
    color:var(--text-color);
    margin-bottom:10px;
}

.page-subtitle{
    color:var(--muted-text);
    margin-bottom:30px;
}

/*TABLES*/
.table-card{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:24px;
    overflow:hidden;
    overflow-x:auto;
    box-shadow:
        0 12px 30px var(--shadow-color);
}

.stats-table{
    width:100%;
    border-collapse:collapse;
    min-width:600px;
}

.stats-table thead{
    background:var(--primary-color);
    color:var(--white);
}

.stats-table th,
.stats-table td{
    padding:16px;
}

.stats-table tbody tr{
    border-bottom:1px solid var(--border-color);
}

.stats-table tbody tr:hover{
    background:var(--secondary-background);
}

.error {
    color:var(--danger-text);
    background:var(--danger-background);
    border:1px solid var(--danger-border);
    padding:12px;
    border-radius:12px;
    margin-bottom:15px;
    font-weight:600;
}

.success {
    color:var(--success-text);
    background:var(--success-background);
    border:1px solid var(--success-border);
    padding:12px;
    border-radius:12px;
    margin-bottom:15px;
    font-weight:600;
}

::placeholder{
    color:var(--muted-text);
    opacity:1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
    outline:
    3px solid color-mix(
        in srgb,
        var(--primary-color),
        transparent 65%
    );
    outline-offset:3px;
}

input,
textarea,
select{
    background:var(--surface-color);
    color:var(--text-color);
    border:1px solid var(--border-color);
}

@media(hover:hover){
    .card:hover,
    .analytics-card:hover,
    .clue-card:hover,
    .guess-card:hover{
        box-shadow:
            0 16px 35px var(--hover-shadow);
    }

    .btn-primary:hover{
        background:var(--primary-hover);
        color:var(--white);
        transform:translateY(-2px);
    }

    .btn-secondary:hover{
        background:var(--secondary-background);
        border-color:var(--primary-color);
        transform:translateY(-2px);
    }
}

/* PROFILE STAT GRID */
.stats-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.stats-grid .card-small{
    text-align:center;
}

.stats-grid h3{
    color:var(--muted-text);
    font-size:.9rem;
    margin-bottom:10px;
}

.stats-grid p{
    font-size:28px;
    font-weight:800;
    color:var(--primary-color);
}

@media(max-width:600px){
    .stats-grid{
        grid-template-columns:1fr;
    }
}

html.dark-mode {
/* Deep navy foundation */
  --bg-color:
    linear-gradient(
      180deg,
      #0b1424 0%,
      #0a1120 100%
    );
  --surface-color: #142033;
  --surface-transparent: rgba(20, 32, 51, .92);
  --text-color: #f5f7fa;
  --muted-text: #aeb9c9;
  /* Navy + Coral */
  --primary-color: #f07a6c;
  --primary-hover: #ff9182;
  --primary-shadow: rgba(240, 122, 108, .25);
  --hover-shadow: rgba(0, 0, 0, .45);
  --hover-background: #223149;
  --border-color: #2b3a50;
  --shadow-color: rgba(0, 0, 0, .40);
  --secondary-background: #19283d;
  --surface-overlay: rgba(255, 255, 255, .045);
  --footer-background: #101c2e;
  --footer-border: #29394f;
  --footer-muted: #8492a6;
  /* Danger */
  --danger-text: #fca5a5;
  --danger-background: #3b1117;
  --danger-border: #70232d;
  /* Success */
  --success-text: #a7e8c0;
  --success-background: #0c2d21;
  --success-border: #1f6848;
  --success-dark: #4ade80;
  /* Info */
  --info-color: #70a7e8;
  --info-light: #152844;
  --info-hover: #8ab9f0;
  /* Warning */
  --warning-color: #f5c15c;
  --warning-light: #3a2a0d;
  /* Success */
  --success-color: #63d995;
  --success-light: #0c2d21;
  /* Accent colors */
  --success-accent: #f07a6c;
  --warning-accent: #f3c45b;
  --info-accent: #70a7e8;
  /* Charts */
  --chart-background: #223149;
  --chart-gradient-start: #ff8879;
  --chart-gradient-end: #17365d;
  /* Cards / decorative elements */
  --card-accent: #34445b;
  --star-color: #ffd45c;
  --white: #ffffff;
  /* Archive Calendar */
  --calendar-win-background: #0c2d21;
  --calendar-win-border: #1f6848;
  --calendar-win-text: #a7e8c0;
  --calendar-loss-background: #3b1117;
  --calendar-loss-border: #70232d;
  --calendar-loss-text: #fca5a5;
  --calendar-archive-background: #30234a;
  --calendar-archive-border: #594080;
  --calendar-archive-text: #d9c6f0;
  --calendar-hover-background: #1d4050;
  --calendar-archive-hover: #453263;
}


.large-text{
    --base-font-size:18px;
}

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

body,
.card,
.card-small,
.hero,
.site-header,
.site-footer,
.table-card,
.btn-secondary {
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* =========================================================
   FINAL MOBILE HEADER FIX
   ========================================================= */

@media (max-width: 700px) {
    .site-header {
        width: calc(100% - 24px);
        margin: 12px auto;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: 44px auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
    }

    .site-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        font-size: 22px;
        line-height: 44px;
    }

    .mobile-menu-button {
        display: flex;
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        justify-self: end;
    }

    .site-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 10px 0 0;
        padding: 10px 0 0;
        border-top: 1px solid var(--border-color);
    }

    .site-nav.mobile-menu-open {
        display: flex;
    }

    .site-nav .btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        justify-content: flex-start;
        border-radius: 10px;
    }
}