/* ============================================================
   Connect the Thoughts — shared chrome primitives
   Companion to tokens.css. Each game vendors a copy of this file
   alongside tokens.css; the source of truth lives in the launcher.

   What's in here:
     .topbar        — fixed/full-width header lockup
     .brand         — brand-mark + wordmark link to the arcade home
     .brand-mark    — accent-tinted SVG container
     .brand-text    — "Connect the Thoughts" wordmark
     .brand-sep     — middle-dot separator
     .brand-game    — per-game label after the separator
     .icon-button   — 40x40 circular button used for theme/help/etc.
     .modal-backdrop — full-viewport overlay backdrop
     .modal         — centered modal card
     .modal-close-x — × close button in modal corner
     .arcade-footer — thin centered "Part of connectthethoughts.ca" link

   Conventions a game has to follow to inherit these for free:
     - <a id="themeToggle"> or [data-arcade-theme-toggle]  → theme toggle
     - <button id="helpButton"> or [data-arcade-help]      → help button
     - [data-arcade-overlay] + [data-arcade-close]          → modal pair
       (arcade.js binds Escape to click [data-arcade-close])
     - <a> with class="game-card" or [data-arcade-pass-theme]
       gets ?theme= appended at click time (cross-origin theme)

   The primitives are intentionally token-only (no game-specific colors
   or layout) so each game can layer its own styling on top.
   ============================================================ */

/* ===== Topbar ===== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px clamp(14px, 3vw, 24px);
    width: 100%;
}

/* ===== Brand lockup ===== */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { color: var(--accent); text-decoration: none; }

.brand-mark { display: inline-flex; color: var(--accent); }

.brand-text { line-height: 1; }

.brand-sep {
    color: var(--fg-subtle);
    font-weight: 500;
    margin: 0 2px;
}

.brand-game {
    color: var(--fg-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Icon button (theme toggle, help, settings, etc.) ===== */
.icon-button {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--fg-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    padding: 0;
}
.icon-button:hover {
    color: var(--fg);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}
.icon-button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

/* Sun/moon swap based on theme — opt-in by giving the toggle button
   a child <svg class="icon-sun"> and <svg class="icon-moon">. */
[data-theme="light"] .icon-moon,
:root:not([data-theme="dark"]) .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
    overscroll-behavior: contain;
}
.modal-backdrop[hidden],
.modal-backdrop.hidden { display: none; }

.modal {
    background: var(--bg-elev);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    position: relative;
    font-family: var(--font-sans);
}

.modal h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--fg);
}

.modal p { color: var(--fg-muted); line-height: 1.55; }

.modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--fg-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.modal-close-x:hover {
    background: var(--bg);
    color: var(--fg);
}
.modal-close-x:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ===== Footer (arcade backlink) ===== */
.arcade-footer {
    padding: 16px clamp(14px, 3vw, 24px);
    color: var(--fg-subtle);
    font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--bg);
    font-family: var(--font-sans);
}
.arcade-footer a {
    color: var(--fg-muted);
    text-decoration: none;
    font-weight: 600;
}
.arcade-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}