a, button, summary { -webkit-tap-highlight-color: #a8bc9250; }
.diary-ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 26%);
  width: min(100%, 430px);
  margin: 25px 10px 0 auto;
  transform: rotate(-2.5deg);
  border-radius: 3px 5px 4px 2px;
  box-shadow: 0 5px 13px #10221b71;
  color: var(--red);
}
.ticket-face, .ticket-stub { min-height: 129px; }
.ticket-face { padding: 17px 21px; border-radius: 3px 0 0 2px; background: var(--note-paper); }
.ticket-face strong { display: block; font: 34px/1.05 var(--serif); margin: 4px 0; }
.ticket-face > p:last-child { color: var(--muted); font-size: 13px; }
.ticket-stub {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 8px;
  transform: translate(var(--stub-x, 0px), var(--stub-y, 0px)) rotate(2deg);
  border: 0;
  border-left: 1px dashed #668260;
  border-radius: 0 5px 4px 0;
  background: #c9d5bd;
  cursor: grab;
  touch-action: none;
  user-select: none;
  font: 9px var(--mono);
}
.ticket-stub[data-dragging] { cursor: grabbing; box-shadow: 0 6px 14px #162c2473; }
.ticket-code { width: 62%; height: 30px; background: repeating-linear-gradient(90deg, #3c5944 0 2px, transparent 2px 3px, #3c5944 3px 4px, transparent 4px 7px, #3c5944 7px 10px, transparent 10px 12px); }

@media (max-width: 600px) {
  .ticket-face { padding: 13px; }
  .ticket-face strong { font-size: 27px; }
  .ticket-stub, .ticket-face { min-height: 106px; }
}