@font-face {
  font-family: "Yuji Syuku Badge V2";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/yuji-syuku-badge-v2.ttf?v=1") format("truetype");
}

.badge-v2-notice-shade[hidden],
.badge-v2-notice-error[hidden] { display: none !important; }
.badge-v2-notice-shade {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(0, 16, 13, .76);
}
.badge-v2-notice {
  width: min(100%, 370px);
  padding: 24px;
  border: 1px solid #dbbd7a;
  border-radius: 24px;
  background: linear-gradient(155deg, #164537, #0a221d);
  color: #f9f1d9;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .17);
  text-align: center;
}
.badge-v2-notice-eyebrow { margin: 0 0 14px; color: #d6bb7e; font: 700 12px/1.3 Georgia, serif; letter-spacing: .22em; }
.badge-v2-notice-medallion {
  --notice-metal-light: #efb277;
  --notice-metal-mid: #b8733e;
  --notice-metal-dark: #6b351d;
  --notice-enamel: #4b281d;
  --badge-celebration-light: var(--notice-metal-light);
  --badge-celebration-glow: color-mix(in srgb, var(--notice-metal-light) 55%, transparent);
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border: 4px solid var(--notice-metal-mid);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 20%), radial-gradient(circle, var(--notice-enamel), #061d18 74%);
  box-shadow: 0 0 0 2px var(--notice-metal-dark), 0 0 0 3px var(--notice-metal-light), 0 8px 30px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255,255,255,.09);
}
.badge-v2-notice-tile {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 18px;
  height: 28px;
  border: 1px solid var(--notice-metal-light);
  border-radius: 14%;
  background: linear-gradient(135deg, var(--notice-metal-light), var(--notice-metal-dark));
  box-shadow: 0 2px 6px rgba(0,0,0,.38);
  transform: translateY(-50%) rotate(45deg);
}
.badge-v2-notice-tile-left { left: -13px; }
.badge-v2-notice-tile-right { right: -13px; }
.badge-v2-notice-icon {
  position: absolute;
  z-index: 2;
  inset: 15%;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: var(--notice-metal-light);
}
.badge-v2-notice-die {
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 24%;
  background: currentColor;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transform: translateX(-50%) rotate(45deg);
}
.badge-v2-notice-die-top { top: -6px; }
.badge-v2-notice-die-bottom { bottom: -6px; }
.badge-v2-celebration-sheen {
  position: absolute;
  z-index: 4;
  top: -40%;
  bottom: -40%;
  left: -65%;
  width: 42%;
  transform: rotate(27deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}
.badge-v2-notice-medallion[data-tier="2"] { --notice-metal-light:#f3f6f7; --notice-metal-mid:#b8c2c6; --notice-metal-dark:#586064; --notice-enamel:#263638; }
.badge-v2-notice-medallion[data-tier="3"] { --notice-metal-light:#fff1a8; --notice-metal-mid:#dfb34e; --notice-metal-dark:#775316; --notice-enamel:#503815; }
.badge-v2-notice-medallion[data-tier="4"] { --notice-metal-light:#ecfdff; --notice-metal-mid:#75d9fa; --notice-metal-dark:#24627a; --notice-enamel:#071b30; }
.badge-v2-notice-medallion[data-tier="5"] { --notice-metal-light:#fff0ff; --notice-metal-mid:#a876ff; --notice-metal-dark:#70439b; --notice-enamel:#303477; border-color:transparent; background:radial-gradient(circle,#303477,#101b3e 73%) padding-box,conic-gradient(#ff5b72,#ffd95f,#59e49a,#56c7ff,#a876ff,#ff5b72) border-box; }
.badge-v2-notice-artwork { position:relative; z-index:2; display:grid; width:78%; height:78%; place-items:center; background:linear-gradient(145deg,var(--notice-metal-light),var(--notice-metal-mid)); background-clip:text; color:transparent; filter:drop-shadow(0 1px 0 var(--notice-metal-dark)) drop-shadow(0 0 7px color-mix(in srgb,var(--notice-metal-light) 60%,transparent)); font:400 52px/1 "Yuji Syuku Badge V2",serif; -webkit-background-clip:text; transform:translateY(-3px); }
.badge-v2-notice-medallion[data-tier="5"] .badge-v2-notice-artwork { background:conic-gradient(#ff5b72,#ffd95f,#59e49a,#56c7ff,#a876ff,#ff5b72); background-clip:text; -webkit-background-clip:text; }
.badge-v2-notice-title { margin: 0; font-size: clamp(24px, 7vw, 30px); }
.badge-v2-notice-stage { margin: 8px 0; color: #ebd5a5; font-weight: 700; }
.badge-v2-notice-reason { min-height: 1.6em; margin: 12px 0 20px; color: #f6edd5; line-height: 1.55; }
.badge-v2-notice-error { color: #ffd4c5; font-size: 14px; }
.badge-v2-notice-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #f0d59c;
  border-radius: 13px;
  background: #e9cc88;
  color: #17362d;
  font: inherit;
  font-weight: 800;
}
.badge-v2-notice-button:disabled { opacity: .65; }
.badge-v2-notice-button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .badge-v2-notice { animation: badge-v2-appear .25s ease-out; }
  .badge-v2-notice-shade.is-celebrating .badge-v2-notice-medallion { animation: badge-v2-celebration-glow 2.8s ease-in-out infinite; }
  .badge-v2-notice-shade.is-celebrating .badge-v2-celebration-sheen { animation: badge-v2-celebration-sheen 2.8s ease-in-out infinite; }
  @keyframes badge-v2-appear { from { opacity: 0; transform: translateY(14px) scale(.96); } }
  @keyframes badge-v2-celebration-glow {
    0%, 45%, 100% { filter: drop-shadow(0 0 4px var(--badge-celebration-glow)); transform: scale(1); }
    18% { filter: drop-shadow(0 0 16px var(--badge-celebration-light)) drop-shadow(0 0 25px var(--badge-celebration-glow)); transform: scale(1.07); }
  }
  @keyframes badge-v2-celebration-sheen {
    0% { left: -65%; opacity: 0; }
    5% { opacity: 1; }
    36% { left: 140%; opacity: .9; }
    45%, 100% { left: 140%; opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge-v2-celebration-sheen { display: none; }
}