/* 
 * Viclog Shortcodes (rich blocks)
 * File: assets/viclog/viclog-shortcodes.css
 * Note: Enqueued ONLY on Viclog single pages.
 * 
 * Included shortcodes:
 *  - [vlg_info], [vlg_patch], [vlg_stat], [vlg_tweet], [vlg_ss], [vlg_divider],
 *    [vlg_step], [vlg_step_item], [vlg_compare], [vlg_weapon]
 *
 * v13 legacy text shortcodes are in viclog-text-shortcodes.css:
 *  - [vlg_hl], [vlg_md], [vlg_sm]
 */

.viclog-article .vlg-info {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 32px 0; padding: 20px 22px;
  background: var(--vlg-card); border: 1px solid var(--vlg-border);
  border-radius: 10px; position: relative; overflow: hidden;
}
.viclog-article .vlg-info::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.viclog-article .vlg-info-tip::before { background: var(--vlg-accent); }
.viclog-article .vlg-info-warn::before { background: var(--vlg-yellow); }
.viclog-article .vlg-info-good::before { background: var(--vlg-green); }
.viclog-article .vlg-info-bad::before { background: var(--vlg-accent2); }

.viclog-article .vlg-info-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.viclog-article .vlg-info-tip  .vlg-info-icon { background: rgba(124,92,252,.2); }
.viclog-article .vlg-info-warn .vlg-info-icon { background: rgba(252,212,92,.15); }
.viclog-article .vlg-info-good .vlg-info-icon { background: rgba(92,244,160,.15); }
.viclog-article .vlg-info-bad  .vlg-info-icon { background: rgba(252,92,138,.15); }

.viclog-article .vlg-info-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 6px;
}
.viclog-article .vlg-info-tip  .vlg-info-label { color: var(--vlg-accent); }
.viclog-article .vlg-info-warn .vlg-info-label { color: var(--vlg-yellow); }
.viclog-article .vlg-info-good .vlg-info-label { color: var(--vlg-green); }
.viclog-article .vlg-info-bad  .vlg-info-label { color: var(--vlg-accent2); }

