/* Bug finder challenge (take-the-test.js). The broken scenario pages carry their own
   inline styles on purpose: they're meant to look like someone else's website. */

/* ── Scenario selector ───────────────────────────────── */
.ttt-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ttt-scenario-card {
  text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 26px 24px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
}
.ttt-scenario-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 18px 30px -24px rgba(23,22,26,.5); }
.ttt-difficulty {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.ttt-difficulty--easy   { background: rgba(29, 122, 74, .12); color: var(--green); }
.ttt-difficulty--medium { background: rgba(176, 120, 18, .14); color: #8a5d0c; }
.ttt-difficulty--hard   { background: rgba(200, 50, 30, .12); color: var(--red-ink); }
.ttt-scenario-title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ttt-scenario-desc { color: var(--ink-2); font-size: 16px; }
.ttt-scenario-meta {
  margin-top: auto; padding-top: 12px; width: 100%;
  border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
}

/* ── Test viewport ───────────────────────────────────── */
.ttt-viewport { display: none; scroll-margin-top: 90px; }
.ttt-viewport.is-active { display: block; animation: ttt-in .4s var(--ease); }
@keyframes ttt-in { from { opacity: 0; transform: translateY(10px); } }

.ttt-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.ttt-hud-left { display: flex; align-items: center; gap: 16px; }
.ttt-score { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.ttt-score-count { font-family: var(--sans); font-size: 28px; font-weight: 900; color: var(--ink); letter-spacing: -.03em; margin-right: 2px; }
.ttt-progress-bar { width: 180px; height: 8px; background: var(--paper-2); border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ttt-progress-fill { height: 100%; width: 0; background: var(--green); border-radius: 8px; transition: width .4s var(--ease); }
.ttt-hud-right { display: flex; gap: 8px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.ttt-hint { display: none; margin: -4px 0 12px; font-family: var(--hand); font-size: 18px; color: var(--red); }
@media (max-width: 700px) { .ttt-hint { display: block; } }

/* ── Browser chrome ──────────────────────────────────── */
.ttt-browser {
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--ink), 0 30px 60px -36px rgba(23,22,26,.6);
}
.ttt-browser-chrome {
  display: flex; align-items: center; gap: 12px;
  background: var(--night); padding: 11px 14px;
}
.ttt-browser-dots { display: flex; gap: 7px; flex-shrink: 0; }
.ttt-browser-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--night-line); }
.ttt-browser-url {
  flex: 1; min-width: 0;
  background: var(--night-2); border-radius: 8px; padding: 6px 12px;
  font-family: var(--mono); font-size: 12px; color: var(--night-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ttt-browser-body {
  background: #fff; color: #111;
  min-height: 480px; max-height: 70vh;
  position: relative; overflow: auto;
}

/* ── Bug highlight states ────────────────────────────── */
[data-bug] { position: relative; cursor: pointer; }
[data-bug].bug-found,
[data-bug].bug-revealed { outline-offset: 2px; }
[data-bug].bug-found { outline: 2px solid var(--green) !important; }
[data-bug].bug-revealed { outline: 2px solid var(--red) !important; }
[data-bug].bug-found::before,
[data-bug].bug-revealed::before {
  position: absolute; top: -8px; right: -8px; z-index: 10;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font: 700 11px/18px var(--sans); text-align: center;
  pointer-events: none;
}
[data-bug].bug-found::before { content: "✓"; background: var(--green); }
[data-bug].bug-revealed::before { content: "!"; background: var(--red); }
.ttt-browser-url.bug-found { outline: 2px solid var(--green); color: var(--night-text); }
.ttt-browser-url.bug-revealed { outline: 2px solid var(--red); color: var(--night-text); }

/* ── Bug log ─────────────────────────────────────────── */
.ttt-log {
  margin-top: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.ttt-log-header {
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.ttt-log-list { list-style: none; }
.ttt-log-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink-3);
}
.ttt-log-item:last-child { border-bottom: 0; }
.ttt-log-item.is-found { color: var(--ink); }
.ttt-log-dot {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; border-radius: 5px;
  border: 1.5px solid var(--line); background: center / 10px no-repeat;
  transition: background-color .2s, border-color .2s;
}
.ttt-log-item.is-found .ttt-log-dot {
  background-color: var(--green); border-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Source panel toggle (hard scenario) ─────────────── */
.ad-source--open { display: block !important; }

/* ── Toast ───────────────────────────────────────────── */
.ttt-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 450; pointer-events: none;
  width: calc(100% - 32px); max-width: 420px;
  background: var(--night); color: var(--night-text);
  border-left: 4px solid #5ccf8f; border-radius: 12px;
  padding: 14px 18px; font-size: 15px; font-weight: 500;
  box-shadow: 0 16px 32px -16px rgba(0,0,0,.6);
  transform: translateX(-50%) translateY(calc(100% + 48px)); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s .3s;
}
.ttt-toast.is-visible { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform .3s var(--ease); }
.ttt-toast-label {
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5ccf8f;
}

/* ── Win state ───────────────────────────────────────── */
.ttt-win {
  display: none; position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 20, 22, .72);
}
.ttt-win.is-active { display: flex; }
.ttt-win-card {
  width: 100%; max-width: 500px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(28px, 5vw, 48px); text-align: center;
  animation: ttt-in .4s var(--ease);
}
.ttt-win-mark {
  display: block; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green) center / 30px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ttt-win-heading { font-size: clamp(28px, 4vw, 36px); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
.ttt-win-score { font-family: var(--mono); font-size: 14px; color: var(--green); margin: 10px 0 12px; }
.ttt-win-sub { color: var(--ink-2); margin-bottom: 26px; }
.ttt-win-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .ttt-selector { grid-template-columns: 1fr; }
  .ttt-hud { flex-direction: column; align-items: flex-start; }
  .ttt-progress-bar { width: 140px; }
}