@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --shimmer-x {
  syntax: '<percentage>';
  initial-value: -100%;
  inherits: false;
}

.zzz-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  border-radius: 6px;
  padding: 6px 14px;
  min-width: 48px;
  text-align: center;
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  line-height: 1;
  vertical-align: middle;
}

.zzz-badge.b-sm { font-size: 0.75rem; padding: 4px 10px; min-width: 36px; }
.zzz-badge.b-md { font-size: 0.85rem; padding: 6px 14px; min-width: 48px; }
.zzz-badge.b-lg { font-size: 1.4rem; padding: 12px 28px; min-width: 80px; border-radius: 8px; }

.t-default  { font-family: 'Exo 2', sans-serif; }
.t-gold     { font-family: 'Playfair Display', serif; }
.t-neon     { font-family: 'Audiowide', sans-serif; }
.t-elegant  { font-family: 'Cormorant Garamond', serif; }
.t-chinese  { font-family: 'Zhi Mang Xing', cursive; }
.t-gothic   { font-family: 'UnifrakturMaguntia', cursive; }
.t-myst     { font-family: 'Almendra', serif; }
.t-yumekawa { font-family: 'Hachi Maru Pop', cursive; font-weight: 700; }
.t-military { font-family: 'Black Ops One', sans-serif; }

