/* 용병단 명판(/hall/) — 게임 명판(키트 판 · 제목판 · 칩)을 사이트 판 위에 그린다. 그리기는 site/hall.js.
   플레이어가 지은 이름은 부분 글꼴(chars.txt) 밖 글자가 많아, 이 페이지만 갈무리11 전체판을 받는다(스펙 5-1). */
@font-face { font-family: "GalmuriHall"; src: url("/font/galmuri11-full.woff2") format("woff2"); font-weight: 400; font-display: swap; }

.cm-main #hall-h1 { font-family: "GalmuriHall", var(--o-pixel); font-weight: 400; overflow-wrap: anywhere; }

.hall {
  --h-ink: #eee6d5; --h-dim: #9ba8b8; --h-gold: #f2ca74; --h-btn-ink: #fff3cf;
  --tip1: #cfd8e3; --tip2: #7fd9c4; --tip3: #ffd75e;   /* godot/ui/tokens.gd TIP_INK — 게임 상점 · 상단 바와 같은 색 */
  margin: 8px 0 18px; display: flex; justify-content: center;
}
.plaque {
  position: relative; width: 100%; max-width: 380px; box-sizing: border-box; color: var(--h-ink);
  font-family: "GalmuriHall", var(--o-pixel); background: #0b1625; padding-bottom: 6px;
  border: 18px solid transparent; border-image: url("/img/hall/kit/ui_card_gold.avif") 22 fill stretch;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.plaque.steel { border-width: 14px; border-image: url("/img/hall/kit/ui_card_steel.avif") 18 fill stretch; }
.plaque .art { height: 112px; margin: -4px -4px 0; background: url("/img/hall/summit.webp") center 30% / cover; position: relative; }
.plaque .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #0b1625); }
.plaque.steel .art { filter: grayscale(.85) brightness(.55); }
.plaque .emb { width: 58px; height: 58px; position: absolute; left: 50%; margin-left: -29px; top: 74px; z-index: 2; object-fit: contain; }
.plaque .gn {
  margin: 26px auto 0; max-width: 260px; min-height: 36px; box-sizing: border-box; padding: 0; text-align: center;
  font-size: 15px; line-height: 1.3; color: var(--h-gold); overflow-wrap: anywhere;
  border-style: solid; border-width: 23px 41px 13px; border-image: url("/img/hall/kit/ui_titleplate.avif") 47 82 27 fill stretch;
  display: flex; align-items: center; justify-content: center;
}
.plaque .big { text-align: center; font-size: 26px; line-height: 1.2; color: var(--h-gold); margin-top: 10px; letter-spacing: 1px; }
.plaque.steel .big { color: var(--h-ink); }
.plaque .when { text-align: center; font-size: 13px; margin-top: 4px; }
.plaque .when span, .plaque .note, .plaque .sub, .plaque .tipline { color: var(--h-dim); }
.plaque .note { text-align: center; font-size: 12px; margin-top: 6px; line-height: 1.5; }
.plaque .chips { display: flex; justify-content: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.plaque .chip {
  display: inline-block; border-style: solid; border-width: 4px 14px; border-image: url("/img/hall/kit/ui_chip_gold.avif") 30 60 fill stretch;
  font-size: 12px; line-height: 16px; color: var(--h-btn-ink);
}
.plaque .chip.steel { border-image-source: url("/img/hall/kit/ui_chip_steel.avif"); color: var(--h-ink); }
.plaque .sub { text-align: center; font-size: 12px; margin: 14px 0 6px; }
.plaque .mems { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.plaque .mem { display: flex; flex-direction: column; align-items: center; width: 56px; gap: 3px; font-size: 11px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.plaque .mem .named { color: var(--h-gold); }
.plaque .face { width: 46px; height: 46px; box-sizing: border-box; border: 3px solid #6c5631; background: #0d1626; overflow: hidden; }
.plaque .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plaque .ghost { display: flex; justify-content: center; gap: 6px; }
.plaque .ghost i { width: 46px; height: 46px; box-sizing: border-box; border: 2px dashed #3a4558; display: block; }
.plaque .tipline { text-align: center; font-size: 12px; margin-top: 12px; }
.plaque .tipline b { font-weight: 400; }
.plaque .tip1 { color: var(--tip1); }
.plaque .tip2 { color: var(--tip2); }
.plaque .tip3 { color: var(--tip3); }

.hall-err { display: block; }
.hall-err-msg { border: 1px solid var(--o-parch-line); border-radius: 4px; padding: 14px; margin: 0; }
.hall-foot { max-width: 46rem; }
.hall-foot p { margin: 0 0 8px; color: var(--o-parch-dim); font-size: 14px; }
.hall-stores { display: flex; gap: 8px; margin: 14px 0; max-width: 380px; }
.hall-stores a { flex: 1; text-align: center; border: 1px solid var(--o-parch-line); border-radius: 4px; padding: 10px 0; text-decoration: none; color: var(--o-parch-ink); font-weight: 600; }
.hall-stores a:hover { border-color: var(--o-gold-deep); }