.viclog-article .vlg-info-body {
  font-size: 14px; line-height: 1.8; color: rgba(221,225,240,.8);
}
.viclog-article .vlg-info-body strong { color: #fff; }
.viclog-article .vlg-info-body p { margin: 0 0 6px; }
.viclog-article .vlg-info-body p:last-child { margin: 0; }


/* ══════════════════════════════════════════════════════
   [vlg_patch] パッチノート
   ══════════════════════════════════════════════════════
   [vlg_patch]
   up=フューリーアサルト,オニショットガン
   down=タイフーン・ブレード,ホロアサルト
   [/vlg_patch]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-patch {
  margin: 32px 0; background: var(--vlg-card);
  border: 1px solid var(--vlg-border); border-radius: 12px; overflow: hidden;
}
.viclog-article .vlg-patch-head {
  padding: 12px 20px;
  background: rgba(124,92,252,.1); border-bottom: 1px solid var(--vlg-border);
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--vlg-accent); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.viclog-article .vlg-patch-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.viclog-article .vlg-patch-col { padding: 18px 20px; }
.viclog-article .vlg-patch-col:first-child { border-right: 1px solid var(--vlg-border); }
.viclog-article .vlg-patch-col-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.viclog-article .vlg-patch-col-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.viclog-article .vlg-patch-up   .vlg-patch-col-label { color: var(--vlg-green); }
.viclog-article .vlg-patch-up   .vlg-patch-col-label::before { background: var(--vlg-green); }
.viclog-article .vlg-patch-down .vlg-patch-col-label { color: var(--vlg-accent2); }
.viclog-article .vlg-patch-down .vlg-patch-col-label::before { background: var(--vlg-accent2); }

.viclog-article .vlg-patch-item {
  font-size: 13px; color: rgba(221,225,240,.75);
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; align-items: center; gap: 8px;
}
.viclog-article .vlg-patch-item:last-child { border-bottom: none; }
.viclog-article .vlg-patch-arrow { font-size: 10px; flex-shrink: 0; }
.viclog-article .vlg-patch-up   .vlg-patch-arrow { color: var(--vlg-green); }
.viclog-article .vlg-patch-down .vlg-patch-arrow { color: var(--vlg-accent2); }


/* ══════════════════════════════════════════════════════
   [vlg_stat] スタッツバー
   ══════════════════════════════════════════════════════
   [vlg_stat items="ビクロイ数:127,勝率:38%,K/D:4.2"]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-stat {
  margin: 32px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--vlg-border);
}
.viclog-article .vlg-stat-item {
  padding: 20px 16px; background: var(--vlg-card);
  text-align: center; position: relative;
}
.viclog-article .vlg-stat-item + .vlg-stat-item::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--vlg-border);
}
.viclog-article .vlg-stat-value {
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 1.1;
  background: linear-gradient(to right, var(--vlg-accent), var(--vlg-accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.viclog-article .vlg-stat-label {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--vlg-muted); letter-spacing: .08em;
}


/* ══════════════════════════════════════════════════════
   [vlg_tweet] ツイート引用カード
   ══════════════════════════════════════════════════════
   [vlg_tweet user="iPop17" handle="@iPop17fn" date="2025.01.25"]
   ツイート本文
   [/vlg_tweet]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-tweet {
  margin: 36px 0; padding: 22px 24px;
  background: var(--vlg-card); border: 1px solid var(--vlg-border);
  border-radius: 12px; position: relative; overflow: hidden;
}
.viclog-article .vlg-tweet::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--vlg-accent), var(--vlg-accent2));
}
.viclog-article .vlg-tweet-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.viclog-article .vlg-tweet-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--vlg-accent), var(--vlg-accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.viclog-article .vlg-tweet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.viclog-article .vlg-tweet-user {}
.viclog-article .vlg-tweet-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.viclog-article .vlg-tweet-handle { font-size: 12px; color: var(--vlg-muted); }
.viclog-article .vlg-tweet-x {
  margin-left: auto;
  font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700;
  color: var(--vlg-muted);
}
.viclog-article .vlg-tweet-body {
  font-size: 14.5px; line-height: 1.8; color: rgba(221,225,240,.8);
  margin-bottom: 12px;
}
.viclog-article .vlg-tweet-body a { color: var(--vlg-accent); text-decoration: none; }
.viclog-article .vlg-tweet-date { font-size: 11px; color: var(--vlg-muted); letter-spacing: .04em; }

/* ツイート内動画プレースホルダー */
.viclog-article .vlg-tweet-media {
  margin: 12px 0;
  width: 100%; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--vlg-border);
}
.viclog-article .vlg-tweet-media img { width: 100%; display: block; }
.viclog-article .vlg-tweet-media-placeholder {
  height: 140px; background: var(--vlg-panel);
  display: flex; align-items: center; justify-content: center;
  gap: 12px; color: var(--vlg-muted); font-size: 13px;
  text-decoration: none;
}
.viclog-article .vlg-tweet-play {
  width: 38px; height: 38px; border-radius: 50%; background: var(--vlg-accent);
  display: flex; align-items: center; justify-content: center;
}
.viclog-article .vlg-tweet-play svg { fill: #fff; width: 14px; height: 14px; }


/* ══════════════════════════════════════════════════════
   [vlg_ss] スクリーンショット
   ══════════════════════════════════════════════════════
   [vlg_ss caption="良い感じの草に隠れてて草"]
   https://example.com/image.jpg
   [/vlg_ss]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-ss {
  margin: 36px 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--vlg-border);
}
.viclog-article .vlg-ss img {
  width: 100%; display: block;
  filter: brightness(.85) saturate(1.15);
}
.viclog-article .vlg-ss-caption {
  padding: 10px 18px;
  background: var(--vlg-panel); border-top: 1px solid var(--vlg-border);
  font-size: 12px; color: var(--vlg-muted); letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.viclog-article .vlg-ss-caption::before { content: '📸'; font-size: 11px; }


/* ══════════════════════════════════════════════════════
   [vlg_divider] セクション区切り
   ══════════════════════════════════════════════════════
   style="dot"    ✦ 中央ドット（デフォルト）
   style="line"   グラデーションライン
   style="space"  余白のみ
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-divider-dot {
  position: relative; height: 1px;
  background: var(--vlg-border); margin: 48px 0;
}
.viclog-article .vlg-divider-dot::after {
  content: '✦';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--vlg-bg); padding: 0 14px;
  color: var(--vlg-accent); font-size: 11px;
}
.viclog-article .vlg-divider-line {
  height: 1px; margin: 48px 0;
  background: linear-gradient(to right, transparent, var(--vlg-accent), transparent);
  opacity: .4;
}
.viclog-article .vlg-divider-space { height: 48px; }


/* ══════════════════════════════════════════════════════
   [vlg_step] ステップ手順
   ══════════════════════════════════════════════════════
   [vlg_step]
   [vlg_step_item num="1" title="ポータルを発見"]内容[/vlg_step_item]
   [vlg_step_item num="2" title="ワクワクが勝る"]内容[/vlg_step_item]
   [/vlg_step]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-step { margin: 32px 0; }

.viclog-article .vlg-step-item {
  display: flex; gap: 20px; margin-bottom: 4px;
  position: relative;
}
/* 縦ライン */
.viclog-article .vlg-step-item:not(:last-child)::after {
  content: ''; position: absolute;
  left: 19px; top: 42px; bottom: -4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--vlg-accent), transparent);
  opacity: .3;
}
.viclog-article .vlg-step-num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--vlg-accent), var(--vlg-accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; color: #fff;
  box-shadow: 0 0 16px rgba(124,92,252,.4);
}
.viclog-article .vlg-step-content {
  flex: 1; padding: 8px 0 28px;
}
.viclog-article .vlg-step-title {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700; font-size: 15px; color: #fff;
  margin-bottom: 8px; line-height: 1.4;
}
.viclog-article .vlg-step-body {
  font-size: 14px; color: rgba(221,225,240,.75); line-height: 1.8;
}
.viclog-article .vlg-step-body p { margin: 0 0 6px; }
.viclog-article .vlg-step-body p:last-child { margin: 0; }


