:root {
  --gap: 12px;
  --accent: #2b7ae4;
  --ok: #2e7d32;
  --bad: #c62828;

  /* adjustable font sizes */
  --head-font-size: 1.25rem;
  --rowlabel-font-size: 1.25rem;
  --card-font-size: 1.25rem;
  --card-font-small: 0.95rem;
}

/* Reset & base */
* { box-sizing: border-box }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, 'Noto Sans TC', "Helvetica Neue", Arial;
  padding: 16px;
  background: #fafafa;
  color: #111;
}

header { margin-bottom: 12px }

.table-wrap { display: block; margin-bottom: 12px }

/* Layout: left column stacks left-panel + sidebar; right column contains table */
main {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}

.left-panel {
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
}

.spec-list { display: flex; flex-direction: column; gap: 6px }
.spec-item { padding: 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer }
.spec-item:hover { background: #f6f9ff; border-color: #e2e8ff }
.spec-item.active { background: var(--accent); color: #fff; border-color: var(--accent) }

.table {
  flex: 1;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 300px;
}

.table-grid { display: grid; gap: 8px }
.row-header { display: flex; align-items: center }

.col-head {
  background: #f3f6ff;
  border: 1px solid #d6e4ff;
  padding: 8px;
  text-align: center;
  font-weight: 600;
  font-size: var(--head-font-size);
}

.col-head.pool-head { padding: 8px 12px }

.row-label {
  background: #fff8e1;
  border: 1px solid #ffe0b2;
  padding: 8px;
  min-width: 140px;
  font-size: var(--rowlabel-font-size);
}

.cell {
  min-height: 56px;
  border: 1px dashed #ccc;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff, #fbfbfb);
}

.cell.highlight { outline: 3px solid var(--accent); outline-offset: 2px }
.cell.correct { background: linear-gradient(180deg, #e8f5e9, #e6f4ea); border: 1px solid var(--ok) }
.cell.wrong { background: linear-gradient(180deg, #ffebee, #fff1f1); border: 1px solid var(--bad) }

/* Card styles */
.card {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  /* background set inline per-row */
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  cursor: grab;
  touch-action: none;
  color: #111;
  font-size: var(--card-font-size);
}

.card[draggable="true"] { user-select: none }
.card.dragging { opacity: 0.6 }
.card { -webkit-user-drag: element }
.card:active { cursor: grabbing }
.card.in-pool { margin: 6px }
.card.small { padding: 6px 8px; font-size: var(--card-font-size) }
.card.correct { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46,125,50,0.08) }
.card.wrong { border-color: var(--bad) }

/* Flip animation: .flipping enables transition; .flip-mid applies the rotated state (90deg)
  The JS coordinates timing using FLIP_HALF_MS and FLIP_TOTAL_MS constants. */
.card.flipping { transition: transform 260ms ease; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; }
.card.flip-mid { transform: rotateY(90deg); }

.card-pool {
  min-height: 120px;
  padding: 8px;
  border: 1px dashed #ddd;
  background: #fff;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Per-row pools to the right of the grid */
.row-pool {
  min-height: 56px;
  padding: 4px;
  border: 1px dashed #e6e6e6;
  background: #fff;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}
.row-pool .card { margin: 2px }

/* When building the grid we will append a trailing column for per-row pools */
.table-grid.has-row-pools { grid-auto-rows: minmax(48px, auto); align-items: stretch }

/* make the pool column visually separated */
.table-grid > .row-pool-wrap { padding: 0 }
.table-grid > .row-pool-wrap .row-pool { height: 100%; display: flex; align-items: center; padding: 6px }

/* column sizing: last column is pool column */
.table-grid { grid-template-columns: 160px repeat(auto-fit, minmax(100px, 1fr)) 220px }

.row-pool-wrap { display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: center }
.row-pool-label { height: 8px }

.sidebar { width: 100%; background: transparent }

.controls { margin-top: 12px; display: flex; gap: 8px }
.controls button { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #ccc; background: #fff }
.options { margin-top: 12px; font-size: 0.95rem }
.log { margin-top: 12px }

pre { white-space: pre-wrap; word-break: break-word; background: #111; color: #fff; padding: 8px; border-radius: 6px; min-height: 80px }

.debug { margin-top: 12px }
.debug #dbg-state { background: #fff; border: 1px solid #ccc; padding: 8px; border-radius: 6px; min-height: 60px; color: #111 }

@media (max-width: 900px) {
  /* stacked layout on small screens */
  main { grid-template-columns: 1fr }
  .table-wrap { grid-column: 1 }
  .left-panel { grid-column: 1 }
  .sidebar { grid-column: 1 }
}