/* ---------------------------------------------------------------------
   THEMES
--------------------------------------------------------------------- */

/* Default ("dark") — black & grey */
:root {
    color-scheme: dark;

    --bg:            #000000;   /* page background (pure black)     */
    --surface:       #101010;   /* cards, panels                    */
    --surface-2:     #191919;   /* hover, inputs, raised bits       */
    --surface-3:     #262626;   /* pressed / selected               */
    --border:        #262626;   /* subtle dividers                  */
    --border-strong: #cecbcb;   /* input outlines, emphasis         */

    --text:          #f2f2f2;
    --text-muted:    #9a9a9a;

    --accent:        #0897ef;
    --accent-strong: #1675b7;   /* accent hover / pressed           */
    --accent-text:   #f7fafc;   /* text that sits ON the accent     */
    --accent-2:      #9b8cff;   /* secondary highlight (gradients)  */

    --danger:        #fd0019;
    --success:       #15b100;
    --warning:       #fbbf24;

    --titlebar-bg:   rgba(0, 0, 0, 0.85);
    --titlebar-text: #ffffff;

    --border-width: 2px;
    --border-width-big: 3px;
    --radius:        14px;
    --radius-sm:     9px;
    --shadow:        0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.5);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Achievement tile colors */
    --achevement-default-bg-color: #1c1c1c;
    --achevement-default-color: #f2f2f2;
    --achevement-type-1-bg-color: #0f5c33;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #8f2433;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #7a6503;
    --achevement-type-3-color: #fff;

    /* Stats graphs (read by Chart.js code) */
    --grid-bg-color: #0a3053;
    --grid-line-color: #fbfeff;
    --grid-color: #406b7d;
    --grid-point-color: #e5e5e5;
    --grid-point-line-color: #ffffff;
    --grid-point-border-color: #0a0a0a;
    --grid-point-highlight-color: #ffffff;
    --grid-fill-color: rgb(16 78 136);

    /* Card-suit backdrop */
    --bg-opacity: 0.32;
    --bg-saturate: 1;
    --bg-heart-color: #ff3b4e;
    --bg-diamond-color: #ff3b4e;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255,255,255,.75);
    --bg-opacity-percentage: 88%;   /* how solid the profile panel is over the backdrop */

    --link-color: #42cef9;
    --link-clicked-color: #6bceff;
}

/* Blue — midnight navy (the previous default) */
[data-theme="blue"] {
    color-scheme: dark;

    --bg:            #0f1831;   /* page background                  */
    --surface:       #111a2e;   /* cards, panels                    */
    --surface-2:     #18233b;   /* hover, inputs, raised bits       */
    --surface-3:     #22304d;   /* pressed / selected               */
    --border:        #24324e;   /* subtle dividers                  */
    --border-strong: #35476b;   /* input outlines, emphasis         */

    --text:          #e8eef8;
    --text-muted:    #8fa0bd;

    --accent:        #3fb6ff;   /* the main "brand" color           */
    --accent-strong: #1a8fe0;   /* accent hover / pressed           */
    --accent-text:   #fdfeff;   /* text that sits ON the accent     */
    --accent-2:      #9b8cff;   /* secondary highlight (gradients)  */

    --danger:        #fd0019;
    --success:       #15b100;
    --warning:       #fbbf24;

    --titlebar-bg:   rgba(14, 24, 48, 0.85);
    --titlebar-text: #3fb6ff;

    --radius:        14px;
    --radius-sm:     9px;
    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);


    /* Achievement tile colors */
    --achevement-default-bg-color: #16305a;
    --achevement-default-color: #fff;
    --achevement-type-1-bg-color: #0f6b3a;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a32a3a;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #8a7303;
    --achevement-type-3-color: #fff;

    /* Stats graphs (read by Chart.js code) */
    --grid-bg-color: #0d1628;
    --grid-line-color: #6d94e0;
    --grid-color: #6d9ea1;
    --grid-point-color: #67c7df;
    --grid-point-line-color: #fff;
    --grid-point-border-color: #0d1628;
    --grid-point-highlight-color: #90eeff;
    --grid-fill-color: rgba(63, 182, 255, 0.25);

    /* Card-suit backdrop */
    --bg-opacity: 0.22;
    --bg-saturate: 1;
    --bg-heart-color: #ff4d5e;
    --bg-diamond-color: #ff4d5e;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255,255,255,.6);
    --bg-opacity-percentage: 90%;   /* how solid the profile panel is over the backdrop */
}

