/*
 * Happy Tunes Guestbook. Builds on the Happy Tunes theme (.ht-btn and the
 * --ht-* colours); falls back to neutral colours elsewhere.
 */
.htg { --htg-r: 18px; margin: 0 0 1.5em; }
.htg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.htg-count { margin: 0; color: var(--ht-dim, #666); font-weight: 700; }
.htg-count b { color: var(--ht-text, #222); font-size: 1.25em; }

/* ---------- form ---------- */
.htg-write { margin: 0 0 26px; padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: var(--ht-surface, #fff); border: 1px solid var(--ht-border2, #ddd); box-shadow: var(--ht-shadow-s, none); animation: htg-in .35s cubic-bezier(.2, .7, .3, 1); }
.htg-write[hidden] { display: none; }
@keyframes htg-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.htg-intro { margin: 0 0 16px; color: var(--ht-dim, #666); }
.htg-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.htg-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.htg-label { font-weight: 800; font-size: 14px; color: var(--ht-text, #222); }
.htg-label b { color: var(--ht-pink, #e11d74); }
.htg input[type="text"], .htg input[type="email"], .htg textarea {
	width: 100%; margin: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--ht-border2, #ccc);
	background: var(--ht-surface2, #fafafa); color: var(--ht-text, #222); font: inherit; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.htg input:focus, .htg textarea:focus { outline: none; border-color: var(--ht-pink, #e11d74); box-shadow: 0 0 0 3px var(--ht-gpink, rgba(225, 29, 116, .2)); }
.htg textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.htg-field.is-invalid input, .htg-field.is-invalid textarea { border-color: #ff5b6e; }
.htg-error { min-height: 0; font-size: 13px; font-weight: 700; color: #ff6b81; }
.htg-error:empty { display: none; }

.htg-stickers { margin: 0 0 14px; padding: 0; border: 0; }
.htg-stickers legend { margin-bottom: 8px; padding: 0; }
.htg-sticker-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 172px; overflow-y: auto; padding: 4px 2px; }
.htg-st { position: relative; cursor: pointer; }
.htg-st input { position: absolute; opacity: 0; pointer-events: none; }
.htg-st-face {
	display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px;
	border: 1px solid var(--ht-border2, #ddd); background: var(--ht-surface2, #f5f5f5); font-size: 24px; line-height: 1;
	transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .15s, background-color .15s, box-shadow .15s;
}
.htg-st-face img { width: 32px; height: 32px; object-fit: contain; }
.htg-st-more {
	display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px dashed var(--ht-border2, #ccc);
	background: transparent; color: var(--ht-dim, #666); font: inherit; font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.htg-st-more:hover { border-color: var(--ht-pink, #e11d74); color: var(--ht-text, #222); background: transparent; }
.htg-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.htg-photo { display: block; max-width: min(100%, 320px); border-radius: 12px; overflow: hidden; border: 1px solid var(--ht-border, #e5e5e5); }
.htg-photo img { display: block; width: 100%; height: auto; transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.htg-photo:hover img { transform: scale(1.04); }
.htg-st:hover .htg-st-face { transform: translateY(-2px) rotate(-6deg); border-color: var(--ht-pink, #e11d74); }
.htg-st input:checked + .htg-st-face { transform: scale(1.12); border-color: transparent; background: var(--ht-pink-fill, #d81b6a); box-shadow: 0 8px 20px -8px var(--ht-gpink, rgba(225, 29, 116, .5)); }
.htg-st input:focus-visible + .htg-st-face { outline: 2px solid var(--ht-pink, #e11d74); outline-offset: 2px; }

.htg-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.htg-emoji-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ht-border2, #ccc);
	background: transparent; color: var(--ht-dim, #666); font: inherit; font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.htg-emoji-btn:hover, .htg-emoji-btn[aria-expanded="true"] { border-color: var(--ht-pink, #e11d74); color: var(--ht-text, #222); background: transparent; }
.htg-counter { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ht-mute, #888); font-variant-numeric: tabular-nums; }
.htg-counter.is-near { color: var(--ht-pink, #e11d74); }
.htg-emoji-panel { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 0 14px; padding: 10px; max-height: 190px; overflow-y: auto; border-radius: 14px; background: var(--ht-surface2, #f5f5f5); border: 1px solid var(--ht-border, #e5e5e5); }
.htg-emoji-panel[hidden] { display: none; }
.htg-emoji-pick { display: inline-flex; padding: 5px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: transform .15s, background-color .15s; }
.htg-emoji-pick:hover { transform: scale(1.18); background: var(--ht-surface, #fff); }
.htg-emoji-pick img { width: 28px; height: 28px; object-fit: contain; }

.htg-preview { margin: 4px 0 18px; }
.htg-preview[hidden] { display: none; }
.htg-preview .htg-label { margin: 0 0 8px; }
.htg-preview-note { margin-left: 6px; font-weight: 700; font-size: 12.5px; color: var(--ht-mute, #888); }
.htg-entry.is-preview { border-style: dashed; border-color: var(--ht-border2, #ccc); box-shadow: none; background: var(--ht-surface2, #fafafa); }
.htg-preview-empty { color: var(--ht-mute, #888); font-style: italic; }
.htg-heart.is-static { cursor: default; pointer-events: none; opacity: .6; }
.htg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.htg-consent { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; margin: 4px 0 16px; font-size: 14px; color: var(--ht-dim, #666); }
.htg-consent input { margin-top: 3px; accent-color: var(--ht-pink, #e11d74); }
.htg-consent a { color: var(--ht-pink, #e11d74); }
.htg-consent .htg-error { grid-column: 2; }
.htg-send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.htg-status { font-weight: 700; color: var(--ht-dim, #666); }
.htg-status.is-error { color: #ff6b81; }
.htg-done { padding: 24px 10px; text-align: center; outline: none; }
.htg-done[hidden] { display: none; }
.htg-done-icon { font-size: 54px; animation: htg-pop .7s cubic-bezier(.3, 1.6, .5, 1); }
.htg-done p { margin: 8px auto 0; max-width: 520px; font-weight: 700; }
@keyframes htg-pop { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- entries ---------- */
.htg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ht-content .htg-list li { margin: 0; }
.htg-entry {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-radius: 20px;
	background: var(--ht-surface, #fff); border: 1px solid var(--ht-border, #e5e5e5); box-shadow: var(--ht-shadow-s, none);
	scroll-margin-top: 110px;
}
.htg-entry.is-new { animation: htg-in .45s cubic-bezier(.2, .7, .3, 1) both; }
.htg-entry:target { border-color: var(--ht-pink, #e11d74); box-shadow: 0 0 0 3px var(--ht-gpink, rgba(225, 29, 116, .25)); }
.htg-avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: none; width: 54px; height: 54px; border-radius: 18px;
	background: var(--ht-surface2, #f5f5f5); font-size: 30px; line-height: 1; overflow: hidden;
}
.htg-avatar img { width: 44px; height: 44px; object-fit: contain; }
.htg-avatar.is-letter { color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 26px; }
.htg-avatar.tone-0 { background: linear-gradient(135deg, #ff3f8e, #b25cff); }
.htg-avatar.tone-1 { background: linear-gradient(135deg, #6d7cff, #31e3ea); }
.htg-avatar.tone-2 { background: linear-gradient(135deg, #ff7e5f, #ffc24b); }
.htg-avatar.tone-3 { background: linear-gradient(135deg, #b25cff, #6d7cff); }
.htg-avatar.tone-4 { background: linear-gradient(135deg, #31e3ea, #3ddc97); }
.htg-avatar.tone-5 { background: linear-gradient(135deg, #ff3f8e, #ff7e5f); }
.htg-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.htg-name { font-size: 16.5px; color: var(--ht-text, #222); }
.htg-char { padding: 1px 9px; border-radius: 999px; background: var(--ht-surface2, #f5f5f5); color: var(--ht-dim, #666); font-size: 12.5px; font-weight: 800; }
.htg-meta time { margin-left: auto; color: var(--ht-mute, #888); font-size: 12.5px; font-weight: 700; }
.htg-text { color: var(--ht-text, #222); line-height: 1.6; overflow-wrap: anywhere; }
.htg-emoji { width: 24px; height: 24px; vertical-align: -6px; object-fit: contain; }
.htg-reply { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(120deg, rgba(255, 63, 142, .12), rgba(178, 92, 255, .08)); border: 1px solid rgba(255, 63, 142, .25); }
.htg-band-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 20px; line-height: 28px; text-align: center; }
.htg-reply-by { display: block; font-size: 13px; color: var(--ht-pink, #e11d74); }
.htg-reply-text { font-size: 14.5px; line-height: 1.55; color: var(--ht-text, #222); }
.htg-heart {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--ht-border2, #ddd);
	background: transparent; color: var(--ht-dim, #666); font: inherit; font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: normal; cursor: pointer;
	transition: border-color .15s, color .15s, background-color .15s;
}
.htg-heart:hover { border-color: var(--ht-pink, #e11d74); color: var(--ht-pink, #e11d74); background: transparent; }
.htg-heart-icon { display: inline-block; font-size: 15px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.htg-heart[aria-pressed="true"] { border-color: transparent; background: var(--ht-pink-fill, #d81b6a); color: #fff; cursor: default; }
.htg-heart.is-pop .htg-heart-icon { animation: htg-heart .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes htg-heart { 0% { transform: scale(1); } 35% { transform: scale(1.7) rotate(-12deg); } 100% { transform: scale(1); } }
.htg-more { display: flex; margin: 22px auto 0; }
.htg-more[hidden] { display: none; }
.htg-empty { padding: 26px; text-align: center; border-radius: 18px; border: 1px dashed var(--ht-border2, #ccc); color: var(--ht-dim, #666); font-weight: 700; }

/* ---------- front page card ---------- */
.htg-mini { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.htg-mini-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--ht-surface2, #f5f5f5); border: 1px solid var(--ht-border, #e5e5e5); color: inherit; text-decoration: none; transition: border-color .15s, transform .2s cubic-bezier(.2, .7, .3, 1); }
.htg-mini-item:hover { border-color: var(--ht-pink, #e11d74); transform: translateX(3px); color: inherit; }
.htg-mini .htg-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
.htg-mini .htg-avatar img { width: 30px; height: 30px; }
.htg-mini .htg-avatar.is-letter { font-size: 18px; }
.htg-mini-body { min-width: 0; }
.htg-mini-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.htg-mini-top b { color: var(--ht-text, #222); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htg-mini-top time { flex: none; color: var(--ht-mute, #888); font-size: 11.5px; font-weight: 700; }
.htg-mini-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ht-dim, #666); font-size: 13.5px; line-height: 1.45; }
.htg-mini-text .htg-emoji { width: 18px; height: 18px; vertical-align: -4px; }
.htg-mini-write { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--ht-pink, #e11d74); }
.htg-mini-empty { color: var(--ht-dim, #666); }

@media (max-width: 760px) {
	.htg-row { grid-template-columns: 1fr; gap: 0; }
	.htg-entry { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
	.htg-entry .htg-avatar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; font-size: 24px; border-radius: 14px; }
	.htg-entry .htg-avatar img { width: 34px; height: 34px; }
	.htg-meta { padding-right: 52px; }
	.htg-meta time { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.htg-write, .htg-entry.is-new, .htg-done-icon, .htg-heart.is-pop .htg-heart-icon { animation: none; }
	.htg-st-face, .htg-mini-item { transition: none; }
}