/* ═══════════════════════════════════════════════════════════════════════════
   shop.css  –  Swordle butik + aktiva teman
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts för köpbara fontar ───────────────────────────────────────
   Dessa laddas alltid (förhandsgranskning i butiken + spelet om utrustad)   */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pacifico&display=swap');

/* ── Butiksida – layout ─────────────────────────────────────────────────── */
.shop-page {
    padding: 20px;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: #6aaa64;
    text-decoration: none;
    font-weight: 600;
}

    .back-link:hover {
        text-decoration: underline;
    }

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .shop-header h1 {
        margin: 0;
        font-size: 2rem;
    }

.coin-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    background: #f3f3f3;
    padding: 8px 18px;
    border-radius: 8px;
}

/* Notis-banner */
.shop-notice {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: 600;
}

    .shop-notice.success {
        background: #d4edda;
        color: #155724;
    }

    .shop-notice.error {
        background: #f8d7da;
        color: #721c24;
    }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.shop-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.tab-btn {
    padding: 8px 22px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: #f3f3f3;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    transition: all .2s;
}

    .tab-btn.active {
        background: #6aaa64;
        color: #fff;
        border-color: #6aaa64;
    }

    .tab-btn:hover:not(.active) {
        background: #e0e0e0;
    }

/* ── Tab-innehåll ───────────────────────────────────────────────────────── */
.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

/* ── Raritet-sektioner ──────────────────────────────────────────────────── */
.rarity-section {
    margin-bottom: 32px;
}

