/* Sell your soul: the drop. Page layout and the jar. Shared parts come from felt.css. */

.droproom {
  position: relative; isolation: isolate; overflow: clip;
  padding: 30px clamp(18px, 4vw, 56px) 40px;
  background: radial-gradient(55% 50% at 27% 52%, rgba(246, 181, 68, .12), transparent 70%), radial-gradient(70% 55% at 22% 8%, #3a2654 0%, transparent 70%), var(--night);
}
.droproom::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--grain); background-size: 180px; mix-blend-mode: overlay; opacity: .2; }
.scenery { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hang-star { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.hang-star .thread-line { height: var(--len); background: rgba(251, 241, 225, .3); }
.hang-star svg { width: 30px; height: 30px; margin-top: -2px; }
.hang-star.s1 { left: 4%; } .hang-star.s2 { right: 5%; }

.drop-grid {
  position: relative; z-index: 2; display: grid; align-items: start;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px);
  max-width: 1240px; margin: 0 auto; min-height: min(calc(100svh - 150px), 760px);
}

/* ---------- the jar (FLORA renders: body, lid, sealed; they share one crop box) ---------- */
.jar-stage { position: relative; display: grid; place-items: center; padding: 120px 0 40px; }
@media (min-width: 900px) { .jar-stage { position: sticky; top: 10px; } }
.jar { --jw: min(27vw, 360px); position: relative; width: var(--jw); aspect-ratio: 760 / 1166; cursor: pointer; transition: transform .35s var(--squish), filter .4s; }
.jar > img { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.jar-body, .jar-sealed { filter: drop-shadow(0 22px 26px rgba(8, 3, 16, .5)); }
.jar-sealed { opacity: 0; transition: opacity .4s; z-index: 3; }
.jar-body { z-index: 1; transition: opacity .4s; }
/* the lid: the render is tilted, so it is stood upright and scaled to 0.82 of the jar's own render scale */
.jar > .jar-lid { left: .5%; top: -16%; width: 99%; z-index: 4; opacity: 0; transform: translateY(-150%) rotate(-10deg); transform-origin: 50% 60%; rotate: 12deg; scale: 1 .78; transition: opacity .35s; }
.jar-shadow { position: absolute; left: 8%; right: 8%; bottom: -3%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 3, 16, .6), transparent); z-index: 0; }
.jar-halo { position: absolute; left: -18%; right: -18%; top: -6%; bottom: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 90, .32), rgba(255, 150, 60, .08) 60%, transparent); opacity: .5; transition: opacity .4s, transform .5s var(--soft); pointer-events: none; z-index: 0; }
/* the soul: the house ghost's eyeless render with code eyes, sized to the sleeping ghost in the sealed render */
.jar-soul { position: absolute; left: 50.6%; top: 57.7%; width: 45%; translate: -50% -50%; z-index: 2; visibility: hidden; pointer-events: none; }
.jar-soul .fg-glow { left: 50%; top: 58%; width: 130%; opacity: .7; }
.jar-frames { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; }
.jar.is-framed > img, .jar.is-framed .jar-soul { visibility: hidden; }
/* the mouth label: where to drop */
.jar-mouth {
  position: absolute; left: 50%; top: 55%; translate: -50% -50%; z-index: 2; width: 62%; padding: 14px 10px 15px; text-align: center;
  font: 400 clamp(22px, 2.1vw, 30px)/1 var(--display); color: var(--ink);
  border-radius: 50% / 44%; border: 2.6px dashed rgba(42, 27, 61, .45); background: rgba(255, 238, 205, .55);
  transition: opacity .3s, transform .3s var(--squish);
}
/* the paper: soul.md waiting at the jar's foot */
.paper { position: absolute; right: -24%; bottom: -2%; z-index: 5; width: 34%; display: grid; justify-items: center; gap: 2px; opacity: 0; translate: 0 -40px; rotate: 8deg; transition: opacity .35s, translate .5s var(--squish), filter .4s; pointer-events: none; }
.paper svg { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(8, 3, 16, .5)); }
.paper-name { max-width: 140%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px var(--mono); color: var(--cream); background: var(--night-deep); padding: 2px 8px; border-radius: 8px; }

.jar[data-state="dragging"] { transform: scale(1.04); }
.jar[data-state="dragging"] .jar-halo { opacity: 1; transform: scale(1.08); }
.jar[data-state="dragging"] .jar-mouth { transform: scale(1.08) rotate(-2deg); background: rgba(255, 214, 140, .8); border-color: var(--ink); }
.jar[data-state="reading"] .paper, .jar[data-state="scanning"] .paper, .jar[data-state="sealing"] .paper, .jar[data-state="error"] .paper { opacity: 1; translate: 0 0; }
.jar[data-state="scanning"] .paper svg { animation: read 1.6s ease-in-out infinite; }
@keyframes read { 50% { filter: drop-shadow(0 0 14px rgba(255, 200, 110, .8)) drop-shadow(0 8px 10px rgba(8, 3, 16, .5)); } }
.jar:not([data-state="idle"]):not([data-state="dragging"]) .jar-mouth { opacity: 0; }
.jar[data-state="scanning"] .jar-halo, .jar[data-state="sealing"] .jar-halo { opacity: .85; }
.jar[data-state="error"] { filter: saturate(.7) brightness(.85); }
.jar[data-state="error"] .jar-halo { opacity: 0; }
.jar[data-state="error"] .paper { rotate: 18deg; translate: 10px 6px; }
.paper.is-empty { opacity: .55 !important; filter: grayscale(.4); }
.jar[data-state="key"] .paper { opacity: 0 !important; }