/* Purple */
[data-theme="purple"] {
    --bg:            #341b3f;
    --surface:       #221327;
    --surface-2:     #54305f;
    --surface-3:     #3a2242;
    --border:        #3d2645;
    --border-strong: #5a3a64;

    --text:          #f7e8fa;
    --text-muted:    #c4a3cc;

    --accent:        #e07cf5;
    --accent-strong: #c255dc;
    --accent-text:   #ffffff;
    --accent-2:      #ff8fb8;

    --titlebar-bg:   rgba(22, 10, 26, 0.85);
    --titlebar-text: #e07cf5;

    --achevement-default-bg-color: #5a2f63;
    --achevement-default-color: #fcf;
    --achevement-type-1-bg-color: #2b6fa8;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a8457d;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #8f5c5c;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #482457;
    --grid-line-color: #ffccff;
    --grid-color: #946c94;
    --grid-point-color: #fcf;
    --grid-point-border-color: #747;
    --grid-point-highlight-color: #fcf;
    --grid-fill-color: rgba(224, 124, 245, 0.25);

    --bg-opacity: 0.2;
    --bg-saturate: 0;
    --bg-border-color: rgba(255,255,255,.6);
    --bg-opacity-percentage: 94%;
}

/* Light */
[data-theme="light"] {
    color-scheme: light;
    --bg: #eef1f6;
    --surface: #e2eaf9;
    --surface-2: #d7e4ff;
    --surface-3: #1e4ca9;;
    --border: #dfe4ec;
    --border-strong: #c3cbd8;
    --text: #121826;
    --text-muted: #5c667a;
    --accent: #2563eb;
    --accent-strong: #1d4fd0;
    --accent-text: #ffffff;
    --accent-2: #7c3aed;
    --danger: #fd0019;
    --success: #15b100;
    --warning: #b45309;
    --titlebar-bg: rgba(17, 24, 39, 0.92);
    --titlebar-text: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 20px rgba(16, 24, 40, .08);
    --achevement-default-bg-color: #ffffff;
    --achevement-default-color: #121826;
    --achevement-type-1-bg-color: #dbeafe;
    --achevement-type-1-color: #1e3a8a;
    --achevement-type-2-bg-color: #fde2e4;
    --achevement-type-2-color: #9f1239;
    --achevement-type-3-bg-color: #fdecc8;
    --achevement-type-3-color: #7c4a03;
    --grid-bg-color: #d5e2ff;
    --grid-line-color: #000000;
    --grid-color: #2f2f2f;
    --grid-point-color: #b8ceff;
    --grid-point-border-color: #1d4fd0;
    --grid-point-highlight-color: #1d4fd0;
    --grid-fill-color: rgb(30 89 219 / 25%);
    --bg-opacity: 0.35;
    --bg-saturate: 1;
    --bg-heart-color: #e11d48;
    --bg-diamond-color: #e11d48;
    --bg-spade-color: #111;
    --bg-club-color: #111;
    --bg-border-color: transparent;
    --bg-opacity-percentage: 96%;
}







/* ---------------------------------------------------------------------
   MORE THEMES — paste below the existing ones.
   Anything not set here (danger/success/warning, border widths, radius,
   font, etc.) falls back to the :root defaults.
--------------------------------------------------------------------- */

/* Orange — ember on near-black brown */
[data-theme="orange"] {
    color-scheme: dark;

    --bg:            #24140a;
    --surface:       #1c1009;
    --surface-2:     #2e1c10;
    --surface-3:     #3d2615;
    --border:        #3f2817;
    --border-strong: #6b4527;

    --text:          #fbeee3;
    --text-muted:    #c9a587;

    --accent:        #ff8a2b;
    --accent-strong: #e5701a;
    --accent-text:   #ffffff;
    --accent-2:      #ffc15e;

    --titlebar-bg:   rgba(28, 14, 6, 0.85);
    --titlebar-text: #ff8a2b;

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);

    --achevement-default-bg-color: #4a2a14;
    --achevement-default-color: #fff;
    --achevement-type-1-bg-color: #0f6b3a;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a32a3a;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #2b6fa8;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #2a1608;
    --grid-line-color: #ffb070;
    --grid-color: #9a6a44;
    --grid-point-color: #ffb36b;
    --grid-point-line-color: #fff;
    --grid-point-border-color: #2a1608;
    --grid-point-highlight-color: #ffd2a1;
    --grid-fill-color: rgba(255, 138, 43, 0.25);

    --bg-opacity: 0.22;
    --bg-saturate: 1;
    --bg-heart-color: #ff4d5e;
    --bg-diamond-color: #ff4d5e;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255,255,255,.6);
    --bg-opacity-percentage: 90%;

    --link-color: #ffa95e;
    --link-clicked-color: #ffc28f;
}

