/* Vinh danh — the celebration card, the post banner, the hall and the
   teacher's award form. Same "royal academy" direction as network.css:
   black lacquer, gold leaf, a serif display face. The card is a "sắc phong"
   (royal decree) that unrolls over the page while fanfare.js fires. */

.hn-overlay,
.hn-page,
.hn-banner {
  --hn-lacquer: #10162a;
  --hn-lacquer-2: #1d2547;
  --hn-gold: #d9b262;
  --hn-gold-hi: #f4e0a6;
  --hn-gold-deep: #8a5f16;
  --hn-seal: #a51d2d;
  --hn-serif: "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
}

/* ---------- Buttons ---------- */
.hn-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(180deg, #ecca7c, #c79a3e 55%, #b0852d);
  color: #2a1d05;
  border: 1px solid #9c7424;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px rgba(138, 95, 22, 0.3);
  font-weight: 700;
}
.hn-btn-gold:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.hn-btn-gold:disabled, .hn-btn-gold.is-cheered { opacity: 0.85; cursor: default; }
.hn-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--hn-gold-hi);
  border: 1px solid color-mix(in srgb, var(--hn-gold) 55%, transparent);
  text-decoration: none;
  font-weight: 600;
}
.hn-btn-ghost:hover { background: rgba(217, 178, 98, 0.14); }
.hn-mute {
  background: none;
  border: 0;
  color: rgba(236, 230, 214, 0.55);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}
.hn-mute:hover { color: var(--hn-gold-hi); }

/* ---------- The celebration card (sắc phong) ---------- */
.hn-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;  /* under the fanfare canvas (9998) so sparks fall in front */
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 35%, rgba(29, 37, 71, 0.72), rgba(8, 11, 22, 0.86));
  opacity: 0;
  transition: opacity 220ms ease;
}
.hn-overlay.is-open { opacity: 1; }
.hn-overlay.is-leaving { opacity: 0; }