.rarity-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.rarity-line {
    flex: 1;
    height: 2px;
    background: #ccc;
}

    .rarity-line.rare {
        background: linear-gradient(90deg,#4a9eff,#0057b3);
    }

    .rarity-line.legendary {
        background: linear-gradient(90deg,#f5c842,#c8860a);
    }

.rarity-badge {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

    .rarity-badge.common {
        background: #e0e0e0;
        color: #555;
    }

    .rarity-badge.rare {
        background: #4a9eff;
        color: #fff;
    }

    .rarity-badge.legendary {
        background: linear-gradient(135deg,#f5c842,#c8860a);
        color: #fff;
    }

/* ── Kortgrid ───────────────────────────────────────────────────────────── */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 16px;
}

/* ── Enskilt kort ───────────────────────────────────────────────────────── */
.shop-card {
    border: 2px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: transform .15s,box-shadow .15s;
}

    .shop-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,.12);
    }

    .shop-card.rarity-rare {
        border-color: #4a9eff;
    }

    .shop-card.rarity-legendary {
        border-color: #f5c842;
    }

    .shop-card.owned {
        border-color: #6aaa64;
    }

    .shop-card.equipped {
        border-color: #6aaa64;
        box-shadow: 0 0 0 3px #6aaa6480, 0 4px 14px rgba(106,170,100,.35);
    }

/* Förhandsgranskning-ruta */
.card-preview {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 3px;
}

.card-body {
    padding: 10px 12px;
}

.card-name {
    font-weight: 700;
    font-size: 1rem;
}

.card-desc {
    font-size: .8rem;
    color: #666;
    margin-top: 2px;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.card-price {
    font-weight: 700;
}

.buy-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 5px;
    background: #6aaa64;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    font-size: .85rem;
}

    .buy-btn:hover {
        background: #528d50;
    }

    .buy-btn:disabled {
        background: #bbb;
        cursor: default;
    }

.owned-btn {
    background: #bbb !important;
    cursor: default;
}

.equipped-btn {
    background: #c8860a !important;
}

    .equipped-btn:hover {
        background: #a56e09 !important;
    }

/* ══════════════════════════════════════════════════════════════════════════
   BAKGRUNDS-FÖRHANDSVISNINGAR
   ══════════════════════════════════════════════════════════════════════════ */

.preview-slate {
    background: #6c8a99;
    color: #fff;
}

.preview-sage {
    background: #7d9e7d;
    color: #fff;
}

.preview-dusty {
    background: #c4a882;
    color: #fff;
}

.preview-rose {
    background: #c48888;
    color: #fff;
}

.preview-ocean {
    background: linear-gradient(135deg,#1e3a6e,#4a9eff);
    color: #fff;
}

.preview-sunset {
    background: linear-gradient(135deg,#c84b11,#f5a623);
    color: #fff;
}

.preview-aurora {
    background: linear-gradient(135deg,#0b3d2e,#00c896);
    color: #fff;
}

.preview-candy {
    background: linear-gradient(135deg,#f7a8d3,#c77ddf);
    color: #fff;
}

.preview-flowers {
    background: #1a0a2e;
    color: #e0aaff;
    background-image: radial-gradient(ellipse at 20% 50%,#6b21a855 0%,transparent 60%), radial-gradient(ellipse at 80% 20%,#ec489955 0%,transparent 60%);
}

.preview-stars {
    background: #0d0d1a;
    color: #f5c842;
    background-image: radial-gradient(circle at 30% 30%,#ffffff22 1px,transparent 1px), radial-gradient(circle at 70% 60%,#ffffff22 1px,transparent 1px), radial-gradient(circle at 50% 80%,#ffffff22 1px,transparent 1px);
}

.preview-diamonds {
    background: #1a0040;
    color: #d8b4fe;
    background-image: repeating-linear-gradient(45deg,#7c3aed22 0px,#7c3aed22 2px,transparent 2px,transparent 14px);
}

.preview-sakura {
    background: #2d0a0a;
    color: #ffb3c6;
    background-image: radial-gradient(ellipse at 40% 40%,#9f1a3a44 0%,transparent 60%);
}

/* ── Font-förhandsvisningar ─────────────────────────────────────────────── */
.preview-font-standard {
    background: #f0f0f0;
    color: #222;
    font-family: 'Nunito','Segoe UI',sans-serif;
    font-size: 2rem;
}

.preview-font-mono {
    background: #1e1e1e;
    color: #9cdcfe;
    font-family: 'Courier New',monospace;
    font-size: 2rem;
}

.preview-font-serif {
    background: #faf6f0;
    color: #3a2e1e;
    font-family: Georgia,serif;
    font-size: 2rem;
}

.preview-font-bebas {
    background: #111;
    color: #fff;
    font-family: 'Bebas Neue',sans-serif;
    font-size: 3rem;
    letter-spacing: 4px;
}

.preview-font-impact {
    background: #1a1a1a;
    color: #ff4444;
    font-family: Impact,Haettenschweiler,sans-serif;
    font-size: 2.6rem;
    letter-spacing: 2px;
}

.preview-font-pacifico {
    background: #fff8f0;
    color: #e07b39;
    font-family: 'Pacifico',cursive;
    font-size: 1.8rem;
}

.preview-font-pixel {
    background: #0a0a0a;
    color: #39ff14;
    font-family: 'Courier New',monospace;
    font-size: 1.6rem;
    image-rendering: pixelated;
}

.preview-font-fire {
    background: #111;
    font-size: 2.2rem;
    font-family: Impact,sans-serif;
    letter-spacing: 2px;
}

    .preview-font-fire span {
        background: linear-gradient(180deg,#ff4500,#ffb700);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-family: Impact,sans-serif;
    }

.preview-font-gold {
    background: #0d0d0d;
    font-size: 2.2rem;
    font-family: 'Bebas Neue','Georgia',serif;
    letter-spacing: 3px;
}

    .preview-font-gold span {
        background: linear-gradient(180deg,#fff0a0,#f5c842,#c8860a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

/* ══════════════════════════════════════════════════════════════════════════
   AKTIVA BAKGRUNDSTEMAN
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Common – ljusläge ──────────────────────────────────────────────────── */
body.bg-skiffer {
    background: #8fabb8 !important;
}

body.bg-salvia {
    background: #91b091 !important;
}

body.bg-sand {
    background: #d4bfa0 !important;
}

body.bg-ros {
    background: #d4a0a0 !important;
}

/* ── Common – mörkläge ──────────────────────────────────────────────────── */
body.dark-mode.bg-skiffer {
    background: #3a5a66 !important;
}

body.dark-mode.bg-salvia {
    background: #3a5e3a !important;
}

body.dark-mode.bg-sand {
    background: #6b5540 !important;
}

body.dark-mode.bg-ros {
    background: #6b3a3a !important;
}

/* ── Rare – ljusläge ────────────────────────────────────────────────────── */
body.bg-hav {
    background: linear-gradient(160deg,#1e3a6e 0%,#4a9eff 100%) !important;
    color: #fff;
}

body.bg-solnedgang {
    background: linear-gradient(160deg,#c84b11 0%,#f5a623 100%) !important;
    color: #fff;
}

body.bg-norrsken {
    background: linear-gradient(160deg,#0b3d2e 0%,#00c896 100%) !important;
    color: #fff;
}

body.bg-godis {
    background: linear-gradient(160deg,#f7a8d3 0%,#c77ddf 100%) !important;
    color: #fff;
}

/* ── Rare – mörkläge ────────────────────────────────────────────────────── */
body.dark-mode.bg-hav {
    background: linear-gradient(160deg,#0c1d3a 0%,#1a5fa0 100%) !important;
}

body.dark-mode.bg-solnedgang {
    background: linear-gradient(160deg,#7a2500 0%,#b06a00 100%) !important;
}

body.dark-mode.bg-norrsken {
    background: linear-gradient(160deg,#041e14 0%,#006647 100%) !important;
}

body.dark-mode.bg-godis {
    background: linear-gradient(160deg,#8c3060 0%,#6a2a8a 100%) !important;
}

/* ── Legendary – ljusläge ───────────────────────────────────────────────── */
body.bg-blomster {
    background-color: #1a0a2e !important;
    background-image: radial-gradient(ellipse at 15% 50%,#6b21a870 0%,transparent 55%), radial-gradient(ellipse at 85% 20%,#ec489970 0%,transparent 55%), radial-gradient(ellipse at 50% 85%,#8b5cf670 0%,transparent 55%) !important;
    color: #e0aaff !important;
}

body.bg-natthimmel {
    background-color: #0d0d1a !important;
    background-image: radial-gradient(circle at 20% 20%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 60% 10%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 80% 35%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 35% 55%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 70% 70%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 10% 80%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 90% 85%,#ffffffcc 1px,transparent 1px) !important;
    color: #f5c842 !important;
}

body.bg-diamanter {
    background-color: #1a0040 !important;
    background-image: repeating-linear-gradient(45deg,#7c3aed30 0px,#7c3aed30 2px,transparent 2px,transparent 20px), repeating-linear-gradient(-45deg,#7c3aed18 0px,#7c3aed18 2px,transparent 2px,transparent 20px) !important;
    color: #d8b4fe !important;
}

body.bg-sakura {
    background-color: #2d0a0a !important;
    background-image: radial-gradient(ellipse at 30% 30%,#9f1a3a55 0%,transparent 55%), radial-gradient(ellipse at 70% 70%,#7a0a2a44 0%,transparent 55%) !important;
    color: #ffb3c6 !important;
}

/* ── Legendary – mörkläge ───────────────────────────────────────────────── */
body.dark-mode.bg-blomster {
    background-color: #0e0519 !important;
    background-image: radial-gradient(ellipse at 15% 50%,#6b21a850 0%,transparent 55%), radial-gradient(ellipse at 85% 20%,#ec489950 0%,transparent 55%) !important;
}

body.dark-mode.bg-natthimmel {
    background-color: #05050f !important;
}

body.dark-mode.bg-diamanter {
    background-color: #0d0020 !important;
}

body.dark-mode.bg-sakura {
    background-color: #1a0505 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AKTIVA FONTAR  –  gäller ENBART #board .tile
   ══════════════════════════════════════════════════════════════════════════ */

body.font-mono #board .tile {
    font-family: 'Courier New',monospace !important;
}

body.font-serif #board .tile {
    font-family: Georgia,serif !important;
}

body.font-bebas #board .tile {
    font-family: 'Bebas Neue',sans-serif !important;
    font-size: 36px !important;
    letter-spacing: 2px;
}

body.font-impact #board .tile {
    font-family: Impact,Haettenschweiler,sans-serif !important;
}

body.font-pacifico #board .tile {
    font-family: 'Pacifico',cursive !important;
    font-size: 26px !important;
}

/* Pixel */
body.font-pixel #board .tile {
    font-family: 'Courier New',monospace !important;
    color: #39ff14 !important;
    text-shadow: 0 0 6px #39ff14, 0 0 12px #39ff1480 !important;
}

    body.font-pixel #board .tile.green,
    body.font-pixel #board .tile.yellow,
    body.font-pixel #board .tile.gray {
        color: #fff !important;
        text-shadow: none !important;
    }

/* Eld – gradient endast på tomma/ifyllda rutor, inte på avslöjade */
body.font-eld #board .tile:not(.green):not(.yellow):not(.gray) {
    font-family: Impact,Haettenschweiler,sans-serif !important;
    background: linear-gradient(180deg,#ff4500 0%,#ffb700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px #ff450080);
}

body.font-eld #board .tile.green,
body.font-eld #board .tile.yellow,
body.font-eld #board .tile.gray {
    font-family: Impact,Haettenschweiler,sans-serif !important;
    color: #fff;
}

/* Guld – gradient endast på tomma/ifyllda rutor, inte på avslöjade */
body.font-guld #board .tile:not(.green):not(.yellow):not(.gray) {
    font-family: 'Bebas Neue','Georgia',serif !important;
    font-size: 36px !important;
    letter-spacing: 2px;
    background: linear-gradient(180deg,#fff0a0 0%,#f5c842 50%,#c8860a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 5px #f5c84280);
}

body.font-guld #board .tile.green,
body.font-guld #board .tile.yellow,
body.font-guld #board .tile.gray {
    font-family: 'Bebas Neue','Georgia',serif !important;
    font-size: 36px !important;
    letter-spacing: 2px;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   MÖRKT LÄGE – butiksidans egna element
   ══════════════════════════════════════════════════════════════════════════ */
body.dark-mode .shop-card {
    background: #3a3a3a;
    border-color: #555;
    color: #eee;
}

    body.dark-mode .shop-card.owned {
        border-color: #6aaa64;
    }

    body.dark-mode .shop-card.equipped {
        border-color: #6aaa64;
        box-shadow: 0 0 0 3px #6aaa6480,0 4px 14px rgba(106,170,100,.35);
    }

    body.dark-mode .shop-card.rarity-rare {
        border-color: #4a9eff;
    }

    body.dark-mode .shop-card.rarity-legendary {
        border-color: #f5c842;
    }

body.dark-mode .card-desc {
    color: #aaa;
}

body.dark-mode .coin-display {
    background: #2a2a2a;
    color: #eee;
}

body.dark-mode .tab-btn {
    background: #3a3a3a;
    color: #eee;
    border-color: #555;
}

    body.dark-mode .tab-btn.active {
        background: #6aaa64;
        color: #fff;
        border-color: #6aaa64;
    }

body.dark-mode .rarity-badge.common {
    background: #555;
    color: #ccc;
}

body.dark-mode .shop-notice.success {
    background: #1a3d26;
    color: #a3d9a5;
}

body.dark-mode .shop-notice.error {
    background: #3d1a1a;
    color: #f5a0a0;
}

body.dark-mode .back-link {
    color: #a3d9a5;
}

/* ══════════════════════════════════════════════════════════════════════════
   TEMA-MATCHADE UI-ELEMENT
   Keyboard, leaderboard och brickor anpassas per bakgrundstema.
   Brickor (border + glow) ENBART för legendary-bakgrunder.
   ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   SKIFFER – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-skiffer #keyboard button {
    background: #5a7f8f;
    color: #fff;
    border: none;
}

    body.bg-skiffer #keyboard button:hover {
        background: #4a6d7c;
    }

body.bg-skiffer .leaderboard-entry {
    background: #6a8fa0;
    color: #fff;
}

body.bg-skiffer .leaderboard-overlay {
    background: #6a8fa0;
    color: #fff;
}

body.dark-mode.bg-skiffer #keyboard button {
    background: #2e5060;
    color: #cde;
    border: none;
}

    body.dark-mode.bg-skiffer #keyboard button:hover {
        background: #3a6070;
    }

body.dark-mode.bg-skiffer .leaderboard-entry {
    background: #2e5060;
    color: #cde;
}

body.dark-mode.bg-skiffer .leaderboard-overlay {
    background: #2e5060;
    color: #cde;
}

/* ════════════════════════════════════════════════════════════════════════
   SALVIA – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-salvia #keyboard button {
    background: #5e8a5e;
    color: #fff;
    border: none;
}

    body.bg-salvia #keyboard button:hover {
        background: #4d764d;
    }

body.bg-salvia .leaderboard-entry {
    background: #6e9e6e;
    color: #fff;
}

body.bg-salvia .leaderboard-overlay {
    background: #6e9e6e;
    color: #fff;
}

body.dark-mode.bg-salvia #keyboard button {
    background: #2e502e;
    color: #beb;
    border: none;
}

    body.dark-mode.bg-salvia #keyboard button:hover {
        background: #3a623a;
    }

body.dark-mode.bg-salvia .leaderboard-entry {
    background: #2e502e;
    color: #beb;
}

body.dark-mode.bg-salvia .leaderboard-overlay {
    background: #2e502e;
    color: #beb;
}

/* ════════════════════════════════════════════════════════════════════════
   SAND – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-sand #keyboard button {
    background: #a08060;
    color: #fff;
    border: none;
}

    body.bg-sand #keyboard button:hover {
        background: #8a6c50;
    }

body.bg-sand .leaderboard-entry {
    background: #b09070;
    color: #fff;
}

body.bg-sand .leaderboard-overlay {
    background: #b09070;
    color: #fff;
}

body.dark-mode.bg-sand #keyboard button {
    background: #4a3520;
    color: #e8d0b0;
    border: none;
}

    body.dark-mode.bg-sand #keyboard button:hover {
        background: #5a4530;
    }

body.dark-mode.bg-sand .leaderboard-entry {
    background: #4a3520;
    color: #e8d0b0;
}

body.dark-mode.bg-sand .leaderboard-overlay {
    background: #4a3520;
    color: #e8d0b0;
}

/* ════════════════════════════════════════════════════════════════════════
   ROS – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-ros #keyboard button {
    background: #b07070;
    color: #fff;
    border: none;
}

    body.bg-ros #keyboard button:hover {
        background: #9a5e5e;
    }

body.bg-ros .leaderboard-entry {
    background: #c08080;
    color: #fff;
}

body.bg-ros .leaderboard-overlay {
    background: #c08080;
    color: #fff;
}

body.dark-mode.bg-ros #keyboard button {
    background: #502020;
    color: #f0c0c0;
    border: none;
}

    body.dark-mode.bg-ros #keyboard button:hover {
        background: #602e2e;
    }

body.dark-mode.bg-ros .leaderboard-entry {
    background: #502020;
    color: #f0c0c0;
}

body.dark-mode.bg-ros .leaderboard-overlay {
    background: #502020;
    color: #f0c0c0;
}

/* ════════════════════════════════════════════════════════════════════════
   HAV – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-hav #keyboard button {
    background: rgba(30,58,110,0.75);
    color: #a8d4ff;
    border: 1px solid #4a9eff60;
}

    body.bg-hav #keyboard button:hover {
        background: rgba(30,58,110,0.95);
    }

body.bg-hav .leaderboard-entry {
    background: rgba(30,58,110,0.70);
    color: #a8d4ff;
}

body.bg-hav .leaderboard-overlay {
    background: rgba(30,58,110,0.90);
    color: #a8d4ff;
}

body.dark-mode.bg-hav #keyboard button {
    background: rgba(12,29,58,0.85);
    color: #7ab8f5;
    border: 1px solid #1a5fa060;
}

    body.dark-mode.bg-hav #keyboard button:hover {
        background: rgba(20,45,85,0.95);
    }

body.dark-mode.bg-hav .leaderboard-entry {
    background: rgba(12,29,58,0.80);
    color: #7ab8f5;
}

body.dark-mode.bg-hav .leaderboard-overlay {
    background: rgba(12,29,58,0.90);
    color: #7ab8f5;
}

/* ════════════════════════════════════════════════════════════════════════
   SOLNEDGÅNG – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-solnedgang #keyboard button {
    background: rgba(150,50,10,0.75);
    color: #ffd0a0;
    border: 1px solid #f5a62360;
}

    body.bg-solnedgang #keyboard button:hover {
        background: rgba(150,50,10,0.95);
    }

body.bg-solnedgang .leaderboard-entry {
    background: rgba(150,50,10,0.70);
    color: #ffd0a0;
}

body.bg-solnedgang .leaderboard-overlay {
    background: rgba(150,50,10,0.90);
    color: #ffd0a0;
}

body.dark-mode.bg-solnedgang #keyboard button {
    background: rgba(80,20,0,0.85);
    color: #f0a060;
    border: 1px solid #b06a0060;
}

    body.dark-mode.bg-solnedgang #keyboard button:hover {
        background: rgba(100,30,0,0.95);
    }

body.dark-mode.bg-solnedgang .leaderboard-entry {
    background: rgba(80,20,0,0.80);
    color: #f0a060;
}

body.dark-mode.bg-solnedgang .leaderboard-overlay {
    background: rgba(80,20,0,0.90);
    color: #f0a060;
}

/* ════════════════════════════════════════════════════════════════════════
   NORRSKEN – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-norrsken #keyboard button {
    background: rgba(11,61,46,0.75);
    color: #80f0cc;
    border: 1px solid #00c89660;
}

    body.bg-norrsken #keyboard button:hover {
        background: rgba(11,61,46,0.95);
    }

body.bg-norrsken .leaderboard-entry {
    background: rgba(11,61,46,0.70);
    color: #80f0cc;
}

body.bg-norrsken .leaderboard-overlay {
    background: rgba(11,61,46,0.90);
    color: #80f0cc;
}

body.dark-mode.bg-norrsken #keyboard button {
    background: rgba(4,30,20,0.85);
    color: #40c890;
    border: 1px solid #00664760;
}

    body.dark-mode.bg-norrsken #keyboard button:hover {
        background: rgba(8,45,30,0.95);
    }

body.dark-mode.bg-norrsken .leaderboard-entry {
    background: rgba(4,30,20,0.80);
    color: #40c890;
}

body.dark-mode.bg-norrsken .leaderboard-overlay {
    background: rgba(4,30,20,0.90);
    color: #40c890;
}

/* ════════════════════════════════════════════════════════════════════════
   GODIS – keyboard + leaderboard, ingen brickstyling
   ════════════════════════════════════════════════════════════════════════ */
body.bg-godis #keyboard button {
    background: rgba(180,80,180,0.65);
    color: #ffe0ff;
    border: 1px solid #c77ddf60;
}

    body.bg-godis #keyboard button:hover {
        background: rgba(160,60,160,0.85);
    }

body.bg-godis .leaderboard-entry {
    background: rgba(180,80,180,0.60);
    color: #ffe0ff;
}

body.bg-godis .leaderboard-overlay {
    background: rgba(180,80,180,0.80);
    color: #ffe0ff;
}

body.dark-mode.bg-godis #keyboard button {
    background: rgba(80,20,80,0.85);
    color: #f0b0f0;
    border: 1px solid #6a2a8a60;
}

    body.dark-mode.bg-godis #keyboard button:hover {
        background: rgba(100,30,100,0.95);
    }

body.dark-mode.bg-godis .leaderboard-entry {
    background: rgba(80,20,80,0.80);
    color: #f0b0f0;
}

body.dark-mode.bg-godis .leaderboard-overlay {
    background: rgba(80,20,80,0.90);
    color: #f0b0f0;
}

/* ════════════════════════════════════════════════════════════════════════
   BLOMSTERTRÄDGÅRD – keyboard + leaderboard + brickor med glow
   ════════════════════════════════════════════════════════════════════════ */
body.bg-blomster #keyboard button {
    background: rgba(60,15,80,0.80);
    color: #e0aaff;
    border: 1px solid #8b5cf660;
}

    body.bg-blomster #keyboard button:hover {
        background: rgba(80,20,110,0.95);
    }

body.bg-blomster #board .tile {
    border-color: #8b5cf6;
    box-shadow: 0 0 6px #8b5cf640;
    color: #e0aaff;
}

body.bg-blomster .leaderboard-entry {
    background: rgba(50,10,70,0.75);
    color: #e0aaff;
}

body.bg-blomster .leaderboard-overlay {
    background: rgba(50,10,70,0.92);
    color: #e0aaff;
}

body.dark-mode.bg-blomster #keyboard button {
    background: rgba(30,5,45,0.90);
    color: #c084fc;
    border: 1px solid #7c3aed60;
}

    body.dark-mode.bg-blomster #keyboard button:hover {
        background: rgba(50,10,70,0.98);
    }

body.dark-mode.bg-blomster #board .tile {
    border-color: #7c3aed;
    box-shadow: 0 0 8px #7c3aed50;
    color: #e0aaff;
}

body.dark-mode.bg-blomster .leaderboard-entry {
    background: rgba(25,5,40,0.85);
    color: #c084fc;
}

body.dark-mode.bg-blomster .leaderboard-overlay {
    background: rgba(25,5,40,0.95);
    color: #c084fc;
}

/* ════════════════════════════════════════════════════════════════════════
   NATTHIMMEL – keyboard + leaderboard + brickor med glow
   ════════════════════════════════════════════════════════════════════════ */
body.bg-natthimmel #keyboard button {
    background: rgba(20,20,40,0.80);
    color: #f5c842;
    border: 1px solid #f5c84240;
}

    body.bg-natthimmel #keyboard button:hover {
        background: rgba(30,30,60,0.95);
    }

body.bg-natthimmel #board .tile {
    border-color: #f5c842;
    box-shadow: 0 0 6px #f5c84240;
    color: #f5c842;
}

body.bg-natthimmel .leaderboard-entry {
    background: rgba(15,15,30,0.78);
    color: #f5c842;
}

body.bg-natthimmel .leaderboard-overlay {
    background: rgba(15,15,30,0.93);
    color: #f5c842;
}

body.dark-mode.bg-natthimmel #keyboard button {
    background: rgba(8,8,20,0.90);
    color: #c8a030;
    border: 1px solid #c8a03040;
}

    body.dark-mode.bg-natthimmel #keyboard button:hover {
        background: rgba(15,15,35,0.98);
    }

body.dark-mode.bg-natthimmel #board .tile {
    border-color: #c8a030;
    box-shadow: 0 0 8px #c8a03050;
    color: #f5c842;
}

body.dark-mode.bg-natthimmel .leaderboard-entry {
    background: rgba(8,8,20,0.85);
    color: #c8a030;
}

body.dark-mode.bg-natthimmel .leaderboard-overlay {
    background: rgba(8,8,20,0.95);
    color: #c8a030;
}

/* ════════════════════════════════════════════════════════════════════════
   DIAMANTER – keyboard + leaderboard + brickor med glow
   ════════════════════════════════════════════════════════════════════════ */
body.bg-diamanter #keyboard button {
    background: rgba(50,0,100,0.75);
    color: #d8b4fe;
    border: 1px solid #7c3aed50;
}

    body.bg-diamanter #keyboard button:hover {
        background: rgba(70,0,130,0.92);
    }

