/* NixStein — Steinpost (send page /<lang>/<slug>/, receive page /s/CODE). Uses the tokens of site.css.
   Scripts: assets/js/post-art.js, post-send.js, post.js. CSP: no inline styles. */

.post-send [hidden], .post-recv [hidden] { display: none !important; }
.post-recv button.button { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }

/* ---------- a rock with eyes (img + svg overlay) ---------- */
.pe-stone { position: relative; }
.pe-stone img { width: 100%; height: auto; }
.pe-stone svg.pe-eyes { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-kind-art, .ps-eye-art { position: relative; display: block; }
.ps-kind-art svg.pe-eyes { position: absolute; inset: 0; width: 100%; height: 100%; }

@keyframes pe-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-2.2deg); }
  45% { transform: rotate(1.6deg); }
  65% { transform: rotate(-0.8deg); }
  80% { transform: rotate(0.4deg); }
}
@keyframes pe-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  70% { transform: translateY(1px); }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-alive .pe-stone, .pe-stone.pr-alive { transform-origin: 50% 82%; animation: pe-wobble 4.2s ease-in-out infinite; }
  .ps-hero .pe-stone:nth-child(2) { animation-delay: -1.4s; animation-duration: 5s; }
  .ps-hero .pe-stone:nth-child(3) { animation-delay: -2.6s; animation-duration: 4.6s; }
  .ps-kind.is-on .ps-kind-art, .ps-eye.is-on .ps-eye-art { animation: pe-hop 0.45s ease-out 1; }
  .ps-sentence.is-rolled { animation: pe-hop 0.4s ease-out 1; }
}

/* ---------- send page ---------- */
.post-send .wrap { max-width: 44rem; }
.ps-head { text-align: center; margin-bottom: 1.5rem; }
.ps-head h1 { font-size: clamp(2rem, 8.5vw, 3rem); }
.ps-head .lead { max-width: 34rem; margin: 0 auto 1rem; }
.ps-hero { display: flex; justify-content: center; align-items: flex-end; gap: 0.25rem; margin: 0 auto 1rem; max-width: 22rem; }
.ps-hero .pe-stone { width: 33%; }
.ps-hero .pe-stone:nth-child(2) { width: 38%; margin-bottom: 0.4rem; }
.ps-reply { display: inline-block; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem; font-weight: 600; }
.ps-nojs { border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; background: var(--card); }

.ps-step { border: 0; margin: 0 0 2.25rem; padding: 0; min-width: 0; }
.ps-step legend { font-family: var(--font-head); font-size: clamp(1.35rem, 5.5vw, 1.7rem); font-weight: 600; line-height: 1.2; padding: 0; margin-bottom: 0.75rem;
                  display: flex; align-items: center; gap: 0.6rem; }
.ps-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
          background: var(--moss); color: var(--on-moss); font-family: var(--font-body); font-size: 1rem; font-weight: 700; }