/* sealed: the sleeping-ghost render takes over to the pixel */
.jar.is-sealed .jar-sealed { opacity: 1; }
.jar.is-sealed .jar-soul, .jar.is-sealed > .jar-lid { opacity: 0; transition: opacity .4s; }   /* the body stays under the sealed render, so the cross-fade never dims */
.jar.is-sealed .jar-halo { opacity: 1; }
/* a frozen frame mid-seal, for ?state=sealing */
.jar.pose-mid .jar-soul { visibility: visible; transform: translate(-8%, -128%) scale(.66); }
.jar.pose-mid > .jar-lid { opacity: 1; transform: translateY(-42%) rotate(3deg); }

/* the name tag: hung from the jar's bow, its stitches and the soul's name sewn on left to right */
.jar-tag { position: absolute; left: 77.6%; top: 18.5%; z-index: 5; display: flex; flex-direction: column; align-items: center; translate: -50% 0; transform-origin: 50% 0; opacity: 0; pointer-events: none; width: max-content; }
.jar-tag .thread-line { width: 1.5px; height: clamp(18px, 3vw, 36px); background: rgba(120, 82, 48, .9); }
.jar-tag-card {
  position: relative; display: block; width: clamp(104px, 11vw, 150px); padding: 9px 10px 10px; margin-top: -2px;
  background: var(--cream); color: var(--ink); text-align: center; border-radius: 12px 15px 11px 14px; rotate: 4deg;
  box-shadow: 0 4px 0 #c7ad86, 0 10px 14px rgba(8, 3, 16, .4);
}
.jar-tag-card::before { content: ""; position: absolute; inset: 4px; border: 2px dashed rgba(42, 27, 61, .4); border-radius: 9px 12px 8px 11px; pointer-events: none; }
.jar-tag-card::after { content: ""; position: absolute; left: 50%; top: 5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 2px solid var(--brass); background: var(--night-deep); }
.jar-tag-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 6px; font: 400 clamp(21px, 1.9vw, 27px)/1 var(--display); text-wrap: balance; }
.jar.has-tag .jar-tag { opacity: 1; }
.jar.is-sewing .jar-tag { animation: tag-drop .7s var(--squish) both; }
.jar.is-sewing .jar-tag-card::before { animation: sew 1s .45s steps(14, end) both; }
.jar.is-sewing .jar-tag-name { animation: sew 1s .6s steps(16, end) both; }
@keyframes tag-drop { from { opacity: 0; translate: -50% -30px; } }
@keyframes sew { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* the key arrives on a thread beside the sealed jar, on the side away from the name tag */
.drop-key { position: absolute; top: 0; left: calc(50% - var(--jw-half, 150px) - clamp(96px, 10vw, 150px)); width: clamp(96px, 10vw, 150px); display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; z-index: 6; opacity: 0; pointer-events: none; }
.drop-key .thread-line { height: 150px; background: rgba(251, 241, 225, .5); }
.drop-key img { width: 100%; height: auto; margin-top: -6%; filter: drop-shadow(0 12px 14px rgba(8, 3, 16, .5)); }
.drop-key.is-in { opacity: 1; }

/* ---------- the copy column ---------- */
.drop-copy { max-width: 640px; padding: 30px 0 20px; }
.drop-copy .title { font-size: clamp(56px, 5.8vw, 92px); }
.drop-copy .title-md { font-size: clamp(46px, 4.6vw, 72px); }
.drop-copy .dropzone { margin-top: 6px; }
.judge { margin-top: 26px; padding: 18px 20px; border-radius: 18px 22px 16px 20px; background: rgba(62, 43, 88, .55); position: relative; }
.judge::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(251, 241, 225, .2); border-radius: 13px 17px 11px 15px; pointer-events: none; }
.judge > * { position: relative; }
.judge-title { margin: 0; font-weight: 800; }
.judge p { margin: 0 0 12px; color: var(--lilac-text); }
.judge .judge-title { color: var(--cream); margin-bottom: 2px; }
.file-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 16px var(--mono); color: var(--lilac-text); }
.file-line svg { width: 28px; height: 28px; flex: none; }
#scan-box .scan { padding: 8px 18px; border-radius: 22px 26px 20px 24px; background: var(--night-soft); box-shadow: 0 6px 0 var(--night-deep); }
#scan-banner:not(:empty) { margin: 0 0 18px; }
h1[tabindex="-1"]:focus { outline: none; }
.proto { margin-top: 16px; }
.test-note { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; font-weight: 700; color: var(--lilac-text); }
.key-actions { margin-top: 22px; }
.dl-status { min-height: 1.5em; margin: 10px 0 18px; font-weight: 700; font-size: 16px; color: var(--mint); }
.claim .once-key span { word-break: break-all; }
.claim + .field-note { margin-top: 12px; }
.next { margin-top: 26px; }
#key-box .warn { margin-top: 4px; }

@media (max-width: 899px) {
  .droproom { padding: 16px 16px 30px; }
  .drop-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .jar-stage { padding: 70px 0 10px; }
  .jar { --jw: 168px; }
  .drop-key { --jw-half: 70px; width: 76px; left: calc(50% - 84px - 76px); }
  .jar-tag-card { width: 92px; padding: 7px 6px 8px; }
  .drop-key .thread-line { height: 80px; }
  .paper { width: 40%; right: -34%; }
  .paper-name { font-size: 11px; }
  .drop-copy { padding: 10px 0; }
  .drop-copy .title { font-size: 52px; }
  .drop-copy .title-md { font-size: 44px; }
  .jar-mouth { font-size: 18px; padding: 9px 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .jar, .paper, .jar-halo, .jar-sealed, .jar-body { transition: none; }
  .jar.is-sewing .jar-tag, .jar.is-sewing .jar-tag-card::before, .jar.is-sewing .jar-tag-name { animation: none; }
}