/* ══════════════════════════════════════════════════════
   [vlg_compare] Before / After 比較
   ══════════════════════════════════════════════════════
   [vlg_compare
     before_label="以前" after_label="今シーズン"
     before="ゴジラ無視してOK"
     after="ゴジラのルート確認必須"]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-compare {
  margin: 32px 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--vlg-border);
}
.viclog-article .vlg-compare-col { padding: 20px; background: var(--vlg-card); }
.viclog-article .vlg-compare-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.viclog-article .vlg-compare-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.viclog-article .vlg-compare-before .vlg-compare-label { color: var(--vlg-muted); }
.viclog-article .vlg-compare-before .vlg-compare-label::before { background: var(--vlg-muted); }
.viclog-article .vlg-compare-after  .vlg-compare-label { color: var(--vlg-accent3); }
.viclog-article .vlg-compare-after  .vlg-compare-label::before { background: var(--vlg-accent3); }
.viclog-article .vlg-compare-body {
  font-size: 14px; color: rgba(221,225,240,.8); line-height: 1.75;
}
.viclog-article .vlg-compare-before .vlg-compare-body { color: rgba(221,225,240,.5); }


/* ══════════════════════════════════════════════════════
   [vlg_weapon] 武器カード
   ══════════════════════════════════════════════════════
   [vlg_weapon name="フューリーアサルト" type="アサルトライフル"
     status="up" damage="38" fire="高" reload="速" comment="今シーズンのメイン候補"]
   ────────────────────────────────────────────────────── */
.viclog-article .vlg-weapon {
  margin: 28px 0; padding: 20px 24px;
  background: var(--vlg-card); border: 1px solid var(--vlg-border);
  border-radius: 12px; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 20px;
}
.viclog-article .vlg-weapon::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.viclog-article .vlg-weapon-up { border-color: rgba(92,244,160,.2); }
.viclog-article .vlg-weapon-up::before { background: var(--vlg-green); }
.viclog-article .vlg-weapon-down { border-color: rgba(252,92,138,.2); }
.viclog-article .vlg-weapon-down::before { background: var(--vlg-accent2); }
.viclog-article .vlg-weapon-neutral::before { background: var(--vlg-muted); }

