/* focus mode */

/* Session bar at top */
.focus-bar {
  position: sticky; top: 0; z-index: 35;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--easy-rgb),0.08));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.3);
  transition: all 0.3s;
}
.focus-bar.hidden { display: none; }

.focus-bar-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  flex-wrap: wrap;
}
.focus-bar-label {
  font-family: 'Syne', sans-serif; font-size: 13px; color: var(--text);
}
.focus-bar-label strong { color: var(--accent); }

.focus-bar-count {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--easy); font-weight: 600;
  background: var(--easy-bg); padding: 3px 10px; border-radius: 6px;
}

.focus-end-btn {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(var(--hard-rgb),0.1); color: var(--hard);
  border: 1px solid rgba(var(--hard-rgb),0.3); border-radius: 8px;
  padding: 7px 18px; cursor: pointer;
  transition: all 0.2s;
}
.focus-end-btn:hover {
  background: rgba(var(--hard-rgb),0.2); border-color: rgba(var(--hard-rgb),0.5);
  transform: translateY(-1px);
}
.focus-end-btn:active { transform: scale(0.96); }

/* Hide non-essential UI during focus */
body.focus-active header,
body.focus-active .study-tools-bar,
body.focus-active .motivation-box,
body.focus-active .top-stats,
body.focus-active .stats-board,
body.focus-active .global-progress,
body.focus-active #review-queue,
body.focus-active #random-btn,
body.focus-active .company-stats-section { display: none !important; }

.focus-section-hidden { display: none !important; }
tr.focus-hidden { display: none !important; }

body.focus-active .focus-btn { background: var(--accent-glow); border-color: rgba(var(--accent-rgb),0.5); color: var(--accent); }

/* Topic picker list */
.focus-topic-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 320px; overflow-y: auto; overflow-x: hidden;
}
.focus-topic-list::-webkit-scrollbar { width: 4px; }
.focus-topic-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.focus-topic-item {
  display: flex; align-items: center; gap: 8px;
  padding: 20px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
  font-family: 'JetBrains Mono', monospace;
  text-align: left; width: 100%; min-width: 0; overflow: hidden;
}
.focus-topic-item:hover:not(.disabled) {
  border-color: rgba(var(--accent-rgb),0.4); background: var(--accent-glow);
  transform: translateX(4px);
}
.focus-topic-item:active:not(.disabled) { transform: scale(0.98); }
.focus-topic-item.disabled { opacity: 0.35; cursor: not-allowed; }
.focus-topic-item.selected {
  border-color: rgba(var(--accent-rgb),0.6);
  background: rgba(var(--accent-rgb),0.1);
}
.focus-topic-item.selected:hover:not(.disabled) {
  border-color: rgba(var(--accent-rgb),0.8);
  transform: translateX(4px);
}

.focus-topic-check {
  width: 16px; flex-shrink: 0;
  font-size: 12px; color: var(--accent); font-weight: 700;
}

.focus-topic-name {
  font-size: 12px; color: var(--text); font-weight: 600;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.focus-topic-meta {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0; margin-left: auto;
}
.focus-topic-unsolved {
  font-size: 10px; color: var(--accent); background: var(--accent-glow);
  padding: 2px 8px; border-radius: 4px;
}
.focus-topic-total {
  font-size: 10px; color: var(--text-muted);
}

/* Session summary — header */
.focus-summary-body { text-align: center; }

.focus-summary-header {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); margin-bottom: 4px;
}
.focus-summary-section-name {
  font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800;
  color: var(--accent); margin-bottom: 20px;
}

/* Time row */
.focus-summary-time {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-dim); margin-bottom: 24px;
}
.focus-summary-time-icon { font-size: 16px; }
.focus-summary-time-val  { color: var(--text); font-weight: 700; }

