/* 絵馬専用CSS - デザインパターン管理用 */

/* ============================================
   基本形状・サイズ
   ============================================ */
.ema-card {
  aspect-ratio: 16/10;
  clip-path: polygon(20% 0%, 80% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
  transition: transform 0.2s ease;
}

.ema-card-item {
  flex-shrink: 0;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  cursor: pointer;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時の視覚的フィードバック（transformを使わず、filterとbox-shadowを使用） */
.ema-card-item:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.2), 0 4px 8px -2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   回転アニメーション
   ============================================ */
.ema-rotate-1 { 
  transform: rotate(1.5deg); 
}

.ema-rotate-2 { 
  transform: rotate(-2deg); 
}

.ema-rotate-3 { 
  transform: rotate(1deg); 
}

/* ============================================
   デザインパターン: デフォルト
   ============================================ */
.ema-pattern-default {
  /* 他人の絵馬 */
  background-color: #dcc4a3;
  border: 2px solid #8b4513;
  color: #5d4037;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.ema-pattern-default.ema-mine {
  /* 自分の絵馬 */
  background-color: #4a2c2c;
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 他人の絵馬の背景色バリエーション */
.ema-pattern-default.ema-bg-variant-1 {
  background-color: #dcc4a3;
}

.ema-pattern-default.ema-bg-variant-2 {
  background-color: #e6d5bc;
}

/* テキストスタイル（基本） */
.ema-text-default,
.ema-text-mine {
  font-weight: bold;
  line-height: 1.375;
  padding: 0 0.5rem;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

.ema-text-default {
  color: #5d4037;
  margin-top: 1.5rem;
}

.ema-text-mine {
  color: #ffffff;
  margin-top: 2rem;
}

/* 文字数に応じたフォントサイズ（他人の絵馬） */
.ema-text-default.ema-text-length-1-4 {
  font-size: 1.25rem; /* 20px - 最大 */
}

.ema-text-default.ema-text-length-5-9 {
  font-size: 1.125rem; /* 18px */
}

.ema-text-default.ema-text-length-10-14 {
  font-size: 1rem; /* 16px */
}

.ema-text-default.ema-text-length-15-19 {
  font-size: 0.875rem; /* 14px */
}

.ema-text-default.ema-text-length-20-25 {
  font-size: 0.75rem; /* 12px */
}

.ema-text-default.ema-text-length-26-39 {
  font-size: 0.6875rem; /* 11px - 長文用 */
}

/* 文字数に応じたフォントサイズ（自分の絵馬） */
.ema-text-mine.ema-text-length-1-4 {
  font-size: 1.375rem; /* 22px - 最大 */
}

.ema-text-mine.ema-text-length-5-9 {
  font-size: 1.25rem; /* 20px */
}

.ema-text-mine.ema-text-length-10-14 {
  font-size: 1.125rem; /* 18px */
}

.ema-text-mine.ema-text-length-15-19 {
  font-size: 1rem; /* 16px */
}

.ema-text-mine.ema-text-length-20-25 {
  font-size: 0.875rem; /* 14px */
}

.ema-text-mine.ema-text-length-26-39 {
  font-size: 0.8125rem; /* 13px - 長文用 */
}

/* アイコンスタイル */
.ema-icon-default {
  color: rgba(139, 69, 19, 0.4);
  margin-top: 0.25rem;
}

.ema-icon-mine {
  color: rgba(255, 215, 0, 0.6);
  margin-top: 0.5rem;
}

.ema-icon-default .material-symbols-outlined {
  font-size: 1.125rem;
}

.ema-icon-mine .material-symbols-outlined {
  font-size: 1.25rem;
}

/* ============================================
   バッジ・ラベル
   ============================================ */
.ema-order-badge {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #5d4037;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 9999px;
  z-index: 20;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(139, 69, 19, 0.2);
}

.ema-mine-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffd700;
  color: #1c0d0d;
  font-size: 0.5625rem; /* 9px */
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 9999px;
  z-index: 30;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  transform: rotate(35deg);
  transform-origin: center;
}

/* ============================================
   円形配置用スタイル
   ============================================ */
.ema-card-circular {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)));
  z-index: 5;
}

/* ============================================
   画像背景パターン対応（将来拡張用）
   ============================================ */
