/* ============================================================
   dragfill — 拖拉式挖空題元件
   用法見 dragfill.js 檔頭說明。
   同時支援：滑鼠拖曳 / 觸控拖曳 / 點兩下（點積木再點空格）
   ============================================================ */

.dragfill { margin: .4rem 0; text-align: left; }

/* ── 程式碼區 ── */
.df-code {
  background: #0f172a; border: 1px solid #334155; border-radius: 8px;
  padding: .6rem .9rem; margin: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: .74rem; line-height: 1.7; color: #e2e8f0;
  white-space: pre; overflow-x: auto;
}
.df-code .cmt { color: #64748b; }

/* ── 空格 ── */
.df-slot {
  display: inline-block; vertical-align: middle;
  min-width: 5rem; height: 1.55rem; line-height: 1.45rem;
  margin: 0 .12rem; padding: 0 .45rem;
  border: 2px dashed #475569; border-radius: 6px;
  background: #1e293b; color: #e2e8f0;
  text-align: center; font-size: .76rem; cursor: pointer;
  font-family: inherit; transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.df-slot:hover      { border-color: #60a5fa; }
.df-slot.df-over    { border-color: #fbbf24; background: #422006; }
.df-slot.df-filled  { border-style: solid; border-color: #60a5fa; background: #1e3a5f; color: #bfdbfe; }
.df-slot.df-ok      { border-style: solid; border-color: #4ade80; background: #052e16; color: #4ade80; }
.df-slot.df-ng      { border-style: solid; border-color: #f87171; background: #1c0000; color: #f87171; }

/* ── 候選積木池 ── */
.df-pool {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .45rem; padding: .45rem .6rem;
  background: #111827; border: 1px dashed #334155; border-radius: 8px;
  min-height: 2.6rem; align-content: flex-start;
}
.df-pool::before {
  content: "把下面的積木拖進空格（也可以先點積木、再點空格）";
  flex: 1 0 100%; font-size: .68rem; color: #64748b;
  font-family: -apple-system, 'Noto Sans TC', sans-serif; margin-bottom: .1rem;
}
.df-chip {
  display: inline-block; padding: .25rem .6rem;
  background: #1e293b; border: 1px solid #475569; border-radius: 6px;
  color: #7dd3fc; font-family: 'Fira Code', 'Consolas', monospace;
  font-size: .76rem; cursor: grab; user-select: none;
  touch-action: none;   /* 關鍵：讓觸控拖曳不會被瀏覽器捲動搶走 */
  transition: border-color .15s, background .15s, transform .1s;
}
.df-chip:hover  { border-color: #60a5fa; background: #1e3a5f; }
.df-chip.df-sel { border-color: #fbbf24; background: #422006; color: #fcd34d; }
.df-chip.df-used { display: none; }

/* 拖曳中跟著游標跑的分身 */
.df-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  opacity: .9; transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  border-color: #fbbf24 !important; background: #422006 !important; color: #fcd34d !important;
}

/* ── 控制列 ── */
.df-bar { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.df-btn {
  padding: .32rem .9rem; border-radius: 8px; font-weight: 600;
  font-size: .74rem; cursor: pointer; font-family: inherit;
  border: 1px solid transparent; transition: background .15s;
}
.df-check { background: #2563eb; color: #fff; border-color: #2563eb; }
.df-check:hover { background: #1d4ed8; }
.df-reset { background: #1e293b; color: #94a3b8; border-color: #475569; }
.df-reset:hover { background: #334155; color: #e2e8f0; }
.df-status { font-size: .78rem; color: #94a3b8; }
.df-status.ok { color: #4ade80; font-weight: 700; }
.df-status.ng { color: #f87171; }

/* ── 執行結果 ── */
.df-run { background: #052e16; color: #4ade80; border-color: #166534; }
.df-run:hover { background: #064e28; }

.df-output {
  display: none; margin-top: .45rem;
  background: #020617; border: 1px solid #334155; border-radius: 8px;
  padding: .45rem .7rem; font-size: .72rem; color: #cbd5e1;
  max-height: 4.4rem; overflow-y: auto; line-height: 1.42;
}
.df-output.show { display: block; }
.df-output.warn { border-color: #92400e; background: #1c1200; color: #fcd34d; }
.df-output.wait { color: #94a3b8; }
.df-output.err  { border-color: #7f1d1d; }
.df-output a { color: #60a5fa; text-decoration: underline; }
.df-out-label {
  font-size: .62rem; color: #64748b; letter-spacing: .05em;
  margin: .15rem 0 .1rem; font-family: -apple-system, 'Noto Sans TC', sans-serif;
}
.df-output pre {
  margin: 0; font-family: 'Fira Code', 'Consolas', monospace;
  font-size: .73rem; white-space: pre-wrap; word-break: break-word;
}
.df-out-in  { color: #7dd3fc; }
.df-out-ok  { color: #86efac; }
.df-out-err { color: #fca5a5; margin-top: .3rem !important; }
.df-output i { color: #64748b; font-style: normal; }