/* Shared across every Wørds Suite v4 page (index.html, du0rds.html, ...).
   Extracted from index.html once a second page needed the identical
   :root tokens / dark-mode overrides / drawer chrome — duplicating this
   block per page is exactly the drift risk (colors going out of sync
   between games) that motivated the whole Web Components migration. */

/* Hide every custom element until it's actually upgraded. Before
   customElements.define() runs, these tags exist as plain,
   unstyled elements with an implicit opacity of 1 — once the
   shadow root attaches and sets opacity:0 (for the modals'
   closed-by-default state), that counts as a value CHANGE, which
   the opacity transition then animates from "implicitly visible"
   to "explicitly hidden" — a brief, unintended flash on every page
   load. Hiding undefined elements outright removes the "before"
   state that transition would have animated from. Lists the union
   of custom tags used across every page — a tag a given page never
   uses simply never matches, so it's safe to list them all here. */
wrd-board:not(:defined),
wrd-keyboard:not(:defined),
wrd-toast:not(:defined),
wrd-header:not(:defined),
wrd-drawer:not(:defined),
wrd-settings-modal:not(:defined),
wrd-stats-modal:not(:defined),
wrd-duo-stats-modal:not(:defined),
wrd-bilingual-stats-modal:not(:defined),
wrd-quad-stats-modal:not(:defined),
wrd-oct-stats-modal:not(:defined),
wrd-sedec-stats-modal:not(:defined),
wrd-help-modal:not(:defined),
wrd-duo-help-modal:not(:defined),
wrd-quad-help-modal:not(:defined),
wrd-oct-help-modal:not(:defined),
wrd-sedec-help-modal:not(:defined),
wrd-lang-picker:not(:defined) {
    display: none;
}

:root {
    --bg-color: #f8f8f8;
    --tile-bg: #ffffff;
    --tile-border: #dddddd;
    --tile-border-filled: #bbbbbb;
    --tile-border-active: #888888;
    --tile-text: #333333;
    --key-bg: #eeeeee;
    --key-text: #000000;
    --color-match: #019e01;
    --color-present: #eb6f0a;
    --color-absent: #555555;
    --color-text-white: #ffffff;
    --color-invalid: #ff4a4a;
    --toast-bg: rgba(0, 0, 0, 0.9);
    --toast-text: #ffffff;
    --modal-bg: #ffffff;
    --modal-text: #000000;
    --modal-border: none;
    --setting-title-color: #333333;
    --setting-desc-color: #787c7e;
    --help-text-primary: #333333;
    --help-text-secondary: #555555;
    --separator-color: #d3d6da;
    --guess-number-color: #333333;
    --header-bg: #ffffff;
    --header-border: #dddddd;
    --header-icon-color: #333333;
    --drawer-border: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- DARK MODE OVERRIDES --- */
body.dark-mode {
    --bg-color: #121213;
    --tile-bg: #121213;
    --tile-border: #3a3a3c;
    --tile-border-filled: #565758;
    --tile-border-active: #818384;
    --tile-text: #f8f8f8;
    --key-bg: #818384;
    --key-text: #ffffff;
    --color-absent: #3a3a3c;
    --toast-bg: #f8f8f8;
    --toast-text: #121213;
    --modal-bg: #121213;
    --modal-text: #f8f8f8;
    --modal-border: 1px solid #1a1a1b;
    --setting-title-color: #f8f8f8;
    --setting-desc-color: #a6a6a6;
    --help-text-primary: #a6a6a6;
    --help-text-secondary: #a6a6a6;
    --separator-color: #3a3a3c;
    --guess-number-color: #f8f8f8;
    --header-bg: #121213;
    --header-border: #3a3a3c;
    --header-icon-color: #f8f8f8;
    --drawer-border: 1px solid #3a3a3c;
}

/* Drawer content is genuinely light-DOM (slotted into <wrd-drawer>), so its
   styling stays here rather than inside the component's shadow root — see
   wrd-drawer.js's own note on the same point. */
a.drawer-item { text-decoration: none; color: var(--tile-text); }

#drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 250; display: none;
}
.drawer-item {
    padding: 15px 20px; cursor: pointer; transition: background 0.2s;
    font-size: 1.1rem; color: var(--tile-text); display: flex; align-items: center; gap: 10px;
}
.drawer-item:hover { background: rgba(0,0,0,0.05); }
.drawer-item.active { font-weight: bold; color: #6aaa64; border-left: 4px solid #6aaa64; padding-left: 16px; }
.drawer-item.disabled { opacity: 0.5; cursor: not-allowed; }

body.dark-mode .drawer-item:hover { background: #272729; }