/* ====== テーマ変数 ====== */
:root {
  --jk-radius: 16px;       /* 角丸の半径 */
  --jk-gap: 16px;          /* 要素間の隙間 */
  --jk-bg: #fff;           /* 背景色（ライトモード） */
  --jk-fg: #111;           /* 前景色（ライトモード） */
  --jk-muted: #666;        /* 控えめな色（ライトモード） */
  --jk-border: #e5e7eb;    /* ボーダーの色（ライトモード） */
  --jk-accent: #2563eb;    /* アクセントカラー（ライトモード） */
  --jk-shadow: 0 1px 3px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.04); /* ボックスシャドウ */
  --hand-size: clamp(80px, 15vw, 140px); /* 手のサイズ（全体の基準） */
  --avatar-scale: .45;     /* アバターのサイズ比率 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --jk-bg: #0f172a;      /* 背景色（ダークモード） */
    --jk-fg: #e5e7eb;      /* 前景色（ダークモード） */
    --jk-muted: #94a3b8;   /* 控えめな色（ダークモード） */
    --jk-border: #1f2937;  /* ボーダーの色（ダークモード） */
    --jk-accent: #60a5fa;  /* アクセントカラー（ダークモード） */
    --jk-shadow: none;
  }
}

/* カード */
.jk-card {
  background: var(--jk-bg);
  color: var(--jk-fg);
  border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius);
  box-shadow: var(--jk-shadow);
  padding: clamp(12px, 2vw, 20px);
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
  flex: 1;
  margin: 0 auto;
  position: relative;
}

/* カードヘッダー */
.jk-card__header {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--jk-gap); margin-bottom:var(--jk-gap);
  margin-top: 36px;
}

/* タイトルとカウンター */
.jk-title {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  margin: 0;
}
.jk-counter {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  color: var(--jk-muted);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45rem .75rem;
  border: 1px solid var(--jk-border);
  border-radius: 999px;
  background: var(--jk-bg);
  color: var(--jk-fg);
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
@media (max-width: 520px) {
  .jk-counter { position: static; transform: none; margin-left: auto; }
  .jk-card__header { margin-top: 0; }
}

/* ステージ（対峙レイアウト＋VS） */
.jk-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
@media (max-width:520px) {
   /* .jk-stage{ column-gap: 0; } */
}

/* VS表示 */
.jk-vs {
  font-size: clamp(12px, 2vw, 18px);  /* ← 追加・調整 */
  font-weight: 800;
  opacity: .5;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--jk-border);
  user-select: none;
  white-space: nowrap;  /* ← 改行防止 */
}
@media (max-width:520px) { .jk-vs{ justify-self:center; } }

/* プレイヤーの手とアバターのコンテナ */
.jk-figure {
  display: grid;
  grid-template-rows: auto 1fr;
  flex: 0 0 auto;         /* ← 余計に広がらせない */
  max-width: 160px;       /* ← 必要に応じて固定幅 or 上限を */
  margin: 0;              /* ← デフォルトmargin削除 */
  box-sizing: border-box;
}
.jk-figure__label {
  display: flex;
  align-items: center;     /* ← 中央揃えを追加（縦ずれ防止） */
  gap: 6px;                /* ← モバイル向けにやや狭めてもOK */
  font-size: 0.9rem;
  color: var(--jk-muted);
  margin: 5px;
  flex-wrap: wrap;         /* ← モバイルで詰まり防止（任意） */
}
@media (max-width: 520px) {
  .jk-figure__label {
    font-size: 0.7rem;     /* ← 読みやすさを確保しつつ小さく */
    gap: 4px;              /* ← 間隔も詰めてコンパクトに */
  }
}

/* 手とアバターの横並び */
.jk-hand {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  column-gap: 10px;
}

/* 手の画像ボックス */
.jk-figure__img {
  display:grid; place-items:center;
  width:var(--hand-size); height:var(--hand-size);
  margin-inline:auto;
  background: rgba(127,127,127,.06);
  border-radius:10px; overflow:hidden;
  box-shadow: inset 0 0 0 1px var(--jk-border);
}
.jk-figure__img img{ width:100%; height:100%; object-fit:contain; }

