/* ── Sidebar: panels, suspect cards, clues, accuse, sticky note ── */

.sidebar{display:flex;flex-direction:column;gap:16px}
#susList{max-height:60vh;overflow-y:auto}

.panel{
  background:#f5f0e8;border-radius:4px;padding:16px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4), 1px 2px 4px rgba(0,0,0,0.2);
  border:1px solid #d0c4b0;
  position:relative;
}
.panel::before{
  content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle, #e44 30%, #b22 70%);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);z-index:1;
}
.panel-head{
  font-family:'Playfair Display',serif;font-size:14px;color:#3a2a18;
  margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #d4c8b4;
}

/* Polaroid suspect card */
.sus-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 10px;margin-bottom:6px;border-radius:10px;
  cursor:pointer;transition:all 0.15s;border:2.5px solid transparent;
  position:relative;min-height:44px;
}
.sus-card.gender-m{background:#eef4fb}
.sus-card.gender-f{background:#fbeff4}
.sus-card:hover{border-color:#ddd}
.sus-card.selected{background:#fffbeb;border-color:#f4c87a}
.sus-card.placed{opacity:0.35;pointer-events:none}
.sus-card.placed::after{
  content:'✓';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:#4a9;font-size:16px;font-weight:900;
}

/* Polaroid portrait */
.polaroid{
  width:48px;height:56px;background:#fff;border:2px solid #ddd;
  border-radius:3px;padding:3px 3px 10px;flex-shrink:0;
  box-shadow:1px 2px 4px rgba(0,0,0,0.1);
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;position:relative;
}
.polaroid svg{width:100%;height:42px}
.polaroid .pol-name{
  position:absolute;bottom:1px;left:0;right:0;text-align:center;
  font-family:'Caveat',cursive;font-size:8px;color:#444;
}

.sus-info{flex:1;min-width:0}
.sus-name{
  font-family:'Caveat',cursive;font-size:18px;font-weight:700;color:var(--dark);
}
/* Speech bubble clue */
.sus-clue{
  background:#f0f0f0;border-radius:10px;padding:4px 10px;
  font-size:11px;color:#555;margin-top:3px;position:relative;
  display:inline-block;line-height:1.4;
}
.sus-clue::before{
  content:'';position:absolute;top:-5px;left:14px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:5px solid #f0f0f0;
}
.sus-clue b{color:var(--dark)}

/* Victim card */
.victim-card{
  background:#fff0f0;border-color:#e8b0b0;cursor:default;
}
.victim-card .sus-name{color:#c44}
.victim-badge{
  display:inline-block;background:#d44;color:#fff;font-size:9px;
  font-weight:700;padding:2px 8px;border-radius:4px;margin-top:3px;
}

/* ── Accuse ── */
.accuse-panel{text-align:center;overflow-wrap:break-word}
.accuse-panel p{font-size:11px;color:#777;margin-bottom:12px;line-height:1.6;word-wrap:break-word}
.accuse-select{
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;
  padding:10px;border:2px solid #ddd;border-radius:8px;
  width:100%;margin-bottom:10px;background:#fff;color:var(--dark);cursor:pointer;
}
.accuse-btn{
  width:100%;font-family:'Playfair Display',serif;font-size:15px;
  padding:12px;border-radius:10px;border:2.5px solid #d44;
  background:#fff;color:#d44;cursor:pointer;font-weight:700;
  transition:all 0.15s;
}
.accuse-btn:hover:not(:disabled){background:#d44;color:#fff}
.accuse-btn:disabled{opacity:0.3;cursor:not-allowed}

/* Sticky note */
.sticky{
  background:#fef6a0;padding:14px 16px;border-radius:2px;
  box-shadow:2px 3px 12px rgba(0,0,0,0.3);
  transform:rotate(1.5deg);margin-top:8px;
  border-bottom:2px solid #e8d880;
}
.sticky p{
  font-family:'Caveat',cursive;font-size:15px;color:#555;line-height:1.5;
}
.sticky .sig{
  font-family:'Caveat',cursive;font-size:14px;color:#888;
  margin-top:8px;text-align:right;font-style:italic;
}