/* radio tiles: native inputs, visually hidden but focusable */
.ps-kind input, .ps-eye input, .ps-tab input, .ps-wish-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ps-kind, .ps-eye, .ps-tab, .ps-wish-opt { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ps-kind:focus-within, .ps-eye:focus-within, .ps-tab:focus-within, .ps-wish-opt:focus-within { outline: 3px solid var(--moss); outline-offset: 2px; }

.ps-kinds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.ps-kind { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%;
           padding: 0.45rem 0.35rem 0.55rem; border: 2px solid var(--line); border-radius: 14px; background: var(--card); }
.ps-kind.is-on { border-color: var(--moss); box-shadow: 0 4px 14px rgba(46, 62, 38, 0.18); }
.ps-kind-art { width: 100%; max-width: 6.5rem; }
.ps-kind-name { font-weight: 700; font-size: 0.84rem; line-height: 1.15; margin-top: 0.15rem; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }
.ps-badge { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
.ps-badge-paid { color: #5C4A08; background: #F4E4A1; border-radius: 999px; padding: 0.05rem 0.5rem; font-weight: 700; }
.ps-special.ps-kind, .ps-kind.ps-special { border-color: rgba(201, 162, 39, 0.65); }
.ps-kind.ps-special.is-on { border-color: var(--gold); box-shadow: 0 4px 16px rgba(201, 162, 39, 0.35); }

.ps-eyes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ps-eye { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; border: 2px solid var(--line); border-radius: 14px; background: var(--card); height: 100%; }
.ps-eye.is-on { border-color: var(--moss); box-shadow: 0 4px 14px rgba(46, 62, 38, 0.18); }
.ps-eye-art { width: 100%; max-width: 8rem; }
.ps-eye-name { font-weight: 700; font-size: 0.92rem; }

.ps-inline { display: flex; gap: 0.5rem; align-items: stretch; }
.ps-inline input { flex: 1; min-width: 0; }
.post-send .field input[type="text"], .post-send .field input[type="email"] {
  display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--stone); border-radius: 10px; -webkit-appearance: none; appearance: none;
}
.post-send .field input[aria-invalid="true"] { border-color: var(--alert); border-width: 2px; }
.ps-dice-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0.5rem 0.95rem; border-radius: 999px;
               border: 2px solid var(--moss); background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ps-dice-btn span { font-size: 1.35rem; line-height: 1; }
.ps-dice-btn:hover { background: rgba(94, 122, 79, 0.1); }

.ps-tabs { display: inline-flex; border: 2px solid var(--moss); border-radius: 999px; padding: 3px; margin-bottom: 0.9rem; }
.ps-tab span { display: inline-block; padding: 0.45rem 1.1rem; border-radius: 999px; font-weight: 600; min-height: 40px; line-height: 1.6; }
.ps-tab.is-on span { background: var(--moss); color: var(--on-moss); }

.ps-sentences { list-style: none; padding: 0; margin: 0 0 0.9rem; display: grid; gap: 0.55rem; }
.ps-sentence { display: block; width: 100%; text-align: left; font: inherit; font-size: 1.05rem; font-weight: 600; color: #2A2B2E; cursor: pointer;
               border: 0; border-radius: 999px; padding: 0.8rem 1.25rem; min-height: 52px;
               box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.12); }
.ps-sentence-1 { background: linear-gradient(135deg, #ECE4D6, #CFC3AB); }
.ps-sentence-2 { background: linear-gradient(135deg, #DCE3E8, #B5C1C8); }
.ps-sentence-3 { background: linear-gradient(135deg, #F1E5CC, #D9C49A); }
.ps-sentence:hover { filter: brightness(1.03); }
.ps-sentence:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }

.ps-wishes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; max-height: 22rem; overflow-y: auto; padding: 2px; }
.ps-wish-opt span { display: inline-block; border: 2px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; background: var(--card); font-size: 0.95rem; }
.ps-wish-opt.is-on span { border-color: var(--moss); background: var(--moss); color: var(--on-moss); }
.ps-parts-error { border: 1px dashed var(--line); border-radius: 12px; padding: 0.9rem 1rem; }

.ps-preview { margin: 0.5rem 0 2rem; }
.ps-preview-h { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); text-align: center; margin-bottom: 0.6rem; }

/* kind groups (Geschäftsmodell 2.0): everyday (1 a day free), rare, special */
.ps-group { margin: 0 0 1.4rem; }
.ps-group-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.15rem; margin: 0 0 0.2rem; }
.ps-group-badge { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.12rem 0.65rem; }
.ps-group-badge.ps-badge-free { background: var(--moss); color: var(--on-moss); }
.ps-group-badge.ps-badge-rare { background: rgba(94, 122, 79, 0.14); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--moss); }
.ps-group-badge.ps-badge-special, .ps-badge.ps-badge-special { color: #5C4A08; background: #F4E4A1; }
.ps-group-text { margin: 0 0 0.5rem; }
.ps-badge.ps-badge-special { border-radius: 999px; padding: 0.05rem 0.5rem; font-weight: 700; }
.ps-badge.ps-badge-rare { font-weight: 700; color: var(--text); }
.ps-free-state { display: inline-block; margin: 0 0 0.6rem; padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.88rem; font-weight: 700;
                 background: rgba(94, 122, 79, 0.14); color: var(--text); }
.ps-free-state.is-used { background: var(--paper); color: var(--muted); font-weight: 600; }
.ps-free-state:empty { display: none; }

/* price summary, "Seen?" extra, offer panel */
.ps-pay { margin: 0 0 1.25rem; }
.ps-seen-row { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 0.9rem; margin-bottom: 0.75rem; }
.ps-seen-row .hint { grid-column: 2; }
.ps-seen-incl { background: var(--card); border: 1px dashed var(--moss); border-radius: 14px; padding: 0.7rem 0.9rem; }
.ps-sum { font-size: 1.05rem; margin: 0.25rem 0 0; }
.ps-sum-items { color: var(--muted); }
.ps-sum strong { white-space: nowrap; }
.ps-offer { border: 2px solid var(--moss); border-radius: 16px; padding: 1.1rem 1.1rem 0.6rem; margin: 0 0 1.5rem; background: var(--card); }
.ps-offer h2 { font-size: 1.3rem; }
.ps-offer h2:focus { outline: none; }
.ps-offer-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }

/* rock bag */
.ps-bag, .ps-sent { margin: 2.5rem 0 0; padding: 1.25rem 1.1rem 0.6rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.ps-bag h2:focus { outline: none; }
.ps-bag-left { font-weight: 700; font-size: 1.1rem; margin: 0.25rem 0 0.4rem; }
.ps-bag-left:empty { display: none; }
.ps-bag-code { font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace; font-weight: 700; letter-spacing: 0.06em;
               background: var(--paper); border-radius: 6px; padding: 0.1rem 0.4rem; user-select: all; }
.ps-bag-have { border-left: 4px solid var(--moss); padding-left: 0.8rem; margin: 0.5rem 0 1rem; }
.ps-bag-redeem input { text-transform: uppercase; letter-spacing: 0.05em; }
.ps-sizes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ps-size { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; cursor: pointer; height: 100%;
           padding: 0.8rem 0.5rem; border: 2px solid var(--line); border-radius: 14px; background: var(--bg, transparent); }
.ps-size input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ps-size:focus-within { outline: 3px solid var(--moss); outline-offset: 2px; }
.ps-size.is-on, .ps-size:has(input:checked) { border-color: var(--moss); box-shadow: 0 4px 14px rgba(46, 62, 38, 0.18); }
.ps-size-n { font-weight: 700; }
.ps-size-p { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; }

/* "Meine verschickten Steine" */
.ps-sent-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.45rem; }
.ps-sent-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 14px;
                color: var(--text); text-decoration: none; min-height: 52px; }
.ps-sent-item:hover { border-color: var(--moss); }
.ps-sent-art { width: 3.2rem; height: auto; flex: none; }
.ps-sent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-sent-name { font-weight: 700; overflow-wrap: anywhere; }
.ps-sent-meta { font-size: 0.82rem; color: var(--muted); }
.ps-sent-open { flex: none; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.65rem; box-shadow: inset 0 0 0 1.5px var(--moss); }
.ps-sender-box { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.9rem; }

.ps-special { border: 2px solid var(--gold); border-radius: 16px; padding: 1.1rem 1.1rem 0.4rem; margin: 0 0 1.5rem; background: var(--card); }
.ps-special h2 { font-size: 1.35rem; }
.post-send button.button { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.post-send button.button:disabled { opacity: 0.6; cursor: progress; }

/* the card (preview, done view, receive page) */
.pr-card { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 1.25rem 1rem 1.4rem;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); }
.pr-art { width: min(100%, 17rem); margin: 0 auto 0.4rem; }
.pr-name { font-family: var(--font-head); font-size: clamp(1.8rem, 8vw, 2.5rem); font-weight: 700; margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
.pr-from { font-family: var(--font-head); font-style: italic; color: var(--muted); margin: 0.2rem 0 0.9rem; }
.pr-says { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.4rem; }
.pr-lines { list-style: none; padding: 0; margin: 0 auto; max-width: 28rem; display: grid; gap: 0.4rem; }
.pr-lines li { background: var(--paper); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.pr-lines:empty { display: none; }

/* kind info: "name · age" + character (send page card, preview/done card, receive page) – filled by NixPost.kindInfo */
.pk { margin: 0.3rem auto 0.7rem; max-width: 26rem; }
.pk-meta { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.pk-name { font-weight: 700; color: var(--text); }
.pk-name + .pk-age::before { content: "·"; margin: 0 0.4em; color: var(--muted); }
.pk-char { margin: 0.45rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.pk-label { display: inline-block; border: 1.5px solid var(--moss); border-radius: 999px; padding: 0.1rem 0.7rem; font-size: 0.82rem; font-weight: 700;
            line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.pk-line { font-family: var(--font-head); font-style: italic; font-size: 0.98rem; line-height: 1.4; color: var(--muted); }
.pk-card { margin: 0.75rem 0 0; max-width: none; padding: 0.8rem 1rem 0.85rem; background: var(--card); border: 1px solid var(--line);
           border-left: 4px solid var(--moss); border-radius: 14px; text-align: left; }
.pk-card .pk-meta { font-size: 0.95rem; }
.pk-card .pk-char { align-items: flex-start; }
.pr-card .pk + .pr-from { margin-top: 0.1rem; }

.ps-done { margin-top: 1rem; }
.ps-done h2:focus { outline: none; }
.ps-done-grid { display: grid; gap: 1.5rem; margin-top: 1rem; }
.ps-link-label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.ps-link { display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
           font-size: 0.92rem; color: var(--text); background: var(--card); border: 1px solid var(--stone); border-radius: 10px; }
.ps-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
.post-recv .ps-buttons { justify-content: center; }
.button-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--moss); }
button.button { border: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.ps-status { min-height: 1.5em; color: var(--moss); font-weight: 600; margin: 0.25rem 0 0.75rem; }
.ps-story { margin: 0.5rem 0 1.25rem; }
.ps-story-img { width: 12rem; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); margin: 0.5rem 0; }
.post-recv .ps-story-img { margin: 0.5rem auto; }
.ps-qr { margin: 0 0 1rem; }
.ps-qr svg { width: 9.5rem; height: 9.5rem; border-radius: 10px; border: 1px solid var(--line); }
.post-recv .ps-qr svg { margin: 0 auto; }
@media (min-width: 46rem) {
  .ps-kinds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; }
  .ps-eyes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-done-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ---------- receive page ---------- */
.post-recv { padding: 1.5rem 0 3rem; }
.post-recv .wrap { max-width: 34rem; text-align: center; }
.post-recv .kicker { margin-bottom: 0.75rem; }
.pr-loading { padding: 2rem 0; }
.pr-art-ghost { opacity: 0.45; filter: grayscale(1); }
@media (prefers-reduced-motion: no-preference) {
  .pr-loading .pr-art-ghost { animation: pe-wobble 1.6s ease-in-out infinite; }
}
.pr-actions { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0.5rem; }
.pr-actions .button { min-width: 15rem; }
.pr-keep { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.1rem 0.5rem; margin: 1rem 0; }
.pr-keep h2 { font-size: 1.35rem; }
.pr-keep h2:focus { outline: none; }
.pr-keep .steps { padding-left: 1.3rem; }
.pr-keep-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pr-share { margin: 2.25rem 0 1rem; }
.pr-report { margin: 2rem 0 0; }
.pr-report-btn { background: none; border: 0; padding: 0.5rem; font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 44px; }
.pr-report-btn:disabled { text-decoration: none; cursor: default; }
.pr-error { padding: 1.5rem 0; }
.pr-error .pr-art { width: min(70%, 13rem); }
.post-page .site-foot ul { justify-content: center; }

/* sender view (/s/CODE?k=TOKEN): "Gesehen?" */
.pr-sender { text-align: left; background: var(--card); border: 2px solid var(--moss); border-radius: 18px; padding: 1rem 1.1rem 0.4rem; margin: 0 0 1.5rem; }
.pr-sender .kicker { margin-bottom: 0.25rem; }
.pr-sender h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.pr-seen { list-style: none; padding: 0; margin: 0 0 0.75rem; display: grid; gap: 0.4rem; }
.pr-seen-item { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.pr-seen-dot { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.pr-seen-item.is-yes .pr-seen-dot { background: var(--moss); box-shadow: none; }
.pr-seen-item:not(.is-yes) { color: var(--muted); }
.pr-upsell-q { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; margin: 0 0 0.35rem; }
.pr-seen-form { margin-top: 0.5rem; }
.post-recv .field input[type="email"] { display: block; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--stone); border-radius: 10px; -webkit-appearance: none; appearance: none; }

/* ---------- Runde 3: limited special kinds, stone lock ("Errätst du meinen Code?") ---------- */
.ps-limit { display: inline-block; margin-top: 0.2rem; font-size: 0.68rem; font-weight: 700; line-height: 1.25; border-radius: 999px;
            padding: 0.08rem 0.45rem; background: #FCE1C2; color: #6E3504; }
.ps-kind.ps-limited { border-style: dashed; }
.pk-limit { margin: 0.45rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.pk-limit::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; border-radius: 50%; background: #E8862A;
                   vertical-align: 0.08em; }
.pk-card .pk-limit { text-align: left; }

.ps-num-lock { background: var(--gold); color: #2A2B2E; }
.ps-lockstep .ps-tabs { margin-top: 0.4rem; }
.ps-lock-row { background: var(--card); border: 2px solid rgba(201, 162, 39, 0.65); border-radius: 14px; padding: 0.8rem 0.9rem; margin-bottom: 0.9rem; }
.ps-lock-row label { font-weight: 700; }
.ps-lock-row .hint { grid-column: 2; }
.ps-lock-body { border-left: 4px solid var(--gold); padding-left: 0.9rem; }
.ps-label { font-weight: 600; margin: 0 0 0.35rem; }
.post-send select { display: block; width: 100%; min-height: 48px; padding: 0.55rem 0.8rem; font: inherit; color: var(--text); background: var(--card);
                    border: 1px solid var(--stone); border-radius: 10px; }
.post-send select[aria-invalid="true"] { border-color: var(--alert); border-width: 2px; }
.ps-lock-note { display: flex; gap: 0.55rem; align-items: flex-start; background: var(--paper); border-radius: 12px; padding: 0.6rem 0.8rem; }
.ps-lock-note-icon { flex: none; position: relative; width: 0.95rem; height: 0.75rem; margin-top: 0.55rem; border-radius: 3px; background: var(--gold); }
.ps-lock-note-icon::before { content: ""; position: absolute; left: 0.17rem; top: -0.45rem; width: 0.45rem; height: 0.5rem; border: 2.5px solid var(--muted);
                             border-bottom: 0; border-radius: 0.4rem 0.4rem 0 0; }

/* stone dial: four pebbles with ▲/▼ (NixPost.dial) */
.pl-dials { display: flex; gap: 0.5rem; justify-content: flex-start; margin: 0 0 0.4rem; }
.post-recv .pl-dials { justify-content: center; }
.pl-dial { display: flex; flex-direction: column; align-items: center; width: 4.1rem; padding: 0.2rem 0; border-radius: 46% 54% 50% 50% / 42% 44% 56% 58%;
           background: radial-gradient(circle at 35% 30%, #F6F1E7, #D8CDB8 60%, #A99A80); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.14); }
.pl-dial:nth-child(2) { border-radius: 52% 48% 46% 54% / 46% 40% 60% 54%; background: radial-gradient(circle at 35% 30%, #EEF2F4, #C9D2D8 60%, #8C9AA3); }
.pl-dial:nth-child(3) { border-radius: 48% 52% 54% 46% / 40% 46% 54% 60%; background: radial-gradient(circle at 35% 30%, #F7EEDB, #E2CFA8 60%, #B49A6C); }
.pl-dial:nth-child(4) { border-radius: 54% 46% 50% 50% / 44% 42% 58% 56%; background: radial-gradient(circle at 35% 30%, #F3EDF0, #D6C8CF 60%, #A3909A); }
.pl-dial-btn { width: 2.75rem; height: 1.6rem; border: 0; background: transparent; color: #3A3B3F; font-size: 0.8rem; line-height: 1; cursor: pointer; border-radius: 999px;
               -webkit-tap-highlight-color: transparent; }
.pl-dial-btn:hover { background: rgba(255, 255, 255, 0.45); }
.pl-dial-btn:disabled { opacity: 0.4; cursor: default; }
.pl-dials .pl-dial input.pl-dial-in { display: block; min-height: 0; width: 2.6rem; height: 2.9rem; text-align: center; font-family: var(--font-head); font-size: 1.85rem; font-weight: 700; color: #2A2B2E;
              background: rgba(255, 255, 255, 0.55); border: 2px solid rgba(42, 43, 46, 0.18); border-radius: 12px; padding: 0; caret-color: #2A2B2E; }
.pl-dials .pl-dial input.pl-dial-in:focus { outline: 3px solid var(--moss); outline-offset: 1px; background: rgba(255, 255, 255, 0.85); }
.pl-dials .pl-dial input.pl-dial-in[aria-invalid="true"] { border-color: var(--alert); }
@keyframes pl-roll-up { 0% { transform: translateY(6px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@keyframes pl-roll-down { 0% { transform: translateY(-6px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .pl-dial.is-roll-up .pl-dial-in { animation: pl-roll-up 0.18s ease-out 1; }
  .pl-dial.is-roll-down .pl-dial-in { animation: pl-roll-down 0.18s ease-out 1; }
}

/* lock card (preview, done view, receive page) */
.pl-box { position: relative; margin: 0.4rem auto 0.9rem; max-width: 26rem; padding: 0.9rem 1rem 0.6rem; border: 2px dashed rgba(201, 162, 39, 0.75);
          border-radius: 18px; background: var(--paper); text-align: center; }
.pl-box .pl-lock { display: block; width: 3.3rem; height: auto; margin: 0 auto 0.3rem; overflow: visible; }
.pl-art { position: relative; width: 4.2rem; margin: 0 auto; }
.pl-art .pl-lock { width: 100%; }
.pl-kicker { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pl-title { font-family: var(--font-head); font-size: clamp(1.3rem, 5.5vw, 1.6rem); font-weight: 700; line-height: 1.2; margin: 0.15rem 0 0.35rem; }
.pl-title:focus { outline: none; }
.pl-text { margin: 0 0 0.5rem; }
.pl-hint { display: inline-block; margin: 0 0 0.8rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--card); font-weight: 600;
           box-shadow: inset 0 0 0 1.5px var(--gold); overflow-wrap: anywhere; }
.pl-hint:empty { display: none; }
.pl-form .pl-word input { display: block; width: 100%; max-width: 18rem; margin: 0 auto; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; font-size: 1.15rem;
                          text-align: center; color: var(--text); background: var(--card); border: 1px solid var(--stone); border-radius: 10px; }
.pl-form .pl-word label { text-align: center; }
.pl-msg { min-height: 1.4em; margin: 0.3rem 0 0.5rem; font-weight: 600; }
.pl-msg.is-bad { color: var(--alert); }
.pl-form .button:disabled { opacity: 0.6; cursor: default; }
.pl-preview .pl-title { font-size: 1.2rem; }
.pl-preview .pl-hint { margin-bottom: 0.4rem; }
.pr-lines.is-locked li { filter: blur(6px); user-select: none; opacity: 0.75; }
.pl-chip { display: inline-block; margin: 0 0 0.6rem; padding: 0.15rem 0.75rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
           box-shadow: inset 0 0 0 1.5px var(--gold); }
.pl-chip::before, .pl-solved-t::before { content: "\2726"; margin-right: 0.35em; color: var(--gold); }
.pl-solved { margin: 0.4rem 0 0.6rem; }
.pl-solved-t { display: inline-block; font-family: var(--font-head); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 700; color: var(--text); }
.pl-solved-t:focus { outline: none; }
.pr-done-secret, .ps-done-secret { margin: 0.25rem 0 0.5rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--card); border: 2px dashed var(--gold); }
.ps-done-secret-code { margin: 0; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }

/* "Geheimnis gelüftet": shackle opens, sparkles fly, lines pop in one after another */
.pl-lock .pl-shackle { transform-box: fill-box; transform-origin: 85% 100%; }
.pl-lock.is-open .pl-shackle { transform: translateY(-5px) rotate(24deg); }
.pl-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.pl-burst span { position: absolute; left: -0.5em; top: -0.6em; font-size: 1.1rem; color: var(--gold); opacity: 0; }
.pl-burst span:nth-child(3n) { color: #E46A9A; }
@keyframes pl-fly { 0% { transform: translate(0, 0) scale(0.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
@keyframes pl-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pl-in { 0% { transform: translateY(10px) scale(0.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pl-shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
.pl-burst span:nth-child(1) { --dx: -70px; --dy: -50px; } .pl-burst span:nth-child(2) { --dx: 70px; --dy: -46px; }
.pl-burst span:nth-child(3) { --dx: -90px; --dy: 4px; }   .pl-burst span:nth-child(4) { --dx: 92px; --dy: 10px; }
.pl-burst span:nth-child(5) { --dx: -40px; --dy: -86px; } .pl-burst span:nth-child(6) { --dx: 44px; --dy: -84px; }
.pl-burst span:nth-child(7) { --dx: -60px; --dy: 52px; }  .pl-burst span:nth-child(8) { --dx: 62px; --dy: 56px; }
.pl-burst span:nth-child(9) { --dx: 0; --dy: -100px; }    .pl-burst span:nth-child(10) { --dx: 4px; --dy: 70px; }
@media (prefers-reduced-motion: no-preference) {
  .pl-lock .pl-shackle { transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .pr-lock.is-solving .pl-art { animation: pl-shake 0.4s ease-in-out 1; }
  .pl-burst span { animation: pl-fly 1.1s ease-out 1 forwards; }
  .pl-burst span:nth-child(even) { animation-delay: 0.08s; }
  .pl-solved:not([hidden]) .pl-solved-t { animation: pl-pop 0.5s ease-out 1; }
  .pr-lines.is-reveal li { opacity: 0; animation: pl-in 0.45s ease-out 1 forwards; }
  .pr-lines.is-reveal li:nth-child(1) { animation-delay: 0.1s; }
  .pr-lines.is-reveal li:nth-child(2) { animation-delay: 0.45s; }
  .pr-lines.is-reveal li:nth-child(3) { animation-delay: 0.8s; }
  .pr-lock.is-solving { transition: opacity 0.4s ease 0.7s; opacity: 0.2; }
}