/* RUGCORDER live layer: arrival, the reader's verdict, interrogation, prior record, dossier, highlights. */

/* the case arrives: slides out of the folder, a stamp makes the paper jump */
.cover.arrive{animation:arrive .8s cubic-bezier(.2,.8,.2,1)}
@keyframes arrive{from{transform:translateY(70px) rotate(2.5deg);opacity:.2}}
.reveal{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease}
.reveal:not(.in){transform:translateY(28px) rotate(.6deg)}
.findings li.typing span::after{content:"\258C";animation:caret .6s steps(1) infinite;color:var(--stamp)}
@keyframes caret{50%{opacity:0}}

/* the reader's verdict */
.guess{display:grid;gap:10px;justify-items:stretch;width:100%;padding:14px;border:2px dashed var(--ink);background:rgba(255,255,255,.35);transform:rotate(-1deg)}
.guess-q{margin:0;font:400 14px/1.45 var(--stencil)}
.guess-opts{display:grid;gap:6px}
.guess-opts button{font:800 15px var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--paper);border:2px solid var(--ink);border-radius:3px;padding:8px 10px;cursor:pointer;color:var(--ink);transition:background .15s,color .15s,transform .15s}
.guess-opts button:hover{background:var(--ink);color:var(--paper);transform:rotate(-1deg) scale(1.02)}
.guess-skip{background:none;border:0;cursor:pointer;font:400 12px var(--type);color:var(--muted);text-decoration:underline}
.stamps.pending{display:none}
.guess-result{margin:0;padding:10px 12px;font-size:14px;border-left:4px solid var(--ink);background:rgba(255,255,255,.4)}
.guess-result.hit{border-color:var(--green)}
.guess-result.miss{border-color:var(--stamp)}
.guess-result b{font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}

