/* ===== 経絡ペア当て：スタイル ===== */
.memory{
    --paper:#fff8ef;
    --ink:#3b3b3b;
    --line:#ead9b0;
    --accent:#b9811d;
    --accent-2:#0ea5e9;
    background:
      radial-gradient(80vw 50vh at 12% -10%, rgba(255,244,214,.9), rgba(255,244,214,.35) 60%, transparent 80%),
      linear-gradient(to bottom, #fffdf8, var(--paper));
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.04);
    color:var(--ink);
  }
  
  .memory-head{
    display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    margin-bottom:6px;
  }
  .memory-head h3{ margin:0; font-size:1.1rem; font-weight:700; letter-spacing: .02em; }
  .mem-ctrl{ display:flex; gap:10px; align-items:center; }
  .mem-ctrl label{ font-size:.9rem; color:#475569; display:flex; align-items:center; gap:6px; }
  .mem-ctrl select{
    border:1px solid #e2e8f0; border-radius:10px; padding:6px 10px; background:#fff;
  }
  .mem-ctrl .btn{
    border:1px solid #e5e7eb; background:#fff; padding:8px 12px; border-radius:12px; cursor:pointer;
    font-weight:600;
  }
  .mem-ctrl .btn:hover{ border-color:#cbd5e1; }
  
  .note-small{ font-size:.85rem; color:#64748b; margin:.2rem 0 .6rem; }
  
  .mem-stats{ display:flex; gap:14px; align-items:center; font-size:.95rem; margin-bottom:10px; }
  .mem-stats span{ background:#fff; border:1px dashed #e5e7eb; border-radius:999px; padding:4px 10px; }
  
  .mem-grid{
    display:grid; gap:12px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
  
  .mem-card{
    position:relative; height:92px; border-radius:14px; border:1px solid #e5e7eb;
    background:#fff;
    cursor:pointer; outline:none;
    transform-style:preserve-3d;
    transition: transform .32s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
  }
  .mem-card:focus-visible{ box-shadow: 0 0 0 3px rgba(14,165,233,.25); }
  .mem-card .mem-face{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    backface-visibility:hidden; border-radius:14px; padding:10px;
  }
  .mem-front{
    background:
      linear-gradient(180deg, #fff, #f9fafb),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="140" viewBox="0 0 220 140"><path d="M0,100 C40,60 80,60 120,100 S200,140 240,100" fill="none" stroke="%23b9811d" stroke-width="1.1" stroke-opacity=".18"/></svg>');
    background-repeat:no-repeat; background-size:cover;
    color:#94a3b8; font-size:20px;
  }
  .mem-back{
    transform: rotateY(180deg);
    font-weight:700; font-size:1rem; color:#1f2937;
    background: #fffaf1;
  }
  .mem-card.is-open,
  .mem-card.matched{ transform: rotateY(180deg); }
  
  .mem-card.matched{
    border-color: #fde68a;
    box-shadow: 0 6px 14px rgba(185,129,29,.15);
  }
  .mem-card.matched .mem-back{
    background: linear-gradient(180deg,#fff7d6,#fffaf1 60%);
  }
  
  .mem-result{
    margin-top:12px; padding:10px 12px; border:1px solid #fde68a; background:#fffbeb;
    border-radius:12px; font-weight:700; color:#7c5c16;
  }
  /* 追記：サウンドトグル */
.btn-sound{
    display:inline-flex; align-items:center; gap:6px;
    font-variation-settings:"wght" 600;
  }
  .btn-sound[aria-pressed="false"]{ opacity:.7; }
/* 選択中（めくり中）：金色で強調 */
.memory .mem-card.is-open,
.memory .mem-card[aria-pressed="true"]{
  border-color: var(--accent, #b9811d) !important;
  box-shadow: 0 8px 18px rgba(185,129,29,.18) !important;
}
.memory .mem-card.is-open .mem-back,
.memory .mem-card[aria-pressed="true"] .mem-back{
  background: linear-gradient(180deg,#fff8e1,#fffaf1 65%) !important;
}

/* 不一致：一瞬だけ赤み */
.memory .mem-card.is-wrong{
  border-color: #fca5a5 !important;
  box-shadow: 0 6px 14px rgba(220,38,38,.15) !important;
}
.memory .mem-card.is-wrong .mem-back{
  background: linear-gradient(180deg,#fee2e2,#fff5f5 60%) !important;
}

/* 既に揃ったカードはクリック不可に（任意） */
.memory .mem-card.matched{
  cursor: default;
  pointer-events: none;
}
/* ---- 強制ハイライト（上から被せる枠） ---- */
.memory .mem-card{
    position: relative; /* 疑似要素の基準に */
  }
  
  /* ベース：透明な枠を用意（カードの外側に少し広めに） */
  .memory .mem-card::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:16px;
    border:2px solid transparent;
    pointer-events:none;
    transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
    opacity:0;
  }
  
  /* 選択中（is-open / aria-pressed=true）→ 金系でくっきり */
  .memory .mem-card.is-open::after,
  .memory .mem-card[aria-pressed="true"]::after{
    border-color:#b9811d !important;
    box-shadow:0 0 0 3px rgba(185,129,29,.18);
    opacity:1;
  }
  
  /* 不一致の一瞬の赤フィードバック */
  .memory .mem-card.is-wrong::after{
    border-color:#ef4444 !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.16);
    opacity:1;
  }
  
  /* 揃ったカードは金色寄りで固定 */
  .memory .mem-card.matched::after{
    border-color:#f59e0b !important;
    box-shadow:0 0 0 3px rgba(245,158,11,.18);
    opacity:1;
  }
  
  /* 念押し：枠線も太めに（他CSSに負けないように） */
  .memory .mem-card.is-open,
  .memory .mem-card[aria-pressed="true"]{
    border-color:#b9811d !important;
    border-width:2px !important;
  }
  
  /* レスポンシブ */
  @media (max-width: 720px){
    .mem-grid{ grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
    .mem-card{ height:88px; }
    .memory{ padding:12px; border-radius:14px; }
    .memory-head h3{ font-size:1rem; }
    .mem-ctrl label{ font-size:.85rem; }
  }