/* Green — deep forest */
[data-theme="green"] {
    color-scheme: dark;

    --bg:            #0c1f17;
    --surface:       #0d1a14;
    --surface-2:     #14271e;
    --surface-3:     #1d3629;
    --border:        #1f3a2c;
    --border-strong: #2f5643;

    --text:          #e6f5ec;
    --text-muted:    #8fb3a0;

    --accent:        #22b864;
    --accent-strong: #179a51;
    --accent-text:   #ffffff;
    --accent-2:      #7be0c3;

    --success:       #7be04a;   /* keep "success" distinct from the accent */

    --titlebar-bg:   rgba(8, 22, 16, 0.85);
    --titlebar-text: #34d27b;

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);

    --achevement-default-bg-color: #164a33;
    --achevement-default-color: #fff;
    --achevement-type-1-bg-color: #2b6fa8;   /* blue so it doesn't blend with the default */
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a32a3a;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #8a7303;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #0a1f16;
    --grid-line-color: #8de0b0;
    --grid-color: #4f8a6c;
    --grid-point-color: #6fe3a1;
    --grid-point-line-color: #fff;
    --grid-point-border-color: #0a1f16;
    --grid-point-highlight-color: #b6ffd6;
    --grid-fill-color: rgba(46, 198, 111, 0.25);

    --bg-opacity: 0.22;
    --bg-saturate: 1;
    --bg-heart-color: #ff4d5e;
    --bg-diamond-color: #ff4d5e;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255,255,255,.6);
    --bg-opacity-percentage: 90%;

    --link-color: #5fe3a0;
    --link-clicked-color: #9af0c3;
}

/* Red — crimson / wine */
[data-theme="red"] {
    color-scheme: dark;

    --bg:            #2a0c10;
    --surface:       #1d090c;
    --surface-2:     #2e1216;
    --surface-3:     #3f1a1f;
    --border:        #43191f;
    --border-strong: #6b2a33;

    --text:          #fbe9eb;
    --text-muted:    #c9959c;

    --accent:        #ff4d5e;
    --accent-strong: #e0303f;
    --accent-text:   #ffffff;
    --accent-2:      #ffa26b;

    --danger:        #ff9f1c;   /* orange, so delete buttons don't look like normal accent buttons */

    --titlebar-bg:   rgba(26, 6, 9, 0.85);
    --titlebar-text: #ff4d5e;

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);

    --achevement-default-bg-color: #5a1a22;
    --achevement-default-color: #fff;
    --achevement-type-1-bg-color: #0f6b3a;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #b8562a;   /* orange so it doesn't blend with the default */
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #8a7303;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #24090d;
    --grid-line-color: #ff9aa4;
    --grid-color: #8f4d55;
    --grid-point-color: #ff7a87;
    --grid-point-line-color: #fff;
    --grid-point-border-color: #24090d;
    --grid-point-highlight-color: #ffc2c8;
    --grid-fill-color: rgba(255, 77, 94, 0.25);

    --bg-opacity: 0.18;
    --bg-saturate: 1;
    --bg-heart-color: #ff6b7a;
    --bg-diamond-color: #ff6b7a;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255,255,255,.6);
    --bg-opacity-percentage: 90%;

    --link-color: #ff8a96;
    --link-clicked-color: #ffb3bb;
}

