/* ════════════════════════════════════════════════════════════════
 * css/gaming-identity.css — Gaming Identity Studio
 * (Clan-Tag Designer + Matching Squad-Name Generator)
 *
 * Additive, self-contained. Uses main.css design tokens. Reserves
 * result-area height to prevent CLS (mirrors the compat-strip discipline).
 * Respects prefers-reduced-motion. Verdict pips reuse --cc-* from
 * compatibility.css when present, with local fallbacks so this file
 * stands alone. The fadeInUp keyframe is declared locally so the module
 * is not coupled to tools.css load order.
 * ════════════════════════════════════════════════════════════════ */

:root {
    /* Fallbacks mirror compatibility.css; harmless if that file also loads. */
    --gid-ok:   var(--cc-safe, var(--c-cyan));
    --gid-warn: var(--cc-warn, #ffb020);
    --gid-bad:  var(--cc-bad,  var(--c-pink));
}

/* ── Shell ── */
.gid {
    background: var(--c-surface);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: var(--r-md);
    padding: var(--s-lg);
    margin-top: var(--s-md);
    /* CLS reserve: header + game bar + two input rows + two result areas are
     * built synchronously by JS at load; this min-height holds the pre-input
     * layout so the page below does not jump. Growth after the user types/
     * generates is CLS-exempt (within 500ms of interaction). */
    min-height: 560px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.gid[hidden] { display: none; }

.gid__header { margin-bottom: var(--s-md); }
.gid__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.3rem 0; }
.gid__subtitle { font-size: 0.85rem; color: var(--c-text-muted); margin: 0; }

/* ── Shared game bar ── */
.gid__gamebar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-sm); margin-bottom: var(--s-lg);
}
.gid__gamebar-label { font-size: 0.8rem; font-weight: 700; color: var(--c-text); }
.gid__gamebar-hint { font-size: 0.75rem; color: var(--c-text-muted); flex-basis: 100%; }
.gid__select {
    padding: 0.65rem 0.9rem; border-radius: var(--r-sm);
    border: 1px solid rgba(168, 85, 247, 0.25);
    background: var(--c-surface-solid, var(--c-surface)); color: var(--c-text);
    font-size: 0.9rem; cursor: pointer; outline: none; min-height: 44px;
    transition: border-color var(--t-fast);
}
.gid__select:focus { border-color: rgba(168, 85, 247, 0.6); }

/* ── Sub-tool block ── */
.gid__tool { margin-top: var(--s-lg); }
.gid__tool + .gid__tool {
    border-top: 1px solid rgba(168, 85, 247, 0.12);
    padding-top: var(--s-lg);
}
.gid__tool-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--s-md) 0; }

/* ── Input rows ── */
.gid__row {
    display: flex; gap: var(--s-sm); flex-wrap: wrap; align-items: center;
    margin-bottom: var(--s-md);
}
.gid__input {
    flex: 1; min-width: 180px; padding: 0.75rem 1rem; min-height: 44px;
    border-radius: var(--r-sm); border: 1px solid rgba(168, 85, 247, 0.25);
    background: var(--c-surface-solid, var(--c-surface)); color: var(--c-text);
    font-size: 0.95rem; outline: none; transition: border-color var(--t-base);
}
.gid__input:focus { border-color: rgba(168, 85, 247, 0.6); }
.gid__count { font-size: 0.8rem; color: var(--c-text-muted); white-space: nowrap; }

/* ── Buttons ── */
.gid__btn {
    padding: 0.7rem 1.1rem; min-height: 44px; border-radius: var(--r-sm);
    border: 1px solid rgba(168, 85, 247, 0.3); background: transparent;
    color: var(--c-text); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.gid__btn:hover { background: rgba(168, 85, 247, 0.12); transform: translateY(-2px); }
.gid__btn:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.gid__btn--primary { border: none; color: #fff; background: var(--grad-brand, var(--c-purple)); }
.gid__btn--primary:hover { box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4); }
.gid__btn--ghost { font-size: 0.8rem; padding: 0.5rem 0.8rem; }
.gid__btn[hidden] { display: none; }

/* ── Seed line ── */
.gid__seedline {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-sm); margin-bottom: var(--s-md);
}
.gid__seedline[hidden] { display: none; }
.gid__seed-label { font-size: 0.78rem; font-weight: 700; color: var(--c-text); }
.gid__seed-input {
    width: 9ch; padding: 0.45rem 0.6rem; min-height: 44px;
    border-radius: var(--r-sm); border: 1px solid rgba(168, 85, 247, 0.25);
    background: var(--c-surface-solid, var(--c-surface)); color: var(--c-text);
    font-size: 0.85rem; outline: none;
}
.gid__seed-input:focus { border-color: rgba(168, 85, 247, 0.6); }
.gid__seed-hint { flex-basis: 100%; font-size: 0.72rem; color: var(--c-text-muted); }