.viclog-article .vlg-weapon-icon {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background: var(--vlg-panel); border: 1px solid var(--vlg-border);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.viclog-article .vlg-weapon-info { flex: 1; min-width: 0; }
.viclog-article .vlg-weapon-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.viclog-article .vlg-weapon-name {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700; font-size: 16px; color: #fff;
}
.viclog-article .vlg-weapon-type {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--vlg-muted); text-transform: uppercase;
}
.viclog-article .vlg-weapon-badge {
  margin-left: auto; flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 10px; border-radius: 4px;
}
.viclog-article .vlg-weapon-up   .vlg-weapon-badge { background: rgba(92,244,160,.15); color: var(--vlg-green); border: 1px solid rgba(92,244,160,.3); }
.viclog-article .vlg-weapon-up   .vlg-weapon-badge::before { content: '↑ '; }
.viclog-article .vlg-weapon-down .vlg-weapon-badge { background: rgba(252,92,138,.15); color: var(--vlg-accent2); border: 1px solid rgba(252,92,138,.3); }
.viclog-article .vlg-weapon-down .vlg-weapon-badge::before { content: '↓ '; }

.viclog-article .vlg-weapon-stats {
  display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap;
}
.viclog-article .vlg-weapon-stat {
  font-size: 12px; color: var(--vlg-muted);
  display: flex; align-items: center; gap: 5px;
}
.viclog-article .vlg-weapon-stat strong {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px; font-weight: 700; color: var(--vlg-text);
}
.viclog-article .vlg-weapon-comment {
  font-size: 13px; color: rgba(221,225,240,.6); line-height: 1.6;
  border-top: 1px solid var(--vlg-border); padding-top: 10px; margin-top: 10px;
}


/* ══════════════════════════════════════════════════════
   レスポンシブ対応
   ══════════════════════════════════════════════════════ */
@media (max-width: 560px) {
.viclog-article .vlg-patch-grid { grid-template-columns: 1fr; }
.viclog-article .vlg-patch-col:first-child { border-right: none; border-bottom: 1px solid var(--vlg-border); }
.viclog-article .vlg-compare { grid-template-columns: 1fr; }
.viclog-article .vlg-hl-line { flex-direction: column; }
.viclog-article .vlg-hl-line::before, .viclog-article .vlg-hl-line::after { width: 100%; height: 1px; flex: none; }
.viclog-article .vlg-weapon { flex-direction: column; }
.viclog-article .vlg-weapon-badge { margin-left: 0; }
}


/* ─────────────────────────────────────────
   [vlogamazon] Amazon affiliate link card
   - image must be self-hosted (WP media)
   ───────────────────────────────────────── */
.vlg-amz-wrap { margin: 2em 0; }

.vlg-amz-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #12122a, #1a1a35);
  border: 1px solid #2a2a50;
  border-left: 3px solid #00d4ff;
  border-radius: 12px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.vlg-amz-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.04), transparent 60%);
  pointer-events: none;
}
.vlg-amz-card:hover {
  border-left-color: #7b61ff;
  box-shadow: 0 0 24px rgba(0,212,255,.2), 0 4px 20px rgba(0,0,0,.4);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.vlg-amz-card:focus-visible{
  outline: 2px solid rgba(0,212,255,.55);
  outline-offset: 3px;
}

.vlg-amz-img {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}
.vlg-amz-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.vlg-amz-info { flex: 1; min-width: 0; }

.vlg-amz-label {
  font-size: 10px;
  color: #00d4ff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  margin-bottom: 6px;
}
.vlg-amz-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #e8e8ff;
}

.vlg-amz-btn {
  background: linear-gradient(135deg, #ff9900, #ffb347);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 1px;
  transition: all .2s;
}
.vlg-amz-card:hover .vlg-amz-btn {
  box-shadow: 0 0 14px rgba(255,153,0,.5);
}

.vlg-amz-note {
  font-size: 10px;
  color: rgba(221,225,240,.45);
  text-align: right;
  margin-top: 6px;
}

/* Mobile */
@media (max-width: 480px) {
  .vlg-amz-card { flex-wrap: wrap; }
  .vlg-amz-btn { width: 100%; text-align: center; }
}