body.bg-diamanter #board .tile {
    border-color: #7c3aed;
    box-shadow: 0 0 6px #7c3aed40;
    color: #d8b4fe;
}

body.bg-diamanter .leaderboard-entry {
    background: rgba(40,0,80,0.72);
    color: #d8b4fe;
}

body.bg-diamanter .leaderboard-overlay {
    background: rgba(40,0,80,0.92);
    color: #d8b4fe;
}

body.dark-mode.bg-diamanter #keyboard button {
    background: rgba(20,0,50,0.88);
    color: #a78bfa;
    border: 1px solid #6d28d950;
}

    body.dark-mode.bg-diamanter #keyboard button:hover {
        background: rgba(35,0,75,0.97);
    }

body.dark-mode.bg-diamanter #board .tile {
    border-color: #6d28d9;
    box-shadow: 0 0 8px #6d28d950;
    color: #a78bfa;
}

body.dark-mode.bg-diamanter .leaderboard-entry {
    background: rgba(15,0,40,0.85);
    color: #a78bfa;
}

body.dark-mode.bg-diamanter .leaderboard-overlay {
    background: rgba(15,0,40,0.95);
    color: #a78bfa;
}

/* ════════════════════════════════════════════════════════════════════════
   SAKURA – keyboard + leaderboard + brickor med glow
   ════════════════════════════════════════════════════════════════════════ */
body.bg-sakura #keyboard button {
    background: rgba(80,15,20,0.78);
    color: #ffb3c6;
    border: 1px solid #ff6b8a50;
}

    body.bg-sakura #keyboard button:hover {
        background: rgba(110,20,28,0.95);
    }

body.bg-sakura #board .tile {
    border-color: #ff6b8a;
    box-shadow: 0 0 6px #ff6b8a40;
    color: #ffb3c6;
}

body.bg-sakura .leaderboard-entry {
    background: rgba(70,10,15,0.74);
    color: #ffb3c6;
}

body.bg-sakura .leaderboard-overlay {
    background: rgba(70,10,15,0.92);
    color: #ffb3c6;
}

body.dark-mode.bg-sakura #keyboard button {
    background: rgba(40,5,8,0.88);
    color: #ff8fa3;
    border: 1px solid #9f1a3a50;
}

    body.dark-mode.bg-sakura #keyboard button:hover {
        background: rgba(60,8,12,0.97);
    }

body.dark-mode.bg-sakura #board .tile {
    border-color: #9f1a3a;
    box-shadow: 0 0 8px #9f1a3a50;
    color: #ffb3c6;
}

body.dark-mode.bg-sakura .leaderboard-entry {
    background: rgba(30,3,6,0.85);
    color: #ff8fa3;
}

body.dark-mode.bg-sakura .leaderboard-overlay {
    background: rgba(30,3,6,0.95);
    color: #ff8fa3;
}

/* ════════════════════════════════════════════════════════════════════════
   Avslöjade brickor (grön/gul/grå) har alltid vit text oavsett tema
   ════════════════════════════════════════════════════════════════════════ */
[class*="bg-"] #board .tile.green,
[class*="bg-"] #board .tile.yellow,
[class*="bg-"] #board .tile.gray {
    color: #fff !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR – bas (ljusläge + mörkläge)
   ══════════════════════════════════════════════════════════════════════════ */

header .navbar {
    background-color: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: none !important;
    transition: background-color 0.3s, border-color 0.3s;
}

    header .navbar .navbar-brand,
    header .navbar .nav-link {
        color: #222 !important;
        transition: color 0.2s;
    }

        header .navbar .nav-link:hover {
            color: #6aaa64 !important;
        }

