.designer-container {
    padding: 20px;
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.15);
}

.designer-inputs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.designer-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.designer-field input {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 16px;
}

.preset-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.preset-categories button {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
  
}

.preset-categories button:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* Balról kezdje a feltöltést */
    padding: 10px 0;
}

.preset-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;      /* Oldalt több hely a hosszú jeleknek */
    min-width: 55px;        /* Az emojiknak megmarad a szép kerek/négyzetes alapja */
    width: auto;            /* De ha hosszabb a szöveg, tágul */
    white-space: nowrap;    /* Ne törje több sorba a karaktereket */
    
    background: rgba(150,150,150,0.1);
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    font-size: 22px;
    cursor: pointer;
    
}

.preset-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-2px); /* Scale helyett felfelé mozdulás, stabilabb */
}

.preset-item:hover {
    background: rgba(255,255,255,0.20);
    transform: scale(1.08); /* Kicsit kisebb scale, hogy a széles gomb ne takarjon ki mindent */
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.preset-btn {
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid #E0E0E0;
    background: rgba(235,235,235,0);
    color: #000;
    cursor: pointer;
   
    backdrop-filter: blur(6px);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.preset-btn:hover {
    background: rgba(255,255,255,0.18);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.preset{font-size: 25px }
.preset, .btn.preset {
    transition: none !important; /* Letilt minden átmenetet (szín, keret, árnyék) */
    transform: none !important;  /* Biztos ami biztos, ne mozogjon */
}

/* Ha mégis szeretnél egy minimális hover színt, de azonnal: */
.preset:hover {
    background-color: #e2e6ea ; /* Bootstrap btn-light hover színe */
    border-color: #dae0e5 !important;
    transition: none !important; /* Itt is kényszerítjük az azonnaliságot */
}

/* Kattintáskor (active) is legyen azonnali */
.preset:active {
    background-color: #dae0e5 ;
    transform: scale(0.98); /* Opcionális: egy pici benyomódás, de transition nélkül azonnali */
}

.name-row {
    display: flex;
    gap: 10px;
	align-items: center !important;
	justify-content: center;
}


.name-box{font-size: 2.3em !important; white-space: nowrap;   /* Tilos a sortörés! */
    overflow-x: auto;      /* Ha mégis elérné a max-width-et, görgethető legyen belül, de ne törjön meg */
   
    vertical-align: middle;
    }
/* Hibaállapot */
.name-input.is-invalid {
    border-color: red !important;
    box-shadow: 0 0 5px rgba(255,0,0,0.5);
}

#dn_preset_grid {
    gap: 3px !important;
}




.preset-item img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

.name-input img.emoji {
    height: 1.2em; /* Kicsit nagyobb, hogy jól látszódjon */
    width: 1.3em;
    
    display: inline-block;
    vertical-align: middle;
}

/* Megakadályozza, hogy az img-re kattintva furcsán viselkedjen a kurzor */
.name-input img.emoji {
    pointer-events: none;
}

.preset-btn img.emoji {
    height: 1.3em; /* Kicsit nagyobb, hogy jól látszódjon */
    width: 1.3em;
    margin: 0 0.05em;
    display: inline-block;
    vertical-align: middle;
}



/* A grid marad a 300px magas görgethető konténer */
.dn_preset_grid {
	gap: 10px;
    max-height: 300px;
    overflow-y: auto;overflow-x: none !important;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 10px;
}

/* A kategória címe mindig 100% széles legyen, hogy megtörje a sort */
.category-header {
    width: 100%;
    font-size: 0.85rem;
    
    text-transform: uppercase;
    color: #888;
    margin: 10px 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #eee;
    /* Sticky: a kategória neve ott marad felül görgetésnél */
    position: sticky;
    top: -10px;
    background: white;
    z-index: 2;
}

/* Az ikonok stílusa a választóban */
.game-emoji-item {
    width: 32px;
    height: 32px;
    padding: 4px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    border-radius: 4px;
}

.game-emoji-item:hover {
    background: #f0f0f0;
    transform: scale(1.15);
}
.preset-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.symbol-cat-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

.preset-grid {
    transition: opacity 0.2s ease; /* Finom átmenet a tiltásnál */
}
/* A szimbólumokat tartalmazó konténer */
#dn_preset_grid {
    max-height: 330px;      /* Maximum magasság */
    overflow-y: auto;       /* Csak akkor jelenik meg a görgető, ha kell */
    overflow-x: hidden;     /* Vízszintes görgetés tiltása */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* --- SZOLID SCROLLBAR STÍLUS --- */

/* 1. A görgetősáv egésze */
#dn_preset_grid::-webkit-scrollbar {
    width: 6px;             /* Elég vékony, nem zavaró */
}

/* 2. A "pálya", amin a csúszka mozog */
#dn_preset_grid::-webkit-scrollbar-track {
    background: transparent; /* Teljesen belesimul a háttérbe */
}

