/* ============================================================
   りんかカードミニゲーム 共通スタイル
   - りんかメモリー（神経衰弱） / りんかかくれんぼ 共用
   - RDS トークン（var(--rds-*)）を参照。rds-* クラスは上書きしない。
   - モバイルファースト（タップ >=44px）/ prefers-reduced-motion 対応
   - 追加のみ。既存クラス/ID は変更しない。
   ============================================================ */

/* ---- レイアウト土台 ------------------------------------- */
.rinka-cg-stage-wrap {
  display: block;
}
.rinka-cg-lead {
  margin: 0 0 var(--rds-space-5, 24px);
}

/* ---- ゲート（所有数に応じた案内） ---------------------- */
.rinka-cg-gate {
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-gate:empty {
  display: none;
}
.rinka-cg-empty {
  text-align: center;
  padding: var(--rds-space-6, 32px) var(--rds-space-4, 16px);
  background: var(--rds-surface, #fff);
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-lg, 16px);
  box-shadow: var(--rds-shadow-1);
}
.rinka-cg-empty__emoji {
  font-size: 2.4rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--rds-space-3, 12px);
}
.rinka-cg-empty__title {
  font-family: var(--rds-font);
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
  color: var(--rds-ink, #3b2b34);
  margin: 0 0 var(--rds-space-2, 8px);
}
.rinka-cg-empty__msg {
  font-size: var(--rds-text-md, 0.95rem);
  color: var(--rds-ink-soft, #7c6672);
  margin: 0 auto var(--rds-space-4, 16px);
  max-width: 34em;
  line-height: 1.7;
}
.rinka-cg-empty__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  justify-content: center;
}
.rinka-cg-note {
  font-size: var(--rds-text-sm, 0.85rem);
  color: var(--rds-ink-soft, #7c6672);
  background: var(--rds-accent-soft, #f9eef4);
  border: 1px solid var(--rds-accent-line, #ecc7da);
  border-radius: var(--rds-radius-md, 12px);
  padding: var(--rds-space-3, 12px) var(--rds-space-4, 16px);
  margin: 0 0 var(--rds-space-4, 16px);
  line-height: 1.6;
}

/* ---- ゲーム選択 ----------------------------------------- */
.rinka-cg-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rds-space-3, 12px);
  margin-bottom: var(--rds-space-5, 24px);
}
@media (min-width: 560px) {
  .rinka-cg-picker { grid-template-columns: 1fr 1fr; }
}
.rinka-cg-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rds-space-1, 4px);
  text-align: left;
  min-height: var(--rds-tap, 44px);
  padding: var(--rds-space-4, 16px);
  background: var(--rds-surface, #fff);
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-lg, 16px);
  box-shadow: var(--rds-shadow-1);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  font-family: var(--rds-font);
  color: var(--rds-ink, #3b2b34);
}
.rinka-cg-choice:hover {
  transform: translateY(-2px);
  box-shadow: var(--rds-shadow-2);
  border-color: var(--rds-accent-line, #ecc7da);
}
.rinka-cg-choice:focus-visible {
  outline: 3px solid var(--rds-focus, #e8a3c6);
  outline-offset: 2px;
}
.rinka-cg-choice__emoji { font-size: 1.7rem; line-height: 1; }
.rinka-cg-choice__name {
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
}
.rinka-cg-choice__sub {
  font-size: var(--rds-text-sm, 0.85rem);
  color: var(--rds-ink-soft, #7c6672);
  line-height: 1.6;
}

/* ---- マウント先 ----------------------------------------- */
.rinka-cg-mount[hidden] { display: none; }

/* ---- パネル（各ゲーム本体の枠） ------------------------- */
.rinka-cg-panel {
  background: var(--rds-surface, #fff);
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-lg, 16px);
  box-shadow: var(--rds-shadow-1);
  padding: var(--rds-space-4, 16px);
}
.rinka-cg-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rds-space-3, 12px);
  flex-wrap: wrap;
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-panel__title {
  font-family: var(--rds-font);
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
  color: var(--rds-ink, #3b2b34);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--rds-space-2, 8px);
}
.rinka-cg-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--rds-tap, 44px);
  padding: 0 var(--rds-space-3, 12px);
  background: transparent;
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-pill, 999px);
  color: var(--rds-ink-soft, #7c6672);
  font-family: var(--rds-font);
  font-size: var(--rds-text-sm, 0.85rem);
  cursor: pointer;
}
.rinka-cg-back:hover { border-color: var(--rds-accent-line, #ecc7da); color: var(--rds-accent, #c2568c); }
.rinka-cg-back:focus-visible { outline: 3px solid var(--rds-focus, #e8a3c6); outline-offset: 2px; }

/* ---- HUD（手数/タイム/コンボ/スコア） ------------------ */
.rinka-cg-hud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-stat {
  flex: 1 1 auto;
  min-width: 72px;
  text-align: center;
  background: var(--rds-surface-2, #f6f1f4);
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-md, 12px);
  padding: var(--rds-space-2, 8px) var(--rds-space-3, 12px);
}
.rinka-cg-stat__label {
  display: block;
  font-size: var(--rds-text-xs, 0.75rem);
  color: var(--rds-ink-soft, #7c6672);
  letter-spacing: .04em;
}
.rinka-cg-stat__value {
  display: block;
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
  color: var(--rds-ink, #3b2b34);
}
.rinka-cg-stat.is-combo .rinka-cg-stat__value { color: var(--rds-accent-strong, #a63f75); }

/* ---- りんかセリフ吹き出し ------------------------------- */
.rinka-cg-bubble {
  position: relative;
  background: var(--rds-accent-soft, #f9eef4);
  border: 1px solid var(--rds-accent-line, #ecc7da);
  border-radius: var(--rds-radius-md, 12px);
  padding: var(--rds-space-3, 12px) var(--rds-space-4, 16px);
  color: var(--rds-ink, #3b2b34);
  font-size: var(--rds-text-md, 0.95rem);
  line-height: 1.6;
  margin-bottom: var(--rds-space-4, 16px);
  min-height: 1.6em;
}
.rinka-cg-bubble::before { content: "🐰 "; }

/* ---- 難易度ティア（ロック表示つき） -------------------- */
.rinka-cg-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-tier {
  flex: 1 1 auto;
  min-width: 88px;
  min-height: var(--rds-tap, 44px);
  padding: var(--rds-space-2, 8px) var(--rds-space-3, 12px);
  text-align: center;
  background: var(--rds-surface, #fff);
  border: 1px solid var(--rds-line, #eadfe6);
  border-radius: var(--rds-radius-md, 12px);
  font-family: var(--rds-font);
  color: var(--rds-ink, #3b2b34);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.rinka-cg-tier:hover:not(.is-locked) { border-color: var(--rds-accent-line, #ecc7da); }
.rinka-cg-tier:focus-visible { outline: 3px solid var(--rds-focus, #e8a3c6); outline-offset: 2px; }
.rinka-cg-tier.is-active {
  border-color: var(--rds-accent, #c2568c);
  background: var(--rds-accent-soft, #f9eef4);
  color: var(--rds-accent-strong, #a63f75);
  font-weight: 700;
}
.rinka-cg-tier.is-locked {
  cursor: not-allowed;
  color: var(--rds-ink-faint, #a893a0);
  background: var(--rds-surface-2, #f6f1f4);
}
.rinka-cg-tier__name { display: block; font-size: var(--rds-text-md, 0.95rem); font-weight: 700; }
.rinka-cg-tier__meta { display: block; font-size: var(--rds-text-xs, 0.75rem); color: var(--rds-ink-soft, #7c6672); }
.rinka-cg-tier.is-locked .rinka-cg-tier__meta { color: var(--rds-ink-faint, #a893a0); }
.rinka-cg-tier__lock { font-size: var(--rds-text-xs, 0.75rem); }

/* ---- ごほうび残数表示 ----------------------------------- */
.rinka-cg-rewardleft {
  font-size: var(--rds-text-sm, 0.85rem);
  color: var(--rds-ink-soft, #7c6672);
  margin-bottom: var(--rds-space-3, 12px);
}
.rinka-cg-rewardleft strong { color: var(--rds-accent-strong, #a63f75); }
.rinka-cg-rewardleft.is-empty { color: var(--rds-warn, #9a6b1e); }

/* ============================================================
   カード共通（フリップ）
   ============================================================ */
.rinka-cg-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  perspective: 900px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  min-height: var(--rds-tap, 44px);
}
.rinka-cg-card:focus-visible { outline: 3px solid var(--rds-focus, #e8a3c6); outline-offset: 2px; border-radius: var(--rds-radius-md, 12px); }
.rinka-cg-card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
  border-radius: var(--rds-radius-md, 12px);
}
.rinka-cg-card__inner.is-up { transform: rotateY(180deg); }
.rinka-cg-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--rds-radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--rds-line, #eadfe6);
  box-shadow: var(--rds-shadow-1);
}
.rinka-cg-card__back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--rds-accent-soft, #f9eef4), var(--rds-surface-2, #f6f1f4));
  color: var(--rds-accent, #c2568c);
}
.rinka-cg-card__front {
  transform: rotateY(180deg);
  background: var(--rds-surface-2, #f6f1f4);
}
.rinka-cg-card__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rinka-cg-card.is-matched .rinka-cg-card__face { border-color: var(--rds-ok, #2e7d5b); }
.rinka-cg-card.is-matched { animation: rinka-cg-pop .3s ease; }
.rinka-cg-card.is-wrong .rinka-cg-card__inner { animation: rinka-cg-shake .3s ease; }
.rinka-cg-card.is-hint .rinka-cg-card__face { box-shadow: 0 0 0 3px var(--rds-focus, #e8a3c6); }
.rinka-cg-card.is-target .rinka-cg-card__face { box-shadow: 0 0 0 3px var(--rds-accent, #c2568c); }
.rinka-cg-card.is-disabled { pointer-events: none; }

@keyframes rinka-cg-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes rinka-cg-shake {
  0%,100% { transform: rotateY(180deg) translateX(0); }
  25% { transform: rotateY(180deg) translateX(-5px); }
  75% { transform: rotateY(180deg) translateX(5px); }
}

/* ---- メモリー: ボード grid ------------------------------ */
.rinka-cg-board {
  display: grid;
  grid-template-columns: repeat(var(--cg-cols, 4), 1fr);
  gap: var(--rds-space-2, 8px);
  margin-bottom: var(--rds-space-4, 16px);
}

/* ---- かくれんぼ: ステージ（絶対配置＋transform） -------- */
.rinka-cg-stage {
  position: relative;
  width: 100%;
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-stage .rinka-cg-slot {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.rinka-cg-slot__num {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: var(--rds-z-raised, 10);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--rds-radius-pill, 999px);
  background: var(--rds-accent, #c2568c);
  color: #fff;
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-xs, 0.75rem);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---- カウントダウン ------------------------------------- */
.rinka-cg-countdown {
  text-align: center;
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-2xl, 1.9rem);
  font-weight: 700;
  color: var(--rds-accent-strong, #a63f75);
  margin-bottom: var(--rds-space-3, 12px);
  min-height: 1.2em;
}
.rinka-cg-target-name {
  text-align: center;
  font-family: var(--rds-font);
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
  color: var(--rds-accent-strong, #a63f75);
  margin-bottom: var(--rds-space-3, 12px);
}

/* ---- おぼえてね: ターゲット1枚を大きく提示（スマホで迷わない） ---- */
.rinka-cg-target[hidden] { display: none; }
.rinka-cg-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rds-space-2, 8px);
  margin: 0 auto var(--rds-space-4, 16px);
  padding: var(--rds-space-3, 12px);
  max-width: 320px;
  border-radius: var(--rds-radius-lg, 16px);
  background: var(--rds-surface-2, #f6f1f4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  animation: rinka-cg-pop .3s ease;
}
.rinka-cg-target__label {
  font-family: var(--rds-font);
  font-size: var(--rds-text-lg, 1.15rem);
  font-weight: 700;
  color: var(--rds-accent-strong, #a63f75);
}
.rinka-cg-target__card {
  width: min(72vw, 220px);
  aspect-ratio: 3 / 4;
  border-radius: var(--rds-radius-md, 12px);
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--rds-accent, #c2568c), 0 8px 22px rgba(0, 0, 0, 0.18);
}
.rinka-cg-target__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rinka-cg-target__name {
  font-family: var(--rds-font);
  font-size: var(--rds-text-base, 1rem);
  font-weight: 700;
  color: var(--rds-ink, #3a2b33);
  text-align: center;
}
/* 提示中は盤面を控えめにしてターゲット1枚へ集中させる */
.rinka-cg-stage.is-memorizing {
  opacity: 0.28;
  filter: blur(1px) saturate(0.7);
  pointer-events: none;
  transition: opacity .3s ease, filter .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .rinka-cg-target { animation: none; }
  .rinka-cg-stage.is-memorizing { transition: none; }
}

/* ---- 操作ボタン群 --------------------------------------- */
.rinka-cg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  align-items: center;
}
.rinka-cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--rds-tap, 44px);
  padding: 0 var(--rds-space-4, 16px);
  border-radius: var(--rds-radius-pill, 999px);
  font-family: var(--rds-font);
  font-size: var(--rds-text-md, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--rds-line, #eadfe6);
  background: var(--rds-surface, #fff);
  color: var(--rds-ink, #3b2b34);
  transition: transform .1s ease, box-shadow .12s ease, background .12s ease;
}
.rinka-cg-btn:hover { box-shadow: var(--rds-shadow-1); }
.rinka-cg-btn:active { transform: translateY(1px); }
.rinka-cg-btn:focus-visible { outline: 3px solid var(--rds-focus, #e8a3c6); outline-offset: 2px; }
.rinka-cg-btn--primary {
  background: var(--rds-accent, #c2568c);
  border-color: var(--rds-accent, #c2568c);
  color: #fff;
}
.rinka-cg-btn--primary:hover { background: var(--rds-accent-strong, #a63f75); }
.rinka-cg-btn--ghost { background: transparent; }
.rinka-cg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- 結果画面 ------------------------------------------- */
.rinka-cg-result {
  text-align: center;
  padding: var(--rds-space-5, 24px) var(--rds-space-4, 16px);
}
.rinka-cg-result__emoji { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: var(--rds-space-3, 12px); }
.rinka-cg-result__title {
  font-family: var(--rds-font);
  font-size: var(--rds-text-xl, 1.45rem);
  font-weight: 700;
  color: var(--rds-ink, #3b2b34);
  margin: 0 0 var(--rds-space-2, 8px);
}
.rinka-cg-result__score {
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-2xl, 1.9rem);
  font-weight: 700;
  color: var(--rds-accent-strong, #a63f75);
  margin: 0 0 var(--rds-space-3, 12px);
}
.rinka-cg-result__rows {
  list-style: none;
  margin: 0 auto var(--rds-space-4, 16px);
  padding: 0;
  max-width: 22em;
}
.rinka-cg-result__rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--rds-space-3, 12px);
  padding: var(--rds-space-2, 8px) 0;
  border-bottom: 1px solid var(--rds-line, #eadfe6);
  font-size: var(--rds-text-md, 0.95rem);
  color: var(--rds-ink, #3b2b34);
}
.rinka-cg-result__rows li span:first-child { color: var(--rds-ink-soft, #7c6672); }
.rinka-cg-result__reward {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  justify-content: center;
  margin-bottom: var(--rds-space-4, 16px);
}
.rinka-cg-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--rds-space-1, 4px) var(--rds-space-3, 12px);
  border-radius: var(--rds-radius-pill, 999px);
  background: var(--rds-ok-soft, #ecf9f3);
  border: 1px solid var(--rds-ok, #2e7d5b);
  color: var(--rds-ok, #2e7d5b);
  font-size: var(--rds-text-sm, 0.85rem);
  font-weight: 700;
}
.rinka-cg-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2, 8px);
  justify-content: center;
}
.rinka-cg-badge-perfect {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--rds-radius-pill, 999px);
  background: linear-gradient(135deg, #ffd76a, #f7b733);
  color: #6a4b00;
  font-weight: 700;
  font-size: var(--rds-text-sm, 0.85rem);
  margin-bottom: var(--rds-space-2, 8px);
}

/* ---- 入力ロック時（シャッフル中/選択後） --------------- */
.rinka-cg-stage.is-locked,
.rinka-cg-board.is-locked {
  pointer-events: none;
}

/* ============================================================
   ダークモード（Cocoon ダークスキン想定）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .rinka-cg-panel,
  .rinka-cg-empty,
  .rinka-cg-choice,
  .rinka-cg-tier,
  .rinka-cg-btn {
    background: rgba(255, 255, 255, 0.04);
  }
}

/* ============================================================
   モーション低減：フリップ・シャッフルのアニメを段階表示化
   （JS 側は reduceMotion() で番号付きステップ表示に切替）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rinka-cg-card__inner,
  .rinka-cg-stage .rinka-cg-slot {
    transition: none !important;
  }
  .rinka-cg-card.is-matched,
  .rinka-cg-card.is-wrong .rinka-cg-card__inner {
    animation: none !important;
  }
  .rinka-cg-stage.is-dimmed,
  .rinka-cg-board.is-dimmed {
    transition: none !important;
  }
}

/* ============================================================
   レアリティ絞り込みバー（レアだけで あそぶ）
   カードが集まると自然に出現する。チップは所有数つき。
   ============================================================ */
.rinka-cg-rarity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rds-space-2, 8px);
  margin: var(--rds-space-3, 12px) 0 var(--rds-space-4, 16px);
}
.rinka-cg-rarity__lead {
  font-size: var(--rds-text-sm, 0.85rem);
  font-weight: 700;
  color: var(--rds-color-muted, #9a7fb0);
  margin-right: var(--rds-space-1, 4px);
}
.rinka-cg-rarity__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1.5px solid var(--rds-color-border, rgba(160, 120, 190, 0.35));
  border-radius: var(--rds-radius-pill, 999px);
  background: var(--rds-color-surface, rgba(255, 255, 255, 0.55));
  color: var(--rds-color-ink, #4a3a58);
  font-size: var(--rds-text-sm, 0.85rem);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.rinka-cg-rarity__chip:hover {
  transform: translateY(-1px);
  border-color: var(--rds-color-accent, #c77dbb);
}
.rinka-cg-rarity__chip:focus-visible {
  outline: 2px solid var(--rds-color-accent, #c77dbb);
  outline-offset: 2px;
}
.rinka-cg-rarity__cnt {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.72;
}
/* 選択中のチップ＝レア度ごとの色みで強調 */
.rinka-cg-rarity__chip.is-active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(120, 70, 140, 0.28);
}
.rinka-cg-rarity__chip.is-active .rinka-cg-rarity__cnt { opacity: 0.9; }
.rinka-cg-rarity__chip.r-all.is-active { background: linear-gradient(135deg, #b78bd6, #8f6fd0); }
.rinka-cg-rarity__chip.r-r.is-active { background: linear-gradient(135deg, #7fb1ff, #5b8be6); }
.rinka-cg-rarity__chip.r-sr.is-active { background: linear-gradient(135deg, #7ad6c2, #3fb79c); }
.rinka-cg-rarity__chip.r-ssr.is-active { background: linear-gradient(135deg, #ffd76a, #f5a742); color: #5b3d00; }
.rinka-cg-rarity__chip.r-secret.is-active { background: linear-gradient(135deg, #d98bff, #9b4dff); }

/* ============================================================
   むずかしさ選択の「まだ足りない」ロック表示
   ============================================================ */
.rinka-cg-choice.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.7);
}
.rinka-cg-choice.is-locked:hover { transform: none; }
.rinka-cg-choice__lock {
  display: inline-block;
  font-size: var(--rds-text-sm, 0.82rem);
  font-weight: 700;
  color: var(--rds-color-muted, #9a7fb0);
  margin-top: 4px;
}

/* ============================================================
   演出：暗転（難易度が上がると盤面が暗くなって目で追いにくい）
   ============================================================ */
.rinka-cg-stage,
.rinka-cg-board {
  transition: filter 0.35s ease;
}
.rinka-cg-stage.is-dimmed,
.rinka-cg-board.is-dimmed {
  filter: brightness(0.62) saturate(0.9);
}

/* ============================================================
   レアだけモードのプレミアム・アクセント
   （SR以上の絞り込み中はパネルにきらめきの縁取り）
   ============================================================ */
.rinka-cg-tiers.is-rare,
.rinka-cg-memory.is-rare,
.rinka-cg-seek.is-rare {
  position: relative;
}
.rinka-cg-memory.is-rare,
.rinka-cg-seek.is-rare {
  box-shadow: inset 0 0 0 2px rgba(255, 200, 90, 0.35), 0 6px 22px rgba(150, 90, 40, 0.18);
  border-radius: var(--rds-radius-lg, 18px);
}
.rinka-cg-tiers.is-rare .rinka-cg-tier:not(.is-locked) {
  border-color: rgba(245, 175, 70, 0.5);
}

@media (prefers-color-scheme: dark) {
  .rinka-cg-rarity__chip {
    background: rgba(255, 255, 255, 0.06);
    color: #e8def0;
  }
  .rinka-cg-rarity__lead { color: #c3a9d6; }
}

/* ============================================================
   カード表裏サイズ均一化（2026-07-18・追記のみ）
   buildCardEl の実クラスは __back / __front（__face 単独クラスは
   DOMに存在しない）。絶対配置＋overflow:hidden をここで実体に適用し、
   img の intrinsic 高さでカードが段ごとに膨らむのを防ぐ。
   ============================================================ */
.rinka-cg-card__back,
.rinka-cg-card__front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--rds-radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--rds-line, #eadfe6);
  box-shadow: var(--rds-shadow-1);
}
.rinka-cg-card.is-matched .rinka-cg-card__back,
.rinka-cg-card.is-matched .rinka-cg-card__front { border-color: var(--rds-ok, #2e7d5b); }
.rinka-cg-card.is-hint .rinka-cg-card__back,
.rinka-cg-card.is-hint .rinka-cg-card__front { box-shadow: 0 0 0 3px var(--rds-focus, #e8a3c6); }
.rinka-cg-card.is-target .rinka-cg-card__back,
.rinka-cg-card.is-target .rinka-cg-card__front { box-shadow: 0 0 0 3px var(--rds-accent, #c2568c); }

/* Cocoon親テーマの img { height:auto; max-width:100% } 系に負けない防御。
   aspect-ratio 非対応ブラウザは padding-top フォールバック。 */
.rinka-cg-card__front img,
.rinka-cg-card__back img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
  margin: 0;
}
@supports not (aspect-ratio: 3 / 4) {
  .rinka-cg-card { aspect-ratio: auto; height: 0; padding-top: 133.33%; }
}

/* ============================================================
 * 🎖 勲章ポイント（リザルト行・2026-07-18 追記のみ）
 * ============================================================ */
.rinka-cg-result__medal {
	margin: 0.5em 0 0;
	padding: 0.5em 0.75em;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(232, 161, 58, 0.12), rgba(194, 86, 140, 0.10));
	border: 1px solid rgba(232, 161, 58, 0.35);
	font-size: 0.92em;
	line-height: 1.5;
}
.rinka-cg-result__medal b {
	color: var(--rds-accent, #c2568c);
}

/* ============================================================
 * 👀 りんかメモリー「おぼえるタイム」プレビュー（2026-07-18 追記のみ）
 * ============================================================ */
.rinka-cg-card.is-preview { pointer-events: none; }
.rinka-cg-card.is-preview .rinka-cg-card__front,
.rinka-cg-card.is-preview .rinka-cg-card__back {
  box-shadow: 0 0 0 3px var(--rds-focus, #e8a3c6);
}
.rinka-cg-board .rinka-cg-card.is-preview .rinka-cg-card__inner {
  transition-duration: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .rinka-cg-card.is-preview .rinka-cg-card__inner { transition: none; }
}

/* ============================================================
 * ⏳ りんかメモリー「スタート」3秒カウントダウン（2026-07-18 追記のみ）
 * 裏返したあと 3・2・1 →「スタート！」を盤面中央に大きく出して待機。
 * ============================================================ */
.rinka-cg-board--mem { position: relative; }
.rinka-cg-startov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 800;
  color: var(--rds-accent, #c2568c);
  text-shadow:
    0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff,
    0 4px 14px rgba(0, 0, 0, 0.25);
  animation: rinka-cg-startov-pop 0.9s ease infinite;
}
.rinka-cg-startov.is-go {
  font-size: clamp(2rem, 8vw, 3.4rem);
  color: var(--rds-focus, #e8a3c6);
  animation: rinka-cg-startov-go 0.6s ease forwards;
}
@keyframes rinka-cg-startov-pop {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: 0.95; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rinka-cg-startov-go {
  0% { transform: scale(0.9); opacity: 0; }
  35% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rinka-cg-startov,
  .rinka-cg-startov.is-go { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .rinka-cg-startov {
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.6), 0 -2px 0 rgba(0, 0, 0, 0.6),
      2px 0 0 rgba(0, 0, 0, 0.6), -2px 0 0 rgba(0, 0, 0, 0.6),
      0 4px 14px rgba(0, 0, 0, 0.5);
  }
}