.asf-ak-name__maker { margin-top: clamp(28px, 4vw, 48px); min-width: 0; }
.asf-ak-name__controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 28px; }
.asf-ak-name__controls[hidden], .asf-ak-name__input[hidden], .asf-ak-name__button[hidden], .asf-ak-name__placeholder[hidden] { display: none; }
.asf-ak-name__field { flex: 1 1 240px; min-width: 0; }
.asf-ak-name__label { display: block; margin-bottom: 8px; font-family: var(--asf-ak-display); font-weight: 700; }
.asf-ak-name__input { box-sizing: border-box; width: 100%; min-width: 0; padding: 14px 18px; border: var(--asf-ak-line) solid var(--asf-ak-ink); border-radius: 12px; color: var(--asf-ak-ink); background: var(--asf-ak-paper-lt); font: 600 1.2rem var(--asf-ak-round); }
.asf-ak-name__button { max-width: 100%; padding: 16px 22px; border: var(--asf-ak-line) solid var(--asf-ak-ink); border-radius: 12px; background: var(--asf-ak-paper); color: var(--asf-ak-ink); box-shadow: var(--asf-ak-shadow); font: 700 1.1rem var(--asf-ak-round); cursor: pointer; transition: transform .2s var(--asf-ak-ease); overflow-wrap: anywhere; }
.asf-ak-name__button:hover:not(:disabled) { transform: translateY(-3px); }
.asf-ak-name__button:disabled { opacity: .6; cursor: wait; }
.asf-ak-name__input:focus-visible, .asf-ak-name__button:focus-visible { outline: 3px solid var(--asf-ak-ink); outline-offset: 5px; }
/* Light paper board: her art has black outlines, so it needs a light ground (as on the card). */
.asf-ak-name__board { container-type: inline-size; padding: clamp(16px, 3vw, 36px); border: 4px solid var(--asf-ak-ink); border-radius: 18px; background: var(--asf-ak-white) radial-gradient(circle, rgba(28, 23, 20, .07) 1.2px, transparent 1.7px) 0 0 / 14px 14px; box-shadow: var(--asf-ak-shadow-lg); }
.asf-ak-name__tiles { --asf-ak-name-size: clamp(54px, 18vw, 126px); display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 12px clamp(14px, 2.4cqw, 26px); padding-top: 12px; }
.asf-ak-name__tiles--long { --asf-ak-name-size: clamp(48px, 12vw, 90px); }
@supports (width: 1cqw) {
	.asf-ak-name__tiles { --asf-ak-name-size: clamp(54px, 21cqw, 126px); }
	.asf-ak-name__tiles--long { --asf-ak-name-size: clamp(48px, 12cqw, 90px); }
}
.asf-ak-name__tiles--empty { opacity: .35; }
.asf-ak-name__tile { box-sizing: border-box; position: relative; isolation: isolate; display: grid; place-items: center; flex: 0 0 var(--asf-ak-name-size); width: var(--asf-ak-name-size); height: var(--asf-ak-name-size); margin-top: calc(var(--asf-ak-name-size) * 1.05); border: var(--asf-ak-line) solid var(--asf-ak-ink); border-radius: 14px; background: var(--asf-ak-name-colour); }
.asf-ak-name__tile::before { content: ""; position: absolute; inset: 5px; border: 3px dotted var(--asf-ak-paper-lt); border-radius: 9px; pointer-events: none; }
.asf-ak-name__letter { position: relative; z-index: 1; font: 700 calc(var(--asf-ak-name-size) * .62)/1 var(--asf-ak-round); color: var(--asf-ak-white); -webkit-text-stroke: 3px var(--asf-ak-ink); paint-order: stroke fill; }
.asf-ak-name__cut { position: absolute; z-index: 0; bottom: 78%; left: -22%; width: 144%; height: 118%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.asf-ak-name__tile--soon { background: #3A322C; border-style: dashed; border-color: #8A7E73; }
.asf-ak-name__tile--soon::before { border-color: #8A7E73; }
.asf-ak-name__tile--soon .asf-ak-name__letter { transform: translateY(-8%); }
.asf-ak-name__soon { position: absolute; bottom: 6%; left: 5%; right: 5%; overflow-wrap: anywhere; text-align: center; color: var(--asf-ak-paper-lt); font: 600 clamp(.5rem, 1.3vw, .75rem)/1 var(--asf-ak-round); }
.asf-ak-name__gap { flex: 0 0 calc(var(--asf-ak-name-size) * .3); }
.asf-ak-name__placeholder { margin: 20px 0 0; text-align: center; color: var(--asf-ak-ink-soft); font-family: var(--asf-ak-round); }
.asf-ak-name__note, .asf-ak-name__status { margin: 16px 0 0; color: var(--asf-ak-ink); font: 400 .95rem/1.5 var(--asf-ak-display); text-align: center; }
.asf-ak-name__status:empty { display: none; }
@media (max-width: 480px) {
	.asf-ak-name__button { width: 100%; }
	.asf-ak-name__tiles { gap: 8px; }
	.asf-ak-name__letter { -webkit-text-stroke-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
	.asf-ak-name__button, .asf-ak-name__tile { transition: none; animation: none; }
	.asf-ak-name__button:hover:not(:disabled) { transform: none; }
}