/* Fortune — black & gold */
[data-theme="fortune"] {
    color-scheme: dark;

    --bg:            #000000;
    --surface:       #0f0d08;
    --surface-2:     #1a1710;
    --surface-3:     #2a2416;
    --border:        #2a2416;
    --border-strong: #d9b85c;   /* gold where dark uses light grey */

    --text:          #f5efe0;
    --text-muted:    #a39a84;

    --accent:        #d4a72c;
    --accent-strong: #b88a14;
    --accent-text:   #fffdf5;
    --accent-2:      #f5d77a;

    --titlebar-bg:   rgba(0, 0, 0, 0.85);
    --titlebar-text: #e8c25a;

    --achevement-default-bg-color: #1c1810;
    --achevement-default-color: #f5e6b8;
    --achevement-type-1-bg-color: #0f5c33;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #8f2433;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #a8820a;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #1a1405;
    --grid-line-color: #f5d77a;
    --grid-color: #7a6530;
    --grid-point-color: #f0c94a;
    --grid-point-line-color: #ffffff;
    --grid-point-border-color: #0a0a0a;
    --grid-point-highlight-color: #fff3c4;
    --grid-fill-color: rgba(212, 167, 44, 0.25);

    --bg-opacity: 0.32;
    --bg-saturate: 1;
    --bg-heart-color: #ff3b4e;
    --bg-diamond-color: #ff3b4e;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(232, 194, 90, .75);
    --bg-opacity-percentage: 88%;

    --link-color: #f0c94a;
    --link-clicked-color: #ffd970;
}

/* Neon — black with hot pink & cyan, 80s synthwave */
[data-theme="neon"] {
    color-scheme: dark;

    --bg:            #000000;
    --surface:       #0e0812;
    --surface-2:     #1a0f22;
    --surface-3:     #2a1636;
    --border:        #2a1636;
    --border-strong: #ff6ad5;   /* pink where dark uses light grey */

    --text:          #fdf2ff;
    --text-muted:    #a98fb8;

    --accent:        #ff2fd0;
    --accent-strong: #e015b5;
    --accent-text:   #ffffff;
    --accent-2:      #2de2e6;

    --success:       #2bff88;
    --warning:       #ffe74c;

    --titlebar-bg:   rgba(0, 0, 0, 0.85);
    --titlebar-text: #ff2fd0;

    --achevement-default-bg-color: #1a0f22;
    --achevement-default-color: #fdf2ff;
    --achevement-type-1-bg-color: #0e6b6e;
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a0136f;
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #6b3fd1;
    --achevement-type-3-color: #fff;

    --grid-bg-color: #12001f;
    --grid-line-color: #2de2e6;
    --grid-color: #5a2a7a;
    --grid-point-color: #ff2fd0;
    --grid-point-line-color: #ffffff;
    --grid-point-border-color: #000000;
    --grid-point-highlight-color: #2de2e6;
    --grid-fill-color: rgba(255, 47, 208, 0.22);

    --bg-opacity: 0.32;
    --bg-saturate: 1;
    --bg-heart-color: #ff2fd0;
    --bg-diamond-color: #2de2e6;
    --bg-spade-color: #000;
    --bg-club-color: #000;
    --bg-border-color: rgba(255, 47, 208, .7);
    --bg-opacity-percentage: 88%;

    --link-color: #2de2e6;
    --link-clicked-color: #7ff6f8;
}

/* Autumn — warm browns, burnt orange, mustard */
[data-theme="autumn"] {
    color-scheme: dark;

    --bg:            #2b1d14;
    --surface:       #21160f;
    --surface-2:     #33231a;
    --surface-3:     #452f22;
    --border:        #4a3326;
    --border-strong: #7a5640;

    --text:          #f6ebdd;
    --text-muted:    #c2a68a;

    --accent:        #d9822b;
    --accent-strong: #b8641a;
    --accent-text:   #ffffff;
    --accent-2:      #c9a227;

    --titlebar-bg:   rgba(30, 20, 13, 0.88);
    --titlebar-text: #e8a25a;

    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);

    --achevement-default-bg-color: #4a3020;
    --achevement-default-color: #f6ebdd;
    --achevement-type-1-bg-color: #4f6b1f;   /* olive */
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #8f2a1a;   /* rust */
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #a8781a;   /* mustard */
    --achevement-type-3-color: #fff;

    --grid-bg-color: #241811;
    --grid-line-color: #e8b07a;
    --grid-color: #7a5a40;
    --grid-point-color: #e8a25a;
    --grid-point-line-color: #fff;
    --grid-point-border-color: #241811;
    --grid-point-highlight-color: #ffd9a8;
    --grid-fill-color: rgba(217, 130, 43, 0.25);

    --bg-opacity: 0.25;
    --bg-saturate: 0.85;
    --bg-heart-color: #c8401f;
    --bg-diamond-color: #c8401f;
    --bg-spade-color: #1a100a;
    --bg-club-color: #1a100a;
    --bg-border-color: rgba(255, 235, 210, .55);
    --bg-opacity-percentage: 92%;

    --link-color: #e8a25a;
    --link-clicked-color: #f5c48f;
}

