/**
 * TopChess.org — BENDRI KOMPONENTAI
 * ==================================
 * Vienoda kortelių, mygtukų, ženkliukų, statistikos ir progreso išvaizda
 * visuose puslapiuose. Statoma tik ant --tc-* tokenų iš tc-theme.css.
 *
 * Dvi dalys:
 *   1. .tc-* klasės — naujam kodui
 *   2. Suderinimo sluoksnis — pritaiko naują išvaizdą JAU esamoms klasėms
 *      (.card, .btn, .stat-card ...), kad puslapių nereikėtų perrašinėti
 *
 * Dokumentacija: ai/plans/design-system.md
 */

/* ==========================================================================
   1. KORTELĖ
   ========================================================================== */

.tc-card {
    background: var(--tc-surface);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 4px 0 var(--tc-line);
    padding: 1.15rem 1.25rem;
    color: var(--tc-ink);
}

/* Interaktyvi kortelė — nuoroda/mygtukas. Paspaudus „nusileidžia" ant šešėlio. */
.tc-card--link {
    display: block;
    text-decoration: none;
    transition: transform var(--tc-dur) var(--tc-ease),
                box-shadow var(--tc-dur) var(--tc-ease),
                border-color var(--tc-dur) var(--tc-ease);
}

.tc-card--link:hover {
    border-color: var(--tc-blue);
    box-shadow: 0 6px 0 var(--tc-blue-deep);
    transform: translateY(-2px);
}

.tc-card--link:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--tc-blue-deep);
}

.tc-card--sunken {
    background: var(--tc-surface-2);
    box-shadow: none;
}

/* ==========================================================================
   2. MYGTUKAI
   ========================================================================== */

.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--tc-ink);
    background: var(--tc-surface);
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    box-shadow: 0 4px 0 var(--tc-line);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--tc-dur) var(--tc-ease),
                box-shadow var(--tc-dur) var(--tc-ease),
                background-color var(--tc-dur) var(--tc-ease);
}

.tc-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc-line); }
.tc-btn:active { transform: translateY(4px);  box-shadow: 0 0 0 var(--tc-line); }

.tc-btn:focus-visible {
    outline: 3px solid var(--tc-blue-deep);
    outline-offset: 3px;
}

.tc-btn[disabled],
.tc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 0 var(--tc-line);
}

/* Pagrindinis veiksmas — auksinis (tamsus tekstas, AA kontrastas) */
.tc-btn--primary {
    background: var(--tc-gold);
    color: #241500;
    box-shadow: 0 4px 0 var(--tc-gold-deep);
}
.tc-btn--primary:hover  { box-shadow: 0 6px 0 var(--tc-gold-deep); }
.tc-btn--primary:active { box-shadow: 0 0 0 var(--tc-gold-deep); }

.tc-btn--blue {
    background: var(--tc-blue);
    color: #06263B;
    box-shadow: 0 4px 0 var(--tc-blue-deep);
}
.tc-btn--blue:hover  { box-shadow: 0 6px 0 var(--tc-blue-deep); }
.tc-btn--blue:active { box-shadow: 0 0 0 var(--tc-blue-deep); }

.tc-btn--green {
    background: var(--tc-green);
    color: #04301A;
    box-shadow: 0 4px 0 var(--tc-green-deep);
}
.tc-btn--green:hover  { box-shadow: 0 6px 0 var(--tc-green-deep); }
.tc-btn--green:active { box-shadow: 0 0 0 var(--tc-green-deep); }

.tc-btn--danger {
    background: var(--tc-red);
    color: #FFFFFF;
    box-shadow: 0 4px 0 var(--tc-red-deep);
}
.tc-btn--danger:hover  { box-shadow: 0 6px 0 var(--tc-red-deep); }
.tc-btn--danger:active { box-shadow: 0 0 0 var(--tc-red-deep); }

.tc-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.tc-btn--lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }

/* ==========================================================================
   3. ŽENKLIUKAI
   ========================================================================== */

.tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--tc-ink);
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-pill);
}

.tc-badge--blue  { background: var(--tc-blue);  border-color: var(--tc-blue-deep);  color: #06263B; }
.tc-badge--gold  { background: var(--tc-gold);  border-color: var(--tc-gold-deep);  color: #241500; }
.tc-badge--green { background: var(--tc-green); border-color: var(--tc-green-deep); color: #04301A; }
.tc-badge--red   { background: var(--tc-red);   border-color: var(--tc-red-deep);   color: #FFFFFF; }

/* ==========================================================================
   4. STATISTIKOS DĖŽUTĖ
   ========================================================================== */

.tc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.tc-stat {
    background: var(--tc-surface);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    padding: 0.9rem 0.75rem;
    text-align: center;
}

.tc-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--tc-ink);
    line-height: 1.1;
}

.tc-stat__label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tc-ink-soft);
}

/* ==========================================================================
   5. PROGRESO JUOSTA
   ========================================================================== */

.tc-progress {
    height: 14px;
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-pill);
    overflow: hidden;
}

.tc-progress__bar {
    height: 100%;
    background: var(--tc-green);
    border-radius: var(--tc-radius-pill);
    transition: width 300ms var(--tc-ease);
}

/* ==========================================================================
   6. SUDERINIMO SLUOKSNIS
   Esamos klasės gauna naują išvaizdą be HTML perrašymo.
   Neliečiam .tool-card / .hero-btn — jie tvarkomi dark-accents.css (index).
   ========================================================================== */

