/* Emojidoku · stärkere Kontraste (18.10.2026)
   Wird NACH game-ui.css geladen und gilt nur für Emojidoku (html.gq-emoji). */
html.gq-emoji{
  --k-cell:#ffffff;--k-fixed:#e1e8ef;--k-thin:#b2c2cb;--k-box:#17212b;
  --k-peer:#9bd6e6;--k-same:#c9bdff;--k-same-ring:#5b45cf;
  --k-sel:#ffe27a;--k-sel-ring:#0b6b7d;
  --k-wrong:#ffc2cf;--k-wrong-ring:#c0284f;
  --k-btn:#075985;--k-btn-text:#ffffff;
}
html[data-theme="dark"].gq-emoji{
  --k-cell:#1b2a35;--k-fixed:#2a4050;--k-thin:#3c5563;--k-box:#e3eef3;
  --k-peer:#2f6276;--k-same:#4a3d8f;--k-same-ring:#b9abff;
  --k-sel:#ffe27a;--k-sel-ring:#62d8e5;
  --k-wrong:#6b1f33;--k-wrong-ring:#ff7a96;
  --k-btn:#62d8e5;--k-btn-text:#062a33;
}

/* Spielfeld: Linien und 3×3-Blöcke in beiden Modi klar sichtbar */
html.gq-emoji body .board{background:var(--k-cell)!important;border-color:var(--k-box)!important}
html.gq-emoji body .board .cell{background:var(--k-cell)!important;border-color:var(--k-thin)!important}
html.gq-emoji body .board .cell[style*="border-right: 4px"]{border-right-color:var(--k-box)!important}
html.gq-emoji body .board .cell[style*="border-bottom: 4px"]{border-bottom-color:var(--k-box)!important}
html.gq-emoji body .board .cell.fixed{background:var(--k-fixed)!important}
html.gq-emoji body .board .cell.peer{background:var(--k-peer)!important}
html.gq-emoji body .board .cell.same{background:var(--k-same)!important;box-shadow:inset 0 0 0 3px var(--k-same-ring)!important}
html.gq-emoji body .board .cell.selected{background:var(--k-sel)!important;outline:4px solid var(--k-sel-ring)!important;outline-offset:-4px;box-shadow:none!important}
html.gq-emoji body .board .cell.wrong{background:var(--k-wrong)!important;box-shadow:inset 0 0 0 4px var(--k-wrong-ring)!important}

/* Knöpfe oben und an der Seite: Schrift im Dunkelmodus dunkel auf hell */
html.gq-emoji body :is(.topbar button,.sideBtns button){color:var(--k-btn-text)!important;background:var(--k-btn)!important}
html.gq-emoji body .emojiBtn.used{opacity:.45}

/* Kopfzeile: alle drei Knöpfe in EINER Zeile, Hell/Dunkel als kleines Symbol */
html.gq-emoji{--k-n-bg:#ffffff;--k-n-text:#17212b;--k-n-line:#b2c2cb;--k-red:#c63b5e;--k-red-text:#ffffff}
html[data-theme="dark"].gq-emoji{--k-n-bg:#1b2a35;--k-n-text:#f5fafc;--k-n-line:#4b6573;--k-red:#ff91aa;--k-red-text:#481021}
html.gq-emoji body .topbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;gap:10px!important;align-items:stretch}
html.gq-emoji body :is(.topbar,.sideBtns) button{
  border-radius:16px!important;font-weight:850!important;letter-spacing:.01em;box-shadow:0 6px 16px rgba(20,40,52,.12)!important;backdrop-filter:none!important;
}
html.gq-emoji body .topbar #openSettings,
html.gq-emoji body .topbar .gq-theme-toggle{color:var(--k-n-text)!important;background:var(--k-n-bg)!important;border:1px solid var(--k-n-line)!important}
html.gq-emoji body .topbar .gq-theme-toggle{
  position:relative;width:clamp(50px,13vw,82px)!important;min-width:0!important;padding:0!important;font-size:0!important;line-height:0!important;
}
html.gq-emoji body .topbar .gq-theme-toggle::after{
  content:"";position:absolute;inset:0;margin:auto;width:44%;height:44%;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html[data-theme="dark"].gq-emoji body .topbar .gq-theme-toggle::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
}
/* „Leeren“ entfernt nur das Emoji im gewählten Feld → neutral wie „Löschen“ bei Sudoku */
html.gq-emoji body .sideBtns #clear{color:var(--k-n-text)!important;background:var(--k-n-bg)!important;border:1px solid var(--k-n-line)!important}
html.gq-emoji body .topbar{padding:12px 0 6px!important;margin:0 auto!important;border-bottom:0!important;box-shadow:none!important;background:transparent!important}