.t-default.b-c   { background: #6b7280; color: #d1d5db; }
.t-default.b-b   { background: linear-gradient(135deg, #2dd4bf, #14b8a6); color: #fff; }
.t-default.b-a   { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: #fff; }
.t-default.b-s   { background: linear-gradient(135deg, #fb923c, #f97316); color: #fff; }
.t-default.b-sp  { background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; box-shadow: 0 0 8px rgba(249,115,22,0.4); }

.t-default.b-ex {
  background:
    conic-gradient(from var(--angle), #ff0000, #ff8800, #ffee00, #00ff44, #0088ff, #8800ff, #ff0088, #ff0000),
    linear-gradient(#fff, #fff),
    conic-gradient(from var(--angle), #ff0000, #ff8800, #ffee00, #00ff44, #0088ff, #8800ff, #ff0088, #ff0000);
  background-origin: border-box;
  -webkit-background-clip: text, padding-box, border-box;
  background-clip: text, padding-box, border-box;
  -webkit-text-fill-color: transparent;
  border: 3px solid transparent;
  font-weight: 900;
  animation: zzz-rainbow-spin 2.5s linear infinite;
}
.t-default.b-ex.b-lg { border-width: 4px; }

.t-gold.b-c  { background: #78716c; color: #a8a29e; }
.t-gold.b-b  { background: linear-gradient(145deg, #b08d57, #8b6914); color: #f5e6c8; }
.t-gold.b-a  { background: linear-gradient(145deg, #c0c0c0, #e8e8e8, #c0c0c0); color: #444; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }

.t-gold.b-s {
  background: linear-gradient(145deg, #b8860b, #daa520, #ffd700, #daa520);
  color: #4a2c00;
  text-shadow: 0 1px 0 rgba(255,215,0,0.6);
  overflow: hidden;
}
.t-gold.b-s::before { content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%); }

.t-gold.b-sp {
  background: linear-gradient(145deg, #c0c8d4, #e8ecf0, #f8fafc, #e8ecf0, #c0c8d4);
  color: #2a2a3a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  box-shadow: 0 0 10px rgba(192,200,212,0.5), 0 0 20px rgba(176,186,200,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1px solid rgba(180,190,210,0.5);
  overflow: hidden;
}
.t-gold.b-sp::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.5) 45%, rgba(200,210,230,0.3) 55%, transparent 80%);
  animation: zzz-shimmer 2.5s ease-in-out infinite;
}

.t-gold.b-ex {
  background:
    linear-gradient(60deg, rgba(180,200,255,0.22) 25%, transparent 25%, transparent 75%, rgba(180,200,255,0.22) 75%),
    linear-gradient(120deg, rgba(200,180,255,0.18) 25%, transparent 25%, transparent 75%, rgba(200,180,255,0.18) 75%),
    linear-gradient(0deg, rgba(160,200,255,0.1) 50%, transparent 50%),
    linear-gradient(145deg, #e8ecf2, #f0f4fa, #ffffff, #f0f4fa, #e8ecf2);
  background-size: 10px 10px, 10px 10px, 10px 10px, 100% 100%;
  color: #1a1a2a;
  text-shadow: 0 0 4px rgba(100,150,255,0.4);
  box-shadow:
    0 0 12px rgba(100,150,255,0.3),
    0 0 24px rgba(200,100,255,0.2),
    0 0 36px rgba(100,200,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 2px rgba(100,150,255,0.2);
  border: 1px solid rgba(180,200,255,0.6);
  overflow: hidden;
}
.t-gold.b-ex::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 15%, rgba(255,100,100,0.15) 25%, rgba(255,255,100,0.15) 35%, rgba(100,255,100,0.15) 45%, rgba(100,100,255,0.15) 55%, rgba(255,100,255,0.15) 65%, transparent 80%);
  animation: zzz-diamond-flash 2s ease-in-out infinite;
}

.t-crystal.b-c {
  background: rgba(200,210,220,0.6);
  color: #8899aa;
  border: 1px solid rgba(180,190,200,0.5);
  backdrop-filter: blur(2px);
}
.t-crystal.b-b {
  background: linear-gradient(135deg, rgba(180,220,240,0.7), rgba(200,235,255,0.8));
  color: #2a5a7a;
  border: 1px solid rgba(160,210,240,0.5);
  backdrop-filter: blur(4px);
}
.t-crystal.b-a {
  background: linear-gradient(135deg, rgba(180,200,255,0.7), rgba(220,200,255,0.7));
  color: #3a3a7a;
  border: 1px solid rgba(180,180,255,0.5);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 8px rgba(140,160,255,0.2);
}
.t-crystal.b-s {
  background: linear-gradient(135deg, rgba(140,200,255,0.6), rgba(200,240,255,0.8), rgba(140,200,255,0.6));
  color: #2a5a8a;
  border: 1px solid rgba(140,200,255,0.6);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 2px 0 4px rgba(100,180,255,0.15),
    inset -2px 0 4px rgba(180,100,255,0.15),
    0 3px 12px rgba(100,180,255,0.25);
  overflow: hidden;
}
.t-crystal.b-s::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation: zzz-shimmer 3s ease-in-out infinite;
}
.t-crystal.b-sp {
  background: linear-gradient(135deg, rgba(200,230,255,0.7), rgba(255,255,255,0.9), rgba(200,220,255,0.7));
  color: #3a5a8a;
  border: 1px solid rgba(180,210,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.8),
    inset 3px 0 6px rgba(100,160,255,0.2),
    inset -3px 0 6px rgba(200,100,255,0.15),
    0 0 12px rgba(100,180,255,0.3),
    0 0 24px rgba(160,120,255,0.15);
  overflow: hidden;
}
.t-crystal.b-sp::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(110deg, transparent 20%, rgba(255,200,200,0.15) 30%, rgba(255,255,200,0.15) 40%, rgba(200,255,200,0.15) 50%, rgba(200,200,255,0.2) 60%, transparent 75%);
  animation: zzz-shimmer 2.5s ease-in-out infinite;
}
.t-crystal.b-ex {
  background: linear-gradient(135deg, rgba(220,240,255,0.8), rgba(255,255,255,0.95), rgba(240,220,255,0.8));
  color: #4a6a9a;
  text-shadow: 0 0 6px rgba(100,160,255,0.5);
  border: 1px solid rgba(200,220,255,0.8);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.9),
    inset 4px 0 8px rgba(100,140,255,0.2),
    inset -4px 0 8px rgba(220,100,255,0.15),
    inset 0 -2px 6px rgba(100,200,255,0.15),
    0 0 16px rgba(100,180,255,0.4),
    0 0 32px rgba(180,120,255,0.2),
    0 0 48px rgba(100,200,255,0.1);
  overflow: hidden;
}
.t-crystal.b-ex::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(110deg, transparent 10%, rgba(255,80,80,0.12) 20%, rgba(255,200,80,0.12) 30%, rgba(80,255,80,0.12) 40%, rgba(80,200,255,0.15) 50%, rgba(200,80,255,0.12) 60%, rgba(255,80,200,0.12) 70%, transparent 85%);
  animation: zzz-crystal-refract 2s ease-in-out infinite;
}

.t-neon.b-c  { background: #1f2937; color: #6b7280; border: 1px solid #374151; }
.t-neon.b-b  { background: #111827; color: #06b6d4; border: 1px solid #06b6d4; text-shadow: 0 0 4px rgba(6,182,212,0.5); }
.t-neon.b-a  { background: #111827; color: #a78bfa; border: 1px solid #a78bfa; text-shadow: 0 0 6px rgba(167,139,250,0.6); box-shadow: 0 0 6px rgba(167,139,250,0.3); }
.t-neon.b-s  { background: #0a0a1a; color: #22d3ee; border: 1px solid #22d3ee; text-shadow: 0 0 8px #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,0.4), 0 0 16px rgba(34,211,238,0.2); }
.t-neon.b-sp {
  background: #0a0a1a;
  color: #f0abfc;
  border: 1px solid #e879f9;
  text-shadow: 0 0 8px #e879f9;
  box-shadow: 0 0 10px rgba(232,121,249,0.5), 0 0 20px rgba(232,121,249,0.2), inset 0 0 8px rgba(232,121,249,0.1);
}
.t-neon.b-ex {
  background: #050510;
  color: #fff;
  text-shadow: 0 0 10px #e879f9, 0 0 20px #22d3ee, 0 0 30px rgba(255,255,255,0.3);
  box-shadow:
    0 0 10px rgba(232,121,249,0.6),
    0 0 20px rgba(34,211,238,0.4),
    0 0 40px rgba(168,85,247,0.3),
    0 0 60px rgba(232,121,249,0.15),
    inset 0 0 12px rgba(232,121,249,0.15);
  z-index: 0;
  border: none;
}
.t-neon.b-ex::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  background: conic-gradient(from var(--angle), #22d3ee, #e879f9, #a855f7, #22d3ee);
  z-index: -2;
  animation: zzz-rainbow-spin 1.5s linear infinite;
}
.t-neon.b-ex::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: #050510;
  z-index: -1;
}
.t-neon.b-ex.b-lg::before { inset: -3px; border-radius: 10px; }
.t-neon.b-ex.b-lg::after { border-radius: 8px; }

.t-elegant.b-c {
  background: linear-gradient(145deg, #2a2830, #353540);
  color: #8a8a9a;
  border: 1px solid #4a4a5a;
  letter-spacing: 0.1em;
}
.t-elegant.b-b {
  background: linear-gradient(145deg, #2a2a35, #3d3548);
  color: #b0b0cc;
  border: 1px solid #6a6a80;
  letter-spacing: 0.1em;
}
.t-elegant.b-a {
  background: linear-gradient(145deg, #282838, #3a3550);
  color: #c8c0e0;
  border: 1px solid #8080a0;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(200,192,224,0.1);
}
.t-elegant.b-s {
  background: linear-gradient(145deg, #20202a, #2a2a38, #20202a);
  color: #d0d0e0;
  border: 1px solid #a0a0b8;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(208,208,224,0.12), 0 2px 8px rgba(0,0,0,0.3);
}
.t-elegant.b-sp {
  background: linear-gradient(145deg, #1a1a25, #252535);
  color: #d0d0e0;
  border: 1px solid #a0a0b8;
  letter-spacing: 0.12em;
  box-shadow:
    inset 0 1px 0 rgba(208,208,224,0.1),
    0 0 6px rgba(160,160,192,0.15),
    0 3px 10px rgba(0,0,0,0.3);
  overflow: hidden;
}
.t-elegant.b-sp::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(208,208,224,0.08) 50%, transparent 70%);
  animation: zzz-shimmer 3s ease-in-out infinite;
}
.t-elegant.b-ex {
  background: linear-gradient(145deg, #1a1520, #251a30, #1a1520);
  color: #f0e8d8;
  border: 1px solid rgba(240,230,210,0.5);
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px rgba(240,230,210,0.4);
  box-shadow:
    inset 0 1px 0 rgba(240,230,210,0.12),
    0 0 14px rgba(220,210,190,0.2),
    0 0 28px rgba(220,210,190,0.08),
    0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.t-elegant.b-ex::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 20%, rgba(240,230,210,0.1) 40%, rgba(240,230,210,0.04) 60%, transparent 80%);
  animation: zzz-shimmer 2.5s ease-in-out infinite;
}
.t-elegant.b-ex::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,230,210,0.7), transparent);
}

.t-chinese.b-c {
  background: linear-gradient(145deg, #d8d0c4, #ccc4b8);
  color: #8a8070;
  border-radius: 4px;
  letter-spacing: 0.1em;
  border: 1px solid #b8b0a0;
}
.t-chinese.b-b {
  background: linear-gradient(145deg, #a09888, #8a8070);
  color: #f0e8d8;
  border-radius: 4px;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.t-chinese.b-a {
  background: linear-gradient(145deg, #5a5a50, #4a4a42, #5a5a50);
  color: #e0d8c8;
  border-radius: 4px;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 6px rgba(0,0,0,0.2);
}
.t-chinese.b-s {
  background: linear-gradient(145deg, #2a2420, #3a3028, #2a2420);
  color: #d4a850;
  border-radius: 4px;
  letter-spacing: 0.12em;
  border: 1px solid #5a4a30;
  box-shadow: inset 0 1px 0 rgba(212,168,80,0.1), 0 2px 6px rgba(0,0,0,0.3);
}
.t-chinese.b-sp {
  background: linear-gradient(145deg, #4a1818, #5a2020, #4a1818);
  color: #e85040;
  border-radius: 4px;
  letter-spacing: 0.12em;
  border: 1px solid #8a3030;
  box-shadow: 0 0 8px rgba(232,80,64,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  text-shadow: 0 0 6px rgba(232,80,64,0.4);
}
.t-chinese.b-ex {
  background: linear-gradient(145deg, #1a1410, #2a2018, #1a1410);
  color: #e8c060;
  border-radius: 4px;
  letter-spacing: 0.15em;
  border: 2px solid #a08030;
  text-shadow: 0 0 8px rgba(232,192,96,0.5);
  box-shadow:
    0 0 12px rgba(232,192,96,0.18),
    0 0 24px rgba(232,192,96,0.06),
    inset 0 1px 0 rgba(232,192,96,0.1),
    0 3px 8px rgba(0,0,0,0.4);
  overflow: hidden;
}
.t-chinese.b-ex::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 25%, rgba(232,192,96,0.1) 45%, rgba(232,192,96,0.03) 55%, transparent 75%);
  animation: zzz-shimmer 3s ease-in-out infinite;
}

.t-stamp.b-c  { background: transparent; color: #aaa; border: 2px solid #ccc; border-radius: 50%; width: 44px; height: 44px; padding: 0; min-width: unset; font-size: 0.8rem; transform: rotate(-5deg); }
.t-stamp.b-b  { background: transparent; color: #4a90d9; border: 2px solid #4a90d9; border-radius: 50%; width: 44px; height: 44px; padding: 0; min-width: unset; font-size: 0.8rem; transform: rotate(-8deg); }
.t-stamp.b-a  { background: transparent; color: #22803a; border: 2.5px solid #22803a; border-radius: 50%; width: 44px; height: 44px; padding: 0; min-width: unset; font-size: 0.8rem; transform: rotate(-6deg); }
.t-stamp.b-s  { background: transparent; color: #cc2222; border: 3px solid #cc2222; border-radius: 50%; width: 48px; height: 48px; padding: 0; min-width: unset; font-size: 0.85rem; transform: rotate(-10deg); }
.t-stamp.b-sp { background: transparent; color: #cc2222; border: 3px double #cc2222; border-radius: 50%; width: 56px; height: 56px; padding: 0; min-width: unset; font-size: 0.9rem; transform: rotate(-7deg); box-shadow: inset 0 0 0 2px transparent; }
.t-stamp.b-ex { background: transparent; color: #cc2222; border: 4px double #cc2222; border-radius: 50%; width: 64px; height: 64px; padding: 0; min-width: unset; font-size: 1rem; transform: rotate(-12deg); }
.t-stamp.b-lg { width: 80px; height: 80px; font-size: 1.3rem; border-width: 4px; }

.t-gothic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.t-gothic.b-c {
  background: linear-gradient(145deg, #2a1810, #3d1a0a);
  color: #a08070;
  border: 1px solid #4a2818;
  box-shadow: inset 0 1px 0 rgba(160,128,112,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.5);
}
.t-gothic.b-b {
  background: linear-gradient(#1e1608, #1e1608) padding-box,
              linear-gradient(135deg, #3a2808, #8b6914, #5c3d0a) border-box;
  color: #c4a060;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(196,160,96,0.2),
              inset 0 -1px 0 rgba(0,0,0,0.6),
              inset 0 0 6px rgba(0,0,0,0.4);
}
.t-gothic.b-a {
  background: linear-gradient(145deg, #1a0a2e, #2a1040) padding-box,
              linear-gradient(135deg, #5c3d0a, #d4a843, #8b6914, #d4a843, #5c3d0a) border-box;
  color: #c8a8e0;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(200,168,224,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.6),
              0 0 10px rgba(75,0,130,0.2);
  text-shadow: 0 0 6px rgba(200,168,224,0.25);
}
.t-gothic.b-s {
  background: linear-gradient(145deg, #0d1224, #1a2a4e) padding-box,
              linear-gradient(135deg, #5c3d0a, #d4a843, #b8860b, #d4a843, #5c3d0a) border-box;
  color: #d4c098;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(212,192,152,0.2),
              inset 0 -1px 0 rgba(0,0,0,0.7),
              0 0 12px rgba(26,58,110,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,0.5),
               0 0 8px rgba(212,168,67,0.2);
}
.t-gothic.b-sp {
  background: linear-gradient(145deg, #080e1e, #162040) padding-box,
              linear-gradient(135deg, #4a5570, #c0c8d8, #8090a8, #c0c8d8, #4a5570) border-box;
  color: #d8dce8;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(216,220,232,0.25),
              inset 0 -1px 0 rgba(0,0,0,0.7),
              0 0 14px rgba(192,200,216,0.2),
              0 0 30px rgba(42,74,142,0.15);
  text-shadow: 0 0 10px rgba(192,200,216,0.4);
  letter-spacing: 0.06em;
}
.t-gothic.b-ex {
  background: conic-gradient(from 45deg at 50% 50%,
                            rgba(75,0,130,0.7) 0deg,
                            rgba(20,5,40,0.9) 60deg,
                            rgba(139,26,26,0.6) 120deg,
                            rgba(10,4,30,0.9) 180deg,
                            rgba(26,58,110,0.6) 240deg,
                            rgba(15,5,35,0.9) 300deg,
                            rgba(75,0,130,0.7) 360deg);
  color: #f0e8d0;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(240,232,208,0.2),
              0 0 20px rgba(75,0,130,0.3);
  text-shadow: 0 0 6px rgba(240,232,208,0.5);
  outline: 2px solid #b8860b;
  outline-offset: 2px;
  letter-spacing: 0.08em;
}

/* ================================================================
   THEME 9: myst — ミステリアス系 v3（ランクごと色相変化・オーラ発光）
   ================================================================ */
.t-myst.b-c {
  background: radial-gradient(ellipse at 40% 30%, rgba(107,122,184,0.15) 0%, transparent 60%),
              linear-gradient(150deg, #1a1a2e, #0d0b1e);
  color: #9aaad4;
  border: 1px solid rgba(107,122,184,0.25);
  box-shadow: 0 0 6px rgba(107,122,184,0.2),
              0 0 16px rgba(74,85,128,0.1);
}
.t-myst.b-b {
  background: radial-gradient(ellipse at 60% 25%, rgba(61,184,146,0.2) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 75%, rgba(45,107,90,0.25) 0%, transparent 50%),
              linear-gradient(145deg, #0c1f1a, #07060f);
  color: #5ee8b8;
  border: 1px solid rgba(61,184,146,0.25);
  box-shadow: 0 0 5px rgba(94,232,184,0.3),
              0 0 14px rgba(61,184,146,0.15);
}
.t-myst.b-a {
  background: radial-gradient(ellipse at 35% 20%, rgba(155,95,219,0.3) 0%, transparent 50%),
              radial-gradient(ellipse at 75% 80%, rgba(107,63,160,0.25) 0%, transparent 55%),
              linear-gradient(140deg, #170e2b, #0a0718);
  color: #c490f0;
  border: 1px solid rgba(155,95,219,0.3);
  box-shadow: 0 0 6px rgba(196,144,240,0.4),
              0 0 16px rgba(155,95,219,0.25);
  text-shadow: 0 0 6px rgba(196,144,240,0.3);
}
.t-myst.b-s {
  background: radial-gradient(ellipse at 50% 30%, rgba(96,160,255,0.3) 0%, transparent 45%),
              radial-gradient(ellipse at 20% 80%, rgba(26,58,143,0.4) 0%, transparent 60%),
              linear-gradient(135deg, #0a1535, #060d1f);
  color: #b8d4ff;
  border: 1px solid rgba(96,160,255,0.3);
  box-shadow: 0 0 4px 1px rgba(96,160,255,0.7),
              0 0 10px 3px rgba(58,111,232,0.5),
              0 0 20px 6px rgba(26,58,143,0.3);
  text-shadow: 0 0 8px rgba(96,160,255,0.5);
}
.t-myst.b-sp {
  background: radial-gradient(ellipse at 50% 35%, rgba(255,208,96,0.4) 0%, transparent 35%),
              radial-gradient(ellipse at 50% 50%, rgba(232,130,10,0.25) 0%, transparent 55%),
              radial-gradient(ellipse at 10% 90%, rgba(123,63,200,0.3) 0%, transparent 50%),
              linear-gradient(145deg, #1a0f00, #0a0505);
  color: #ffe8a0;
  border: 1px solid rgba(232,130,10,0.4);
  box-shadow: 0 0 5px 1px rgba(255,208,96,0.7),
              0 0 12px 3px rgba(232,130,10,0.5),
              0 0 24px 8px rgba(139,74,0,0.3);
  text-shadow: 0 0 10px rgba(255,208,96,0.6);
}
.t-myst.b-ex {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 40%),
              radial-gradient(ellipse at 20% 80%, rgba(255,61,139,0.3) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(61,255,238,0.25) 0%, transparent 50%),
              linear-gradient(135deg, #1a0a3f, #07060f);
  color: #fff;
  border: 1px solid rgba(224,64,255,0.3);
  box-shadow: 0 0 3px 1px rgba(255,255,255,0.5),
              0 0 8px 3px rgba(224,64,255,0.6),
              0 0 18px 6px rgba(255,61,139,0.35);
  text-shadow: 0 0 12px rgba(255,255,255,0.6);
}

/* ================================================================
   THEME 10: yumekawa — ゆめかわ系 v3（虹色+sad-cute EX）+ ミルキーテキスト
   ================================================================ */
.t-yumekawa { border-radius: 20px !important; }
.t-yumekawa.b-lg { border-radius: 24px !important; }

/* Grain overlay for all yumekawa badges */
.t-yumekawa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.t-yumekawa.b-c {
  background: #d0d0de;
  color: #b8b0c0;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 8px rgba(180,160,220,0.25);
  text-shadow: 0 0 4px rgba(120,100,140,0.3);
}
.t-yumekawa.b-b {
  background: linear-gradient(135deg, #b8e8ff, #d4f0ff);
  color: #78a0c8;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 10px rgba(100,180,255,0.2);
  text-shadow: 0 0 4px rgba(80,120,160,0.3);
}
.t-yumekawa.b-a {
  background: linear-gradient(135deg, #ffd6f0, #e8d5ff);
  color: #c080c0;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 12px rgba(255,180,220,0.3);
  text-shadow: 0 0 4px rgba(160,80,160,0.3);
}
.t-yumekawa.b-s {
  background: linear-gradient(135deg, #ffb6d9, #e0c0ff, #b8d8ff);
  color: #b068b8;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 14px rgba(255,182,217,0.4),
              0 0 28px rgba(200,160,255,0.2);
  text-shadow: 0 0 6px rgba(160,80,160,0.4);
}
.t-yumekawa.b-sp {
  background: linear-gradient(135deg, #ffc8e8, #d8c0ff, #a8d8ff, #c0f0e8, #ffd0e0);
  background-size: 300% 300%;
  animation: zzz-yume-aurora 6s ease-in-out infinite alternate;
  color: #a058b0;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 10px rgba(255,200,232,0.5),
              0 0 20px rgba(216,192,255,0.35),
              0 0 40px rgba(168,216,255,0.2);
  text-shadow: 0 0 6px rgba(140,60,150,0.4);
}
.t-yumekawa.b-ex {
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,220,240,0.35) 25%,
                     rgba(220,200,255,0.35) 45%, rgba(200,240,255,0.35) 65%,
                     transparent 100%),
    conic-gradient(from var(--angle), #ffb6d9, #e8d5ff, #b8e8ff, #c8f2e8, #ffe8d6, #ffb6d9),
    linear-gradient(135deg, #1a0a3c, #2d1b69, #1a0a3c);
  background-blend-mode: screen, color-dodge, normal;
  color: #5a1a70;
  -webkit-text-stroke: 1px rgba(255,220,240,0.85);
  paint-order: stroke fill;
  border: none;
  box-shadow: 0 0 8px rgba(224,160,255,0.5),
              0 0 20px rgba(180,120,255,0.35);
  text-shadow: 0 0 12px rgba(255,180,230,0.9), 0 0 24px rgba(180,80,200,0.4);
  animation: zzz-yume-spin 6s linear infinite;
}

/* ================================================================
   THEME 11: military — ミリタリー系（プレスメタル風）
   ================================================================ */
.t-military.b-c {
  background: linear-gradient(180deg, #7a7d65 0%, #6b6e55 40%, #5a5d48 60%, #6b6e55 100%);
  color: #c0c4a8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),
              inset 0 -1px 0 rgba(0,0,0,0.2);
}
.t-military.b-b {
  background: linear-gradient(180deg, #a09a80 0%, #8a8468 40%, #7a7460 60%, #8a8468 100%);
  color: #3a3a28;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
              inset 0 -1px 0 rgba(0,0,0,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.t-military.b-a {
  background: linear-gradient(180deg, #5a6a42 0%, #4a5a34 30%, #3a4a28 60%, #4a5a34 100%);
  color: #c8d8a4;
  border: 2px solid #6a7a4a;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.15),
              inset 0 -2px 0 rgba(0,0,0,0.3);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.t-military.b-s {
  background: linear-gradient(180deg, #c09050 0%, #a07838 20%, #886828 40%, #a07838 50%,
                               #c09050 60%, #a07838 80%, #886828 100%);
  color: #ffe8c0;
  border: 2px solid #a08040;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25),
              inset 0 -2px 0 rgba(0,0,0,0.35),
              0 2px 4px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4),
               0 -1px 0 rgba(255,255,255,0.1);
}
.t-military.b-sp {
  background: linear-gradient(180deg, #d0d0d4 0%, #b8b8bc 20%, #a0a0a4 40%, #b8b8bc 50%,
                               #d0d0d4 60%, #b8b8bc 80%, #a0a0a4 100%);
  color: #2a2a30;
  border: 2px solid #c0c0c4;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.4),
              inset 0 -2px 0 rgba(0,0,0,0.25),
              0 3px 6px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5),
               0 -1px 0 rgba(0,0,0,0.1);
}
.t-military.b-ex {
  background: linear-gradient(180deg, #e8c848 0%, #d4a820 15%, #b08818 30%, #d4a820 42%,
                               #ffd850 50%, #d4a820 58%, #b08818 70%, #d4a820 85%, #e8c848 100%);
  color: #2a1800;
  border: 3px solid #c09820;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.35),
              inset 0 -3px 0 rgba(0,0,0,0.35),
              inset 2px 0 0 rgba(255,255,255,0.1),
              inset -2px 0 0 rgba(0,0,0,0.1),
              0 4px 8px rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 rgba(255,215,0,0.5),
               0 -1px 0 rgba(0,0,0,0.3);
}

/* ================================================================
   Shared keyframes
   ================================================================ */
@keyframes zzz-rainbow-spin {
  to { --angle: 360deg; }
}
@keyframes zzz-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes zzz-diamond-flash {
  0%   { transform: translateX(-120%); opacity: 0.6; }
  50%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0.6; }
}
@keyframes zzz-crystal-refract {
  0%   { transform: translateX(-100%) rotate(-2deg); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%) rotate(2deg); opacity: 0.5; }
}
@keyframes zzz-yume-aurora {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 100%; }
}
@keyframes zzz-yume-spin {
  to { --angle: 360deg; }
}

/* ================================================================
   Theme: 熱血 nekketsu — 炎の温度上昇 (Passion One)
   ================================================================ */
.t-nekketsu { font-family: 'Passion One', sans-serif; letter-spacing: 0.05em; }

.t-nekketsu.b-c {
    background: linear-gradient(135deg, #3d2b1f, #4a3020);
    color: #b08060;
    border: 1px solid rgba(160,100,60,0.3);
    text-shadow: 0 0 4px rgba(160,100,60,0.2);
}
.t-nekketsu.b-b {
    background: linear-gradient(135deg, #5c2e0e, #6a3810);
    color: #e0854a;
    border: 1px solid rgba(200,120,60,0.4);
    text-shadow: 0 0 4px rgba(200,120,60,0.3);
}
.t-nekketsu.b-a {
    background: linear-gradient(135deg, #8b1a1a, #c62828);
    color: #fff;
    border: 1px solid rgba(255,100,50,0.4);
    text-shadow: 0 0 6px rgba(255,80,0,0.4);
}
.t-nekketsu.b-s {
    background: linear-gradient(135deg, #d50000, #ff6d00);
    color: #fff;
    border: 1px solid rgba(255,150,0,0.5);
    text-shadow: 0 1px 6px rgba(255,50,0,0.5);
    box-shadow: 0 0 8px rgba(255,80,0,0.3);
}
.t-nekketsu.b-sp {
    background: linear-gradient(135deg, #ff1744, #ff9100, #ffea00);
    color: #fff;
    border: 1px solid rgba(255,200,0,0.5);
    text-shadow: 0 0 8px rgba(255,150,0,0.6), 0 0 16px rgba(255,50,0,0.3);
    box-shadow: 0 0 12px rgba(255,100,0,0.4);
}
.t-nekketsu.b-ex {
    background: linear-gradient(135deg, #ff6d00, #ffab00, #fff8e1, #ffab00, #ff6d00);
    background-size: 200% 200%;
    animation: zzz-nekketsu-burn 3s ease-in-out infinite;
    color: #fff;
    text-shadow: 0 0 12px rgba(255,200,100,0.9), 0 0 24px rgba(255,100,0,0.5);
    border: 1px solid rgba(255,255,200,0.6);
    box-shadow: 0 0 16px rgba(255,100,0,0.5), 0 0 32px rgba(255,50,0,0.2);
}
@keyframes zzz-nekketsu-burn {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ================================================================
   Theme: 妖艶 youen — ダークグラス蠱惑 (Abril Fatface)
   ================================================================ */
.t-youen { font-family: 'Abril Fatface', serif; letter-spacing: 0.04em; }

.t-youen.b-c {
    background: rgba(30,15,35,0.7);
    color: #8a7a9a;
    border: 1px solid rgba(120,100,140,0.3);
}
.t-youen.b-b {
    background: rgba(35,15,50,0.8);
    color: #a77dc0;
    border: 1px solid rgba(150,100,180,0.4);
    box-shadow: inset 0 0 8px rgba(100,50,140,0.15);
}
.t-youen.b-a {
    background: rgba(50,10,50,0.85);
    color: #c890d0;
    border: 1px solid rgba(180,120,200,0.5);
    text-shadow: 0 0 6px rgba(180,100,200,0.3);
    box-shadow: inset 0 0 10px rgba(140,50,180,0.15);
}
.t-youen.b-s {
    background: rgba(40,5,30,0.9);
    color: #e040a0;
    border: 1px solid rgba(220,60,160,0.5);
    text-shadow: 0 0 8px rgba(220,40,140,0.4);
    box-shadow: 0 0 8px rgba(200,20,120,0.2), inset 0 0 10px rgba(180,30,100,0.15);
}
.t-youen.b-sp {
    background: rgba(30,0,25,0.92);
    color: #f060c0;
    border: 1px solid rgba(240,100,200,0.5);
    text-shadow: 0 0 10px rgba(240,80,180,0.5), 0 0 20px rgba(200,40,160,0.3);
    box-shadow: 0 0 12px rgba(220,40,160,0.3), inset 0 0 12px rgba(200,30,140,0.15);
}
.t-youen.b-ex {
    background: rgba(15,0,15,0.95);
    color: #ff80e0;
    text-shadow: 0 0 12px rgba(255,100,220,0.7), 0 0 24px rgba(200,40,180,0.4);
    border: 1px solid rgba(255,120,220,0.5);
    box-shadow: 0 0 1px 1px rgba(255,100,220,0.4), 0 0 16px rgba(220,40,180,0.4), 0 0 32px rgba(150,0,120,0.2), inset 0 0 14px rgba(200,30,160,0.2);
    animation: zzz-youen-glow 3s ease-in-out infinite;
}
.t-youen.b-ex::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,200,255,0.12) 42%,
        rgba(255,255,255,0.22) 50%,
        rgba(200,150,255,0.12) 58%,
        transparent 65%
    );
    background-size: 250% 100%;
    animation: zzz-youen-reflect 4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes zzz-youen-glow {
    0%, 100% {
        box-shadow: 0 0 1px 1px rgba(255,100,220,0.4), 0 0 16px rgba(220,40,180,0.4), 0 0 32px rgba(150,0,120,0.2), inset 0 0 14px rgba(200,30,160,0.2);
    }
    50% {
        box-shadow: 0 0 1px 1px rgba(255,140,240,0.6), 0 0 24px rgba(240,60,200,0.5), 0 0 48px rgba(180,0,150,0.3), inset 0 0 18px rgba(220,50,180,0.25);
    }
}
@keyframes zzz-youen-reflect {
    0%, 100% { background-position: 250% 0; }
    50% { background-position: -50% 0; }
}

/* ================================================================
   Theme: 動物 doubutsu — 野生の力 (Permanent Marker)
   ================================================================ */
.t-doubutsu { font-family: 'Permanent Marker', cursive; letter-spacing: 0.03em; }

.t-doubutsu.b-c {
    background: #3a3228;
    color: #a89070;
    border: 1px solid rgba(140,110,80,0.4);
}
.t-doubutsu.b-b {
    background: #243a24;
    color: #70a870;
    border: 1px solid rgba(80,140,80,0.4);
    text-shadow: 0 0 3px rgba(60,120,60,0.2);
}
.t-doubutsu.b-a {
    background: linear-gradient(135deg, #5a4200, #7a5800);
    color: #ffcc00;
    border: 1px solid rgba(200,160,0,0.5);
    text-shadow: 0 0 4px rgba(200,160,0,0.3);
}
.t-doubutsu.b-s {
    background: linear-gradient(135deg, #8b4513, #c2610a);
    color: #fff;
    border: 1px solid rgba(220,140,50,0.5);
    text-shadow: 0 0 6px rgba(200,120,40,0.4);
    box-shadow: 0 0 6px rgba(180,100,30,0.3);
}
.t-doubutsu.b-sp {
    background: linear-gradient(135deg, #8b6914, #c49b18, #8b6914);
    color: #fff;
    border: 1px solid rgba(220,180,60,0.6);
    text-shadow: 0 0 8px rgba(200,160,50,0.5);
    box-shadow: 0 0 10px rgba(200,150,30,0.3);
}
.t-doubutsu.b-ex {
    background: linear-gradient(135deg, #8b6914, #daa520, #ffd700, #daa520, #8b6914);
    background-size: 200% 200%;
    animation: zzz-doubutsu-pulse 3s ease-in-out infinite;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,200,50,0.7), 0 0 20px rgba(200,150,0,0.4);
    border: 1px solid rgba(255,215,0,0.6);
    box-shadow: 0 0 14px rgba(255,180,0,0.4), 0 0 28px rgba(200,130,0,0.2);
}
@keyframes zzz-doubutsu-pulse {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ================================================================
   Accessibility: Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .zzz-badge,
  .zzz-badge::before,
  .zzz-badge::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 600px) {
  .zzz-badge { font-size: 0.75rem; padding: 5px 10px; min-width: 40px; }
  .zzz-badge.b-lg { font-size: 1.1rem; padding: 10px 20px; min-width: 64px; }
}