/* DT 決斷測驗（打地鼠）
   操作盤依 SCHUHFRIED 照片：金屬灰面板上，白鍵在上、藍黃在兩側、紅綠在下，灰黑兩條長鍵上下疊在正中央。
   為了省高度，面板排成兩列：「藍 白 黃」／「紅 長鍵 綠」。踏板在面板外兩側。
   直向：上方刺激畫面 → 操作盤 → 左右踏板
   橫向：左踏板 | 刺激畫面 + 下方操作盤 | 右踏板 */

.dt {
  --k: clamp(48px, min(15vw, 9vh), 84px);
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "stim stim"
    "plate plate"
    "pl pr";
  row-gap: 10px;
  column-gap: 14px;
  padding-bottom: calc(12px + var(--safe-bottom));
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  color: #CFD3D6;
}

/* 練習回饋放在刺激區底部：放在上面會蓋住兩排燈（手機上尤其明顯） */
.dt-stim .fb-toast { top: auto; bottom: 6px; }
.dt-stim {
  grid-area: stim;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #454545;
  border-bottom: 1px solid #0F1011;
}

.dt-plate {
  grid-area: plate;
  justify-self: center;
  display: grid;
  grid-template-columns: var(--k) calc(var(--k) * 2) var(--k);
  grid-template-areas:
    "blue white yellow"
    "red bars green";
  align-items: center;
  justify-items: center;
  column-gap: calc(var(--k) * 0.35);
  row-gap: calc(var(--k) * 0.12);
  padding: calc(var(--k) * 0.18) calc(var(--k) * 0.45) calc(var(--k) * 0.22);
  border-radius: 18px;
  background: linear-gradient(160deg, #D3D6D8 0%, #B4B8BB 55%, #A3A7AA 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #0E0F10, 0 4px 14px rgba(0,0,0,.45);
}
.dt-plate .dt-ckey { --pk-size: var(--k); }
.dt-k--white  { grid-area: white; align-self: start; }
.dt-k--blue   { grid-area: blue; align-self: end; }
.dt-k--yellow { grid-area: yellow; align-self: end; }
.dt-k--red    { grid-area: red; }
.dt-k--green  { grid-area: green; }
.dt-bars {
  grid-area: bars;
  display: flex;
  flex-direction: column;
  gap: calc(var(--k) * 0.1);
  width: 100%;
}
.dt .dt-tkey { --pk-w: 100%; --pk-h: calc(var(--k) * 0.44); }
.dt .dt-tkey .pk-label { font-size: .75rem; }

.dt-cell { display: flex; align-items: flex-end; min-width: 0; }
.dt-pl { grid-area: pl; justify-content: flex-start; margin-left: calc(14px + var(--safe-left)); }
.dt-pr { grid-area: pr; justify-content: flex-end; margin-right: calc(14px + var(--safe-right)); }
.dt .pk-wrap { width: 100%; gap: 5px; }
.dt-pl .pk-wrap, .dt-pr .pk-wrap { max-width: 240px; }
.dt .dt-pedal { --pk-w: 100%; --pk-h: clamp(56px, 9vh, 110px); }

/* ---------- 橫向 ---------- */
@media (orientation: landscape) {
  .dt {
    --k: clamp(40px, min(8vw, 12vh), 76px);
    grid-template-columns: clamp(110px, 17vw, 220px) minmax(0, 1fr) clamp(110px, 17vw, 220px);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "pl stim  pr"
      "pl plate pr";
    column-gap: 0;
    row-gap: 0;
    padding-bottom: 0;
  }
  .dt-stim { border-left: 1px solid #0F1011; border-right: 1px solid #0F1011; }
  .dt-plate { margin: 8px 12px calc(8px + var(--safe-bottom)); }
  .dt-pl { align-items: flex-end; margin: 0 12px calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
  .dt-pr { align-items: flex-end; margin: 0 calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) 12px; }
  .dt .dt-pedal { --pk-h: clamp(56px, 22vh, 130px); }
}

/* ---------- 說明頁：試聽 ---------- */
.dt-listen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
  background: #fff;
}
.dt-listen-title { font-weight: 700; color: #333; }
.dt-listen-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }