@charset "utf-8";

/* ==============================
   KEYFRAMES
============================== */
@keyframes shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position:  500px 0; }
}
@keyframes crownFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-2px); }
}
@keyframes crownFloat-subtle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-1px); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1)   rotate(20deg); }
}
@keyframes starTwinkle-dim {
  0%, 100% { opacity: 0;    transform: scale(0.5) rotate(0deg); }
  50%       { opacity: 0.6; transform: scale(0.85) rotate(12deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--glow-lo); }
  50%       { box-shadow: var(--glow-hi); }
}

/* ==============================
   SHARED STRUCTURE
============================== */
.badge-wrapper {
  position: relative;
  width: 280px;
  margin: 0 auto 2em;
}

/* 通常リボンテール（金賞・銀賞・銅賞） */
.badge-wrapper::before,
.badge-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.badge-wrapper::before {
  left: -22px;
  clip-path: polygon(0 50%, 16px 0, 100% 0, 100% 100%, 16px 100%);
}
.badge-wrapper::after {
  right: -22px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
/* 入賞はリボンなし */
.badge--entry::before,
.badge--entry::after { display: none; }
/* 大賞は span リボンで上書き */
.badge--grand::before,
.badge--grand::after { display: none; }

.badge-body {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  border-radius: 23px;
  width: 280px;
  height: 46px;
  animation: pulseGlow 3s ease-in-out infinite;
}
.badge-inner {
  position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.badge-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.badge-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 700px 100%;
  border-radius: inherit;
  pointer-events: none;
  animation: shimmer 5s linear infinite;
}
.badge-ring {
  position: relative;
  z-index: 2;
  width: calc(100% - 6px);
  height: calc(100% - 10px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-text {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

/* ==============================
   共通テキスト（ラベル・年・suffix）→ 白
============================== */
.badge-label,
.badge-year,
.badge-suffix {
  color: #ffffff;
  text-shadow:
    0  1px 2px rgba(0,0,0,0.75),
    0 -1px 2px rgba(0,0,0,0.50),
    1px 0  2px rgba(0,0,0,0.50),
   -1px 0  2px rgba(0,0,0,0.50);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.badge-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 13.5px; font-weight: 700;
}
.badge-year {
  font-family: 'Cinzel', serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.07em;
  margin: 0 2px 0 6px;
  position: relative;
  top: 1px;
}

/* stars */
.star {
  position: absolute;
  font-size: 7px;
  animation: starTwinkle 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
.star.dim { animation-name: starTwinkle-dim; font-size: 6px; }
.star:nth-child(1) { top: -5px;    left: 28px;   animation-delay: 0s;   }
.star:nth-child(2) { top: -7px;    left: 168px;  animation-delay: 0.8s; }
.star:nth-child(3) { top: -5px;    right: 28px;  animation-delay: 1.6s; }
.star:nth-child(4) { bottom: -5px; left: 70px;   animation-delay: 0.4s; }
.star:nth-child(5) { bottom: -6px; right: 70px;  animation-delay: 1.2s; }

/* ==============================
   共通 rank テキスト 輪郭 mixin
   各ランク固有スタイルで上書き
============================== */
.badge-rank {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  margin: 0 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}


/* ============================================================
   1. 大賞 – Deep Navy × Gold border/ribbon + Blue ribbon w/ gold line
   ============================================================ */
.badge--grand {
  --glow-lo: 0 0 16px 5px rgba(195,155,30,0.38), 0 5px 22px rgba(0,0,0,0.58);
  --glow-hi: 0 0 32px 11px rgba(240,195,50,0.60), 0 7px 34px rgba(0,0,0,0.70);
  width: 280px;
}

/* ── リボン span ── */
.badge--grand .ribbon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 32px;
  z-index: 0;
  background: linear-gradient(90deg,
    #0a2a6b 0%, #1840b0 30%, #2a60e0 55%, #1840b0 75%, #0a2a6b 100%
  );
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
}
.badge--grand .ribbon-l {
  left: -24px;
  clip-path: polygon(0 50%, 16px 0, 62px 0, 62px 32px, 16px 32px);
}
.badge--grand .ribbon-r {
  right: -24px;
  clip-path: polygon(0 0, 46px 0, 62px 50%, 46px 32px, 0 32px);
}
/* 共通 ::before/::after reset */
.badge--grand .ribbon::before,
.badge--grand .ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
}
/*
  左リボン 2px inset 金線:
  ::before = 2px inset 金色  clip: (3,16)→(17,2)→(60,2)→(60,30)→(17,30)
  ::after  = 3px inset 青塗り clip: (4,16)→(18,3)→(59,3)→(59,29)→(18,29)
  差分1px が金線として残る
*/
.badge--grand .ribbon-l::before {
  background: linear-gradient(90deg, #9a7010 0%, #e8cc40 48%, #9a7010 100%);
  clip-path: polygon(3px 50%, 17px 2px, 60px 2px, 60px 30px, 17px 30px);
}
.badge--grand .ribbon-l::after {
  background: linear-gradient(90deg, #0a2a6b 0%, #1840b0 30%, #2a60e0 55%, #1840b0 75%, #0a2a6b 100%);
  clip-path: polygon(4px 50%, 18px 3px, 59px 3px, 59px 29px, 18px 29px);
}
/* 右リボン: (2,2)→(45,2)→(59,16)→(45,30)→(2,30) / inner: (3,3)→(44,3)→(58,16)→(44,29)→(3,29) */
.badge--grand .ribbon-r::before {
  background: linear-gradient(90deg, #9a7010 0%, #e8cc40 48%, #9a7010 100%);
  clip-path: polygon(2px 2px, 45px 2px, 59px 50%, 45px 30px, 2px 30px);
}
.badge--grand .ribbon-r::after {
  background: linear-gradient(90deg, #0a2a6b 0%, #1840b0 30%, #2a60e0 55%, #1840b0 75%, #0a2a6b 100%);
  clip-path: polygon(3px 3px, 44px 3px, 58px 50%, 44px 29px, 3px 29px);
}

/* ── バッジ本体 ── */
.badge--grand .badge-body {
  width: 280px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(135deg,
    #7a4808 0%, #d4a020 12%, #fff0a0 30%, #e8c830 45%,
    #f8e878 55%, #d4a020 70%, #9a6414 88%, #7a4808 100%
  );
  animation: pulseGlow 2.8s ease-in-out infinite;
}
.badge--grand .badge-inner {
  top: 3.5px; left: 3.5px; right: 3.5px; bottom: 3.5px;
  border-radius: 22px;
  background: linear-gradient(135deg, #050d22 0%, #091840 40%, #0b2060 65%, #050d22 100%);
}
.badge--grand .badge-inner::before {
  background: radial-gradient(ellipse at 50% -5%, rgba(110,165,255,0.22) 0%, transparent 58%);
}
.badge--grand .badge-inner::after {
  background: linear-gradient(105deg, transparent 25%, rgba(255,235,130,0.12) 50%, transparent 75%);
  background-size: 700px 100%;
  animation-duration: 3.5s;
}
.badge--grand .badge-ring {
  border: 1.5px solid rgba(230,185,60,0.65);
  box-shadow: inset 0 0 0 1px rgba(255,240,160,0.12), inset 0 0 14px rgba(80,140,255,0.08);
  border-radius: 18px;
}
.badge--grand .badge-icon {
  font-size: 14px; color: #ffe050;
  text-shadow: 0 0 10px rgba(255,220,50,1), 0 0 24px rgba(255,170,0,0.75);
  animation: crownFloat 2.3s ease-in-out infinite;
  margin-right: 10px;
}
.badge--grand .badge-rank {
  font-size: 20px;
  letter-spacing: 0.2em; text-indent: 0.02em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe878 20%, #c89000 52%, #f5d040 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.6))
    drop-shadow(1px 1px 0px rgba(0,0,0,0.5))
    drop-shadow(-1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(-1px 1px 0px rgba(0,0,0,0.4))
    drop-shadow(0 2px 4px rgba(180,120,0,0.7));
  position: relative; left: 2px;
}
.badge--grand .star { color: #ffe050; text-shadow: 0 0 8px rgba(255,218,50,0.95); }


/* ============================================================
   2. 金賞 – Bright Pure Gold
   ============================================================ */
.badge--gold {
  --glow-lo: 0 0 10px 3px rgba(200,160,20,0.30), 0 4px 16px rgba(60,30,0,0.50);
  --glow-hi: 0 0 22px 7px rgba(240,195,40,0.50), 0 5px 24px rgba(60,30,0,0.60);
}
.badge--gold.badge-wrapper::before,
.badge--gold.badge-wrapper::after {
  width: 58px; height: 29px;
  background: linear-gradient(90deg, #6a4008 0%, #b07820 35%, #e0b030 65%, #8c5c14 100%);
}
.badge--gold .badge-body {
  background: linear-gradient(135deg,
    #7a4c08 0%, #d4a020 15%, #fff0a0 38%, #e8c030 60%, #b08020 80%, #7a4c08 100%
  );
}
.badge--gold .badge-inner {
  background: linear-gradient(135deg, #221200 0%, #381c04 40%, #461e06 65%, #221200 100%);
}
.badge--gold .badge-inner::before {
  background: radial-gradient(ellipse at 50% -5%, rgba(255,200,60,0.20) 0%, transparent 60%);
}
.badge--gold .badge-inner::after {
  background: linear-gradient(105deg, transparent 28%, rgba(255,235,130,0.12) 50%, transparent 72%);
  background-size: 700px 100%;
}
.badge--gold .badge-ring { border: 1.5px solid rgba(230,180,50,0.55); }
.badge--gold .badge-icon {
  font-size: 13px; color: #ffe040;
  text-shadow: 0 0 8px rgba(255,210,30,1), 0 0 18px rgba(240,160,0,0.6);
  animation: crownFloat 2.6s ease-in-out infinite;
  margin-right: 10px;
}
.badge--gold .badge-rank {
  font-size: 20px;
  letter-spacing: 0.2em; text-indent: 0.02em;
  position: relative; left: 2px;
  background: linear-gradient(180deg, #fffbe0 0%, #f8e050 25%, #c88800 58%, #f0c020 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.6))
    drop-shadow(1px 1px 0px rgba(0,0,0,0.5))
    drop-shadow(-1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(-1px 1px 0px rgba(0,0,0,0.4))
    drop-shadow(0 1px 3px rgba(180,110,0,0.6));
}
.badge--gold .star { color: #ffe040; text-shadow: 0 0 6px rgba(255,210,30,0.9); }


/* ============================================================
   3. 銀賞 – Cool Silver
   ============================================================ */
.badge--silver {
  --glow-lo: 0 0 8px 2px rgba(160,170,190,0.22), 0 3px 12px rgba(0,0,0,0.45);
  --glow-hi: 0 0 16px 5px rgba(190,200,220,0.38), 0 4px 18px rgba(0,0,0,0.55);
}
.badge--silver.badge-wrapper::before,
.badge--silver.badge-wrapper::after {
  width: 54px; height: 27px;
  background: linear-gradient(90deg, #48505e 0%, #7e8898 35%, #a0aabb 65%, #58606e 100%);
}
.badge--silver .badge-body {
  background: linear-gradient(135deg,
    #5c6270 0%, #aab4c4 18%, #e8eef6 40%, #b8c0d0 62%, #6c7280 82%, #5c6270 100%
  );
}
.badge--silver .badge-inner {
  background: linear-gradient(135deg, #181c24 0%, #222838 40%, #2a3048 65%, #181c24 100%);
}
.badge--silver .badge-inner::before {
  background: radial-gradient(ellipse at 50% -5%, rgba(180,200,230,0.16) 0%, transparent 60%);
}
.badge--silver .badge-inner::after {
  background: linear-gradient(105deg, transparent 35%, rgba(220,230,248,0.09) 50%, transparent 65%);
  background-size: 700px 100%;
  animation-duration: 6.5s;
}
.badge--silver .badge-ring { border: 1px solid rgba(170,185,210,0.45); }
.badge--silver .badge-icon {
  font-size: 13px; color: #d8e4f4;
  text-shadow: 0 0 6px rgba(200,218,240,0.75);
  animation: crownFloat-subtle 3s ease-in-out infinite;
  margin-right: 10px;
}
.badge--silver .badge-rank {
  font-size: 20px;
  letter-spacing: 0.2em; text-indent: 0.02em;
  position: relative; left: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #e8f0ff 28%, #a0b0d0 58%, #dde6f4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.6))
    drop-shadow(1px 1px 0px rgba(0,0,0,0.5))
    drop-shadow(-1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(-1px 1px 0px rgba(0,0,0,0.4));
}
.badge--silver .star { color: #c8d8f0; text-shadow: 0 0 5px rgba(195,215,240,0.7); }
.badge--silver .star:nth-child(4),
.badge--silver .star:nth-child(5) { display: none; }
.badge--silver .star { animation-name: starTwinkle-dim; }


/* ============================================================
   4. 銅賞 – Red-Copper
   ============================================================ */
.badge--bronze {
  --glow-lo: 0 0 6px 2px rgba(160,70,30,0.22), 0 3px 10px rgba(50,10,0,0.50);
  --glow-hi: 0 0 12px 4px rgba(200,90,40,0.35), 0 4px 14px rgba(50,10,0,0.60);
}
.badge--bronze.badge-wrapper::before,
.badge--bronze.badge-wrapper::after {
  width: 50px; height: 25px;
  background: linear-gradient(90deg, #4e1c08 0%, #8a3414 35%, #b05030 65%, #602010 100%);
}
.badge--bronze .badge-body {
  background: linear-gradient(135deg,
    #5a1e08 0%, #a04020 15%, #e08050 38%, #b04828 60%, #6a2410 80%, #5a1e08 100%
  );
}
.badge--bronze .badge-inner {
  background: linear-gradient(135deg, #1c0a04 0%, #2c1008 40%, #381408 65%, #1c0a04 100%);
}
.badge--bronze .badge-inner::before {
  background: radial-gradient(ellipse at 50% -5%, rgba(200,90,40,0.16) 0%, transparent 60%);
}
.badge--bronze .badge-inner::after {
  background: linear-gradient(105deg, transparent 38%, rgba(220,120,70,0.08) 50%, transparent 62%);
  background-size: 700px 100%;
  animation-duration: 8s;
}
.badge--bronze .badge-ring { border: 1px solid rgba(180,80,40,0.42); }
.badge--bronze .badge-icon {
  font-size: 13px; color: #e09070;
  text-shadow: 0 0 5px rgba(210,100,50,0.65);
  margin-right: 10px;
}
.badge--bronze .badge-rank {
  font-size: 20px;
  letter-spacing: 0.2em; text-indent: 0.02em;
  position: relative; left: 2px;
  background: linear-gradient(180deg, #fff0e0 0%, #f0a868 28%, #c05818 60%, #f09050 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,0.6))
    drop-shadow(1px 1px 0px rgba(0,0,0,0.5))
    drop-shadow(-1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(1px -1px 0px rgba(0,0,0,0.4))
    drop-shadow(-1px 1px 0px rgba(0,0,0,0.4));
}
.badge--bronze .star { color: #e09060; text-shadow: 0 0 4px rgba(210,110,50,0.65); }
.badge--bronze .star:nth-child(3),
.badge--bronze .star:nth-child(4),
.badge--bronze .star:nth-child(5) { display: none; }
.badge--bronze .star { animation-name: starTwinkle-dim; }


/* ============================================================
   5. 入賞 – Forest Green・リボンなし
   ============================================================ */
.badge--entry {
  --glow-lo: 0 0 0 0 transparent;
  --glow-hi: 0 0 0 0 transparent;
}
.badge--entry .badge-body {
  animation: none;
  box-shadow: 0 3px 10px rgba(0,20,0,0.50);
  width: 260px;
  background: linear-gradient(135deg,
    #265c22 0%, #4c9040 18%, #82c870 40%, #4a8c3c 62%, #306028 82%, #265c22 100%
  );
}
.badge--entry .badge-inner {
  background: linear-gradient(135deg, #0a180a 0%, #122010 40%, #162a14 65%, #0a180a 100%);
}
.badge--entry .badge-inner::before {
  background: radial-gradient(ellipse at 50% -5%, rgba(80,160,70,0.14) 0%, transparent 60%);
}
.badge--entry .badge-inner::after { display: none; }
.badge--entry .badge-ring { border: 1px solid rgba(80,150,70,0.40); }
.badge--entry .badge-icon {
  font-size: 13px; color: #a0dc88;
  margin-right: 10px;
}
.badge--entry .badge-rank {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  color: #ffffff;
  text-shadow:
    0  1px 2px rgba(0,0,0,0.75),
    0 -1px 2px rgba(0,0,0,0.50),
    1px 0  2px rgba(0,0,0,0.50),
   -1px 0  2px rgba(0,0,0,0.50);
  margin: 0 4px;
  position: relative; top: -1px;
}
.badge--entry .star { display: none; }