.ema-card-item[style*="background-image"] {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.ema-card-item[style*="background-image"] p {
  position: relative;
  z-index: 1;
}

/* ============================================
   拍手済みの視覚的表示
   ============================================ */
.ema-clapped {
  border-color: #f2330d !important;
  box-shadow: 0 4px 12px -2px rgba(242, 51, 13, 0.3), 0 2px 4px -1px rgba(242, 51, 13, 0.2) !important;
}

.ema-clapped::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(242, 51, 13, 0.05) 0%, rgba(242, 51, 13, 0.1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================
   レスポンシブ対応
   ============================================ */
@media (max-width: 768px) {
  .ema-order-badge {
    font-size: 0.625rem; /* 10px */
    padding: 3px 8px;
  }
  
  .ema-mine-badge {
    font-size: 0.5rem; /* 8px */
    padding: 2px 3px;
  }
}

/* ============================================
   テキストの行数制限（Tailwind line-clamp代替）
   ============================================ */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   デザインパターン: 青空絵馬（あおぞらえま）
   ============================================ */
.ema-pattern-sky {
  position: relative;
  background: linear-gradient(165deg, #e3f2fd 0%, #bbdefb 35%, #90caf9 70%, #64b5f6 100%);
  border: 3px solid #1976d2;
  color: #0d47a1;
  box-shadow: 0 4px 12px -2px rgba(25, 118, 210, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.ema-pattern-sky::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 12%),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 10%),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 15%);
  pointer-events: none;
}

.ema-pattern-sky .ema-text-default {
  position: relative;
  z-index: 2;
  color: #0d47a1 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 0 1px rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.45);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-sky.ema-mine {
  background: linear-gradient(165deg, #0d47a1 0%, #1565c0 40%, #1976d2 70%, #1e88e5 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(13, 71, 161, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ema-pattern-sky.ema-mine::before {
  background-image: radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 20%),
    radial-gradient(circle at 80% 35%, rgba(255, 255, 255, 0.1) 0%, transparent 18%);
}

.ema-pattern-sky.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-sky .ema-icon-default {
  color: rgba(25, 118, 210, 0.6);
}

.ema-pattern-sky .ema-icon-mine {
  color: rgba(255, 215, 0, 0.85);
}

.ema-pattern-sky .ema-order-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #1565c0;
  border-color: rgba(25, 118, 210, 0.3);
}

.ema-pattern-sky .ema-mine-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffecb3 100%);
  color: #0d47a1;
}

.ema-pattern-sky [data-claps-count] {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1565c0 !important;
  border-color: rgba(25, 118, 210, 0.3) !important;
}

/* ============================================
   デザインパターン: 桜吹雪（さくらふぶき）
   ============================================ */
.ema-pattern-sakura {
  position: relative;
  background: linear-gradient(165deg, #fff5f5 0%, #ffe4e9 30%, #ffcdd2 55%, #f8bbd9 80%, #f48fb1 100%);
  border: 3px solid #c2185b;
  color: #880e4f;
  box-shadow: 0 4px 12px -2px rgba(194, 24, 91, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.ema-pattern-sakura::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23f48fb1' fill-opacity='0.28'%3E%3Cellipse cx='20' cy='6' rx='3.5' ry='7' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='6' rx='3.5' ry='7' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='6' rx='3.5' ry='7' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='6' rx='3.5' ry='7' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='6' rx='3.5' ry='7' transform='rotate(288 20 20)'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill-opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 52px;
  background-position: 4px 2px;
  pointer-events: none;
}

.ema-pattern-sakura::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.5) 0%, transparent 25%),
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 20%);
  pointer-events: none;
}

.ema-pattern-sakura .ema-text-default {
  position: relative;
  z-index: 2;
  color: #6a1b9a !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 1px rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-sakura.ema-mine {
  background: linear-gradient(165deg, #880e4f 0%, #ad1457 35%, #c2185b 65%, #d81b60 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(136, 14, 79, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ema-pattern-sakura.ema-mine::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f48fb1' fill-opacity='0.2'%3E%3Cpath d='M12 2c.5 0 1 .2 1.4.5.4.4.6.9.6 1.5 0 .6-.2 1.1-.6 1.5l-.4.4-.4-.4C11.2 3.7 11 3.2 11 2.6c0-.6.2-1.1.6-1.5C11.8.7 12.3.5 12.8.5z'/%3E%3C/svg%3E");
  background-size: 36px 36px;
}

.ema-pattern-sakura.ema-mine::after {
  background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 30%);
}

.ema-pattern-sakura.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-sakura .ema-icon-default {
  color: rgba(194, 24, 91, 0.6);
}

.ema-pattern-sakura .ema-icon-mine {
  color: rgba(255, 215, 0, 0.9);
}

.ema-pattern-sakura .ema-order-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #ad1457;
  border-color: rgba(194, 24, 91, 0.3);
}

.ema-pattern-sakura .ema-mine-badge {
  background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%);
  color: #880e4f;
}