/* Difficulty breakdown row */
.focus-diff-row {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 24px;
}
.focus-diff-card {
  flex: 1; max-width: 90px;
  padding: 12px 8px; border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.focus-diff-card.easy-card   { border-color: rgba(var(--easy-rgb),0.3);  background: rgba(var(--easy-rgb),0.06); }
.focus-diff-card.medium-card { border-color: rgba(251,176,52,0.3); background: rgba(251,176,52,0.06); }
.focus-diff-card.hard-card   { border-color: rgba(var(--hard-rgb),0.35); background: rgba(var(--hard-rgb),0.07); }
.focus-diff-num {
  font-family: 'Syne', sans-serif; font-size: 30px; font-weight: 800; line-height: 1;
}
.easy-card   .focus-diff-num { color: var(--easy); }
.medium-card .focus-diff-num { color: var(--medium); }
.hard-card   .focus-diff-num { color: var(--hard); }
.focus-diff-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-top: 4px;
}

/* Solved list */
.focus-solved-list {
  text-align: left; margin-bottom: 20px;
}
.focus-solved-list-title {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-bottom: 8px;
}
.focus-solved-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface); margin-bottom: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
}
.focus-solved-item:last-child { margin-bottom: 0; }
.fsi-check { color: var(--easy); font-size: 13px; flex-shrink: 0; }
.fsi-name  { flex: 1; color: var(--text); }
.fsi-badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; flex-shrink: 0;
}
.fsi-badge.easy   { background: rgba(var(--easy-rgb),0.15);  color: var(--easy); }
.fsi-badge.medium { background: rgba(251,176,52,0.15); color: var(--medium); }
.fsi-badge.hard   { background: rgba(var(--hard-rgb),0.15);  color: var(--hard); }
.fsi-sword { font-size: 12px; flex-shrink: 0; }

.focus-summary-msg {
  font-family: 'Syne', sans-serif; font-size: 13px; color: var(--text-dim);
  line-height: 1.5; text-align: center; padding: 10px 0 2px;
}

/* hard modal (boss defeated) */
@keyframes swordPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-12deg); }
  70%  { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.hard-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10002; opacity: 0;
  min-width: 300px; max-width: 440px; width: 88vw;
  padding: 36px 40px 30px;
  border-radius: 22px; text-align: center;
  backdrop-filter: blur(28px);
  pointer-events: none;
  background: rgba(180, 20, 20, 0.1);
  border: 1.5px solid rgba(255,80,50,0.45);
  box-shadow: 0 0 80px rgba(220,60,20,0.22), 0 24px 64px rgba(0,0,0,0.65);
}

.hm-sword {
  font-size: 52px; line-height: 1; margin-bottom: 12px;
  display: inline-block;
  animation: swordPop 0.7s 0.3s cubic-bezier(0.175,0.885,0.32,1.275) both;
  filter: drop-shadow(0 0 14px rgba(255,130,0,0.6));
}
.hm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,130,60,0.7); margin-bottom: 6px;
}
.hm-name {
  font-family: 'Syne', sans-serif;
  font-size: 20px; font-weight: 800;
  background: linear-gradient(135deg, #ff9f1c, #ff4444, #ffd166);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px; line-height: 1.2;
}
.hm-divider {
  width: 48px; height: 2px; margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, rgba(255,100,0,0.6), transparent);
  border-radius: 1px;
}
.hm-quote {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: rgba(255,255,255,0.7);
  line-height: 1.6; font-style: italic; margin-bottom: 8px;
}
[data-theme="light"] .hm-quote { color: var(--text-dim); }
.hm-attr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: rgba(255,130,60,0.65); letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  .focus-bar-inner { padding: 8px 12px; gap: 10px; }
  .focus-topic-item { padding: 10px 12px; }
  .focus-topic-unsolved { font-size: 9px; padding: 2px 6px; }
  .focus-diff-row { gap: 8px; }
  .hard-modal { padding: 24px 20px 20px; min-width: 0; }
}

/* ── light mode overrides ── */
[data-theme="light"] .hard-modal {
  box-shadow: 0 0 60px rgba(220,60,20,0.1), 0 16px 48px rgba(0,0,0,0.1);
}
[data-theme="light"] .hm-sword {
  filter: none;
}
[data-theme="light"] .hm-eyebrow {
  color: var(--hard);
}
[data-theme="light"] .hm-attr {
  color: var(--orange);
}