/* interrogation room */
.int-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
.questions{display:grid;gap:8px}
.questions button{text-align:left;background:#F6F1E4;border:1px solid var(--rule);border-left:5px solid var(--ink);padding:10px 12px;cursor:pointer;font:700 15px var(--type);color:var(--ink);box-shadow:2px 2px 0 var(--rule);transition:transform .15s,border-color .15s,box-shadow .15s}
.questions button:hover{transform:translateX(4px);border-left-color:var(--stamp)}
.questions button.on{border-left-color:var(--stamp);background:#FFF9EA;box-shadow:4px 4px 0 var(--paper-edge)}
.answer-sheet{background:#FBF8F0;border:1px solid var(--rule);padding:16px 18px;min-height:260px;box-shadow:inset 0 0 0 6px #F3EEE2;position:sticky;top:12px}
.int-who{display:flex;gap:12px;align-items:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed var(--rule)}
.int-who b{display:block;font:800 16px var(--display);letter-spacing:.1em;text-transform:uppercase}
.int-who span{font-size:12px;color:var(--muted)}
.int-badge{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#E8D9AE 0 9px,transparent 9.5px),radial-gradient(circle at 50% 100%,#E8D9AE 0 16px,transparent 16.5px),var(--ink)}
.answer .q{margin:0 0 8px;font:700 14px var(--type);color:var(--muted)}
.answer .a{margin:0;font:400 16px/1.65 var(--type);white-space:pre-line}
.answer .a b{background:linear-gradient(transparent 14%,rgba(243,211,74,.7) 14%,rgba(243,211,74,.7) 86%,transparent 86%)}
.wref{background:none;border:0;padding:0 1px;cursor:pointer;font-weight:700;font-family:var(--type);font-size:inherit;color:var(--stamp);text-decoration:underline dotted;word-break:break-all}

/* prior record */
.rec-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.rh-photo{position:relative;width:92px;height:110px;background:#2A251D;border:6px solid #FBF8F0;box-shadow:0 6px 14px rgba(0,0,0,.25);transform:rotate(-3deg);display:grid;place-items:end center;overflow:hidden}
.rh-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.rh-photo span{position:relative;font:800 10px var(--display);letter-spacing:.2em;background:var(--ink);color:var(--paper);padding:1px 6px;margin-bottom:4px}
.rh-name{margin:2px 0;font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.rh-meta{margin:6px 0 0;font-size:13px;color:var(--ink-soft)}
.red{color:var(--stamp)}
.green{color:var(--green)}
.rec-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px dashed var(--rule)}
.rec-stats div{padding:12px 10px 12px 0;display:grid;gap:2px}
.rec-stats div+div{padding-left:12px;border-left:1px dashed var(--rule)}
.rec-stats b{font:800 26px var(--display)}
.mugshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-top:20px}
.mug{position:relative;text-align:left;background:#FBF8F0;border:0;padding:8px 8px 10px;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.2);transform:rotate(var(--r));transition:transform .2s,box-shadow .2s;display:grid;gap:3px;color:var(--ink);font:400 12px var(--type)}
.mug:hover{transform:rotate(0) translateY(-6px) scale(1.04);box-shadow:0 14px 24px rgba(0,0,0,.28);z-index:2}
.mug.me{outline:3px solid var(--stamp);cursor:default}
.mug-img{position:relative;display:block;aspect-ratio:1;background:repeating-linear-gradient(0deg,#3A3227 0 10px,#2E281F 10px 20px);overflow:hidden}
.mug-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.85) contrast(1.1)}
.mug:hover .mug-img img{filter:none}
.mug-img i{position:absolute;left:0;right:0;bottom:0;font:800 11px var(--display);letter-spacing:.2em;font-style:normal;background:var(--ink);color:var(--paper);text-align:center;padding:2px}
.mug b{font:800 16px var(--display);letter-spacing:.06em;margin-top:4px}
.mug-stamp{position:absolute;right:8px;top:14px;font:800 11px var(--display);letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;padding:1px 5px;transform:rotate(8deg);background:rgba(251,248,240,.85)}
.mug-stamp.grad{color:var(--green)}
.mug-stamp.dead{color:var(--stamp)}
.mug-stamp.case{color:var(--ink)}
.mug-now{color:var(--muted)}
.rec-hint{margin-top:16px}

/* dossier */
.dossier-box{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:#E8D9AE;color:var(--ink);background-image:var(--grain);padding:30px 28px 24px;border-radius:2px 12px 12px 12px;box-shadow:0 40px 90px rgba(0,0,0,.7);display:grid;gap:14px}
#dossier.in .dossier-box{animation:pullDossier .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pullDossier{from{transform:translateY(40px) rotate(-2deg);opacity:.3}}
.dossier-tab{position:absolute;left:0;top:0;background:var(--ink);color:#E8D9AE;padding:3px 14px;font:800 12px var(--display);letter-spacing:.24em;text-transform:uppercase}
.dossier-box .x{position:absolute;right:14px;top:14px}
.ds-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end;border-bottom:2px solid var(--ink);padding-bottom:12px}
.ds-head h3{font:800 42px/1 var(--display);margin:2px 0}
.ds-addr{margin:0;font-size:12px;color:var(--ink-soft);word-break:break-all}
.ds-marks{display:flex;flex-wrap:wrap;gap:4px}
.ds-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(255,255,255,.35);border:1px solid var(--rule)}
.ds-grid div{padding:10px 12px;display:grid;gap:2px}
.ds-grid div+div{border-left:1px dashed var(--rule)}
.ds-grid b{font:800 22px var(--display)}
.ds-grid small{font-size:11px;color:var(--ink-soft)}
.ds-links{display:flex;flex-wrap:wrap;gap:10px}
.ds-acts{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto;border-top:1px solid var(--ink)}
.ds-acts li{display:grid;grid-template-columns:70px 48px 100px 70px minmax(0,1fr);gap:8px;padding:5px 2px;border-bottom:1px dashed var(--rule);font-size:13px}
.ds-creator{margin:0}
.ds-actions{display:flex;gap:8px;flex-wrap:wrap}

/* one wallet, highlighted everywhere it appears */
.openable{cursor:pointer}
.ledger tr.hl td{background:rgba(243,211,74,.45)}
.hrow.hl{background:rgba(243,211,74,.45)}
.transcript li.hl{background:rgba(243,211,74,.35)}
#fundMap .card.hl rect{fill:#FFF3B8}
#fundMap .card:hover rect{stroke:#B3261E;stroke-width:2}
.wlink{border-bottom:1px dotted var(--ink)}
.wref.hl{background:rgba(243,211,74,.6)}

/* the board comes alive: strings pull taut, cards land on their pins */
.board-wrap.in .string{stroke-dasharray:1;stroke-dashoffset:1;animation:pull .9s cubic-bezier(.3,.6,.2,1) var(--d) forwards}
@keyframes pull{to{stroke-dashoffset:0}}


@media (max-width:900px){
  .int-grid{grid-template-columns:minmax(0,1fr)}
  .answer-sheet{position:static}
  .rec-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-stats div+div{border-left:0;padding-left:0}
  .rec-stats div:nth-child(2n){padding-left:12px;border-left:1px dashed var(--rule)}
  .ds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-grid div:nth-child(3){border-left:0}
  .ds-acts li{grid-template-columns:60px 42px minmax(0,1fr) 60px}
  .ds-acts li span:last-child{display:none}
  .guess{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal:not(.in){transform:none;opacity:1}
  .cover.arrive,body.thud .cover,#dossier.in .dossier-box{animation:none}
  .board-wrap.in .string,.board-wrap.in #fundMap .card{animation:none}
}
@media (max-width:520px){.mugshots{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}