/* thai-name-generator (RT-FUN-100) — Name Engine tool */
.kn-tool { display: flex; flex-direction: column; gap: 14px; }

.kn-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kn-input { flex: 1 1 200px; padding: 12px 14px; border: 1.5px solid #e6e2d8; border-radius: 10px; font-size: 16px; color: #14233b; }
.kn-seg, .kn-modes { display: inline-flex; border: 1.5px solid #e6e2d8; border-radius: 10px; overflow: hidden; }
.kn-seg button, .kn-modes button { background: #fff; border: 0; padding: 11px 14px; font-size: 13.5px; color: #6b6760; cursor: pointer; }
.kn-seg button + button, .kn-modes button + button { border-left: 1px solid #e6e2d8; }
.kn-seg button.on, .kn-modes button.on { background: #fff3ec; color: #e8622a; font-weight: 700; }
.kn-modes { align-self: flex-start; }
.kn-btn { border: 0; border-radius: 10px; padding: 12px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.kn-go { background: #e8622a; color: #fff; }
.kn-rand { background: #fff; color: #14233b; border: 1.5px solid #e6e2d8; }

/* card content (rendered inside the 1080×1350 sc-card). Thai names run longer than
   CJK glyphs, so the name is sized smaller with a safe width + line-height. */
.kn-card { align-items: center; text-align: center; justify-content: flex-start; }
.kn-card .sc-eyebrow { margin-top: 30px; color: #b45309; font-weight: 800; letter-spacing: 5px; font-size: 30px; }
.kn-name-out { margin-top: 56px; max-width: 92%; font-family: 'Noto Sans Thai', 'Leelawadee UI', sans-serif; font-size: 132px; line-height: 1.2; color: #14233b; font-weight: 700; }
.kn-reading { margin-top: 30px; font-size: 46px; color: #46566f; font-weight: 600; }
.kn-meaning { margin-top: 38px; width: 76%; background: rgba(255, 253, 247, .74); border: 1px solid rgba(20, 35, 59, .08); border-radius: 22px; padding: 26px 30px; }
.kn-m-native { font-family: 'Noto Sans Thai', 'Leelawadee UI', sans-serif; font-size: 52px; font-weight: 700; line-height: 1.3; color: #14233b; }
.kn-m-en { margin-top: 8px; font-size: 36px; font-style: italic; color: #46566f; }
.kn-m-ix { margin-top: 6px; font-size: 34px; color: #46566f; }

/* Thai nickname (ชื่อเล่น) pill — the short everyday name */
.kn-nick { margin-top: 26px; width: 76%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(232, 98, 42, .10); border: 1px solid rgba(232, 98, 42, .28); border-radius: 22px; padding: 20px 26px; }
.kn-nick:empty { display: none; }
.kn-nick-label { font-size: 26px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: #b45309; }
.kn-nick-th { font-family: 'Noto Sans Thai', 'Leelawadee UI', sans-serif; font-size: 64px; font-weight: 700; line-height: 1.1; color: #14233b; }
.kn-nick-ro { font-size: 34px; color: #46566f; }

/* copy box (outside the card) */
.kn-copybox { display: flex; align-items: center; gap: 10px; border: 1.5px dashed #e6e2d8; border-radius: 10px; padding: 10px 12px; background: #f7f6f3; }
.kn-copytext { flex: 1; font-size: 15px; color: #14233b; }
.kn-copybtn { border: 0; background: #14233b; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 8px; cursor: pointer; }

/* background picker */
.kn-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 640px) { .kn-picker { grid-template-columns: repeat(8, 1fr); } }
.kn-thumb { position: relative; aspect-ratio: 4/5; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0; background: none; }
.kn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-thumb.sel { border-color: #e8622a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e8622a; }