body .card,
body .panel,
body .stat-card,
body .content-card,
body .info-card {
    background: var(--tc-surface);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 4px 0 var(--tc-line);
    color: var(--tc-ink);
}

/* Gradientiniai mygtukai → vientisa spalva */
body .btn-primary,
body .button-primary {
    background: var(--tc-gold);
    color: #241500;
    border: 2px solid var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-gold-deep);
}

body .btn-secondary,
body .button-secondary {
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 2px solid var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-line);
}

/* Judesio mažinimas — gerbiam OS nustatymą */
@media (prefers-reduced-motion: reduce) {
    .tc-card--link,
    .tc-btn,
    .tc-progress__bar {
        transition: none;
    }
    .tc-card--link:hover,
    .tc-card--link:active,
    .tc-btn:hover,
    .tc-btn:active {
        transform: none;
    }
}

/* ============================================================
   Share komponentas (naudoja /js/core/share.js)
   ============================================================ */

.tc-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(27, 36, 48, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
}
.tc-share-overlay.open .tc-share-dialog {
    animation: tcShareUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tc-share-dialog {
    position: relative;
    background: var(--tc-surface);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius-lg);
    box-shadow: 0 4px 0 var(--tc-line);
    padding: 24px;
    max-width: 400px;
    width: 100%;
}

.tc-share-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tc-ink-soft);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tc-share-close:hover {
    background: var(--tc-surface-2);
    color: var(--tc-ink);
}

.tc-share-title {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--tc-ink);
    margin: 0 0 12px;
}

.tc-share-link {
    background: var(--tc-surface-2);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    color: var(--tc-ink);
    font-family: monospace;
    font-size: 0.8rem;
    padding: 10px 12px;
    word-break: break-all;
    margin-bottom: 12px;
    max-height: 4.6em;
    overflow: hidden;
}

.tc-share-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.tc-share-btn {
    padding: 11px;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid var(--tc-ink);
    border-radius: var(--tc-radius);
    cursor: pointer;
    min-height: 44px;
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}
.tc-share-btn:hover { transform: translateY(-2px); }
.tc-share-btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }
.tc-share-btn:focus-visible {
    outline: 3px solid var(--tc-blue-deep);
    outline-offset: 3px;
}

.tc-share-btn--fb {
    background: var(--tc-blue-deep);
    color: #FFFFFF;
    box-shadow: 0 4px 0 rgba(27, 36, 48, 0.35);
}
.tc-share-btn--fb:hover { box-shadow: 0 6px 0 rgba(27, 36, 48, 0.35); }
.tc-share-btn--x {
    background: var(--tc-ink);
    color: #FFFFFF;
    box-shadow: 0 4px 0 rgba(27, 36, 48, 0.35);
}
.tc-share-btn--x:hover { box-shadow: 0 6px 0 rgba(27, 36, 48, 0.35); }
.tc-share-btn--tg {
    background: var(--tc-blue);
    color: #06263B;
    box-shadow: 0 4px 0 var(--tc-blue-deep);
}
.tc-share-btn--tg:hover { box-shadow: 0 6px 0 var(--tc-blue-deep); }
.tc-share-btn--copy {
    background: var(--tc-surface);
    color: var(--tc-ink);
    box-shadow: 0 4px 0 var(--tc-line);
}
.tc-share-btn--copy:hover { box-shadow: 0 6px 0 var(--tc-line); }
.tc-share-btn--copy.copied {
    background: var(--tc-green);
    color: #04301A;
    border-color: var(--tc-green-deep);
    box-shadow: 0 4px 0 var(--tc-green-deep);
}

/* Kompaktiškas ikoninis share trigeris (post'ai, headeriai) */
.tc-share-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 10px;
    background: var(--tc-surface);
    color: var(--tc-ink);
    border: 2px solid var(--tc-line);
    border-radius: var(--tc-radius);
    box-shadow: 0 3px 0 var(--tc-line);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform var(--tc-dur) var(--tc-ease), box-shadow var(--tc-dur) var(--tc-ease);
}
.tc-share-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--tc-line);
    border-color: var(--tc-ink);
}
.tc-share-trigger:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tc-line); }
.tc-share-trigger:focus-visible {
    outline: 3px solid var(--tc-blue-deep);
    outline-offset: 3px;
}

@keyframes tcShareUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-share-overlay.open .tc-share-dialog { animation: none; }
    .tc-share-btn, .tc-share-trigger { transition: none; }
    .tc-share-btn:hover, .tc-share-btn:active,
    .tc-share-trigger:hover, .tc-share-trigger:active { transform: none; }
}

/* ==========================================================
   Šachmatų lentos lietimas mobiliajame (2026-08-22)
   ==========================================================
   Be `touch-action: none` naršyklė figūros vilkimą interpretuoja ir kaip
   puslapio slinkimą / pull-to-refresh — telefone ėjimas dažnai „nuslysta".
   Taikoma globaliai chessground konteineriui, todėl veikia visuose
   lentos puslapiuose (play-bot, play-friend, puzzles, drills, openings,
   traps, endgame) nekeičiant kiekvieno atskirai.

   `cg-board` (o ne visas .cg-wrap) — kad koordinatės ir šoniniai elementai
   liktų normaliai slenkami. */
.cg-wrap cg-board {
    touch-action: none;
}