/* Cards brought forward over the board: close looks at scraps, and the blank card. */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(19, 17, 28, 0.55), rgba(10, 9, 16, 0.88));
  animation: fade-in 0.2s ease-out;
}

.overlay > .paper {
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
  animation: bring-forward 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

.overlay-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-family: var(--font-news);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.overlay-close:hover { color: var(--red); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes bring-forward { from { transform: scale(0.85) rotate(-3deg); opacity: 0; } }

/* ---- The blank card ---- */

.blank-card-open {
  width: 780px;
  padding: 26px 34px 30px;
  transform: rotate(-0.6deg);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(47, 90, 168, 0.16) 31px 32px),
    var(--noise),
    linear-gradient(170deg, #f4f0e8, var(--paper-shade));
}
.blank-card-open > .card-label { color: var(--purple); }
.decoder-title {
  margin: 4px 0 16px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 28px;
}

.answer,
.revealed {
  display: block;
  width: 100%;
  min-height: 118px;
  padding: 12px 16px;
  border: 1px solid rgba(31, 27, 38, 0.3);
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--font-type);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.answer { resize: none; text-transform: uppercase; }
.answer::placeholder { text-transform: none; color: rgba(74, 68, 82, 0.6); }
.answer:focus { outline: 2px solid var(--purple); outline-offset: 2px; }
.answer:disabled { opacity: 0.55; }
.revealed[hidden], .answer[hidden] { display: none; }
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.revealed .flip {
  color: var(--ink);
  animation: flip-in 0.35s ease-out;
}
/* Ink blots: six splats in three styles (bursts with rays, lumpy blobs, fine sprays), each tilted
   its own way. Drawn once by a seeded generator and fixed here, so they never change between loads. */
.blot {
  position: relative;
  display: inline-block;
  color: transparent;
}
.blot::before {
  content: "";
  position: absolute;
  inset: -45% -50%;
  background: var(--splat) center / contain no-repeat;
  transform: translateY(var(--blot-y, 0)) rotate(var(--blot-rot, 0deg)) scale(var(--blot-scale, 1));
  opacity: 0.92;
}
.blot-0 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M27.6 20.0 L26.8 20.7 L26.1 21.2 L25.9 21.8 L25.6 22.3 L26.0 23.2 L26.4 24.3 L26.1 25.0 L25.7 25.7 L25.1 26.2 L24.5 26.8 L24.0 27.4 L23.3 27.9 L22.4 28.0 L21.5 27.5 L20.6 26.4 L20.0 25.8 L19.4 25.8 L18.8 25.9 L18.1 26.4 L17.1 27.1 L15.9 27.7 L14.9 27.6 L14.1 27.1 L13.9 26.1 L14.1 24.8 L14.4 23.8 L14.1 23.2 L13.4 22.7 L13.3 22.0 L13.3 21.3 L13.3 20.7 L13.2 20.0 L12.9 19.3 L12.2 18.5 L11.9 17.6 L11.8 16.6 L12.2 15.8 L12.6 15.0 L13.8 14.9 L15.2 15.2 L16.3 15.5 L17.0 15.5 L17.2 14.8 L17.3 13.4 L17.7 12.3 L18.3 11.6 L19.2 11.7 L20.0 11.7 L20.8 11.5 L21.6 11.9 L22.2 12.7 L22.8 13.2 L23.4 13.6 L23.9 14.1 L24.3 14.8 L24.4 15.6 L24.7 16.2 L25.3 16.5 L26.7 16.4 L28.4 16.5 L28.9 17.3 L29.0 18.2 L28.5 19.2Z'/><path d='M14.3 22.1 L3.9 28.9 L15.2 23.8Z'/><path d='M24.3 15.8 L32.1 6.1 L23.6 15.2Z'/><path d='M21.8 25.7 L27.1 37.1 L22.8 25.3Z'/><path d='M23.2 25.1 L29.5 32.5 L24.1 24.5Z'/><path d='M14.8 23.2 L7.9 30.5 L16.1 24.7Z'/><path d='M15.6 24.1 L9.1 31.9 L16.3 24.8Z'/><path d='M23.2 25.2 L30.4 31.9 L24.7 23.9Z'/><path d='M15.8 15.7 L9.2 11.0 L15.0 16.7Z'/><circle cx='2.9' cy='29.5' r='0.73'/><circle cx='32.9' cy='5.2' r='1.08'/><circle cx='30.3' cy='33.5' r='0.76'/><circle cx='7.0' cy='31.3' r='0.54'/><circle cx='8.2' cy='32.7' r='0.87'/><circle cx='8.3' cy='10.3' r='0.94'/><circle cx='9.7' cy='9.1' r='0.78'/><circle cx='9.1' cy='29.3' r='0.35'/><circle cx='30.5' cy='23.2' r='0.66'/><circle cx='19.5' cy='36.6' r='0.57'/><circle cx='4.1' cy='28.7' r='0.64'/><circle cx='1.8' cy='17.7' r='0.98'/><circle cx='30.0' cy='30.2' r='0.76'/><circle cx='12.0' cy='12.9' r='0.45'/><circle cx='34.4' cy='11.5' r='0.35'/><circle cx='9.6' cy='26.5' r='0.33'/></svg>"); }
.blot-1 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M27.0 20.0 L28.5 20.8 L29.4 21.9 L29.9 23.0 L29.6 24.0 L29.0 24.8 L28.3 25.6 L27.6 26.2 L27.1 27.1 L26.3 27.7 L25.1 27.7 L24.1 27.6 L23.4 28.1 L22.5 28.4 L21.7 28.4 L20.8 28.0 L20.0 27.4 L19.4 26.2 L18.9 25.4 L18.4 25.2 L17.6 25.9 L16.5 26.6 L15.4 26.8 L14.4 26.8 L13.2 26.8 L12.1 26.5 L11.3 25.8 L10.7 25.0 L10.2 24.1 L10.5 22.9 L11.1 21.8 L11.4 20.9 L10.9 20.0 L10.8 19.1 L11.1 18.2 L11.8 17.5 L12.8 17.0 L13.9 16.7 L14.9 16.6 L15.4 16.2 L15.7 15.7 L15.9 15.0 L16.3 14.4 L16.6 13.6 L16.8 12.2 L17.2 10.8 L18.0 9.8 L18.9 9.3 L20.0 9.1 L21.0 9.7 L21.9 10.7 L22.6 11.4 L23.6 11.3 L24.6 11.4 L25.2 12.2 L25.7 13.0 L25.9 14.1 L26.2 14.9 L26.0 16.0 L26.0 16.8 L25.9 17.5 L25.9 18.2 L25.6 18.9 L26.1 19.4Z'/><path d='M13.6 23.0 L10.1 26.3 L14.6 24.6Z'/><path d='M24.2 14.3 L25.9 8.8 L22.3 13.3Z'/><circle cx='25.3' cy='5.2' r='2.46'/><circle cx='34.7' cy='18.9' r='2.15'/><circle cx='32.7' cy='17.9' r='1.91'/><circle cx='31.8' cy='26.1' r='1.91'/><circle cx='37.1' cy='12.4' r='0.57'/><circle cx='32.5' cy='29.5' r='0.54'/><circle cx='3.0' cy='15.2' r='0.60'/><circle cx='3.9' cy='28.6' r='0.76'/><circle cx='10.0' cy='35.2' r='1.05'/><circle cx='33.3' cy='9.7' r='0.73'/><circle cx='13.8' cy='3.3' r='0.91'/></svg>"); }
.blot-2 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M24.4 20.0 L24.4 20.4 L24.7 20.9 L24.6 21.4 L24.3 21.8 L24.1 22.2 L23.9 22.6 L23.3 22.7 L23.1 23.1 L23.0 23.7 L23.0 24.4 L22.7 25.0 L22.3 25.6 L21.9 26.1 L21.3 26.5 L20.7 26.8 L20.0 26.9 L19.3 26.8 L18.6 26.8 L18.0 26.5 L17.6 25.7 L17.2 25.2 L16.9 24.7 L16.3 24.5 L15.9 24.1 L15.3 23.8 L14.9 23.4 L14.9 22.7 L14.9 22.1 L15.4 21.4 L15.5 20.9 L15.6 20.4 L15.5 20.0 L15.9 19.6 L16.1 19.2 L16.4 18.9 L16.3 18.5 L16.2 18.0 L16.1 17.4 L15.8 16.6 L15.9 15.9 L16.3 15.5 L16.8 15.2 L17.4 15.1 L17.9 14.8 L18.3 14.4 L18.9 14.3 L19.4 13.9 L20.0 13.6 L20.6 13.7 L21.3 13.6 L21.9 13.8 L22.7 13.5 L23.4 13.7 L23.8 14.3 L24.3 14.8 L24.2 15.8 L24.2 16.5 L24.2 17.2 L24.1 17.8 L24.3 18.2 L24.5 18.6 L24.7 19.1 L24.5 19.6Z'/><circle cx='17.6' cy='28.4' r='0.70'/><circle cx='8.5' cy='25.5' r='0.85'/><circle cx='29.6' cy='20.5' r='0.62'/><circle cx='34.9' cy='25.3' r='0.51'/><circle cx='16.5' cy='27.8' r='0.88'/><circle cx='36.0' cy='24.8' r='0.71'/><circle cx='32.1' cy='10.9' r='0.48'/><circle cx='2.9' cy='14.4' r='0.28'/><circle cx='28.7' cy='8.1' r='0.38'/><circle cx='29.7' cy='17.9' r='0.25'/><circle cx='18.6' cy='32.6' r='0.27'/><circle cx='10.1' cy='13.6' r='0.47'/><circle cx='20.5' cy='6.0' r='0.88'/><circle cx='31.7' cy='7.5' r='0.86'/><circle cx='27.2' cy='10.0' r='0.29'/><circle cx='6.7' cy='24.6' r='0.88'/><circle cx='12.4' cy='8.9' r='0.31'/><circle cx='16.2' cy='14.7' r='0.34'/><circle cx='35.0' cy='24.2' r='0.86'/><circle cx='14.1' cy='16.0' r='0.73'/><circle cx='27.0' cy='33.5' r='0.69'/><circle cx='27.7' cy='17.2' r='0.40'/><circle cx='17.1' cy='26.3' r='0.86'/><circle cx='14.7' cy='14.9' r='0.56'/><circle cx='35.1' cy='30.8' r='0.48'/><circle cx='35.6' cy='20.2' r='0.46'/><circle cx='10.5' cy='6.9' r='0.30'/><circle cx='2.4' cy='14.7' r='0.40'/><circle cx='20.1' cy='34.8' r='0.29'/><circle cx='27.0' cy='5.1' r='0.87'/><circle cx='26.0' cy='9.6' r='1.37'/><circle cx='7.9' cy='17.2' r='1.78'/><circle cx='26.6' cy='29.4' r='1.36'/><circle cx='20.3' cy='29.1' r='1.63'/><circle cx='9.0' cy='13.5' r='1.21'/></svg>"); }
.blot-3 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M29.3 20.0 L28.6 20.8 L27.2 21.4 L25.7 21.7 L25.2 22.2 L25.2 22.8 L25.4 23.6 L25.5 24.5 L25.7 25.7 L25.3 26.5 L24.8 27.3 L24.1 27.7 L23.1 27.6 L22.2 27.4 L21.4 27.0 L20.7 27.6 L20.0 27.5 L19.3 26.7 L18.8 26.1 L18.3 25.8 L17.6 25.7 L16.6 26.4 L15.3 27.0 L14.1 27.2 L13.5 26.5 L13.0 25.7 L13.1 24.6 L13.5 23.5 L14.1 22.4 L14.4 21.7 L14.3 21.1 L13.4 20.7 L12.5 20.0 L12.1 19.2 L12.4 18.5 L12.6 17.8 L12.6 16.9 L12.4 15.9 L12.8 15.2 L13.5 14.7 L14.5 14.5 L15.5 14.6 L16.4 14.7 L17.1 14.6 L17.8 14.6 L18.2 14.2 L18.7 13.2 L19.2 11.6 L20.0 10.6 L20.9 10.7 L21.7 11.5 L22.3 12.5 L22.7 13.5 L23.3 13.8 L23.9 14.1 L24.4 14.7 L24.5 15.5 L25.1 15.8 L25.8 16.1 L26.5 16.5 L26.9 17.1 L27.7 17.7 L28.4 18.3 L29.0 19.1Z'/><path d='M14.2 21.7 L3.1 27.0 L14.7 22.9Z'/><path d='M26.0 19.5 L34.4 17.0 L25.7 18.0Z'/><path d='M25.2 16.9 L33.2 10.1 L24.4 15.9Z'/><path d='M21.1 14.0 L20.1 5.5 L19.0 14.0Z'/><path d='M22.1 25.7 L25.5 31.8 L23.0 25.2Z'/><path d='M22.7 25.4 L27.6 31.2 L24.1 24.5Z'/><path d='M26.0 20.5 L36.4 19.7 L26.0 19.3Z'/><circle cx='35.5' cy='16.8' r='0.67'/><circle cx='20.1' cy='4.3' r='0.94'/><circle cx='26.0' cy='32.9' r='0.90'/><circle cx='28.3' cy='32.2' r='0.70'/><circle cx='6.3' cy='15.3' r='0.98'/><circle cx='33.7' cy='9.2' r='0.32'/><circle cx='4.4' cy='10.1' r='0.75'/><circle cx='4.2' cy='18.7' r='0.42'/><circle cx='17.6' cy='3.1' r='0.35'/><circle cx='4.7' cy='19.1' r='0.55'/><circle cx='12.4' cy='3.4' r='0.93'/><circle cx='16.0' cy='30.6' r='0.90'/><circle cx='6.7' cy='8.7' r='0.91'/><circle cx='17.2' cy='35.0' r='0.51'/></svg>"); }
.blot-4 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M30.3 20.0 L31.2 21.1 L31.5 22.3 L30.8 23.3 L29.7 24.0 L28.3 24.4 L26.7 24.5 L25.6 24.6 L24.9 24.9 L24.0 24.9 L23.2 24.8 L22.6 24.8 L22.4 25.8 L22.2 27.2 L21.6 28.0 L20.8 28.4 L20.0 28.8 L19.2 28.5 L18.3 28.3 L17.5 28.3 L16.3 28.9 L15.0 29.4 L13.8 29.2 L13.0 28.5 L12.4 27.6 L11.8 26.7 L11.8 25.5 L12.0 24.3 L12.5 23.1 L13.5 22.0 L14.5 21.1 L15.0 20.5 L14.2 20.0 L13.1 19.3 L12.7 18.5 L12.6 17.7 L12.5 16.9 L12.7 16.1 L13.2 15.5 L13.2 14.4 L13.4 13.4 L13.8 12.4 L14.5 11.8 L15.2 11.1 L15.9 10.0 L16.7 9.3 L17.8 9.0 L19.0 9.6 L20.0 10.6 L20.8 12.2 L21.3 13.7 L21.7 14.5 L22.2 14.6 L23.0 14.4 L23.6 14.6 L24.2 14.8 L25.1 14.9 L26.0 15.0 L26.9 15.4 L27.9 15.8 L28.3 16.5 L28.6 17.4 L28.6 18.3 L29.2 19.1Z'/><path d='M21.3 13.0 L20.3 9.0 L19.1 13.0Z'/><path d='M26.7 22.2 L31.5 22.2 L27.0 20.4Z'/><circle cx='24.2' cy='9.4' r='2.50'/><circle cx='32.6' cy='23.6' r='1.85'/><circle cx='18.1' cy='4.5' r='2.45'/><circle cx='10.7' cy='31.4' r='2.90'/><circle cx='34.1' cy='26.2' r='0.98'/><circle cx='31.3' cy='13.3' r='1.11'/><circle cx='21.9' cy='36.1' r='1.07'/><circle cx='25.8' cy='7.0' r='0.97'/><circle cx='10.9' cy='30.2' r='1.16'/><circle cx='38.1' cy='25.4' r='0.43'/><circle cx='27.0' cy='8.1' r='0.67'/></svg>"); }
.blot-5 { --splat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%231f1b26'><path d='M26.4 20.0 L25.9 20.6 L25.8 21.2 L25.5 21.7 L25.4 22.2 L25.1 22.7 L24.8 23.2 L24.3 23.6 L24.0 24.0 L23.5 24.2 L22.9 24.4 L22.4 24.5 L22.0 24.8 L21.4 24.5 L20.8 24.0 L20.4 23.9 L20.0 24.0 L19.6 24.2 L19.2 24.2 L18.6 24.6 L17.9 25.0 L17.5 24.8 L17.0 24.5 L16.5 24.3 L15.7 24.3 L15.3 23.9 L14.9 23.4 L14.6 22.9 L14.6 22.2 L14.2 21.8 L14.3 21.1 L13.7 20.6 L13.5 20.0 L13.1 19.3 L13.1 18.6 L13.5 18.0 L14.1 17.6 L14.6 17.1 L15.3 16.9 L15.8 16.5 L16.5 16.5 L16.9 16.3 L17.4 16.1 L18.0 16.3 L18.5 16.3 L18.7 15.7 L19.1 15.4 L19.5 15.0 L20.0 15.0 L20.5 15.1 L20.9 15.4 L21.4 15.5 L21.8 15.8 L22.2 15.9 L22.8 15.9 L23.3 15.9 L23.8 16.2 L24.3 16.5 L25.0 16.7 L25.8 16.9 L26.2 17.4 L26.9 17.9 L27.1 18.6 L26.9 19.3Z'/><circle cx='13.1' cy='17.9' r='0.39'/><circle cx='27.1' cy='22.1' r='0.72'/><circle cx='24.8' cy='34.2' r='0.76'/><circle cx='7.2' cy='27.5' r='0.63'/><circle cx='10.0' cy='10.7' r='0.67'/><circle cx='30.6' cy='35.7' r='0.38'/><circle cx='26.1' cy='26.8' r='0.78'/><circle cx='38.7' cy='17.4' r='0.34'/><circle cx='8.2' cy='30.5' r='0.32'/><circle cx='8.6' cy='27.0' r='0.43'/><circle cx='16.3' cy='31.6' r='0.34'/><circle cx='29.5' cy='12.5' r='0.36'/><circle cx='9.3' cy='20.3' r='0.66'/><circle cx='29.8' cy='24.4' r='0.30'/><circle cx='9.8' cy='13.0' r='0.77'/><circle cx='11.4' cy='10.6' r='0.66'/><circle cx='14.6' cy='31.6' r='0.50'/><circle cx='9.1' cy='23.3' r='0.25'/><circle cx='24.1' cy='32.8' r='0.33'/><circle cx='8.6' cy='32.0' r='0.56'/><circle cx='21.5' cy='9.9' r='0.25'/><circle cx='5.2' cy='25.6' r='0.56'/><circle cx='9.1' cy='33.3' r='0.49'/><circle cx='34.1' cy='13.7' r='0.37'/><circle cx='10.6' cy='9.0' r='0.63'/><circle cx='15.5' cy='9.8' r='0.73'/><circle cx='6.8' cy='10.7' r='0.74'/><circle cx='9.7' cy='12.2' r='0.40'/><circle cx='30.3' cy='26.9' r='0.57'/><circle cx='11.4' cy='29.0' r='0.81'/><circle cx='29.3' cy='9.2' r='1.11'/><circle cx='23.3' cy='33.6' r='1.66'/><circle cx='23.5' cy='33.0' r='1.03'/><circle cx='10.4' cy='27.8' r='1.32'/><circle cx='25.8' cy='12.5' r='1.12'/></svg>"); }

.new-blot { animation: ink-spread 0.5s ease-out; }

@keyframes flip-in {
  0% { transform: rotateX(90deg); color: var(--purple); }
  100% { transform: rotateX(0); }
}
@keyframes ink-spread { from { transform: scale(0.2); opacity: 0.3; } }

.blank-card-open {
  display: flex;
  gap: 30px;
  width: 900px;
}
.blank-writing { flex: 1; min-width: 0; }

.decoder-controls {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 16px;
}

/* Two sliding A–Z strips, rows lined up across both. */
.strips { display: flex; align-items: stretch; gap: 6px; }
.strip-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.strip {
  display: flex;
  flex-direction: column;
  padding: 2px;
  border: 2px solid var(--purple);
  border-radius: 4px;
  background: repeating-linear-gradient(to bottom, rgba(107, 63, 160, 0.08) 0 21px, transparent 21px 42px);
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.strip-letter {
  width: 36px;
  height: 21px;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-type);
  font-size: 16px;
  line-height: 21px;
  color: var(--ink);
  cursor: pointer;
}
.strip-letter:hover,
.strip-letter.row-hover { background: var(--purple); color: var(--paper); }
.strip-arrow {
  width: 40px;
  height: 26px;
  border: 2px solid var(--purple);
  border-radius: 4px;
  background: transparent;
  color: var(--purple);
  font-size: 12px;
  cursor: pointer;
}
.strip-arrow:hover { background: var(--purple); color: var(--paper); }
.strip-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 54px;
}
.strip-gap {
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 34px;
  color: var(--purple);
}

.keys { display: flex; gap: 8px; }
.key-button {
  padding: 8px 14px;
  border: 2px solid var(--ink-soft);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font-type);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink);
  cursor: pointer;
}
.key-button:hover { background: var(--ink); color: var(--paper); }

