/*
 * Pokeca Holo Theme
 * v1.1.0：ホロの見た目は「トップの検索の帯」と「カード一覧の画像のきらめき」の2か所だけ。
 * 見出し・1位の番号・ヘッダーとフッターの帯は、元の見た目に戻した。
 * 書体は管理画面（設定 → ホロの見た目）で選ぶ。--holo-font に入る。
 * 既存のCSSより後から読まれない場合に備え、セレクタは html body から書いて優先させる。
 */

:root {
  --holo-ink: #1d1856;
  --holo-pink: #ff7ab6;
  --holo-gold: #ffd166;
  --holo-mint: #5be3a6;
  --holo-cyan: #4fd2f2;
  --holo-violet: #8f7bff;
  --holo: linear-gradient(115deg, var(--holo-pink) 0%, var(--holo-gold) 18%, var(--holo-mint) 36%, var(--holo-cyan) 54%, var(--holo-violet) 72%, var(--holo-pink) 90%);
  --holo-font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --holo-weight: 900;
  /* 白抜き文字の紺のフチ（どのブラウザでも出るよう、影を8方向に重ねて作る） */
  --holo-outline-l: 4px 0 0 var(--holo-ink), -4px 0 0 var(--holo-ink), 0 4px 0 var(--holo-ink), 0 -4px 0 var(--holo-ink),
    3px 3px 0 var(--holo-ink), -3px 3px 0 var(--holo-ink), 3px -3px 0 var(--holo-ink), -3px -3px 0 var(--holo-ink),
    0 8px 0 var(--holo-ink);
  --holo-outline-s: 2px 0 0 var(--holo-ink), -2px 0 0 var(--holo-ink), 0 2px 0 var(--holo-ink), 0 -2px 0 var(--holo-ink),
    2px 2px 0 var(--holo-ink), -2px 2px 0 var(--holo-ink), 2px -2px 0 var(--holo-ink), -2px -2px 0 var(--holo-ink),
    0 4px 0 var(--holo-ink);
}

/* ---------- トップの検索の帯（ここだけ思い切り派手に） ---------- */
html body .pka .pka-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 8px 0 4px;
  padding: 34px 20px 24px;
  border-radius: 24px;
  border: 4px solid var(--holo-ink);
  text-align: center;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 22% 78%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 37% 12%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 61% 84%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 78% 20%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 64%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .35), transparent 60%),
    var(--holo);
  background-size: auto, auto, auto, auto, auto, auto, auto, 220% 100%;
  animation: holo-shift 18s linear infinite alternate;
}
@keyframes holo-shift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0% 0; }
  to { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pka .pka-hero { animation: none; }
}

/* 4つの角のきらめき（Xのヘッダーの十字の星） */
html body .pka .pka-hero::after {
  content: "✦";
  position: absolute; top: 14px; right: 22px; z-index: -1;
  font-size: 34px; line-height: 1; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .9);
  pointer-events: none;
}

/* ロゴの文字（白抜き・紺のフチ・下に厚み） */
html body .pka .pka-hero::before {
  content: "ポケカ相場ex";
  display: block;
  font-family: var(--holo-font);
  font-weight: var(--holo-weight);
  font-size: clamp(36px, 7.4vw, 64px);
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: var(--holo-outline-l);
  margin-bottom: 14px;
}
html body .pka .pka-hero h1 {
  display: inline-block;
  margin: 0;
  font-family: var(--holo-font);
  font-weight: var(--holo-weight);
  font-size: clamp(15px, 2.4vw, 21px);
  color: #fff;
  text-shadow: var(--holo-outline-s);
  letter-spacing: .03em;
}
html body .pka .pka-hero p {
  display: inline-block;
  margin: 12px 0 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--holo-ink);
  font-weight: 700;
  font-size: 13px;
}

/* 検索の欄：ステッカーのように紺のフチと下の厚み */
html body .pka .pka-hero-search {
  max-width: 560px;
  margin: 16px auto 0;
  background: #fff;
  border: 3px solid var(--holo-ink);
  border-radius: 999px;
  box-shadow: 0 6px 0 var(--holo-ink);
  overflow: hidden;
}
html body .pka .pka-hero-search input { font-size: 16px; }
html body .pka .pka-hero-search button {
  background: var(--holo-ink);
  color: #fff;
  font-family: var(--holo-font);
  font-weight: var(--holo-weight);
  letter-spacing: .04em;
}
html body .pka .pka-hero-search button:hover,
html body .pka .pka-hero-search button:focus-visible { background: #2b2580; }

/* 人気の検索 */
html body .pka .pka-hero-tags { margin-top: 18px; }
html body .pka .pka-hero-tags span { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(29, 24, 86, .6); }
html body .pka .pka-hero-tags a {
  background: #fff;
  border: 2px solid var(--holo-ink);
  color: var(--holo-ink);
  border-radius: 999px;
  font-weight: 700;
}

/* ---------- カード画像：触れるとホロのきらめき（カードを手で傾けたときのように） ---------- */
html body .pka .pka-citem-art { position: relative; display: block; overflow: hidden; border-radius: 8px; }
html body .pka .pka-citem-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 122, 182, .55) 35%, rgba(255, 209, 102, .55) 45%, rgba(91, 227, 166, .55) 55%, rgba(79, 210, 242, .55) 65%, transparent 80%);
  background-size: 250% 100%;
  background-position: 100% 0;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity .25s, background-position .6s;
  pointer-events: none;
}
html body .pka .pka-citem a:hover .pka-citem-art::after,
html body .pka .pka-citem a:focus-visible .pka-citem-art::after { opacity: 1; background-position: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html body .pka .pka-citem-art::after { transition: none; }
}

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
  html body .pka .pka-hero { padding: 24px 14px 18px; border-radius: 18px; border-width: 3px; }
  html body .pka .pka-hero::after { font-size: 24px; top: 10px; right: 14px; }
  /* 見出しは1行に収める（途中で「わか／る。」のように折り返さない） */
  html body .pka .pka-hero h1 { font-size: min(14px, 3.5vw); white-space: nowrap; }
  html body .pka .pka-hero p { font-size: 12px; }
  html body .pka .pka-hero::before { margin-bottom: 10px; text-shadow: 3px 0 0 var(--holo-ink), -3px 0 0 var(--holo-ink), 0 3px 0 var(--holo-ink), 0 -3px 0 var(--holo-ink), 2px 2px 0 var(--holo-ink), -2px 2px 0 var(--holo-ink), 2px -2px 0 var(--holo-ink), -2px -2px 0 var(--holo-ink), 0 6px 0 var(--holo-ink); }
}