/*
 * 札。名札掛けの小さい札（.plaque__face）とタップ後の大きい札（--big）で共有する。
 *
 * 素材: 全員共通の白木。幹事長は金・副幹事長は銀・会計は銅・卒業した人は黒（漆に金文字）。
 * いない人の札は裏（くすんだ面）、いる人の札だけが表を向いて朱の帯が付き、光が走る。
 * 面は --face（いる時）/ --face-off（いない時）・--ink / --ink-off・--frame（幹部の枠）で決める。
 */

.plaque__face {
  --pw: var(--plaque-w);
  --ph: var(--plaque-h);
  --pf: 1.08rem;
  /* 白木（全員共通） */
  --face: linear-gradient(var(--plaque-face), var(--plaque-face));
  --face-off:
    repeating-linear-gradient(90deg, transparent 0 0.3em, oklch(55% 0.05 60 / 0.1) 0.3em 0.33em, transparent 0.33em 0.55em),
    linear-gradient(var(--plaque-off), var(--plaque-off));
  --ink: var(--plaque-ink);
  --ink-off: var(--plaque-off-ink);
  --frame: var(--gold);
  --shine: oklch(100% 0 0 / 0.45);

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  width: var(--pw);
  height: var(--ph);
  padding: 0.5em 0 0.4em;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-plaque);
  font-weight: 800;
  font-size: var(--pf);
  line-height: 1;
  background: var(--face-off);
  color: var(--ink-off);
  filter: var(--off-filter, none);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.25),
    inset 0 0 0 1px oklch(0% 0 0 / 0.06);
  transform-origin: 50% 0;
}

button.plaque__face {
  cursor: pointer;
  transition: transform var(--duration-fast) ease;
}

button.plaque__face:hover {
  transform: translateY(-2px) rotate(-1.5deg);
}

button.plaque__face:active {
  transform: translateY(1px);
}

.plaque__face--big {
  --pw: 4.4rem;
  --ph: 13.5rem;
  --pf: 1.8rem;
}

.plaque__name {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.08em;
}

.plaque__face[data-long] .plaque__name {
  font-size: 0.8em;
  letter-spacing: 0;
}

/* ---- 役職の金属。いない時はつやを落とす ---- */

.plaque__face[data-material='gold'],
.plaque__face[data-material='silver'],
.plaque__face[data-material='copper'] {
  --face:
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--m-hi) 0%, var(--m-mid) 32%, var(--m-lo) 58%, var(--m-mid) 80%, var(--m-hi) 100%);
  --face-off:
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--m-mid), var(--m-lo));
  --ink-off: var(--ink);
  --off-filter: saturate(0.7) brightness(0.9);
}

.plaque__face[data-material='gold'] {
  --m-hi: var(--gold-hi);
  --m-mid: var(--gold-mid);
  --m-lo: var(--gold-lo);
  --ink: var(--gold-ink);
  --frame: oklch(52% 0.11 68);
  --shine: oklch(100% 0.02 95 / 0.75);
}

.plaque__face[data-material='silver'] {
  --m-hi: var(--silver-hi);
  --m-mid: var(--silver-mid);
  --m-lo: var(--silver-lo);
  --ink: var(--silver-ink);
  --frame: oklch(55% 0.012 250);
}

.plaque__face[data-material='copper'] {
  --m-hi: var(--copper-hi);
  --m-mid: var(--copper-mid);
  --m-lo: var(--copper-lo);
  --ink: var(--copper-ink);
  --frame: oklch(40% 0.09 40);
}

/* 卒業: 黒漆に金文字。つやは上からの映り込みで出す */
.plaque__face[data-material='black'] {
  --face:
    linear-gradient(100deg, transparent 20%, var(--lacquer-sheen) 38%, transparent 52%),
    linear-gradient(var(--lacquer), var(--lacquer));
  --face-off: linear-gradient(var(--lacquer), var(--lacquer));
  --ink: var(--lacquer-ink);
  --ink-off: oklch(62% 0.08 80);
  --frame: var(--lacquer-ink);
  --shine: oklch(100% 0 0 / 0.25);
}

/* ---- いる人: 表を向き、朱の帯・吊り下がった影・光 ---- */

[data-in] > .plaque__face,
.plaque__face[data-in] {
  background: var(--face);
  color: var(--ink);
  filter: none;
  border-top: calc(var(--pf) * 0.4) solid var(--shu);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.45),
    var(--shadow-hung);
}

/* 光の帯。transform だけで動かす */
[data-in] > .plaque__face::before,
.plaque__face[data-in]::before {
  content: '';
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(105deg, transparent 40%, var(--shine) 50%, transparent 60%);
  transform: translateY(-110%);
  animation: shine 5s var(--shine-delay, 0s) ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%,
  55% {
    transform: translateY(-110%);
  }
  85%,
  100% {
    transform: translateY(110%);
  }
}

.plaque[data-flipped] .plaque__face,
.plaque__face[data-flip] {
  animation: flip var(--duration-flip) var(--ease-out-expo);
}

@keyframes flip {
  from {
    transform: rotateY(180deg);
    opacity: 0.4;
  }
}

/* ---- 幹部と経験者: 二重枠と朱の落款 ---- */

.plaque__face[data-role]::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 3px double var(--frame);
  border-radius: 2px;
  pointer-events: none;
}

.plaque__face--big[data-role]::after {
  inset: 5px;
  border-width: 5px;
}

.plaque__seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  font-size: 0.62em;
  line-height: 1;
  border-radius: 2px;
  background-color: var(--shu);
  color: oklch(99% 0 0);
  transform: rotate(-4deg);
}

/* 経験者の落款は白抜き（朱の輪郭だけ）。金属や黒の上でも読めるよう、地は白く透かす */
.plaque__face[data-former] .plaque__seal {
  background-color: oklch(100% 0 0 / 0.7);
  color: var(--shu);
  box-shadow: inset 0 0 0 1.5px var(--shu);
}

@media (prefers-reduced-motion: reduce) {
  [data-in] > .plaque__face::before,
  .plaque__face[data-in]::before {
    animation: none;
    opacity: 0;
  }
}