@charset "UTF-8";
/* ==========================================================================
   来場感謝抽選会（present.html）専用スタイル
   yoshioka2026 / festival2026 のトークン・部品を前提に、賞品リストの見た目だけを追加する。
   ========================================================================== */

/* 参加方法カード ------------------------------------------------------------- */
.join {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-top: clamp(1.6rem, 4vw, 2.2rem);
}
.join-item { background: var(--surface); padding: 1.1rem 1.3rem; }
.join-item .k {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--f-disp);
  font-weight: 700;
}
.join-item .v { font-weight: 800; font-size: 1rem; margin-top: 0.35rem; line-height: 1.6; }
.join-item .v .num { font-variant-numeric: tabular-nums; }
.join-item .v em { font-style: normal; font-weight: 600; font-size: 0.82rem; color: var(--ink-soft); }
.join-item--wide { grid-column: 1 / -1; }
.join-item--wide .v em { display: block; margin-top: 0.2rem; }

/* 抽選会パネル（1日分） ----------------------------------------------------- */
.prize-panel {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  overflow: hidden;
}

.prize-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 1.9rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.prize-head-text { flex: 1 1 340px; min-width: 0; }
.prize-theme {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.prize-lead {
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.85;
  max-width: 60ch;
}
.prize-lead b { color: var(--ink); font-weight: 800; }

.prize-cap {
  flex: none;
  text-align: right;
  font-family: var(--f-disp);
  line-height: 1;
}
.prize-cap .cap-lead {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.prize-cap .cap-num {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.prize-cap .cap-unit { font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-left: 0.15em; }

/* 賞品リスト ---------------------------------------------------------------- */
.prize-list { padding: 0 clamp(0.6rem, 2vw, 1.2rem); }
.prize-row {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 0.9rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.prize-row:last-child { border-bottom: 0; }

.prize-rank {
  flex: none;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 3.2em;
  padding: 0.28em 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--f-disp);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.prize-rank small { font-size: 0.72em; font-weight: 700; }

/* 上位賞は金の差し色でハイライト */
.prize-row--gold .prize-rank { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--accent-ink); }
.prize-row--gold-line .prize-rank { border-color: var(--accent); color: var(--accent); }

.prize-body { min-width: 0; }

/* 1等の行：賞品イラストのサムネイルを行内に表示 */
.prize-row--hero { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.prize-row--hero .prize-body { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1rem); }
.prize-thumb {
  flex: none;
  width: clamp(56px, 9vw, 76px);
  height: auto;
  display: block;
}
.prize-row--hero .prize-name { font-size: 1.06rem; }

.prize-name { font-weight: 800; font-size: 0.98rem; color: var(--ink); }
.prize-value {
  display: inline-block;
  margin-left: 0.55em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.prize-count {
  flex: none;
  font-family: var(--f-disp);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.prize-count b { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin-right: 0.08em; }

.prize-note {
  margin: 0;
  padding: 0.9rem clamp(1.2rem, 3vw, 1.9rem);
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

@media (max-width: 540px) {
  .prize-row { grid-template-columns: 2.9em 1fr auto; gap: 0.4rem 0.7rem; }
  .prize-value { display: block; margin-left: 0; margin-top: 0.2rem; }
}