.decoder-side { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tries { display: flex; gap: 10px; }
.try { display: block; width: 34px; height: 34px; }
.try svg { width: 100%; height: 100%; overflow: visible; }
.try-lens { fill: rgba(107, 63, 160, 0.1); stroke: var(--purple); stroke-width: 2.4; }
.try-handle { stroke: var(--purple); stroke-width: 4.2; stroke-linecap: round; }
.try-print path { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
/* A spent try fades to a ghost of itself. */
.try.spent { opacity: 0.25; filter: grayscale(1); }

.pin-button {
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 28px;
  border: 3px solid var(--purple);
  border-radius: 3px;
  background: var(--purple);
  color: var(--paper);
  font-family: var(--font-type);
  font-size: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
}
.pin-button:hover:not(:disabled) { background: #57308a; }
.pin-button:disabled { background: transparent; color: rgba(107, 63, 160, 0.5); border-color: rgba(107, 63, 160, 0.35); cursor: not-allowed; }

.decoder-status {
  min-height: 2.6em;
  margin: 0;
  font-family: var(--font-type);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.shake { animation: shake 0.4s; }
@keyframes shake {
  20% { transform: rotate(-0.6deg) translateX(-8px); }
  40% { transform: rotate(-0.6deg) translateX(7px); }
  60% { transform: rotate(-0.6deg) translateX(-5px); }
  80% { transform: rotate(-0.6deg) translateX(3px); }
}

/* ---- Close look at a decoy scrap ---- */

.close-look {
  width: auto;
  min-width: 440px;
  padding: 30px 64px 36px 36px;
  transform: rotate(-1deg);
}
.close-look .evidence-label { font-size: 16px; }
.close-look.evidence-matchbook { padding-top: 0; }
.close-look.evidence-matchbook .evidence-label { margin: 0 -64px 0 -36px; padding: 18px 36px; font-size: 26px; }
.close-look-note { max-width: 700px; margin-top: 16px; font-size: 40px; line-height: 1.15; white-space: normal; color: var(--pencil); }
.close-look-note .doodle { width: 22px; height: 28px; vertical-align: middle; }
.close-look-note.typed { font-family: var(--font-type); font-size: 24px; line-height: 1.45; color: var(--ink); }
.close-look.evidence-telegram .close-look-note { text-transform: uppercase; }
.close-look.evidence-letter .close-look-note { color: #2b2850; }

/* ---- A suspect's statement ---- */

.statement-open {
  width: 560px;
  padding: 26px 36px 32px;
  transform: rotate(0.8deg);
}
.statement-name {
  margin: 4px 0 2px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 30px;
}
.statement-desc {
  margin: 12px 0 0;
  font-family: var(--font-story);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The statement on the same typed slip as on the card, just bigger. */
.statement-quote {
  margin: 18px -8px 0;
  padding: 12px 16px 14px;
  background: #f6f2ea;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  border-left: 5px solid var(--purple);
  font-family: var(--font-type);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---- The case ending ---- */

.ending {
  width: 680px;
  padding: 34px 44px 38px;
  transform: rotate(-0.5deg);
}
.ending-stamp {
  display: inline-block;
  margin-bottom: 18px;
  padding: 4px 18px 6px;
  border: 5px solid currentColor;
  border-radius: 4px;
  font-family: var(--font-type);
  font-size: 46px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  filter: url(#rough-ink);
  animation: thump 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  --stamp-rot: -4deg;
}
.ending-closed .ending-stamp { color: var(--blue); }
.ending-cold .ending-stamp { color: var(--red); }
.ending-answer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 0 0 16px;
  font-family: var(--font-type);
  font-size: 16px;
}
.ending-answer dt { color: var(--red); letter-spacing: 0.15em; text-transform: uppercase; }
.ending-answer dd { margin: 0; }
.ending-text {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
}
.ending-aftermath {
  margin: 6px 0 0;
  font-family: var(--font-type);
  font-size: 16px;
  line-height: 1.5;
}

/* ---- The LIAR slip ---- */

.liar-slip {
  width: 560px;
  padding: 26px 36px 32px;
  transform: rotate(-0.8deg);
}
.liar-slip > .card-label { color: var(--purple); }
.liar-warning,
.liar-question,
.liar-verdict {
  margin: 16px 0 12px;
  font-family: var(--font-type);
  font-size: 16px;
  color: var(--ink-soft);
}
.liar-verdict { font-size: 20px; color: var(--ink); }
.liar-button,
.liar-option {
  display: block;
  padding: 10px 18px;
  border: 3px solid var(--purple);
  border-radius: 3px;
  background: var(--purple);
  color: var(--paper);
  font-family: var(--font-type);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
}
.liar-options { display: grid; gap: 10px; }
.liar-option { width: 100%; background: transparent; color: var(--ink); }
.liar-option:hover,
.liar-button:hover { background: #57308a; color: var(--paper); }
.ending-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(31, 27, 38, 0.4);
}
.rank-name {
  margin-top: 4px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 28px;
  color: var(--blue);
}
.share-spot { margin-left: auto; text-align: right; }
.copy-button {
  padding: 12px 20px;
  border: 3px solid var(--blue);
  border-radius: 3px;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--font-type);
  font-size: 17px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.copy-button:hover { background: #244a8c; }
.share-fallback {
  width: 280px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(31, 27, 38, 0.4);
  font-family: var(--font-type);
  font-size: 13px;
  resize: none;
}

/* ---- The case file cover ---- */

.cover {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(42, 34, 54, 0.92), rgba(10, 9, 16, 0.97));
  transition: opacity 0.35s;
}
.cover.opening { opacity: 0; }
.folder {
  position: relative;
  width: 720px;
  padding: 70px 70px 56px;
  border-radius: 6px 6px 8px 8px;
  background-image: var(--noise), linear-gradient(165deg, #6c6378, #4a4255);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
  text-align: center;
  transform: rotate(-1deg);
}
.folder-tab {
  position: absolute;
  top: -30px;
  left: 60px;
  padding: 7px 26px 9px;
  border-radius: 8px 8px 0 0;
  background: var(--red);
  font-family: var(--font-type);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper);
}
.folder-label { padding: 22px 30px 26px; transform: rotate(1.5deg); }
.folder-number {
  margin-top: 8px;
  font-family: var(--font-type);
  font-size: 20px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.folder-title {
  margin: 8px 0 6px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 50px;
  line-height: 1.05;
}
.folder-date { font-family: var(--font-type); font-size: 16px; color: var(--ink-soft); }
.folder-line {
  margin: 30px 0 22px;
  font-family: var(--font-type);
  font-size: 18px;
  color: var(--paper);
}
.open-file {
  padding: 14px 34px;
  border: 3px solid var(--red);
  border-radius: 3px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-type);
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.open-file:hover { background: var(--red-dark); }

/* ---- How to play ---- */

.how-to {
  width: 700px;
  padding: 28px 40px 32px;
  transform: rotate(0.5deg);
}
.how-to-title {
  margin: 4px 0 16px;
  font-family: var(--font-news);
  font-weight: 900;
  font-size: 32px;
}
.how-to-steps {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 18px;
  margin: 0 0 24px;
}
.how-to-steps dt {
  font-family: var(--font-type);
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
}
.how-to-steps dd { margin: 0; font-size: 15px; line-height: 1.5; }

/* Countdown on the ending. */
.countdown {
  margin-top: 16px;
  font-family: var(--font-type);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* Close-ups of the new kinds of evidence keep their paper and print. */
.close-look .ledger-row { padding: 4px 0; }
.close-look .prints svg { width: 70px; height: 86px; }
.close-look .key-art { width: 160px; height: 48px; }
.close-look.evidence-classified .close-look-note.typed { font-family: var(--font-story); }
.close-look.evidence-report .close-look-note.typed { color: #2c3f74; }
.close-look-code { margin-top: 10px; }
.close-look.evidence-photo-note { min-width: 440px; }
.close-look .paper-doodle .doodle { width: 30px; height: 34px; }
.close-look .paper-doodle.top-right { top: 14px; right: 60px; }
.close-look .paper-doodle.bottom-right { bottom: 12px; right: 18px; }
.close-look .paper-doodle.bottom-left { bottom: 12px; left: 18px; }

/* An index card brought forward to write on, and the notepad. */
.index-card-open {
  width: 420px;
  min-height: 0;
  padding: 34px 26px 18px;
}
.index-input,
.notepad-input {
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--font-hand);
  color: var(--ink);
}
.index-input { height: 132px; font-size: 32px; line-height: 44px; }
.index-card-open {
  background:
    linear-gradient(var(--red) 0 0) 0 30px / 100% 1px no-repeat,
    repeating-linear-gradient(transparent 0 43px, rgba(47, 90, 168, 0.35) 43px 44px) 0 30px / 100% 150px no-repeat,
    #f6f2ea;
}
.index-remove {
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--red);
  font-family: var(--font-type);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.index-remove:hover { text-decoration: underline; }

/* The notepad lies open beside the board and any open card, above both, until it's closed. */
.notepad {
  position: absolute;
  right: 28px;
  bottom: 128px;
  z-index: 102;
  width: 380px;
  padding: 0 18px 14px 46px;
  background:
    linear-gradient(90deg, transparent 32px, rgba(179, 38, 58, 0.45) 32px 33px, transparent 33px),
    var(--paper);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
  transform: rotate(-0.6deg);
}
.notepad[hidden] { display: none; }
.notepad-binding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -18px 0 -46px;
  padding: 6px 10px 6px 46px;
  background: #2a2232;
  cursor: grab;
  touch-action: none;
}
.notepad-binding .card-label { color: rgba(239, 233, 221, 0.7); }
.notepad-close {
  border: 0;
  background: none;
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.notepad-input {
  height: 360px;
  margin-top: 6px;
  font-size: 26px;
  line-height: 34px;
  background: repeating-linear-gradient(transparent 0 33px, rgba(47, 90, 168, 0.35) 33px 34px);
  background-attachment: local;
}

/* A clue brought up close. */
.clue.clue-open {
  width: 520px;
  min-height: 0;
  padding: 24px 32px 28px;
  transform: rotate(-0.6deg);
}
.clue-open .card-label { font-size: 13px; }
.clue-open .clue-text { margin-top: 12px; font-size: 22px; line-height: 1.45; }