.ema-pattern-sakura [data-claps-count] {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #ad1457 !important;
  border-color: rgba(194, 24, 91, 0.3) !important;
}

/* ============================================
   デザインパターン: 合格祈願（ごうかくきがん）
   ============================================ */
.ema-pattern-goukaku {
  position: relative;
  background: linear-gradient(160deg, #fff1f2 0%, #fee2e2 60%, #fecaca 100%);
  border: 3px solid #b91c1c;
  color: #7f1d1d;
  box-shadow: 0 4px 12px -2px rgba(185, 28, 28, 0.3), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.ema-pattern-goukaku::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 6px, transparent 6px 12px);
  pointer-events: none;
}

.ema-pattern-goukaku .ema-text-default {
  position: relative;
  z-index: 2;
  color: #7f1d1d !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-goukaku.ema-mine {
  background: linear-gradient(165deg, #7f1d1d 0%, #991b1b 60%, #b91c1c 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(127, 29, 29, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

.ema-pattern-goukaku.ema-mine::before {
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 25%);
}

.ema-pattern-goukaku.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-goukaku .ema-icon-default { color: rgba(185, 28, 28, 0.6); }
.ema-pattern-goukaku .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-goukaku .ema-order-badge { background: rgba(255,255,255,0.95); color: #b91c1c; border-color: rgba(185,28,28,0.3); }
.ema-pattern-goukaku .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #7f1d1d; }
.ema-pattern-goukaku [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #b91c1c !important; border-color: rgba(185,28,28,0.3) !important; }

/* ============================================
   デザインパターン: 朱印帳（しゅいんちょう）
   ============================================ */
.ema-pattern-shuin {
  position: relative;
  background: linear-gradient(160deg, #fff7f7 0%, #fff1f2 70%, #fee2e2 100%);
  border: 3px solid #dc2626;
  color: #7f1d1d;
  box-shadow: 0 4px 12px -2px rgba(220, 38, 38, 0.3), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.ema-pattern-shuin::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(220,38,38,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,38,38,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
}

.ema-pattern-shuin::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 25%, rgba(220,38,38,0.18) 0%, transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(220,38,38,0.12) 0%, transparent 25%);
  pointer-events: none;
}

.ema-pattern-shuin .ema-text-default {
  position: relative;
  z-index: 2;
  color: #7f1d1d !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-shuin.ema-mine {
  background: linear-gradient(165deg, #991b1b 0%, #b91c1c 60%, #dc2626 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(153, 27, 27, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

.ema-pattern-shuin.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-shuin .ema-icon-default { color: rgba(220, 38, 38, 0.6); }
.ema-pattern-shuin .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-shuin .ema-order-badge { background: rgba(255,255,255,0.95); color: #dc2626; border-color: rgba(220,38,38,0.3); }
.ema-pattern-shuin .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #7f1d1d; }
.ema-pattern-shuin [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #dc2626 !important; border-color: rgba(220,38,38,0.3) !important; }

/* ============================================
   デザインパターン: 満天の星（まんてんのほし）
   ============================================ */
.ema-pattern-stars {
  position: relative;
  background: linear-gradient(165deg, #e8eaf6 0%, #e3e7ff 60%, #c5cae9 100%);
  border: 3px solid #3949ab;
  color: #1a237e;
  box-shadow: 0 4px 12px -2px rgba(57, 73, 171, 0.3), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.ema-pattern-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7) 0%, transparent 8%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6) 0%, transparent 6%),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.5) 0%, transparent 7%);
  pointer-events: none;
}

.ema-pattern-stars .ema-text-default {
  position: relative;
  z-index: 2;
  color: #1a237e !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.55);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-stars.ema-mine {
  background: linear-gradient(165deg, #1a237e 0%, #283593 60%, #303f9f 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(26, 35, 126, 0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-stars.ema-mine::before {
  background-image: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18) 0%, transparent 18%);
}

.ema-pattern-stars.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-stars .ema-icon-default { color: rgba(57, 73, 171, 0.6); }
.ema-pattern-stars .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-stars .ema-order-badge { background: rgba(255,255,255,0.95); color: #3949ab; border-color: rgba(57,73,171,0.3); }
.ema-pattern-stars .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #1a237e; }
.ema-pattern-stars [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #3949ab !important; border-color: rgba(57,73,171,0.3) !important; }

/* ============================================
   デザインパターン: 墨流し（すみながし）
   ============================================ */
.ema-pattern-suminagashi {
  position: relative;
  background: linear-gradient(165deg, #f5f5f5 0%, #eeeeee 60%, #e0e0e0 100%);
  border: 3px solid #9e9e9e;
  color: #424242;
  box-shadow: 0 4px 12px -2px rgba(97, 97, 97, 0.25), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-suminagashi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, rgba(0,0,0,0.04), transparent 40%),
    linear-gradient(220deg, rgba(0,0,0,0.05), transparent 50%);
  pointer-events: none;
}

.ema-pattern-suminagashi .ema-text-default {
  position: relative;
  z-index: 2;
  color: #424242 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.65);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-suminagashi.ema-mine {
  background: linear-gradient(165deg, #424242 0%, #616161 60%, #757575 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(66,66,66,0.45), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-suminagashi.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-suminagashi .ema-icon-default { color: rgba(97, 97, 97, 0.6); }
.ema-pattern-suminagashi .ema-icon-mine { color: rgba(255, 215, 0, 0.85); }
.ema-pattern-suminagashi .ema-order-badge { background: rgba(255,255,255,0.95); color: #616161; border-color: rgba(97,97,97,0.3); }
.ema-pattern-suminagashi .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #424242; }
.ema-pattern-suminagashi [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #616161 !important; border-color: rgba(97,97,97,0.3) !important; }

/* ============================================
   デザインパターン: 紅葉（もみじ）
   ============================================ */
.ema-pattern-momiji {
  position: relative;
  background: linear-gradient(165deg, #fff3e0 0%, #ffe0b2 60%, #ffcc80 100%);
  border: 3px solid #d97706;
  color: #8a3b12;
  box-shadow: 0 4px 12px -2px rgba(217, 119, 6, 0.3), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-momiji::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 25%, rgba(217,119,6,0.18) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(244,120,0,0.16) 0%, transparent 26%);
  pointer-events: none;
}

.ema-pattern-momiji .ema-text-default {
  position: relative;
  z-index: 2;
  color: #8a3b12 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-momiji.ema-mine {
  background: linear-gradient(165deg, #c2410c 0%, #ea580c 60%, #f97316 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(194,65,12,0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-momiji.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-momiji .ema-icon-default { color: rgba(217, 119, 6, 0.6); }
.ema-pattern-momiji .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-momiji .ema-order-badge { background: rgba(255,255,255,0.95); color: #d97706; border-color: rgba(217,119,6,0.3); }
.ema-pattern-momiji .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #8a3b12; }
.ema-pattern-momiji [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #d97706 !important; border-color: rgba(217,119,6,0.3) !important; }

/* ============================================
   デザインパターン: 初雪（はつゆき）
   ============================================ */
.ema-pattern-snow {
  position: relative;
  background: linear-gradient(165deg, #f0f7ff 0%, #e3f2fd 60%, #bbdefb 100%);
  border: 3px solid #90caf9;
  color: #0b4f6c;
  box-shadow: 0 4px 12px -2px rgba(100, 181, 246, 0.3), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-snow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.7) 0%, transparent 10%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.6) 0%, transparent 12%),
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.5) 0%, transparent 9%);
  pointer-events: none;
}

.ema-pattern-snow .ema-text-default {
  position: relative;
  z-index: 2;
  color: #0b4f6c !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-snow.ema-mine {
  background: linear-gradient(165deg, #0b4f6c 0%, #1565c0 60%, #1976d2 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(11,79,108,0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-snow.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-snow .ema-icon-default { color: rgba(100, 181, 246, 0.6); }
.ema-pattern-snow .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-snow .ema-order-badge { background: rgba(255,255,255,0.95); color: #0b4f6c; border-color: rgba(100,181,246,0.3); }
.ema-pattern-snow .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #0b4f6c; }
.ema-pattern-snow [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #0b4f6c !important; border-color: rgba(100,181,246,0.3) !important; }

/* ============================================
   デザインパターン: 花火（はなび）
   ============================================ */
.ema-pattern-hanabi {
  position: relative;
  background: linear-gradient(165deg, #eef2ff 0%, #e0e7ff 60%, #c7d2fe 100%);
  border: 3px solid #6366f1;
  color: #1e3a8a;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.3), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-hanabi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 22%);
  pointer-events: none;
}

.ema-pattern-hanabi .ema-text-default {
  position: relative;
  z-index: 2;
  color: #1e3a8a !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-hanabi.ema-mine {
  background: linear-gradient(165deg, #0f172a 0%, #1e1b4b 60%, #312e81 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(15,23,42,0.6), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-hanabi.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-hanabi .ema-icon-default { color: rgba(99, 102, 241, 0.65); }
.ema-pattern-hanabi .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-hanabi .ema-order-badge { background: rgba(255,255,255,0.95); color: #6366f1; border-color: rgba(99,102,241,0.3); }
.ema-pattern-hanabi .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #1e1b4b; }
.ema-pattern-hanabi [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #6366f1 !important; border-color: rgba(99,102,241,0.3) !important; }

/* ============================================
   デザインパターン: 海風（うみかぜ）
   ============================================ */
.ema-pattern-umi {
  position: relative;
  background: linear-gradient(165deg, #e0f7fa 0%, #b2ebf2 60%, #80deea 100%);
  border: 3px solid #00acc1;
  color: #01579b;
  box-shadow: 0 4px 12px -2px rgba(0, 172, 193, 0.3), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-umi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(0,172,193,0.12) 0 2px, transparent 2px 6px);
  pointer-events: none;
}

.ema-pattern-umi .ema-text-default {
  position: relative;
  z-index: 2;
  color: #01579b !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-umi.ema-mine {
  background: linear-gradient(165deg, #01579b 0%, #0277bd 60%, #0288d1 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(1,87,155,0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-umi.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-umi .ema-icon-default { color: rgba(0, 172, 193, 0.6); }
.ema-pattern-umi .ema-icon-mine { color: rgba(255, 215, 0, 0.9); }
.ema-pattern-umi .ema-order-badge { background: rgba(255,255,255,0.95); color: #00acc1; border-color: rgba(0,172,193,0.3); }
.ema-pattern-umi .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #01579b; }
.ema-pattern-umi [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #00acc1 !important; border-color: rgba(0,172,193,0.3) !important; }

/* ============================================
   デザインパターン: 金運（きんうん）
   ============================================ */
.ema-pattern-kinun {
  position: relative;
  background: linear-gradient(165deg, #fff8e1 0%, #ffecb3 60%, #ffe082 100%);
  border: 3px solid #f9a825;
  color: #8d6e63;
  box-shadow: 0 4px 12px -2px rgba(249, 168, 37, 0.35), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-kinun::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(249,168,37,0.12) 0%, transparent 40%);
  pointer-events: none;
}

.ema-pattern-kinun .ema-text-default {
  position: relative;
  z-index: 2;
  color: #8d6e63 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-kinun.ema-mine {
  background: linear-gradient(165deg, #8d6e63 0%, #6d4c41 60%, #5d4037 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(141,110,99,0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-kinun.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-kinun .ema-icon-default { color: rgba(249, 168, 37, 0.75); }
.ema-pattern-kinun .ema-icon-mine { color: rgba(255, 215, 0, 0.95); }
.ema-pattern-kinun .ema-order-badge { background: rgba(255,255,255,0.95); color: #8d6e63; border-color: rgba(249,168,37,0.35); }
.ema-pattern-kinun .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #8d6e63; }
.ema-pattern-kinun [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #8d6e63 !important; border-color: rgba(249,168,37,0.35) !important; }

/* ============================================
   デザインパターン: 癒しの和（いやしのわ）
   ============================================ */
.ema-pattern-healing {
  position: relative;
  background: linear-gradient(165deg, #f3e8ff 0%, #e9d5ff 60%, #ddd6fe 100%);
  border: 3px solid #a78bfa;
  color: #4a148c;
  box-shadow: 0 4px 12px -2px rgba(167, 139, 250, 0.35), 0 2px 6px -2px rgba(0,0,0,0.12);
  overflow: hidden;
}

.ema-pattern-healing::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.5) 0%, transparent 22%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.45) 0%, transparent 25%);
  pointer-events: none;
}

.ema-pattern-healing .ema-text-default {
  position: relative;
  z-index: 2;
  color: #4a148c !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.6);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin: 0.75rem 0;
  line-height: 1.5;
}

.ema-pattern-healing.ema-mine {
  background: linear-gradient(165deg, #4a148c 0%, #6a1b9a 60%, #7b1fa2 100%);
  border: 4px solid #ffd700;
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(74,20,140,0.5), 0 4px 12px -2px rgba(0,0,0,0.25);
}

.ema-pattern-healing.ema-mine .ema-text-mine {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.25);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

.ema-pattern-healing .ema-icon-default { color: rgba(167, 139, 250, 0.75); }
.ema-pattern-healing .ema-icon-mine { color: rgba(255, 215, 0, 0.95); }
.ema-pattern-healing .ema-order-badge { background: rgba(255,255,255,0.95); color: #4a148c; border-color: rgba(167,139,250,0.35); }
.ema-pattern-healing .ema-mine-badge { background: linear-gradient(135deg, #ffd700 0%, #fff8e1 100%); color: #4a148c; }
.ema-pattern-healing [data-claps-count] { background: rgba(255,255,255,0.95) !important; color: #4a148c !important; border-color: rgba(167,139,250,0.35) !important; }