/* KoUcuzGB — shared design tokens + UI kit (header, logo, icons, buttons, shop logos, strip, skeleton).
 * Loaded on every public page. Tokens are namespaced (--k-*) so the legacy light style.css pages are not
 * affected; dark pages alias their own variables to these tokens (see board-page.css, pages-extra.css).
 * Change colours / spacing / radii HERE. */

:root {
    /* surfaces */
    --k-bg: #0F0F23;
    --k-bg-base: #13132B;
    --k-card: #1C1A33;
    --k-elev: #26243F;
    --k-surface: rgba(255, 255, 255, 0.045);
    --k-border: rgba(255, 255, 255, 0.09);
    --k-border-strong: rgba(255, 255, 255, 0.16);

    /* brand */
    --k-primary: #7C3AED;
    --k-primary-hover: #8B5CF6;
    --k-primary-soft: rgba(124, 58, 237, 0.18);
    --k-primary-border: rgba(139, 92, 246, 0.45);
    --k-link: #B4A0FB;
    --k-gold: #F5B937;

    /* text (AA on --k-bg and --k-card) */
    --k-fg: #EEF0F7;
    --k-muted: #A9B3C6;
    --k-dim: #8D98AD;

    /* price semantics: best sell = green, best buy = amber (never red) */
    --k-sell: #34D399;
    --k-sell-bg: rgba(52, 211, 153, 0.13);
    --k-sell-border: rgba(52, 211, 153, 0.38);
    --k-buy: #FBBF24;
    --k-buy-bg: rgba(251, 191, 36, 0.12);
    --k-buy-border: rgba(251, 191, 36, 0.38);
    --k-up: #34D399;     /* change in the user's favour */
    --k-down: #F87171;   /* change against the user */
    --k-down-bg: rgba(248, 113, 113, 0.14);
    --k-warn: #FBBF24;

    /* scale */
    --k-s1: 4px; --k-s2: 8px; --k-s3: 12px; --k-s4: 16px; --k-s5: 24px; --k-s6: 32px; --k-s7: 48px;
    --k-r-sm: 6px; --k-r: 10px; --k-r-lg: 14px; --k-r-pill: 999px;
    --k-focus: #C4B5FD;
    --k-header-h: 56px;

    --k-font-head: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --k-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- icons */
.ki {
    width: 1.1em; height: 1.1em; flex-shrink: 0;
    display: inline-block; vertical-align: -0.17em;
    fill: none; stroke: currentColor;
}

/* ---------------------------------------------------------------- logo */
.kuz-logo { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.kuz-mark { display: block; flex-shrink: 0; border-radius: 8px; }
.kuz-word {
    font-family: var(--k-font-head); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em;
    color: var(--k-fg); white-space: nowrap;
}
.kuz-word-gb {
    background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--k-gold);
}

/* ---------------------------------------------------------------- header */
.kuz-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(15, 15, 35, 0.92);
    -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--k-border);
    font-family: var(--k-font-body);
    min-height: var(--k-header-h);
}
.kuz-header:empty { display: block; }
.kh-inner {
    max-width: 1200px; margin: 0 auto; height: var(--k-header-h);
    display: flex; align-items: center; gap: var(--k-s3);
    padding: 0 var(--k-s4);
}
.kh-brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--k-r-sm); flex-shrink: 0; }
.kh-nav { display: none; align-items: center; gap: 2px; margin-left: auto; }
.kh-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px; min-height: 38px; border-radius: var(--k-r);
    color: var(--k-muted); text-decoration: none; white-space: nowrap;
    font: 500 0.9rem/1 var(--k-font-head);
    background: transparent; border: 0; cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.kh-link .ki { width: 17px; height: 17px; opacity: 0.85; }
.kh-link:hover { color: var(--k-fg); background: var(--k-surface); }
.kh-link.is-active { color: var(--k-fg); background: var(--k-primary-soft); box-shadow: inset 0 0 0 1px var(--k-primary-border); }
.kh-link.is-active .ki { color: #C4B5FD; opacity: 1; }
.kh-more { position: relative; }
.kh-more-btn .kh-caret { width: 14px; height: 14px; transition: transform 0.15s; }
.kh-more-btn[aria-expanded="true"] .kh-caret { transform: rotate(180deg); }
.kh-more-list {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px;
    background: var(--k-card); border: 1px solid var(--k-border-strong); border-radius: var(--k-r-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; gap: 2px;
}
.kh-more-list[hidden] { display: none; }
.kh-more-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--k-r);
    color: var(--k-muted); text-decoration: none; font: 500 0.9rem var(--k-font-head);
}
.kh-more-item:hover, .kh-more-item.is-active { color: var(--k-fg); background: var(--k-surface); }

.kh-game {
    margin-left: auto; display: inline-flex; padding: 3px; gap: 2px;
    background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-r-pill);
}
.kh-game-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 32px; padding: 0 12px; border-radius: var(--k-r-pill);
    color: var(--k-muted); text-decoration: none; font: 600 0.82rem/1 var(--k-font-head);
}
.kh-game-btn:hover { color: var(--k-fg); }
.kh-game-btn.is-active { background: var(--k-primary); color: #fff; }
.kh-menu-btn, .kh-sheet-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: var(--k-r); border: 1px solid var(--k-border);
    background: var(--k-surface); color: var(--k-fg); cursor: pointer;
}
.kh-menu-btn .ki, .kh-sheet-close .ki { width: 22px; height: 22px; }
.kh-menu-btn:hover, .kh-sheet-close:hover { background: var(--k-elev); }