/* Mörkläge – bas */
body.dark-mode header .navbar {
    background-color: rgba(30,30,30,0.90) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

    body.dark-mode header .navbar .navbar-brand,
    body.dark-mode header .navbar .nav-link {
        color: #eee !important;
    }

        body.dark-mode header .navbar .nav-link:hover {
            color: #6aaa64 !important;
        }

/* ── Common bakgrunder ───────────────────────────────────────────────────── */
body.bg-skiffer header .navbar {
    background-color: rgba(95,130,145,0.80) !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

    body.bg-skiffer header .navbar .navbar-brand,
    body.bg-skiffer header .navbar .nav-link {
        color: #fff !important;
    }

body.dark-mode.bg-skiffer header .navbar {
    background-color: rgba(40,72,85,0.88) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* --- */
body.bg-salvia header .navbar {
    background-color: rgba(100,140,100,0.80) !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

    body.bg-salvia header .navbar .navbar-brand,
    body.bg-salvia header .navbar .nav-link {
        color: #fff !important;
    }

body.dark-mode.bg-salvia header .navbar {
    background-color: rgba(38,72,38,0.88) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* --- */
body.bg-sand header .navbar {
    background-color: rgba(180,155,120,0.80) !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

    body.bg-sand header .navbar .navbar-brand,
    body.bg-sand header .navbar .nav-link {
        color: #fff !important;
    }

body.dark-mode.bg-sand header .navbar {
    background-color: rgba(65,48,28,0.88) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* --- */
body.bg-ros header .navbar {
    background-color: rgba(185,130,130,0.80) !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

    body.bg-ros header .navbar .navbar-brand,
    body.bg-ros header .navbar .nav-link {
        color: #fff !important;
    }

body.dark-mode.bg-ros header .navbar {
    background-color: rgba(65,28,28,0.88) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Rare bakgrunder ─────────────────────────────────────────────────────── */
body.bg-hav header .navbar {
    background-color: rgba(20,45,90,0.78) !important;
    border-bottom: 1px solid rgba(74,158,255,0.30) !important;
}

    body.bg-hav header .navbar .navbar-brand,
    body.bg-hav header .navbar .nav-link {
        color: #a8d4ff !important;
    }

        body.bg-hav header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-hav header .navbar {
    background-color: rgba(8,18,45,0.90) !important;
    border-bottom: 1px solid rgba(74,158,255,0.18) !important;
}

/* --- */
body.bg-solnedgang header .navbar {
    background-color: rgba(140,45,8,0.78) !important;
    border-bottom: 1px solid rgba(245,166,35,0.30) !important;
}

    body.bg-solnedgang header .navbar .navbar-brand,
    body.bg-solnedgang header .navbar .nav-link {
        color: #ffd0a0 !important;
    }

        body.bg-solnedgang header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-solnedgang header .navbar {
    background-color: rgba(65,18,0,0.90) !important;
    border-bottom: 1px solid rgba(176,106,0,0.22) !important;
}

/* --- */
body.bg-norrsken header .navbar {
    background-color: rgba(8,50,36,0.78) !important;
    border-bottom: 1px solid rgba(0,200,150,0.28) !important;
}

    body.bg-norrsken header .navbar .navbar-brand,
    body.bg-norrsken header .navbar .nav-link {
        color: #80f0cc !important;
    }

        body.bg-norrsken header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-norrsken header .navbar {
    background-color: rgba(2,18,12,0.92) !important;
    border-bottom: 1px solid rgba(0,102,71,0.25) !important;
}

/* --- */
body.bg-godis header .navbar {
    background-color: rgba(160,60,160,0.72) !important;
    border-bottom: 1px solid rgba(199,125,223,0.30) !important;
}

    body.bg-godis header .navbar .navbar-brand,
    body.bg-godis header .navbar .nav-link {
        color: #ffe0ff !important;
    }

        body.bg-godis header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-godis header .navbar {
    background-color: rgba(70,15,70,0.90) !important;
    border-bottom: 1px solid rgba(106,42,138,0.28) !important;
}

/* ── Legendary bakgrunder ────────────────────────────────────────────────── */
body.bg-blomster header .navbar {
    background-color: rgba(40,8,60,0.82) !important;
    border-bottom: 1px solid rgba(139,92,246,0.35) !important;
}

    body.bg-blomster header .navbar .navbar-brand,
    body.bg-blomster header .navbar .nav-link {
        color: #e0aaff !important;
    }

        body.bg-blomster header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-blomster header .navbar {
    background-color: rgba(18,3,28,0.93) !important;
    border-bottom: 1px solid rgba(124,58,237,0.25) !important;
}

/* --- */
body.bg-natthimmel header .navbar {
    background-color: rgba(10,10,22,0.85) !important;
    border-bottom: 1px solid rgba(245,200,66,0.28) !important;
}

    body.bg-natthimmel header .navbar .navbar-brand,
    body.bg-natthimmel header .navbar .nav-link {
        color: #f5c842 !important;
    }

        body.bg-natthimmel header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-natthimmel header .navbar {
    background-color: rgba(4,4,12,0.95) !important;
    border-bottom: 1px solid rgba(200,160,48,0.20) !important;
}

/* --- */
body.bg-diamanter header .navbar {
    background-color: rgba(30,0,70,0.82) !important;
    border-bottom: 1px solid rgba(124,58,237,0.35) !important;
}

    body.bg-diamanter header .navbar .navbar-brand,
    body.bg-diamanter header .navbar .nav-link {
        color: #d8b4fe !important;
    }

        body.bg-diamanter header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-diamanter header .navbar {
    background-color: rgba(10,0,32,0.95) !important;
    border-bottom: 1px solid rgba(109,40,217,0.25) !important;
}

/* --- */
body.bg-sakura header .navbar {
    background-color: rgba(55,8,12,0.82) !important;
    border-bottom: 1px solid rgba(255,107,138,0.30) !important;
}

    body.bg-sakura header .navbar .navbar-brand,
    body.bg-sakura header .navbar .nav-link {
        color: #ffb3c6 !important;
    }

        body.bg-sakura header .navbar .nav-link:hover {
            color: #fff !important;
        }

body.dark-mode.bg-sakura header .navbar {
    background-color: rgba(22,2,4,0.95) !important;
    border-bottom: 1px solid rgba(159,26,58,0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BRICKKANTER – common + rare bakgrunder
   Matchar temat men utan glow (legendary har redan glow ovan)
   ══════════════════════════════════════════════════════════════════════════ */

/* Common */
body.bg-skiffer #board .tile {
    border-color: #5a7f8f;
}

body.dark-mode.bg-skiffer #board .tile {
    border-color: #3a6070;
}

body.bg-salvia #board .tile {
    border-color: #5e8a5e;
}

body.dark-mode.bg-salvia #board .tile {
    border-color: #3a623a;
}

body.bg-sand #board .tile {
    border-color: #a08060;
}

body.dark-mode.bg-sand #board .tile {
    border-color: #5a4530;
}

body.bg-ros #board .tile {
    border-color: #b07070;
}

body.dark-mode.bg-ros #board .tile {
    border-color: #602e2e;
}

/* Rare */
body.bg-hav #board .tile {
    border-color: #4a9eff;
}

body.dark-mode.bg-hav #board .tile {
    border-color: #1a5fa0;
}

body.bg-solnedgang #board .tile {
    border-color: #f5a623;
}

body.dark-mode.bg-solnedgang #board .tile {
    border-color: #b06a00;
}

body.bg-norrsken #board .tile {
    border-color: #00c896;
}

body.dark-mode.bg-norrsken #board .tile {
    border-color: #006647;
}

body.bg-godis #board .tile {
    border-color: #c77ddf;
}

body.dark-mode.bg-godis #board .tile {
    border-color: #6a2a8a;
}

/* ══════════════════════════════════════════════════════════════════════════
   BRICKKANTER – kontrasterade mot bakgrunden
   Ljus bakgrund → mörk kant,  Mörk bakgrund → ljus kant
   Dessa regler skriver över de tidigare border-color-reglerna ovan.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Common – ljusläge (ljusa bakgrunder → mörka kanter) ───────────────── */
body.bg-skiffer #board .tile {
    border-color: #2a4a56;
}

body.bg-salvia #board .tile {
    border-color: #2a4a2a;
}

body.bg-sand #board .tile {
    border-color: #6b4a28;
}

body.bg-ros #board .tile {
    border-color: #6b2a2a;
}

/* ── Common – mörkläge (mörka bakgrunder → ljusa kanter) ───────────────── */
body.dark-mode.bg-skiffer #board .tile {
    border-color: #9abfcc;
}

body.dark-mode.bg-salvia #board .tile {
    border-color: #8ab88a;
}

body.dark-mode.bg-sand #board .tile {
    border-color: #c4a070;
}

body.dark-mode.bg-ros #board .tile {
    border-color: #c47070;
}

/* ── Rare – ljusläge (gradienter är mörka→medium → ljusa kanter) ────────── */
body.bg-hav #board .tile {
    border-color: #a8d4ff;
}

body.bg-solnedgang #board .tile {
    border-color: #ffe0b0;
}

body.bg-norrsken #board .tile {
    border-color: #80f0cc;
}

body.bg-godis #board .tile {
    border-color: #8b3aaa;
}

/* ── Rare – mörkläge (mycket mörka bakgrunder → ljusa kanter) ──────────── */
body.dark-mode.bg-hav #board .tile {
    border-color: #7ab8f5;
}

body.dark-mode.bg-solnedgang #board .tile {
    border-color: #f0a060;
}

body.dark-mode.bg-norrsken #board .tile {
    border-color: #40c890;
}

body.dark-mode.bg-godis #board .tile {
    border-color: #e0a0e0;
}

/* ── Legendary – ljusläge (mycket mörka bakgrunder → ljusa kanter + glow) ─ */
body.bg-blomster #board .tile {
    border-color: #c084fc;
    box-shadow: 0 0 6px #c084fc40;
    color: #e0aaff;
}

body.bg-natthimmel #board .tile {
    border-color: #f5e080;
    box-shadow: 0 0 6px #f5c84240;
    color: #f5c842;
}

body.bg-diamanter #board .tile {
    border-color: #c4a0ff;
    box-shadow: 0 0 6px #7c3aed40;
    color: #d8b4fe;
}

body.bg-sakura #board .tile {
    border-color: #ff9ab3;
    box-shadow: 0 0 6px #ff6b8a40;
    color: #ffb3c6;
}

/* ── Legendary – mörkläge ───────────────────────────────────────────────── */
body.dark-mode.bg-blomster #board .tile {
    border-color: #e0aaff;
    box-shadow: 0 0 8px #7c3aed50;
    color: #e0aaff;
}

body.dark-mode.bg-natthimmel #board .tile {
    border-color: #f5c842;
    box-shadow: 0 0 8px #c8a03050;
    color: #f5c842;
}

body.dark-mode.bg-diamanter #board .tile {
    border-color: #a78bfa;
    box-shadow: 0 0 8px #6d28d950;
    color: #a78bfa;
}

body.dark-mode.bg-sakura #board .tile {
    border-color: #ffb3c6;
    box-shadow: 0 0 8px #9f1a3a50;
    color: #ffb3c6;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILSIDA – kortbehållare
   Temat appliceras på .profil-card istället för <body> så att
   besökarens egna tema inte krockar med profilens tema.
   ══════════════════════════════════════════════════════════════════════════ */