[data-theme="christmas"] {
    color-scheme: dark;
 
    --bg:            #0b2216;   /* deep pine                        */
    --surface:       #0a1b12;
    --surface-2:     #123121;
    --surface-3:     #1b432e;
    --border:        #1f4632;
    --border-strong: #e9e4d6;   /* snowy off-white                  */
 
    --text:          #fbf8f1;
    --text-muted:    #a9c2b2;
 
    --accent:        #d62839;   /* berry / Santa red                */
    --accent-strong: #b51d2c;
    --accent-text:   #ffffff;
    --accent-2:      #f2c14e;   /* ornament gold                    */
 
    --danger:        #ff9f1c;   /* orange, so delete ≠ normal red buttons */
    --success:       #5fd38d;
    --warning:       #f2c14e;
 
    --titlebar-bg:   rgba(8, 26, 17, 0.88);
    --titlebar-text: #f2c14e;
 
    --shadow:        0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
 
    --achevement-default-bg-color: #174a31;
    --achevement-default-color: #fbf8f1;
    --achevement-type-1-bg-color: #2b6fa8;   /* icy blue */
    --achevement-type-1-color: #fff;
    --achevement-type-2-bg-color: #a8182a;   /* red */
    --achevement-type-2-color: #fff;
    --achevement-type-3-bg-color: #a8820a;   /* gold */
    --achevement-type-3-color: #fff;
 
    --grid-bg-color: #0a1f14;
    --grid-line-color: #f2c14e;
    --grid-color: #3f6f55;
    --grid-point-color: #ff5a6a;
    --grid-point-line-color: #ffffff;
    --grid-point-border-color: #0a1f14;
    --grid-point-highlight-color: #ffe9a8;
    --grid-fill-color: rgba(214, 40, 57, 0.22);
 
    --bg-opacity: 0.24;
    --bg-saturate: 1;
    --bg-heart-color: #e0303f;
    --bg-diamond-color: #e0303f;
    --bg-spade-color: #06140d;
    --bg-club-color: #06140d;
    --bg-border-color: rgba(242, 193, 78, .7);   /* gold card edges */
    --bg-opacity-percentage: 90%;
 
    --link-color: #f2c14e;
    --link-clicked-color: #ffd97a;
}






/* ---------------------------------------------------------------------
   GRID
--------------------------------------------------------------------- */

.heart {
    color: var(--bg-heart-color);
}
.diamond {
    color: var(--bg-diamond-color);
}
.spade {
    color: var(--bg-spade-color);
}
.club {
    color: var(--bg-club-color);
}
#suit-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-auto-rows: 80px;
    z-index: -1;
    pointer-events: none;
    margin-top: 50px;
}

.suit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    opacity: var(--bg-opacity);
    user-select: none;
    pointer-events: auto;
    transition: transform 0.5s ease;
    -webkit-text-stroke: 2px var(--bg-border-color);
    filter: saturate(var(--bg-saturate));
}

.suit.spin {
    transform: rotateY(360deg) scale(1.2);
}



/* ---------------------------------------------------------------------
   MAIN + TITLEBAR
--------------------------------------------------------------------- */


