* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@font-face {
    font-display: swap;
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    src: url('../fonts/jetbrains-mono-vf.ttf') format('truetype');
}

:root {

    --cg-purple:        #6c47ff;
    --cg-purple-soft:   #221456;
    --cg-green:         color(display-p3 0.3 1 0.7);

    --cg-txt:           hsl(240, 20%, 80%);

    --cg-bg:            #111117;
    --cg-bg-2:          #15151d;
    --cg-bg-3:          #232333;
    --cg-line-strong:   hsla(240, 15%, 30%, 0.85);

    --cg-radius:        0.5em;
    --cg-mono:          "JetBrains Mono", Consolas, "Andale Mono", "DejaVu Sans Mono", "Liberation Mono", Monaco, "Courier New", Courier, monospace;

}

html, body {
    height: 100%;
    background: var(--cg-bg);
    color: var(--cg-txt);
    font-family: var(--cg-mono);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Stage ---------- */

.stage {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
    padding: 2em;
}

.logo img {
    width: 100%;
    max-width: 10rem;
}

/* ---------- Code display ---------- */

.code-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.dist {
    display: flex;
    width: 100%;
    height: 0.25em;
    gap: 0.35em;
    max-width: 35rem;
    margin: auto;
}
.dist-bar {
    height: 100%;
    border-radius: 999px;
    transition: flex-grow 0.4s ease;
    min-width: 0;
}
.dist-upper { background: #ffffff; }
.dist-lower { background: var(--cg-purple); }
.dist-digit { background: var(--cg-green); }

.code {
    display: block;
    width: 100%;
    font-family: var(--cg-mono);
    font-weight: 500;
    font-size: 1.85rem;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--cg-txt);
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.1;
    user-select: all;
    -webkit-user-select: all;
}

/* character-type colors */
.code .c-alpha-l { color: var(--cg-purple); }
.code .c-alpha-u { color: #ffffff; }
.code .c-digit   { color: var(--cg-green); }

/* glitch flash on each char during scramble — uses the live glyph color */
.code .is-scrambling {
    opacity: 0.85;
}

/* ---------- Actions ---------- */

.actions {
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95em 1.6em;
    font-family: inherit;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cg-txt);
    background: var(--cg-bg-3);
    border-radius: var(--cg-radius);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
    text-transform: uppercase;
}
.btn:hover {
    color: var(--cg-bg);
    background: #ffffff;
}
.btn:disabled {
    cursor: not-allowed;
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 3em;
    transform: translate(-50%, 1em);
    background: var(--cg-bg-3);
    border: 1px solid var(--cg-line-strong);
    color: var(--cg-txt);
    padding: 0.7em 1.1em;
    border-radius: var(--cg-radius);
    font-size: 0.78em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 50;
}
.toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}