/* 3. Maga a csúszka (a fogantyú) */
#dn_preset_grid::-webkit-scrollbar-thumb {
    background-color: #ccc;  /* Halvány szürke */
    border-radius: 10px;     /* Lekerekített szélek */
    transition: background 0.3s;
}

/* 4. Csúszka színe, ha rámutatsz (hover) */
#dn_preset_grid::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;  /* Kicsit sötétebb, ha használják */
}

/* Firefox támogatás (ez is fontos) */
#dn_preset_grid {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

#fontGrid {
    max-height: 530px;      /* Maximum magasság */
    overflow-y: auto;       /* Csak akkor jelenik meg a görgető, ha kell */
    overflow-x: hidden;     /* Vízszintes görgetés tiltása */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* --- SZOLID SCROLLBAR STÍLUS --- */

/* 1. A görgetősáv egésze */
#fontGrid::-webkit-scrollbar {
    width: 6px;             /* Elég vékony, nem zavaró */
}

/* 2. A "pálya", amin a csúszka mozog */
#fontGrid::-webkit-scrollbar-track {
    background: transparent; /* Teljesen belesimul a háttérbe */
}

/* 3. Maga a csúszka (a fogantyú) */
#fontGrid::-webkit-scrollbar-thumb {
    background-color: #ccc;  /* Halvány szürke */
    border-radius: 10px;     /* Lekerekített szélek */
    transition: background 0.3s;
}

/* 4. Csúszka színe, ha rámutatsz (hover) */
#fontGrid::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;  /* Kicsit sötétebb, ha használják */
}

/* Firefox támogatás (ez is fontos) */
#fontGrid {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
/* A kereső és a grid konténere, ha le van tiltva */
.picker-wrapper.disabled-picker {
    opacity: 0.5;
    pointer-events: none; /* Megakadályozza a kattintást és a gépelést */
    filter: grayscale(0.5); /* Szürkés árnyalat a hatás kedvéért */
    cursor: not-allowed;
}

/* Egy kis vizuális segítség a felhasználónak */
.picker-wrapper::before {
    content: "Válassz mezőt a beszúráshoz...";
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 20px;
    z-index: 100;
    font-weight: bold;
    color: #555;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.picker-wrapper.disabled-picker::before {
    display: block; /* Csak akkor látszik, ha le van tiltva */
}

/* Kell egy wrapper a kereső és a grid köré a HTML-ben */
.picker-wrapper {
    position: relative;
    transition: all 0.3s ease;
}

.emoji-suggest-popup {
    position: absolute;
	gap: 10px;
	left:33% !important; top:98px !important;
    z-index: 9999;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    width: 380px;
    overflow-y: none !important;
	overflow-x: auto;  
}
@media (width <= 767.98px) {
	.emoji-suggest-popup {
		position: absolute;
		left:0px !important; top:40px !important;
		z-index: 9999;
		background: white;
		border-radius: 8px;
		box-shadow: 0 5px 25px rgba(0,0,0,0.2);
		border: 1px solid #ddd;
		width: 100% !important;
		overflow-y: none !important;
		overflow-x: auto;  
	}
}
.suggest-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #f0f0f0;
}

.suggest-item:hover {
    background: #f8f9fa;
}

.suggest-item img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.suggest-item span {
    font-size: 13px;
    color: #333;
    font-family: monospace;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(3px); }
    50% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.symbol-char-display {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: black; /* Vagy a dizájnodhoz illő szín */
}


