/* Pattern detective (spelling-pattern.js) */
.pd-learn, .pd-sort, .pd-done { display: grid; gap: 12px; }
.pd-kicker { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fde047; }
.pd-h { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 900; letter-spacing: -.01em; }
.pd-lede { margin: 0; color: var(--ink-soft); font-size: 16px; }
.pd-lede strong { color: var(--ink); }
.pd-replay { justify-self: start; min-width: 0; }
.pd-team { position: relative; border-radius: 20px; padding: 14px; border: 1px solid var(--line); display: grid; gap: 8px; }
.pd-team h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.pd-team p { margin: 0; font-size: 15px; color: #dbe4ff; }
.pd-team.blend { background: linear-gradient(140deg, rgba(167, 139, 250, .22), rgba(34, 211, 238, .08)); border-color: rgba(196, 181, 253, .35); }
.pd-team.silent { background: linear-gradient(140deg, rgba(52, 211, 153, .16), rgba(15, 23, 42, .2)); border-color: rgba(110, 231, 183, .3); }
.pd-try { font-size: 13px !important; color: var(--ink-soft) !important; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip { min-height: 52px; min-width: 76px; padding: 6px 12px; border-radius: 16px; border: 2px solid rgba(196, 181, 253, .6);
  background: rgba(30, 27, 75, .7); color: #ede9fe; font-weight: 900; font-size: 24px; display: inline-flex; gap: 10px; justify-content: center; align-items: center;
  transition: gap .25s ease, transform .15s; }
.pd-chip:active { transform: scale(.96); }
.pd-chip.squish { animation: pd-squish .9s ease; }
@keyframes pd-squish { 0% { gap: 10px; } 35% { gap: 0; transform: scale(1.12); background: rgba(124, 58, 237, .7); } 70% { gap: 0; } 100% { gap: 10px; } }
.pd-sneaks { display: grid; gap: 8px; }
.pd-sneak { text-align: left; min-height: 56px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(110, 231, 183, .35);
  background: rgba(6, 32, 22, .45); display: grid; gap: 2px; color: var(--ink); }
.pd-sneak small { color: var(--ink-soft); font-size: 13px; }
.pd-sw { font-size: 26px; font-weight: 900; letter-spacing: .06em; }
.pd-sw .shh { color: rgba(110, 231, 183, .45); text-decoration: underline dotted; position: relative; }
.pd-sneak.shush .shh { animation: pd-shush 1.1s ease; }
@keyframes pd-shush { 30% { opacity: .1; transform: translateY(-6px) scale(.8); } 100% { opacity: 1; transform: none; } }
.pd-why { border-radius: 14px; background: rgba(7, 13, 34, .55); padding: 10px 12px; }
.pd-why summary { cursor: pointer; font-weight: 800; color: #fde68a; min-height: 32px; display: flex; align-items: center; }
.pd-why p { margin-top: 8px !important; font-size: 14px !important; }
.pd-towel { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; font-size: 18px; opacity: .45; }
.pd-towel:active { opacity: 1; transform: rotate(-12deg); }
.pd-go { justify-self: stretch; }

.pd-meter { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.pd-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(7, 13, 34, .7); overflow: hidden; }
.pd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #34d399); transition: width .4s; }
.pd-ask { margin: 0; min-height: 44px; font-size: 17px; font-weight: 800; text-align: center; }
.pd-stage { display: grid; place-items: center; min-height: 150px; }
.pd-card { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  padding: 18px 16px 12px; border-radius: 22px; background: linear-gradient(160deg, #1e293b, #0f172a); border: 2px solid rgba(165, 243, 252, .35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45); display: grid; gap: 8px; justify-items: center; transition: transform .2s; }
.pd-card.dragging { transition: none; cursor: grabbing; box-shadow: 0 24px 40px rgba(0, 0, 0, .55), 0 0 0 3px rgba(253, 224, 71, .6); z-index: 5; }
.pd-card.spot { cursor: default; border-color: rgba(253, 224, 71, .7); }
.pd-card.shake { animation: shake .45s; }
.pd-new { position: absolute; top: -10px; right: -8px; font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: #fde047; color: #1a1300; }
.pd-word { display: flex; gap: 4px; }
.pd-l { min-width: 44px; min-height: 56px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: #f8fafc;
  font-size: 34px; font-weight: 900; padding: 0 2px; }
.pd-card.spot .pd-l { border-color: rgba(165, 243, 252, .3); background: rgba(34, 211, 238, .08); }
.pd-l.is-blend { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff; animation: pd-pop .35s; }
.pd-l.is-shh { background: rgba(110, 231, 183, .15) !important; color: rgba(110, 231, 183, .55); text-decoration: line-through dotted; animation: pd-pop .35s; }
.pd-l.nope { animation: shake .4s; background: rgba(248, 113, 113, .25) !important; }
.pd-l.hint-glow { box-shadow: 0 0 0 3px #fde047, 0 0 18px rgba(253, 224, 71, .7); }
@keyframes pd-pop { 50% { transform: scale(1.2); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pd-bins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-bins.locked .pd-bin { opacity: .55; }
.pd-bin { position: relative; min-height: 104px; border-radius: 20px; padding: 10px 8px; display: grid; gap: 2px; justify-items: center; align-content: center;
  font-weight: 900; font-size: 15px; color: var(--ink); border: 2px dashed; transition: transform .15s, box-shadow .15s; }
.pd-bin b { font-size: 30px; }
.pd-bin small { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.pd-bin.blend { background: rgba(124, 58, 237, .18); border-color: rgba(196, 181, 253, .6); }
.pd-bin.silent { background: rgba(16, 185, 129, .14); border-color: rgba(110, 231, 183, .55); }
.pd-bin.hot { transform: scale(1.05); box-shadow: 0 0 0 3px #fde047, 0 0 26px rgba(253, 224, 71, .45); border-style: solid; }
.pd-count { position: absolute; top: 6px; right: 8px; min-width: 24px; height: 24px; border-radius: 99px; background: rgba(7, 13, 34, .8); font-size: 13px; display: grid; place-items: center; }
.pd-hint { justify-self: center; }

.pd-done { text-align: center; justify-items: center; }
.pd-badge { font-size: 54px; animation: float 3s ease-in-out infinite; }
.pd-board { width: 100%; display: grid; gap: 6px; text-align: left; }
.pd-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 14px; background: rgba(7, 13, 34, .5); flex-wrap: wrap; }
.pd-row.blend .pd-tag { background: #7c3aed; }
.pd-row.silent .pd-tag { background: #047857; }
.pd-tag { font-weight: 900; padding: 4px 10px; border-radius: 99px; font-size: 14px; min-width: 70px; text-align: center; }
.pd-mini { min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(20, 31, 69, .9); font-weight: 800; font-size: 16px; }
.pd-seed { margin: 0; font-size: 13px; color: var(--ink-soft); }
.pd-next { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .pd-chip.squish, .pd-sneak.shush .shh, .pd-l.is-blend, .pd-l.is-shh, .pd-badge, .pd-card.shake, .pd-l.nope { animation: none; }
}