/* Цензурки play UI */

/* Wide article + dock — like order-game landing, above default .new-wrap. */
.new-wrap:has(.censorly) {
  max-width: 72rem;
}

.censorly {
  --censorly-lock: var(--muted, #6b7280);
  /* Title-lemma notch (left rail) — warm, distinct from the black bar. */
  --censorly-notch: color-mix(in srgb, var(--accent, #c9a227) 78%, #3d2e08);
  --censorly-notch-lock: color-mix(in srgb, var(--bg, #fff) 88%, #f0e6c8);
  /* One monospace cell, close to redactle's block-glyph advance. */
  --censorly-ch: 0.55em;
  --censorly-bar-pad: 0.02em;
  /* Same width as a 1-letter bar. */
  --censorly-notch-w: calc(var(--censorly-ch) + var(--censorly-bar-pad));
  /* Ghost ending inside the black bar — barely readable on the mask. */
  --censorly-ending-on-mask: color-mix(in srgb, var(--bg, #fff) 34%, transparent);
  container-type: inline-size;
  container-name: censorly;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding-bottom: 1rem;
}

/* Sticky dock must not be clipped by the task card. */
.censorly .new-taskcard,
.censorly .new-taskcard__body {
  overflow: visible;
}

.censorly__layout {
  display: grid;
  gap: 1rem;
  min-width: 0;
  align-items: start;
}

.censorly__dock {
  min-width: 0;
  max-width: 100%;
}

/*
  Desktop: sticky dock under .new-nav (same offset as proportions pool / raddle pin).
  z-index below nav (10), above article content.
*/
/* Must match the new UI wide breakpoint (920px). */
@container censorly (min-width: 920px) {
  .censorly__layout {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem);
  }

  .censorly__dock {
    position: sticky;
    top: calc(var(--new-ui-scroll-margin-top, 5.5rem) + 0.35rem);
    bottom: auto;
    z-index: 8;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.12)) 80%, transparent);
    border-radius: 8px;
    background: var(--surface, var(--bg, #fff));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 8%, transparent);
  }

  .censorly {
    padding-bottom: 1rem;
  }
}

html.new-ui-dark .censorly__dock {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Narrow / mobile: form bar sticks to the bottom (thumb reach), with blur chrome. */
/* Must match the new UI wide breakpoint (920px). */
@container censorly (max-width: 919px) {
  .censorly {
    padding-bottom: max(7rem, var(--censorly-dock-height, 7rem));
  }

  /*
  A long masked word can be wider than the article on a phone. Let the glyphs
  wrap across lines so the black mask stays inside the article column.
  */
  .censorly-tok--glyphs .censorly-tok__blocks {
    /* An inline-block stays one unbreakable box despite break-all. Make the
       mask itself inline so the glyph run can fragment across article lines. */
    display: inline;
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  /* Keep the article visible above the sticky input dock on phones. */
  .censorly:not(.censorly--history-open) .censorly__controls {
    display: none;
  }

  .censorly__body {
    font-size: 0.9rem;
  }

  .censorly__title {
    font-size: clamp(1.3rem, 5.5vw, 1.55rem);
    line-height: 1.3;
  }

  .censorly__input {
    font-size: 0.82rem;
    padding: 0.42rem 0.45rem;
  }

  .censorly__guess-table {
    font-size: 0.85rem;
  }

  .censorly__dock {
    position: sticky;
    bottom: var(--censorly-keyboard-offset, 0px);
    top: auto;
    z-index: 8;
    width: 100%;
    margin-inline: 0;
    padding: 0.65rem 0.5rem calc(0.65rem + env(safe-area-inset-bottom, 0));
    background: color-mix(in srgb, var(--surface, var(--bg, #fff)) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.1)) 80%, transparent);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--text) 12%, transparent);
  }
}

.censorly__status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.95rem;
}

.censorly__hint-mode {
  color: var(--accent, #b08900);
  font-weight: 600;
}

.censorly__fetched {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.censorly.censorly--hint-pick .censorly-tok--mask:not([data-title-lemma]) {
  cursor: pointer;
  outline: 2px dashed color-mix(in srgb, var(--accent, #b08900) 70%, transparent);
  outline-offset: 2px;
}

.censorly__title,
.censorly__body {
  /* Monospace so masked slots and revealed letters share the same advance. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* redactle paragraphs use line-height 1.6. */
  line-height: 1.6;
  overflow-wrap: break-word;
  min-width: 0;
}

.censorly__title {
  margin: 0 0 0.78em;
  /* redactle h1 is 2em of the article size (~16.4px → ~33px). */
  font-size: clamp(1.65rem, 2.6vw, 2.05rem);
  font-weight: 400;
  line-height: 1.4;
}

.censorly__body {
  margin: 0;
  /* redactle default --article-font-size: .909091em of text-lg (18px) ≈ 16.4px. */
  font-size: 1.025rem;
  white-space: pre-wrap;
}

.censorly__truncated {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Result card uses [hidden]; global .new-raddle-result { display:block } must not win. */
.censorly .new-raddle-result[hidden] {
  display: none !important;
}

.censorly-tok {
  display: inline;
}

/* Blank line between wikipedia paragraphs: redactle's collapsed p margin, 0.75em. */
.censorly-tok--para {
  display: block;
  height: 0.75em;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

/*
  Wiki headings are blocks so neighbouring margins collapse, as on redactle.
  Sizes track h2 / h3 / h4 of their article (body ≈ 16.4px): 1.5em, 1.25em, 1.1em.
  margin-top is 1em of the heading face (0.8em from h4 down). margin-bottom is
  0.75em of the body, so the gap after a heading matches a paragraph gap.
  A paragraph spacer before a heading does not collapse, so those gaps add.
*/
.censorly-heading {
  display: block;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
}

.censorly-heading--2 { font-size: 1.5em; margin: 1em 0 0.5em; }
.censorly-heading--3 { font-size: 1.25em; margin: 1em 0 0.6em; }
.censorly-heading--4 { font-size: 1.1em; margin: 0.8em 0 0.68em; }
.censorly-heading--5 { font-size: 1em; margin: 0.75em 0 0.75em; }
.censorly-heading--6 { font-size: 0.95em; margin: 0.7em 0 0.79em; }

/*
  Mask. Default is █ glyphs (.censorly-tok--glyphs).
  Class censorly--bars on #censorly-root restores the rectangle stems.
*/
.censorly-tok--mask {
  display: inline;
  margin: 0 0.03em;
  vertical-align: baseline;
  cursor: pointer;
  background: transparent;
  opacity: 1;
  position: static;
  border-radius: 0;
}

/* Revealed words are reportable without making the article look button-heavy. */
.censorly-tok--reportable {
  cursor: pointer;
  border-radius: 2px;
}
.censorly-tok--reportable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #b08900) 70%, transparent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .censorly-tok--reportable {
    position: relative;
  }
  .censorly-tok--reportable::after {
    content: 'Пожаловаться на матчинг слов';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    z-index: 20;
    width: max-content;
    max-width: 15rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid color-mix(in srgb, var(--border, #bbb) 80%, transparent);
    border-radius: 4px;
    background: var(--surface, var(--bg, #fff));
    color: var(--text, #222);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    font: 0.72rem/1.2 sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.2rem);
    transition: opacity 0.14s ease 1.45s, transform 0.14s ease 1.45s;
  }
  .censorly-tok--reportable:hover::after,
  .censorly-tok--reportable:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.censorly-word-report-modal__box {
  max-width: 34rem;
}
.censorly-word-report-reasons {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0 1rem;
  padding: 0;
  border: 0;
}
.censorly-word-report-reasons__legend {
  margin-bottom: 0.25rem;
  color: var(--text, #222);
  font-size: 0.9rem;
  font-weight: 700;
}
.censorly-word-report-reason {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.16));
  border-radius: 0.7rem;
  background: var(--surface, var(--bg, #fff));
  color: var(--text, #222);
  cursor: pointer;
  line-height: 1.35;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.censorly-word-report-reason:hover {
  border-color: color-mix(in srgb, var(--accent, #5b6ee1) 55%, var(--border, #ccc));
}
.censorly-word-report-reason:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent, #5b6ee1) 55%, transparent);
  outline-offset: 2px;
}
.censorly-word-report-reason:has(input:checked) {
  border-color: var(--accent, #5b6ee1);
  background: color-mix(in srgb, var(--accent, #5b6ee1) 8%, var(--surface, #fff));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #5b6ee1) 20%, transparent);
}
.censorly-word-report-reason input {
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent, #5b6ee1);
}
.censorly-word-report-reason__copy {
  display: grid;
  gap: 0.15rem;
}
.censorly-word-report-reason__copy strong {
  font-weight: 650;
}
.censorly-word-report-reason__copy small {
  color: var(--muted);
  font-size: 0.88em;
  line-height: 1.3;
}
.censorly-word-report-field {
  display: grid;
  gap: 0.35rem;
  line-height: 1.4;
}
.censorly-word-report-field[hidden] {
  display: none;
}
.censorly-word-report-field {
  margin: 0.8rem 0;
}
.censorly-word-report-field em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.9em;
}
.censorly-word-report-field input,
.censorly-word-report-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.2));
  border-radius: 5px;
  background: var(--surface, var(--bg, #fff));
  color: var(--text, #222);
  font: inherit;
}

@media (max-width: 480px) {
  .censorly-word-report-modal__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .censorly-word-report-modal__actions .new-btn {
    width: 100%;
  }
}

/* Redactle bar: block glyphs share the bar color. Length sits on the left. */
.censorly-tok__blocks {
  position: relative;
  display: inline-block;
  background: var(--text);
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0;
  font-kerning: none;
  vertical-align: -0.05em;
  border-radius: 1px;
}
.censorly-tok__blocks::after {
  content: none;
  position: absolute;
  top: 0;
  left: 0.1em;
  color: var(--bg, #fff);
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  pointer-events: none;
}
.censorly:not(.censorly--show-endings) .censorly-tok__ending {
  display: none;
}
.censorly.censorly--show-lengths .censorly-tok--glyphs:not([data-len-forced="0"]) .censorly-tok__blocks::after,
.censorly-tok--glyphs[data-len-forced="1"] .censorly-tok__blocks::after {
  content: attr(data-len);
}
.censorly-tok--glyphs .censorly-tok__ending {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--bg, #fff);
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.censorly-tok--glyphs > .censorly-tok__lock {
  display: inline;
  margin-right: 0.15em;
  font-size: 0.78em;
  color: var(--accent, #1f6f5e);
  opacity: 0.95;
  vertical-align: 0.05em;
  pointer-events: none;
}
.censorly-tok--glyphs > .censorly-tok__lock--strong { opacity: 1; }
.censorly-tok--glyphs > .censorly-tok__lock--weak { opacity: 0.38; }

.censorly--bars .censorly-tok__stem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Fixed size from letter count — match monospace advance (~0.55em, like ▀/█). */
  width: calc(var(--ch, 4) * var(--censorly-ch) + var(--censorly-bar-pad));
  max-width: 100%;
  height: 1.15em;
  padding: 0 0.04em;
  overflow: hidden;
  border-radius: 2px;
  /* Keep opacity off the element so ghost ending / lock stay crisp. */
  background: var(--text);
  position: relative;
  vertical-align: -0.08em;
  transform: none;
}

/* Shared lock size (notch + revealed). */
.censorly-tok__lock {
  font-size: 0.36em;
  line-height: 1;
  pointer-events: none;
}

/*
  Title lemma: wide left notch (same for 1 and longer), accent color, lock inside.
  Black letter-bar width unchanged; notch is added on the left.
*/
.censorly--bars .censorly-tok--mask[data-title-lemma] .censorly-tok__stem {
  width: calc(var(--ch, 4) * var(--censorly-ch) + var(--censorly-bar-pad) + var(--censorly-notch-w));
  padding-left: var(--censorly-notch-w);
  background:
    linear-gradient(
      to right,
      var(--censorly-notch) 0,
      var(--censorly-notch) var(--censorly-notch-w),
      var(--text) var(--censorly-notch-w),
      var(--text) 100%
    );
}
.censorly--bars .censorly-tok__stem .censorly-tok__lock {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* em must resolve against stem size, not the shrunk icon font. */
  font-size: 1em;
  width: var(--censorly-notch-w);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  color: var(--censorly-notch-lock);
  opacity: 0.95;
  z-index: 2;
}
.censorly--bars .censorly-tok__stem .censorly-tok__lock--strong { opacity: 1; }
.censorly--bars .censorly-tok__stem .censorly-tok__lock--weak { opacity: 0.38; }
.censorly--bars .censorly-tok__stem .censorly-tok__lock::before {
  font-size: 0.36em;
}

.censorly--bars .censorly-tok__stem::after {
  content: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--bg, #fff);
  opacity: 0.96;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  font-family: Consolas, "Cascadia Mono", "SF Mono", Menlo, Monaco, monospace;
  z-index: 1;
}

.censorly--bars .censorly-tok--mask[data-title-lemma] .censorly-tok__stem::after {
  /*
    Center the digit in the black portion only.
    ::after font-size is 0.5em of the stem, so notch length must be scaled ×2.
  */
  left: calc(var(--censorly-notch-w) / 0.5);
}

.censorly--bars .censorly-tok--mask-ending .censorly-tok__stem::after {
  /* Keep the length digit clear of the ghost ending on the right. */
  padding-right: 0.55em;
}

.censorly.censorly--bars.censorly--show-lengths .censorly-tok--mask:not([data-len-forced="0"]) .censorly-tok__stem::after,
.censorly--bars .censorly-tok--mask[data-len-forced="1"] .censorly-tok__stem::after {
  content: attr(data-len);
}

/* Rectangle mode: ending sits inside the bar, barely visible. */
.censorly--bars .censorly-tok__ending {
  position: absolute;
  right: 0.16em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--censorly-ending-on-mask);
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 2;
}

/* Revealed title words keep a quiet lock before the text. */
.censorly-tok--revealed > .censorly-tok__lock {
  display: inline;
  margin-right: 0.1em;
  font-size: 0.78em;
  color: var(--censorly-lock);
  opacity: 0.85;
  vertical-align: 0.05em;
}
.censorly-tok--revealed > .censorly-tok__lock--strong { opacity: 1; }
.censorly-tok--revealed > .censorly-tok__lock--weak { opacity: 0.38; }

.censorly-tok--revealed {
  /* plain revealed text after win — no underline by default */
}

.censorly-tok--guessed {
  text-decoration: underline;
  text-decoration-color: var(--accent, #1f6f5e);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}

.censorly-tok--hinted::before {
  content: "💡";
  display: inline-block;
  margin-inline-end: 0.18em;
  font-size: 0.78em;
  vertical-align: 0.08em;
}

.censorly-tok--just {
  background: color-mix(in srgb, var(--accent, #c9a227) 35%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: censorly-flash 1.6s ease-out;
}

.censorly-tok--selected {
  background: color-mix(in srgb, var(--accent, #c9a227) 28%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@keyframes censorly-flash {
  0% { background: color-mix(in srgb, var(--accent, #c9a227) 55%, transparent); }
  100% { background: transparent; }
}

.censorly__form {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.censorly__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.censorly__ending-icon {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
}

.censorly__input-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}

.censorly__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.18));
  background: var(--bg, #fff);
  color: var(--text);
}

.censorly__wiki-link {
  display: inline-flex;
  margin-left: 0.45em;
  color: var(--muted);
  font-family: system-ui, sans-serif;
  font-size: 0.65em;
  line-height: 1;
  vertical-align: 0.08em;
  text-decoration: none;
}

.censorly__wiki-link:hover,
.censorly__wiki-link:focus-visible {
  color: var(--accent, #1f6f5e);
  text-decoration: underline;
}

.censorly__solved {
  margin-left: 0.35em;
  font-family: system-ui, sans-serif;
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: 0.12em;
}

.censorly__feedback {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.censorly__feedback.is-error { color: #c23b22; }
.censorly__feedback.is-hit { color: #1a7f37; }
.censorly__feedback.is-info { color: #6b5b1f; }

.censorly__history {
  margin-top: 0.65rem;
  max-height: min(50vh, 22rem);
  max-height: min(50dvh, 22rem);
  overflow: auto;
}

.censorly__guess-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.censorly__guess-table th,
.censorly__guess-table td {
  text-align: left;
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.censorly__guess-table th:last-child,
.censorly__guess-table td:last-child {
  overflow-wrap: anywhere;
}

.censorly__no-hits {
  color: var(--muted, #6b7280);
  font-size: 0.85em;
}

.censorly__guess-word {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.censorly__guess-word:focus-visible {
  outline: 2px solid var(--accent, #c9a227);
  outline-offset: 2px;
}

.censorly__guess-table tbody tr {
  cursor: pointer;
}

.censorly__guess-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent, #c9a227) 12%, transparent);
}

.censorly__guess-table tbody tr.is-active {
  background: color-mix(in srgb, var(--accent, #c9a227) 20%, transparent);
}

.censorly__col-n { width: 2.5ch; }
.censorly__col-hits { width: 3.5ch; }

.censorly__history-empty {
  color: var(--muted);
  font-style: italic;
  cursor: default;
}

.censorly.censorly--digits-2 .censorly__col-n { width: 3.5ch; }
.censorly.censorly--digits-3 .censorly__col-n { width: 4.5ch; }