.name-input {
    display: inline-flex;
    align-items: center;          /* Függőleges középre igazítás */
    justify-content: center;      /* Vízszintes középre igazítás (ezt add hozzá!) */
    min-width: 100px;
    width: auto;
    max-width: 500px;
    height: 1.9em;                /* Adj neki fix magasságot a line-height helyett */
    font-size: 2.0em !important;
    white-space: nowrap;
    overflow-x: auto;
    vertical-align: middle;
    padding: 2px 15px;
    border:0 px solid transparent;
    border-radius: 4px;
    outline: none;
    justify-content: center;
    /* Fontos trükk: */
    text-align: center;           /* Régebbi böngészőknek */
}





/* 4. Body görgetés tiltása, ha nyitva van a modal */
body.modal-open {
    overflow: hidden !important;
}





.dn-container {
	
    display: inline-flex;
    align-items: center;    /* Ez tartja középen a kísérőket a névhez képest */
    gap: 6px;               /* Kicsit több hely a név körül, hogy ne legyen zsúfolt */
            /* Fixáljuk a sor magasságát */
	padding:4px 10px;
	
}

.dn-main {
    font-size: 1.65em !important;
    font-weight: bold;
	gap:5px !important;
    color: white !important;
    display: inline-block;
    line-height: 1;  padding-bottom:6px !important;
    /* A névnek nincs szüksége vertical-align-ra, mert a flex intézi */
}
[data-render-uid] .dn-main {
   -webkit-user-select: none !important;
    user-select: none !important;
}
[data-render-uid]{ cursor: not-allowed;}
.dn-prefixed img, .font-unicode{
    display: inline-flex;
    align-items: center;
    line-height: 1;
    user-select: none !important;
    gap: 2px;
    direction: ltr; 
	color:white !important; height: 1.1em !important;
}

.dn-suffixed img{
    display: inline-flex;
    align-items: center;
    line-height: 1;
    user-select: none !important;
    gap: 1px;
    direction: ltr; /* A suffix maradjon alapértelmezett */
	color:white !important; height: 1.1em !important; 
}

 



/* A színpaletta konténerének lebegővé tétele */
#dn_color_palette {
	
    position: absolute;
    z-index: 1050; /* A modal elemei fölé, de a suggest popup alá */
    background: #1a1a1a; /* Sötét, elegáns háttér */
    border: 1px solid #333 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    max-height: 220px; /* Fix magasság, hogy ne foglaljon sok helyet */
    width: 250px;      /* Kompakt szélesség */
    overflow-y: auto;  /* Ha sok a szín, görgethető legyen */
    padding: 10px !important;
    border-radius: 8px !important;
}

/* Szép vékony görgetősáv a palettának */
#dn_color_palette::-webkit-scrollbar {
    width: 5px;
}
#dn_color_palette::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

/* A szeparátor vonal finomítása */
.color-separator {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 6px 0;
}

.color-preview-circle:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* A speciális karakterek és emojik kurzora legyen 'move' */
.game-emoji {
    cursor: grab !important;
    user-select: none; /* Ne jelölje ki szövegként, ha húzni kezdjük */
    -webkit-user-drag: element; /* Safari/Chrome támogatás */
}

.game-emoji:active {
    cursor: grabbing !important;
}

/* Kijelölési stílus a célpontnak, ahová épp húzzuk (opcionális) */
[contenteditable]:focus {
    outline: none;
}
/* display_name.css vagy a stílusok közé */

/* Amikor éppen húzunk egy elemet, az "eredeti" helyén váljon áttetszővé */
.deco-char.dragging, .game-emoji.dragging {
    opacity: 0.4;
}

/* A célterület (input) kaphat egy finom keretet, ha felette van valami */
[contenteditable].drag-over {
    background-color: rgba(255, 255, 255, 0.05);
}


.color-separator {
    flex-basis: 100%;          /* <<< ÚJ SORT NYIT */
    text-align: center;
    margin: 10px 0 5px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #aaa;
    opacity: 0.8;
}


/* A font típusú webp-k (pl. a latin betűk) */

