/**
 * poker-timer.css — mobile first
 */
#btf-poker-timer { margin: 0; }

.pt-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink4); margin-bottom: 8px; }

/* ── Setup ────────────────────────────────────────────────────── */
.pt-presets { margin-bottom: 16px; }
.pt-preset-row {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.pt-preset-row::-webkit-scrollbar { display: none; }
.pt-preset {
  padding: 6px 14px; border-radius: 100px; border: 1px solid var(--rule);
  background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--ink3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.pt-preset:hover { border-color: var(--felt); color: var(--felt); background: var(--felt-bg); }

/* Level rows — card style on mobile */
.pt-levels { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }

.pt-level-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 12px; background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); position: relative;
}
.pt-break-row { background: rgba(154,123,60,0.06); border-color: var(--brass); }

.pt-level-num {
  font-weight: 700; color: var(--ink4); font-size: 0.72rem;
  min-width: 24px; text-align: center;
}

.pt-field-group { display: flex; gap: 4px; align-items: center; }
.pt-field-label { font-size: 0.65rem; color: var(--ink4); font-weight: 600; min-width: 28px; }
.pt-lvl-input {
  width: 64px; padding: 6px 4px; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); font-family: 'JetBrains Mono', monospace; font-size: 0.82rem;
  text-align: center; color: var(--ink);
}
.pt-lvl-input:focus { border-color: var(--felt); outline: none; }
.pt-break-label { font-weight: 600; color: var(--brass); font-size: 0.82rem; flex: 1; }
.pt-remove {
  width: 28px; height: 28px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink4); cursor: pointer; font-size: 0.75rem; border-radius: 4px;
  margin-left: auto;
}
.pt-remove:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }

.pt-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pt-add-btn {
  flex: 1; padding: 10px; border: 1px dashed var(--rule); border-radius: var(--radius-sm);
  background: transparent; font-size: 0.78rem; font-weight: 600; color: var(--ink4);
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.pt-add-btn:hover { border-color: var(--felt); color: var(--felt); }
.pt-add-break:hover { border-color: var(--brass); color: var(--brass); }

.pt-summary { font-size: 0.78rem; color: var(--ink4); margin-bottom: 14px; text-align: center; }

.pt-start-btn {
  width: 100%; padding: 14px; background: var(--felt); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.pt-start-btn:hover { background: var(--felt2); }

/* ── Timer view ───────────────────────────────────────────────── */
.pt-progress { height: 6px; background: var(--bg2); border-radius: 3px; margin-bottom: 20px; overflow: hidden; }
.pt-progress-fill { height: 100%; background: var(--felt); border-radius: 3px; transition: width 1s linear; }
.pt-break-fill { background: var(--brass); }

.pt-display {
  text-align: center; padding: 28px 16px; margin-bottom: 16px;
  background: var(--bg); border: 2px solid var(--rule); border-radius: var(--radius-sm);
}
.pt-display-break { border-color: var(--brass); background: rgba(154,123,60,0.06); }
.pt-display-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink4); margin-bottom: 6px; }
.pt-blinds { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.pt-ante { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--ink3); margin-top: 4px; }
.pt-clock { font-family: 'JetBrains Mono', monospace; font-size: 3.2rem; font-weight: 800; color: var(--felt); margin-top: 12px; letter-spacing: 0.02em; }
.pt-display-break .pt-clock { color: var(--brass); }

.pt-controls { display: flex; gap: 8px; margin-bottom: 14px; }
.pt-ctrl-btn {
  flex: 1; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 0.85rem; font-weight: 600; color: var(--ink3);
  cursor: pointer; transition: all 0.15s;
}
.pt-ctrl-btn:hover { border-color: var(--felt); color: var(--felt); }
.pt-play { background: var(--felt); color: #fff; border-color: var(--felt); }
.pt-play:hover { background: var(--felt2); color: #fff; }
.pt-pause { background: var(--brass); color: #fff; border-color: var(--brass); }
.pt-pause:hover { background: #8a6e2f; color: #fff; }

.pt-next {
  text-align: center; font-size: 0.82rem; color: var(--ink3);
  margin-bottom: 16px; padding: 10px; background: var(--surface); border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
}
.pt-next-label { font-weight: 700; color: var(--ink4); }

.pt-level-list { margin-bottom: 14px; }
.pt-ll-item {
  display: grid; grid-template-columns: 32px 1fr 48px;
  gap: 8px; padding: 6px 8px; font-size: 0.75rem; color: var(--ink4);
  border-bottom: 1px solid var(--bg2); font-family: 'JetBrains Mono', monospace;
}
.pt-ll-item span:first-child { text-align: center; font-weight: 700; }
.pt-ll-item span:last-child { text-align: right; }
.pt-ll-active { background: var(--felt-bg); color: var(--felt); font-weight: 700; border-radius: 4px; }
.pt-ll-done { opacity: 0.35; }
.pt-ll-break { font-style: italic; }

.pt-back-btn {
  width: 100%; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: transparent; font-size: 0.82rem; color: var(--ink4); cursor: pointer;
}
.pt-back-btn:hover { border-color: var(--ink3); color: var(--ink3); }

@media (min-width: 640px) {
  .pt-blinds { font-size: 2.8rem; }
  .pt-clock { font-size: 4.5rem; }
  .pt-lvl-input { width: 72px; }
}