#fraktur-generator{

    max-width:1400px;
    margin:auto;
    padding:20px;

    background:linear-gradient(
    135deg,
    #0f172a,
    #1e1b4b,
    #6d28d9
    );

    border-radius:20px;

    color:white;
}

/* GRID FIX */
#fontGrid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(240px,1fr));

    gap:18px;

}

/* CARD FIX */
.font-card{

    background:linear-gradient(
    145deg,
    #111827,
    #1f2937
    );

    border:1px solid #4f46e5;

    border-radius:16px;

    padding:14px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:180px;

    transition:.3s;

}

.font-card:hover{
    transform:translateY(-6px);
}

/* ✅ MAIN FIX: CENTER + BIG FONT */
.preview{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:10px;

    font-size:36px; /* 🔥 BIG FONT FIX */

    font-weight:700;

    line-height:1.4;

    word-break:break-word;

    overflow-wrap:anywhere;

    min-height:110px;

    color:#fff;

    font-family:
    "Segoe UI Symbol",
    "Noto Sans Symbols",
    Arial;

}

/* COPY BUTTON FIX */
.copy-btn{

    margin-top:10px;

    height:44px;

    width:100%;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:linear-gradient(
    90deg,
    #fbbf24,
    #f59e0b
    );

    font-weight:800;

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

}

.copy-btn:hover{
    opacity:.9;
}

/* INPUT FIX */
#textInput{

    width:100%;

    height:55px;

    border-radius:12px;

    border:1px solid #6366f1;

    background:#0f172a;

    color:white;

    padding:0 15px;

    font-size:16px;

}

/* MOBILE FIX */
@media(max-width:768px){

    .preview{
        font-size:28px; /* still big on mobile */
    }

    #fontGrid{
        grid-template-columns:repeat(2,1fr);
    }

}