[data-render-uid] .game-font-char {
	height: 0.8em;
    filter:
        brightness(0)
        invert(93%)
        sepia(90%)
        saturate(5000%)
        hue-rotate(260deg)
        brightness(110%)
        contrast(105%)
        drop-shadow(1px 0 0 #000000)
		drop-shadow(-1px 0 0 #000000)
		drop-shadow(0 1px  0 #000000)
		drop-shadow(0 -1px  0 #000000);
	gap:0 !important;	
    margin-inline: 0 !important;
	padding-left:0px !important;
	padding-right:0px !important;
	
	-webkit-user-select: none;
    user-select: none;
	cursor:default !important;
	pointer-events: none !important;
}


#dn_preset_grid .game-font-char{
  height: 1.9em !important;
   filter:
        brightness(0)
       
        invert(100%) 
        sepia(0)
        saturate(1000%)
        hue-rotate(180deg)
        brightness()
        contrast(100%)
		/*drop-shadow(1px 0 0 #000000)
		
		drop-shadow(0 1px 0 #000000)*/
		drop-shadow(0 0 0.016em #000) drop-shadow(0.016em -0.016em 0 #000) drop-shadow(0 0 -0.016em #000) 
		;
   
	margin-inline: 0.005em !important;

}
.dn-ghost{z-index:99999 !important;}
/* A rendes emojik */
 
[data-render-uid] .game-emoji {
    display: inline-block;
    font-size: 0.8em !important; /* A névhez képest legyen kicsi */
    height: 1.2em;                 /* Az emojik ne legyenek nagyobbak a kisbetűnél */
    width: auto;
    object-fit: contain;
	 -webkit-user-select: none;
    user-select: none;
	gap: 8px;
	
}


.game-font-gold {
    filter:
        brightness(0)
        saturate(100%)
        invert(74%)
        sepia(89%)
        saturate(1500%)
        hue-rotate(10deg)
        brightness(110%)
        contrast(105%)
        drop-shadow(0 0 4px #ffd700);
}

.game-font-purple {
    filter:
        brightness(0)
        saturate(100%)
        invert(20%)
        sepia(90%)
        saturate(5000%)
        hue-rotate(260deg)
        brightness(110%)
        contrast(105%)
        drop-shadow(0 0 4px #b400ff);
}




.subcat-icon{max-height:20px !important ; width:auto;

}

#dn_preset_subcategories{gap:5px !important;}
#dn_preset_subcategories  .game-font-char{
  height: 2.8em !important;
 /* filter:
  
        invert(100%) 
        sepia(0)
        saturate(1000%)
        hue-rotate(180deg)
        brightness()
        contrast(100%)
		drop-shadow(1px 0 0 #000000)
		
		drop-shadow(0 1px 0 #000000)
		
		drop-shadow(0 0 0.019em #000) drop-shadow(0.019em -0.019em 0 #000) drop-shadow(0 0 -0.019em #000) 
		
		
		;*/
   
transform: translateY(-3px);
   vertical-align: -0.7em !important;

}
.fix-modal-footer{position:fixed; bottom:0px; width:100% !important;}


/* 1. Subcat gomb reszponzivitás és méret */
.symbol-subcat-btn {
    min-width: 45px;
    min-height: 45px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ne lógjon ki a betű */
}

.symbol-subcat-btn img {
    max-width: 35px;
    max-height: 35px;
    object-fit: contain;
}

/* 2. Színkörök a gombok helyett */
.symbol-style-btn {
    width: 25px;
    height: 25px;
    border-radius: 50%; /* Kör alakú */
    border: 2px solid #333;
    padding: 0;
    transition: transform 0.2s;
}

.symbol-style-btn:hover { transform: scale(1.2); }
.symbol-style-btn.active { border-color: #fff; box-shadow: 0 0 5px #fff; }

/* 3. Színkódok definiálása (a stílusod alapján) */
.symbol-style-btn #borderlands { background-color: #ff8800; }
.style-arany { background-color: #b5902b; }
.style-dark { background-color: #111; }
.style-kek { background-color: #0064c8; }
.style-turkisz { background-color: #00ff7f; }
.style-lila { background-color: #9600ff; }
.style-szurke { background-color: #82878c; }
.style-zold { background-color: #00ff00; }
.style-piros { background-color: #960000; }


	/* Az egész szerkesztő sor alapbeállításai */
	.name-editor-wrapper {
		background: #F2F2F2; /* Sötét háttér a jobb kontraszthoz */
		padding: 10px;
		border-radius: 8px;
		border: 1px solid #E0E0E0;
	}

/* =====================================================================
   DISPLAY NAME EDITOR – ÚJRAÍRT MÉRETEZÉS/IGAZÍTÁS
   Cseréld le ezzel az unicode.css-ben a következő szakaszokat:
     - .sub-input-wrapper ... .bt-l  (kb. 784-854. sor)
     - #dn_suffix .game-font-char... #dn_name  (kb. 856-899. sor)
     - #dn_suffix{...} #dn_prefix{...} #dn_prefix.active...  (kb. 940-979. sor)
     - a @media (max-width: 767.98px) blokkon BELÜL a
       .editor-input-row / .name-input-field / .main-name-preview-box /
       #dn_name / #dn_suffix .game-font-char / #dn_suffix .game-emoji
       részeket (kb. 985-1045. sor)

   MIÉRT ÍGY: a .game-font-char ÉS a .game-emoji egyaránt <img> elem
   (lásd display_name.js createEmojiImg()), előre legenerált .webp
   fájlokból -- NEM egy közös betűtípus glifjei azonos alapvonallal.
   Emiatt fájlonként/stílusonként MÁS a belső átlátszó margó, és
   semmilyen egyetlen transform:translateY(Npx) érték nem illik
   mindegyikre. A megoldás: a KONTÉNERT tesszük flexbe és
   align-items:center-re, így a böngésző minden gyereket (kép vagy
   szöveg) a sor KÖZEPÉRE központoz, függetlenül a képek egyedi belső
   paddingjétől -- nincs többé fájlonkénti vadászat a "jó" px-értékre.
===================================================================== */

/* A beviteli mezők burkolója (a prefix/suffix két oldala) */
.sub-input-wrapper {
	flex: 1 1 35%;
	min-width: 0;
}
.sub-input-wrapper input {
	min-height: 30px !important;
}

/* Az egyedi contenteditable mezők egységesítése.
   ÚJ: display:flex + align-items:center a robusztus, fájltípus-független
   vertikális központozáshoz. flex-wrap:nowrap + overflow-x:auto marad,
   hogy sok emoji esetén oldalra lehessen görgetni, ne törjön több sorba. */
.name-input-field {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 1.6em !important;
	
	color: #787878 !important;
	min-height: 60px;
	height: 65px;
	overflow-x: auto;
	overflow-y: hidden !important;
	white-space: nowrap;
	padding: 6px 10px;
	width: 100%;
}

.name-input-field:focus {
	border-color: #A1A1A1 !important;
	box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.05) !important;
	outline: none;
}

.name-input-field:empty::before {
	content: attr(placeholder);
	color: #555;
	font-style: italic;
}
/* A horgony a TÉNYLEGES flex-gyerek a sorban -- csak a tartalma
       szélessége kell neki (nem 30% fix), és NINCS rajta overflow:hidden,
       hogy a paletta ne vágódjon le. */
    .dn-name-anchor {
        display: inline-flex;
        flex: 0 1 auto;
        width: auto;
        min-width: 60px;
        max-width: 45%;
        height: 60px;
    }

    /* #dn_name csak KITÖLTI a horgonyt -- az overflow:hidden ITT marad,
       mert csak a SAJÁT szövegét vágja, a palettát már nem érinti,
       hiszen az a horgony szintjén, testvérként van. */
    .main-name-preview-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: #222;
        border: 0px solid #444;
        border-radius: 0px;
        font-weight:normal;
        text-align: center;
        user-select: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }



/* Törlés gombok fix méretezése */
.dn-clear-btn {
	position: absolute;
	width: 32px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}

.bt-r { right: 10px; }
.bt-l { left: 8px; }

/* =====================================================================
   A beszúrt karakter-képek (font-glyph ÉS emoji egyaránt <img>) --
   MOSTANTÓL EGYSÉGES box-modell, nincs per-elem translateY hack.
   A vertikális központozást a szülő (.name-input-field / #dn_name)
   align-items:center-je adja, ITT csak a MÉRETET határozzuk meg.
===================================================================== */
#dn_suffix .game-font-char,
#dn_prefix .game-font-char,
#dn_name .game-font-char {
	display: inline-block;
	flex-shrink: 0;
	height: 1.8em;
	width: auto;
	object-fit: contain;
	cursor: grab !important;
	-webkit-user-select: all;
	user-select: all;
	vertical-align: middle; /* fallback, ha valahol mégsem flex a szülő */
}

#dn_suffix .game-emoji,
#dn_prefix .game-emoji,
#dn_name .game-emoji {
	display: inline-block;
	flex-shrink: 0;
	height: 1.6em; /* kicsit kisebb, mint a font-glyph, hogy ne domináljon a szöveg mellett */
	width: auto;
	object-fit: contain;
	-webkit-user-select: all;
	user-select: all;
	vertical-align: middle;
}

/* A középső fix név előnézet doboza -- SZINTÉN flex + align-items:center,
   hogy a benne megjelenő glyph-képek ugyanúgy központozva legyenek,
   mint a prefix/suffix mezőkben. */
 #dn_name {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 2px 8px;
        border-radius: 6px;
        border: 0px solid #ced4da;
        background: #f8f9fa;
        font-size: 2.5em ;
        width: 100%;
        height: 100%;      /* <-- csere: min-height: 39px helyett */
        white-space: nowrap;
        user-select: none !important;
        overflow: hidden;
    }



/* A karakterlimit üzenet lebegővé tétele (Toast stílus) -- változatlan */
#dn_limit_msg {
	display: none;
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	background: rgba(212, 82, 82, 0.95) !important;
	color: #ffffff !important;
	font-weight: bold;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 16px !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.4);
	pointer-events: none;
	transition: all 0.2s ease-in-out;
	white-space: nowrap;
}
.editor-input-row {
		gap: 0px !important;
		padding: 0 !important;
		margin:0 !important;
	}
@media (max-width: 576px) {
	#dn_limit_msg {
		top: 5px;
		font-size: 0.75rem;
		padding: 4px 12px !important;
	}
}


/* Suffix balra, prefix jobbra zárva -- flexben justify-content-tal,
   NEM text-align-gal (az utóbbi nem hatna a flex gyerekekre). */
#dn_suffix { justify-content: flex-start; }
#dn_prefix { justify-content: flex-end; }

#dn_prefix.active,
#dn_name.active,
#dn_suffix.active {
	
}


/* =====================================================================
   MOBIL FINOMHANGOLÁS -- UGYANAZ a flex-alapú technika, csak kisebb
   méretekkel. Nincs többé külön translateY érték mobilra/desktopra,
   mert a központozást a flex adja, nem kézi eltolás.
===================================================================== */
@media (max-width: 767.98px) {
	#displayNameText { font-size: 0.75rem !important; }

	.editor-input-row {
		gap: 0px !important;
		padding: 0 !important;
		margin:0 !important;
	}

	.name-input-field {
		font-size: 1.0em !important;
		padding: 3px 6px;
		min-height: 35px;
		height: 35px;
	}

	.main-name-preview-box {
		min-width: 80px;
		height: 35px;
		font-size: 0.85rem;
	}

	.dn-clear-btn {
		width: 26px;
		font-size: 0.75rem;
	}

	#dn_name {
		padding: 3px 6px;
		height: 35px;
		min-height: 35px;
		min-width: 38% !important;
	}

	#dn_suffix .game-font-char,
	#dn_prefix .game-font-char,
	#dn_name .game-font-char {
		height: 1.4em;
	}

	#dn_suffix .game-emoji,
	#dn_prefix .game-emoji,
	#dn_name .game-emoji {
		height: 1.2em;
	}

	/* --- PRESET FONT GOMBOK FEJLESZTÉSE --- (változatlan, ha kell folytasd innen) */
	.preset {
		font-size: 1.0rem;
		font-weight: normal;
		transition: all 0.2s ease;
	}
}