@font-face {
    font-family: 'Hax';
    src: url('/assets/font/Hacked-KerX.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


 /* unvisited link */
 a:link {
    color: var(--link-color);
  }
  
  /* visited link */
  a:visited {
    color: var(--link-clicked-color);
  }




  html, body {
    max-width: 100vw;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
}

.notification-bell, .notification-mail {
    position: relative;
    display: inline-block;
    color: var(--titlebar-text);
}

.notification-bell .fas, .notification-mail .fas {
    font-size: 2rem; /* Adjust the size of the bell */
}

.notification-bell .bell-link, .notification-mail .mail-link {
    text-decoration: none; /* Removes the default underline from the link */
    color: inherit;
    display: inline-block;
}

.money-link {
    text-decoration: none; /* Removes the default underline from the link */
    color: inherit;
    display: inline-block;
}

.notification-bell .bell-link:hover, .notification-mail .mail-link:hover {
    opacity: 0.8; /* Optional: Add hover effect */
}

.notification-bell .badge, .notification-mail .mailbadge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    font-size: 1rem; /* Adjust the number size */
    width: 20px; /* Width of the circle */
    height: 20px; /* Height of the circle */
    border-radius: 50%;
    text-align: center;
    line-height: 20px; /* Center the number vertically */
    user-select: none;
}

.titlebar {
    position: fixed; /* Make the element fixed */
    top: 0;          /* Position it at the top of the screen */
    left: 0;         /* Align it to the left edge */
    width: 100%;     /* Make it span the full width of the viewport */
    background-color: var(--titlebar-bg); /* Optional: Set a background color to avoid transparency */
    z-index: 1000;   /* Ensure it stays on top of other elements */
    display: flex;
    flex-direction: row;
    /* box-shadow: 0 3px 5px rgba(255, 255, 255, 0.3); Optional: Add a shadow for better visibility */
    box-shadow: 0 3px 5px color-mix(in srgb, var(--titlebar-text) 70%, transparent);
    height: 60px;
}

.offline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    /* max-width: 600px; */
    margin: auto;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: var(--border-width) solid var(--border-strong);
    color: var(--text);
    padding: 20px;
  }

.logo-link {
    display: flex; /* Align items horizontally */
    align-items: center; /* Vertically align image and text */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Preserve text color */
}

.title {
    font-family: 'Hax';
    /* font-size: 55px; */
    color: var(--titlebar-text);
    font-size: clamp(10px, 4vw, 55px);
}
.logo {
    padding: 5px;
}
.logo img {
    max-height: 50px;
    max-width: 50px;
}

.content {
    margin-top: 75px;
}


.menu-section {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
}

.money {
    font-family: 'Hax';
    /* font-size: 40px; */
    color: var(--titlebar-text);
    min-width: 80px; /* Ensure consistent alignment */
    text-align: right;
    margin-left: 10px;
    font-size: clamp(15px, 5vw, 40px);
}
.red {
    color: red;
}
.green {
    color: green;
}

.hamburger-menu {
    width: 30px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    background: var(--titlebar-text);
    border-radius: 2px;
}

.dropdown-menu {
    display: none; /* Start with the dropdown hidden */
    position: fixed;
    top: 65px;
    right: 5px;
    background-color: var(--bg);
    color: var(--titlebar-text);
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
    box-shadow: 0 2px 5px color-mix(in srgb, var(--bg) 70%, transparent);
    padding: 10px;
    border-radius: 5px;
    flex-direction: column;
    gap: 10px;
    z-index: 5000;
    border: 3px solid var(--titlebar-text);
}

.dropdown-option {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    user-select: none; /* Prevent text selection */
}

.dropdown-option:hover {
    background-color: #f0f0f0; /* Light background on hover */
    background-color: color-mix(in srgb, var(--titlebar-bg), white 20%);
}

.option-title {
    font-family: 'Hax';
    font-size: 16px;
    color: var(--titlebar-text);
}

/* .dropdown-menu .dropdown-option:last-child {
    border-top: 1px solid #ddd; /* Optional: add a separator before the last item (Log Out)
 }*/