/* 自分の手の強調スタイル */
.jk-figure--me .jk-figure__img {
  box-shadow:
    inset 0 0 0 2px var(--jk-accent),
    0 0 0 4px color-mix(in oklab, var(--jk-accent) 18%, transparent);
  background: color-mix(in oklab, var(--jk-accent) 8%, transparent);
}

/* 相手の手のスタイル（縮小、反転など） */
.jk-figure--opp .jk-figure__img {
  width:calc(var(--hand-size) * 0.92);
  height:calc(var(--hand-size) * 0.92);
  opacity:.95; filter:saturate(.95);
}
#tekiken img { transform:scaleX(-1); }

/* 相手側は並び順を反転（手←→アバター） */
.jk-figure--opp .jk-hand { direction: rtl; }
.jk-figure--opp .jk-hand > * { direction: ltr; }

/* アバター */
.jk-avatar {
  width:  calc(var(--hand-size) * var(--avatar-scale));
  height: calc(var(--hand-size) * var(--avatar-scale));
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--jk-border), 0 2px 6px rgba(0,0,0,.08);
  display: grid; place-items: center;
  background: var(--jk-bg);
}
.jk-avatar img{ width:100%; height:100%; object-fit: cover; }

/* 結果表示ライン */
.jk-result { min-height:1.6em; font-weight:600; text-align:center; margin:6px 0 4px; }

/* 小タグ（あなた／あいて） */
.jk-tag {
  display:inline-block; font-size:.85rem; line-height:1;
  padding:.35rem .5rem; border-radius:999px; border:1px solid var(--jk-border);
  background:var(--jk-bg);
}
.jk-tag--me { border-color:var(--jk-accent); color:var(--jk-accent); }
.jk-tag--opp { color:var(--jk-muted); }

/* 操作ボタンのコンテナ */
/* 操作ボタンのコンテナ */
.jk-controls {
  display: flex;               /* ← gridからflexに変更 */
  justify-content: center;    /* ← 中央揃え */
  gap: 10px;                   /* ← ボタンの間隔を調整 */
  margin-top: 12px;
  flex-wrap: wrap;            /* ← 小画面対応 */
}

/* ボタンのスタイル */
.jk-btn {
  min-width: 72px;             /* ← 横幅の下限を少し狭く */
  padding: 6px 10px;           /* ← 余白調整 */
  font-size: .85rem;
}
@media (max-width: 380px) { .jk-btn{ min-height: 34px; } }
.jk-btn:focus-visible { outline:2px solid var(--jk-accent); outline-offset:2px; }
.jk-btn:hover {
  color: var(--jk-accent); /* ← アクセントカラーに変更 */
}
.jk-btn:active {
  transform: none;
}

/* ====== マイクロアニメーション ====== */
/* 表示時のポップアップアニメーション */
@keyframes jk-pop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.06);opacity:1;} 100%{transform:scale(1);} }

/* 揺れアニメーション */
@keyframes jk-shake {0%,100%{transform:translateX(0);}20%{-webkit-transform:translateX(-2px);transform:translateX(-2px);}40%{transform:translateX(2px);}60%{transform:translateX(-1px);}80%{transform:translateX(1px);} }

/* アニメーションの適用 */
.jk-figure__img.reveal img { animation:jk-pop .18s ease-out; }
.jk-figure__img.hit { animation:jk-shake .12s ease-in-out; }

/* 互換性維持のため（未使用） */
.field, .kenleft, .kenright, .fieldmsg { /* kept for backward compatibility */ }

/* 勝敗バー */
.jk-meter{
  height: 10px;
  width: min(520px, 90%);
  margin: 8px auto 0;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--jk-border);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){ .jk-meter{ background: #0f172a; } }

.jk-meter > div{ height: 100%; transition: width .25s ease; }

/* 色（お好みで調整可） */
.jk-meter__win  { background: #16a34a; } /* 緑 */
.jk-meter__lose { background: #dc2626; } /* 赤 */
.jk-meter__even { background: #64748b; } /* グレー */

/* 初期は0幅にしておくと更新時にアニメーション */
.jk-meter__win, .jk-meter__lose, .jk-meter__even { width: 0; }

.jk-chart__container {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}