/* mobile sheet */
html.kh-lock, html.kh-lock body { overflow: hidden; }
.kh-sheet {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(5, 5, 15, 0.7);
    display: flex; justify-content: flex-end;
}
.kh-sheet[hidden] { display: none; }
.kh-sheet-panel {
    width: min(320px, 88vw); height: 100%; overflow-y: auto;
    background: var(--k-bg-base); border-left: 1px solid var(--k-border-strong);
    padding: var(--k-s3) var(--k-s3) var(--k-s5);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.5);
}
.kh-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px var(--k-s3); }
.kh-sheet-nav { display: flex; flex-direction: column; gap: 2px; }
.kh-sheet-link {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px;
    border-radius: var(--k-r); color: var(--k-fg); text-decoration: none;
    font: 500 1rem var(--k-font-head);
}
.kh-sheet-link .ki { width: 20px; height: 20px; color: var(--k-muted); }
.kh-sheet-link:hover { background: var(--k-surface); }
.kh-sheet-link.is-active { background: var(--k-primary-soft); box-shadow: inset 0 0 0 1px var(--k-primary-border); }
.kh-sheet-link.is-active .ki { color: #C4B5FD; }
.kh-sheet-link-sm { min-height: 44px; font-size: 0.92rem; color: var(--k-muted); }
.kh-sheet-sub {
    margin: var(--k-s4) 12px var(--k-s1); font: 600 0.72rem var(--k-font-body);
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--k-dim);
}
@media (prefers-reduced-motion: no-preference) {
    .kh-sheet:not([hidden]) .kh-sheet-panel { animation: khSlide 0.22s var(--k-ease); }
    @keyframes khSlide { from { transform: translateX(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
}

@media (min-width: 1024px) {
    .kh-nav { display: flex; }
    .kh-game, .kh-menu-btn { display: none; }
}
@media (max-width: 380px) {
    .kh-inner { gap: var(--k-s2); padding: 0 12px; }
    .kuz-word { font-size: 1.05rem; }
    .kh-brand .kuz-mark { width: 26px; height: 26px; }
    .kh-game-btn { min-width: 40px; padding: 0 10px; }
}

.kuz-header a:focus-visible, .kuz-header button:focus-visible,
.kh-sheet a:focus-visible, .kh-sheet button:focus-visible,
.kuz-btn:focus-visible, .kuz-strip a:focus-visible, .kuz-strip button:focus-visible {
    outline: 2px solid var(--k-focus); outline-offset: 2px;
}

/* ---------------------------------------------------------------- buttons */
.kuz-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 8px 14px; border-radius: var(--k-r);
    font: 600 0.88rem/1 var(--k-font-head); text-decoration: none; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--k-border-strong); background: var(--k-surface); color: var(--k-fg);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.kuz-btn:hover { background: var(--k-elev); border-color: var(--k-primary-border); color: var(--k-fg); }
.kuz-btn-primary { background: var(--k-primary); border-color: transparent; color: #fff; }
.kuz-btn-primary:hover { background: var(--k-primary-hover); color: #fff; border-color: transparent; }
.kuz-btn-sm { min-height: 32px; padding: 6px 10px; font-size: 0.8rem; }
.kuz-btn .ki { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- shop logos */
.site-logo {
    display: inline-block; flex-shrink: 0; border-radius: 6px; object-fit: contain; vertical-align: middle;
    background: #fff;
}
.site-logo-mono {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--logo-c, #4F46E5); color: #fff;
    font: 700 0.6rem/1 var(--k-font-head); letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.site-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.site-chip > span:last-child, .site-chip > a { overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- numbers */
.num, .price-tag, .mini-price, .mx-price, .kuz-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- announcement + launch strip */
.kuz-strip { position: relative; z-index: 2; }
.kuz-strip:empty { display: none; }
.announcement-bar { width: 100%; overflow: hidden; position: relative; font-size: 0.86rem; font-weight: 500; }
.announcement-bar.type-info { background: #2A2153; color: #EDE9FE; }
.announcement-bar.type-warning { background: #3A2E12; color: #FDE68A; }
.announcement-bar.type-success { background: #0F3B2E; color: #A7F3D0; }
.announcement-bar.type-error { background: #45161C; color: #FECACA; }
.announcement-bar-inner { display: flex; align-items: center; height: 34px; position: relative; max-width: 1200px; margin: 0 auto; }
.announcement-bar-track {
    flex: 1; overflow: hidden; position: relative; height: 100%; display: flex; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.announcement-bar-text { display: inline-block; white-space: nowrap; animation: marquee-scroll 20s linear infinite; padding-left: 100%; }
.announcement-bar-text span { display: inline-flex; align-items: center; gap: 6px; padding: 0 48px 0 0; }
.announcement-bar-text .ki { width: 15px; height: 15px; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.announcement-bar-close {
    background: none; border: 0; color: inherit; cursor: pointer; flex-shrink: 0;
    width: 40px; height: 100%; display: inline-flex; align-items: center; justify-content: center; opacity: 0.8;
}
.announcement-bar-close:hover { opacity: 1; }
.announcement-bar-close .ki { width: 16px; height: 16px; }
.announcement-bar.hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
    .announcement-bar-text { animation: none; padding-left: 12px; }
    .announcement-bar-text span ~ span { display: none; }
    .announcement-bar-track { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- skeleton */
.kuz-skel {
    display: inline-block; height: 0.9em; width: 4em; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .kuz-skel { animation: kuzSkel 1.3s ease-in-out infinite; }
    @keyframes kuzSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
}

/* ---------------------------------------------------------------- misc */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kuz-footer .kuz-ft-logo { display: flex; justify-content: center; margin-bottom: 14px; text-decoration: none; }
.kuz-footer .kuz-ft-logo .kuz-word { font-size: 1.05rem; }