.login-button {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-family: 'Hax';
    font-size: 16px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

.login-button:hover {
    background-color: white;
    color: black;
}


.profile {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid darkslategrey;
    /* background: lightgray; */
    overflow: hidden; /* Ensures anything outside the circle is hidden */
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile img {
    width: 105%;
    height: 105%;
    object-fit: cover; /* Ensures the image fills the container */
}


























.update-content {
    margin: 10px;
}

.home-latest-update {
    background: var(--bg);
    margin-bottom: 2rem;
    border-radius: var(--radius);
    border: var(--border-width) solid var(--border-strong);
}

.home-latest-update .topflex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.home-section {
    padding: 10px;
    border-radius: var(--radius);
    border: var(--border-width) solid var(--border-strong);
    background: var(--bg);
    margin-bottom: 2rem;
    padding: 15px;
}

.scrolling-tiles {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    padding: 5px;
}

.tile {
    min-width: 120px;
    background: var(--bg);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    border: var(--border-width) solid var(--border-strong);
}

.activity-list {
    background: var(--bg);
    list-style: none;
    padding-left: 0;
}

.activity-list li {
    padding: 0.5rem 0;
}

.top-list {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.top-user {
    background: var(--bg);
    padding: 0.75rem;
    border-radius: 1rem;
}


.more-updates {
    margin-top: 1rem;
}



.updates-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    color: var(--text);
}


.update-entry h2 {
    color: var(--link-color);
    margin-bottom: 0.5rem;
}

.update-meta {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 1rem;
}

.update-body img {
    max-width: 100%;
    border-radius: 6px;
}

.update-body a {
    color: var(--link-color);
    text-decoration: underline;
}

.update-entry {
    background-color: var(--bg);
    margin: 20px 0;
    border-radius: var(--radius);
    padding: 0px;
    border: var(--border-width) solid var(--border-strong);
}

.post-title{
    background-color: var(--accent);
    margin: 0;
    padding: 10px;
    border-radius: var(--radius);
    box-sizing: border-box;
}

.update-entry h2 {
    font-size: 1.5em;
    margin: 0;
    padding: 10px 0;
    color: white;
    background-color: var(--accent); /* Primary background color */
    border-radius: 6px;
    padding-left: 10px;
}

.update-meta {
    font-size: 0.9em;
    color: var(--text);
    margin: 10px 0;
}

.update-body {
    font-size: 1.1em;
    color: var(--text);
    margin-top: 15px;
    padding: 10px;
    padding-top: 0px;
}
  .topflex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    border-radius: var(--radius);
    background-color: var(--accent-strong); /* Primary background color */
    box-sizing: border-box;
  }
  .create-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 600px;
    margin: auto;
    background: var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: var(--border-width) solid var(--border-strong);
    color: var(--accent-text);
    padding: 10px 0;
  }


  .flexbox {
    display: flex;
    justify-content: center;
  }

  .flex-container {
    display: flex;
    justify-content: space-evenly;
    width: 90vw;
  }
  .flex-content {
    width: 60vw;
    margin: 20px;
  }
  .flex-two {
    min-width: 20vw;
    margin: 20px;
  }


  .top-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: space-between;
    }

    .top-group {
        flex: 1 1 45%;
    }

    .top-user {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .top-user-img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
    }

    .top-user-info {
        display: flex;
        flex-direction: column;
    }

.game-card {
    background-color: var(--bg);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 5px var(--border);
    width: 100px;
    height: 130px;
}

.game-card:hover {
    transform: scale(1.03);
    box-shadow: 0 0 10px var(--link-clicked-color);
}

.game-title {
    color: var(--text);
    font-weight: bold;
    font-size: 1rem;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.achievement-name {
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px; /* Added space below the title */
    overflow: hidden;
    position: relative;
    text-align: center; /* default to center */
    height: 24px; /* or however tall one line is */
}

.scroll-wrapper {
    display: inline-block;
    white-space: nowrap;
    text-align: left;
    transition: transform 5s linear;
}

.achievement-name::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    pointer-events: none;
}

.achievement-name:hover span {
    animation: scroll-text 5s linear infinite;
}

.achievement-name span {
    display: inline-block;
    padding-right: 100%; /* add enough space for scrolling */
}

.full-text { display: inline; }
.short-text { 
    display: none;
}

@media (max-aspect-ratio: 1/1) {
    .game-title {
        font-size: 1rem;
    }
    .game-card {
        width: 55px;
        height: 90px;
    }

    .flex-container{
        flex-direction: column;
        align-items: center;
    }
    .flex-content {
        width: auto;
    }
    .home-section{
        width: 90vw;
    }

  }

  @media (max-aspect-ratio: 1/1) {
    .game-title {
        font-size: 1rem;
    }
    .game-card {
        width: 55px;
        height: 90px;
    }

    .flex-container{
        flex-direction: column;
        align-items: center;
    }
    .flex-content {
        width: auto;
    }
    .home-section{
        width: 90vw;
    }

  }

  @media (max-width: 524px) {
  .full-text { display: none; }
  .short-text { display: inline; }
}