.profil-card {
    border-radius: 14px;
    overflow: hidden;
    padding: 20px;
    min-width: 260px;
    transition: background 0.3s, color 0.3s;
    /* Standard: följer body (ljus/mörkt läge) */
}

    /* ── Common bakgrunder på profilkortet ──────────────────────────────────── */
    .profil-card.bg-skiffer {
        background: #8fabb8 !important;
        color: #1a2e36 !important;
    }

    .profil-card.bg-salvia {
        background: #91b091 !important;
        color: #1a2e1a !important;
    }

    .profil-card.bg-sand {
        background: #d4bfa0 !important;
        color: #3a2a14 !important;
    }

    .profil-card.bg-ros {
        background: #d4a0a0 !important;
        color: #3a1414 !important;
    }

    /* ── Rare bakgrunder på profilkortet ────────────────────────────────────── */
    .profil-card.bg-hav {
        background: linear-gradient(160deg,#1e3a6e,#4a9eff) !important;
        color: #a8d4ff !important;
    }

    .profil-card.bg-solnedgang {
        background: linear-gradient(160deg,#c84b11,#f5a623) !important;
        color: #fff5e0 !important;
    }

    .profil-card.bg-norrsken {
        background: linear-gradient(160deg,#0b3d2e,#00c896) !important;
        color: #80f0cc !important;
    }

    .profil-card.bg-godis {
        background: linear-gradient(160deg,#f7a8d3,#c77ddf) !important;
        color: #3a0050 !important;
    }

    /* ── Legendary bakgrunder på profilkortet ───────────────────────────────── */
    .profil-card.bg-blomster {
        background-color: #1a0a2e !important;
        background-image: radial-gradient(ellipse at 15% 50%,#6b21a870,transparent 55%), radial-gradient(ellipse at 85% 20%,#ec489970,transparent 55%), radial-gradient(ellipse at 50% 85%,#8b5cf670,transparent 55%) !important;
        color: #e0aaff !important;
    }

    .profil-card.bg-natthimmel {
        background-color: #0d0d1a !important;
        background-image: radial-gradient(circle at 20% 20%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 65% 15%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 80% 40%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 35% 60%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 70% 75%,#ffffffcc 1px,transparent 1px) !important;
        color: #f5c842 !important;
    }

    .profil-card.bg-diamanter {
        background-color: #1a0040 !important;
        background-image: repeating-linear-gradient(45deg,#7c3aed30 0px,#7c3aed30 2px,transparent 2px,transparent 20px), repeating-linear-gradient(-45deg,#7c3aed18 0px,#7c3aed18 2px,transparent 2px,transparent 20px) !important;
        color: #d8b4fe !important;
    }

    .profil-card.bg-sakura {
        background-color: #2d0a0a !important;
        background-image: radial-gradient(ellipse at 30% 30%,#9f1a3a55,transparent 55%), radial-gradient(ellipse at 70% 70%,#7a0a2a44,transparent 55%) !important;
        color: #ffb3c6 !important;
    }

    /* ── Text inuti kortet ärver kortets färg ───────────────────────────────── */
    .profil-card .stats_div_profile,
    .profil-card .right_info,
    .profil-card b {
        color: inherit !important;
    }

    /* ── Profilbild – behåll ram men anpassa färgen ─────────────────────────── */
    .profil-card .profil_bild {
        border-color: currentColor !important;
        opacity: 0.95;
    }

/* ── Mörkläge utan tema – standardkortet ───────────────────────────────── */
body.dark-mode .profil-card:not([class*="bg-"]) {
    background: #2a2a2a !important;
    color: #eee !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILKORT – synlighet i ljusläge utan tema
   ══════════════════════════════════════════════════════════════════════════ */

/* Standard ljusläge: vit kort med skugga och ram så det syns mot sidan */
.profil-card {
    background: #ffffff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    color: #222;
}

/* Standard mörkläge utan tema */
body.dark-mode .profil-card {
    background: #2a2a2a !important;
    border: 1px solid #444 !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
    color: #eee !important;
}

/* Themed cards get their own border instead */
.profil-card[class*="bg-"] {
    border: none !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILKORT – aktiva fontar
   Appliceras på all text inuti kortet (inte bara board tiles)
   ══════════════════════════════════════════════════════════════════════════ */

.profil-card.font-mono * {
    font-family: 'Courier New', monospace !important;
}

.profil-card.font-serif * {
    font-family: Georgia, serif !important;
}

.profil-card.font-bebas * {
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 2px;
}

.profil-card.font-impact * {
    font-family: Impact, Haettenschweiler, sans-serif !important;
    letter-spacing: 1px;
}

.profil-card.font-pacifico * {
    font-family: 'Pacifico', cursive !important;
}

/* Pixel – grön lysande text */
.profil-card.font-pixel * {
    font-family: 'Courier New', monospace !important;
    color: #39ff14 !important;
    text-shadow: 0 0 6px #39ff14, 0 0 12px #39ff1480 !important;
}

/* Eld – gradient på rubriker, vanlig text för läsbarhet */
.profil-card.font-eld .stats_div_profile,
.profil-card.font-eld b {
    font-family: Impact, Haettenschweiler, sans-serif !important;
    background: linear-gradient(180deg, #ff4500 0%, #ffb700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 3px #ff450060);
}

/* Guld – gradient på rubriker */
.profil-card.font-guld .stats_div_profile,
.profil-card.font-guld b {
    font-family: 'Bebas Neue', 'Georgia', serif !important;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff0a0 0%, #f5c842 50%, #c8860a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 4px #f5c84260);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILKORT – stats-rader
   ══════════════════════════════════════════════════════════════════════════ */

.profil-heading {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.profil-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.profil-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.profil-stat-label {
    font-weight: 600;
    white-space: nowrap;
}

.profil-stat-value {
    font-weight: 400;
    text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILKORT – slutgiltig override (skriver över alla tidigare regler)
   Alla teman får synlig kant + läsbar text oavsett ljus/mörkt läge.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bas utan tema ───────────────────────────────────────────────────────── */
.profil-card {
    background: #ffffff !important;
    border: 2px solid #d0d0d0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
    color: #222 !important;
    border-radius: 14px;
    padding: 20px;
}

body.dark-mode .profil-card {
    background: #2a2a2a !important;
    border: 2px solid #555 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.40) !important;
    color: #eee !important;
}

/* ── Common – ljusläge ───────────────────────────────────────────────────── */
.profil-card.bg-skiffer {
    background: #8fabb8 !important;
    color: #0e1f26 !important;
    border: 2px solid #2a4a56 !important;
}

.profil-card.bg-salvia {
    background: #91b091 !important;
    color: #0e1f0e !important;
    border: 2px solid #2a4a2a !important;
}

.profil-card.bg-sand {
    background: #d4bfa0 !important;
    color: #2a1a08 !important;
    border: 2px solid #6b4a28 !important;
}

.profil-card.bg-ros {
    background: #d4a0a0 !important;
    color: #2a0808 !important;
    border: 2px solid #6b2a2a !important;
}

/* ── Common – mörkläge ───────────────────────────────────────────────────── */
body.dark-mode .profil-card.bg-skiffer {
    background: #3a5a66 !important;
    color: #c8e0ea !important;
    border: 2px solid #9abfcc !important;
}

body.dark-mode .profil-card.bg-salvia {
    background: #3a5e3a !important;
    color: #b8d8b8 !important;
    border: 2px solid #8ab88a !important;
}

body.dark-mode .profil-card.bg-sand {
    background: #6b5540 !important;
    color: #ead8c0 !important;
    border: 2px solid #c4a070 !important;
}

body.dark-mode .profil-card.bg-ros {
    background: #6b3a3a !important;
    color: #eac0c0 !important;
    border: 2px solid #c47070 !important;
}

/* ── Rare – ljusläge ─────────────────────────────────────────────────────── */
.profil-card.bg-hav {
    background: linear-gradient(160deg,#1e3a6e,#4a9eff) !important;
    color: #e0f0ff !important;
    border: 2px solid #a8d4ff !important;
    box-shadow: 0 4px 20px rgba(74,158,255,0.30) !important;
}

.profil-card.bg-solnedgang {
    background: linear-gradient(160deg,#c84b11,#f5a623) !important;
    color: #fff5e0 !important;
    border: 2px solid #ffe0b0 !important;
    box-shadow: 0 4px 20px rgba(245,166,35,0.30) !important;
}

.profil-card.bg-norrsken {
    background: linear-gradient(160deg,#0b3d2e,#00c896) !important;
    color: #e0fff6 !important;
    border: 2px solid #80f0cc !important;
    box-shadow: 0 4px 20px rgba(0,200,150,0.25) !important;
}

.profil-card.bg-godis {
    background: linear-gradient(160deg,#f7a8d3,#c77ddf) !important;
    color: #1a0030 !important;
    border: 2px solid #8b3aaa !important;
    box-shadow: 0 4px 20px rgba(199,125,223,0.30) !important;
}

/* ── Rare – mörkläge ─────────────────────────────────────────────────────── */
body.dark-mode .profil-card.bg-hav {
    background: linear-gradient(160deg,#0c1d3a,#1a5fa0) !important;
    color: #a8d4ff !important;
    border: 2px solid #4a9eff !important;
}

body.dark-mode .profil-card.bg-solnedgang {
    background: linear-gradient(160deg,#7a2500,#b06a00) !important;
    color: #ffd0a0 !important;
    border: 2px solid #f5a623 !important;
}

body.dark-mode .profil-card.bg-norrsken {
    background: linear-gradient(160deg,#041e14,#006647) !important;
    color: #80f0cc !important;
    border: 2px solid #00c896 !important;
}

body.dark-mode .profil-card.bg-godis {
    background: linear-gradient(160deg,#8c3060,#6a2a8a) !important;
    color: #ffe0ff !important;
    border: 2px solid #c77ddf !important;
}

/* ── Legendary – ljusläge ────────────────────────────────────────────────── */
/* Semi-transparent overlay so text stands out against the dark backgrounds  */
.profil-card.bg-blomster {
    background-color: #1a0a2e !important;
    background-image: radial-gradient(ellipse at 15% 50%,#6b21a870,transparent 55%), radial-gradient(ellipse at 85% 20%,#ec489970,transparent 55%), radial-gradient(ellipse at 50% 85%,#8b5cf670,transparent 55%) !important;
    color: #f0d8ff !important;
    border: 2px solid #c084fc !important;
    box-shadow: 0 0 0 1px #8b5cf640, 0 4px 24px rgba(139,92,246,0.40) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.60);
}

.profil-card.bg-natthimmel {
    background-color: #0d0d1a !important;
    background-image: radial-gradient(circle at 20% 20%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 65% 15%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 80% 40%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 35% 60%,#ffffffcc 1px,transparent 1px), radial-gradient(circle at 70% 75%,#ffffffcc 1px,transparent 1px) !important;
    color: #fff5c0 !important;
    border: 2px solid #f5c842 !important;
    box-shadow: 0 0 0 1px #f5c84240, 0 4px 24px rgba(245,200,66,0.35) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.80);
}

.profil-card.bg-diamanter {
    background-color: #1a0040 !important;
    background-image: repeating-linear-gradient(45deg,#7c3aed30 0px,#7c3aed30 2px,transparent 2px,transparent 20px), repeating-linear-gradient(-45deg,#7c3aed18 0px,#7c3aed18 2px,transparent 2px,transparent 20px) !important;
    color: #ecdcff !important;
    border: 2px solid #a78bfa !important;
    box-shadow: 0 0 0 1px #7c3aed40, 0 4px 24px rgba(124,58,237,0.40) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.70);
}

.profil-card.bg-sakura {
    background-color: #2d0a0a !important;
    background-image: radial-gradient(ellipse at 30% 30%,#9f1a3a55,transparent 55%), radial-gradient(ellipse at 70% 70%,#7a0a2a44,transparent 55%) !important;
    color: #ffd8e4 !important;
    border: 2px solid #ff9ab3 !important;
    box-shadow: 0 0 0 1px #ff6b8a40, 0 4px 24px rgba(255,107,138,0.35) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.70);
}

/* ── Legendary – mörkläge ────────────────────────────────────────────────── */
body.dark-mode .profil-card.bg-blomster {
    background-color: #0e0519 !important;
    border: 2px solid #e0aaff !important;
    box-shadow: 0 0 0 1px #7c3aed50, 0 4px 24px rgba(124,58,237,0.50) !important;
    color: #f0d8ff !important;
}

body.dark-mode .profil-card.bg-natthimmel {
    background-color: #05050f !important;
    border: 2px solid #f5c842 !important;
    box-shadow: 0 0 0 1px #c8a03050, 0 4px 24px rgba(200,160,48,0.45) !important;
    color: #fff5c0 !important;
}

body.dark-mode .profil-card.bg-diamanter {
    background-color: #0d0020 !important;
    border: 2px solid #c4a0ff !important;
    box-shadow: 0 0 0 1px #6d28d950, 0 4px 24px rgba(109,40,217,0.50) !important;
    color: #ecdcff !important;
}

body.dark-mode .profil-card.bg-sakura {
    background-color: #1a0505 !important;
    border: 2px solid #ffb3c6 !important;
    box-shadow: 0 0 0 1px #9f1a3a50, 0 4px 24px rgba(159,26,58,0.45) !important;
    color: #ffd8e4 !important;
}

/* ── All text inside card inherits the card's color ─────────────────────── */
.profil-card.bg-blomster *,
.profil-card.bg-natthimmel *,
.profil-card.bg-diamanter *,
.profil-card.bg-sakura *,
.profil-card.bg-hav *,
.profil-card.bg-solnedgang *,
.profil-card.bg-norrsken *,
.profil-card.bg-godis *,
.profil-card.bg-skiffer *,
.profil-card.bg-salvia *,
.profil-card.bg-sand *,
.profil-card.bg-ros * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Except eld/guld font effects which handle their own color */
.profil-card.font-eld .profil-stat-label,
.profil-card.font-eld .profil-stat-value,
.profil-card.font-eld .profil-heading,
.profil-card.font-eld b {
    background: linear-gradient(180deg,#ff4500 0%,#ffb700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
}

.profil-card.font-guld .profil-stat-label,
.profil-card.font-guld .profil-stat-value,
.profil-card.font-guld .profil-heading,
.profil-card.font-guld b {
    background: linear-gradient(180deg,#fff0a0 0%,#f5c842 50%,#c8860a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
}

/* ══════════════════════════════════════════════════════════════════════════
   FONT REDESIGN – slutgiltig override
   • font-guld → Krom (silver/chrome metallisk)
   • Eld + Krom på profilkortet: solid glowfärg istället för gradient-clip
   • Pixel på ljusa bakgrunder: mörk text-shadow för läsbarhet
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Krom – förhandsgranskning i butiken ────────────────────────────────── */
.preview-font-gold {
    background: #1a1a1a !important;
    font-size: 2.4rem !important;
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 4px !important;
}

    .preview-font-gold span {
        background: linear-gradient(180deg, #ffffff 0%, #d0d0d0 25%, #888 55%, #c8c8c8 80%, #fff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)) !important;
    }

/* ── Krom – spelbrickor (ersätter gamla guld-regler) ────────────────────── */
body.font-guld #board .tile:not(.green):not(.yellow):not(.gray) {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 36px !important;
    letter-spacing: 3px !important;
    background: linear-gradient(180deg, #ffffff 0%, #d0d0d0 25%, #888 55%, #c8c8c8 80%, #fff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.45)) !important;
}

body.font-guld #board .tile.green,
body.font-guld #board .tile.yellow,
body.font-guld #board .tile.gray {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 36px !important;
    letter-spacing: 3px !important;
    color: #fff !important;
}

/* ── Pixel – ljusa bakgrunder: mörk shadow så grön text syns ───────────── */
body.bg-skiffer .profil-card.font-pixel *,
body.bg-salvia .profil-card.font-pixel *,
body.bg-sand .profil-card.font-pixel *,
body.bg-ros .profil-card.font-pixel * {
    color: #1a8a00 !important;
    text-shadow: 0 0 4px #39ff1460 !important;
}

/* ── Eld – profilkort: solid orange glow, inga gradients ────────────────── */
.profil-card.font-eld .profil-stat-label,
.profil-card.font-eld .profil-stat-value,
.profil-card.font-eld .profil-heading,
.profil-card.font-eld b {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    font-family: Impact, Haettenschweiler, sans-serif !important;
    color: #ff6b35 !important;
    text-shadow: 0 0 8px #ff450070, 0 1px 3px rgba(0,0,0,0.50) !important;
    filter: none !important;
}

/* On very light backgrounds, darken fire color slightly for readability */
.profil-card.bg-sand.font-eld .profil-stat-label,
.profil-card.bg-sand.font-eld .profil-stat-value,
.profil-card.bg-sand.font-eld .profil-heading,
.profil-card.bg-ros.font-eld .profil-stat-label,
.profil-card.bg-ros.font-eld .profil-stat-value,
.profil-card.bg-ros.font-eld .profil-heading,
.profil-card.bg-godis.font-eld .profil-stat-label,
.profil-card.bg-godis.font-eld .profil-stat-value,
.profil-card.bg-godis.font-eld .profil-heading {
    color: #c03800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.30) !important;
}

/* ── Krom – profilkort: solid silver glow, inga gradients ───────────────── */
.profil-card.font-guld .profil-stat-label,
.profil-card.font-guld .profil-stat-value,
.profil-card.font-guld .profil-heading,
.profil-card.font-guld b {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    font-family: 'Bebas Neue', sans-serif !important;
    letter-spacing: 2px !important;
    color: #d8d8d8 !important;
    text-shadow: 0 0 8px rgba(255,255,255,0.60), 0 1px 3px rgba(0,0,0,0.50) !important;
    filter: none !important;
}

/* On dark legendary backgrounds, brighten chrome to near-white */
.profil-card.bg-blomster.font-guld .profil-stat-label,
.profil-card.bg-blomster.font-guld .profil-stat-value,
.profil-card.bg-blomster.font-guld .profil-heading,
.profil-card.bg-natthimmel.font-guld .profil-stat-label,
.profil-card.bg-natthimmel.font-guld .profil-stat-value,
.profil-card.bg-natthimmel.font-guld .profil-heading,
.profil-card.bg-diamanter.font-guld .profil-stat-label,
.profil-card.bg-diamanter.font-guld .profil-stat-value,
.profil-card.bg-diamanter.font-guld .profil-heading,
.profil-card.bg-sakura.font-guld .profil-stat-label,
.profil-card.bg-sakura.font-guld .profil-stat-value,
.profil-card.bg-sakura.font-guld .profil-heading {
    color: #f0f0f0 !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.80), 0 1px 4px rgba(0,0,0,0.60) !important;
}

/* On light common backgrounds, darken chrome so it contrasts */
.profil-card.bg-skiffer.font-guld .profil-stat-label,
.profil-card.bg-skiffer.font-guld .profil-stat-value,
.profil-card.bg-skiffer.font-guld .profil-heading,
.profil-card.bg-salvia.font-guld .profil-stat-label,
.profil-card.bg-salvia.font-guld .profil-stat-value,
.profil-card.bg-salvia.font-guld .profil-heading,
.profil-card.bg-sand.font-guld .profil-stat-label,
.profil-card.bg-sand.font-guld .profil-stat-value,
.profil-card.bg-sand.font-guld .profil-heading,
.profil-card.bg-ros.font-guld .profil-stat-label,
.profil-card.bg-ros.font-guld .profil-stat-value,
.profil-card.bg-ros.font-guld .profil-heading {
    color: #444 !important;
    text-shadow: 0 0 4px rgba(255,255,255,0.40), 0 1px 2px rgba(0,0,0,0.20) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FONT SYSTEM – komplett omdesign
   Alla färgeffekter borttagna. Progressivt häftigare typsnitt per raritet.
   Ny @import för extra Google Fonts.
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Playfair+Display:wght@700&family=Righteous&display=swap');

/* ── Förhandsvisningar – nya versioner ──────────────────────────────────── */

/* Common: enkla, rena */
.preview-font-standard {
    background: #f0f0f0 !important;
    color: #222 !important;
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: 2rem !important;
}

.preview-font-mono {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 2rem !important;
}

.preview-font-serif {
    background: #faf6f0 !important;
    color: #3a2e1e !important;
    font-family: Georgia, serif !important;
    font-size: 2rem !important;
}

/* Rare: mer karaktär */
.preview-font-bebas {
    background: #111 !important;
    color: #fff !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 3.2rem !important;
    letter-spacing: 5px !important;
}

.preview-font-impact {
    background: #1a1a1a !important;
    color: #e8e8e8 !important;
    font-family: Impact, Haettenschweiler, sans-serif !important;
    font-size: 2.8rem !important;
    letter-spacing: 3px !important;
}

/* Eld-slot → Righteous */
.preview-font-fire {
    background: #1c1c2e !important;
    color: #e8e8ff !important;
    font-family: 'Righteous', sans-serif !important;
    font-size: 2.4rem !important;
    letter-spacing: 2px !important;
}

    .preview-font-fire span {
        background: none !important;
        -webkit-text-fill-color: unset !important;
        color: inherit !important;
        font-family: inherit !important;
    }

/* Legendary: genuint distinkta typsnitt */

/* Pacifico (uppflyttad till legendary) */
.preview-font-pacifico {
    background: #fff8f0 !important;
    color: #2a2a2a !important;
    font-family: 'Pacifico', cursive !important;
    font-size: 1.9rem !important;
    letter-spacing: 0 !important;
}

/* Pixel-slot → Press Start 2P */
.preview-font-pixel {
    background: #0a0a0a !important;
    color: #f0f0f0 !important;
    font-family: 'Press Start 2P', monospace !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
}

/* Guld-slot → Playfair Display */
.preview-font-gold {
    background: #faf8f5 !important;
    color: #1a1a1a !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    font-style: italic !important;
}

    .preview-font-gold span {
        background: none !important;
        -webkit-text-fill-color: unset !important;
        color: inherit !important;
    }

/* ── Spelbrickor – alla färgeffekter borttagna ───────────────────────────── */

/* Righteous (font-eld) */
body.font-eld #board .tile,
body.font-eld #board .tile:not(.green):not(.yellow):not(.gray) {
    font-family: 'Righteous', sans-serif !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
    filter: none !important;
    font-size: 32px !important;
    letter-spacing: 1px !important;
}

    body.font-eld #board .tile.green,
    body.font-eld #board .tile.yellow,
    body.font-eld #board .tile.gray {
        font-family: 'Righteous', sans-serif !important;
        background: unset !important;
        -webkit-text-fill-color: #fff !important;
        color: #fff !important;
        filter: none !important;
    }

/* Press Start 2P (font-pixel) */
body.font-pixel #board .tile {
    font-family: 'Press Start 2P', monospace !important;
    color: inherit !important;
    text-shadow: none !important;
    font-size: 16px !important;
}

    body.font-pixel #board .tile.green,
    body.font-pixel #board .tile.yellow,
    body.font-pixel #board .tile.gray {
        color: #fff !important;
        text-shadow: none !important;
    }

/* Playfair Display (font-guld) */
body.font-guld #board .tile,
body.font-guld #board .tile:not(.green):not(.yellow):not(.gray) {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 30px !important;
    letter-spacing: 1px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
    filter: none !important;
}

    body.font-guld #board .tile.green,
    body.font-guld #board .tile.yellow,
    body.font-guld #board .tile.gray {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-weight: 700 !important;
        font-style: italic !important;
        background: none !important;
        -webkit-text-fill-color: #fff !important;
        color: #fff !important;
        filter: none !important;
    }

/* ── Profilkort – alla färgeffekter borttagna ────────────────────────────── */

.profil-card.font-eld .profil-stat-label,
.profil-card.font-eld .profil-stat-value,
.profil-card.font-eld .profil-heading,
.profil-card.font-eld b,
.profil-card.font-eld * {
    font-family: 'Righteous', sans-serif !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
    text-shadow: none !important;
    filter: none !important;
}

.profil-card.font-pixel * {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 0.7rem !important;
    color: inherit !important;
    text-shadow: none !important;
}

.profil-card.font-guld .profil-stat-label,
.profil-card.font-guld .profil-stat-value,
.profil-card.font-guld .profil-heading,
.profil-card.font-guld b,
.profil-card.font-guld * {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
    text-shadow: none !important;
    filter: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILWIDGET – visas i övre vänstra hörnet av spelsidan
   ══════════════════════════════════════════════════════════════════════════ */

.profil-widget {
    position: fixed;
    top: 72px;
    left: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Inloggad: klickbar länk med bild + namn ────────────────────────────── */
.profil-widget-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 40px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    text-decoration: none;
    color: #222;
    font-weight: 600;
    font-size: 0.88rem;
    max-width: 180px;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

    .profil-widget-link:hover {
        background: rgba(255,255,255,0.98);
        box-shadow: 0 4px 14px rgba(0,0,0,0.16);
        transform: translateY(-1px);
        color: #222;
        text-decoration: none;
    }

.profil-widget-pfp {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,0.10);
    flex-shrink: 0;
}

.profil-widget-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Ej inloggad: två knappar ───────────────────────────────────────────── */
.profil-widget-btn {
    display: block;
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .profil-widget-btn:hover {
        transform: translateY(-1px);
        text-decoration: none;
    }

    .profil-widget-btn.primary {
        background: #6aaa64;
        color: #fff;
        border: 1px solid #528d50;
    }

        .profil-widget-btn.primary:hover {
            background: #528d50;
            color: #fff;
        }

    .profil-widget-btn.secondary {
        background: rgba(255,255,255,0.85);
        color: #333;
        border: 1px solid rgba(0,0,0,0.12);
    }

        .profil-widget-btn.secondary:hover {
            background: rgba(255,255,255,0.98);
            color: #222;
        }

/* ── Mörkläge ───────────────────────────────────────────────────────────── */
body.dark-mode .profil-widget-link {
    background: rgba(45,45,45,0.90);
    border-color: rgba(255,255,255,0.10);
    color: #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

    body.dark-mode .profil-widget-link:hover {
        background: rgba(60,60,60,0.98);
        color: #eee;
    }

body.dark-mode .profil-widget-pfp {
    border-color: rgba(255,255,255,0.15);
}

body.dark-mode .profil-widget-btn.secondary {
    background: rgba(45,45,45,0.90);
    color: #ddd;
    border-color: rgba(255,255,255,0.12);
}

    body.dark-mode .profil-widget-btn.secondary:hover {
        background: rgba(60,60,60,0.98);
        color: #fff;
    }

/* ── Temaanpassning – bakgrunden påverkar widgeten också ────────────────── */

/* Mörka bakgrunder (rare + legendary): ljus widget */
body.bg-hav .profil-widget-link,
body.bg-solnedgang .profil-widget-link,
body.bg-norrsken .profil-widget-link,
body.bg-godis .profil-widget-link,
body.bg-blomster .profil-widget-link,
body.bg-natthimmel .profil-widget-link,
body.bg-diamanter .profil-widget-link,
body.bg-sakura .profil-widget-link {
    background: rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}

    body.bg-hav .profil-widget-link:hover,
    body.bg-solnedgang .profil-widget-link:hover,
    body.bg-norrsken .profil-widget-link:hover,
    body.bg-godis .profil-widget-link:hover,
    body.bg-blomster .profil-widget-link:hover,
    body.bg-natthimmel .profil-widget-link:hover,
    body.bg-diamanter .profil-widget-link:hover,
    body.bg-sakura .profil-widget-link:hover {
        background: rgba(0,0,0,0.55);
        color: #fff;
    }

body.bg-hav .profil-widget-btn.secondary,
body.bg-solnedgang .profil-widget-btn.secondary,
body.bg-norrsken .profil-widget-btn.secondary,
body.bg-godis .profil-widget-btn.secondary,
body.bg-blomster .profil-widget-btn.secondary,
body.bg-natthimmel .profil-widget-btn.secondary,
body.bg-diamanter .profil-widget-btn.secondary,
body.bg-sakura .profil-widget-btn.secondary {
    background: rgba(0,0,0,0.30);
    color: #eee;
    border-color: rgba(255,255,255,0.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   INLOGGNINGSPOPUP – blockerar spel efter avslutad rond för gäster
   ══════════════════════════════════════════════════════════════════════════ */

.login-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.login-popup-modal {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    animation: popupSlideIn 0.3s ease;
}

@keyframes popupSlideIn {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-popup-icon {
    font-size: 2.8rem;
    margin-bottom: 12px;
    line-height: 1;
}

.login-popup-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #111;
}

.login-popup-desc {
    font-size: 0.9rem;
    color: #555;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

.login-popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-popup-btn {
    display: block;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

    .login-popup-btn:hover {
        transform: translateY(-1px);
        text-decoration: none;
    }

    .login-popup-btn.primary {
        background: #6aaa64;
        color: #fff;
    }

        .login-popup-btn.primary:hover {
            background: #528d50;
            color: #fff;
        }

    .login-popup-btn.secondary {
        background: #f3f3f3;
        color: #222;
        border: 1px solid #ddd;
    }

        .login-popup-btn.secondary:hover {
            background: #e8e8e8;
            color: #222;
        }

/* Mörkläge */
body.dark-mode .login-popup-modal {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.60);
}

body.dark-mode .login-popup-title {
    color: #f0f0f0;
}

body.dark-mode .login-popup-desc {
    color: #aaa;
}

body.dark-mode .login-popup-btn.secondary {
    background: #2e2e2e;
    color: #ddd;
    border-color: #444;
}

    body.dark-mode .login-popup-btn.secondary:hover {
        background: #3a3a3a;
        color: #fff;
    }

/* Knapparna "Logga in" + "Registrera" i profilwidgeten – sida vid sida */
.profil-widget-auth-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

    .profil-widget-auth-row .profil-widget-btn {
        white-space: nowrap;
    }

/* ══════════════════════════════════════════════════════════════════════════
   FONT TILE FIX – slutgiltig override för alla fontar
   Mönster: font-egenskaper på ALLA tiles, ingen bakgrund/färgmanipulation
   på bas-regeln. Färgade tiles (.green/.yellow/.gray) får explicit vit text.
   ══════════════════════════════════════════════════════════════════════════ */

/* Standard */
body.font-mono #board .tile {
    font-family: 'Courier New', monospace !important;
}

body.font-serif #board .tile {
    font-family: Georgia, serif !important;
}

body.font-bebas #board .tile {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 36px !important;
    letter-spacing: 2px !important;
}

body.font-impact #board .tile {
    font-family: Impact, Haettenschweiler, sans-serif !important;
}

body.font-pacifico #board .tile {
    font-family: 'Pacifico', cursive !important;
    font-size: 24px !important;
}

/* Righteous (font-eld) – font only, inga bakgrundsregler */
body.font-eld #board .tile {
    font-family: 'Righteous', sans-serif !important;
    font-size: 30px !important;
    letter-spacing: 1px !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    filter: none !important;
}

/* Press Start 2P (font-pixel) – font only */
body.font-pixel #board .tile {
    font-family: 'Press Start 2P', monospace !important;
    font-size: 14px !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Playfair Display (font-guld) – font only */
body.font-guld #board .tile {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 28px !important;
    letter-spacing: 1px !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    filter: none !important;
}

    /* Alla färgade tiles för alla fontar: vit text, rätt bakgrund */
    body.font-mono #board .tile.green,
    body.font-mono #board .tile.yellow,
    body.font-mono #board .tile.gray,
    body.font-serif #board .tile.green,
    body.font-serif #board .tile.yellow,
    body.font-serif #board .tile.gray,
    body.font-bebas #board .tile.green,
    body.font-bebas #board .tile.yellow,
    body.font-bebas #board .tile.gray,
    body.font-impact #board .tile.green,
    body.font-impact #board .tile.yellow,
    body.font-impact #board .tile.gray,
    body.font-pacifico #board .tile.green,
    body.font-pacifico #board .tile.yellow,
    body.font-pacifico #board .tile.gray,
    body.font-eld #board .tile.green,
    body.font-eld #board .tile.yellow,
    body.font-eld #board .tile.gray,
    body.font-pixel #board .tile.green,
    body.font-pixel #board .tile.yellow,
    body.font-pixel #board .tile.gray,
    body.font-guld #board .tile.green,
    body.font-guld #board .tile.yellow,
    body.font-guld #board .tile.gray {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background-image: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        text-shadow: none !important;
        filter: none !important;
    }

/* Gröna tiles behåller #6aaa64, gula #c9b458, grå #787c7e –
   dessa sätts av game.css och ska inte åsidosättas här */

/* ══════════════════════════════════════════════════════════════════════════
   FONT TILE FIX v3 – DEFINITIV
   Problem: tidigare regler sätter background:unset/none !important på
   ALLA tiles inkl. .green/.yellow/.gray, vilket raderar spelfärgerna.
   Lösning: explicit återställ bakgrundsfärg + vit text på färgade tiles
   med !important för varje font. Bas-regeln sätter ENBART typsnitt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bas: ENBART typsnitt, inga bakgrunds- eller färgregler ─────────────── */
body.font-mono #board .tile {
    font-family: 'Courier New',monospace !important;
}

body.font-serif #board .tile {
    font-family: Georgia,serif !important;
}

body.font-bebas #board .tile {
    font-family: 'Bebas Neue',sans-serif !important;
    font-size: 36px !important;
    letter-spacing: 2px !important;
}

body.font-impact #board .tile {
    font-family: Impact,Haettenschweiler,sans-serif !important;
}

body.font-pacifico #board .tile {
    font-family: 'Pacifico',cursive !important;
    font-size: 24px !important;
}

body.font-eld #board .tile {
    font-family: 'Righteous',sans-serif !important;
    font-size: 30px !important;
}

body.font-pixel #board .tile {
    font-family: 'Press Start 2P',monospace !important;
    font-size: 13px !important;
}

body.font-guld #board .tile {
    font-family: 'Playfair Display',Georgia,serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    font-size: 28px !important;
}

    /* ── Färgade tiles: explicit bakgrundsfärg + vit text för ALLA fontar ───── */
    body.font-mono #board .tile.green,
    body.font-serif #board .tile.green,
    body.font-bebas #board .tile.green,
    body.font-impact #board .tile.green,
    body.font-pacifico #board .tile.green,
    body.font-eld #board .tile.green,
    body.font-pixel #board .tile.green,
    body.font-guld #board .tile.green {
        background-color: #6aaa64 !important;
        background-image: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow: none !important;
        filter: none !important;
    }

    body.font-mono #board .tile.yellow,
    body.font-serif #board .tile.yellow,
    body.font-bebas #board .tile.yellow,
    body.font-impact #board .tile.yellow,
    body.font-pacifico #board .tile.yellow,
    body.font-eld #board .tile.yellow,
    body.font-pixel #board .tile.yellow,
    body.font-guld #board .tile.yellow {
        background-color: #c9b458 !important;
        background-image: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow: none !important;
        filter: none !important;
    }

    body.font-mono #board .tile.gray,
    body.font-serif #board .tile.gray,
    body.font-bebas #board .tile.gray,
    body.font-impact #board .tile.gray,
    body.font-pacifico #board .tile.gray,
    body.font-eld #board .tile.gray,
    body.font-pixel #board .tile.gray,
    body.font-guld #board .tile.gray {
        background-color: #787c7e !important;
        background-image: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        text-shadow: none !important;
        filter: none !important;
    }

/* ══════════════════════════════════════════════════════════════════════════
   CINZEL – ersätter Press Start 2P (font-pixel)
   Roman-inspirerad versalstil, ren och elegant, fyller rutorna bra.
   ══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

/* Förhandsgranskning i butiken */
.preview-font-pixel {
    background: #0e0e1a !important;
    color: #e8e0ff !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    letter-spacing: 4px !important;
}

/* Spelbrickor */
body.font-pixel #board .tile {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 30px !important;
    letter-spacing: 2px !important;
    background: unset !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    text-shadow: none !important;
    filter: none !important;
}

    /* Färgade brickor – explicit bakgrund + vit text */
    body.font-pixel #board .tile.green {
        background-color: #6aaa64 !important;
        background-image: none !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.font-pixel #board .tile.yellow {
        background-color: #c9b458 !important;
        background-image: none !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

    body.font-pixel #board .tile.gray {
        background-color: #787c7e !important;
        background-image: none !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
    }

/* Profilkort */
.profil-card.font-pixel * {
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    color: inherit !important;
    text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFILWIDGET – expanderbar med utloggningsknapp vid hover
   ══════════════════════════════════════════════════════════════════════════ */

/* Behållaren som expanderar åt höger */
.profil-widget-expandable {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    border-radius: 40px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}

    .profil-widget-expandable:hover {
        box-shadow: 0 4px 18px rgba(0,0,0,0.16);
    }

    /* Profilänken inuti behållaren – bakgrund/border hanteras av behållaren */
    .profil-widget-expandable .profil-widget-link {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 7px 12px 7px 7px;
        flex-shrink: 0;
        transition: background 0.2s;
    }

        .profil-widget-expandable .profil-widget-link:hover {
            background: rgba(0,0,0,0.05) !important;
            transform: none;
        }

/* Expanderbart område – dolt tills hover */
.profil-widget-expand-area {
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.profil-widget-expandable:hover .profil-widget-expand-area {
    max-width: 130px;
    padding: 0 8px 0 4px;
}

/* Avdelare */
.profil-widget-expand-area::before {
    content: '';
    display: block;
    width: 1px;
    height: 22px;
    background: rgba(0,0,0,0.12);
    margin-right: 8px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

.profil-widget-expandable:hover .profil-widget-expand-area::before {
    opacity: 1;
}

/* Utloggningsknappen */
.profil-widget-logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(220, 60, 60, 0.12);
    color: #c0392b;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.08s, background 0.2s ease;
    flex-shrink: 0;
}

.profil-widget-expandable:hover .profil-widget-logout-btn {
    opacity: 1;
}

.profil-widget-logout-btn:hover {
    background: rgba(220, 60, 60, 0.22) !important;
    color: #a93226 !important;
    text-decoration: none !important;
}

/* ── Mörkläge ───────────────────────────────────────────────────────────── */
body.dark-mode .profil-widget-expandable {
    background: rgba(40,40,40,0.92);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

    body.dark-mode .profil-widget-expandable:hover {
        box-shadow: 0 4px 18px rgba(0,0,0,0.50);
    }

    body.dark-mode .profil-widget-expandable .profil-widget-link {
        color: #eee !important;
    }

        body.dark-mode .profil-widget-expandable .profil-widget-link:hover {
            background: rgba(255,255,255,0.06) !important;
        }

body.dark-mode .profil-widget-expand-area::before {
    background: rgba(255,255,255,0.15);
}

body.dark-mode .profil-widget-logout-btn {
    background: rgba(220, 80, 80, 0.18);
    color: #f08080;
}

    body.dark-mode .profil-widget-logout-btn:hover {
        background: rgba(220, 80, 80, 0.30) !important;
        color: #ffaaaa !important;
    }

/* ── Mörka bakgrundsteman ───────────────────────────────────────────────── */
body.bg-hav .profil-widget-expandable,
body.bg-solnedgang .profil-widget-expandable,
body.bg-norrsken .profil-widget-expandable,
body.bg-godis .profil-widget-expandable,
body.bg-blomster .profil-widget-expandable,
body.bg-natthimmel .profil-widget-expandable,
body.bg-diamanter .profil-widget-expandable,
body.bg-sakura .profil-widget-expandable {
    background: rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.18);
}

    body.bg-hav .profil-widget-expandable .profil-widget-link,
    body.bg-solnedgang .profil-widget-expandable .profil-widget-link,
    body.bg-norrsken .profil-widget-expandable .profil-widget-link,
    body.bg-godis .profil-widget-expandable .profil-widget-link,
    body.bg-blomster .profil-widget-expandable .profil-widget-link,
    body.bg-natthimmel .profil-widget-expandable .profil-widget-link,
    body.bg-diamanter .profil-widget-expandable .profil-widget-link,
    body.bg-sakura .profil-widget-expandable .profil-widget-link {
        color: #fff !important;
    }

body.bg-hav .profil-widget-expand-area::before,
body.bg-solnedgang .profil-widget-expand-area::before,
body.bg-norrsken .profil-widget-expand-area::before,
body.bg-godis .profil-widget-expand-area::before,
body.bg-blomster .profil-widget-expand-area::before,
body.bg-natthimmel .profil-widget-expand-area::before,
body.bg-diamanter .profil-widget-expand-area::before,
body.bg-sakura .profil-widget-expand-area::before {
    background: rgba(255,255,255,0.25);
}

body.bg-hav .profil-widget-logout-btn,
body.bg-solnedgang .profil-widget-logout-btn,
body.bg-norrsken .profil-widget-logout-btn,
body.bg-godis .profil-widget-logout-btn,
body.bg-blomster .profil-widget-logout-btn,
body.bg-natthimmel .profil-widget-logout-btn,
body.bg-diamanter .profil-widget-logout-btn,
body.bg-sakura .profil-widget-logout-btn {
    background: rgba(255,100,100,0.20);
    color: #ffaaaa;
}

    body.bg-hav .profil-widget-logout-btn:hover,
    body.bg-solnedgang .profil-widget-logout-btn:hover,
    body.bg-norrsken .profil-widget-logout-btn:hover,
    body.bg-godis .profil-widget-logout-btn:hover,
    body.bg-blomster .profil-widget-logout-btn:hover,
    body.bg-natthimmel .profil-widget-logout-btn:hover,
    body.bg-diamanter .profil-widget-logout-btn:hover,
    body.bg-sakura .profil-widget-logout-btn:hover {
        background: rgba(255,100,100,0.35) !important;
        color: #ffcccc !important;
    }