/* The /tools pages (book titles, writing prompts, character names, the
   spicy three — sex positions, body descriptions, smut prompts — and the
   /tools index). Loaded after /site.css, whose tokens, nav, footer, buttons,
   article, FAQ and .cta styles these pages reuse. Colours as tokens only. */

:root {
  --seg-where: #8fb8ff;
  --seg-who: #f48ab3;
  --seg-goal: #f5b27a;
  --seg-twist: #b9a2ff;
  --seg-trope: #ffd27a;
  --seg-tension: #7fd6c2;
  --seg-spice: #ff7a8a;
  --tool-card: #121015;
}

@supports not (color: color-mix(in srgb, red, blue)) {

  :root {
    --seg-where__r: 143;
    --seg-where__g: 184;
    --seg-where__b: 255;
    --seg-where__a: 1;
    --seg-who__r: 244;
    --seg-who__g: 138;
    --seg-who__b: 179;
    --seg-who__a: 1;
    --seg-goal__r: 245;
    --seg-goal__g: 178;
    --seg-goal__b: 122;
    --seg-goal__a: 1;
    --seg-twist__r: 185;
    --seg-twist__g: 162;
    --seg-twist__b: 255;
    --seg-twist__a: 1;
    --seg-trope__r: 255;
    --seg-trope__g: 210;
    --seg-trope__b: 122;
    --seg-trope__a: 1;
    --seg-tension__r: 127;
    --seg-tension__g: 214;
    --seg-tension__b: 194;
    --seg-tension__a: 1;
    --seg-spice__r: 255;
    --seg-spice__g: 122;
    --seg-spice__b: 138;
    --seg-spice__a: 1;
    --tool-card__r: 18;
    --tool-card__g: 16;
    --tool-card__b: 21;
    --tool-card__a: 1;
  }
}

.wrap-tool { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap-tool { padding-inline: 16px; } }

/* ---------- top: nav, heading, the tool ---------- */
/* The glow stays inside the box: with "hidden" alone the box was still
   scrollable sideways, and focusing a result shifted the whole tool left. */
.tool-top { position: relative; overflow: hidden; overflow: clip; }
.tool-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  pointer-events: none;
  background:
    radial-gradient(640px 340px at 18% 6%, rgba(240, 106, 155, 0.18), transparent 70%),
    radial-gradient(560px 320px at 85% 14%, rgba(245, 166, 106, 0.12), transparent 70%);
}
.tool-top > * { position: relative; }

.tool-head { max-width: 760px; padding: 6px 0 26px; }
.tool-head .crumbs { margin: 0 0 18px; }
.tool-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: calc(12px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.tool-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(134, 210, 154, 0.18); }
.tool-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(clamp(34px, 6.4vw, 56px) / var(--tz, 1));
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.tool-lede { font-size: calc(17.5px / var(--tz, 1)); line-height: 1.55; color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }
@media (max-width: 600px) {
  .tool-head { padding-bottom: 20px; }
  .tool-head .crumbs { margin-bottom: 14px; }
  .tool-lede { font-size: calc(16px / var(--tz, 1)); }
}

/* The panel the generator lives in. */
.tool-panel {
  position: relative;
  margin: 0 0 64px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--surface-raised), var(--surface) 46%);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--hairline);
}
.tool-panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(240, 106, 155, 0.7), rgba(245, 166, 106, 0.5), transparent);
}
@media (max-width: 600px) { .tool-panel { padding: 16px; border-radius: 18px; margin-bottom: 48px; } }