/* ── Dated disclaimer + report link (mirrors compat-strip honesty) ── */
.gid__disclaimer {
    margin-top: var(--s-lg);
    padding-top: var(--s-md);
    border-top: 1px solid rgba(168, 85, 247, 0.12);
    font-size: 0.72rem; line-height: 1.4; color: var(--c-text-muted);
}
.gid__disclaimer-text { display: inline; }
.gid__disclaimer-report {
    display: inline-block; margin-left: 0.4rem;
    color: var(--c-purple); text-decoration: underline;
    /* keep the tap target comfortable without breaking the inline flow */
    padding: 0.15rem 0;
}
.gid__disclaimer-report:hover { color: var(--c-pink); }
.gid__disclaimer-report:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* ── Result containers (CLS RESERVED) ── */
.gid__frames {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-sm);
    min-height: 180px;          /* ~2 rows reserved — prevents CLS on inject */
}
.gid__squad {
    display: flex; flex-direction: column; gap: var(--s-sm);
    min-height: 280px;          /* reserve for the full squad (captain + 4 variants = 5 rows) */
}
.gid__placeholder {
    grid-column: 1 / -1; text-align: center; color: var(--c-text-muted);
    padding: var(--s-xl) var(--s-md); font-size: 0.95rem; margin: 0;
}

/* ── Result card (shared by frames + squad) ──
 * Layout: a top row (.gid-card__main = styled text + optional flag badge) with
 * the Copy button at the end, and — when flagged — a readable reason line below
 * the text. Using a flex row that wraps keeps the Copy button reachable while
 * the reason sits under the text on narrow cards. */
.gid-card {
    display: flex; align-items: center; flex-wrap: wrap;
    justify-content: space-between; gap: var(--s-sm) var(--s-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.12);
    border-left: 3px solid transparent;        /* tint slot — no reflow when set */
    border-radius: var(--r-sm); padding: 0.7rem 0.9rem;
    animation: gidFadeInUp 0.3s ease both;
    transition: border-color var(--t-fast);
}
.gid-card:hover { border-color: rgba(168, 85, 247, 0.4); }
.gid-card--warn { border-left-color: var(--gid-warn); }
.gid-card--bad  { border-left-color: var(--gid-bad); }

.gid-card__main {
    display: flex; align-items: center; gap: 0.4rem;
    flex: 1 1 60%; min-width: 0;                /* min-width:0 so long text can shrink */
}
.gid-card__text { flex: 1; min-width: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.gid-card__badge {
    flex-shrink: 0; font-size: 0.85rem; line-height: 1; cursor: help;
}
.gid-card__badge.is-ok   { color: var(--gid-ok); }
.gid-card__badge.is-warn { color: var(--gid-warn); }
.gid-card__badge.is-bad  { color: var(--gid-bad); }
.gid-card__reason {
    flex-basis: 100%; order: 3; margin: 0.15rem 0 0 0;
    font-size: 0.72rem; line-height: 1.3; color: var(--c-text-muted);
}
.gid-card--bad .gid-card__reason { color: var(--gid-bad); }

.gid-card__copy {
    flex-shrink: 0; padding: 0.4rem 0.9rem; min-height: 44px;
    border-radius: 6px; border: 1px solid rgba(168, 85, 247, 0.3);
    background: transparent; color: var(--c-text);
    font-size: 0.8rem; cursor: pointer; white-space: nowrap;
    transition: background var(--t-fast);
}
.gid-card__copy:hover { background: rgba(168, 85, 247, 0.15); }
.gid-card__copy:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }
.gid-card__copy--done {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4); color: var(--c-success);
}

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

/* ── Mobile ── */
@media (max-width: 600px) {
    /* Drop the costly full-surface blur on mid-tier mobile GPUs (perf). */
    .gid { min-height: 720px; backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* TWO columns (not one) so 36 frames are scannable, not a marathon scroll.
     * minmax(0,1fr) lets long framed strings shrink instead of blowing the track. */
    .gid__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 320px; }
    .gid__row--squad { flex-direction: column; align-items: stretch; }
    .gid__row--squad .gid__btn { width: 100%; }
    /* Stack text + copy on very narrow cards so the tag isn't squeezed thin. */
    .gid-card { padding: 0.6rem 0.7rem; }
    .gid-card__text { font-size: 1rem; }
    .gid-card__copy { padding: 0.4rem 0.7rem; }
}

/* One column only at the very narrowest widths, where 2 columns would crush
 * the styled tag below readability. */
@media (max-width: 360px) {
    .gid__frames { grid-template-columns: 1fr; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .gid-card { animation: none; }
    .gid__btn:hover { transform: none; }
}