.hn-card {
  position: relative;
  isolation: isolate;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 2rem 1.6rem 1.2rem;
  text-align: center;
  color: #ece6d6;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(217, 178, 98, 0.28), transparent 70%),
    linear-gradient(165deg, var(--hn-lacquer-2), var(--hn-lacquer) 65%);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(217, 178, 98, 0.5);
  transform: translateY(18px) scale(0.94);
  transition: transform 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.hn-overlay.is-open .hn-card { transform: none; }
.hn-card--me { box-shadow: 0 30px 90px -18px rgba(217, 178, 98, 0.45), inset 0 0 0 2px var(--hn-gold); }
.hn-card-ornament {
  position: absolute;
  inset: 9px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--hn-gold) 40%, transparent);
  border-radius: 14px;
  background-image: repeating-linear-gradient(45deg, rgba(217, 178, 98, 0.05) 0 1px, transparent 1px 20px);
}
.hn-card-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hn-gold);
}
.hn-card-portrait {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fdf6e3, #e9dcc0);
  box-shadow: 0 0 0 3px var(--hn-gold), 0 0 0 7px rgba(217, 178, 98, 0.25), 0 0 40px rgba(244, 224, 166, 0.45);
  animation: hn-glow 2.4s ease-in-out infinite;
}
.hn-card-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hn-card-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  border-radius: 50%;
  background: var(--hn-seal);
  box-shadow: 0 0 0 2px var(--hn-gold-hi), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.hn-card-title {
  margin: 0;
  font-family: var(--hn-serif);
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff8e6;
}
.hn-card-points {
  margin: 0.35rem 0 0.2rem;
  font-family: var(--hn-serif);
  font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff4c2, #f5c542 55%, #c79a3e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 197, 66, 0.35));
}
.hn-card-points::after {
  content: " điểm";
  font-size: 0.34em;
  -webkit-text-fill-color: var(--hn-gold-hi);
}
.hn-card-kind { margin: 0; font-size: 0.85rem; color: var(--hn-gold-hi); }
.hn-card-reason {
  margin: 0.9rem auto 0;
  max-width: 34ch;
  font-family: var(--hn-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: #f7efd9;
}
.hn-card-note { margin: 0.8rem 0 0; font-size: 0.85rem; line-height: 1.5; color: rgba(236, 230, 214, 0.75); }
.hn-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.hn-card .hn-mute { margin-top: 0.7rem; }

@keyframes hn-glow {
  0%, 100% { box-shadow: 0 0 0 3px var(--hn-gold), 0 0 0 7px rgba(217, 178, 98, 0.25), 0 0 30px rgba(244, 224, 166, 0.35); }
  50% { box-shadow: 0 0 0 3px var(--hn-gold-hi), 0 0 0 9px rgba(217, 178, 98, 0.18), 0 0 55px rgba(244, 224, 166, 0.6); }
}

/* ---------- Celebration post banner ---------- */
.hn-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.3rem;
  align-items: center;
  margin-bottom: var(--sp-4);
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  color: #ece6d6;
  background:
    radial-gradient(ellipse 55% 110% at 0% 50%, rgba(217, 178, 98, 0.3), transparent 70%),
    linear-gradient(160deg, var(--hn-lacquer-2), var(--hn-lacquer) 60%);
  box-shadow: 0 24px 60px -26px rgba(16, 22, 42, 0.6), inset 0 0 0 1px rgba(217, 178, 98, 0.45);
}
.hn-banner-ornament {
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--hn-gold) 38%, transparent);
  border-radius: calc(var(--radius-lg) - 5px);
}
.hn-banner-portrait { position: relative; }
.hn-banner-portrait .hn-card-badge { width: 34px; height: 34px; font-size: 1.05rem; }
.hn-banner-portrait > :first-child {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--hn-gold), 0 0 28px rgba(244, 224, 166, 0.4);
}
.hn-banner-name { margin: 0; font-family: var(--hn-serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; }
.hn-banner-name a { color: #fff8e6; text-decoration: none; }
.hn-banner-name a:hover { text-decoration: underline; text-decoration-color: var(--hn-gold); }
.hn-banner-points {
  margin: 0.15rem 0 0;
  font-family: var(--hn-serif);
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(180deg, #fff4c2, #f5c542 60%, #c79a3e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hn-banner-reason { margin: 0.3rem 0 0; font-family: var(--hn-serif); font-style: italic; color: #f7efd9; }
.hn-banner-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hn-cheer-total { font-weight: 700; color: var(--hn-gold-hi); }

/* Honour posts on the feed: a gold-leaf edge so they read as special. */
.nw-topic--honor {
  background: linear-gradient(180deg, #f4e0a6, #d9b262) !important;
  color: #3a2806 !important;
  border-color: #b0852d !important;
}
.nw-post:has(.nw-topic--honor) {
  box-shadow: inset 0 0 0 1px rgba(217, 178, 98, 0.7), 0 10px 30px -18px rgba(138, 95, 22, 0.55);
  background-image: linear-gradient(180deg, rgba(244, 224, 166, 0.18), transparent 120px);
}

/* ---------- Hall ---------- */
.hn-hero-inner { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.hn-hero-h { color: #fff8e6; }
.hn-hero-lede { max-width: 60ch; margin: 0.6rem 0 1rem; line-height: 1.6; color: rgba(236, 230, 214, 0.82); }
.hn-page .nw-profile-cols { margin-top: var(--sp-5); }
.hn-page .nw-topic-filter { margin-bottom: var(--sp-3); }

.hn-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.hn-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, #d9b262 45%, transparent);
  box-shadow: 0 8px 24px -18px rgba(138, 95, 22, 0.5);
}
.hn-entry--revoked { opacity: 0.55; }
.hn-entry-portrait { position: relative; align-self: start; }
.hn-entry-badge {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  border-radius: 50%;
  background: #a51d2d;
  box-shadow: 0 0 0 2px #f4e0a6;
}
.hn-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.hn-entry-name { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; font-weight: 800; color: var(--text-color); text-decoration: none; }
.hn-entry-name:hover { color: var(--accent-color); }
.hn-entry-points { font-weight: 800; color: #8a5f16; font-variant-numeric: tabular-nums; }
.hn-entry-kind { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--text-muted); }
.hn-entry-reason { margin: 0.4rem 0 0; font-style: italic; line-height: 1.5; color: var(--text-color); }
.hn-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 0.55rem; }
.hn-entry-link { font-size: 0.85rem; font-weight: 600; color: #8a5f16; text-decoration: none; }
.hn-entry-link:hover { text-decoration: underline; }
.hn-cheer {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, #d9b262 65%, transparent);
  background: color-mix(in srgb, #f4e0a6 35%, #fff);
  color: #5c3f0c;
  cursor: pointer;
}
.hn-cheer:hover:not(:disabled) { background: #f4e0a6; }
.hn-cheer.is-cheered, .hn-cheer:disabled { background: #d9b262; color: #2a1d05; cursor: default; }
.hn-cheer--static { cursor: default; background: transparent; }
.hn-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); border: 1px dashed color-mix(in srgb, #d9b262 50%, transparent); border-radius: var(--radius-lg); }

.hn-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.hn-board li { display: grid; grid-template-columns: 1.4rem auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.hn-board a { color: var(--text-color); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-board-pos { font-family: "Playfair Display", Georgia, serif; font-weight: 800; color: #8a5f16; text-align: center; }
.hn-board-n { font-weight: 700; color: #8a5f16; font-variant-numeric: tabular-nums; }

/* ---------- Profile ---------- */
.hn-title-hunter { background: linear-gradient(180deg, #f4e0a6, #d9b262) !important; color: #3a2806 !important; }
.hn-reward--revoked { opacity: 0.5; text-decoration: line-through; }
.hn-hall-link { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--gold-600); text-decoration: none; }
.hn-hall-link:hover { text-decoration: underline; }

/* ---------- Teacher form ---------- */
.hn-teacher-head { margin-bottom: var(--sp-4); }
.hn-form {
  display: grid;
  gap: var(--sp-3);
  padding: 1.3rem;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
}
.hn-form-grid { display: grid; grid-template-columns: 1fr 160px; gap: var(--sp-3); }
.hn-field { display: grid; gap: 0.35rem; }
.hn-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.hn-kinds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.hn-kinds legend { margin-bottom: 0.35rem; }
.hn-kind input { position: absolute; opacity: 0; pointer-events: none; }
.hn-kind-face {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  font-weight: 600;
  cursor: pointer;
}
.hn-kind-face small { color: var(--text-muted); font-weight: 500; }
.hn-kind input:checked + .hn-kind-face { border-color: #b0852d; background: color-mix(in srgb, #f4e0a6 55%, #fff); box-shadow: 0 0 0 2px rgba(217, 178, 98, 0.35); }
.hn-kind input:focus-visible + .hn-kind-face { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.hn-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.hn-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.hn-post-fields { display: grid; gap: var(--sp-3); padding: 1rem; border-radius: var(--radius-md, 12px); background: color-mix(in srgb, #f4e0a6 16%, transparent); }
.hn-submit { justify-self: start; padding: 0.7rem 1.6rem; font-size: 1rem; }
.hn-table-wrap { overflow-x: auto; }
.hn-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.hn-table th, .hn-table td { padding: 0.55rem 0.6rem; text-align: left; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.hn-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.hn-row--revoked { opacity: 0.5; }

@media (max-width: 640px) {
  .hn-form-grid { grid-template-columns: 1fr; }
  .hn-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hn-banner-actions { justify-content: center; }
  .hn-card { padding: 1.6rem 1.1rem 1rem; }
}