/*
 * ClauDeck 専用の追加スタイル（k386.css の後に読む）
 * Stream Deck のキー表示を CSS で再現した「疑似スクリーンショット」だけを置く。
 * キーの色はアプリ画面の再現なので固定色。ページの色やフォントは k386.css の変数を使う。
 */

.cd-deck {
  background: #16171b;
  border-radius: var(--r-lg);
  padding: clamp(12px, 2.4vw, 22px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 10px);
}
.k-shot .cd-deck { border-radius: 0; }

.cd-key {
  position: relative;
  aspect-ratio: 1;
  border-radius: clamp(6px, 1.2vw, 12px);
  background: #3a3d44;
  color: #f4f4f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(7px, 1.2vw, 10px) clamp(3px, 0.6vw, 6px) clamp(3px, 0.6vw, 6px);
  overflow: hidden;
  font-size: clamp(0.5rem, 1.05vw, 0.66rem);
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
}
/* 上端の種別バー（どの AI の席か） */
.cd-key::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: clamp(3px, 0.6vw, 5px);
  background: #64748b;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.cd-key span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-key__top { opacity: 0.85; }
.cd-key__mid { font-weight: 800; font-size: 1.3em; }
.cd-key__bot { opacity: 0.75; font-family: var(--mono); font-size: 0.92em; }

/* 状態の色 */
.cd-key--idle { background: #3a3d44; }
.cd-key--blue { background: #1f5fbf; }
.cd-key--amber { background: #c77d00; }
.cd-key--red { background: #b3261e; }
.cd-key--green { background: #2e7d32; }
.cd-key--black { background: #050506; border: 1px solid #2a2b31; }
.cd-key--dim { background: #6b5320; }
.cd-key--empty { background: transparent; border: 2px dashed #4b4f58; }
.cd-key--plain::before { display: none; }

/* 承認待ちの印（右上の赤い丸） */
.cd-key--alert::after {
  content: "";
  position: absolute;
  top: clamp(6px, 1vw, 9px);
  right: clamp(4px, 0.8vw, 7px);
  width: clamp(5px, 0.9vw, 8px);
  height: clamp(5px, 0.9vw, 8px);
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
/* 拒否キーを押している間の赤い斜線 */
.cd-key--deny { background: #3a3d44; }
.cd-key--deny .cd-key__mid { color: #ff8a80; }

/* 種別バーの色 */
.cd-key--cc::before { background: #e8743b; }
.cd-key--cx::before { background: #38bdf8; }
.cd-key--ag::before { background: #a855f7; }

/* 表の中に置く小さなキー */
.cd-mini { width: 76px; flex: none; font-size: 0.56rem; }
.cd-legend td:first-child { width: 96px; }
@media (max-width: 760px) {
  .cd-legend td:first-child { width: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .cd-key--blink { animation: cd-blink 1.4s ease-in-out infinite; }
}
@keyframes cd-blink {
  50% { filter: brightness(1.35); }
}