.tool-controls { display: grid; gap: 18px; margin-bottom: 20px; }
.tool-field { min-width: 0; }
.tool-label {
  display: block;
  margin-bottom: 9px;
  font-size: calc(11.5px / var(--tz, 1));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tool-label .opt { margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: none;
  font-family: var(--font-ui);
  font-size: calc(13.5px / var(--tz, 1));
  font-weight: 600;
  line-height: 1;
  color: var(--fg-2);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms, box-shadow 160ms;
}
.chip:hover { color: var(--fg); border-color: #4a4354; }
.chip[aria-pressed="true"] { color: #fff; background: var(--grad-btn); border-color: transparent; box-shadow: 0 8px 22px -10px rgba(240, 106, 155, 0.7); }
/* On a phone one row that scrolls sideways, edge to edge, so the results stay above the fold. */
@media (max-width: 640px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -16px;
    padding: 2px 16px 4px;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  /* Three chips in a row with a button: no edge-to-edge scroll. */
  .chips-tight { margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
}
.tool-go-row .chips { flex: 1; align-items: center; }

.tool-go-row { display: flex; gap: 10px; align-items: stretch; }
.tool-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: calc(16px / var(--tz, 1)); /* 16px: iOS doesn't zoom into the field */
  font-weight: 500;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 120ms, box-shadow 120ms;
}
.tool-input::placeholder { color: var(--fg-3); }
.tool-input:focus { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-ring); }
.tool-go { font-size: calc(15px / var(--tz, 1)); padding: 13px 22px; border-radius: 10px; }
.tool-go .tool-ico { width: 19px; height: 19px; }
.tool-go.rolling .tool-ico { animation: dice-roll 0.55s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes dice-roll { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .tool-go-row { flex-direction: column; }
  .tool-go-row .tool-go, .tool-actions .tool-go { width: 100%; }
}

/* Not .ico: site.css has one (the landing's 36px feature tiles). */
.tool-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- results: titles and names ---------- */
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.results-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .results-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .results-titles { grid-template-columns: 1fr; } .results { gap: 8px; } }

.result { position: relative; min-width: 0; }
.result[data-new] { animation: result-in 0.42s cubic-bezier(0.2, 0.75, 0.25, 1) both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes result-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.result-pick {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 52px 14px 46px;
  text-align: left;
  font-family: var(--font-display);
  font-size: calc(19px / var(--tz, 1));
  line-height: 1.28;
  color: var(--fg);
  background: var(--tool-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
[dir="rtl"] .result-pick { text-align: right; padding: 14px 46px 14px 52px; }
.result-pick:hover { border-color: #3d3747; background: #17141b; }
.result-pick:active { transform: scale(0.99); }
.result-pick .heart {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--fg-3);
  opacity: 0.55;
  transition: color 140ms, opacity 140ms, fill 140ms;
}
[dir="rtl"] .result-pick .heart { left: auto; right: 16px; }
.result-pick:hover .heart { opacity: 1; color: var(--accent-2); }
.result-pick[aria-pressed="true"] {
  border-color: var(--accent-border);
  background: linear-gradient(135deg, rgba(240, 106, 155, 0.15), rgba(245, 166, 106, 0.06));
  box-shadow: inset 0 0 0 1px rgba(240, 106, 155, 0.35);
}
.result-pick[aria-pressed="true"] .heart { opacity: 1; color: var(--accent); fill: var(--accent); }
.result-pick.pop .heart { animation: heart-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes heart-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.result-text { overflow-wrap: anywhere; text-wrap: balance; }
.result-tag { font-family: var(--font-ui); font-size: calc(11px / var(--tz, 1)); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.results-names .result-pick { font-size: calc(18px / var(--tz, 1)); }
@media (max-width: 560px) {
  .result-pick, .results-names .result-pick { min-height: 56px; padding: 12px 50px 12px 42px; font-size: calc(17px / var(--tz, 1)); }
  .result-pick .heart { left: 14px; }
  .result-text { text-wrap: pretty; }
}
@media (max-width: 400px) { .results-names { grid-template-columns: 1fr; } }

.result-copy {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: grid;
  place-items: center;
  color: var(--fg-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
[dir="rtl"] .result-copy { right: auto; left: 9px; }
.result-copy:hover { color: var(--fg); background: var(--surface-raised); border-color: var(--border); }
.result-copy.done, .btn.done { color: var(--ok); }

.tool-hint { margin: 14px 2px 0; font-size: calc(13px / var(--tz, 1)); line-height: 1.5; color: var(--fg-3); }
.tool-en-note { margin: 6px 2px 0; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
html[lang="en"] .tool-en-note { display: none; }

/* ---------- the prompt card ---------- */
.prompt-card {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(185, 162, 255, 0.07), transparent 70%),
    var(--tool-card);
}
.prompt-card.deal { animation: deal 0.5s cubic-bezier(0.2, 0.75, 0.25, 1); }
@keyframes deal { from { opacity: 0.2; transform: translateY(8px) rotate(-0.4deg); } to { opacity: 1; transform: none; } }
.prompt-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(19px, 3vw, 28px) / var(--tz, 1));
  line-height: 1.5;
  color: var(--fg);
  text-wrap: pretty;
}
.seg {
  font: inherit;
  color: inherit;
  padding: 0 0.06em;
  margin: 0 -0.06em;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--seg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 150ms;
}
.seg:hover { background: color-mix(in srgb, var(--seg) 17%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg:hover {
    background: rgba(var(--seg__r), var(--seg__g), var(--seg__b), calc(var(--seg__a) * 0.17));
  }
}
.seg:focus-visible { outline: 2px solid var(--seg); outline-offset: 1px; }
.seg-where { --seg: var(--seg-where); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-where {
    --seg__r: var(--seg-where__r);
    --seg__g: var(--seg-where__g);
    --seg__b: var(--seg-where__b);
    --seg__a: var(--seg-where__a);
  }
}
.seg-who { --seg: var(--seg-who); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-who {
    --seg__r: var(--seg-who__r);
    --seg__g: var(--seg-who__g);
    --seg__b: var(--seg-who__b);
    --seg__a: var(--seg-who__a);
  }
}
.seg-goal { --seg: var(--seg-goal); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-goal {
    --seg__r: var(--seg-goal__r);
    --seg__g: var(--seg-goal__g);
    --seg__b: var(--seg-goal__b);
    --seg__a: var(--seg-goal__a);
  }
}
.seg-twist { --seg: var(--seg-twist); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-twist {
    --seg__r: var(--seg-twist__r);
    --seg__g: var(--seg-twist__g);
    --seg__b: var(--seg-twist__b);
    --seg__a: var(--seg-twist__a);
  }
}
.seg-trope { --seg: var(--seg-trope); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-trope {
    --seg__r: var(--seg-trope__r);
    --seg__g: var(--seg-trope__g);
    --seg__b: var(--seg-trope__b);
    --seg__a: var(--seg-trope__a);
  }
}
.seg-tension { --seg: var(--seg-tension); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-tension {
    --seg__r: var(--seg-tension__r);
    --seg__g: var(--seg-tension__g);
    --seg__b: var(--seg-tension__b);
    --seg__a: var(--seg-tension__a);
  }
}
.seg-spice { --seg: var(--seg-spice); }
@supports not (color: color-mix(in srgb, red, blue)) {

  .seg-spice {
    --seg__r: var(--seg-spice__r);
    --seg__g: var(--seg-spice__g);
    --seg__b: var(--seg-spice__b);
    --seg__a: var(--seg-spice__a);
  }
}
.seg.swap { animation: seg-swap 0.55s ease-out; }
@keyframes seg-swap {
  0% { opacity: 0; background: color-mix(in srgb, var(--seg) 40%, transparent); }
  35% { opacity: 1; }
  100% { background: transparent; }
}
@supports not (color: color-mix(in srgb, red, blue)) {
@keyframes seg-swap {
  0% { opacity: 0; background: rgba(var(--seg__r), var(--seg__g), var(--seg__b), calc(var(--seg__a) * 0.4)); }
  35% { opacity: 1; }
  100% { background: transparent; }
}
}

.prompt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 20px 0 0; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
.prompt-legend > span { margin-right: 4px; }
.legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  font-family: var(--font-ui);
  font-size: calc(12.5px / var(--tz, 1));
  font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.legend-btn:hover { color: var(--fg); border-color: var(--seg); }
.legend-btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--seg); }
.legend-btn .tool-ico { width: 13px; height: 13px; opacity: 0.6; }
.prompt-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 560px) {
  .prompt-card { padding: 20px 18px 18px; }
  .prompt-buttons .btn { flex: 1; }
}

.history { margin-top: 18px; }
.history-head { margin: 0 0 8px; font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.history ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.history-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  text-align: start;
  font-family: var(--font-ui);
  font-size: calc(13px / var(--tz, 1));
  line-height: 1.45;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
/* Two lines of an earlier prompt (a clamp on the button itself doesn't take). */
.history-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.history-item:hover { color: var(--fg); border-color: var(--border-strong); }

/* ---------- the handoff into the app ---------- */
.handoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
  padding: 14px 14px 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--accent-border);
  background: linear-gradient(120deg, rgba(240, 106, 155, 0.17), rgba(245, 166, 106, 0.08));
}
.handoff-text { flex: 1 1 260px; min-width: 0; }
.handoff-label { display: block; font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.handoff-pick { display: block; margin-top: 2px; font-family: var(--font-display); font-size: calc(19px / var(--tz, 1)); line-height: 1.3; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handoff-sub { display: block; margin-top: 2px; font-size: calc(14px / var(--tz, 1)); line-height: 1.45; color: var(--fg-2); }
.handoff-go { flex: none; font-size: calc(15px / var(--tz, 1)); padding: 13px 20px; border-radius: 10px; }
.handoff-go .tool-ico { width: 17px; height: 17px; }
.handoff-fine { flex-basis: 100%; margin: -2px 0 0; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
.handoff-fine::before { content: "✓"; color: var(--ok); margin-right: 6px; font-weight: 800; }
/* On a phone it rides along at the bottom of the screen while the tool is in view. */
@media (max-width: 640px) {
  .handoff {
    position: sticky;
    bottom: 10px;
    z-index: 5;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 10px 10px 14px;
    background: linear-gradient(120deg, rgba(240, 106, 155, 0.22), rgba(245, 166, 106, 0.12)), rgba(22, 20, 26, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85);
  }
  .handoff-text { flex: 1 1 auto; }
  .handoff-label { display: none; } /* the pick and the button say it on a phone */
  .handoff-pick { font-size: calc(16px / var(--tz, 1)); }
  .handoff-sub, .handoff-fine { display: none; }
  /* The prompt page's bar carries no pick to show: the button alone, full width. */
  .handoff-solo .handoff-text { display: none; }
  .handoff-solo .handoff-go { flex: 1; }
  .handoff-go { padding: 12px 14px; font-size: calc(14px / var(--tz, 1)); }
}

/* ---------- under the tool: the article ---------- */
.tool-main { padding-bottom: 72px; }
.tool-body { max-width: 68ch; }
.tool-body > h2:first-child { margin-top: 0; }
.tool-body ul { padding-left: 1.2em; }
.tool-body li { margin-bottom: 0.7em; }
.tool-body .faq { margin-top: 6px; }
.tool-body .faq-item p { margin: 0; padding: 0 0 18px; font-size: calc(15px / var(--tz, 1)); }
.tool-body .faq-item summary { font-size: calc(16px / var(--tz, 1)); }
.tool-side .tool-cta { margin: 3em 0 0; }
.tool-side .btn { text-decoration: none; color: #fff; }
/* On a wide screen the pitch sits beside the article and follows the reader
   down it, instead of leaving the right side empty. */
@media (min-width: 960px) {
  .tool-main {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(260px, 1fr);
    column-gap: 56px;
  }
  /* The column runs the article's height, so the card stops before
     "More free tools" instead of sliding over it. */
  .tool-side .tool-cta { position: sticky; top: 24px; margin-top: 0; }
  .tool-more { grid-column: 1 / -1; }
}

/* The pitch under each tool: its own box (site.css's .cta is the guides'). */
.tool-cta {
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-border);
  background: linear-gradient(180deg, rgba(240, 106, 155, 0.14), rgba(245, 166, 106, 0.05));
}
.tool-cta .fine { display: block; margin-top: 12px; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
.tool-cta .fine::before { content: "✓"; color: var(--ok); margin-right: 6px; font-weight: 800; }
@media (max-width: 600px) { .tool-cta { padding: 22px 20px; } }

.tool-more { margin-top: 64px; }
.tool-more-head { font-family: var(--font-display); font-weight: 400; font-size: calc(26px / var(--tz, 1)); margin: 0 0 16px; }

/* ---------- the /tools index ---------- */
.tools-index .tool-cards { margin-bottom: 56px; }
.tools-index .tool-card { padding: 24px; min-height: 230px; }
.tool-card-demo { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: calc(15px / var(--tz, 1)); color: var(--fg-soft); }
.tool-card-demo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card-demo span:nth-child(2) { opacity: 0.7; }
.tool-card-demo span:nth-child(3) { opacity: 0.45; }
.tools-index .cta { max-width: 760px; margin-bottom: 72px; }

/* ---------- the spicy tools ---------- */
/* The 18+ switch under the heat chips: off on every visit. */
.adult-toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: calc(13.5px / var(--tz, 1)); font-weight: 600; color: var(--fg-2); cursor: pointer; user-select: none; }
.adult-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adult-switch { position: relative; flex: none; width: 36px; height: 21px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-strong); transition: background 160ms, border-color 160ms; }
.adult-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--fg-3); transition: transform 180ms cubic-bezier(0.3, 0.7, 0.3, 1), background 160ms; }
.adult-toggle input:checked + .adult-switch { background: var(--grad-btn); border-color: transparent; }
.adult-toggle input:checked + .adult-switch::after { transform: translateX(15px); background: #fff; }
.adult-toggle input:focus-visible + .adult-switch { box-shadow: 0 0 0 3px var(--accent-ring); }
[dir="rtl"] .adult-toggle input:checked + .adult-switch::after { transform: translateX(-15px); }
[dir="rtl"] .adult-switch::after { left: auto; right: 2px; }
.adult-note { margin: 6px 0 0; font-size: calc(12.5px / var(--tz, 1)); line-height: 1.45; color: var(--fg-3); }

/* A position's blocking card. */
.pos-card, .body-out, .dice-view {
  position: relative;
  padding: 24px 26px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: radial-gradient(420px 220px at 100% 0%, rgba(240, 106, 155, 0.08), transparent 70%), var(--tool-card);
}
.pos-card.deal, .body-out.deal { animation: deal 0.5s cubic-bezier(0.2, 0.75, 0.25, 1); }
.pos-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pos-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(26px, 4vw, 36px) / var(--tz, 1)); line-height: 1.1; color: var(--fg); }
.pos-aka { font-size: calc(13px / var(--tz, 1)); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-text); }
.pos-aka[hidden] { display: none; }
.pos-cast { margin: 8px 0 16px; font-size: calc(12.5px / var(--tz, 1)); color: var(--fg-3); }
.pos-cast span + span { color: var(--fg-2); font-weight: 600; }
.pos-fields { margin: 0; display: grid; gap: 0; }
.pos-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--border); }
.pos-row dt { font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
.pos-row dd { margin: 0; font-size: calc(15.5px / var(--tz, 1)); line-height: 1.55; color: var(--fg); text-wrap: pretty; }
.pos-lines { display: grid; gap: 4px; margin-top: 8px; font-family: var(--font-display); font-style: italic; color: var(--fg-2); }
.pos-row-note dt, .pos-row-cut dt { color: var(--accent-text); }
.pos-row-hot { margin: 6px -12px 0; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: linear-gradient(120deg, rgba(240, 106, 155, 0.14), rgba(245, 166, 106, 0.05)); }
.pos-row-hot dt { color: var(--accent-text); }
@media (max-width: 640px) {
  .pos-card, .body-out, .dice-view { padding: 18px; }
  .pos-row { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .pos-row dd { font-size: calc(15px / var(--tz, 1)); }
}

/* The dice. */
.dice-view[hidden], .pos-card[hidden], [data-mood-field][hidden], [data-for-subject][hidden] { display: none; }
.dice-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.die {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 110px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--surface-raised), var(--bg));
  box-shadow: inset 0 1px 0 var(--hairline), 0 14px 30px -18px rgba(0, 0, 0, 0.9);
}
.die-label { font-size: calc(11px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.die-face { font-family: var(--font-display); font-size: calc(19px / var(--tz, 1)); line-height: 1.25; color: var(--fg); overflow-wrap: anywhere; }
.die.tumble { animation: tumble 0.6s cubic-bezier(0.25, 0.8, 0.3, 1); }
.die.tumble:nth-child(2) { animation-delay: 60ms; }
.die.tumble:nth-child(3) { animation-delay: 120ms; }
.die.tumble:nth-child(4) { animation-delay: 180ms; }
@keyframes tumble { 0% { transform: rotate(-8deg) scale(0.9); opacity: 0.3; } 55% { transform: rotate(4deg) scale(1.03); opacity: 1; } 100% { transform: none; } }
.dice-text { margin: 18px 0 0; font-family: var(--font-display); font-size: calc(clamp(19px, 2.6vw, 24px) / var(--tz, 1)); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
@media (max-width: 640px) {
  .dice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .die { min-height: 92px; padding: 12px; }
  .die-face { font-size: calc(17px / var(--tz, 1)); }
}

/* Describe him / her. */
.body-out { display: grid; gap: 22px; }
.body-sec { min-width: 0; }
.body-head { margin: 0 0 10px; font-family: var(--font-ui); font-size: calc(11.5px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.body-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.body-lines li { position: relative; padding-left: 18px; font-family: var(--font-display); font-size: calc(clamp(17.5px, 2.2vw, 21px) / var(--tz, 1)); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
.body-lines li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.body-lines .line-hot { padding: 10px 12px 10px 28px; border: 1px solid var(--accent-border); border-radius: 12px; background: linear-gradient(120deg, rgba(240, 106, 155, 0.14), rgba(245, 166, 106, 0.05)); }
.body-lines .line-hot::before { left: 12px; top: calc(10px + 0.62em); }
[dir="rtl"] .body-lines li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .body-lines li::before { left: auto; right: 0; }
.heat-words { display: grid; gap: 10px; }
.hw-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; align-items: baseline; }
.hw-tier { font-size: calc(12.5px / var(--tz, 1)); font-weight: 700; color: var(--fg-2); }
.hw-row[data-tier="explicit"] .hw-tier { color: var(--accent-text); }
.hw-words { display: flex; flex-wrap: wrap; gap: 6px; }
.word { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); font-size: calc(13.5px / var(--tz, 1)); color: var(--fg); }
.hw-row[data-tier="explicit"] .word { border-color: var(--accent-border); }
.body-cliches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.body-cliches li { display: grid; gap: 3px; font-size: calc(14.5px / var(--tz, 1)); line-height: 1.5; }
.cliche { color: var(--fg-2); text-decoration: line-through; text-decoration-color: rgba(240, 106, 155, 0.75); text-decoration-thickness: 2px; }
.instead { color: var(--fg); }
.instead b { font-weight: 700; color: var(--ok); margin-right: 4px; }
.body-senses { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.body-senses div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.body-senses dt { font-size: calc(11px / var(--tz, 1)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.body-senses dd { margin: 0; font-size: calc(14.5px / var(--tz, 1)); line-height: 1.45; color: var(--fg); }
@media (max-width: 560px) {
  .hw-row { grid-template-columns: 1fr; }
  .body-senses { grid-template-columns: 1fr; }
}

/* The smut prompt: an explicit one is marked as such. */
.smut-card.is-hot { border-color: var(--accent-border); }

/* /tools: the spicy section. */
.tools-section-head { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(28px, 4vw, 38px) / var(--tz, 1)); margin: 0 0 8px; }
.tools-section-intro { max-width: 62ch; margin: 0 0 20px; color: var(--fg-2); font-size: calc(16px / var(--tz, 1)); line-height: 1.55; }
.tools-section-more { margin: -36px 0 56px; font-size: calc(14.5px / var(--tz, 1)); color: var(--fg-2); }
.tools-section-more a { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .result[data-new], .prompt-card.deal, .seg.swap, .result-pick.pop .heart, .tool-go.rolling .tool-ico, .pos-card.deal, .body-out.deal, .die.tumble { animation: none; }
  .chip, .result-pick, .result-copy, .seg, .legend-btn, .adult-switch, .adult-switch::after { transition: none; }
}